@hitachivantara/uikit-react-core 5.18.1 → 5.18.2

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  HvCalendar,\n  HvInfoMessage,\n  HvWarningText,\n  HvCalendarProps,\n  HvActionBar,\n  HvButton,\n  HvFormElement,\n  HvTypography,\n  HvBaseDropdown,\n  HvLabel,\n} from \"@core/components\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames, setId, useSavedState } from \"@core/utils\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { isDate } from \"../Calendar/utils\";\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n  invalidLabel: \"Invalid date\",\n};\n\nexport type HvDatePickerStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDatePickerProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDatePickerStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n    /**\n     * Invalid Date label.\n     */\n    invalidDateLabel?: string;\n  };\n\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   * TODO: remove this in favour of discriminated union\n   */\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Object;\n  /**\n   * If `true` the DatePicker will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = ({\n  classes: classesProp,\n  className,\n\n  id,\n  name,\n\n  required = false,\n  disabled = false,\n  readOnly,\n\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n\n  onChange,\n  onCancel,\n  onClear,\n  status,\n  statusMessage,\n  \"aria-errormessage\": ariaErrorMessage,\n\n  placeholder,\n\n  labels: labelsProp,\n\n  value,\n  startValue,\n  endValue,\n\n  rangeMode = false,\n  startAdornment,\n  horizontalPlacement = \"right\",\n  locale: localeProp,\n  showActions = false,\n  showClear = false,\n  disablePortal = true,\n  escapeWithReference = true,\n  dropdownProps,\n  calendarProps,\n  ...others\n}: HvDatePickerProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdatepicker\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const locale = localeProp || \"en-US\";\n\n  const [calendarOpen, setCalendarOpen] = useState(false);\n\n  const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n    rangeMode ? startValue : value\n  );\n  const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n  const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const { activeTheme } = useTheme();\n\n  useEffect(() => {\n    setStartDate(rangeMode ? startValue : value, true);\n    setEndDate(endValue, true);\n  }, [value, startValue, endValue, rangeMode, 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 (required && (!isDate(startDate) || (rangeMode && !isDate(endDate)))) {\n        return \"invalid\";\n      }\n\n      return \"valid\";\n    });\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel = () => {\n    rollbackStartDate();\n    rollbackEndDate();\n\n    onCancel?.();\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleClear = () => {\n    setStartDate(undefined, false);\n    setEndDate(undefined, false);\n    onClear?.();\n  };\n\n  const handleCalendarClose = () => {\n    const shouldSave = !(rangeMode || showActions);\n    if (shouldSave) {\n      handleApply();\n    } else {\n      handleCancel();\n    }\n  };\n\n  const handleToggle = (evt, open) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (evt === null) return;\n    setCalendarOpen(open);\n    if (!open) handleCalendarClose();\n  };\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const handleDateChange = (event, newDate) => {\n    if (!isDate(newDate)) return;\n\n    const autoSave = !showActions && !rangeMode;\n\n    if (rangeMode) {\n      if (!startDate || (startDate && endDate) || newDate < startDate) {\n        setStartDate(newDate);\n        setEndDate(undefined);\n      } else {\n        setEndDate(newDate);\n      }\n    } else {\n      setStartDate(newDate, autoSave);\n    }\n\n    if (autoSave) {\n      onChange?.(newDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && !isDate(newDate)) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    }\n  };\n\n  const handleInputDateChange = (event, newDate, position) => {\n    if (!isDate(newDate)) return;\n\n    if (!rangeMode) {\n      handleDateChange(event, newDate);\n      return;\n    }\n\n    if (position === \"left\") {\n      if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n    } else if (position === \"right\") {\n      if (!startDate) {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n        return;\n      }\n      setEndDate(newDate < startDate ? startDate : newDate);\n    }\n  };\n\n  /**\n   * Renders the container for the action elements.\n   */\n  const renderActions = () => (\n    <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 styledTypography = (dateString, variant, text) => {\n    const StyledTypography = styled(HvTypography)({\n      color: dateString\n        ? theme.colors.secondary\n        : theme.datePicker.dropdownPlaceholderColor,\n    });\n\n    return <StyledTypography variant={variant}>{text}</StyledTypography>;\n  };\n\n  const renderInput = (dateString) =>\n    styledTypography(\n      dateString,\n      activeTheme?.datePicker.placeholderVariant,\n      (dateString || placeholder) === undefined ? \"\" : dateString || placeholder\n    );\n\n  const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      value={dateValue}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      className={cx(className, classes.root)}\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        role=\"combobox\"\n        classes={{\n          root: classes.dropdown,\n          panel: classes.panel,\n          header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        readOnly={readOnly}\n        disabled={disabled}\n        disablePortal={disablePortal}\n        variableWidth\n        placement={horizontalPlacement}\n        expanded={calendarOpen}\n        onToggle={handleToggle}\n        onClickOutside={handleCalendarClose}\n        onContainerCreation={focusOnContainer}\n        placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n        adornment={\n          <Calendar\n            className={classes.icon}\n            color={disabled ? \"secondary_80\" : undefined}\n          />\n        }\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        aria-haspopup=\"dialog\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        {...dropdownProps}\n      >\n        <div ref={focusTarget} tabIndex={-1} />\n        <HvCalendar\n          id={setId(id, \"calendar\")}\n          startAdornment={startAdornment}\n          onChange={handleDateChange}\n          onInputChange={handleInputDateChange}\n          onVisibleDateChange={(_event, type, month, target) => {\n            dispatchAction({ type, target, month });\n          }}\n          locale={locale}\n          {...visibleDate}\n          {...calendarProps}\n          invalidDateLabel={labels?.invalidDateLabel}\n        />\n        {(rangeMode || showActions) && renderActions()}\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={cx(classes.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","invalidLabel","HvDatePicker","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","ariaErrorMessage","placeholder","labels","labelsProp","value","startValue","endValue","rangeMode","startAdornment","horizontalPlacement","locale","localeProp","showActions","showClear","disablePortal","escapeWithReference","dropdownProps","calendarProps","others","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","calendarOpen","setCalendarOpen","useState","startDate","setStartDate","rollbackStartDate","useSavedState","endDate","setEndDate","rollbackEndDate","visibleDate","dispatchAction","useVisibleDate","focusTarget","useRef","activeTheme","useTheme","useEffect","endDateIsSet","current","type","target","year","getFullYear","month","getMonth","handleApply","isDate","handleCancel","handleClear","undefined","handleCalendarClose","shouldSave","handleToggle","evt","open","focusOnContainer","focus","handleDateChange","event","newDate","autoSave","handleInputDateChange","position","renderActions","_jsxs","HvActionBar","actionContainer","children","_jsx","leftContainer","HvButton","setId","action","variant","onClick","rightContainer","styledTypography","dateString","text","StyledTypography","HvTypography","process","env","NODE_ENV","color","theme","colors","secondary","datePicker","dropdownPlaceholderColor","renderInput","placeholderVariant","dateValue","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","role","dropdown","panel","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","variableWidth","placement","expanded","onToggle","onClickOutside","onContainerCreation","getDateLabel","adornment","Calendar","icon","popperProps","modifiers","enabled","join","trim","ref","tabIndex","HvCalendar","onInputChange","onVisibleDateChange","_event","invalidDateLabel","HvWarningText","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport {\n  HvCalendar,\n  HvInfoMessage,\n  HvWarningText,\n  HvCalendarProps,\n  HvActionBar,\n  HvButton,\n  HvFormElement,\n  HvTypography,\n  HvBaseDropdown,\n  HvLabel,\n  HvFormStatus,\n} from \"@core/components\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames, setId, useSavedState } from \"@core/utils\";\nimport { isInvalid } from \"../Forms/FormElement/validationStates\";\nimport { isDate } from \"../Calendar/utils\";\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n  invalidLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n  /**\n   * Id to be applied to the form element root node.\n   */\n  id?: string;\n\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-label\"?: string;\n  /**\n   * @ignore\n   */\n  \"aria-labelledby\"?: string;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  \"aria-describedby\"?: string;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n    /**\n     * Invalid Date label.\n     */\n    invalidDateLabel?: string;\n  };\n\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   * TODO: remove this in favour of discriminated union\n   */\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Object;\n  /**\n   * If `true` the DatePicker will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = ({\n  classes: classesProp,\n  className,\n\n  id,\n  name,\n\n  required = false,\n  disabled = false,\n  readOnly,\n\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n\n  onChange,\n  onCancel,\n  onClear,\n  status,\n  statusMessage,\n  \"aria-errormessage\": ariaErrorMessage,\n\n  placeholder,\n\n  labels: labelsProp,\n\n  value,\n  startValue,\n  endValue,\n\n  rangeMode = false,\n  startAdornment,\n  horizontalPlacement = \"right\",\n  locale: localeProp,\n  showActions = false,\n  showClear = false,\n  disablePortal = true,\n  escapeWithReference = true,\n  dropdownProps,\n  calendarProps,\n  ...others\n}: HvDatePickerProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdatepicker\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const locale = localeProp || \"en-US\";\n\n  const [calendarOpen, setCalendarOpen] = useState(false);\n\n  const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n    rangeMode ? startValue : value\n  );\n  const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n  const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const { activeTheme } = useTheme();\n\n  useEffect(() => {\n    setStartDate(rangeMode ? startValue : value, true);\n    setEndDate(endValue, true);\n  }, [value, startValue, endValue, rangeMode, 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 (required && (!isDate(startDate) || (rangeMode && !isDate(endDate)))) {\n        return \"invalid\";\n      }\n\n      return \"valid\";\n    });\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel = () => {\n    rollbackStartDate();\n    rollbackEndDate();\n\n    onCancel?.();\n\n    setCalendarOpen(false);\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleClear = () => {\n    setStartDate(undefined, false);\n    setEndDate(undefined, false);\n    onClear?.();\n  };\n\n  const handleCalendarClose = () => {\n    const shouldSave = !(rangeMode || showActions);\n    if (shouldSave) {\n      handleApply();\n    } else {\n      handleCancel();\n    }\n  };\n\n  const handleToggle = (evt, open) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (evt === null) return;\n    setCalendarOpen(open);\n    if (!open) handleCalendarClose();\n  };\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const handleDateChange = (event, newDate) => {\n    if (!isDate(newDate)) return;\n\n    const autoSave = !showActions && !rangeMode;\n\n    if (rangeMode) {\n      if (!startDate || (startDate && endDate) || newDate < startDate) {\n        setStartDate(newDate);\n        setEndDate(undefined);\n      } else {\n        setEndDate(newDate);\n      }\n    } else {\n      setStartDate(newDate, autoSave);\n    }\n\n    if (autoSave) {\n      onChange?.(newDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && !isDate(newDate)) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    }\n  };\n\n  const handleInputDateChange = (event, newDate, position) => {\n    if (!isDate(newDate)) return;\n\n    if (!rangeMode) {\n      handleDateChange(event, newDate);\n      return;\n    }\n\n    if (position === \"left\") {\n      if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n    } else if (position === \"right\") {\n      if (!startDate) {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n        return;\n      }\n      setEndDate(newDate < startDate ? startDate : newDate);\n    }\n  };\n\n  /**\n   * Renders the container for the action elements.\n   */\n  const renderActions = () => (\n    <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 styledTypography = (dateString, variant, text) => {\n    const StyledTypography = styled(HvTypography)({\n      color: dateString\n        ? theme.colors.secondary\n        : theme.datePicker.dropdownPlaceholderColor,\n    });\n\n    return <StyledTypography variant={variant}>{text}</StyledTypography>;\n  };\n\n  const renderInput = (dateString) =>\n    styledTypography(\n      dateString,\n      activeTheme?.datePicker.placeholderVariant,\n      (dateString || placeholder) === undefined ? \"\" : dateString || placeholder\n    );\n\n  const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      value={dateValue}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      className={cx(className, classes.root)}\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        role=\"combobox\"\n        classes={{\n          root: classes.dropdown,\n          panel: classes.panel,\n          header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        readOnly={readOnly}\n        disabled={disabled}\n        disablePortal={disablePortal}\n        variableWidth\n        placement={horizontalPlacement}\n        expanded={calendarOpen}\n        onToggle={handleToggle}\n        onClickOutside={handleCalendarClose}\n        onContainerCreation={focusOnContainer}\n        placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n        adornment={\n          <Calendar\n            className={classes.icon}\n            color={disabled ? \"secondary_80\" : undefined}\n          />\n        }\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        aria-haspopup=\"dialog\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        {...dropdownProps}\n      >\n        <div ref={focusTarget} tabIndex={-1} />\n        <HvCalendar\n          id={setId(id, \"calendar\")}\n          startAdornment={startAdornment}\n          onChange={handleDateChange}\n          onInputChange={handleInputDateChange}\n          onVisibleDateChange={(_event, type, month, target) => {\n            dispatchAction({ type, target, month });\n          }}\n          locale={locale}\n          {...visibleDate}\n          {...calendarProps}\n          invalidDateLabel={labels?.invalidDateLabel}\n        />\n        {(rangeMode || showActions) && renderActions()}\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={cx(classes.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","applyLabel","cancelLabel","clearLabel","invalidLabel","HvDatePicker","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","onChange","onCancel","onClear","status","statusMessage","ariaErrorMessage","placeholder","labels","labelsProp","value","startValue","endValue","rangeMode","startAdornment","horizontalPlacement","locale","localeProp","showActions","showClear","disablePortal","escapeWithReference","dropdownProps","calendarProps","others","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","calendarOpen","setCalendarOpen","useState","startDate","setStartDate","rollbackStartDate","useSavedState","endDate","setEndDate","rollbackEndDate","visibleDate","dispatchAction","useVisibleDate","focusTarget","useRef","activeTheme","useTheme","useEffect","endDateIsSet","current","type","target","year","getFullYear","month","getMonth","handleApply","isDate","handleCancel","handleClear","undefined","handleCalendarClose","shouldSave","handleToggle","evt","open","focusOnContainer","focus","handleDateChange","event","newDate","autoSave","handleInputDateChange","position","renderActions","_jsxs","HvActionBar","actionContainer","children","_jsx","leftContainer","HvButton","setId","action","variant","onClick","rightContainer","styledTypography","dateString","text","StyledTypography","HvTypography","process","env","NODE_ENV","color","theme","colors","secondary","datePicker","dropdownPlaceholderColor","renderInput","placeholderVariant","dateValue","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","HvBaseDropdown","role","dropdown","panel","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","variableWidth","placement","expanded","onToggle","onClickOutside","onContainerCreation","getDateLabel","adornment","Calendar","icon","popperProps","modifiers","enabled","join","trim","ref","tabIndex","HvCalendar","onInputChange","onVisibleDateChange","_event","invalidDateLabel","HvWarningText","disableBorder","error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAMA,iBAAiB;AAAA,EACrBC,YAAY;AAAA,EACZC,aAAa;AAAA,EACbC,YAAY;AAAA,EACZC,cAAc;AAChB;AAuLO,MAAMC,eAAeA,CAAC;AAAA,EAC3BC,SAASC;AAAAA,EACTC;AAAAA,EAEAC;AAAAA,EACAC;AAAAA,EAEAC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC;AAAAA,EAEAC;AAAAA,EACA,cAAcC;AAAAA,EACd,mBAAmBC;AAAAA,EACnBC;AAAAA,EACA,oBAAoBC;AAAAA,EAEpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,qBAAqBC;AAAAA,EAErBC;AAAAA,EAEAC,QAAQC;AAAAA,EAERC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EAEAC,YAAY;AAAA,EACZC;AAAAA,EACAC,sBAAsB;AAAA,EACtBC,QAAQC;AAAAA,EACRC,cAAc;AAAA,EACdC,YAAY;AAAA,EACZC,gBAAgB;AAAA,EAChBC,sBAAsB;AAAA,EACtBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACjB,QAAA;AAAA,IAAEpC;AAAAA,IAASqC;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWrC,WAAW;AACxCmB,QAAAA,SAASmB,UAAAA,UAAU7C,gBAAgB2B,UAAU;AAE7CmB,QAAAA,YAAYC,YAAAA,QAAYtC,IAAI,cAAc;AAEhD,QAAM,CAACuC,iBAAiBC,kBAAkB,IAAIC,cAAAA,cAC5C5B,QACA,SACF;AAEA,QAAM,CAAC6B,iBAAiB,IAAID,cAAAA,cAAc3B,eAAe,UAAU;AAEnE,QAAMW,SAASC,cAAc;AAE7B,QAAM,CAACiB,cAAcC,eAAe,IAAIC,eAAS,KAAK;AAEhD,QAAA,CAACC,WAAWC,cAAcC,iBAAiB,IAAIC,cAAAA,cACnD3B,YAAYF,aAAaD,KAC3B;AACA,QAAM,CAAC+B,SAASC,YAAYC,eAAe,IAAIH,cAAAA,cAAc5B,QAAQ;AAErE,QAAM,CAACgC,aAAaC,cAAc,IAAIC,eAAAA,QAAeT,WAAWI,OAAO;AAEjEM,QAAAA,cAAcC,aAAuB,IAAI;AAEzC,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAS,SAAA;AAEjCC,QAAAA,UAAU,MAAM;AACDtC,iBAAAA,YAAYF,aAAaD,OAAO,IAAI;AACjDgC,eAAW9B,UAAU,IAAI;AAAA,EAAA,GACxB,CAACF,OAAOC,YAAYC,UAAUC,WAAWyB,cAAcI,UAAU,CAAC;AAE/DU,QAAAA,eAAeJ,aAAO,KAAK;AACjCI,eAAaC,UAAUZ,WAAW;AAElCU,QAAAA,UAAU,MAAM;AACd,QAAId,aAAa,MAAM;AACN,qBAAA;AAAA,QACbiB,MAAM;AAAA,QACNC,QAAQH,aAAaC,UAAU,SAAS;AAAA,QACxCG,MAAMnB,UAAUoB,YAAY;AAAA,QAC5BC,OAAOrB,UAAUsB,SAAAA,IAAa;AAAA,MAAA,CAC/B;AAAA,IACH;AAAA,EAAA,GACC,CAACd,gBAAgBR,SAAS,CAAC;AAE9Bc,QAAAA,UAAU,MAAM;AACd,QAAIV,WAAW,MAAM;AACJ,qBAAA;AAAA,QACba,MAAM;AAAA,QACNC,QAAQ;AAAA,QACRC,MAAMf,QAAQgB,YAAY;AAAA,QAC1BC,OAAOjB,QAAQkB,SAAAA,IAAa;AAAA,MAAA,CAC7B;AAAA,IACH;AAAA,EAAA,GACC,CAACd,gBAAgBJ,OAAO,CAAC;AAK5B,QAAMmB,cAAcA,MAAM;AACxBtB,iBAAaD,WAAW,IAAI;AACjBI,eAAAA,WAAWJ,WAAW,IAAI;AAErCpC,yCAAWoC,WAAWI;AAEtBV,uBAAmB,MAAM;AAEnBtC,UAAAA,aAAa,CAACoE,QAAAA,OAAOxB,SAAS,KAAMxB,aAAa,CAACgD,QAAAA,OAAOpB,OAAO,IAAK;AAChE,eAAA;AAAA,MACT;AAEO,aAAA;AAAA,IAAA,CACR;AAEDN,oBAAgB,KAAK;AAAA,EAAA;AAMvB,QAAM2B,eAAeA,MAAM;AACP;AACF;AAEL;AAEX3B,oBAAgB,KAAK;AAAA,EAAA;AAMvB,QAAM4B,cAAcA,MAAM;AACxBzB,iBAAa0B,QAAW,KAAK;AAC7BtB,eAAWsB,QAAW,KAAK;AACjB;AAAA,EAAA;AAGZ,QAAMC,sBAAsBA,MAAM;AAC1BC,UAAAA,aAAa,EAAErD,aAAaK;AAClC,QAAIgD,YAAY;AACF;IAAA,OACP;AACQ;IACf;AAAA,EAAA;AAGIC,QAAAA,eAAeA,CAACC,KAAKC,SAAS;AAMlC,QAAID,QAAQ;AAAM;AAClBjC,oBAAgBkC,IAAI;AACpB,QAAI,CAACA;AAA0B;EAAA;AAGjC,QAAMC,mBAAmBA,MAAM;;AAC7BvB,sBAAYM,YAAZN,mBAAqBwB;AAAAA,EAAM;AAGvBC,QAAAA,mBAAmBA,CAACC,OAAOC,YAAY;AACvC,QAAA,CAACb,eAAOa,OAAO;AAAG;AAEhBC,UAAAA,WAAW,CAACzD,eAAe,CAACL;AAElC,QAAIA,WAAW;AACb,UAAI,CAACwB,aAAcA,aAAaI,WAAYiC,UAAUrC,WAAW;AAC/DC,qBAAaoC,OAAO;AACpBhC,mBAAWsB,MAAS;AAAA,MAAA,OACf;AACLtB,mBAAWgC,OAAO;AAAA,MACpB;AAAA,IAAA,OACK;AACLpC,mBAAaoC,SAASC,QAAQ;AAAA,IAChC;AAEA,QAAIA,UAAU;AACZ1E,2CAAWyE;AAEX3C,yBAAmB,MAAM;AAEvB,YAAItC,YAAY,CAACoE,eAAOa,OAAO,GAAG;AACzB,iBAAA;AAAA,QACT;AAEO,eAAA;AAAA,MAAA,CACR;AAEDvC,sBAAgB,KAAK;AAAA,IACvB;AAAA,EAAA;AAGF,QAAMyC,wBAAwBA,CAACH,OAAOC,SAASG,aAAa;AACtD,QAAA,CAAChB,eAAOa,OAAO;AAAG;AAEtB,QAAI,CAAC7D,WAAW;AACd2D,uBAAiBC,OAAOC,OAAO;AAC/B;AAAA,IACF;AAEA,QAAIG,aAAa,QAAQ;AACnBpC,UAAAA;AAAsBiC,qBAAAA,UAAUjC,UAAUA,UAAUiC,OAAO;AAAA,IAAA,WACtDG,aAAa,SAAS;AAC/B,UAAI,CAACxC,WAAW;AACVI,YAAAA;AAAsBiC,uBAAAA,UAAUjC,UAAUA,UAAUiC,OAAO;AAC/D;AAAA,MACF;AACWA,iBAAAA,UAAUrC,YAAYA,YAAYqC,OAAO;AAAA,IACtD;AAAA,EAAA;AAMII,QAAAA,gBAAgBA,MACpBC,2BAAAA,KAACC,uBAAW;AAAA,IAAC1F,WAAWmC,GAAG;AAAA,MAAE,CAACrC,QAAQ6F,eAAe,GAAG9D;AAAAA,IAAAA,CAAW;AAAA,IAAE+D,UAAA,CAClE/D,aACCgE,2BAAAA,IAAA,OAAA;AAAA,MAAK7F,WAAWF,QAAQgG;AAAAA,MAAcF,yCACnCG,iBAAQ;AAAA,QACP9F,IAAI+F,MAAAA,MAAM/F,IAAI,UAAU,OAAO;AAAA,QAC/BD,WAAWF,QAAQmG;AAAAA,QACnBC,SAAQ;AAAA,QACRC,SAAS1B;AAAAA,QAAYmB,UAEpB1E,iCAAQvB;AAAAA,MAAAA,CACD;AAAA,IAAA,CACP,GAEP8F,2BAAAA,KAAA,OAAA;AAAA,MAAKzF,WAAWF,QAAQsG;AAAAA,MAAeR,UAAA,CACrCC,2BAAAA,IAACE,iBAAQ;AAAA,QACP9F,IAAI+F,MAAAA,MAAM/F,IAAI,UAAU,OAAO;AAAA,QAC/BD,WAAWF,QAAQmG;AAAAA,QACnBC,SAAQ;AAAA,QACRC,SAAS7B;AAAAA,QAAYsB,UAEpB1E,iCAAQzB;AAAAA,MAAAA,CACD,GACVoG,2BAAAA,IAACE,iBAAQ;AAAA,QACP9F,IAAI+F,MAAAA,MAAM/F,IAAI,UAAU,QAAQ;AAAA,QAChCD,WAAWF,QAAQmG;AAAAA,QACnBC,SAAQ;AAAA,QACRC,SAAS3B;AAAAA,QAAaoB,UAErB1E,iCAAQxB;AAAAA,MAAAA,CACD,CAAC;AAAA,IAAA,CACR,CAAC;AAAA,EAAA,CACK;AAGf,QAAM2G,mBAAmBA,CAACC,YAAYJ,SAASK,SAAS;AACtD,UAAMC,mBAA0BC,iCAAAA,QAAAA,WAAAA,cAAYC,QAAAC,IAAAC,aAAA,eAAA;AAAA,MAAA3C,QAAA;AAAA,IAAA,IAAA;AAAA,MAAAA,QAAA;AAAA,MAAA3D,OAAA;AAAA,IAAA,CAAA,EAAE;AAAA,MAC5CuG,OAAOP,aACHQ,kBAAMC,OAAOC,YACbF,YAAAA,MAAMG,WAAWC;AAAAA,IAAAA,GACtBR,QAAAC,IAAAC,aAAC,eAAA,KAAA,intBAAA;AAEF,0CAAQJ,kBAAgB;AAAA,MAACN;AAAAA,MAAiBN,UAAEW;AAAAA,IAAAA,CAAuB;AAAA,EAAA;AAGrE,QAAMY,cAAeb,CAAAA,eACnBD,iBACEC,YACA3C,2CAAasD,WAAWG,qBACvBd,cAAcrF,iBAAiByD,SAAY,KAAK4B,cAAcrF,WACjE;AAEF,QAAMoG,YAAY9F,YAAY;AAAA,IAAEwB;AAAAA,IAAWI;AAAAA,EAAYJ,IAAAA;AAEvD,QAAMuE,WAAWhH,SAAS;AAC1B,QAAMiH,iBAAiB9G,eAAe;AAMhC+G,QAAAA,eACJxG,oBAAoB,SAClBF,WAAW4D,UAAa3D,kBAAkB2D,UACzC5D,WAAW4D,UAAavE;AAEvBsH,QAAAA,iBAAiBC,2BAAUlF,eAAe;AAE5CmF,MAAAA;AACJ,MAAIF,gBAAgB;AAClBE,qBAAiBH,eACbxB,MAAAA,MAAM1D,WAAW,OAAO,IACxBtB;AAAAA,EACN;AAEA,yCACG4G,YAAAA,eAAa;AAAA,IACZ3H;AAAAA,IACAC;AAAAA,IACAkB,OAAOiG;AAAAA,IACPvG,QAAQ0B;AAAAA,IACRpC;AAAAA,IACAD;AAAAA,IACAH,WAAWmC,GAAGnC,WAAWF,QAAQ+H,IAAI;AAAA,IACrCxH;AAAAA,IAAmB,GACf6B;AAAAA,IAAM0D,YAER0B,YAAYC,mDACZ,OAAA;AAAA,MAAKvH,WAAWF,QAAQgI;AAAAA,MAAelC,UACpC0B,CAAAA,YACCzB,2BAAAA,IAACkC,eAAO;AAAA,QACN9H,IAAI+F,MAAAA,MAAM1D,WAAW,OAAO;AAAA,QAC5BhC;AAAAA,QACAN,WAAWF,QAAQQ;AAAAA,MAAAA,CACpB,GAGFiH,kBACC1B,2BAAAA,IAACmC,2BAAa;AAAA,QACZ/H,IAAI+F,MAAAA,MAAM1D,WAAW,aAAa;AAAA,QAClCtC,WAAWF,QAAQW;AAAAA,QAAYmF,UAE9BnF;AAAAA,MAAAA,CACY,CAChB;AAAA,IAAA,CACE,GAEPgF,2BAAAA,KAACwC,6BAAc;AAAA,MACbC,MAAK;AAAA,MACLpI,SAAS;AAAA,QACP+H,MAAM/H,QAAQqI;AAAAA,QACdC,OAAOtI,QAAQsI;AAAAA,QACfC,QAAQlG,GAAG;AAAA,UAAE,CAACrC,QAAQwI,qBAAqB,GAAGb;AAAAA,QAAAA,CAAgB;AAAA,QAC9Dc,YAAYzI,QAAQ0I;AAAAA,MACtB;AAAA,MACAnI;AAAAA,MACAD;AAAAA,MACA0B;AAAAA,MACA2G,eAAa;AAAA,MACbC,WAAWjH;AAAAA,MACXkH,UAAU/F;AAAAA,MACVgG,UAAU/D;AAAAA,MACVgE,gBAAgBlE;AAAAA,MAChBmE,qBAAqB9D;AAAAA,MACrB/D,aAAakG,YAAY4B,MAAAA,aAAa1B,WAAW9F,WAAWG,MAAM,CAAC;AAAA,MACnEsH,0CACGC,0BAAQ;AAAA,QACPjJ,WAAWF,QAAQoJ;AAAAA,QACnBrC,OAAOzG,WAAW,iBAAiBsE;AAAAA,MAAAA,CACpC;AAAA,MAEHyE,aAAa;AAAA,QACXC,WAAW,CACT;AAAA,UAAElJ,MAAM;AAAA,UAAmBmJ,SAAStH;AAAAA,QAAAA,CAAqB;AAAA,MAE7D;AAAA,MACA,iBAAc;AAAA,MACd,cAAYxB;AAAAA,MACZ,mBACE,CAACD,SAAS0F,YAAM1D,WAAW,OAAO,GAAG9B,cAAc,EAChD8I,KAAK,GAAG,EACRC,UAAU7E;AAAAA,MAEf,gBAAc+C,iBAAiB,OAAO/C;AAAAA,MACtC,qBAAmBiD;AAAAA,MACnB,oBACE,CAAClH,eAAeuF,YAAM1D,WAAW,aAAa,GAAG5B,eAAe,EAC7D4I,KAAK,GAAG,EACRC,UAAU7E;AAAAA,MACd,GACG1C;AAAAA,MAAa4D,WAEjBC,2BAAAA,IAAA,OAAA;AAAA,QAAK2D,KAAK/F;AAAAA,QAAagG,UAAU;AAAA,MAAA,CAAK,GACtC5D,2BAAAA,IAAC6D,qBAAU;AAAA,QACTzJ,IAAI+F,MAAAA,MAAM/F,IAAI,UAAU;AAAA,QACxBuB;AAAAA,QACAb,UAAUuE;AAAAA,QACVyE,eAAerE;AAAAA,QACfsE,qBAAqBA,CAACC,QAAQ7F,MAAMI,OAAOH,WAAW;AACrC,yBAAA;AAAA,YAAED;AAAAA,YAAMC;AAAAA,YAAQG;AAAAA,UAAAA,CAAO;AAAA,QACxC;AAAA,QACA1C;AAAAA,QAAe,GACX4B;AAAAA,QAAW,GACXrB;AAAAA,QACJ6H,kBAAkB5I,iCAAQ4I;AAAAA,MAC3B,CAAA,IACCvI,aAAaK,gBAAgB4D,eAAe;AAAA,IAAA,CAChC,GACfgC,gBACC3B,2BAAAA,IAACkE,2BAAa;AAAA,MACZ9J,IAAI+F,MAAAA,MAAM1D,WAAW,OAAO;AAAA,MAC5B0H,eAAa;AAAA,MACbhK,WAAWmC,GAAGrC,QAAQmK,KAAK;AAAA,MAAErE,UAE5BjD;AAAAA,IAAAA,CACY,CAChB;AAAA,EAAA,CACY;AAEnB;;;"}

package/dist/cjs/components/DotPagination/DotPagination.cjs

@@ -1,29 +1,30 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const React = require("react");
-const dotPaginationClasses = require("./dotPaginationClasses.cjs");
 const DotPagination_styles = require("./DotPagination.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const RadioGroup = require("../RadioGroup/RadioGroup.cjs");
+const Radio = require("../Radio/Radio.cjs");
 const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
   return {
-    radio: React.cloneElement(radioIcon || /* @__PURE__ */ jsxRuntime.jsx(DotPagination_styles.StyledOtherStep, {
+    radio: React.cloneElement(radioIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.OtherStep, {
       width: 8,
       height: 8
     }), {
-      className: clsx.clsx(classes == null ? void 0 : classes.icon, dotPaginationClasses.default.icon)
+      className: classes == null ? void 0 : classes.icon
     }),
-    radioChecked: React.cloneElement(radioCheckedIcon || /* @__PURE__ */ jsxRuntime.jsx(DotPagination_styles.StyledCurrentStep, {
+    radioChecked: React.cloneElement(radioCheckedIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, {
       width: 8,
       height: 8
     }), {
-      className: clsx.clsx(classes == null ? void 0 : classes.icon, dotPaginationClasses.default.icon)
+      className: classes == null ? void 0 : classes.icon
     })
   };
 };
 const HvDotPagination = ({
   className,
-  classes,
+  classes: classesProp = {},
   unselectedIcon,
   selectedIcon,
   pages = 1,
@@ -33,18 +34,22 @@ const HvDotPagination = ({
   ...others
 }) => {
   const range = (n) => Array.from(Array(n), (_, i) => i);
+  const {
+    classes,
+    cx
+  } = DotPagination_styles.useClasses(classesProp);
   const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);
-  return /* @__PURE__ */ jsxRuntime.jsx(DotPagination_styles.StyledRadioGroup, {
-    className: clsx.clsx(className, classes == null ? void 0 : classes.root, dotPaginationClasses.default.root),
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroup.HvRadioGroup, {
+    className: cx(classes.root, className),
     classes: {
-      horizontal: clsx.clsx(classes == null ? void 0 : classes.horizontal, dotPaginationClasses.default.horizontal)
+      horizontal: classes.horizontal
     },
     orientation: "horizontal",
     ...others,
-    children: range(pages).map((i) => /* @__PURE__ */ jsxRuntime.jsx(DotPagination_styles.StyledRadio, {
+    children: range(pages).map((i) => /* @__PURE__ */ jsxRuntime.jsx(Radio.HvRadio, {
       classes: {
-        radio: clsx.clsx(classes == null ? void 0 : classes.radio, dotPaginationClasses.default.radio),
-        root: clsx.clsx(classes == null ? void 0 : classes.radioRoot, dotPaginationClasses.default.radioRoot)
+        radio: classes.radio,
+        root: classes.radioRoot
       },
       value: i,
       checked: page === i,
@@ -55,5 +60,6 @@ const HvDotPagination = ({
     }, i))
   });
 };
+exports.dotPaginationClasses = DotPagination_styles.staticClasses;
 exports.HvDotPagination = HvDotPagination;
 //# sourceMappingURL=DotPagination.cjs.map

package/dist/cjs/components/DotPagination/DotPagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.cjs","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { cloneElement } from \"react\";\nimport { HvRadioGroupProps } from \"../RadioGroup\";\nimport dotPaginationClasses, {\n  HvDotPaginationClasses,\n} from \"./dotPaginationClasses\";\nimport {\n  StyledCurrentStep,\n  StyledOtherStep,\n  StyledRadio,\n  StyledRadioGroup,\n} from \"./DotPagination.styles\";\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <StyledOtherStep width={8} height={8} />, {\n      className: clsx(classes?.icon, dotPaginationClasses.icon),\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <StyledCurrentStep width={8} height={8} />,\n      {\n        className: clsx(classes?.icon, dotPaginationClasses.icon),\n      }\n    ),\n  };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = ({\n  className,\n  classes,\n  unselectedIcon,\n  selectedIcon,\n  pages = 1,\n  page = 0,\n  onPageChange,\n  getItemAriaLabel,\n  ...others\n}: HvDotPaginationProps) => {\n  const range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <StyledRadioGroup\n      className={clsx(className, classes?.root, dotPaginationClasses.root)}\n      classes={{\n        horizontal: clsx(classes?.horizontal, dotPaginationClasses.horizontal),\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <StyledRadio\n          classes={{\n            radio: clsx(classes?.radio, dotPaginationClasses.radio),\n            root: clsx(classes?.radioRoot, dotPaginationClasses.radioRoot),\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </StyledRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","_jsx","StyledOtherStep","width","height","className","clsx","icon","dotPaginationClasses","radioChecked","StyledCurrentStep","HvDotPagination","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","_","i","icons","StyledRadioGroup","root","horizontal","orientation","children","map","StyledRadio","radioRoot","value","checked","onChange","event","checkedIcon"],"mappings":";;;;;;;AAoDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,MAAAA,aAAaJ,aAAaK,2BAAAA,IAACC,qBAAAA,iBAAe;AAAA,MAACC,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GAAG;AAAA,MACzEC,WAAWC,KAAAA,KAAKR,mCAASS,MAAMC,qBAAAA,QAAqBD,IAAI;AAAA,IAAA,CACzD;AAAA,IACDE,cAAcT,MAAAA,aACZH,oBAAoBI,2BAAAA,IAACS,qBAAAA,mBAAiB;AAAA,MAACP,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GAC7D;AAAA,MACEC,WAAWC,KAAAA,KAAKR,mCAASS,MAAMC,qBAAAA,QAAqBD,IAAI;AAAA,IAAA,CAE5D;AAAA,EAAA;AAEJ;AAMO,MAAMI,kBAAkBA,CAAC;AAAA,EAC9BN;AAAAA,EACAP;AAAAA,EACAc;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpBC,QAAAA,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAE7D,QAAMC,QAAQ9B,iBAAiBiB,gBAAgBC,cAAcf,OAAO;AAEpE,wCACG4B,qBAAAA,kBAAgB;AAAA,IACfrB,WAAWC,KAAKD,KAAAA,WAAWP,mCAAS6B,MAAMnB,6BAAqBmB,IAAI;AAAA,IACnE7B,SAAS;AAAA,MACP8B,YAAYtB,KAAAA,KAAKR,mCAAS8B,YAAYpB,qBAAAA,QAAqBoB,UAAU;AAAA,IACvE;AAAA,IACAC,aAAY;AAAA,IAAY,GACpBX;AAAAA,IAAMY,UAETX,MAAML,KAAK,EAAEiB,IAAKP,CAAAA,qCAChBQ,kCAAW;AAAA,MACVlC,SAAS;AAAA,QACPC,OAAOO,KAAAA,KAAKR,mCAASC,OAAOS,qBAAAA,QAAqBT,KAAK;AAAA,QACtD4B,MAAMrB,KAAAA,KAAKR,mCAASmC,WAAWzB,qBAAAA,QAAqByB,SAAS;AAAA,MAC/D;AAAA,MAEAC,OAAOV;AAAAA,MACPW,SAASpB,SAASS;AAAAA,MAClBY,UAAWC,CAAAA,UAAUrB,6CAAeqB,OAAOb;AAAAA,MAC3CjB,MAAMkB,MAAM1B;AAAAA,MACZuC,aAAab,MAAMhB;AAAAA,MACnB,cAAYQ,qDAAmBO;AAAAA,IAAG,GAN7BA,CAON,CACF;AAAA,EAAA,CACe;AAEtB;;"}
+{"version":3,"file":"DotPagination.cjs","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\nimport { cloneElement } from \"react\";\nimport { HvRadio, HvRadioGroup, HvRadioGroupProps } from \"@core/components\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      }\n    ),\n  };\n};\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = ({\n  className,\n  classes: classesProp = {},\n  unselectedIcon,\n  selectedIcon,\n  pages = 1,\n  page = 0,\n  onPageChange,\n  getItemAriaLabel,\n  ...others\n}: HvDotPaginationProps) => {\n  const range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{\n            radio: classes.radio,\n            root: classes.radioRoot,\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","_jsx","OtherStep","width","height","className","icon","radioChecked","CurrentStep","HvDotPagination","classesProp","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","_","i","cx","useClasses","icons","HvRadioGroup","root","horizontal","orientation","children","map","HvRadio","radioRoot","value","checked","onChange","event","checkedIcon"],"mappings":";;;;;;;;AAkDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,MAAAA,aAAaJ,aAAaK,2BAAAA,IAACC,gBAAAA,WAAS;AAAA,MAACC,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GAAG;AAAA,MACnEC,WAAWP,mCAASQ;AAAAA,IAAAA,CACrB;AAAA,IACDC,cAAcP,MAAAA,aACZH,oBAAoBI,2BAAAA,IAACO,gBAAAA,aAAW;AAAA,MAACL,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GACvD;AAAA,MACEC,WAAWP,mCAASQ;AAAAA,IAAAA,CAExB;AAAA,EAAA;AAEJ;AAMO,MAAMG,kBAAkBA,CAAC;AAAA,EAC9BJ;AAAAA,EACAP,SAASY,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AACpBC,QAAAA,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAEvD,QAAA;AAAA,IAAEzB;AAAAA,IAAS0B;AAAAA,EAAAA,IAAOC,qBAAAA,WAAWf,WAAW;AAE9C,QAAMgB,QAAQ/B,iBAAiBgB,gBAAgBC,cAAcd,OAAO;AAEpE,wCACG6B,WAAAA,cAAY;AAAA,IACXtB,WAAWmB,GAAG1B,QAAQ8B,MAAMvB,SAAS;AAAA,IACrCP,SAAS;AAAA,MACP+B,YAAY/B,QAAQ+B;AAAAA,IACtB;AAAA,IACAC,aAAY;AAAA,IAAY,GACpBb;AAAAA,IAAMc,UAETb,MAAML,KAAK,EAAEmB,IAAKT,CAAAA,qCAChBU,eAAO;AAAA,MACNnC,SAAS;AAAA,QACPC,OAAOD,QAAQC;AAAAA,QACf6B,MAAM9B,QAAQoC;AAAAA,MAChB;AAAA,MAEAC,OAAOZ;AAAAA,MACPa,SAAStB,SAASS;AAAAA,MAClBc,UAAWC,CAAAA,UAAUvB,6CAAeuB,OAAOf;AAAAA,MAC3CjB,MAAMoB,MAAM3B;AAAAA,MACZwC,aAAab,MAAMnB;AAAAA,MACnB,cAAYS,qDAAmBO;AAAAA,IAAG,GAN7BA,CAON,CACF;AAAA,EAAA,CACW;AAElB;;;"}

package/dist/cjs/components/DotPagination/DotPagination.styles.cjs

@@ -1,81 +1,34 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const dotPaginationClasses = require("./dotPaginationClasses.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const RadioGroup = require("../RadioGroup/RadioGroup.cjs");
-const Radio = require("../Radio/Radio.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const StyledRadioGroup = /* @__PURE__ */ _styled__default.default((props) => /* @__PURE__ */ jsxRuntime.jsx(RadioGroup.HvRadioGroup, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1buriah3"
-} : {
-  target: "e1buriah3",
-  label: "StyledRadioGroup"
-})({
-  display: "flex",
-  justifyContent: "center",
-  [`& .${dotPaginationClasses.default.horizontal}`]: {
+const classes = require("../../utils/classes.cjs");
+const {
+  useClasses,
+  staticClasses
+} = classes.createClasses("HvDotPagination", {
+  root: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  horizontal: {
     marginLeft: 0,
     width: "auto"
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRG90UGFnaW5hdGlvbi9Eb3RQYWdpbmF0aW9uLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV2dDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRG90UGFnaW5hdGlvbi9Eb3RQYWdpbmF0aW9uLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7XG4gIEh2UmFkaW8sXG4gIEh2UmFkaW9Hcm91cCxcbiAgSHZSYWRpb0dyb3VwUHJvcHMsXG4gIEh2UmFkaW9Qcm9wcyxcbn0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IEN1cnJlbnRTdGVwLCBPdGhlclN0ZXAgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWljb25zXCI7XG5pbXBvcnQgZG90UGFnaW5hdGlvbkNsYXNzZXMgZnJvbSBcIi4vZG90UGFnaW5hdGlvbkNsYXNzZXNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJhZGlvR3JvdXAgPSBzdHlsZWQoKHByb3BzOiBIdlJhZGlvR3JvdXBQcm9wcykgPT4gKFxuICA8SHZSYWRpb0dyb3VwIHsuLi5wcm9wc30gLz5cbikpKHtcbiAgZGlzcGxheTogXCJmbGV4XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuXG4gIFtgJiAuJHtkb3RQYWdpbmF0aW9uQ2xhc3Nlcy5ob3Jpem9udGFsfWBdOiB7XG4gICAgbWFyZ2luTGVmdDogMCxcbiAgICB3aWR0aDogXCJhdXRvXCIsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJhZGlvID0gc3R5bGVkKChwcm9wczogSHZSYWRpb1Byb3BzKSA9PiAoXG4gIDxIdlJhZGlvIHsuLi5wcm9wc30gLz5cbikpKHtcbiAgW2AmLiR7ZG90UGFnaW5hdGlvbkNsYXNzZXMucmFkaW9Sb290fWBdOiB7XG4gICAgbWFyZ2luTGVmdDogXCI4cHhcIixcbiAgfSxcblxuICBbYCYgLiR7ZG90UGFnaW5hdGlvbkNsYXNzZXMucmFkaW99YF06IHtcbiAgICBoZWlnaHQ6IFwiMTZweFwiLFxuXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLm5ldXRyYWxfMjAsXG4gICAgICBib3JkZXJSYWRpdXM6IFwiMTAwJVwiLFxuICAgIH0sXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZE90aGVyU3RlcCA9IHN0eWxlZChPdGhlclN0ZXApKHtcbiAgd2lkdGg6IFwiMTZweFwiLFxuICBoZWlnaHQ6IFwiMTZweFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDdXJyZW50U3RlcCA9IHN0eWxlZChDdXJyZW50U3RlcCkoe1xuICB3aWR0aDogXCIxNnB4XCIsXG4gIGhlaWdodDogXCIxNnB4XCIsXG59KTtcbiJdfQ== */");
-const StyledRadio = /* @__PURE__ */ _styled__default.default((props) => /* @__PURE__ */ jsxRuntime.jsx(Radio.HvRadio, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1buriah2"
-} : {
-  target: "e1buriah2",
-  label: "StyledRadio"
-})({
-  [`&.${dotPaginationClasses.default.radioRoot}`]: {
-    marginLeft: "8px"
   },
-  [`& .${dotPaginationClasses.default.radio}`]: {
+  radioRoot: {
+    marginLeft: uikitStyles.theme.space.xs
+  },
+  radio: {
     height: "16px",
     "&:hover": {
       backgroundColor: uikitStyles.theme.colors.neutral_20,
       borderRadius: "100%"
     }
+  },
+  icon: {
+    width: "16px",
+    height: "16px"
   }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRG90UGFnaW5hdGlvbi9Eb3RQYWdpbmF0aW9uLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUIyQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0RvdFBhZ2luYXRpb24vRG90UGFnaW5hdGlvbi5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQge1xuICBIdlJhZGlvLFxuICBIdlJhZGlvR3JvdXAsXG4gIEh2UmFkaW9Hcm91cFByb3BzLFxuICBIdlJhZGlvUHJvcHMsXG59IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBDdXJyZW50U3RlcCwgT3RoZXJTdGVwIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1pY29uc1wiO1xuaW1wb3J0IGRvdFBhZ2luYXRpb25DbGFzc2VzIGZyb20gXCIuL2RvdFBhZ2luYXRpb25DbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSYWRpb0dyb3VwID0gc3R5bGVkKChwcm9wczogSHZSYWRpb0dyb3VwUHJvcHMpID0+IChcbiAgPEh2UmFkaW9Hcm91cCB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcblxuICBbYCYgLiR7ZG90UGFnaW5hdGlvbkNsYXNzZXMuaG9yaXpvbnRhbH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IDAsXG4gICAgd2lkdGg6IFwiYXV0b1wiLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSYWRpbyA9IHN0eWxlZCgocHJvcHM6IEh2UmFkaW9Qcm9wcykgPT4gKFxuICA8SHZSYWRpbyB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIFtgJi4ke2RvdFBhZ2luYXRpb25DbGFzc2VzLnJhZGlvUm9vdH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IFwiOHB4XCIsXG4gIH0sXG5cbiAgW2AmIC4ke2RvdFBhZ2luYXRpb25DbGFzc2VzLnJhZGlvfWBdOiB7XG4gICAgaGVpZ2h0OiBcIjE2cHhcIixcblxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5uZXV0cmFsXzIwLFxuICAgICAgYm9yZGVyUmFkaXVzOiBcIjEwMCVcIixcbiAgICB9LFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRPdGhlclN0ZXAgPSBzdHlsZWQoT3RoZXJTdGVwKSh7XG4gIHdpZHRoOiBcIjE2cHhcIixcbiAgaGVpZ2h0OiBcIjE2cHhcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ3VycmVudFN0ZXAgPSBzdHlsZWQoQ3VycmVudFN0ZXApKHtcbiAgd2lkdGg6IFwiMTZweFwiLFxuICBoZWlnaHQ6IFwiMTZweFwiLFxufSk7XG4iXX0= */");
-const StyledOtherStep = /* @__PURE__ */ _styled__default.default(uikitReactIcons.OtherStep, process.env.NODE_ENV === "production" ? {
-  target: "e1buriah1"
-} : {
-  target: "e1buriah1",
-  label: "StyledOtherStep"
-})(process.env.NODE_ENV === "production" ? {
-  name: "157xhr7",
-  styles: "width:16px;height:16px"
-} : {
-  name: "157xhr7",
-  styles: "width:16px;height:16px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRG90UGFnaW5hdGlvbi9Eb3RQYWdpbmF0aW9uLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0MrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0RvdFBhZ2luYXRpb24vRG90UGFnaW5hdGlvbi5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQge1xuICBIdlJhZGlvLFxuICBIdlJhZGlvR3JvdXAsXG4gIEh2UmFkaW9Hcm91cFByb3BzLFxuICBIdlJhZGlvUHJvcHMsXG59IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBDdXJyZW50U3RlcCwgT3RoZXJTdGVwIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1pY29uc1wiO1xuaW1wb3J0IGRvdFBhZ2luYXRpb25DbGFzc2VzIGZyb20gXCIuL2RvdFBhZ2luYXRpb25DbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSYWRpb0dyb3VwID0gc3R5bGVkKChwcm9wczogSHZSYWRpb0dyb3VwUHJvcHMpID0+IChcbiAgPEh2UmFkaW9Hcm91cCB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcblxuICBbYCYgLiR7ZG90UGFnaW5hdGlvbkNsYXNzZXMuaG9yaXpvbnRhbH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IDAsXG4gICAgd2lkdGg6IFwiYXV0b1wiLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSYWRpbyA9IHN0eWxlZCgocHJvcHM6IEh2UmFkaW9Qcm9wcykgPT4gKFxuICA8SHZSYWRpbyB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIFtgJi4ke2RvdFBhZ2luYXRpb25DbGFzc2VzLnJhZGlvUm9vdH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IFwiOHB4XCIsXG4gIH0sXG5cbiAgW2AmIC4ke2RvdFBhZ2luYXRpb25DbGFzc2VzLnJhZGlvfWBdOiB7XG4gICAgaGVpZ2h0OiBcIjE2cHhcIixcblxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5uZXV0cmFsXzIwLFxuICAgICAgYm9yZGVyUmFkaXVzOiBcIjEwMCVcIixcbiAgICB9LFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRPdGhlclN0ZXAgPSBzdHlsZWQoT3RoZXJTdGVwKSh7XG4gIHdpZHRoOiBcIjE2cHhcIixcbiAgaGVpZ2h0OiBcIjE2cHhcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ3VycmVudFN0ZXAgPSBzdHlsZWQoQ3VycmVudFN0ZXApKHtcbiAgd2lkdGg6IFwiMTZweFwiLFxuICBoZWlnaHQ6IFwiMTZweFwiLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledCurrentStep = /* @__PURE__ */ _styled__default.default(uikitReactIcons.CurrentStep, process.env.NODE_ENV === "production" ? {
-  target: "e1buriah0"
-} : {
-  target: "e1buriah0",
-  label: "StyledCurrentStep"
-})(process.env.NODE_ENV === "production" ? {
-  name: "157xhr7",
-  styles: "width:16px;height:16px"
-} : {
-  name: "157xhr7",
-  styles: "width:16px;height:16px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRG90UGFnaW5hdGlvbi9Eb3RQYWdpbmF0aW9uLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkNpQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0RvdFBhZ2luYXRpb24vRG90UGFnaW5hdGlvbi5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQge1xuICBIdlJhZGlvLFxuICBIdlJhZGlvR3JvdXAsXG4gIEh2UmFkaW9Hcm91cFByb3BzLFxuICBIdlJhZGlvUHJvcHMsXG59IGZyb20gXCJAY29yZS9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBDdXJyZW50U3RlcCwgT3RoZXJTdGVwIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1yZWFjdC1pY29uc1wiO1xuaW1wb3J0IGRvdFBhZ2luYXRpb25DbGFzc2VzIGZyb20gXCIuL2RvdFBhZ2luYXRpb25DbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSYWRpb0dyb3VwID0gc3R5bGVkKChwcm9wczogSHZSYWRpb0dyb3VwUHJvcHMpID0+IChcbiAgPEh2UmFkaW9Hcm91cCB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcblxuICBbYCYgLiR7ZG90UGFnaW5hdGlvbkNsYXNzZXMuaG9yaXpvbnRhbH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IDAsXG4gICAgd2lkdGg6IFwiYXV0b1wiLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSYWRpbyA9IHN0eWxlZCgocHJvcHM6IEh2UmFkaW9Qcm9wcykgPT4gKFxuICA8SHZSYWRpbyB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIFtgJi4ke2RvdFBhZ2luYXRpb25DbGFzc2VzLnJhZGlvUm9vdH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IFwiOHB4XCIsXG4gIH0sXG5cbiAgW2AmIC4ke2RvdFBhZ2luYXRpb25DbGFzc2VzLnJhZGlvfWBdOiB7XG4gICAgaGVpZ2h0OiBcIjE2cHhcIixcblxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5uZXV0cmFsXzIwLFxuICAgICAgYm9yZGVyUmFkaXVzOiBcIjEwMCVcIixcbiAgICB9LFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRPdGhlclN0ZXAgPSBzdHlsZWQoT3RoZXJTdGVwKSh7XG4gIHdpZHRoOiBcIjE2cHhcIixcbiAgaGVpZ2h0OiBcIjE2cHhcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ3VycmVudFN0ZXAgPSBzdHlsZWQoQ3VycmVudFN0ZXApKHtcbiAgd2lkdGg6IFwiMTZweFwiLFxuICBoZWlnaHQ6IFwiMTZweFwiLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.StyledCurrentStep = StyledCurrentStep;
-exports.StyledOtherStep = StyledOtherStep;
-exports.StyledRadio = StyledRadio;
-exports.StyledRadioGroup = StyledRadioGroup;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=DotPagination.styles.cjs.map

package/dist/cjs/components/DotPagination/DotPagination.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.styles.cjs","sources":["../../../../src/components/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {\n  HvRadio,\n  HvRadioGroup,\n  HvRadioGroupProps,\n  HvRadioProps,\n} from \"@core/components\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\nimport dotPaginationClasses from \"./dotPaginationClasses\";\n\nexport const StyledRadioGroup = styled((props: HvRadioGroupProps) => (\n  <HvRadioGroup {...props} />\n))({\n  display: \"flex\",\n  justifyContent: \"center\",\n\n  [`& .${dotPaginationClasses.horizontal}`]: {\n    marginLeft: 0,\n    width: \"auto\",\n  },\n});\n\nexport const StyledRadio = styled((props: HvRadioProps) => (\n  <HvRadio {...props} />\n))({\n  [`&.${dotPaginationClasses.radioRoot}`]: {\n    marginLeft: \"8px\",\n  },\n\n  [`& .${dotPaginationClasses.radio}`]: {\n    height: \"16px\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.neutral_20,\n      borderRadius: \"100%\",\n    },\n  },\n});\n\nexport const StyledOtherStep = styled(OtherStep)({\n  width: \"16px\",\n  height: \"16px\",\n});\n\nexport const StyledCurrentStep = styled(CurrentStep)({\n  width: \"16px\",\n  height: \"16px\",\n});\n"],"names":["StyledRadioGroup","_styled","props","HvRadioGroup","process","env","NODE_ENV","target","label","display","justifyContent","dotPaginationClasses","horizontal","marginLeft","width","StyledRadio","HvRadio","radioRoot","radio","height","backgroundColor","theme","colors","neutral_20","borderRadius","StyledOtherStep","OtherStep","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledCurrentStep","CurrentStep"],"mappings":";;;;;;;;;;;;;;AAWO,MAAMA,mBAAmBC,iCAAAA,QAAO,CAACC,yCACrCC,WAAAA,cAAY;AAAA,EAAA,GAAKD;AAAK,CAAG,GAC3BE,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACDC,SAAS;AAAA,EACTC,gBAAgB;AAAA,EAEhB,CAAE,MAAKC,6BAAqBC,YAAY,GAAG;AAAA,IACzCC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AACF,GAACV,QAAAC,IAAAC,aAAC,eAAA,KAAA,yhEAAA;AAEK,MAAMS,cAAcd,iCAAAA,QAAO,CAACC,yCAChCc,MAAAA,SAAO;AAAA,EAAA,GAAKd;AAAK,CAAG,GACtBE,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACD,CAAE,KAAIG,6BAAqBM,WAAW,GAAG;AAAA,IACvCJ,YAAY;AAAA,EACd;AAAA,EAEA,CAAE,MAAKF,6BAAqBO,OAAO,GAAG;AAAA,IACpCC,QAAQ;AAAA,IAER,WAAW;AAAA,MACTC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,MAC9BC,cAAc;AAAA,IAChB;AAAA,EACF;AACF,GAACpB,QAAAC,IAAAC,aAAC,eAAA,KAAA,yhEAAA;AAEK,MAAMmB,kBAAyBC,iCAAAA,QAAAA,gBAAAA,WAAStB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAqB,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAG/C;AAEM,MAAMC,oBAA2BC,iCAAAA,QAAAA,gBAAAA,aAAW7B,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAqB,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGnD;;;;;"}
+{"version":3,"file":"DotPagination.styles.cjs","sources":["../../../../src/components/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvDotPagination\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  horizontal: {\n    marginLeft: 0,\n    width: \"auto\",\n  },\n\n  radioRoot: {\n    marginLeft: theme.space.xs,\n  },\n\n  radio: {\n    height: \"16px\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.neutral_20,\n      borderRadius: \"100%\",\n    },\n  },\n\n  icon: {\n    width: \"16px\",\n    height: \"16px\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","display","justifyContent","horizontal","marginLeft","width","radioRoot","theme","space","xs","radio","height","backgroundColor","colors","neutral_20","borderRadius","icon"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EAEAC,YAAY;AAAA,IACVC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AAAA,EAEAC,WAAW;AAAA,IACTF,YAAYG,YAAAA,MAAMC,MAAMC;AAAAA,EAC1B;AAAA,EAEAC,OAAO;AAAA,IACLC,QAAQ;AAAA,IAER,WAAW;AAAA,MACTC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,MAC9BC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EAEAC,MAAM;AAAA,IACJX,OAAO;AAAA,IACPM,QAAQ;AAAA,EACV;AACF,CAAC;;;"}

package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs

@@ -25,6 +25,7 @@ const {
   icon: {
     position: "relative",
     width: 32,
+    height: 32,
     boxSizing: "border-box",
     padding: 0,
     borderRadius: uikitStyles.theme.dropDownMenu.borderRadius,

package/dist/cjs/components/DropDownMenu/DropDownMenu.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses, outlineStyles } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&.focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.dropDownMenu.borderRadius,\n    border: theme.dropDownMenu.borderClosed,\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: theme.dropDownMenu.borderOpened,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","menuListRoot","menuList"],"mappings":";;;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQF,YAAAA,MAAMC,aAAaE;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAAA,MAAMY,MAAMC,QAAQb,kBAAMY,MAAMC;AAAAA,IACjDX,QAAQF,YAAAA,MAAMC,aAAaa;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;;;"}
+{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses, outlineStyles } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&.focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.dropDownMenu.borderRadius,\n    border: theme.dropDownMenu.borderClosed,\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: theme.dropDownMenu.borderOpened,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","height","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","menuListRoot","menuList"],"mappings":";;;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQF,YAAAA,MAAMC,aAAaE;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAAA,MAAMY,MAAMC,QAAQb,kBAAMY,MAAMC;AAAAA,IACjDX,QAAQF,YAAAA,MAAMC,aAAaa;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;;;"}

package/dist/cjs/components/Typography/Typography.cjs

@@ -1,30 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const React = require("react");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const clsx = require("clsx");
 const utils = require("./utils.cjs");
-const typographyClasses = require("./typographyClasses.cjs");
+const Typography_styles = require("./Typography.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useTheme = require("../../hooks/useTheme.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+const typographyVariants = ["display", "title1", "title2", "title3", "title4", "body", "label", "caption1", "caption2"];
 const HvTypographyMap = {
   display: "h1",
   title1: "h1",
@@ -50,132 +31,38 @@ const HvTypographyMap = {
   vizTextDisabled: "p",
   xsInlineLink: "p"
 };
-const getStyledComponent = (c) => /* @__PURE__ */ _styled__default.default(c, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1tnpalo0"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e1tnpalo0",
-  label: "getStyledComponent"
-}, transientOptions.transientOptions))(({
-  $variant,
-  $link = false,
-  $disabled = false,
-  $noWrap = false
-}) => ({
-  ...$variant === "display" && {
-    ...uikitStyles.theme.typography.display
-  },
-  ...$variant === "title1" && {
-    ...uikitStyles.theme.typography.title1
-  },
-  ...$variant === "title2" && {
-    ...uikitStyles.theme.typography.title2
-  },
-  ...$variant === "title3" && {
-    ...uikitStyles.theme.typography.title3
-  },
-  ...$variant === "title4" && {
-    ...uikitStyles.theme.typography.title4
-  },
-  ...$variant === "body" && {
-    ...uikitStyles.theme.typography.body
-  },
-  ...$variant === "label" && {
-    ...uikitStyles.theme.typography.label
-  },
-  ...$variant === "caption1" && {
-    ...uikitStyles.theme.typography.caption1
-  },
-  ...$variant === "caption2" && {
-    ...uikitStyles.theme.typography.caption2
-  },
-  // LEGACY
-  ...$variant === "5xlTitle" && {
-    ...uikitStyles.theme.typography["5xlTitle"]
-  },
-  ...$variant === "4xlTitle" && {
-    ...uikitStyles.theme.typography["4xlTitle"]
-  },
-  ...$variant === "xxlTitle" && {
-    ...uikitStyles.theme.typography.xxlTitle
-  },
-  ...$variant === "lTitle" && {
-    ...uikitStyles.theme.typography.lTitle
-  },
-  ...$variant === "sTitle" && {
-    ...uikitStyles.theme.typography.sTitle
-  },
-  ...$variant === "xxsTitle" && {
-    ...uikitStyles.theme.typography.xxsTitle
-  },
-  ...$variant === "sectionTitle" && {
-    ...uikitStyles.theme.typography.sectionTitle,
-    textTransform: "uppercase"
-  },
-  ...$variant === "placeholderText" && {
-    ...uikitStyles.theme.typography.placeholderText
-  },
-  ...$variant === "link" && {
-    ...uikitStyles.theme.typography.link,
-    textDecoration: "underline",
-    cursor: "pointer"
-  },
-  ...$variant === "disabledText" && {
-    ...uikitStyles.theme.typography.disabledText
-  },
-  ...$variant === "selectedNavText" && {
-    ...uikitStyles.theme.typography.selectedNavText
-  },
-  ...$variant === "vizTextDisabled" && {
-    ...uikitStyles.theme.typography.vizTextDisabled
-  },
-  ...$variant === "xsInlineLink" && {
-    ...uikitStyles.theme.typography.xsInlineLink
-  },
-  fontFamily: uikitStyles.theme.fontFamily.body,
-  // ADDED PROPS
-  ...$link && {
-    color: uikitStyles.theme.colors.primary,
-    textDecoration: "underline",
-    cursor: "pointer"
-  },
-  ...$disabled && {
-    color: uikitStyles.theme.colors.secondary_60
-  },
-  ...$noWrap && {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVHlwb2dyYXBoeS9UeXBvZ3JhcGh5LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RUUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9UeXBvZ3JhcGh5L1R5cG9ncmFwaHkudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgZm9yd2FyZFJlZixcbiAgdXNlTWVtbyxcbiAgQ1NTUHJvcGVydGllcyxcbiAgQWxsSFRNTEF0dHJpYnV0ZXMsXG4gIFJlZixcbn0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBIdkJhc2VQcm9wcyB9IGZyb20gXCJAY29yZS90eXBlc1wiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IGNsc3ggfSBmcm9tIFwiY2xzeFwiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQGNvcmUvaG9va3NcIjtcbmltcG9ydCB7IG1hcFZhcmlhbnQgfSBmcm9tIFwiLi91dGlsc1wiO1xuaW1wb3J0IHR5cG9ncmFwaHlDbGFzc2VzLCB7IEh2VHlwb2dyYXBoeUNsYXNzZXMgfSBmcm9tIFwiLi90eXBvZ3JhcGh5Q2xhc3Nlc1wiO1xuXG5leHBvcnQgdHlwZSBIdlR5cG9ncmFwaHlWYXJpYW50cyA9XG4gIHwgXCJkaXNwbGF5XCJcbiAgfCBcInRpdGxlMVwiXG4gIHwgXCJ0aXRsZTJcIlxuICB8IFwidGl0bGUzXCJcbiAgfCBcInRpdGxlNFwiXG4gIHwgXCJib2R5XCJcbiAgfCBcImxhYmVsXCJcbiAgfCBcImNhcHRpb24xXCJcbiAgfCBcImNhcHRpb24yXCI7XG5cbi8qKiBAZGVwcmVjYXRlZCAqL1xuZXhwb3J0IHR5cGUgSHZUeXBvZ3JhcGh5TGVnYWN5VmFyaWFudHMgPVxuICB8IFwiNXhsVGl0bGVcIlxuICB8IFwiNHhsVGl0bGVcIlxuICB8IFwiM3hsVGl0bGVcIlxuICB8IFwieHhsVGl0bGVcIlxuICB8IFwieGxUaXRsZVwiXG4gIHwgXCJsVGl0bGVcIlxuICB8IFwibVRpdGxlXCJcbiAgfCBcInNUaXRsZVwiXG4gIHwgXCJ4c1RpdGxlXCJcbiAgfCBcInh4c1RpdGxlXCJcbiAgfCBcInNlY3Rpb25UaXRsZVwiXG4gIHwgXCJoaWdobGlnaHRUZXh0XCJcbiAgfCBcIm5vcm1hbFRleHRcIlxuICB8IFwicGxhY2Vob2xkZXJUZXh0XCJcbiAgfCBcImxpbmtcIlxuICB8IFwiZGlzYWJsZWRUZXh0XCJcbiAgfCBcInNlbGVjdGVkTmF2VGV4dFwiXG4gIHwgXCJ2aXpUZXh0XCJcbiAgfCBcInZpelRleHREaXNhYmxlZFwiXG4gIHwgXCJ4c0lubGluZUxpbmtcIjtcblxuY29uc3QgSHZUeXBvZ3JhcGh5TWFwID0ge1xuICBkaXNwbGF5OiBcImgxXCIsXG4gIHRpdGxlMTogXCJoMVwiLFxuICB0aXRsZTI6IFwiaDJcIixcbiAgdGl0bGUzOiBcImgzXCIsXG4gIHRpdGxlNDogXCJoNFwiLFxuICBib2R5OiBcInBcIixcbiAgbGFiZWw6IFwibGFiZWxcIixcbiAgY2FwdGlvbjE6IFwicFwiLFxuICBjYXB0aW9uMjogXCJwXCIsXG4gIC8vIExFR0FDWVxuICBcIjV4bFRpdGxlXCI6IFwiaDFcIixcbiAgXCI0eGxUaXRsZVwiOiBcImgxXCIsXG4gIHh4bFRpdGxlOiBcImgxXCIsXG4gIGxUaXRsZTogXCJoMlwiLFxuICBzVGl0bGU6IFwiaDRcIixcbiAgeHhzVGl0bGU6IFwiaDZcIixcbiAgc2VjdGlvblRpdGxlOiBcInBcIixcbiAgcGxhY2Vob2xkZXJUZXh0OiBcInBcIixcbiAgbGluazogXCJwXCIsXG4gIGRpc2FibGVkVGV4dDogXCJwXCIsXG4gIHNlbGVjdGVkTmF2VGV4dDogXCJwXCIsXG4gIHZpelRleHREaXNhYmxlZDogXCJwXCIsXG4gIHhzSW5saW5lTGluazogXCJwXCIsXG59IGFzIGNvbnN0O1xuXG5jb25zdCBnZXRTdHlsZWRDb21wb25lbnQgPSA8VCBleHRlbmRzIGtleW9mIEpTWC5JbnRyaW5zaWNFbGVtZW50cz4oYzogVCkgPT5cbiAgc3R5bGVkKFxuICAgIGMsXG4gICAgdHJhbnNpZW50T3B0aW9uc1xuICApKFxuICAgICh7XG4gICAgICAkdmFyaWFudCxcbiAgICAgICRsaW5rID0gZmFsc2UsXG4gICAgICAkZGlzYWJsZWQgPSBmYWxzZSxcbiAgICAgICRub1dyYXAgPSBmYWxzZSxcbiAgICB9OiB7XG4gICAgICAkdmFyaWFudDogSHZUeXBvZ3JhcGh5VmFyaWFudHMgfCBIdlR5cG9ncmFwaHlMZWdhY3lWYXJpYW50cztcbiAgICAgICRsaW5rPzogYm9vbGVhbjtcbiAgICAgICRkaXNhYmxlZD86IGJvb2xlYW47XG4gICAgICAkbm9XcmFwPzogYm9vbGVhbjtcbiAgICB9KSA9PiAoe1xuICAgICAgLi4uKCR2YXJpYW50ID09PSBcImRpc3BsYXlcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmRpc3BsYXkgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJ0aXRsZTFcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnRpdGxlMSBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcInRpdGxlMlwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkudGl0bGUyIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwidGl0bGUzXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS50aXRsZTMgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJ0aXRsZTRcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnRpdGxlNCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcImJvZHlcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmJvZHkgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJsYWJlbFwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkubGFiZWwgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJjYXB0aW9uMVwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuY2FwdGlvbjEgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJjYXB0aW9uMlwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuY2FwdGlvbjIgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC8vIExFR0FDWVxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcIjV4bFRpdGxlXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeVtcIjV4bFRpdGxlXCJdIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwiNHhsVGl0bGVcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5W1wiNHhsVGl0bGVcIl0gYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJ4eGxUaXRsZVwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkueHhsVGl0bGUgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJsVGl0bGVcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmxUaXRsZSBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcInNUaXRsZVwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuc1RpdGxlIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwieHhzVGl0bGVcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5Lnh4c1RpdGxlIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwic2VjdGlvblRpdGxlXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5zZWN0aW9uVGl0bGUgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICAgIHRleHRUcmFuc2Zvcm06IFwidXBwZXJjYXNlXCIsXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJwbGFjZWhvbGRlclRleHRcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnBsYWNlaG9sZGVyVGV4dCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcImxpbmtcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LmxpbmsgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICAgIHRleHREZWNvcmF0aW9uOiBcInVuZGVybGluZVwiLFxuICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwiZGlzYWJsZWRUZXh0XCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS5kaXNhYmxlZFRleHQgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIC4uLigkdmFyaWFudCA9PT0gXCJzZWxlY3RlZE5hdlRleHRcIiAmJiB7XG4gICAgICAgIC4uLih0aGVtZS50eXBvZ3JhcGh5LnNlbGVjdGVkTmF2VGV4dCBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgICAgIH0pLFxuICAgICAgLi4uKCR2YXJpYW50ID09PSBcInZpelRleHREaXNhYmxlZFwiICYmIHtcbiAgICAgICAgLi4uKHRoZW1lLnR5cG9ncmFwaHkudml6VGV4dERpc2FibGVkIGFzIENTU1Byb3BlcnRpZXMpLFxuICAgICAgfSksXG4gICAgICAuLi4oJHZhcmlhbnQgPT09IFwieHNJbmxpbmVMaW5rXCIgJiYge1xuICAgICAgICAuLi4odGhlbWUudHlwb2dyYXBoeS54c0lubGluZUxpbmsgYXMgQ1NTUHJvcGVydGllcyksXG4gICAgICB9KSxcbiAgICAgIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcbiAgICAgIC8vIEFEREVEIFBST1BTXG4gICAgICAuLi4oJGxpbmsgJiYge1xuICAgICAgICBjb2xvcjogdGhlbWUuY29sb3JzLnByaW1hcnksXG4gICAgICAgIHRleHREZWNvcmF0aW9uOiBcInVuZGVybGluZVwiLFxuICAgICAgICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICAgICAgfSksXG4gICAgICAuLi4oJGRpc2FibGVkICYmIHtcbiAgICAgICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnlfNjAsXG4gICAgICB9KSxcbiAgICAgIC4uLigkbm9XcmFwICYmIHtcbiAgICAgICAgb3ZlcmZsb3c6IFwiaGlkZGVuXCIsXG4gICAgICAgIHRleHRPdmVyZmxvdzogXCJlbGxpcHNpc1wiLFxuICAgICAgICB3aGl0ZVNwYWNlOiBcIm5vd3JhcFwiLFxuICAgICAgfSksXG4gICAgfSlcbiAgKTtcblxuZXhwb3J0IGludGVyZmFjZSBIdlR5cG9ncmFwaHlQcm9wc1xuICBleHRlbmRzIE9taXQ8QWxsSFRNTEF0dHJpYnV0ZXM8SFRNTEVsZW1lbnQ+LCBcImRpc2FibGVkXCI+LFxuICAgIEh2QmFzZVByb3BzPEhUTUxFbGVtZW50PiB7XG4gIGNvbXBvbmVudD86IFJlYWN0LlJlYWN0Tm9kZSB8IFJlYWN0LkVsZW1lbnRUeXBlO1xuICAvKiogVXNlIHRoZSB2YXJpYW50IHByb3AgdG8gY2hhbmdlIHRoZSB2aXN1YWwgc3R5bGUgb2YgdGhlIFR5cG9ncmFwaHkuICovXG4gIHZhcmlhbnQ/OiBIdlR5cG9ncmFwaHlWYXJpYW50cyB8IEh2VHlwb2dyYXBoeUxlZ2FjeVZhcmlhbnRzO1xuICAvKiogSWYgYHRydWVgIHRoZSB0eXBvZ3JhcGh5IHdpbGwgZGlzcGxheSB0aGUgbG9vayBvZiBhIGxpbmsuICovXG4gIGxpbms/OiBib29sZWFuO1xuICAvKiogSWYgYHRydWVgIHRoZSB0eXBvZ3JhcGh5IHdpbGwgZGlzcGxheSB0aGUgbG9vayBvZiBhIGRpc2FibGVkIHN0YXRlLiAqL1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIC8qKiBJZiBgdHJ1ZWAsIHRoZSB0ZXh0IHdpbGwgaGF2ZSBhIGJvdHRvbSBtYXJnaW4uICovXG4gIHBhcmFncmFwaD86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJZiBgdHJ1ZWAsIHRoZSB0ZXh0IHdpbGwgbm90IHdyYXAsIGJ1dCBpbnN0ZWFkIHdpbGwgdHJ1bmNhdGUgd2l0aCBhIHRleHQgb3ZlcmZsb3cgZWxsaXBzaXMuXG4gICAqXG4gICAqIE5vdGUgdGhhdCB0ZXh0IG92ZXJmbG93IGNhbiBvbmx5IGhhcHBlbiB3aXRoIGJsb2NrIG9yIGlubGluZS1ibG9jayBsZXZlbCBlbGVtZW50c1xuICAgKiAodGhlIGVsZW1lbnQgbmVlZHMgdG8gaGF2ZSBhIHdpZHRoIGluIG9yZGVyIHRvIG92ZXJmbG93KS5cbiAgICovXG4gIG5vV3JhcD86IGJvb2xlYW47XG4gIC8qKiBBIEpzcyBPYmplY3QgdXNlZCB0byBvdmVycmlkZSBvciBleHRlbmQgdGhlIHN0eWxlcyBhcHBsaWVkIHRvIHRoZSBjb21wb25lbnQuICovXG4gIGNsYXNzZXM/OiBIdlR5cG9ncmFwaHlDbGFzc2VzO1xufVxuXG4vKipcbiAqIFR5cG9ncmFwaHkgY29tcG9uZW50IGlzIHVzZWQgdG8gcmVuZGVyIHRleHQgYW5kIHBhcmFncmFwaHMgd2l0aGluIGFuIGludGVyZmFjZS5cbiAqL1xuZXhwb3J0IGNvbnN0IEh2VHlwb2dyYXBoeSA9IGZvcndhcmRSZWYoXG4gIChwcm9wczogSHZUeXBvZ3JhcGh5UHJvcHMsIHJlZjogUmVmPEhUTUxFbGVtZW50PikgPT4ge1xuICAgIGNvbnN0IHtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgY2xhc3NOYW1lLFxuICAgICAgY29tcG9uZW50LFxuICAgICAgY2xhc3NlcyxcbiAgICAgIHZhcmlhbnQgPSBcImJvZHlcIixcbiAgICAgIGxpbmsgPSBmYWxzZSxcbiAgICAgIGRpc2FibGVkID0gZmFsc2UsXG4gICAgICBub1dyYXAgPSBmYWxzZSxcbiAgICAgIHBhcmFncmFwaCA9IGZhbHNlLFxuICAgICAgLi4ub3RoZXJzXG4gICAgfSA9IHByb3BzO1xuICAgIGNvbnN0IHsgYWN0aXZlVGhlbWUgfSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCBtYXBwZWRWYXJpYW50ID0gbWFwVmFyaWFudCh2YXJpYW50LCBhY3RpdmVUaGVtZT8ubmFtZSk7XG5cbiAgICBjb25zdCBjb21wID1cbiAgICAgIGNvbXBvbmVudCB8fCAocGFyYWdyYXBoID8gXCJwXCIgOiBIdlR5cG9ncmFwaHlNYXBbbWFwcGVkVmFyaWFudF0gfHwgXCJzcGFuXCIpO1xuXG4gICAgY29uc3QgU3R5bGVkQ29tcG9uZW50ID0gdXNlTWVtbyhcbiAgICAgICgpID0+IGdldFN0eWxlZENvbXBvbmVudChjb21wIHx8IFwicFwiKSxcbiAgICAgIFtjb21wXVxuICAgICk7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFN0eWxlZENvbXBvbmVudFxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgY2xhc3NOYW1lPXtjbHN4KFxuICAgICAgICAgIGNsYXNzTmFtZSxcbiAgICAgICAgICBjbGFzc2VzPy5yb290LFxuICAgICAgICAgIHR5cG9ncmFwaHlDbGFzc2VzLnJvb3QsXG4gICAgICAgICAgY2xhc3Nlcz8uW3ZhcmlhbnRdLFxuICAgICAgICAgIHR5cG9ncmFwaHlDbGFzc2VzW3ZhcmlhbnRdLFxuICAgICAgICAgIG5vV3JhcCAmJiBjbHN4KHR5cG9ncmFwaHlDbGFzc2VzLm5vV3JhcCwgY2xhc3Nlcz8ubm9XcmFwKVxuICAgICAgICApfVxuICAgICAgICAkdmFyaWFudD17XG4gICAgICAgICAgbWFwcGVkVmFyaWFudCBhcyBIdlR5cG9ncmFwaHlWYXJpYW50cyB8IEh2VHlwb2dyYXBoeUxlZ2FjeVZhcmlhbnRzXG4gICAgICAgIH1cbiAgICAgICAgJGxpbms9e2xpbmt9XG4gICAgICAgICRkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICRub1dyYXA9e25vV3JhcH1cbiAgICAgICAgey4uLm90aGVyc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9TdHlsZWRDb21wb25lbnQ+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */");
 const HvTypography = React.forwardRef((props, ref) => {
   const {
-    children,
     className,
-    component,
-    classes,
-    variant = "body",
+    component: ComponentProp,
+    classes: classesProp,
+    variant: variantProp = "body",
     link = false,
     disabled = false,
     noWrap = false,
     paragraph = false,
     ...others
   } = props;
+  const {
+    classes,
+    cx
+  } = Typography_styles.useClasses(classesProp);
   const {
     activeTheme
   } = useTheme.useTheme();
-  const mappedVariant = utils.mapVariant(variant, activeTheme == null ? void 0 : activeTheme.name);
-  const comp = component || (paragraph ? "p" : HvTypographyMap[mappedVariant] || "span");
-  const StyledComponent = React.useMemo(() => getStyledComponent(comp || "p"), [comp]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledComponent, {
+  const variant = utils.mapVariant(variantProp, activeTheme == null ? void 0 : activeTheme.name);
+  const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     ref,
-    className: clsx.clsx(className, classes == null ? void 0 : classes.root, typographyClasses.default.root, classes == null ? void 0 : classes[variant], typographyClasses.default[variant], noWrap && clsx.clsx(typographyClasses.default.noWrap, classes == null ? void 0 : classes.noWrap)),
-    $variant: mappedVariant,
-    $link: link,
-    $disabled: disabled,
-    $noWrap: noWrap,
-    ...others,
-    children
+    className: cx(classes.root, classes[variant], className, {
+      [classes.isLink]: link,
+      [classes.noWrap]: noWrap,
+      [classes.disabled]: disabled
+    }),
+    ...others
   });
 });
+exports.typographyClasses = Typography_styles.staticClasses;
 exports.HvTypography = HvTypography;
+exports.typographyVariants = typographyVariants;
 //# sourceMappingURL=Typography.cjs.map