@hitachivantara/uikit-react-core 5.83.0 → 5.83.1

package/dist/esm/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton } from \"../Button\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { DEFAULT_LOCALE, isDate } from \"../Calendar/utils\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { getDateLabel } from \"./utils\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear\",\n  /** Invalid Date label. */\n  invalidDateLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"disablePortal\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n      | \"onToggle\"\n      | \"placeholder\"\n    > {\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   * 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?: Partial<typeof DEFAULT_LABELS>;\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   */\n  // TODO: remove this in favour of discriminated union\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   * 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   * 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?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\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 = forwardRef<HTMLDivElement, HvDatePickerProps>(\n  function HvDatePicker(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required,\n      disabled,\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      expanded,\n      defaultExpanded,\n      onToggle,\n      rangeMode = false,\n      startAdornment,\n      horizontalPlacement = \"right\",\n      locale = DEFAULT_LOCALE,\n      showActions,\n      showClear,\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      calendarProps,\n      ...others\n    } = useDefaultProps(\"HvDatePicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id);\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [calendarOpen, setCalendarOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded),\n    );\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 { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    useEffect(() => {\n      setStartDate(rangeMode ? startValue : value, true);\n      setEndDate(endValue, true);\n    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\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 (\n          required &&\n          (!isDate(startDate) || (rangeMode && !isDate(endDate)))\n        ) {\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      if (rangeMode || showActions) {\n        handleCancel();\n      }\n    };\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (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      onToggle?.(evt, open);\n      setCalendarOpen(open);\n      if (!open) handleCalendarClose();\n    };\n\n    const focusOnContainer = () => {\n      focusTarget.current?.focus();\n    };\n\n    const handleDateChange: HvCalendarProps[\"onChange\"] = (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: HvCalendarProps[\"onInputChange\"] = (\n      event,\n      newDate,\n      position,\n    ) => {\n      if (!isDate(newDate)) return;\n\n      if (!rangeMode) {\n        handleDateChange(event as any, 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      <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n        {showClear && (\n          <div className={classes.leftContainer}>\n            <HvButton\n              id={setId(id, \"action\", \"clear\")}\n              className={classes.action}\n              variant=\"primaryGhost\"\n              onClick={handleClear}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n          </div>\n        )}\n        <div className={classes.rightContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"apply\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleApply}\n          >\n            {labels?.applyLabel}\n          </HvButton>\n          <HvButton\n            id={setId(id, \"action\", \"cancel\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleCancel}\n          >\n            {labels?.cancelLabel}\n          </HvButton>\n        </div>\n      </HvActionBar>\n    );\n\n    const dateValue = rangeMode ? { startDate, endDate } : startDate;\n    const dateString = getDateLabel(dateValue, rangeMode, locale);\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      <HvFormElement\n        id={id}\n        name={name}\n        value={dateValue}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        readOnly={readOnly}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          classes={{\n            root: classes.dropdown,\n            panel: classes.panel,\n            header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n            headerOpen: classes.dropdownHeaderOpen,\n            placeholder: cx(classes.inputText, {\n              [classes.dateText]: dateString,\n            }),\n            container: classes.container,\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={dateString || placeholder || \"\"}\n          adornment={<Calendar className={classes.icon} color=\"currentcolor\" />}\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          {...otherDropdownProps}\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(classes.error)}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvDatePicker"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton } from \"../Button\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { DEFAULT_LOCALE, isDate } from \"../Calendar/utils\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { getDateLabel } from \"./utils\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear\",\n  /** Invalid Date label. */\n  invalidDateLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"disablePortal\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n      | \"onToggle\"\n      | \"placeholder\"\n    > {\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   * 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?: Partial<typeof DEFAULT_LABELS>;\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   */\n  // TODO: remove this in favour of discriminated union\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   * 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   * 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?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\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 = forwardRef<HTMLDivElement, HvDatePickerProps>(\n  function HvDatePicker(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required,\n      disabled,\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      expanded,\n      defaultExpanded,\n      onToggle,\n      rangeMode = false,\n      startAdornment,\n      horizontalPlacement = \"right\",\n      locale = DEFAULT_LOCALE,\n      showActions,\n      showClear,\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      calendarProps,\n      ...others\n    } = useDefaultProps(\"HvDatePicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id);\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [calendarOpen, setCalendarOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded),\n    );\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 { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    useEffect(() => {\n      setStartDate(rangeMode ? startValue : value, true);\n      setEndDate(endValue, true);\n    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\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 (\n          required &&\n          (!isDate(startDate) || (rangeMode && !isDate(endDate)))\n        ) {\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      if (rangeMode || showActions) {\n        handleCancel();\n      }\n    };\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (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      onToggle?.(evt, open);\n      setCalendarOpen(open);\n      if (!open) handleCalendarClose();\n    };\n\n    const focusOnContainer = () => {\n      focusTarget.current?.focus();\n    };\n\n    const handleDateChange: HvCalendarProps[\"onChange\"] = (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: HvCalendarProps[\"onInputChange\"] = (\n      event,\n      newDate,\n      position,\n    ) => {\n      if (!isDate(newDate)) return;\n\n      if (!rangeMode) {\n        handleDateChange(event as any, 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      <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n        {showClear && (\n          <div className={classes.leftContainer}>\n            <HvButton\n              id={setId(id, \"action\", \"clear\")}\n              className={classes.action}\n              variant=\"primaryGhost\"\n              onClick={handleClear}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n          </div>\n        )}\n        <div className={classes.rightContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"apply\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleApply}\n          >\n            {labels?.applyLabel}\n          </HvButton>\n          <HvButton\n            id={setId(id, \"action\", \"cancel\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleCancel}\n          >\n            {labels?.cancelLabel}\n          </HvButton>\n        </div>\n      </HvActionBar>\n    );\n\n    const dateValue = rangeMode ? { startDate, endDate } : startDate;\n    const dateString = getDateLabel(dateValue, rangeMode, locale);\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      <HvFormElement\n        id={id}\n        name={name}\n        value={dateValue}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        readOnly={readOnly}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          classes={{\n            root: classes.dropdown,\n            panel: classes.panel,\n            header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n            headerOpen: classes.dropdownHeaderOpen,\n            placeholder: cx(classes.inputText, {\n              [classes.dateText]: dateString,\n            }),\n            container: classes.container,\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={dateString || placeholder || \"\"}\n          adornment={<Calendar className={classes.icon} color=\"currentcolor\" />}\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          {...otherDropdownProps}\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(classes.error)}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvDatePicker"],"mappings":"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"}

package/dist/esm/DatePicker/DatePicker.styles.js

@@ -13,10 +13,7 @@ const { staticClasses, useClasses } = createClasses("HvDatePicker", {
     display: "flex",
     alignItems: "flex-start"
   },
-  label: {
-    paddingBottom: "6px",
-    display: "block"
-  },
+  label: {},
   description: {},
   error: {},
   dropdown: {

package/dist/esm/DatePicker/DatePicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n  root: {\n    position: \"relative\",\n  },\n  actionContainer: {\n    justifyContent: \"space-between\",\n  },\n  leftContainer: {},\n  rightContainer: {},\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\n  description: {},\n  error: {},\n\n  dropdown: {\n    display: \"block\",\n  },\n  panel: {},\n\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative_120}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative_120}`,\n    },\n  },\n  dropdownHeaderOpen: {},\n  icon: {},\n  action: {\n    \"&:first-of-type\": {\n      marginRight: theme.space.xs,\n    },\n  },\n  inputText: {},\n  dateText: {\n    color: \"inherit\",\n    fontWeight: theme.typography.label.fontWeight,\n  },\n  container: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB,CAAC;AAAA,EAEjB,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EAER,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO,CAAC;AAAA,EAER,uBAAuB;AAAA,IACrB,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,WAAW;AAAA,MACT,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,WAAW,CAAA;AACb,CAAC;"}
+{"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n  root: {\n    position: \"relative\",\n  },\n  actionContainer: {\n    justifyContent: \"space-between\",\n  },\n  leftContainer: {},\n  rightContainer: {},\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {},\n  description: {},\n  error: {},\n\n  dropdown: {\n    display: \"block\",\n  },\n  panel: {},\n\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative_120}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative_120}`,\n    },\n  },\n  dropdownHeaderOpen: {},\n  icon: {},\n  action: {\n    \"&:first-of-type\": {\n      marginRight: theme.space.xs,\n    },\n  },\n  inputText: {},\n  dateText: {\n    color: \"inherit\",\n    fontWeight: theme.typography.label.fontWeight,\n  },\n  container: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB,CAAC;AAAA,EAEjB,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EAER,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO,CAAC;AAAA,EAER,uBAAuB;AAAA,IACrB,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,WAAW;AAAA,MACT,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,WAAW,CAAA;AACb,CAAC;"}

package/dist/esm/Dropdown/Dropdown.js

@@ -227,6 +227,7 @@ const HvDropdown = fixedForwardRef(function HvDropdown2(props, ref) {
           hasLabel && /* @__PURE__ */ jsx(
             HvLabel,
             {
+              showGutter: true,
               id: setId(elementId, "label"),
               label,
               className: classes.label

package/dist/esm/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListValue } from \"../List\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { getSelected, getSelectionLabel } from \"./utils\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps<\n  // TODO: make default `false` in v6\n  Multiple extends boolean = boolean,\n  OptionValue extends HvListValue = HvListValue,\n> extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"placement\"\n      | \"popperProps\"\n      | \"disablePortal\"\n      | \"variableWidth\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n    > {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\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?: HvDropdownStatus;\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?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (\n    selected: Multiple extends true ? OptionValue[] : OptionValue | undefined,\n  ) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: OptionValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: Multiple;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabels;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n  /** Label for overwrite the default header behavior. */\n  select: undefined as string | undefined,\n  /** Label used for the All checkbox action. */\n  selectAll: \"All\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** The label used in the middle of the multiSelection count. */\n  searchPlaceholder: \"Search\",\n  /** The label used in search. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = fixedForwardRef(function HvDropdown<\n  Multiple extends boolean = false,\n  OptionValue extends HvListValue = HvListValue,\n>(\n  props: HvDropdownProps<Multiple, OptionValue>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    classes: classesProp,\n    className,\n\n    id,\n    name,\n\n    required,\n    disabled,\n    readOnly,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    placeholder = \"Select...\",\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    onCancel,\n    onToggle,\n    onClickOutside,\n\n    onFocus,\n    onBlur,\n\n    values,\n    multiSelect = false,\n    showSearch,\n    expanded,\n    defaultExpanded,\n    notifyChangesOnFirstRender,\n    labels: labelsProp,\n    hasTooltips,\n    disablePortal,\n    singleSelectionToggle = true,\n    placement,\n    variableWidth,\n    popperProps = {},\n    height,\n    maxHeight,\n    virtualized,\n    baseDropdownProps = {},\n    listProps = {},\n    ...others\n  } = useDefaultProps(\"HvDropdown\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id);\n\n  const [validationState, setValidationState] = useControlled<HvFormStatus>(\n    status,\n    \"standBy\",\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values),\n  );\n\n  const [internalValues, setInternalValues] = useState(values);\n\n  // Hack - Keeping track of internal values for validation purposes since useState is async\n  const internalValuesRef = useRef(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n    internalValuesRef.current = values;\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values),\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (import.meta.env.DEV && virtualized && !height) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"Dropdown/List in virtualized mode requires a height. Please define it.\",\n    );\n  }\n\n  const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n  const {\n    ref: refProp,\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    ...otherBaseDropdownProps\n  } = baseDropdownProps;\n  const headerForkedRef = useForkRef(dropdownHeaderRefProp, dropdownHeaderRef);\n\n  const dropdownForkedRef = useForkRef(ref, refProp);\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n    onToggle?.(event, open);\n\n    setIsOpen(open);\n\n    if (!open) {\n      // also run built-in validation when closing without changes\n      // as the user \"touched\" the input\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required) {\n          const hasSelection =\n            getSelected(internalValuesRef.current).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /** Applies the selected values to the state */\n  const handleSelection: HvDropdownListProps[\"onChange\"] = (\n    listValues,\n    commitChanges,\n    toggle,\n    notifyChanges = true,\n  ) => {\n    const selected = getSelected(listValues);\n\n    if (commitChanges) {\n      setInternalValues(listValues as any);\n      internalValuesRef.current = listValues as any;\n\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, listValues),\n      );\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && selected.length === 0) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n    }\n    if (notifyChanges) {\n      onChange?.((multiSelect ? selected : selected[0]) as any);\n    }\n    if (toggle) {\n      handleToggle(undefined as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n    onCancel?.(evt as any);\n\n    handleToggle(evt as any, false);\n\n    // focus-ring won't be visible even if using the keyboard:\n    // https://github.com/WICG/focus-visible/issues/88\n    dropdownHeaderRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef,\n  ) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  const buildHeaderLabel = () => {\n    const hasSelection = getSelected(internalValues).length > 0;\n    return labels?.select || !multiSelect ? (\n      <HvTypography\n        component=\"div\"\n        variant=\"body\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n          [classes.placeholderClosed]: !(isOpen || hasSelection),\n        })}\n      >\n        {selectionLabel.selected}\n      </HvTypography>\n    ) : (\n      <HvTypography\n        component=\"div\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n        })}\n        variant=\"body\"\n      >\n        <b>{selectionLabel.selected}</b>\n        {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n      </HvTypography>\n    );\n  };\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    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        ref={dropdownForkedRef}\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: cx(classes.dropdown, {\n            [classes.readOnly]: readOnly,\n          }),\n          arrow: classes.arrow,\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\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        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={headerForkedRef}\n        {...otherBaseDropdownProps}\n      >\n        <HvDropdownList\n          id={setId(elementId, \"values\")}\n          classes={{\n            rootList: classes.rootList,\n            dropdownListContainer: classes.dropdownListContainer,\n          }}\n          values={internalValues}\n          multiSelect={multiSelect}\n          showSearch={showSearch}\n          onChange={handleSelection}\n          onCancel={handleCancel}\n          labels={labels}\n          notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n          hasTooltips={hasTooltips}\n          singleSelectionToggle={singleSelectionToggle}\n          aria-label={ariaLabel}\n          aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          maxHeight={maxHeight}\n          virtualized={virtualized}\n          {...listProps}\n        />\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvDropdown"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListValue } from \"../List\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { getSelected, getSelectionLabel } from \"./utils\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps<\n  // TODO: make default `false` in v6\n  Multiple extends boolean = boolean,\n  OptionValue extends HvListValue = HvListValue,\n> extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"placement\"\n      | \"popperProps\"\n      | \"disablePortal\"\n      | \"variableWidth\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n    > {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\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?: HvDropdownStatus;\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?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (\n    selected: Multiple extends true ? OptionValue[] : OptionValue | undefined,\n  ) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: OptionValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: Multiple;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabels;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n  /** Label for overwrite the default header behavior. */\n  select: undefined as string | undefined,\n  /** Label used for the All checkbox action. */\n  selectAll: \"All\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** The label used in the middle of the multiSelection count. */\n  searchPlaceholder: \"Search\",\n  /** The label used in search. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = fixedForwardRef(function HvDropdown<\n  Multiple extends boolean = false,\n  OptionValue extends HvListValue = HvListValue,\n>(\n  props: HvDropdownProps<Multiple, OptionValue>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    classes: classesProp,\n    className,\n\n    id,\n    name,\n\n    required,\n    disabled,\n    readOnly,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    placeholder = \"Select...\",\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    onCancel,\n    onToggle,\n    onClickOutside,\n\n    onFocus,\n    onBlur,\n\n    values,\n    multiSelect = false,\n    showSearch,\n    expanded,\n    defaultExpanded,\n    notifyChangesOnFirstRender,\n    labels: labelsProp,\n    hasTooltips,\n    disablePortal,\n    singleSelectionToggle = true,\n    placement,\n    variableWidth,\n    popperProps = {},\n    height,\n    maxHeight,\n    virtualized,\n    baseDropdownProps = {},\n    listProps = {},\n    ...others\n  } = useDefaultProps(\"HvDropdown\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id);\n\n  const [validationState, setValidationState] = useControlled<HvFormStatus>(\n    status,\n    \"standBy\",\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values),\n  );\n\n  const [internalValues, setInternalValues] = useState(values);\n\n  // Hack - Keeping track of internal values for validation purposes since useState is async\n  const internalValuesRef = useRef(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n    internalValuesRef.current = values;\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values),\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (import.meta.env.DEV && virtualized && !height) {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"Dropdown/List in virtualized mode requires a height. Please define it.\",\n    );\n  }\n\n  const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n  const {\n    ref: refProp,\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    ...otherBaseDropdownProps\n  } = baseDropdownProps;\n  const headerForkedRef = useForkRef(dropdownHeaderRefProp, dropdownHeaderRef);\n\n  const dropdownForkedRef = useForkRef(ref, refProp);\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n    onToggle?.(event, open);\n\n    setIsOpen(open);\n\n    if (!open) {\n      // also run built-in validation when closing without changes\n      // as the user \"touched\" the input\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required) {\n          const hasSelection =\n            getSelected(internalValuesRef.current).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /** Applies the selected values to the state */\n  const handleSelection: HvDropdownListProps[\"onChange\"] = (\n    listValues,\n    commitChanges,\n    toggle,\n    notifyChanges = true,\n  ) => {\n    const selected = getSelected(listValues);\n\n    if (commitChanges) {\n      setInternalValues(listValues as any);\n      internalValuesRef.current = listValues as any;\n\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, listValues),\n      );\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && selected.length === 0) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n    }\n    if (notifyChanges) {\n      onChange?.((multiSelect ? selected : selected[0]) as any);\n    }\n    if (toggle) {\n      handleToggle(undefined as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n    onCancel?.(evt as any);\n\n    handleToggle(evt as any, false);\n\n    // focus-ring won't be visible even if using the keyboard:\n    // https://github.com/WICG/focus-visible/issues/88\n    dropdownHeaderRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef,\n  ) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  const buildHeaderLabel = () => {\n    const hasSelection = getSelected(internalValues).length > 0;\n    return labels?.select || !multiSelect ? (\n      <HvTypography\n        component=\"div\"\n        variant=\"body\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n          [classes.placeholderClosed]: !(isOpen || hasSelection),\n        })}\n      >\n        {selectionLabel.selected}\n      </HvTypography>\n    ) : (\n      <HvTypography\n        component=\"div\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n        })}\n        variant=\"body\"\n      >\n        <b>{selectionLabel.selected}</b>\n        {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n      </HvTypography>\n    );\n  };\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    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              showGutter\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        ref={dropdownForkedRef}\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: cx(classes.dropdown, {\n            [classes.readOnly]: readOnly,\n          }),\n          arrow: classes.arrow,\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\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        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={headerForkedRef}\n        {...otherBaseDropdownProps}\n      >\n        <HvDropdownList\n          id={setId(elementId, \"values\")}\n          classes={{\n            rootList: classes.rootList,\n            dropdownListContainer: classes.dropdownListContainer,\n          }}\n          values={internalValues}\n          multiSelect={multiSelect}\n          showSearch={showSearch}\n          onChange={handleSelection}\n          onCancel={handleCancel}\n          labels={labels}\n          notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n          hasTooltips={hasTooltips}\n          singleSelectionToggle={singleSelectionToggle}\n          aria-label={ariaLabel}\n          aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          maxHeight={maxHeight}\n          virtualized={virtualized}\n          {...listProps}\n        />\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["HvDropdown"],"mappings":"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"}

package/dist/esm/Dropdown/Dropdown.styles.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvDropdown", {
     display: "inline-block"
   },
   labelContainer: { display: "flex", alignItems: "flex-start" },
-  label: { paddingBottom: "6px", display: "block" },
+  label: {},
   description: {},
   error: {},
   placeholder: {

package/dist/esm/Dropdown/Dropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.styles.js","sources":["../../../src/Dropdown/Dropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdown\", {\n  root: {\n    width: \"100%\",\n    position: \"relative\",\n    display: \"inline-block\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: { paddingBottom: \"6px\", display: \"block\" },\n  description: {},\n  error: {},\n  placeholder: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholderClosed: {\n    color: theme.colors.secondary_80,\n  },\n  selectionDisabled: {\n    lineHeight: theme.space.md,\n    color: theme.colors.secondary_60,\n  },\n  dropdown: {\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n\n    \"& $dropdownHeaderInvalid\": {\n      border: `1px solid ${theme.colors.negative_120}`,\n    },\n  },\n  arrow: {},\n  dropdownHeader: {},\n  dropdownHeaderInvalid: {},\n  dropdownHeaderOpen: {},\n  dropdownListContainer: {},\n  rootList: {},\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  readOnly: {\n    \"& $dropdownHeader\": {\n      border: `1px solid ${theme.colors.secondary_80}`,\n      backgroundColor: theme.colors.atmo1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,EAAE,eAAe,OAAO,SAAS,QAAQ;AAAA,EAChD,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,mBAAmB;AAAA,IACjB,YAAY,MAAM,MAAM;AAAA,IACxB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,uBAAuB,CAAC;AAAA,EACxB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;"}
+{"version":3,"file":"Dropdown.styles.js","sources":["../../../src/Dropdown/Dropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdown\", {\n  root: {\n    width: \"100%\",\n    position: \"relative\",\n    display: \"inline-block\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: {},\n  description: {},\n  error: {},\n  placeholder: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholderClosed: {\n    color: theme.colors.secondary_80,\n  },\n  selectionDisabled: {\n    lineHeight: theme.space.md,\n    color: theme.colors.secondary_60,\n  },\n  dropdown: {\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n\n    \"& $dropdownHeaderInvalid\": {\n      border: `1px solid ${theme.colors.negative_120}`,\n    },\n  },\n  arrow: {},\n  dropdownHeader: {},\n  dropdownHeaderInvalid: {},\n  dropdownHeaderOpen: {},\n  dropdownListContainer: {},\n  rootList: {},\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  readOnly: {\n    \"& $dropdownHeader\": {\n      border: `1px solid ${theme.colors.secondary_80}`,\n      backgroundColor: theme.colors.atmo1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,mBAAmB;AAAA,IACjB,YAAY,MAAM,MAAM;AAAA,IACxB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,uBAAuB,CAAC;AAAA,EACxB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;"}

package/dist/esm/FileUploader/DropZone/DropZone.js

@@ -81,6 +81,7 @@ const HvDropZone = (props) => {
       /* @__PURE__ */ jsx(
         HvLabel,
         {
+          showGutter: true,
           id: setId(id, "input-file-label"),
           htmlFor: setId(id, "input-file"),
           label: labels?.dropzone,

package/dist/esm/FileUploader/DropZone/DropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.js","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvInfoMessage, HvLabel } from \"../../FormElement\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvTypography } from \"../../Typography\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  accept?: React.InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\n// TODO: remove/review in `v6`: delegate to HTML `accept` and/or add custom validation\nfunction validateAccept(file?: File, acceptAttr?: string) {\n  if (!file || !acceptAttr) return true;\n\n  const acceptEntries = acceptAttr.split(\",\");\n  const fileName = file.name || \"\";\n  const mimeType = (file.type || \"\").toLowerCase();\n  const baseMimeType = mimeType.replace(/\\/.*$/, \"\");\n\n  return acceptEntries.some((type) => {\n    const validType = type.trim().toLowerCase();\n    if (validType.charAt(0) === \".\") {\n      return fileName.toLowerCase().endsWith(validType);\n    }\n    // This is something like a image/* mime type\n    if (validType.endsWith(\"/*\")) {\n      return baseMimeType === validType.replace(/\\/.*$/, \"\");\n    }\n    return mimeType === validType;\n  });\n}\n\nexport const HvDropZone = (props: HvDropZoneProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    labels,\n    accept,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    disabled = false,\n    onFilesAdded,\n  } = useDefaultProps(\"HvDropZone\", props);\n  const id = useUniqueId(idProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDragState] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const handleDragLeave = () => {\n    setDragState(false);\n  };\n\n  const handleDragEnter: React.DragEventHandler = (event) => {\n    if (disabled) return;\n    event.stopPropagation();\n    event.preventDefault();\n    setDragState(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.values(filesList);\n\n    const newFiles = filesToProcess.map((file) => {\n      const newFile: HvFileData = new File([file], file.name, {\n        type: file.type,\n        lastModified: file.lastModified,\n      });\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !accept ||\n        accept.includes(file.type?.split(\"/\")[1]) || // TODO: remove in v6\n        validateAccept(file, accept);\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      return newFile;\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles\n              ? labels.acceptedFiles\n              : accept && `\\u00A0(${accept?.replaceAll(\",\", \", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={handleDragEnter}\n          onDragOver={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDropCapture={handleDragLeave}\n          onDrop={(event) => {\n            if (disabled) return;\n\n            const { files } = event.dataTransfer;\n            if (multiple === true || files.length === 1) {\n              event.stopPropagation();\n              event.preventDefault();\n              onChangeHandler(files);\n            }\n          }}\n          ref={inputRef}\n          accept={accept}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropZone.js","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvInfoMessage, HvLabel } from \"../../FormElement\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvTypography } from \"../../Typography\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\nimport { convertUnits } from \"../utils\";\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  accept?: React.InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\n// TODO: remove/review in `v6`: delegate to HTML `accept` and/or add custom validation\nfunction validateAccept(file?: File, acceptAttr?: string) {\n  if (!file || !acceptAttr) return true;\n\n  const acceptEntries = acceptAttr.split(\",\");\n  const fileName = file.name || \"\";\n  const mimeType = (file.type || \"\").toLowerCase();\n  const baseMimeType = mimeType.replace(/\\/.*$/, \"\");\n\n  return acceptEntries.some((type) => {\n    const validType = type.trim().toLowerCase();\n    if (validType.charAt(0) === \".\") {\n      return fileName.toLowerCase().endsWith(validType);\n    }\n    // This is something like a image/* mime type\n    if (validType.endsWith(\"/*\")) {\n      return baseMimeType === validType.replace(/\\/.*$/, \"\");\n    }\n    return mimeType === validType;\n  });\n}\n\nexport const HvDropZone = (props: HvDropZoneProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    labels,\n    accept,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    disabled = false,\n    onFilesAdded,\n  } = useDefaultProps(\"HvDropZone\", props);\n  const id = useUniqueId(idProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDragState] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const handleDragLeave = () => {\n    setDragState(false);\n  };\n\n  const handleDragEnter: React.DragEventHandler = (event) => {\n    if (disabled) return;\n    event.stopPropagation();\n    event.preventDefault();\n    setDragState(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.values(filesList);\n\n    const newFiles = filesToProcess.map((file) => {\n      const newFile: HvFileData = new File([file], file.name, {\n        type: file.type,\n        lastModified: file.lastModified,\n      });\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !accept ||\n        accept.includes(file.type?.split(\"/\")[1]) || // TODO: remove in v6\n        validateAccept(file, accept);\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      return newFile;\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            showGutter\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles\n              ? labels.acceptedFiles\n              : accept && `\\u00A0(${accept?.replaceAll(\",\", \", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={handleDragEnter}\n          onDragOver={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDropCapture={handleDragLeave}\n          onDrop={(event) => {\n            if (disabled) return;\n\n            const { files } = event.dataTransfer;\n            if (multiple === true || files.length === 1) {\n              event.stopPropagation();\n              event.preventDefault();\n              onChangeHandler(files);\n            }\n          }}\n          ref={inputRef}\n          accept={accept}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/FileUploader/DropZone/DropZone.styles.js

@@ -71,9 +71,7 @@ const { staticClasses, useClasses } = createClasses("HvDropZone", {
     margin: "auto",
     marginRight: theme.space.xs
   },
-  dropZoneLabel: {
-    paddingBottom: 6
-  },
+  dropZoneLabel: {},
   dragText: {
     ...theme.typography.body
   },

package/dist/esm/FileUploader/DropZone/DropZone.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.styles.js","sources":["../../../../src/FileUploader/DropZone/DropZone.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropZone\", {\n  dropZoneContainer: {\n    position: \"relative\",\n    width: \"100%\",\n    display: \"flex\",\n    border: `1px dashed ${theme.colors.secondary_60}`,\n    cursor: \"pointer\",\n    background: theme.colors.atmo1,\n    borderRadius: theme.radii.round,\n\n    \"&:hover\": {\n      background: `${theme.colors.atmo1}`,\n      border: `1px dashed ${theme.colors.secondary}`,\n    },\n\n    \"&:focus-within\": {\n      background: `${theme.colors.atmo1}`,\n      border: `1px dashed ${theme.colors.secondary}`,\n      ...outlineStyles,\n    },\n  },\n  dropZoneLabelsGroup: {\n    display: \"flex\",\n    justifyContent: \"start\",\n\n    \"& label:nth-of-type(1)\": {},\n\n    \"& p:nth-of-type(2)\": {\n      marginLeft: \"auto\",\n    },\n  },\n  dragAction: {\n    background: `${theme.colors.atmo1}`,\n    border: `1px dashed ${theme.colors.primary}`,\n  },\n  dropZoneContainerDisabled: {\n    background: `${theme.colors.atmo3}`,\n    border: `1px dashed ${theme.colors.secondary_60}`,\n    cursor: \"not-allowed\",\n    \"&:hover\": {\n      background: `${theme.colors.atmo3}`,\n      border: `1px dashed ${theme.colors.secondary_60}`,\n    },\n\n    \"& $dragText\": {\n      color: theme.colors.secondary_60,\n    },\n    \"& $selectFilesText\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n  inputArea: {\n    opacity: 0,\n    width: \"100%\",\n    position: \"absolute\",\n    height: \"100%\",\n    cursor: \"pointer\",\n\n    \"&:disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  dropArea: {\n    display: \"flex\",\n    margin: `${theme.space.md} auto`,\n    minHeight: 48,\n  },\n  dropZoneAreaLabels: {\n    display: \"flex\",\n    maxWidth: 120,\n    margin: \"auto\",\n  },\n  dropZoneAreaIcon: {\n    margin: \"auto\",\n    marginRight: theme.space.xs,\n  },\n  dropZoneLabel: {\n    paddingBottom: 6,\n  },\n  dragText: {\n    ...(theme.typography.body as React.CSSProperties),\n  },\n  selectFilesText: {\n    ...(theme.typography.label as React.CSSProperties),\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,mBAAmB;AAAA,IACjB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ,cAAc,MAAM,OAAO,YAAY;AAAA,IAC/C,QAAQ;AAAA,IACR,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,MACjC,QAAQ,cAAc,MAAM,OAAO,SAAS;AAAA,IAC9C;AAAA,IAEA,kBAAkB;AAAA,MAChB,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,MACjC,QAAQ,cAAc,MAAM,OAAO,SAAS;AAAA,MAC5C,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAEhB,0BAA0B,CAAC;AAAA,IAE3B,sBAAsB;AAAA,MACpB,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,YAAY;AAAA,IACV,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,IACjC,QAAQ,cAAc,MAAM,OAAO,OAAO;AAAA,EAC5C;AAAA,EACA,2BAA2B;AAAA,IACzB,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,IACjC,QAAQ,cAAc,MAAM,OAAO,YAAY;AAAA,IAC/C,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,MACjC,QAAQ,cAAc,MAAM,OAAO,YAAY;AAAA,IACjD;AAAA,IAEA,eAAe;AAAA,MACb,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,sBAAsB;AAAA,MACpB,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,QAAQ,GAAG,MAAM,MAAM,EAAE;AAAA,IACzB,WAAW;AAAA,EACb;AAAA,EACA,oBAAoB;AAAA,IAClB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,eAAe;AAAA,IACb,eAAe;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,IACR,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA,EACA,iBAAiB;AAAA,IACf,GAAI,MAAM,WAAW;AAAA,EAAA;AAEzB,CAAC;"}
+{"version":3,"file":"DropZone.styles.js","sources":["../../../../src/FileUploader/DropZone/DropZone.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropZone\", {\n  dropZoneContainer: {\n    position: \"relative\",\n    width: \"100%\",\n    display: \"flex\",\n    border: `1px dashed ${theme.colors.secondary_60}`,\n    cursor: \"pointer\",\n    background: theme.colors.atmo1,\n    borderRadius: theme.radii.round,\n\n    \"&:hover\": {\n      background: `${theme.colors.atmo1}`,\n      border: `1px dashed ${theme.colors.secondary}`,\n    },\n\n    \"&:focus-within\": {\n      background: `${theme.colors.atmo1}`,\n      border: `1px dashed ${theme.colors.secondary}`,\n      ...outlineStyles,\n    },\n  },\n  dropZoneLabelsGroup: {\n    display: \"flex\",\n    justifyContent: \"start\",\n\n    \"& label:nth-of-type(1)\": {},\n\n    \"& p:nth-of-type(2)\": {\n      marginLeft: \"auto\",\n    },\n  },\n  dragAction: {\n    background: `${theme.colors.atmo1}`,\n    border: `1px dashed ${theme.colors.primary}`,\n  },\n  dropZoneContainerDisabled: {\n    background: `${theme.colors.atmo3}`,\n    border: `1px dashed ${theme.colors.secondary_60}`,\n    cursor: \"not-allowed\",\n    \"&:hover\": {\n      background: `${theme.colors.atmo3}`,\n      border: `1px dashed ${theme.colors.secondary_60}`,\n    },\n\n    \"& $dragText\": {\n      color: theme.colors.secondary_60,\n    },\n    \"& $selectFilesText\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n  inputArea: {\n    opacity: 0,\n    width: \"100%\",\n    position: \"absolute\",\n    height: \"100%\",\n    cursor: \"pointer\",\n\n    \"&:disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  dropArea: {\n    display: \"flex\",\n    margin: `${theme.space.md} auto`,\n    minHeight: 48,\n  },\n  dropZoneAreaLabels: {\n    display: \"flex\",\n    maxWidth: 120,\n    margin: \"auto\",\n  },\n  dropZoneAreaIcon: {\n    margin: \"auto\",\n    marginRight: theme.space.xs,\n  },\n  dropZoneLabel: {},\n  dragText: {\n    ...(theme.typography.body as React.CSSProperties),\n  },\n  selectFilesText: {\n    ...(theme.typography.label as React.CSSProperties),\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,mBAAmB;AAAA,IACjB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ,cAAc,MAAM,OAAO,YAAY;AAAA,IAC/C,QAAQ;AAAA,IACR,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,MACjC,QAAQ,cAAc,MAAM,OAAO,SAAS;AAAA,IAC9C;AAAA,IAEA,kBAAkB;AAAA,MAChB,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,MACjC,QAAQ,cAAc,MAAM,OAAO,SAAS;AAAA,MAC5C,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,gBAAgB;AAAA,IAEhB,0BAA0B,CAAC;AAAA,IAE3B,sBAAsB;AAAA,MACpB,YAAY;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,YAAY;AAAA,IACV,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,IACjC,QAAQ,cAAc,MAAM,OAAO,OAAO;AAAA,EAC5C;AAAA,EACA,2BAA2B;AAAA,IACzB,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,IACjC,QAAQ,cAAc,MAAM,OAAO,YAAY;AAAA,IAC/C,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,YAAY,GAAG,MAAM,OAAO,KAAK;AAAA,MACjC,QAAQ,cAAc,MAAM,OAAO,YAAY;AAAA,IACjD;AAAA,IAEA,eAAe;AAAA,MACb,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,sBAAsB;AAAA,MACpB,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,QAAQ,GAAG,MAAM,MAAM,EAAE;AAAA,IACzB,WAAW;AAAA,EACb;AAAA,EACA,oBAAoB;AAAA,IAClB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,UAAU;AAAA,IACR,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA,EACA,iBAAiB;AAAA,IACf,GAAI,MAAM,WAAW;AAAA,EAAA;AAEzB,CAAC;"}

package/dist/esm/FilterGroup/FilterGroup.js

@@ -82,6 +82,7 @@ const HvFilterGroup = forwardRef(
             hasLabel && /* @__PURE__ */ jsx(
               HvLabel,
               {
+                showGutter: true,
                 id: setId(elementId, "label"),
                 htmlFor: setId(elementId, "input"),
                 label,

package/dist/esm/FilterGroup/FilterGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroup.js","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\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  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\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?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear Filters\",\n  /** Placeholder label. */\n  placeholder: \"Filters\",\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder: \"Search\",\n  /** Select All placeholder label. */\n  selectAll: \"All\",\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  function HvFilterGroup(props, ref) {\n    const {\n      className,\n      id,\n      name,\n      required,\n      disabled,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvFilterGroup"],"mappings":";;;;;;;;;;;;;;;AAkGA,MAAM,iBAAiB;AAAA;AAAA,EAErB,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,sBAAsB;AAAA;AAAA,EAEtB,WAAW;AAAA;AAAA,EAEX,2BAA2B;AAC7B;AASO,MAAM,gBAAgB;AAAA,EAC3B,SAASA,eAAc,OAAO,KAAK;AAC3B,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAC9C,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAE7D,UAAA,YAAY,YAAY,EAAE;AAE1B,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,WAAW,SAAS;AAE1B,UAAM,iBAAiB,eAAe;AAIhC,UAAA,eAAe,WAAW,UAAa;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,YAAY,mBACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,YACC,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,OAAO;AAAA,gBAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,gBACjC;AAAA,gBACA,WAAW,QAAQ;AAAA,cAAA;AAAA,YACrB;AAAA,YAGD,kBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,aAAa;AAAA,gBAClC,WAAW,QAAQ;AAAA,gBAElB,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,IAAI;AAAA,oBACJ;AAAA,oBACA;AAAA,oBACA,eAAa;AAAA,oBACb,WAAW;AAAA,oBACX;AAAA,oBACA,cAAY;AAAA,oBACZ,mBAAiB;AAAA,oBACjB;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA,kBAAA;AAAA,gBACN;AAAA,gBACC,gBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,MAAM,WAAW,OAAO;AAAA,oBAC5B,eAAa;AAAA,oBACb,WAAW,QAAQ;AAAA,oBAElB,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"FilterGroup.js","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\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  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\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?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear Filters\",\n  /** Placeholder label. */\n  placeholder: \"Filters\",\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder: \"Search\",\n  /** Select All placeholder label. */\n  selectAll: \"All\",\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  function HvFilterGroup(props, ref) {\n    const {\n      className,\n      id,\n      name,\n      required,\n      disabled,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                showGutter\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvFilterGroup"],"mappings":";;;;;;;;;;;;;;;AAkGA,MAAM,iBAAiB;AAAA;AAAA,EAErB,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,sBAAsB;AAAA;AAAA,EAEtB,WAAW;AAAA;AAAA,EAEX,2BAA2B;AAC7B;AASO,MAAM,gBAAgB;AAAA,EAC3B,SAASA,eAAc,OAAO,KAAK;AAC3B,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAC9C,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAE7D,UAAA,YAAY,YAAY,EAAE;AAE1B,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,WAAW,SAAS;AAE1B,UAAM,iBAAiB,eAAe;AAIhC,UAAA,eAAe,WAAW,UAAa;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,YAAY,mBACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,YACC,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,YAAU;AAAA,gBACV,IAAI,MAAM,WAAW,OAAO;AAAA,gBAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,gBACjC;AAAA,gBACA,WAAW,QAAQ;AAAA,cAAA;AAAA,YACrB;AAAA,YAGD,kBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,aAAa;AAAA,gBAClC,WAAW,QAAQ;AAAA,gBAElB,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,GAEJ;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,IAAI;AAAA,oBACJ;AAAA,oBACA;AAAA,oBACA,eAAa;AAAA,oBACb,WAAW;AAAA,oBACX;AAAA,oBACA,cAAY;AAAA,oBACZ,mBAAiB;AAAA,oBACjB;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA,kBAAA;AAAA,gBACN;AAAA,gBACC,gBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,MAAM,WAAW,OAAO;AAAA,oBAC5B,eAAa;AAAA,oBACb,WAAW,QAAQ;AAAA,oBAElB,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAEJ;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/esm/FilterGroup/FilterGroup.styles.js

@@ -1,10 +1,7 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvFilterGroup", {
   root: {},
-  label: {
-    display: "flex",
-    alignItems: "flex-start"
-  },
+  label: {},
   labelContainer: { display: "flex", alignItems: "flex-start" },
   description: {},
   error: {}

package/dist/esm/FilterGroup/FilterGroup.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroup.styles.js","sources":["../../../src/FilterGroup/FilterGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFilterGroup\", {\n  root: {},\n  label: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  description: {},\n  error: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,aAAa,CAAC;AAAA,EACd,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"FilterGroup.styles.js","sources":["../../../src/FilterGroup/FilterGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFilterGroup\", {\n  root: {},\n  label: {},\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  description: {},\n  error: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AAAA,EACR,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,aAAa,CAAC;AAAA,EACd,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/FormElement/Label/Label.js

@@ -14,6 +14,7 @@ const HvLabel = (props) => {
     className,
     children,
     label,
+    showGutter,
     disabled: disabledProp,
     required: requiredProp,
     htmlFor: htmlForProp,
@@ -33,8 +34,8 @@ const HvLabel = (props) => {
         className: cx(
           classes.root,
           {
-            [classes.labelDisabled]: !!disabled,
-            [classes.childGutter]: !!(children && label)
+            [classes.labelDisabled]: disabled,
+            [classes.childGutter]: showGutter || children && label
           },
           className
         ),

package/dist/esm/FormElement/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../../src/FormElement/Label/Label.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { findDescriptors } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Label.styles\";\n\nexport { staticClasses as labelClasses };\n\nexport type HvLabelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLabelProps extends HvTypographyProps<\"label\"> {\n  /** Id to be applied to the root node */\n  id?: string;\n  /** The text to be shown by the label. */\n  label?: React.ReactNode;\n  /** The id of the form element the label is bound to. */\n  htmlFor?: string;\n  /** If `true` the label is displayed with a disabled style. */\n  disabled?: boolean;\n  /** If `true`, the label will indicate that the form element is required (an `*` after the label text). */\n  required?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLabelClasses;\n}\n\n/**\n * Provides the user with a recognizable name for a given form element.\n */\nexport const HvLabel = (props: HvLabelProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    children,\n    label,\n    disabled: disabledProp,\n    required: requiredProp,\n    htmlFor: htmlForProp,\n    ...others\n  } = useDefaultProps(\"HvLabel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n\n  const disabled = disabledProp ?? context.disabled;\n  const required = requiredProp ?? context.required;\n  const id = idProp ?? setId(context.id, \"label\");\n\n  const forId = htmlForProp || findDescriptors(children)?.input?.[0]?.id;\n\n  return (\n    <>\n      <HvTypography\n        id={id}\n        className={cx(\n          classes.root,\n          {\n            [classes.labelDisabled]: !!disabled,\n            [classes.childGutter]: !!(children && label),\n          },\n          className,\n        )}\n        variant=\"label\"\n        component=\"label\"\n        htmlFor={forId}\n        {...others}\n      >\n        {label}\n        {required && <span aria-hidden=\"true\">*</span>}\n      </HvTypography>\n      {children}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAkCa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,WAAW,oBAAoB;AAEzC,QAAA,WAAW,gBAAgB,QAAQ;AACnC,QAAA,WAAW,gBAAgB,QAAQ;AACzC,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,OAAO;AAE9C,QAAM,QAAQ,eAAe,gBAAgB,QAAQ,GAAG,QAAQ,CAAC,GAAG;AAEpE,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,aAAa,GAAG,CAAC,CAAC;AAAA,YAC3B,CAAC,QAAQ,WAAW,GAAG,CAAC,EAAE,YAAY;AAAA,UACxC;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,SAAS;AAAA,QACR,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,YAAY,oBAAC,QAAK,EAAA,eAAY,QAAO,UAAC,IAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"Label.js","sources":["../../../../src/FormElement/Label/Label.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../context\";\nimport { findDescriptors } from \"../utils\";\nimport { staticClasses, useClasses } from \"./Label.styles\";\n\nexport { staticClasses as labelClasses };\n\nexport type HvLabelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLabelProps extends HvTypographyProps<\"label\"> {\n  /** Id to be applied to the root node */\n  id?: string;\n  /** The text to be shown by the label. */\n  label?: React.ReactNode;\n  /** Whether to give label gutter spacing */\n  showGutter?: boolean;\n  /** The id of the form element the label is bound to. */\n  htmlFor?: string;\n  /** If `true` the label is displayed with a disabled style. */\n  disabled?: boolean;\n  /** If `true`, the label will indicate that the form element is required (an `*` after the label text). */\n  required?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLabelClasses;\n}\n\n/**\n * Provides the user with a recognizable name for a given form element.\n */\nexport const HvLabel = (props: HvLabelProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    children,\n    label,\n    showGutter,\n    disabled: disabledProp,\n    required: requiredProp,\n    htmlFor: htmlForProp,\n    ...others\n  } = useDefaultProps(\"HvLabel\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(HvFormElementContext);\n\n  const disabled = disabledProp ?? context.disabled;\n  const required = requiredProp ?? context.required;\n  const id = idProp ?? setId(context.id, \"label\");\n\n  const forId = htmlForProp || findDescriptors(children)?.input?.[0]?.id;\n\n  return (\n    <>\n      <HvTypography\n        id={id}\n        className={cx(\n          classes.root,\n          {\n            [classes.labelDisabled]: disabled,\n            [classes.childGutter]: showGutter || (children && label),\n          },\n          className,\n        )}\n        variant=\"label\"\n        component=\"label\"\n        htmlFor={forId}\n        {...others}\n      >\n        {label}\n        {required && <span aria-hidden=\"true\">*</span>}\n      </HvTypography>\n      {children}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoCa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,WAAW,oBAAoB;AAEzC,QAAA,WAAW,gBAAgB,QAAQ;AACnC,QAAA,WAAW,gBAAgB,QAAQ;AACzC,QAAM,KAAK,UAAU,MAAM,QAAQ,IAAI,OAAO;AAE9C,QAAM,QAAQ,eAAe,gBAAgB,QAAQ,GAAG,QAAQ,CAAC,GAAG;AAEpE,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,aAAa,GAAG;AAAA,YACzB,CAAC,QAAQ,WAAW,GAAG,cAAe,YAAY;AAAA,UACpD;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,SAAS;AAAA,QACR,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,YAAY,oBAAC,QAAK,EAAA,eAAY,QAAO,UAAC,IAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzC;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/esm/FormElement/Label/Label.styles.js

@@ -3,7 +3,7 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvLabel", {
   root: { fontWeight: theme.fontWeights.normal, display: "inline-block" },
   labelDisabled: { color: theme.colors.secondary_60 },
-  childGutter: { paddingBottom: "6px" }
+  childGutter: { paddingBottom: 4 }
 });
 export {
   staticClasses,

package/dist/esm/FormElement/Label/Label.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.styles.js","sources":["../../../../src/FormElement/Label/Label.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLabel\", {\n  root: { fontWeight: theme.fontWeights.normal, display: \"inline-block\" },\n  labelDisabled: { color: theme.colors.secondary_60 },\n  childGutter: { paddingBottom: \"6px\" },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,YAAY,MAAM,YAAY,QAAQ,SAAS,eAAe;AAAA,EACtE,eAAe,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EAClD,aAAa,EAAE,eAAe,MAAM;AACtC,CAAC;"}
+{"version":3,"file":"Label.styles.js","sources":["../../../../src/FormElement/Label/Label.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLabel\", {\n  root: { fontWeight: theme.fontWeights.normal, display: \"inline-block\" },\n  labelDisabled: { color: theme.colors.secondary_60 },\n  childGutter: { paddingBottom: 4 },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,YAAY,MAAM,YAAY,QAAQ,SAAS,eAAe;AAAA,EACtE,eAAe,EAAE,OAAO,MAAM,OAAO,aAAa;AAAA,EAClD,aAAa,EAAE,eAAe,EAAE;AAClC,CAAC;"}

package/dist/esm/Input/Input.js

@@ -413,6 +413,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
           hasLabel && /* @__PURE__ */ jsx(
             HvLabel,
             {
+              showGutter: true,
               id: setId(elementId, "label"),
               className: classes.label,
               htmlFor: setId(elementId, "input"),