@hitachivantara/uikit-react-core 5.27.5 → 5.27.7

package/dist/cjs/components/TimePicker/TimePicker.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const date = require("@internationalized/date");
@@ -11,7 +12,6 @@ const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const setId = require("../../utils/setId.cjs");
 const Placeholder = require("./Placeholder.cjs");
 const TimePicker_styles = require("./TimePicker.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Unit = require("./Unit/Unit.cjs");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
@@ -120,97 +120,37 @@ const HvTimePicker = (props) => {
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
   const isStateInvalid = validationState === "invalid";
   const errorMessageId = isStateInvalid ? canShowError ? setId.setId(id, "error") : ariaErrorMessage : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
-    name,
-    required,
-    disabled,
-    status: validationState,
-    className: cx(classes.root, className),
-    ...others,
-    children: [(label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.labelContainer,
-      children: [label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-        label,
-        className: classes.label,
-        ...labelProps
-      }), description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
-        className: classes.description,
-        ...descriptionProps,
-        children: description
-      })]
-    }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
-      role: "combobox",
-      variableWidth: true,
-      disabled,
-      readOnly,
-      placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(Placeholder.Placeholder, {
-        ref,
-        name,
-        state,
-        placeholders,
-        className: cx(classes.placeholder, {
-          [classes.placeholderDisabled]: disabled
-        }),
-        ...fieldProps
-      }),
-      classes: {
-        header: cx(classes.dropdownHeader, {
-          [classes.dropdownHeaderInvalid]: isStateInvalid
-        }),
-        panel: classes.dropdownPanel,
-        headerOpen: classes.dropdownHeaderOpen
-      },
-      placement: "right",
-      adornment: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Time, {
-        color: disabled ? "secondary_60" : void 0,
-        className: classes.icon
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, { name, required, disabled, status: validationState, className: cx(classes.root, className), ...others, children: [
+    (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, { label, className: classes.label, ...labelProps }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { className: classes.description, ...descriptionProps, children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, { role: "combobox", variableWidth: true, disabled, readOnly, placeholder: placeholder && !state.value ? placeholder : /* @__PURE__ */ jsxRuntime.jsx(Placeholder.Placeholder, { ref, name, state, placeholders, className: cx(classes.placeholder, {
+      [classes.placeholderDisabled]: disabled
+    }), ...fieldProps }), classes: {
+      header: cx(classes.dropdownHeader, {
+        [classes.dropdownHeaderInvalid]: isStateInvalid
       }),
-      expanded: open,
-      onToggle: (evt, newOpen) => {
-        if (disableExpand)
-          return;
-        setOpen(newOpen);
-        onToggle == null ? void 0 : onToggle(evt, newOpen);
-      },
-      onContainerCreation: (containerRef) => {
-        var _a;
-        (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("input")[0]) == null ? void 0 : _a.focus();
-      },
-      "aria-haspopup": "dialog",
-      "aria-label": ariaLabel,
-      "aria-labelledby": fieldProps["aria-labelledby"],
-      "aria-describedby": fieldProps["aria-describedby"],
-      "aria-invalid": isStateInvalid ? true : void 0,
-      "aria-errormessage": errorMessageId,
-      disablePortal,
-      popperProps: {
-        modifiers: [{
-          name: "preventOverflow",
-          enabled: escapeWithReference
-        }]
-      },
-      ...dropdownProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ref,
-        className: classes.timePopperContainer,
-        children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(Unit.Unit, {
-          state,
-          segment,
-          placeholder: placeholders[segment.type],
-          onAdd: () => state.increment(segment.type),
-          onSub: () => state.decrement(segment.type),
-          onChange: (evt, val) => {
-            state.setSegment(segment.type, Number(val));
-          }
-        }, i))
-      })
-    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
-      id: setId.setId(id, "error"),
-      disableBorder: true,
-      className: classes.error,
-      children: validationMessage
-    })]
-  });
+      panel: classes.dropdownPanel,
+      headerOpen: classes.dropdownHeaderOpen
+    }, placement: "right", adornment: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Time, { color: disabled ? "secondary_60" : void 0, className: classes.icon }), expanded: open, onToggle: (evt, newOpen) => {
+      if (disableExpand)
+        return;
+      setOpen(newOpen);
+      onToggle == null ? void 0 : onToggle(evt, newOpen);
+    }, onContainerCreation: (containerRef) => {
+      var _a;
+      (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("input")[0]) == null ? void 0 : _a.focus();
+    }, "aria-haspopup": "dialog", "aria-label": ariaLabel, "aria-labelledby": fieldProps["aria-labelledby"], "aria-describedby": fieldProps["aria-describedby"], "aria-invalid": isStateInvalid ? true : void 0, "aria-errormessage": errorMessageId, disablePortal, popperProps: {
+      modifiers: [{
+        name: "preventOverflow",
+        enabled: escapeWithReference
+      }]
+    }, ...dropdownProps, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes.timePopperContainer, children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(Unit.Unit, { state, segment, placeholder: placeholders[segment.type], onAdd: () => state.increment(segment.type), onSub: () => state.decrement(segment.type), onChange: (evt, val) => {
+      state.setSegment(segment.type, Number(val));
+    } }, i)) }) }),
+    canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(id, "error"), disableBorder: true, className: classes.error, children: validationMessage })
+  ] });
 };
 exports.timePickerClasses = TimePicker_styles.staticClasses;
 exports.HvTimePicker = HvTimePicker;

package/dist/cjs/components/TimePicker/TimePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = useDefaultProps(\"HvTimePicker\", props);\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps, descriptionProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\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 = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage\n              className={classes.description}\n              {...descriptionProps}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvBaseDropdown\n        role=\"combobox\"\n        variableWidth\n        disabled={disabled}\n        readOnly={readOnly}\n        placeholder={\n          placeholder && !state.value ? (\n            placeholder\n          ) : (\n            <Placeholder\n              ref={ref}\n              name={name}\n              state={state}\n              placeholders={placeholders}\n              className={cx(classes.placeholder, {\n                [classes.placeholderDisabled]: disabled,\n              })}\n              {...fieldProps}\n            />\n          )\n        }\n        classes={{\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          panel: classes.dropdownPanel,\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        placement=\"right\"\n        adornment={\n          <TimeIcon\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.icon}\n          />\n        }\n        expanded={open}\n        onToggle={(evt, newOpen) => {\n          if (disableExpand) return;\n          setOpen(newOpen);\n          onToggle?.(evt, newOpen);\n        }}\n        onContainerCreation={(containerRef) => {\n          containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n        }}\n        aria-haspopup=\"dialog\"\n        aria-label={ariaLabel}\n        aria-labelledby={fieldProps[\"aria-labelledby\"]}\n        aria-describedby={fieldProps[\"aria-describedby\"]}\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        disablePortal={disablePortal}\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        {...dropdownProps}\n      >\n        <div ref={ref} className={classes.timePopperContainer}>\n          {state.segments.map((segment, i) => (\n            <Unit\n              key={i}\n              state={state}\n              segment={segment}\n              placeholder={placeholders[segment.type]}\n              onAdd={() => state.increment(segment.type)}\n              onSub={() => state.decrement(segment.type)}\n              onChange={(evt, val) => {\n                state.setSegment(segment.type, Number(val));\n              }}\n            />\n          ))}\n        </div>\n      </HvBaseDropdown>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useDefaultProps","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","descriptionProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","HvFormElement","root","children","labelContainer","_jsx","HvLabel","HvInfoMessage","HvBaseDropdown","role","variableWidth","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","placement","adornment","TimeIcon","color","icon","expanded","evt","newOpen","onContainerCreation","containerRef","getElementsByTagName","focus","popperProps","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","onAdd","increment","onSub","decrement","val","setSegment","Number","HvWarningText","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"TimePicker.cjs","sources":["../../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useState, useRef, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { Time } from \"@internationalized/date\";\n\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n  TimeFieldStateOptions,\n  useTimeFieldState,\n} from \"@react-stately/datepicker\";\n\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvFormElement,\n  HvLabel,\n  HvWarningText,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"@core/components/Forms\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\n\nimport { Unit } from \"./Unit\";\nimport { Placeholder } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\n\nconst toTime = (value?: HvTimePickerValue) => {\n  if (!value) return undefined;\n  const { hours, minutes, seconds } = value;\n  return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n  if (timeFormat == null) return 24;\n  return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" | \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n  | \"root\"\n  | \"input\"\n  | \"label\"\n  | \"placeholder\"\n  | \"timePopperContainer\"\n  | \"separator\"\n  | \"periodContainer\"\n  | \"formElementRoot\"\n  | \"dropdownPlaceholder\"\n  | \"iconBaseRoot\"\n  | \"error\"\n  | \"labelContainer\"\n  | \"description\"\n  | \"dropdownHeaderInvalid\"\n  | \"dropdownPlaceholderDisabled\"\n  | \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n  hours: number;\n  minutes: number;\n  seconds: number;\n};\n\nexport interface HvTimePickerProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onFocus\" | \"onBlur\"\n  > {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTimePickerClasses;\n  /** Current value of the element when _controlled_. Follows the 24-hour format. */\n  value?: HvTimePickerValue;\n  /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */\n  defaultValue?: HvTimePickerValue;\n  /** The placeholder value when no time is selected. */\n  placeholder?: string;\n  /** The placeholder of the hours input. */\n  hoursPlaceholder?: string;\n  /** The placeholder of the minutes input. */\n  minutesPlaceholder?: string;\n  /** The placeholder of the seconds input. */\n  secondsPlaceholder?: string;\n  /**\n   * Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n   * If undefined, the component will use a format according to the passed locale.\n   */\n  timeFormat?: TimeFormat;\n  /** Whether to show the seconds when using the native time picker */\n  showSeconds?: boolean;\n  /** Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` */\n  locale?: string;\n  /** Whether the dropdown is expandable. */\n  disableExpand?: boolean;\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n   */\n  onChange?: (value: HvTimePickerValue) => void;\n  /** Callback called when dropdown changes the expanded state. */\n  onToggle?: (event: Event, isOpen: boolean) => void;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the calendar container should follow the date picker input out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** Extra properties to be passed to the TimePicker's dropdown. */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\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   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n}\n\n/**\n * A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = (props: HvTimePickerProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id: idProp,\n    name,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    label,\n\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    placeholder,\n    hoursPlaceholder = \"hh\",\n    minutesPlaceholder = \"mm\",\n    secondsPlaceholder = \"ss\",\n\n    value: valueProp,\n    defaultValue: defaultValueProp,\n\n    timeFormat,\n    showSeconds,\n    disableExpand,\n    locale = \"en\",\n\n    onToggle,\n    onChange,\n\n    // misc properties:\n    disablePortal = true,\n    escapeWithReference = true,\n    dropdownProps,\n    ...others\n  } = useDefaultProps(\"HvTimePicker\", props);\n  const id = useUniqueId(idProp, \"hvtimepicker\");\n  const ref = useRef<HTMLDivElement>(null);\n  const { classes, cx } = useClasses(classesProp);\n\n  const stateProps: TimeFieldStateOptions = {\n    value: toTime(valueProp),\n    defaultValue: toTime(defaultValueProp),\n    label,\n    locale,\n    isRequired: required,\n    isReadOnly: readOnly,\n    isDisabled: disabled,\n    granularity: \"second\",\n    hourCycle: getFormat(timeFormat),\n    onChange: (value) => {\n      const { hour: hours, minute: minutes, second: seconds } = value;\n      onChange?.({ hours, minutes, seconds });\n    },\n  };\n  const state = useTimeFieldState(stateProps);\n  const { labelProps, fieldProps, descriptionProps } = useTimeField(\n    {\n      ...stateProps,\n      id,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n    },\n    state,\n    ref\n  );\n\n  const [open, setOpen] = useState(false);\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n  const [validationState] = useControlled(status, \"standBy\");\n\n  const placeholders = useMemo(\n    () => ({\n      hour: hoursPlaceholder,\n      minute: minutesPlaceholder,\n      second: secondsPlaceholder,\n    }),\n    [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder]\n  );\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 = validationState === \"invalid\";\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(id, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      status={validationState}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel label={label} className={classes.label} {...labelProps} />\n          )}\n          {description && (\n            <HvInfoMessage\n              className={classes.description}\n              {...descriptionProps}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvBaseDropdown\n        role=\"combobox\"\n        variableWidth\n        disabled={disabled}\n        readOnly={readOnly}\n        placeholder={\n          placeholder && !state.value ? (\n            placeholder\n          ) : (\n            <Placeholder\n              ref={ref}\n              name={name}\n              state={state}\n              placeholders={placeholders}\n              className={cx(classes.placeholder, {\n                [classes.placeholderDisabled]: disabled,\n              })}\n              {...fieldProps}\n            />\n          )\n        }\n        classes={{\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          panel: classes.dropdownPanel,\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        placement=\"right\"\n        adornment={\n          <TimeIcon\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.icon}\n          />\n        }\n        expanded={open}\n        onToggle={(evt, newOpen) => {\n          if (disableExpand) return;\n          setOpen(newOpen);\n          onToggle?.(evt, newOpen);\n        }}\n        onContainerCreation={(containerRef) => {\n          containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n        }}\n        aria-haspopup=\"dialog\"\n        aria-label={ariaLabel}\n        aria-labelledby={fieldProps[\"aria-labelledby\"]}\n        aria-describedby={fieldProps[\"aria-describedby\"]}\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        disablePortal={disablePortal}\n        popperProps={{\n          modifiers: [\n            { name: \"preventOverflow\", enabled: escapeWithReference },\n          ],\n        }}\n        {...dropdownProps}\n      >\n        <div ref={ref} className={classes.timePopperContainer}>\n          {state.segments.map((segment, i) => (\n            <Unit\n              key={i}\n              state={state}\n              segment={segment}\n              placeholder={placeholders[segment.type]}\n              onAdd={() => state.increment(segment.type)}\n              onSub={() => state.decrement(segment.type)}\n              onChange={(evt, val) => {\n                state.setSegment(segment.type, Number(val));\n              }}\n            />\n          ))}\n        </div>\n      </HvBaseDropdown>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(id, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["toTime","value","undefined","hours","minutes","seconds","Time","getFormat","timeFormat","HvTimePicker","props","classes","classesProp","className","id","idProp","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","status","statusMessage","ariaErrorMessage","placeholder","hoursPlaceholder","minutesPlaceholder","secondsPlaceholder","valueProp","defaultValue","defaultValueProp","showSeconds","disableExpand","locale","onToggle","onChange","disablePortal","escapeWithReference","dropdownProps","others","useDefaultProps","useUniqueId","ref","useRef","cx","useClasses","stateProps","isRequired","isReadOnly","isDisabled","granularity","hourCycle","hour","minute","second","state","useTimeFieldState","labelProps","fieldProps","descriptionProps","useTimeField","open","setOpen","useState","validationMessage","useControlled","validationState","placeholders","useMemo","canShowError","isStateInvalid","errorMessageId","setId","jsxs","HvFormElement","root","labelContainer","HvLabel","HvInfoMessage","jsx","HvBaseDropdown","Placeholder","placeholderDisabled","header","dropdownHeader","dropdownHeaderInvalid","panel","dropdownPanel","headerOpen","dropdownHeaderOpen","TimeIcon","icon","evt","newOpen","containerRef","getElementsByTagName","focus","modifiers","enabled","timePopperContainer","segments","map","segment","i","Unit","type","increment","decrement","val","setSegment","Number","HvWarningText","error"],"mappings":"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"}

package/dist/cjs/components/TimePicker/Unit/Unit.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Unit_styles = require("./Unit.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ToggleButton = require("../../ToggleButton/ToggleButton.cjs");
 const Input = require("../../Input/Input.cjs");
 const Unit = ({
@@ -23,48 +23,28 @@ const Unit = ({
     text
   } = segment;
   const placeholder = placeholderProp ?? segment.placeholder;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: classes.root,
-    children: [type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {
-      onClick: onAdd
-    }), type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: classes.separator,
-      children: text
-    }), type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(ToggleButton.HvToggleButton, {
-      className: classes.periodToggle,
-      onClick: onAdd,
-      children: text
-    }), ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
-      id,
-      disableClear: true,
-      style: {
-        ...uikitStyles.theme.typography.title3
-      },
-      classes: {
-        input: classes.input,
-        root: classes.inputContainer,
-        inputBorderContainer: classes.inputBorderContainer,
-        inputRoot: classes.inputRoot
-      },
-      onKeyDown: (event) => {
-        if (event.key === "Enter") {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-      },
-      required: true,
-      status: state.validationState,
-      value: text.padStart(2, "0"),
-      onChange,
-      placeholder,
-      inputProps: {
-        autoComplete: "off",
-        type: "number"
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
+    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { onClick: onAdd }),
+    type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator, children: text }),
+    type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(ToggleButton.HvToggleButton, { className: classes.periodToggle, onClick: onAdd, children: text }),
+    ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, { id, disableClear: true, style: {
+      ...uikitStyles.theme.typography.title3
+    }, classes: {
+      input: classes.input,
+      root: classes.inputContainer,
+      inputBorderContainer: classes.inputBorderContainer,
+      inputRoot: classes.inputRoot
+    }, onKeyDown: (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
       }
-    }), type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {
-      onClick: onSub
-    })]
-  });
+    }, required: true, status: state.validationState, value: text.padStart(2, "0"), onChange, placeholder, inputProps: {
+      autoComplete: "off",
+      type: "number"
+    } }),
+    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { onClick: onSub })
+  ] });
 };
 exports.Unit = Unit;
 //# sourceMappingURL=Unit.cjs.map

package/dist/cjs/components/TimePicker/Unit/Unit.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Unit.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\n\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\n\nimport {\n  DropDownXS as SubtractTimeIcon,\n  DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvToggleButton } from \"@core/components/ToggleButton\";\n\nimport { useClasses } from \"./Unit.styles\";\n\ninterface UnitProps {\n  id?: string;\n  state: DateFieldState;\n  segment: DateSegment;\n  placeholder?: string;\n  /** Called when the value changes */\n  onChange?: HvInputProps[\"onChange\"];\n  /** Called when the up/add arrow is pressed */\n  onAdd?: () => void;\n  /** Called when the down/subtract arrow is pressed */\n  onSub?: () => void;\n}\n\nexport const Unit = ({\n  id,\n  state,\n  segment,\n  placeholder: placeholderProp,\n  onChange,\n  onAdd,\n  onSub,\n}: UnitProps) => {\n  const { classes } = useClasses();\n  const { type, text } = segment;\n  const placeholder = placeholderProp ?? segment.placeholder;\n\n  return (\n    <div className={classes.root}>\n      {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n      {type === \"literal\" && <div className={classes.separator}>{text}</div>}\n      {type === \"dayPeriod\" && (\n        <HvToggleButton className={classes.periodToggle} onClick={onAdd}>\n          {text}\n        </HvToggleButton>\n      )}\n      {[\"hour\", \"minute\", \"second\"].includes(type) && (\n        <HvInput\n          id={id}\n          disableClear\n          style={{\n            ...theme.typography.title3,\n          }}\n          classes={{\n            input: classes.input,\n            root: classes.inputContainer,\n            inputBorderContainer: classes.inputBorderContainer,\n            inputRoot: classes.inputRoot,\n          }}\n          onKeyDown={(event) => {\n            if ((event as KeyboardEvent).key === \"Enter\") {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }}\n          required\n          status={state.validationState}\n          value={text.padStart(2, \"0\")}\n          onChange={onChange}\n          placeholder={placeholder}\n          inputProps={{ autoComplete: \"off\", type: \"number\" }}\n        />\n      )}\n      {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n    </div>\n  );\n};\n"],"names":["Unit","id","state","segment","placeholder","placeholderProp","onChange","onAdd","onSub","classes","useClasses","type","text","className","root","children","AddTimeIcon","onClick","separator","HvToggleButton","periodToggle","includes","_jsx","HvInput","disableClear","style","theme","typography","title3","input","inputContainer","inputBorderContainer","inputRoot","onKeyDown","event","key","preventDefault","stopPropagation","required","status","validationState","value","padStart","inputProps","autoComplete","SubtractTimeIcon"],"mappings":";;;;;;;;AA4BO,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAaC;AAAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,MAAYC,YAAW,WAAA;AACzB,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,EAAST,IAAAA;AACjBC,QAAAA,cAAcC,mBAAmBF,QAAQC;AAE/C,yCACE,OAAA;AAAA,IAAKS,WAAWJ,QAAQK;AAAAA,IAAKC,WAC1BJ,SAAS,4CAAcK,gBAAAA,UAAW;AAAA,MAACC,SAASV;AAAAA,IAAQ,CAAA,GACpDI,SAAS,4CAAa,OAAA;AAAA,MAAKE,WAAWJ,QAAQS;AAAAA,MAAUH,UAAEH;AAAAA,IAAU,CAAA,GACpED,SAAS,8CACPQ,aAAAA,gBAAc;AAAA,MAACN,WAAWJ,QAAQW;AAAAA,MAAcH,SAASV;AAAAA,MAAMQ,UAC7DH;AAAAA,IAAAA,CACa,GAEjB,CAAC,QAAQ,UAAU,QAAQ,EAAES,SAASV,IAAI,KACzCW,2BAAAA,IAACC,eAAO;AAAA,MACNtB;AAAAA,MACAuB,cAAY;AAAA,MACZC,OAAO;AAAA,QACL,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,MACtB;AAAA,MACAnB,SAAS;AAAA,QACPoB,OAAOpB,QAAQoB;AAAAA,QACff,MAAML,QAAQqB;AAAAA,QACdC,sBAAsBtB,QAAQsB;AAAAA,QAC9BC,WAAWvB,QAAQuB;AAAAA,MACrB;AAAA,MACAC,WAAYC,CAAU,UAAA;AACfA,YAAAA,MAAwBC,QAAQ,SAAS;AAC5CD,gBAAME,eAAe;AACrBF,gBAAMG,gBAAgB;AAAA,QACxB;AAAA,MACF;AAAA,MACAC,UAAQ;AAAA,MACRC,QAAQrC,MAAMsC;AAAAA,MACdC,OAAO7B,KAAK8B,SAAS,GAAG,GAAG;AAAA,MAC3BpC;AAAAA,MACAF;AAAAA,MACAuC,YAAY;AAAA,QAAEC,cAAc;AAAA,QAAOjC,MAAM;AAAA,MAAS;AAAA,IACnD,CAAA,GAEFA,SAAS,4CAAckC,gBAAAA,YAAgB;AAAA,MAAC5B,SAAST;AAAAA,IAAAA,CAAQ,CAAC;AAAA,EAAA,CACxD;AAET;;"}
+{"version":3,"file":"Unit.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.tsx"],"sourcesContent":["import { KeyboardEvent } from \"react\";\n\nimport { DateFieldState, DateSegment } from \"@react-stately/datepicker\";\n\nimport {\n  DropDownXS as SubtractTimeIcon,\n  DropUpXS as AddTimeIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvToggleButton } from \"@core/components/ToggleButton\";\n\nimport { useClasses } from \"./Unit.styles\";\n\ninterface UnitProps {\n  id?: string;\n  state: DateFieldState;\n  segment: DateSegment;\n  placeholder?: string;\n  /** Called when the value changes */\n  onChange?: HvInputProps[\"onChange\"];\n  /** Called when the up/add arrow is pressed */\n  onAdd?: () => void;\n  /** Called when the down/subtract arrow is pressed */\n  onSub?: () => void;\n}\n\nexport const Unit = ({\n  id,\n  state,\n  segment,\n  placeholder: placeholderProp,\n  onChange,\n  onAdd,\n  onSub,\n}: UnitProps) => {\n  const { classes } = useClasses();\n  const { type, text } = segment;\n  const placeholder = placeholderProp ?? segment.placeholder;\n\n  return (\n    <div className={classes.root}>\n      {type !== \"literal\" && <AddTimeIcon onClick={onAdd} />}\n      {type === \"literal\" && <div className={classes.separator}>{text}</div>}\n      {type === \"dayPeriod\" && (\n        <HvToggleButton className={classes.periodToggle} onClick={onAdd}>\n          {text}\n        </HvToggleButton>\n      )}\n      {[\"hour\", \"minute\", \"second\"].includes(type) && (\n        <HvInput\n          id={id}\n          disableClear\n          style={{\n            ...theme.typography.title3,\n          }}\n          classes={{\n            input: classes.input,\n            root: classes.inputContainer,\n            inputBorderContainer: classes.inputBorderContainer,\n            inputRoot: classes.inputRoot,\n          }}\n          onKeyDown={(event) => {\n            if ((event as KeyboardEvent).key === \"Enter\") {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }}\n          required\n          status={state.validationState}\n          value={text.padStart(2, \"0\")}\n          onChange={onChange}\n          placeholder={placeholder}\n          inputProps={{ autoComplete: \"off\", type: \"number\" }}\n        />\n      )}\n      {type !== \"literal\" && <SubtractTimeIcon onClick={onSub} />}\n    </div>\n  );\n};\n"],"names":["Unit","id","state","segment","placeholder","placeholderProp","onChange","onAdd","onSub","classes","useClasses","type","text","jsxs","root","jsx","AddTimeIcon","separator","HvToggleButton","periodToggle","includes","HvInput","theme","typography","title3","input","inputContainer","inputBorderContainer","inputRoot","event","key","preventDefault","stopPropagation","validationState","padStart","autoComplete","SubtractTimeIcon"],"mappings":";;;;;;;;AA4BO,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAaC;AAAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,MAAYC,YAAW,WAAA;AACzB,QAAA;AAAA,IAAEC;AAAAA,IAAMC;AAAAA,EAAST,IAAAA;AACjBC,QAAAA,cAAcC,mBAAmBF,QAAQC;AAE/C,SACGS,2BAAAA,KAAA,OAAA,EAAI,WAAWJ,QAAQK,MACrBH,UAAAA;AAAAA,IAAAA,SAAS,aAAaI,2BAAA,IAACC,gBAAY,UAAA,EAAA,SAAST,OAAS;AAAA,IACrDI,SAAS,aAAaI,2BAAA,IAAC,SAAI,WAAWN,QAAQQ,WAAYL,UAAK,MAAA;AAAA,IAC/DD,SAAS,eACPI,+BAAAG,aAAAA,gBAAA,EAAe,WAAWT,QAAQU,cAAc,SAASZ,OACvDK,UACH,KAAA,CAAA;AAAA,IAED,CAAC,QAAQ,UAAU,QAAQ,EAAEQ,SAAST,IAAI,KACxCI,2BAAA,IAAAM,MAAA,SAAA,EACC,IACA,cAAY,MACZ,OAAO;AAAA,MACL,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,OAEtB,SAAS;AAAA,MACPC,OAAOhB,QAAQgB;AAAAA,MACfX,MAAML,QAAQiB;AAAAA,MACdC,sBAAsBlB,QAAQkB;AAAAA,MAC9BC,WAAWnB,QAAQmB;AAAAA,IAAAA,GAErB,WAAYC,CAAU,UAAA;AACfA,UAAAA,MAAwBC,QAAQ,SAAS;AAC5CD,cAAME,eAAe;AACrBF,cAAMG,gBAAgB;AAAA,MACxB;AAAA,IAEF,GAAA,UAAQ,MACR,QAAQ9B,MAAM+B,iBACd,OAAOrB,KAAKsB,SAAS,GAAG,GAAG,GAC3B,UACA,aACA,YAAY;AAAA,MAAEC,cAAc;AAAA,MAAOxB,MAAM;AAAA,IAAA,GAE5C;AAAA,IACAA,SAAS,aAAcI,2BAAA,IAAAqB,gBAAA,YAAA,EAAiB,SAAS5B,OAAS;AAAA,EAC7D,EAAA,CAAA;AAEJ;;"}

package/dist/cjs/components/TimePicker/Unit/Unit.styles.cjs

@@ -12,7 +12,7 @@ const {
     justifyContent: "center",
     alignItems: "center",
     textAlign: "center",
-    ...uikitStyles.theme.typography.sTitle
+    ...uikitStyles.theme.typography.title3
   },
   separator: {
     width: 8
@@ -29,7 +29,7 @@ const {
     width: 40
   },
   input: {
-    ...uikitStyles.theme.typography.sTitle,
+    ...uikitStyles.theme.typography.title3,
     fontWeight: 600,
     textAlign: "center",
     height: 40,

package/dist/cjs/components/TimePicker/Unit/Unit.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Unit.styles.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTimePickerUnit\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    textAlign: \"center\",\n    ...theme.typography.sTitle,\n  },\n\n  separator: {\n    width: 8,\n  },\n\n  periodToggle: {\n    height: 40,\n    width: 40,\n  },\n\n  element: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 40,\n    width: 40,\n  },\n\n  input: {\n    ...theme.typography.sTitle,\n    fontWeight: 600,\n    textAlign: \"center\",\n    height: 40,\n    width: 40,\n    padding: 0,\n    margin: 0,\n    \"&::placeholder\": {\n      fontSize: 16,\n      fontWeight: 600,\n    },\n  },\n  inputRoot: {\n    width: 40,\n    height: 40,\n  },\n\n  subtractIcon: {\n    marginTop: theme.space.xs,\n  },\n  inputContainer: {\n    minWidth: 40,\n    maxWidth: 40,\n  },\n  inputBorderContainer: {\n    top: 40,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","justifyContent","alignItems","textAlign","theme","typography","sTitle","separator","width","periodToggle","height","element","input","fontWeight","padding","margin","fontSize","inputRoot","subtractIcon","marginTop","space","xs","inputContainer","minWidth","maxWidth","inputBorderContainer","top"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,WAAW;AAAA,IACX,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,EACtB;AAAA,EAEAC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EAEAC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAG,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZQ,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAI,OAAO;AAAA,IACL,GAAGR,YAAAA,MAAMC,WAAWC;AAAAA,IACpBO,YAAY;AAAA,IACZV,WAAW;AAAA,IACXO,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPM,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChBC,UAAU;AAAA,MACVH,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAI,WAAW;AAAA,IACTT,OAAO;AAAA,IACPE,QAAQ;AAAA,EACV;AAAA,EAEAQ,cAAc;AAAA,IACZC,WAAWf,YAAAA,MAAMgB,MAAMC;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,EACP;AACF,CAAC;;;"}
+{"version":3,"file":"Unit.styles.cjs","sources":["../../../../../src/components/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTimePickerUnit\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    textAlign: \"center\",\n    ...theme.typography.title3,\n  },\n\n  separator: {\n    width: 8,\n  },\n\n  periodToggle: {\n    height: 40,\n    width: 40,\n  },\n\n  element: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 40,\n    width: 40,\n  },\n\n  input: {\n    ...theme.typography.title3,\n    fontWeight: 600,\n    textAlign: \"center\",\n    height: 40,\n    width: 40,\n    padding: 0,\n    margin: 0,\n    \"&::placeholder\": {\n      fontSize: 16,\n      fontWeight: 600,\n    },\n  },\n  inputRoot: {\n    width: 40,\n    height: 40,\n  },\n\n  subtractIcon: {\n    marginTop: theme.space.xs,\n  },\n  inputContainer: {\n    minWidth: 40,\n    maxWidth: 40,\n  },\n  inputBorderContainer: {\n    top: 40,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","justifyContent","alignItems","textAlign","theme","typography","title3","separator","width","periodToggle","height","element","input","fontWeight","padding","margin","fontSize","inputRoot","subtractIcon","marginTop","space","xs","inputContainer","minWidth","maxWidth","inputBorderContainer","top"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,WAAW;AAAA,IACX,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,EACtB;AAAA,EAEAC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EAEAC,cAAc;AAAA,IACZC,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAG,SAAS;AAAA,IACPZ,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZQ,QAAQ;AAAA,IACRF,OAAO;AAAA,EACT;AAAA,EAEAI,OAAO;AAAA,IACL,GAAGR,YAAAA,MAAMC,WAAWC;AAAAA,IACpBO,YAAY;AAAA,IACZV,WAAW;AAAA,IACXO,QAAQ;AAAA,IACRF,OAAO;AAAA,IACPM,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChBC,UAAU;AAAA,MACVH,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAI,WAAW;AAAA,IACTT,OAAO;AAAA,IACPE,QAAQ;AAAA,EACV;AAAA,EAEAQ,cAAc;AAAA,IACZC,WAAWf,YAAAA,MAAMgB,MAAMC;AAAAA,EACzB;AAAA,EACAC,gBAAgB;AAAA,IACdC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,EACP;AACF,CAAC;;;"}

package/dist/cjs/components/ToggleButton/ToggleButton.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useControlled = require("../../hooks/useControlled.cjs");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Button = require("../Button/Button.cjs");
 const HvToggleButton = React.forwardRef((props, ref) => {
   const {
@@ -20,14 +20,7 @@ const HvToggleButton = React.forwardRef((props, ref) => {
     setIsSelected(!isSelected);
     onClick == null ? void 0 : onClick(event, !isSelected);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-    ref,
-    icon: true,
-    "aria-pressed": isSelected,
-    onClick: onClickHandler,
-    ...others,
-    children: children || (!isSelected ? notSelectedIcon : selectedIcon)
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { ref, icon: true, "aria-pressed": isSelected, onClick: onClickHandler, ...others, children: children || (!isSelected ? notSelectedIcon : selectedIcon) });
 });
 exports.HvToggleButton = HvToggleButton;
 //# sourceMappingURL=ToggleButton.cjs.map

package/dist/cjs/components/ToggleButton/ToggleButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.cjs","sources":["../../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\n\nexport interface HvToggleButtonProps\n  extends HvBaseProps<HTMLButtonElement, \"onClick\"> {\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n  /** Defines if the button is selected. When defined the button state becomes controlled. */\n  selected?: boolean;\n  /** Defines if the button is disabled. */\n  disabled?: boolean;\n  /** Icon for when not selected. Ignored if the component has children. */\n  notSelectedIcon?: React.ReactNode;\n  /** Icon for when selected. Ignored if the component has children. */\n  selectedIcon?: React.ReactNode;\n  /** Function called when icon is clicked. */\n  onClick?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    selected: boolean\n  ) => void;\n}\n\nexport const HvToggleButton = forwardRef<\n  HTMLButtonElement,\n  HvToggleButtonProps\n>((props, ref) => {\n  const {\n    defaultSelected,\n    selected,\n    notSelectedIcon,\n    selectedIcon = null,\n    onClick,\n    children,\n    ...others\n  } = useDefaultProps(\"HvToggleButton\", props);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setIsSelected(!isSelected);\n    onClick?.(event, !isSelected);\n  };\n\n  return (\n    <HvButton\n      ref={ref}\n      icon\n      aria-pressed={isSelected}\n      onClick={onClickHandler}\n      {...others}\n    >\n      {children || (!isSelected ? notSelectedIcon : selectedIcon)}\n    </HvButton>\n  );\n});\n"],"names":["HvToggleButton","forwardRef","props","ref","defaultSelected","selected","notSelectedIcon","selectedIcon","onClick","children","others","useDefaultProps","isSelected","setIsSelected","useControlled","Boolean","onClickHandler","event","HvButton","icon"],"mappings":";;;;;;;AA0BO,MAAMA,iBAAiBC,MAAAA,WAG5B,CAACC,OAAOC,QAAQ;AACV,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,eAAe;AAAA,IACfC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBT,KAAK;AAErC,QAAA,CAACU,YAAYC,aAAa,IAAIC,cAAAA,cAClCT,UACAU,QAAQX,eAAe,CACzB;AAEMY,QAAAA,iBAAiBA,CAACC,UAA+C;AACrEJ,kBAAc,CAACD,UAAU;AACfK,uCAAAA,OAAO,CAACL;AAAAA,EAAU;AAG9B,wCACGM,OAAAA,UAAQ;AAAA,IACPf;AAAAA,IACAgB,MAAI;AAAA,IACJ,gBAAcP;AAAAA,IACdJ,SAASQ;AAAAA,IAAe,GACpBN;AAAAA,IAAMD,UAETA,aAAa,CAACG,aAAaN,kBAAkBC;AAAAA,EAAAA,CACtC;AAEd,CAAC;;"}
+{"version":3,"file":"ToggleButton.cjs","sources":["../../../../src/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\n\nexport interface HvToggleButtonProps\n  extends HvBaseProps<HTMLButtonElement, \"onClick\"> {\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n  /** Defines if the button is selected. When defined the button state becomes controlled. */\n  selected?: boolean;\n  /** Defines if the button is disabled. */\n  disabled?: boolean;\n  /** Icon for when not selected. Ignored if the component has children. */\n  notSelectedIcon?: React.ReactNode;\n  /** Icon for when selected. Ignored if the component has children. */\n  selectedIcon?: React.ReactNode;\n  /** Function called when icon is clicked. */\n  onClick?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    selected: boolean\n  ) => void;\n}\n\nexport const HvToggleButton = forwardRef<\n  HTMLButtonElement,\n  HvToggleButtonProps\n>((props, ref) => {\n  const {\n    defaultSelected,\n    selected,\n    notSelectedIcon,\n    selectedIcon = null,\n    onClick,\n    children,\n    ...others\n  } = useDefaultProps(\"HvToggleButton\", props);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setIsSelected(!isSelected);\n    onClick?.(event, !isSelected);\n  };\n\n  return (\n    <HvButton\n      ref={ref}\n      icon\n      aria-pressed={isSelected}\n      onClick={onClickHandler}\n      {...others}\n    >\n      {children || (!isSelected ? notSelectedIcon : selectedIcon)}\n    </HvButton>\n  );\n});\n"],"names":["HvToggleButton","forwardRef","props","ref","defaultSelected","selected","notSelectedIcon","selectedIcon","onClick","children","others","useDefaultProps","isSelected","setIsSelected","useControlled","Boolean","onClickHandler","event","jsx","HvButton"],"mappings":";;;;;;;AA0BO,MAAMA,iBAAiBC,MAAAA,WAG5B,CAACC,OAAOC,QAAQ;AACV,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,eAAe;AAAA,IACfC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBT,KAAK;AAErC,QAAA,CAACU,YAAYC,aAAa,IAAIC,cAAAA,cAClCT,UACAU,QAAQX,eAAe,CACzB;AAEMY,QAAAA,iBAAiBA,CAACC,UAA+C;AACrEJ,kBAAc,CAACD,UAAU;AACfK,uCAAAA,OAAO,CAACL;AAAAA,EAAU;AAG9B,SACGM,2BAAA,IAAAC,OAAA,UAAA,EACC,KACA,MAAI,MACJ,gBAAcP,YACd,SAASI,gBACLN,GAAAA,QAEHD,UAAAA,aAAa,CAACG,aAAaN,kBAAkBC,cAChD,CAAA;AAEJ,CAAC;;"}

package/dist/cjs/components/Tooltip/Tooltip.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const material = require("@mui/material");
 const React = require("react");
 const useTheme = require("../../hooks/useTheme.cjs");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const Tooltip_styles = require("./Tooltip.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvTooltip = React.forwardRef((props, ref) => {
   const {
     className,
@@ -30,26 +30,13 @@ const HvTooltip = React.forwardRef((props, ref) => {
   const {
     classes
   } = Tooltip_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, {
-    ref,
-    open: open ?? void 0,
-    enterDelay,
-    placement,
-    TransitionComponent,
-    TransitionProps,
-    className,
-    classes: {
-      tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
-      popper: classes.popper
-    },
-    title,
-    PopperProps: {
-      sx: Tooltip_styles.popperSx(useSingle),
-      container: typeof window !== "undefined" ? document.getElementById(containerId || rootId || "") || document.body : void 0
-    },
-    ...others,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { ref, open: open ?? void 0, enterDelay, placement, TransitionComponent, TransitionProps, className, classes: {
+    tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
+    popper: classes.popper
+  }, title, PopperProps: {
+    sx: Tooltip_styles.popperSx(useSingle),
+    container: typeof window !== "undefined" ? document.getElementById(containerId || rootId || "") || document.body : void 0
+  }, ...others, children });
 });
 exports.tooltipClasses = Tooltip_styles.staticClasses;
 exports.HvTooltip = HvTooltip;

package/dist/cjs/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { Fade, Tooltip, TooltipProps as MuiTooltipProps } from \"@mui/material\";\nimport { forwardRef, ReactElement } from \"react\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { popperSx, staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        sx: popperSx(useSingle),\n        container:\n          typeof window !== \"undefined\"\n            ? document.getElementById(containerId || rootId || \"\") ||\n              document.body\n            : undefined,\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["HvTooltip","forwardRef","props","ref","className","classes","classesProp","open","enterDelay","placement","useSingle","children","title","TransitionComponent","Fade","TransitionProps","timeout","containerId","others","useDefaultProps","rootId","useTheme","useClasses","Tooltip","undefined","tooltip","tooltipMulti","popper","PopperProps","sx","popperSx","container","window","document","getElementById","body"],"mappings":";;;;;;;;AA0DO,MAAMA,YAAYC,MAAAA,WAAW,CAACC,OAAuBC,QAAQ;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC;AAAAA,IACAC;AAAAA,IACAC,sBAAsBC,SAAAA;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP;AAAAA,IAAU;AAAA,IAC5CQ;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,aAAajB,KAAK;AAEhC,QAAA;AAAA,IAAEkB;AAAAA,MAAWC,SAAS,SAAA;AACtB,QAAA;AAAA,IAAEhB;AAAAA,EAAAA,IAAYiB,eAAAA,WAAWhB,WAAW;AAE1C,wCACGiB,SAAAA,SAAO;AAAA,IACNpB;AAAAA,IACAI,MAAMA,QAAQiB;AAAAA,IACdhB;AAAAA,IACAC;AAAAA,IACAI;AAAAA,IACAE;AAAAA,IACAX;AAAAA,IACAC,SAAS;AAAA,MACPoB,SAASf,YAAYL,QAAQoB,UAAUpB,QAAQqB;AAAAA,MAC/CC,QAAQtB,QAAQsB;AAAAA,IAClB;AAAA,IACAf;AAAAA,IACAgB,aAAa;AAAA,MACXC,IAAIC,wBAASpB,SAAS;AAAA,MACtBqB,WACE,OAAOC,WAAW,cACdC,SAASC,eAAejB,eAAeG,UAAU,EAAE,KACnDa,SAASE,OACTX;AAAAA,IACR;AAAA,IAAE,GACEN;AAAAA,IAAMP;AAAAA,EAAAA,CAGH;AAEb,CAAC;;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { Fade, Tooltip, TooltipProps as MuiTooltipProps } from \"@mui/material\";\nimport { forwardRef, ReactElement } from \"react\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { popperSx, staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        sx: popperSx(useSingle),\n        container:\n          typeof window !== \"undefined\"\n            ? document.getElementById(containerId || rootId || \"\") ||\n              document.body\n            : undefined,\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":["HvTooltip","forwardRef","props","ref","className","classes","classesProp","open","enterDelay","placement","useSingle","children","title","TransitionComponent","Fade","TransitionProps","timeout","containerId","others","useDefaultProps","rootId","useTheme","useClasses","jsx","Tooltip","undefined","tooltip","tooltipMulti","popper","sx","popperSx","container","window","document","getElementById","body"],"mappings":";;;;;;;;AA0DO,MAAMA,YAAYC,MAAAA,WAAW,CAACC,OAAuBC,QAAQ;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC;AAAAA,IACAC;AAAAA,IACAC,sBAAsBC,SAAAA;AAAAA,IACtBC,kBAAkB;AAAA,MAAEC,SAAS;AAAA,MAAKP;AAAAA,IAAU;AAAA,IAC5CQ;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,aAAajB,KAAK;AAEhC,QAAA;AAAA,IAAEkB;AAAAA,MAAWC,SAAS,SAAA;AACtB,QAAA;AAAA,IAAEhB;AAAAA,EAAAA,IAAYiB,eAAAA,WAAWhB,WAAW;AAGxC,SAAAiB,2BAAA,IAACC,SACC,SAAA,EAAA,KACA,MAAMjB,QAAQkB,QACd,YACA,WACA,qBACA,iBACA,WACA,SAAS;AAAA,IACPC,SAAShB,YAAYL,QAAQqB,UAAUrB,QAAQsB;AAAAA,IAC/CC,QAAQvB,QAAQuB;AAAAA,EAAAA,GAElB,OACA,aAAa;AAAA,IACXC,IAAIC,wBAASpB,SAAS;AAAA,IACtBqB,WACE,OAAOC,WAAW,cACdC,SAASC,eAAejB,eAAeG,UAAU,EAAE,KACnDa,SAASE,OACTV;AAAAA,EAAAA,GAEJP,GAAAA,QAEHP,SACH,CAAA;AAEJ,CAAC;;;"}

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const useTheme = require("../../hooks/useTheme.cjs");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const utils = require("./utils.cjs");
 const Typography_styles = require("./Typography.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvTypographyMap = {
   display: "h1",
   title1: "h1",
@@ -52,15 +52,11 @@ const HvTypography = React.forwardRef((props, ref) => {
   } = useTheme.useTheme();
   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: cx(classes.root, classes[variant], {
-      [classes.isLink]: link,
-      [classes.noWrap]: noWrap,
-      [classes.disabled]: disabled
-    }, className),
-    ...others
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cx(classes.root, classes[variant], {
+    [classes.isLink]: link,
+    [classes.noWrap]: noWrap,
+    [classes.disabled]: disabled
+  }, className), ...others });
 });
 exports.typographyClasses = Typography_styles.staticClasses;
 exports.HvTypography = HvTypography;

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.cjs","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /** If `true`, the text will have a bottom margin. */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n  props: HvTypographyProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTypographyProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          {\n            [classes.isLink]: link,\n            [classes.noWrap]: noWrap,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;;;AAkBA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AA6BO,MAAMC,eAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,QAAMV,UAAUW,MAAAA,WAAWV,aAAaQ,2CAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,wCACGa,WAAS;AAAA,IACRnB;AAAAA,IACAC,WAAWY,GACTT,QAAQgB,MACRhB,QAAQE,OAAO,GACf;AAAA,MACE,CAACF,QAAQiB,MAAM,GAAG7B;AAAAA,MAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,MAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,OAEtBP,SACF;AAAA,IAAE,GACEU;AAAAA,EAAAA,CACL;AAEL,CACF;;;"}
+{"version":3,"file":"Typography.cjs","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /** If `true`, the text will have a bottom margin. */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n  props: HvTypographyProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTypographyProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          {\n            [classes.isLink]: link,\n            [classes.noWrap]: noWrap,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","jsx","root","isLink"],"mappings":";;;;;;;;AAkBA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AA6BO,MAAMC,eAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,QAAMV,UAAUW,MAAAA,WAAWV,aAAaQ,2CAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAGnE,SAAAc,+BAAC,aACC,KACA,WAAWP,GACTT,QAAQiB,MACRjB,QAAQE,OAAO,GACf;AAAA,IACE,CAACF,QAAQkB,MAAM,GAAG9B;AAAAA,IAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,IAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,EAEtBP,GAAAA,SACF,GACIU,GAAAA,OACJ,CAAA;AAEN,CACF;;;"}

package/dist/cjs/components/VerticalNavigation/Actions/Action.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const keyboardUtils = require("../../../utils/keyboardUtils.cjs");
 const setId = require("../../../utils/setId.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Action_styles = require("./Action.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../../Typography/Typography.cjs");
 const HvVerticalNavigationAction = ({
   className,
@@ -29,23 +29,15 @@ const HvVerticalNavigationAction = ({
     }
     onClick(event);
   }, [onClick]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, {
-    id: setId.setId(id, "button"),
-    component: "div",
-    role: "button",
-    className: cx(classes.action, {
-      [classes.noIcon]: !icon,
-      [classes.minimized]: !isOpen
-    }, className),
-    tabIndex: 0,
-    ...!isOpen && {
-      "aria-label": label
-    },
-    onKeyDown: handleKeyDown,
-    onClick,
-    ...others,
-    children: [icon, isOpen && label]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Typography.HvTypography, { id: setId.setId(id, "button"), component: "div", role: "button", className: cx(classes.action, {
+    [classes.noIcon]: !icon,
+    [classes.minimized]: !isOpen
+  }, className), tabIndex: 0, ...!isOpen && {
+    "aria-label": label
+  }, onKeyDown: handleKeyDown, onClick, ...others, children: [
+    icon,
+    isOpen && label
+  ] });
 };
 exports.actionClasses = Action_styles.staticClasses;
 exports.HvVerticalNavigationAction = HvVerticalNavigationAction;