@hitachivantara/uikit-react-core 5.39.2 → 5.39.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport {\n  isInvalid,\n  HvLabel,\n  HvFormStatus,\n  HvWarningText,\n  HvFormElement,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { isDate } from \"../Calendar/utils\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvTypography } from \"../Typography\";\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvButton } from \"../Button\";\n\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 Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"disablePortal\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n      | \"onToggle\"\n      | \"placeholder\"\n    > {\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\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   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   */\n  // TODO: remove this in favour of discriminated union\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n  (props, ref) => {\n    const {\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      expanded,\n      defaultExpanded,\n      onToggle,\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    } = useDefaultProps(\"HvDatePicker\", props);\n\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] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n      rangeMode ? startValue : value\n    );\n    const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n    const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n    const focusTarget = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    useEffect(() => {\n      setStartDate(rangeMode ? startValue : value, true);\n      setEndDate(endValue, true);\n    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n    const endDateIsSet = useRef(false);\n    endDateIsSet.current = endDate != null;\n\n    useEffect(() => {\n      if (startDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: endDateIsSet.current ? \"left\" : \"best\",\n          year: startDate.getFullYear(),\n          month: startDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, startDate]);\n\n    useEffect(() => {\n      if (endDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: \"right\",\n          year: endDate.getFullYear(),\n          month: endDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, endDate]);\n\n    /**\n     * Handles the `Apply` action. Both single and ranged modes are handled here.\n     */\n    const handleApply = () => {\n      setStartDate(startDate, true);\n      setEndDate(endDate ?? startDate, true);\n\n      onChange?.(startDate, endDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (\n          required &&\n          (!isDate(startDate) || (rangeMode && !isDate(endDate)))\n        ) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel = () => {\n      rollbackStartDate();\n      rollbackEndDate();\n\n      onCancel?.();\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleClear = () => {\n      setStartDate(undefined, false);\n      setEndDate(undefined, false);\n      onClear?.();\n    };\n\n    const handleCalendarClose = () => {\n      const shouldSave = !(rangeMode || showActions);\n      if (shouldSave) {\n        handleApply();\n      } else {\n        handleCancel();\n      }\n    };\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n      /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n      if (evt === null) return;\n      onToggle?.(evt, open);\n      setCalendarOpen(open);\n      if (!open) handleCalendarClose();\n    };\n\n    const focusOnContainer = () => {\n      focusTarget.current?.focus();\n    };\n\n    const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n      if (!isDate(newDate)) return;\n\n      const autoSave = !showActions && !rangeMode;\n\n      if (rangeMode) {\n        if (!startDate || (startDate && endDate) || newDate < startDate) {\n          setStartDate(newDate);\n          setEndDate(undefined);\n        } else {\n          setEndDate(newDate);\n        }\n      } else {\n        setStartDate(newDate, autoSave);\n      }\n\n      if (autoSave) {\n        onChange?.(newDate);\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && !isDate(newDate)) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n\n        setCalendarOpen(false);\n      }\n    };\n\n    const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n      event,\n      newDate,\n      position\n    ) => {\n      if (!isDate(newDate)) return;\n\n      if (!rangeMode) {\n        handleDateChange(event as any, newDate);\n        return;\n      }\n\n      if (position === \"left\") {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n      } else if (position === \"right\") {\n        if (!startDate) {\n          if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n          return;\n        }\n        setEndDate(newDate < startDate ? startDate : newDate);\n      }\n    };\n\n    /**\n     * Renders the container for the action elements.\n     */\n    const renderActions = () => (\n      <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n        {showClear && (\n          <div className={classes.leftContainer}>\n            <HvButton\n              id={setId(id, \"action\", \"clear\")}\n              className={classes.action}\n              variant=\"primaryGhost\"\n              onClick={handleClear}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n          </div>\n        )}\n        <div className={classes.rightContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"apply\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleApply}\n          >\n            {labels?.applyLabel}\n          </HvButton>\n          <HvButton\n            id={setId(id, \"action\", \"cancel\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleCancel}\n          >\n            {labels?.cancelLabel}\n          </HvButton>\n        </div>\n      </HvActionBar>\n    );\n\n    const renderInput = (dateString: string) => {\n      return (\n        <HvTypography\n          className={cx(classes.inputText, { [classes.dateText]: dateString })}\n          variant=\"label\"\n        >\n          {dateString || placeholder || \"\"}\n        </HvTypography>\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(classes.root, className)}\n        readOnly={readOnly}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          role=\"combobox\"\n          classes={{\n            root: classes.dropdown,\n            panel: classes.panel,\n            header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\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          {...otherDropdownProps}\n        >\n          <div ref={focusTarget} tabIndex={-1} />\n          <HvCalendar\n            id={setId(id, \"calendar\")}\n            startAdornment={startAdornment}\n            onChange={handleDateChange}\n            onInputChange={handleInputDateChange}\n            onVisibleDateChange={(_event, type, month, target) => {\n              dispatchAction({ type, target, month });\n            }}\n            locale={locale}\n            {...visibleDate}\n            {...calendarProps}\n            invalidDateLabel={labels?.invalidDateLabel}\n          />\n          {(rangeMode || showActions) && renderActions()}\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={cx(classes.error)}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,50 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvDatePicker", {
+  root: {
+    position: "relative"
+  },
+  actionContainer: {
+    justifyContent: "space-between"
+  },
+  leftContainer: {},
+  rightContainer: {},
+  labelContainer: {
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  label: {
+    paddingBottom: "6px",
+    display: "block"
+  },
+  description: {},
+  error: {},
+  dropdown: {
+    display: "block"
+  },
+  panel: {},
+  dropdownHeaderInvalid: {
+    border: `1px solid ${theme.colors.negative}`,
+    "&:hover": {
+      border: `1px solid ${theme.colors.negative}`
+    }
+  },
+  dropdownHeaderOpen: {},
+  icon: {},
+  action: {
+    "&:first-of-type": {
+      marginRight: theme.space.xs
+    }
+  },
+  inputText: {
+    color: theme.colors.secondary_80
+  },
+  dateText: {
+    color: theme.colors.secondary
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=DatePicker.styles.js.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVisibleDate.js","sources":["../../../src/DatePicker/useVisibleDate.tsx"],"sourcesContent":["import { Reducer, useReducer } from \"react\";\n\nimport { VisibilitySelectorActions } from \"../Calendar\";\n\nimport { validateDate } from \"./utils\";\n\nfunction stateToLeftRight({\n  visibleYear,\n  visibleMonth,\n  rightVisibleYear,\n  rightVisibleMonth,\n}) {\n  return {\n    left: { year: visibleYear, month: visibleMonth },\n    right: { year: rightVisibleYear, month: rightVisibleMonth },\n  };\n}\n\nfunction leftRightToState(left, right) {\n  return {\n    visibleYear: left.year,\n    visibleMonth: left.month,\n    rightVisibleYear: right.year,\n    rightVisibleMonth: right.month,\n  };\n}\n\nfunction subtractYear({ year, month }) {\n  return { year: year - 1, month };\n}\n\nfunction addYear({ year, month }) {\n  return { year: year + 1, month };\n}\n\nfunction subtractMonth({ year, month }) {\n  let y = year;\n  let m = month;\n\n  m -= 1;\n  if (m === 0) {\n    y -= 1;\n    m = 12;\n  }\n\n  return { year: y, month: m };\n}\n\nfunction addMonth({ year, month }) {\n  let y = year;\n  let m = month;\n\n  m += 1;\n  if (m === 13) {\n    y += 1;\n    m = 1;\n  }\n\n  return { year: y, month: m };\n}\n\nfunction ensureNoOverlap(left, right, keepRight = false) {\n  let l = left;\n  let r = right;\n  if (\n    left.year > right.year ||\n    (left.year === right.year && left.month >= right.month)\n  ) {\n    if (keepRight) {\n      l = subtractMonth(right);\n    } else {\n      r = addMonth(left);\n    }\n  }\n\n  return leftRightToState(l, r);\n}\n\nexport function isSameYearMonth(d1, d2) {\n  return d1.year === d2.year && d1.month === d2.month;\n}\n\ntype State = {\n  visibleYear: any;\n  visibleMonth: any;\n  rightVisibleYear: any;\n  rightVisibleMonth: any;\n};\ntype Action = { type: VisibilitySelectorActions } & Record<string, any>;\n\nconst visibleDateReducer: Reducer<State, Action> = (state, action) => {\n  let { left, right } = stateToLeftRight(state);\n\n  switch (action.type) {\n    case \"previous_year\":\n      if (action.target === \"right\") {\n        right = subtractYear(right);\n        return ensureNoOverlap(left, right, true);\n      }\n\n      left = subtractYear(left);\n      return ensureNoOverlap(left, right, false);\n\n    case \"next_year\":\n      if (action.target === \"right\") {\n        right = addYear(right);\n        return ensureNoOverlap(left, right, true);\n      }\n\n      left = addYear(left);\n      return ensureNoOverlap(left, right, false);\n\n    case \"previous_month\":\n      if (action.target === \"right\") {\n        right = subtractMonth(right);\n        return ensureNoOverlap(left, right, true);\n      }\n\n      left = subtractMonth(left);\n      return ensureNoOverlap(left, right, false);\n\n    case \"next_month\":\n      if (action.target === \"right\") {\n        right = addMonth(right);\n        return ensureNoOverlap(left, right, true);\n      }\n\n      left = addMonth(left);\n      return ensureNoOverlap(left, right, false);\n\n    case \"month\":\n      if (action.month != null) {\n        if (action.target === \"right\") {\n          if (right.month !== action.month) {\n            right = { year: right.year, month: action.month };\n            return ensureNoOverlap(left, right, true);\n          }\n        } else if (left.month !== action.month) {\n          left = { year: left.year, month: action.month };\n          return ensureNoOverlap(left, right, false);\n        }\n      }\n      break;\n\n    case \"month_year\":\n      if (action.month != null && action.year != null) {\n        if (action.target === \"right\") {\n          if (\n            !isSameYearMonth(left, action) &&\n            !isSameYearMonth(right, action)\n          ) {\n            right = { year: action.year, month: action.month };\n            return ensureNoOverlap(left, right, true);\n          }\n        } else if (\n          !isSameYearMonth(left, action) &&\n          (action.target === \"left\" || !isSameYearMonth(right, action))\n        ) {\n          left = { year: action.year, month: action.month };\n          return ensureNoOverlap(left, right, false);\n        }\n      }\n\n      break;\n\n    default:\n  }\n\n  return state;\n};\n\nfunction stateFromRange(startDate, endDate) {\n  const initialStartDate = validateDate(startDate);\n  const initialEndDate =\n    endDate != null ? validateDate(endDate) : initialStartDate;\n\n  return ensureNoOverlap(\n    {\n      year: initialStartDate.getFullYear(),\n      month: initialStartDate.getMonth() + 1,\n    },\n    { year: initialEndDate.getFullYear(), month: initialEndDate.getMonth() + 1 }\n  );\n}\n\nexport default function useVisibleDate(startDate?: Date, endDate?: Date) {\n  return useReducer(visibleDateReducer, { startDate, endDate }, (initData) =>\n    stateFromRange(initData.startDate, initData.endDate)\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/DatePicker/utils.tsx"],"sourcesContent":["import { DateRangeProp } from \"../Calendar\";\nimport {\n  getFormattedDate,\n  getMonthName,\n  isDate,\n  isSameMonth,\n} from \"../Calendar/utils\";\n\nexport const validateDate = (date: any) => (isDate(date) && date) || new Date();\n\nexport const getFormattedDateRange = (\n  date: DateRangeProp,\n  locale: string,\n  rep: Intl.DateTimeFormatOptions[\"month\"] = \"short\"\n) => {\n  const { startDate, endDate } = date;\n  const monthYear = `${getMonthName(\n    startDate,\n    locale,\n    rep\n  )} ${startDate.getFullYear()}`;\n  return `${startDate.getDate()} - ${endDate?.getDate()} ${monthYear}`;\n};\n\nexport const getSingleDateLabel = (date: any, locale?: string) =>\n  isDate(date) ? getFormattedDate(date, locale) : \"\";\n\nexport const getRangeDateLabel = (\n  { startDate, endDate }: any,\n  locale: string\n) => {\n  if (!(isDate(startDate) && isDate(endDate)))\n    return getSingleDateLabel(startDate);\n\n  return isSameMonth(startDate, endDate)\n    ? getFormattedDateRange({ startDate, endDate }, locale)\n    : `${getFormattedDate(startDate, locale)} - ${getFormattedDate(\n        endDate,\n        locale\n      )}`;\n};\n\nexport const getDateLabel = (\n  date: Date | Partial<DateRangeProp> | undefined,\n  rangeMode: boolean,\n  locale: string\n) =>\n  rangeMode\n    ? getRangeDateLabel(date as Required<DateRangeProp>, locale)\n    : getSingleDateLabel(date, locale);\n"],"names":[],"mappings":";AAQa,MAAA,eAAe,CAAC,SAAe,OAAO,IAAI,KAAK,4BAAa,KAAK;AAEvE,MAAM,wBAAwB,CACnC,MACA,QACA,MAA2C,YACxC;AACG,QAAA,EAAE,WAAW,QAAY,IAAA;AAC/B,QAAM,YAAY,GAAG;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAA,IAAI,UAAU,YAAA,CAAa;AACrB,SAAA,GAAG,UAAU,QAAQ,CAAC,MAAM,SAAS,SAAS,IAAI,SAAS;AACpE;AAEa,MAAA,qBAAqB,CAAC,MAAW,WAC5C,OAAO,IAAI,IAAI,iBAAiB,MAAM,MAAM,IAAI;AAE3C,MAAM,oBAAoB,CAC/B,EAAE,WAAW,QAAA,GACb,WACG;AACH,MAAI,EAAE,OAAO,SAAS,KAAK,OAAO,OAAO;AACvC,WAAO,mBAAmB,SAAS;AAErC,SAAO,YAAY,WAAW,OAAO,IACjC,sBAAsB,EAAE,WAAW,QAAA,GAAW,MAAM,IACpD,GAAG,iBAAiB,WAAW,MAAM,CAAC,MAAM;AAAA,IAC1C;AAAA,IACA;AAAA,EACD,CAAA;AACP;AAEO,MAAM,eAAe,CAC1B,MACA,WACA,WAEA,YACI,kBAAkB,MAAiC,MAAM,IACzD,mBAAmB,MAAM,MAAM;"}

package/dist/esm/Dialog/Actions/Actions.js

@@ -0,0 +1,35 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import MuiDialogActions from "@mui/material/DialogActions";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./Actions.styles.js";
+import { staticClasses } from "./Actions.styles.js";
+import { useDialogContext } from "../context.js";
+const HvDialogActions = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    fullscreen: fullScreenProp,
+    ...others
+  } = useDefaultProps("HvDialogActions", props);
+  const context = useDialogContext();
+  const fullscreen = fullScreenProp ?? context.fullscreen;
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    MuiDialogActions,
+    {
+      className,
+      classes: {
+        root: cx(classes.root, { [classes.fullscreen]: fullscreen }),
+        spacing: classes.spacing
+      },
+      ...others,
+      children
+    }
+  );
+};
+export {
+  HvDialogActions,
+  staticClasses as dialogActionClasses
+};
+//# sourceMappingURL=Actions.js.map

package/dist/esm/Dialog/Actions/Actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.js","sources":["../../../../src/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n  DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n  extends Omit<MuiDialogActionsProps, \"classes\"> {\n  /** Set the dialog to fullscreen mode. @deprecated set `fullscreen` in `HvDialog` */\n  fullscreen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = (props: HvDialogActionsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    fullscreen: fullScreenProp,\n    ...others\n  } = useDefaultProps(\"HvDialogActions\", props);\n  const context = useDialogContext();\n  const fullscreen = fullScreenProp ?? context.fullscreen;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MuiDialogActions\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.fullscreen]: fullscreen }),\n        spacing: classes.spacing,\n      }}\n      {...others}\n    >\n      {children}\n    </MuiDialogActions>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,UAAU;AACV,QAAA,aAAa,kBAAkB,QAAQ;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,YAAY;AAAA,QAC3D,SAAS,QAAQ;AAAA,MACnB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Dialog/Actions/Actions.styles.js

@@ -0,0 +1,23 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvDialog-Action", {
+  root: {
+    margin: "0",
+    padding: theme.space.sm,
+    borderTop: `3px solid ${theme.colors.atmo2}`,
+    height: 65,
+    maxHeight: 65,
+    flex: 1
+  },
+  fullscreen: { position: "fixed", width: "100%", bottom: 0, left: 0 },
+  spacing: {
+    "& > :not(:first-of-type)": {
+      marginLeft: theme.space.xs
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Actions.styles.js.map

package/dist/esm/Dialog/Actions/Actions.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Actions.styles.js","sources":["../../../../src/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Action\", {\n  root: {\n    margin: \"0\",\n    padding: theme.space.sm,\n    borderTop: `3px solid ${theme.colors.atmo2}`,\n    height: 65,\n    maxHeight: 65,\n    flex: 1,\n  },\n  fullscreen: { position: \"fixed\", width: \"100%\", bottom: 0, left: 0 },\n  spacing: {\n    \"& > :not(:first-of-type)\": {\n      marginLeft: theme.space.xs,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA,YAAY,EAAE,UAAU,SAAS,OAAO,QAAQ,QAAQ,GAAG,MAAM,EAAE;AAAA,EACnE,SAAS;AAAA,IACP,4BAA4B;AAAA,MAC1B,YAAY,MAAM,MAAM;AAAA,IAC1B;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Dialog/Content/Content.js

@@ -0,0 +1,32 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import MuiDialogContent from "@mui/material/DialogContent";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./Content.styles.js";
+import { staticClasses } from "./Content.styles.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const HvDialogContent = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    indentContent = false
+  } = useDefaultProps("HvDialogContent", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    HvTypography,
+    {
+      component: MuiDialogContent,
+      className: cx(
+        classes.root,
+        { [classes.textContent]: !!indentContent },
+        className
+      ),
+      children
+    }
+  );
+};
+export {
+  HvDialogContent,
+  staticClasses as dialogContentClasses
+};
+//# sourceMappingURL=Content.js.map

package/dist/esm/Dialog/Content/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../../../../src/Dialog/Content/Content.tsx"],"sourcesContent":["import MuiDialogContent, {\n  DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvTypography } from \"../../Typography\";\n\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as dialogContentClasses };\n\nexport type HvDialogContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogContentProps\n  extends Omit<MuiDialogContentProps, \"classes\"> {\n  /** Content should be indented in relationship to the Dialog title. */\n  indentContent?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogContentClasses;\n}\n\nexport const HvDialogContent = (props: HvDialogContentProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    indentContent = false,\n  } = useDefaultProps(\"HvDialogContent\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvTypography\n      component={MuiDialogContent}\n      className={cx(\n        classes.root,\n        { [classes.textContent]: !!indentContent },\n        className\n      )}\n    >\n      {children}\n    </HvTypography>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAAA,IACd,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,WAAW,GAAG,CAAC,CAAC,cAAc;AAAA,QACzC;AAAA,MACF;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Dialog/Content/Content.styles.js

@@ -0,0 +1,19 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvDialog-Content", {
+  root: {
+    padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,
+    flex: "none"
+  },
+  textContent: {
+    marginLeft: "42px",
+    paddingRight: "62px",
+    flex: 1,
+    overflowY: "auto"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Content.styles.js.map

package/dist/esm/Dialog/Content/Content.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.styles.js","sources":["../../../../src/Dialog/Content/Content.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Content\", {\n  root: {\n    padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,\n    flex: \"none\",\n  },\n  textContent: {\n    marginLeft: \"42px\",\n    paddingRight: \"62px\",\n    flex: 1,\n    overflowY: \"auto\",\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS,KAAK,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,IAChE,MAAM;AAAA,EACR;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AACF,CAAC;"}

package/dist/esm/Dialog/Dialog.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import MuiDialog from "@mui/material/Dialog";
+import { Close } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { getElementById } from "../utils/document.js";
+import { setId } from "../utils/setId.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { useClasses } from "./Dialog.styles.js";
+import { staticClasses } from "./Dialog.styles.js";
+import { DialogContext } from "./context.js";
+import { HvButton } from "../Button/Button.js";
+import { HvTooltip } from "../Tooltip/Tooltip.js";
+const HvDialog = (props) => {
+  const {
+    variant,
+    classes: classesProp,
+    className,
+    id,
+    children,
+    open = false,
+    onClose,
+    firstFocusable,
+    buttonTitle = "Close",
+    fullscreen = false,
+    disableBackdropClick = false,
+    ...others
+  } = useDefaultProps("HvDialog", props);
+  const { classes, css, cx } = useClasses(classesProp);
+  const { rootId } = useTheme();
+  const measuredRef = useCallback(() => {
+    if (!firstFocusable)
+      return;
+    const element = document.getElementById(firstFocusable);
+    element?.focus();
+  }, [firstFocusable]);
+  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);
+  return /* @__PURE__ */ jsxs(
+    MuiDialog,
+    {
+      container: getElementById(rootId),
+      className: cx(classes.root, className),
+      classes: { container: css({ position: "relative" }) },
+      id,
+      ref: measuredRef,
+      open,
+      fullScreen: fullscreen,
+      onClose: (event, reason) => {
+        if (disableBackdropClick)
+          return;
+        onClose?.(event, reason);
+      },
+      slotProps: {
+        backdrop: {
+          classes: {
+            root: classes.background
+          }
+        }
+      },
+      PaperProps: {
+        classes: {
+          root: cx(
+            css({ position: "absolute" }),
+            classes.paper,
+            variant && cx(classes.statusBar, classes[variant]),
+            {
+              [classes.fullscreen]: fullscreen
+            }
+          )
+        }
+      },
+      "aria-modal": true,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx(HvTooltip, { placement: "top", title: buttonTitle, children: /* @__PURE__ */ jsx(
+          HvButton,
+          {
+            id: setId(id, "close"),
+            className: classes.closeButton,
+            variant: "secondaryGhost",
+            onClick: (event) => onClose?.(event, void 0),
+            children: /* @__PURE__ */ jsx(Close, { role: "none" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children })
+      ]
+    }
+  );
+};
+export {
+  HvDialog,
+  staticClasses as dialogClasses
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/esm/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButton } from \"../Button\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { getElementById } from \"../utils/document\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useTheme } from \"../hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvTooltip placement=\"top\" title={buttonTitle}>\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={(event) => onClose?.(event, undefined)}\n        >\n          <Close role=\"none\" />\n        </HvButton>\n      </HvTooltip>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAmDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC;AAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAGtB,YAAA;AAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,cAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,WAAU,EAAA,WAAU,OAAM,OAAO,aAChC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAO,CAAA;AAAA,UAAA;AAAA,QAAA,GAEvB;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Dialog/Dialog.styles.js

@@ -0,0 +1,42 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvDialog", {
+  root: {},
+  background: { background: theme.alpha("atmo4", 0.8) },
+  paper: {
+    color: theme.colors.secondary,
+    backgroundColor: theme.colors.atmo1,
+    boxShadow: ["none", theme.colors.shadow],
+    borderRadius: theme.radii.round
+  },
+  fullscreen: {},
+  closeButton: {
+    padding: 0,
+    minWidth: "auto",
+    position: "absolute",
+    top: theme.space.sm,
+    right: theme.space.sm,
+    width: 32,
+    height: 32
+  },
+  statusBar: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderTopWidth: 4,
+    borderTopStyle: "solid"
+  },
+  success: {
+    borderTopColor: theme.colors.positive
+  },
+  error: {
+    borderTopColor: theme.colors.negative
+  },
+  warning: {
+    borderTopColor: theme.colors.warning
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Dialog.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.styles.js","sources":["../../../src/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog\", {\n  root: {},\n  background: { background: theme.alpha(\"atmo4\", 0.8) },\n  paper: {\n    color: theme.colors.secondary,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: [\"none\", theme.colors.shadow],\n    borderRadius: theme.radii.round,\n  },\n  fullscreen: {},\n  closeButton: {\n    padding: 0,\n    minWidth: \"auto\",\n    position: \"absolute\",\n    top: theme.space.sm,\n    right: theme.space.sm,\n    width: 32,\n    height: 32,\n  },\n  statusBar: {\n    borderTopLeftRadius: 0,\n    borderTopRightRadius: 0,\n    borderTopWidth: 4,\n    borderTopStyle: \"solid\",\n  },\n  success: {\n    borderTopColor: theme.colors.positive,\n  },\n  error: {\n    borderTopColor: theme.colors.negative,\n  },\n  warning: {\n    borderTopColor: theme.colors.warning,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,YAAY,EAAE,YAAY,MAAM,MAAM,SAAS,GAAG,EAAE;AAAA,EACpD,OAAO;AAAA,IACL,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,CAAC,QAAQ,MAAM,OAAO,MAAM;AAAA,IACvC,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,YAAY,CAAC;AAAA,EACb,aAAa;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,IACP,gBAAgB,MAAM,OAAO;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,IACL,gBAAgB,MAAM,OAAO;AAAA,EAC/B;AAAA,EACA,SAAS;AAAA,IACP,gBAAgB,MAAM,OAAO;AAAA,EAC/B;AACF,CAAC;"}

package/dist/esm/Dialog/Title/Title.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import MuiDialogTitle from "@mui/material/DialogTitle";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { iconVariant } from "../../utils/iconVariant.js";
+import { useClasses } from "./Title.styles.js";
+import { staticClasses } from "./Title.styles.js";
+import { useDialogContext } from "../context.js";
+import { HvTypography } from "../../Typography/Typography.js";
+const HvDialogTitle = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    variant = "default",
+    showIcon = true,
+    customIcon = null,
+    ...others
+  } = useDefaultProps("HvDialogTitle", props);
+  const { classes, css, cx } = useClasses(classesProp);
+  const { fullscreen } = useDialogContext();
+  const isString = typeof children === "string";
+  const icon = customIcon || showIcon && iconVariant(variant);
+  return /* @__PURE__ */ jsx(
+    MuiDialogTitle,
+    {
+      className: cx(
+        !fullscreen && css({ flex: 1 }),
+        classes.root,
+        {
+          [classes.fullscreen]: fullscreen
+        },
+        className
+      ),
+      ...others,
+      children: /* @__PURE__ */ jsxs("div", { className: classes.messageContainer, children: [
+        icon,
+        /* @__PURE__ */ jsx("div", { className: cx({ [classes.textWithIcon]: !!icon }), children: !isString ? children : /* @__PURE__ */ jsx(HvTypography, { variant: "title4", className: classes.titleText, children }) })
+      ] })
+    }
+  );
+};
+export {
+  HvDialogTitle,
+  staticClasses as dialogTitleClasses
+};
+//# sourceMappingURL=Title.js.map

package/dist/esm/Dialog/Title/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sources":["../../../../src/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n  DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { iconVariant } from \"../../utils/iconVariant\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport interface HvDialogTitleProps\n  extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> {\n  /** Variant of the dialog title. */\n  variant?: HvDialogTitleVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    variant = \"default\",\n    showIcon = true,\n    customIcon = null,\n    ...others\n  } = useDefaultProps(\"HvDialogTitle\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { fullscreen } = useDialogContext();\n\n  const isString = typeof children === \"string\";\n\n  const icon = customIcon || (showIcon && iconVariant(variant));\n\n  return (\n    <MuiDialogTitle\n      className={cx(\n        !fullscreen && css({ flex: 1 }),\n        classes.root,\n        {\n          [classes.fullscreen]: fullscreen,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.messageContainer}>\n        {icon}\n        <div className={cx({ [classes.textWithIcon]: !!icon })}>\n          {!isString ? (\n            children\n          ) : (\n            <HvTypography variant=\"title4\" className={classes.titleText}>\n              {children}\n            </HvTypography>\n          )}\n        </div>\n      </div>\n    </MuiDialogTitle>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAoCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,eAAe;AAEjB,QAAA,WAAW,OAAO,aAAa;AAErC,QAAM,OAAO,cAAe,YAAY,YAAY,OAAO;AAGzD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,CAAC,cAAc,IAAI,EAAE,MAAM,GAAG;AAAA,QAC9B,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,kBACrB,UAAA;AAAA,QAAA;AAAA,QACD,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,YAAY,GAAG,CAAC,CAAC,KAAA,CAAM,GAClD,UAAA,CAAC,WACA,WAEC,oBAAA,cAAA,EAAa,SAAQ,UAAS,WAAW,QAAQ,WAC/C,SAAA,CACH,EAEJ,CAAA;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Dialog/Title/Title.styles.js

@@ -0,0 +1,18 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvDialog-Title", {
+  root: { padding: theme.space.sm, margin: 0 },
+  fullscreen: {},
+  messageContainer: { display: "flex", alignItems: "center" },
+  textWithIcon: {
+    marginLeft: theme.space.xs,
+    // 32px is the icon width
+    marginRight: `calc(32px + ${theme.space.xs})`
+  },
+  titleText: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Title.styles.js.map

package/dist/esm/Dialog/Title/Title.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.styles.js","sources":["../../../../src/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n  root: { padding: theme.space.sm, margin: 0 },\n  fullscreen: {},\n  messageContainer: { display: \"flex\", alignItems: \"center\" },\n  textWithIcon: {\n    marginLeft: theme.space.xs,\n    // 32px is the icon width\n    marginRight: `calc(32px + ${theme.space.xs})`,\n  },\n  titleText: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAAS,MAAM,MAAM,IAAI,QAAQ,EAAE;AAAA,EAC3C,YAAY,CAAC;AAAA,EACb,kBAAkB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC1D,cAAc;AAAA,IACZ,YAAY,MAAM,MAAM;AAAA;AAAA,IAExB,aAAa,eAAe,MAAM,MAAM,EAAE;AAAA,EAC5C;AAAA,EACA,WAAW,CAAC;AACd,CAAC;"}

package/dist/esm/Dialog/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/Dialog/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const DialogContext = createContext({ fullscreen: false });\n\nexport const useDialogContext = () => useContext(DialogContext);\n"],"names":[],"mappings":";AAEO,MAAM,gBAAgB,cAAc,EAAE,YAAY,OAAO;AAEnD,MAAA,mBAAmB,MAAM,WAAW,aAAa;"}

package/dist/esm/DotPagination/DotPagination.js

@@ -0,0 +1,69 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { cloneElement } from "react";
+import { OtherStep, CurrentStep } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./DotPagination.styles.js";
+import { staticClasses } from "./DotPagination.styles.js";
+import { HvRadioGroup } from "../RadioGroup/RadioGroup.js";
+import { HvRadio } from "../Radio/Radio.js";
+const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
+  return {
+    radio: cloneElement(radioIcon || /* @__PURE__ */ jsx(OtherStep, { width: 8, height: 8 }), {
+      className: classes?.icon
+    }),
+    radioChecked: cloneElement(
+      radioCheckedIcon || /* @__PURE__ */ jsx(CurrentStep, { width: 8, height: 8 }),
+      {
+        className: classes?.icon
+      }
+    )
+  };
+};
+const range = (n) => Array.from(Array(n), (_, i) => i);
+const HvDotPagination = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    unselectedIcon,
+    selectedIcon,
+    pages = 1,
+    page = 0,
+    onPageChange,
+    getItemAriaLabel,
+    ...others
+  } = useDefaultProps("HvDotPagination", props);
+  const { classes, cx } = useClasses(classesProp);
+  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);
+  return /* @__PURE__ */ jsx(
+    HvRadioGroup,
+    {
+      className: cx(classes.root, className),
+      classes: {
+        horizontal: classes.horizontal
+      },
+      orientation: "horizontal",
+      ...others,
+      children: range(pages).map((i) => /* @__PURE__ */ jsx(
+        HvRadio,
+        {
+          classes: {
+            radio: classes.radio,
+            root: classes.radioRoot
+          },
+          value: i,
+          checked: page === i,
+          onChange: (event) => onPageChange?.(event, i),
+          icon: icons.radio,
+          checkedIcon: icons.radioChecked,
+          "aria-label": getItemAriaLabel?.(i)
+        },
+        i
+      ))
+    }
+  );
+};
+export {
+  HvDotPagination,
+  staticClasses as dotPaginationClasses
+};
+//# sourceMappingURL=DotPagination.js.map

package/dist/esm/DotPagination/DotPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotPagination.js","sources":["../../../src/DotPagination/DotPagination.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\nimport { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvRadio } from \"../Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"../RadioGroup\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\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\nconst range = (n: number) => Array.from(Array(n), (_, i) => i);\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 = (props: HvDotPaginationProps) => {\n  const {\n    className,\n    classes: classesProp,\n    unselectedIcon,\n    selectedIcon,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = useDefaultProps(\"HvDotPagination\", props);\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":[],"mappings":";;;;;;;;AAsDA,MAAM,mBAAmB,CACvB,WACA,kBACA,YACG;AACI,SAAA;AAAA,IACL,OAAO,aAAa,aAAa,oBAAC,aAAU,OAAO,GAAG,QAAQ,EAAA,CAAG,GAAI;AAAA,MACnE,WAAW,SAAS;AAAA,IAAA,CACrB;AAAA,IACD,cAAc;AAAA,MACZ,oBAAqB,oBAAA,aAAA,EAAY,OAAO,GAAG,QAAQ,GAAG;AAAA,MACtD;AAAA,QACE,WAAW,SAAS;AAAA,MACtB;AAAA,IACF;AAAA,EAAA;AAEJ;AAEA,MAAM,QAAQ,CAAC,MAAc,MAAM,KAAK,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAMhD,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,QAAQ,iBAAiB,gBAAgB,cAAc,OAAO;AAGlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS;AAAA,QACP,YAAY,QAAQ;AAAA,MACtB;AAAA,MACA,aAAY;AAAA,MACX,GAAG;AAAA,MAEH,UAAM,MAAA,KAAK,EAAE,IAAI,CAAC,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,YACP,OAAO,QAAQ;AAAA,YACf,MAAM,QAAQ;AAAA,UAChB;AAAA,UAEA,OAAO;AAAA,UACP,SAAS,SAAS;AAAA,UAClB,UAAU,CAAC,UAAU,eAAe,OAAO,CAAC;AAAA,UAC5C,MAAM,MAAM;AAAA,UACZ,aAAa,MAAM;AAAA,UACnB,cAAY,mBAAmB,CAAC;AAAA,QAAA;AAAA,QAN3B;AAAA,MAAA,CAQR;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/DotPagination/DotPagination.styles.js

@@ -0,0 +1,31 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { useClasses, staticClasses } = createClasses("HvDotPagination", {
+  root: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  horizontal: {
+    marginLeft: 0,
+    width: "auto"
+  },
+  radioRoot: {
+    marginLeft: theme.space.xs
+  },
+  radio: {
+    height: "16px",
+    "&:hover": {
+      backgroundColor: theme.colors.neutral_20,
+      borderRadius: "100%"
+    }
+  },
+  icon: {
+    width: "16px",
+    height: "16px"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=DotPagination.styles.js.map