@hitachivantara/uikit-react-core 5.90.0 → 5.91.0

package/dist/esm/Table/TableHeader/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n  extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** The scope of cells that the header element relates to. */\n  scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant;\n  /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is sorted */\n  sorted?: boolean;\n  /** Whether or not the cell is sortable */\n  sortable?: boolean;\n  /** Set sort direction icon and aria-sort. */\n  sortDirection?: \"ascending\" | \"descending\" | false;\n  /** Extra props to be passed onto the text in the header. */\n  headerTextProps?: HvTypographyProps;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** The resize props injected in the resize handler */\n  resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeaderClasses;\n  /** Extra props to be passed onto the sort button in the header. */\n  sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n  function HvTableHeader(props, ref) {\n    const {\n      children,\n      component,\n      className,\n      style: styleProp,\n      classes: classesProp,\n      scope: scopeProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sortDirection = \"none\",\n      sorted,\n      sortable,\n      headerTextProps,\n      resizerProps = {},\n      resizable = false,\n      resizing = false,\n      sortButtonProps,\n      ...others\n    } = useDefaultProps(\"HvTableHeader\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n    const isHeadCell = type === \"head\";\n\n    const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n    const Sort = useMemo(\n      () => getSortIcon(sorted && sortDirection),\n      [sorted, sortDirection],\n    );\n\n    const Component =\n      component || tableContext?.components?.Th || defaultComponent;\n\n    const role =\n      Component === defaultComponent\n        ? null\n        : isHeadCell\n          ? \"columnheader\"\n          : \"rowheader\";\n    const paragraph = isParagraph(children);\n\n    // Keep the header sticky\n    const style = stickyColumn\n      ? { ...styleProp, position: \"sticky\" }\n      : styleProp;\n\n    return (\n      <Component\n        ref={ref}\n        role={role}\n        scope={scope}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          align !== \"inherit\" && classes[`align${capitalize(align)}`],\n          variant !== \"default\" && classes[`variant${capitalize(variant)}`],\n          {\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.sortable]: sortable,\n            [classes.sorted]: sorted,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.variantList]: tableContext.variant === \"listrow\",\n          },\n          className,\n        )}\n        aria-sort={sortable ? sortDirection : undefined}\n        {...others}\n      >\n        <div\n          className={cx(\n            classes.headerContent,\n            align !== \"inherit\" && classes[`alignFlex${capitalize(align)}`],\n          )}\n        >\n          {isHeadCell && sortable && (\n            <HvButton\n              className={classes.sortButton}\n              icon\n              overrideIconColors={false}\n              aria-label=\"Sort\"\n              {...sortButtonProps}\n            >\n              <Sort className={classes.sortIcon} />\n            </HvButton>\n          )}\n          <HvTypography\n            component=\"div\"\n            className={cx({\n              [classes.headerText]: !paragraph,\n              [classes.headerParagraph]: paragraph,\n              [classes.sortableHeaderText]: sortable,\n            })}\n            variant=\"label\"\n            {...headerTextProps}\n          >\n            {children}\n          </HvTypography>\n        </div>\n        {resizable && <div {...resizerProps} className={classes.resizer} />}\n      </Component>\n    );\n  },\n);\n"],"names":["HvTableHeader"],"mappings":"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"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport { TableSectionContext } from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n  extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** The scope of cells that the header element relates to. */\n  scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant;\n  /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is sorted */\n  sorted?: boolean;\n  /** Whether or not the cell is sortable */\n  sortable?: boolean;\n  /** Set sort direction icon and aria-sort. */\n  sortDirection?: \"ascending\" | \"descending\" | false;\n  /** Extra props to be passed onto the text in the header. */\n  headerTextProps?: HvTypographyProps;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** The resize props injected in the resize handler */\n  resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeaderClasses;\n  /** Extra props to be passed onto the sort button in the header. */\n  sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n  function HvTableHeader(props, ref) {\n    const {\n      children,\n      component,\n      className,\n      style: styleProp,\n      classes: classesProp,\n      scope: scopeProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sortDirection = \"none\",\n      sorted,\n      sortable,\n      headerTextProps,\n      resizerProps = {},\n      resizable = false,\n      resizing = false,\n      sortButtonProps,\n      ...others\n    } = useDefaultProps(\"HvTableHeader\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n    const isHeadCell = type === \"head\";\n\n    const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n    const Sort = useMemo(\n      () => getSortIcon(sorted && sortDirection),\n      [sorted, sortDirection],\n    );\n\n    const Component =\n      component || tableContext?.components?.Th || defaultComponent;\n\n    const role =\n      Component === defaultComponent\n        ? null\n        : isHeadCell\n          ? \"columnheader\"\n          : \"rowheader\";\n    const paragraph = isParagraph(children);\n\n    // Keep the header sticky\n    const style = stickyColumn\n      ? { ...styleProp, position: \"sticky\" }\n      : styleProp;\n\n    return (\n      <Component\n        ref={ref}\n        role={role}\n        scope={scope}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type],\n          align !== \"inherit\" && classes[`align${capitalize(align)}`],\n          variant !== \"default\" && classes[`variant${capitalize(variant)}`],\n          {\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.sortable]: sortable,\n            [classes.sorted]: sorted,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.variantList]: tableContext.variant === \"listrow\",\n          },\n          className,\n        )}\n        aria-sort={sortable ? sortDirection : undefined}\n        {...others}\n      >\n        <div\n          className={cx(\n            classes.headerContent,\n            align !== \"inherit\" && classes[`alignFlex${capitalize(align)}`],\n          )}\n        >\n          {isHeadCell && sortable && (\n            <HvButton\n              className={classes.sortButton}\n              icon\n              aria-label=\"Sort\"\n              {...sortButtonProps}\n            >\n              <Sort className={classes.sortIcon} />\n            </HvButton>\n          )}\n          <HvTypography\n            component=\"div\"\n            className={cx({\n              [classes.headerText]: !paragraph,\n              [classes.headerParagraph]: paragraph,\n              [classes.sortableHeaderText]: sortable,\n            })}\n            variant=\"label\"\n            {...headerTextProps}\n          >\n            {children}\n          </HvTypography>\n        </div>\n        {resizable && <div {...resizerProps} className={classes.resizer} />}\n      </Component>\n    );\n  },\n);\n"],"names":["HvTableHeader"],"mappings":"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"}

package/dist/esm/Tag/Tag.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, isValidElement, cloneElement } from "react";
 import { CloseXS, CheckboxCheck, Checkbox } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
-import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { theme, getColor } from "@hitachivantara/uikit-styles";
 import { useControlled } from "../hooks/useControlled.js";
 import { isDeleteKey } from "../utils/keyboardUtils.js";
 import { useClasses } from "./Tag.styles.js";
@@ -17,20 +17,22 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
     style,
     label,
     disabled,
+    size = "xs",
+    variant,
     type = "semantic",
     selectable,
     selected,
     defaultSelected = false,
+    showSelectIcon = selectable,
     color,
+    icon: iconProp,
     deleteIcon: deleteIconProp,
     onDelete,
     onClick,
     onKeyDown,
     onKeyUp,
-    // TODO: remove from API
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    deleteButtonArialLabel = "Delete tag",
-    deleteButtonProps = {},
+    deleteButtonArialLabel,
+    deleteButtonProps,
     ...others
   } = useDefaultProps("HvTag", props);
   const { classes, cx } = useClasses(classesProp);
@@ -42,7 +44,11 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
     event.stopPropagation();
     onDelete?.(event);
   };
-  const backgroundColor = type === "semantic" && getColor(color, "neutral_20") || type === "categorical" && theme.alpha(getColor(color, "cat1"), 0.2) || void 0;
+  const tagColor = (
+    // backwards-compatibility for `type` prop
+    type === "categorical" && theme.alpha(color || "cat1", 0.2) || // use the palette color if it matches
+    theme.palette[color]?.[600] || getColor(color)
+  );
   const isClickable = !!(onClick || onDelete || selectable);
   const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;
   const deleteIcon = deleteIconProp && isValidElement(deleteIconProp) ? cloneElement(deleteIconProp, {
@@ -67,12 +73,14 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
       disabled,
       "data-color": color,
       style: mergeStyles(style, {
-        "--bgColor": backgroundColor
+        "--tagColor": tagColor
       }),
-      className: cx(classes.root, classes.chipRoot, className, {
-        [classes.disabled]: disabled,
-        [classes.selected]: isSelected,
+      className: cx(classes.root, classes.chipRoot, classes[size], className, {
+        [classes.hasIcon]: iconProp || selectable && showSelectIcon,
         [classes.clickable]: isClickable && !disabled,
+        [classes.selected]: isSelected,
+        [classes.disabled]: disabled,
+        [classes.outlined]: variant === "outlined",
         [classes.categorical]: type === "categorical",
         [classes.categoricalFocus]: type === "categorical" && !disabled,
         [classes.categoricalDisabled]: type === "categorical" && disabled
@@ -91,7 +99,8 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
       selected: isClickable && isSelected,
       ...others,
       children: [
-        selectable && type === "semantic" && /* @__PURE__ */ jsx(
+        iconProp,
+        selectable && showSelectIcon && /* @__PURE__ */ jsx(
           CheckboxIcon,
           {
             className: classes.icon,

package/dist/esm/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<\n    HvButtonBaseProps,\n    \"type\" | \"color\" | \"classes\" | \"onClick\" | \"onToggle\"\n  > {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** The color variant of the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: React.EventHandler<any>;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products.\n */\nexport const HvTag = forwardRef<\n  // no-indent\n  HTMLElement,\n  HvTagProps\n>(function HvTag(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    component,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon: deleteIconProp,\n    onDelete,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const handleDeleteClick = (event: React.MouseEvent) => {\n    // Stop the event from bubbling up to the tag\n    event.stopPropagation();\n    onDelete?.(event);\n  };\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && theme.alpha(getColor(color, \"cat1\")!, 0.2)) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete || selectable);\n\n  const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;\n\n  const deleteIcon =\n    deleteIconProp && isValidElement(deleteIconProp) ? (\n      cloneElement<any>(deleteIconProp, {\n        className: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n        onClick: handleDeleteClick,\n      })\n    ) : (\n      <CloseXS\n        size=\"XS\"\n        onClick={handleDeleteClick}\n        className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n        {...deleteButtonProps}\n      />\n    );\n\n  return (\n    <HvButtonBase\n      ref={ref as any}\n      component={isClickable ? HvButtonBase : \"div\"}\n      disabled={disabled}\n      data-color={color}\n      style={mergeStyles(style, {\n        \"--bgColor\": backgroundColor,\n      })}\n      className={cx(classes.root, classes.chipRoot, className, {\n        [classes.disabled]: disabled,\n        [classes.selected]: isSelected,\n        [classes.clickable]: isClickable && !disabled,\n        [classes.categorical]: type === \"categorical\",\n        [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n        [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n      })}\n      onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n        // Ignore events from children.\n        if (event.currentTarget === event.target && isDeleteKey(event)) {\n          onDelete?.(event);\n        }\n\n        onKeyUp?.(event);\n      }}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      selected={isClickable && isSelected}\n      {...others}\n    >\n      {selectable && type === \"semantic\" && (\n        <CheckboxIcon\n          className={classes.icon}\n          color={(disabled && [\"bgPageSecondary\", \"textDisabled\"]) || undefined}\n          size=\"XS\"\n        />\n      )}\n      <HvTypography\n        noWrap\n        variant=\"caption2\"\n        component=\"span\"\n        className={classes.label}\n      >\n        {label}\n      </HvTypography>\n      {onDelete && !disabled && deleteIcon}\n    </HvButtonBase>\n  );\n});\n"],"names":["HvTag"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { cloneElement, forwardRef, isValidElement } from \"react\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport {\n  getColor,\n  theme,\n  type HvColorAny,\n  type HvSize,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonBase, HvButtonBaseProps } from \"../ButtonBase\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvTypography } from \"../Typography\";\nimport { isDeleteKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<\n    HvButtonBaseProps,\n    \"type\" | \"color\" | \"classes\" | \"onClick\" | \"onToggle\"\n  > {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** @deprecated */\n  variant?: \"filled\" | \"outlined\";\n  size?: Extract<HvSize, \"xs\" | \"sm\" | \"md\">;\n  icon?: React.ReactNode;\n  /** Whether to show the select icon checkbox. */\n  showSelectIcon?: boolean;\n  /** The color variant of the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: React.EventHandler<any>;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag. @deprecated no longer used */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products.\n */\nexport const HvTag = forwardRef<\n  // no-indent\n  HTMLElement,\n  HvTagProps\n>(function HvTag(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    component,\n    style,\n    label,\n    disabled,\n    size = \"xs\",\n    variant,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    showSelectIcon = selectable,\n    color,\n    icon: iconProp,\n    deleteIcon: deleteIconProp,\n    onDelete,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    deleteButtonArialLabel,\n    deleteButtonProps,\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const handleDeleteClick = (event: React.MouseEvent) => {\n    // Stop the event from bubbling up to the tag\n    event.stopPropagation();\n    onDelete?.(event);\n  };\n\n  const tagColor =\n    // backwards-compatibility for `type` prop\n    (type === \"categorical\" && theme.alpha(color || \"cat1\", 0.2)) ||\n    // use the palette color if it matches\n    theme.palette[color as keyof typeof theme.palette]?.[600] ||\n    getColor(color);\n\n  const isClickable = !!(onClick || onDelete || selectable);\n\n  const CheckboxIcon = isSelected ? CheckboxCheck : Checkbox;\n\n  const deleteIcon =\n    deleteIconProp && isValidElement(deleteIconProp) ? (\n      cloneElement<any>(deleteIconProp, {\n        className: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n        onClick: handleDeleteClick,\n      })\n    ) : (\n      <CloseXS\n        size=\"XS\"\n        onClick={handleDeleteClick}\n        className={cx(classes.deleteIcon, classes.button, classes.tagButton)}\n        {...deleteButtonProps}\n      />\n    );\n\n  return (\n    <HvButtonBase\n      ref={ref as any}\n      component={isClickable ? HvButtonBase : \"div\"}\n      disabled={disabled}\n      data-color={color}\n      style={mergeStyles(style, {\n        \"--tagColor\": tagColor,\n      })}\n      className={cx(classes.root, classes.chipRoot, classes[size], className, {\n        [classes.hasIcon]: iconProp || (selectable && showSelectIcon),\n        [classes.clickable]: isClickable && !disabled,\n        [classes.selected]: isSelected,\n        [classes.disabled]: disabled,\n        [classes.outlined]: variant === \"outlined\",\n        [classes.categorical]: type === \"categorical\",\n        [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n        [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n      })}\n      onKeyUp={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n        // Ignore events from children.\n        if (event.currentTarget === event.target && isDeleteKey(event)) {\n          onDelete?.(event);\n        }\n\n        onKeyUp?.(event);\n      }}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      selected={isClickable && isSelected}\n      {...others}\n    >\n      {iconProp}\n      {selectable && showSelectIcon && (\n        <CheckboxIcon\n          className={classes.icon}\n          color={(disabled && [\"bgPageSecondary\", \"textDisabled\"]) || undefined}\n          size=\"XS\"\n        />\n      )}\n      <HvTypography\n        noWrap\n        variant=\"caption2\"\n        component=\"span\"\n        className={classes.label}\n      >\n        {label}\n      </HvTypography>\n      {onDelete && !disabled && deleteIcon}\n    </HvButtonBase>\n  );\n});\n"],"names":["HvTag"],"mappings":"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"}

package/dist/esm/Tag/Tag.styles.js

@@ -7,24 +7,51 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
     justifyContent: "center",
     cursor: "default",
     color: theme.colors.textDark,
-    backgroundColor: "var(--bgColor)",
-    height: 16,
+    borderColor: theme.colors.border,
     borderRadius: 0,
     maxWidth: 180,
     whiteSpace: "nowrap",
-    ":hover, :focus": {
-      backgroundColor: "var(--bgColor)"
+    transition: "background-color 0.3s ease",
+    "&,:hover,:focus-visible": {
+      backgroundColor: "var(--tagColor)"
     }
   },
+  hasIcon: {
+    paddingLeft: 2
+  },
+  /** @deprecated */
+  outlined: {
+    outlineStyle: "solid"
+  },
+  /** @deprecated */
   categorical: {
     borderRadius: 8,
     "& $label": {
       color: theme.colors.text
+    },
+    "& $icon": {
+      display: "none"
+    }
+  },
+  xs: {
+    height: 16
+  },
+  sm: {
+    height: 24,
+    "& $label": {
+      ...theme.typography.caption1,
+      color: "inherit"
+    }
+  },
+  md: {
+    height: 32,
+    "& $label": {
+      ...theme.typography.body,
+      color: "inherit"
     }
   },
   disabled: {
-    backgroundColor: theme.colors.bgDisabled,
-    ":hover, :focus": {
+    "&,:hover,:focus-visible": {
       backgroundColor: theme.colors.bgDisabled
     },
     "& $label": {
@@ -46,10 +73,10 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
   clickable: {
     cursor: "pointer"
   },
+  // TODO: remove in favour of `hasIcon` once it's no longer needed
   icon: {
     width: 12,
-    height: 12,
-    marginLeft: 2
+    height: 12
   },
   /** @deprecated use `root` instead */
   chipRoot: {},

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    cursor: \"default\",\n    color: theme.colors.textDark,\n    backgroundColor: \"var(--bgColor)\",\n    height: 16,\n    borderRadius: 0,\n    maxWidth: 180,\n    whiteSpace: \"nowrap\",\n\n    \":hover, :focus\": {\n      backgroundColor: \"var(--bgColor)\",\n    },\n  },\n  categorical: {\n    borderRadius: 8,\n    \"& $label\": {\n      color: theme.colors.text,\n    },\n  },\n\n  disabled: {\n    backgroundColor: theme.colors.bgDisabled,\n    \":hover, :focus\": {\n      backgroundColor: theme.colors.bgDisabled,\n    },\n    \"& $label\": {\n      color: theme.colors.textDisabled,\n    },\n  },\n  label: {\n    padding: theme.spacing(0, \"xxs\"),\n    color: \"inherit\",\n  },\n  deleteIcon: {\n    width: 16,\n    height: 16,\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n  },\n  selected: {},\n  clickable: {\n    cursor: \"pointer\",\n  },\n  icon: {\n    width: 12,\n    height: 12,\n    marginLeft: 2,\n  },\n\n  /** @deprecated use `root` instead */\n  chipRoot: {},\n  /** @deprecated unused */\n  // TODO: redundant - use deleteIcon. remove in v6\n  /** @deprecated */\n  button: {},\n  /** @deprecated */\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  /** @deprecated */\n  focusVisible: {},\n  /** @deprecated */\n  disabledDeleteIcon: {},\n  /** @deprecated */\n  categoricalFocus: {},\n  /** @deprecated */\n  categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IAEZ,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EAEA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,kBAAkB;AAAA,MAChB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}
+{"version":3,"file":"Tag.styles.js","sources":["../../../src/Tag/Tag.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTag\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    cursor: \"default\",\n    color: theme.colors.textDark,\n    borderColor: theme.colors.border,\n    borderRadius: 0,\n    maxWidth: 180,\n    whiteSpace: \"nowrap\",\n    transition: \"background-color 0.3s ease\",\n\n    \"&,:hover,:focus-visible\": {\n      backgroundColor: \"var(--tagColor)\",\n    },\n  },\n  hasIcon: {\n    paddingLeft: 2,\n  },\n  /** @deprecated */\n  outlined: {\n    outlineStyle: \"solid\",\n  },\n  /** @deprecated */\n  categorical: {\n    borderRadius: 8,\n    \"& $label\": {\n      color: theme.colors.text,\n    },\n    \"& $icon\": {\n      display: \"none\",\n    },\n  },\n  xs: {\n    height: 16,\n  },\n  sm: {\n    height: 24,\n    \"& $label\": {\n      ...theme.typography.caption1,\n      color: \"inherit\",\n    },\n  },\n  md: {\n    height: 32,\n    \"& $label\": {\n      ...theme.typography.body,\n      color: \"inherit\",\n    },\n  },\n\n  disabled: {\n    \"&,:hover,:focus-visible\": {\n      backgroundColor: theme.colors.bgDisabled,\n    },\n    \"& $label\": {\n      color: theme.colors.textDisabled,\n    },\n  },\n  label: {\n    padding: theme.spacing(0, \"xxs\"),\n    color: \"inherit\",\n  },\n  deleteIcon: {\n    width: 16,\n    height: 16,\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n  },\n  selected: {},\n  clickable: {\n    cursor: \"pointer\",\n  },\n  // TODO: remove in favour of `hasIcon` once it's no longer needed\n  icon: {\n    width: 12,\n    height: 12,\n  },\n\n  /** @deprecated use `root` instead */\n  chipRoot: {},\n  /** @deprecated unused */\n  // TODO: redundant - use deleteIcon. remove in v6\n  /** @deprecated */\n  button: {},\n  /** @deprecated */\n  tagButton: {},\n  // TODO: redundant - use $clickable or :not($disabled). remove in v6\n  /** @deprecated */\n  focusVisible: {},\n  /** @deprecated */\n  disabledDeleteIcon: {},\n  /** @deprecated */\n  categoricalFocus: {},\n  /** @deprecated */\n  categoricalDisabled: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,IAC1B,cAAc;AAAA,IACd,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IAEZ,2BAA2B;AAAA,MACzB,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,EACf;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,cAAc;AAAA,EAChB;AAAA;AAAA,EAEA,aAAa;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,EACV;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,MACpB,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,MACpB,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EAEA,UAAU;AAAA,IACR,2BAA2B;AAAA,MACzB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,OAAO;AAAA,IACL,SAAS,MAAM,QAAQ,GAAG,KAAK;AAAA,IAC/B,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,WAAW;AAAA,IACT,QAAQ;AAAA,EACV;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA;AAAA,EAGA,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAIX,QAAQ,CAAC;AAAA;AAAA,EAET,WAAW,CAAC;AAAA;AAAA;AAAA,EAGZ,cAAc,CAAC;AAAA;AAAA,EAEf,oBAAoB,CAAC;AAAA;AAAA,EAErB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,qBAAqB,CAAA;AACvB,CAAC;"}

package/dist/esm/TimePicker/TimePicker.styles.js

@@ -21,7 +21,7 @@ const { useClasses, staticClasses } = createClasses("HvTimePicker", {
   dropdownHeaderOpen: {},
   dropdownHeaderInvalid: {
     "&,:hover": {
-      border: `1px solid ${theme.form.errorColor}`
+      borderColor: theme.form.errorColor
     }
   },
   dropdownPanel: {},

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.styles.js","sources":["../../../src/TimePicker/TimePicker.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTimePicker\", {\n  root: {\n    position: \"relative\",\n  },\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {},\n  description: {},\n\n  placeholder: {\n    display: \"flex\",\n    gap: 1,\n  },\n  placeholderDisabled: {\n    color: theme.colors.textDisabled,\n  },\n\n  dropdownHeader: {},\n  dropdownHeaderOpen: {},\n  dropdownHeaderInvalid: {\n    \"&,:hover\": {\n      border: `1px solid ${theme.form.errorColor}`,\n    },\n  },\n  dropdownPanel: {},\n\n  icon: {},\n\n  timePopperContainer: {\n    zIndex: 10,\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: theme.spacing(\"xs\", 0),\n    userSelect: \"none\",\n    minWidth: \"175px\",\n  },\n\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EAEA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EAEd,aAAa;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AAAA,EACA,qBAAqB;AAAA,IACnB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EAEA,gBAAgB,CAAC;AAAA,EACjB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB;AAAA,IACrB,YAAY;AAAA,MACV,QAAQ,aAAa,MAAM,KAAK,UAAU;AAAA,IAAA;AAAA,EAE9C;AAAA,EACA,eAAe,CAAC;AAAA,EAEhB,MAAM,CAAC;AAAA,EAEP,qBAAqB;AAAA,IACnB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EAEA,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"TimePicker.styles.js","sources":["../../../src/TimePicker/TimePicker.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTimePicker\", {\n  root: {\n    position: \"relative\",\n  },\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {},\n  description: {},\n\n  placeholder: {\n    display: \"flex\",\n    gap: 1,\n  },\n  placeholderDisabled: {\n    color: theme.colors.textDisabled,\n  },\n\n  dropdownHeader: {},\n  dropdownHeaderOpen: {},\n  dropdownHeaderInvalid: {\n    \"&,:hover\": {\n      borderColor: theme.form.errorColor,\n    },\n  },\n  dropdownPanel: {},\n\n  icon: {},\n\n  timePopperContainer: {\n    zIndex: 10,\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    padding: theme.spacing(\"xs\", 0),\n    userSelect: \"none\",\n    minWidth: \"175px\",\n  },\n\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EAEA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EAEd,aAAa;AAAA,IACX,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AAAA,EACA,qBAAqB;AAAA,IACnB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EAEA,gBAAgB,CAAC;AAAA,EACjB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB;AAAA,IACrB,YAAY;AAAA,MACV,aAAa,MAAM,KAAK;AAAA,IAAA;AAAA,EAE5B;AAAA,EACA,eAAe,CAAC;AAAA,EAEhB,MAAM,CAAC;AAAA,EAEP,qBAAqB;AAAA,IACnB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EAEA,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/Tooltip/Tooltip.styles.js

@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = createClasses("HvTooltip", {
     },
     "& $title": {
       padding: "15px 20px",
-      borderBottom: `3px solid ${theme.colors.borderStrong}`
+      borderBottom: `3px solid ${theme.colors.borderSubtle}`
     },
     "& $valuesContainer": {
       padding: theme.space.sm

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.js","sources":["../../../src/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { tooltipClasses as MuitooltipClasses } from \"@mui/material/Tooltip\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  popper: {\n    // TODO: move this to `tooltip` in v6 and make class always be applied\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.bgContainer,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n      },\n    },\n    \"& $title\": {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.borderStrong}`,\n    },\n    \"& $valuesContainer\": {\n      padding: theme.space.sm,\n    },\n    \"& $values\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    \"& $color\": {\n      width: theme.space.xs,\n    },\n    \"& $separator\": {\n      width: theme.space.xs,\n    },\n    \"& $separatorColor\": {\n      width: \"5px\",\n    },\n    \"& $valueWrapper\": {\n      padding: theme.space.sm,\n    },\n    \"& $tooltip\": {\n      padding: theme.space.sm,\n      borderRadius: theme.radii.round,\n      \"& p\": {\n        wordBreak: \"break-word\",\n      },\n    },\n  },\n  // TODO: remove in v6\n  /** @deprecated */\n  tooltipMulti: {},\n  /** @deprecated */\n  title: {},\n  /** @deprecated */\n  valuesContainer: {},\n  /** @deprecated */\n  values: {},\n  /** @deprecated */\n  color: {},\n  /** @deprecated */\n  separatorColor: {},\n  /** @deprecated */\n  separator: {},\n  /** @deprecated */\n  valueWrapper: {},\n});\n"],"names":["MuitooltipClasses"],"mappings":";;;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,QAAQ;AAAA;AAAA,IAEN,CAAC,MAAMA,eAAkB,OAAO,EAAE,GAAG;AAAA,MACnC,GAAG,MAAM,WAAW;AAAA,MACpB,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,SAAS;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAc;AAAA,QACd,UAAU;AAAA,MAAA;AAAA,IAEd;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MACT,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IACtD;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,QACd,eAAe;AAAA,MAAA;AAAA,IAEnB;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS,MAAM,MAAM;AAAA,MACrB,cAAc,MAAM,MAAM;AAAA,MAC1B,OAAO;AAAA,QACL,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EAEJ;AAAA;AAAA;AAAA,EAGA,cAAc,CAAC;AAAA;AAAA,EAEf,OAAO,CAAC;AAAA;AAAA,EAER,iBAAiB,CAAC;AAAA;AAAA,EAElB,QAAQ,CAAC;AAAA;AAAA,EAET,OAAO,CAAC;AAAA;AAAA,EAER,gBAAgB,CAAC;AAAA;AAAA,EAEjB,WAAW,CAAC;AAAA;AAAA,EAEZ,cAAc,CAAA;AAChB,CAAC;"}
+{"version":3,"file":"Tooltip.styles.js","sources":["../../../src/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { tooltipClasses as MuitooltipClasses } from \"@mui/material/Tooltip\";\nimport { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  popper: {\n    // TODO: move this to `tooltip` in v6 and make class always be applied\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.bgContainer,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n      },\n    },\n    \"& $title\": {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.borderSubtle}`,\n    },\n    \"& $valuesContainer\": {\n      padding: theme.space.sm,\n    },\n    \"& $values\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    \"& $color\": {\n      width: theme.space.xs,\n    },\n    \"& $separator\": {\n      width: theme.space.xs,\n    },\n    \"& $separatorColor\": {\n      width: \"5px\",\n    },\n    \"& $valueWrapper\": {\n      padding: theme.space.sm,\n    },\n    \"& $tooltip\": {\n      padding: theme.space.sm,\n      borderRadius: theme.radii.round,\n      \"& p\": {\n        wordBreak: \"break-word\",\n      },\n    },\n  },\n  // TODO: remove in v6\n  /** @deprecated */\n  tooltipMulti: {},\n  /** @deprecated */\n  title: {},\n  /** @deprecated */\n  valuesContainer: {},\n  /** @deprecated */\n  values: {},\n  /** @deprecated */\n  color: {},\n  /** @deprecated */\n  separatorColor: {},\n  /** @deprecated */\n  separator: {},\n  /** @deprecated */\n  valueWrapper: {},\n});\n"],"names":["MuitooltipClasses"],"mappings":";;;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,QAAQ;AAAA;AAAA,IAEN,CAAC,MAAMA,eAAkB,OAAO,EAAE,GAAG;AAAA,MACnC,GAAG,MAAM,WAAW;AAAA,MACpB,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,SAAS;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAc;AAAA,QACd,UAAU;AAAA,MAAA;AAAA,IAEd;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MACT,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IACtD;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,QACd,eAAe;AAAA,MAAA;AAAA,IAEnB;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS,MAAM,MAAM;AAAA,MACrB,cAAc,MAAM,MAAM;AAAA,MAC1B,OAAO;AAAA,QACL,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,EAEJ;AAAA;AAAA;AAAA,EAGA,cAAc,CAAC;AAAA;AAAA,EAEf,OAAO,CAAC;AAAA;AAAA,EAER,iBAAiB,CAAC;AAAA;AAAA,EAElB,QAAQ,CAAC;AAAA;AAAA,EAET,OAAO,CAAC;AAAA;AAAA,EAER,gBAAgB,CAAC;AAAA;AAAA,EAEjB,WAAW,CAAC;AAAA;AAAA,EAEZ,cAAc,CAAA;AAChB,CAAC;"}

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.js

@@ -50,7 +50,7 @@ const HvVerticalNavigationSlider = (props) => {
               },
               className: classes.forwardButton,
               "aria-label": forwardButtonAriaLabel,
-              children: /* @__PURE__ */ jsx(DropRightXS, { color: "currentcolor" })
+              children: /* @__PURE__ */ jsx(DropRightXS, {})
             }
           ) : void 0,
           children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label })

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../../Button\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./NavigationSlider.styles\";\n\nexport { staticClasses as verticalNavigationSliderClasses };\n\nexport type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationSliderProps\n  extends Omit<HvListContainerProps, \"classes\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalNavigationSliderClasses;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * icon - the icon react element\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** The selected item id. */\n  selected?: string;\n  /** Triggered when the item is clicked. */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData,\n  ) => void;\n  /** Triggered when the navigate to child button is clicked. */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData,\n  ) => void;\n  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = (\n  props: HvVerticalNavigationSliderProps,\n) => {\n  const {\n    className,\n    classes: classesProp,\n    data,\n    selected,\n    onNavigateToTarget,\n    onNavigateToChild,\n    forwardButtonAriaLabel = \"Navigate to submenu\",\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigationSlider\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvListContainer\n      interactive\n      className={cx(classes.listContainer, className)}\n      {...others}\n    >\n      {data?.map((item) => (\n        <HvListItem\n          key={item.id}\n          classes={{\n            root: classes.root,\n            selected: classes.listItemSelected,\n            focus: classes.listItemFocus,\n            disabled: classes.listItemDisabled,\n          }}\n          onClick={(event) => {\n            onNavigateToTarget?.(event, item);\n          }}\n          aria-label={item.label}\n          aria-current={\n            selected === item.id ? (item.href ? \"page\" : true) : undefined\n          }\n          selected={selected === item.id}\n          startAdornment={item.icon ? <div>{item.icon}</div> : undefined}\n          endAdornment={\n            item.data && item.data.length > 0 ? (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  onNavigateToChild?.(event, item);\n                }}\n                className={classes.forwardButton}\n                aria-label={forwardButtonAriaLabel}\n              >\n                <DropRightXS color=\"currentcolor\" />\n              </HvButton>\n            ) : undefined\n          }\n        >\n          <HvOverflowTooltip data={item.label} />\n        </HvListItem>\n      ))}\n    </HvListContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmDa,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,IACzB,GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AAEvD,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,UAAU,QAAQ;AAAA,YAClB,OAAO,QAAQ;AAAA,YACf,UAAU,QAAQ;AAAA,UACpB;AAAA,UACA,SAAS,CAAC,UAAU;AAClB,iCAAqB,OAAO,IAAI;AAAA,UAClC;AAAA,UACA,cAAY,KAAK;AAAA,UACjB,gBACE,aAAa,KAAK,KAAM,KAAK,OAAO,SAAS,OAAQ;AAAA,UAEvD,UAAU,aAAa,KAAK;AAAA,UAC5B,gBAAgB,KAAK,2BAAQ,OAAK,EAAA,UAAA,KAAK,KAAK,CAAA,IAAS;AAAA,UACrD,cACE,KAAK,QAAQ,KAAK,KAAK,SAAS,IAC9B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAI;AAAA,cACJ,SAAS,CAAC,UAAU;AAClB,oCAAoB,OAAO,IAAI;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAY;AAAA,cAEZ,UAAA,oBAAC,aAAY,EAAA,OAAM,eAAe,CAAA;AAAA,YAAA;AAAA,UAAA,IAElC;AAAA,UAGN,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,MAAO,CAAA;AAAA,QAAA;AAAA,QA/BhC,KAAK;AAAA,MAiCb,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"NavigationSlider.js","sources":["../../../../src/VerticalNavigation/NavigationSlider/NavigationSlider.tsx"],"sourcesContent":["import { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton } from \"../../Button\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { NavigationData } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./NavigationSlider.styles\";\n\nexport { staticClasses as verticalNavigationSliderClasses };\n\nexport type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationSliderProps\n  extends Omit<HvListContainerProps, \"classes\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvVerticalNavigationSliderClasses;\n  /**\n   * An array containing the data for each menu item.\n   *\n   * id - the id to be applied to the root element.\n   * label - the label to be rendered on the menu item.\n   * icon - the icon react element\n   * data - sub-menu items\n   * href - the url used for navigation.\n   * target - the behavior when opening an url.\n   */\n  data?: NavigationData[];\n  /** The selected item id. */\n  selected?: string;\n  /** Triggered when the item is clicked. */\n  onNavigateToTarget?: (\n    event: React.MouseEvent<HTMLLIElement>,\n    item: NavigationData,\n  ) => void;\n  /** Triggered when the navigate to child button is clicked. */\n  onNavigateToChild?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    item: NavigationData,\n  ) => void;\n  /** Aria label to apply to the navigate to submenu button on the list items. */\n  forwardButtonAriaLabel?: string;\n}\n\nexport const HvVerticalNavigationSlider = (\n  props: HvVerticalNavigationSliderProps,\n) => {\n  const {\n    className,\n    classes: classesProp,\n    data,\n    selected,\n    onNavigateToTarget,\n    onNavigateToChild,\n    forwardButtonAriaLabel = \"Navigate to submenu\",\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigationSlider\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvListContainer\n      interactive\n      className={cx(classes.listContainer, className)}\n      {...others}\n    >\n      {data?.map((item) => (\n        <HvListItem\n          key={item.id}\n          classes={{\n            root: classes.root,\n            selected: classes.listItemSelected,\n            focus: classes.listItemFocus,\n            disabled: classes.listItemDisabled,\n          }}\n          onClick={(event) => {\n            onNavigateToTarget?.(event, item);\n          }}\n          aria-label={item.label}\n          aria-current={\n            selected === item.id ? (item.href ? \"page\" : true) : undefined\n          }\n          selected={selected === item.id}\n          startAdornment={item.icon ? <div>{item.icon}</div> : undefined}\n          endAdornment={\n            item.data && item.data.length > 0 ? (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  onNavigateToChild?.(event, item);\n                }}\n                className={classes.forwardButton}\n                aria-label={forwardButtonAriaLabel}\n              >\n                <DropRightXS />\n              </HvButton>\n            ) : undefined\n          }\n        >\n          <HvOverflowTooltip data={item.label} />\n        </HvListItem>\n      ))}\n    </HvListContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAmDa,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,yBAAyB;AAAA,IACzB,GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AAEvD,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAW;AAAA,MACX,WAAW,GAAG,QAAQ,eAAe,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH,UAAA,MAAM,IAAI,CAAC,SACV;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,UAAU,QAAQ;AAAA,YAClB,OAAO,QAAQ;AAAA,YACf,UAAU,QAAQ;AAAA,UACpB;AAAA,UACA,SAAS,CAAC,UAAU;AAClB,iCAAqB,OAAO,IAAI;AAAA,UAClC;AAAA,UACA,cAAY,KAAK;AAAA,UACjB,gBACE,aAAa,KAAK,KAAM,KAAK,OAAO,SAAS,OAAQ;AAAA,UAEvD,UAAU,aAAa,KAAK;AAAA,UAC5B,gBAAgB,KAAK,2BAAQ,OAAK,EAAA,UAAA,KAAK,KAAK,CAAA,IAAS;AAAA,UACrD,cACE,KAAK,QAAQ,KAAK,KAAK,SAAS,IAC9B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAI;AAAA,cACJ,SAAS,CAAC,UAAU;AAClB,oCAAoB,OAAO,IAAI;AAAA,cACjC;AAAA,cACA,WAAW,QAAQ;AAAA,cACnB,cAAY;AAAA,cAEZ,8BAAC,aAAY,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,IAEb;AAAA,UAGN,UAAC,oBAAA,mBAAA,EAAkB,MAAM,KAAK,MAAO,CAAA;AAAA,QAAA;AAAA,QA/BhC,KAAK;AAAA,MAiCb,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js

@@ -327,7 +327,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
                 children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: label })
               }
             ),
-            isOpen && expandable && /* @__PURE__ */ jsx(DropDownXS, { color: "currentcolor", rotate: expanded })
+            isOpen && expandable && /* @__PURE__ */ jsx(DropDownXS, { rotate: expanded })
           ]
         }
       ) });

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { DropDownXS, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport {\n  DescendantProvider,\n  useDescendant,\n} from \"../../TreeView/internals/DescendantProvider\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport {\n  TreeViewControlContext,\n  TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\n\nexport { staticClasses as treeViewItemClasses };\n\nexport type HvVerticalNavigationTreeViewItemClasses = ExtractNames<\n  typeof useClasses\n>;\n\nexport interface HvVerticalNavigationTreeViewItemProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the Radio button.\n   */\n  classes?: HvVerticalNavigationTreeViewItemClasses;\n  /**\n   * Is the node disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Can the node be selected.\n   */\n  selectable?: boolean;\n  /**\n   * The id of the node.\n   */\n  nodeId?: string;\n  /**\n   * The icon to display next to the node's label.\n   */\n  icon?: React.ReactNode;\n  /**\n   * The item label.\n   */\n  label?: React.ReactNode;\n  /**\n   * The url for the link.\n   */\n  href?: string;\n  /**\n   * The behavior when opening a link.\n   */\n  target?: string;\n  /**\n   * The node payload.\n   */\n  payload?: any;\n  /**\n   * @ignore\n   */\n  onClick?: any;\n  /**\n   * @ignore\n   */\n  onMouseDown?: any;\n  /**\n   * @ignore\n   */\n  onFocus?: any;\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  onMouseEnter?: any;\n  /**\n   * Disables the appearence of a tooltip on hovering an element ( Only applicable when the in collapsed mode)\n   */\n  disableTooltip?: boolean;\n}\n\nconst preventSelection = (event: any, disabled: any) => {\n  if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n    // Prevent text selection\n    event.preventDefault();\n  }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n  function HvVerticalNavigationTreeViewItem(\n    props: HvVerticalNavigationTreeViewItemProps,\n    ref,\n  ) {\n    const {\n      id: idProp,\n      className,\n      classes: classesProp,\n\n      disabled: disabledProp = false,\n\n      selectable: selectableProp,\n\n      nodeId,\n      icon = null,\n      label,\n      href,\n      target,\n      payload,\n\n      onClick,\n      onMouseDown,\n      onFocus,\n\n      children,\n\n      disableTooltip,\n\n      ...others\n    } = useDefaultProps(\"HvVerticalNavigationTreeViewItem\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const treeViewControlContext = useContext(TreeViewControlContext);\n    const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n      useContext(TreeViewStateContext);\n\n    const {\n      treeId,\n      mode,\n      collapsible,\n      toggleExpansion,\n      multiSelect,\n      selectNode,\n      selectRange,\n      disabledItemsFocusable,\n      registerNode,\n      unregisterNode,\n      mapFirstChar,\n      unMapFirstChar,\n      focus,\n    } = treeViewControlContext;\n\n    const treeviewMode = mode === \"treeview\";\n\n    let id: string | null = null;\n\n    if (idProp != null) {\n      id = idProp;\n    } else if (treeId && nodeId) {\n      id = `${treeId}-${nodeId}`;\n    }\n\n    const [treeitemElement, setTreeitemElement] = useState<HTMLLIElement>();\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeitemElement, ref);\n\n    const descendant = useMemo(\n      () => ({\n        element: treeitemElement!,\n        id: nodeId!,\n      }),\n      [nodeId, treeitemElement],\n    );\n\n    const { isOpen, useIcons, hasAnyChildWithData } = useContext(\n      VerticalNavigationContext,\n    );\n\n    const { index, parentId, level } = useDescendant(descendant);\n\n    const expandable = collapsible && Array.isArray(children);\n    const expanded = isExpanded ? isExpanded(nodeId) : false;\n    const focused = isFocused ? isFocused(nodeId) : false;\n    const selected = isSelected ? isSelected(nodeId) : false;\n    const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n    const selectable =\n      selectableProp != null\n        ? selectableProp\n        : !collapsible || !expandable || !isOpen;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (registerNode && unregisterNode && index !== -1) {\n        registerNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          selectable,\n          expandable,\n          disabled: disabledProp,\n          onFocus,\n          payload,\n        });\n\n        return () => {\n          unregisterNode(nodeId);\n        };\n      }\n\n      return undefined;\n    }, [\n      registerNode,\n      unregisterNode,\n      parentId,\n      index,\n      nodeId,\n      expandable,\n      disabledProp,\n      id,\n      selectable,\n      onFocus,\n      payload,\n    ]);\n\n    useEffect(() => {\n      if (\n        mapFirstChar &&\n        unMapFirstChar &&\n        label &&\n        contentRef.current?.textContent\n      ) {\n        mapFirstChar(\n          nodeId,\n          contentRef.current?.textContent.substring(0, 1).toLowerCase(),\n        );\n\n        return () => {\n          unMapFirstChar(nodeId);\n        };\n      }\n      return undefined;\n    }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n    let ariaSelected;\n    if (multiSelect) {\n      ariaSelected = selected;\n    } else if (selected) {\n      /* single-selection trees unset aria-selected on un-selected items.\n       *\n       * If the tree does not support multiple selection, aria-selected\n       * is set to true for the selected node and it is not present on any other node in the tree.\n       * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n       */\n      ariaSelected = true;\n    }\n\n    const handleFocus = useCallback(\n      (event: any) => {\n        // DOM focus stays on the tree which manages focus with aria-activedescendant\n        if (event.target === event.currentTarget) {\n          (event.target.ownerDocument || document)\n            .getElementById(treeId)\n            .focus({ preventScroll: true });\n        }\n\n        const unfocusable = !disabledItemsFocusable && disabled;\n        if (\n          !focused &&\n          event.currentTarget === event.target &&\n          !unfocusable &&\n          focus\n        ) {\n          focus(event, nodeId);\n        }\n      },\n      [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId],\n    );\n\n    const handleExpansion = useCallback(\n      (event: any) => {\n        if (!disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          // If already expanded and trying to toggle selection don't close\n          if (\n            expandable &&\n            isOpen &&\n            !(multiple && isExpanded && isExpanded(nodeId))\n          ) {\n            if (toggleExpansion) toggleExpansion(event, nodeId);\n          }\n        }\n      },\n      [\n        disabled,\n        expandable,\n        focus,\n        focused,\n        isExpanded,\n        multiSelect,\n        nodeId,\n        toggleExpansion,\n        treeviewMode,\n        isOpen,\n      ],\n    );\n\n    const handleSelection = useCallback(\n      (event: any) => {\n        if (selectable && !disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          if (multiple) {\n            if (event.shiftKey) {\n              if (selectRange) return selectRange(event, { end: nodeId });\n            } else if (selectNode) return selectNode(event, nodeId, true);\n          } else if (selectNode) return selectNode(event, nodeId);\n        } else {\n          return false;\n        }\n      },\n      [\n        disabled,\n        focus,\n        focused,\n        multiSelect,\n        nodeId,\n        selectNode,\n        selectRange,\n        selectable,\n        treeviewMode,\n      ],\n    );\n\n    const handleMouseDown = useCallback(\n      (event: any) => {\n        preventSelection(event, disabled);\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [disabled, onMouseDown],\n    );\n\n    const handleClick = useCallback(\n      (event: any) => {\n        if (!disabled) {\n          if (expandable && isOpen) {\n            handleExpansion(event);\n          }\n\n          if (selectable) {\n            handleSelection(event);\n          }\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [\n        disabled,\n        expandable,\n        handleExpansion,\n        handleSelection,\n        onClick,\n        selectable,\n        isOpen,\n      ],\n    );\n\n    const handleKeyDown = useCallback(\n      (event: any) => {\n        let isEventHandled = false;\n        const { key } = event;\n\n        if (\n          event.altKey ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.currentTarget !== event.target\n        ) {\n          return;\n        }\n        if (contentRef.current === event.currentTarget) {\n          if (key === \"Enter\" || key === \" \") {\n            if (expandable && isOpen) {\n              isEventHandled = handleExpansion(event) as unknown as boolean;\n            }\n\n            if (selectable) {\n              isEventHandled = handleSelection(event) as boolean;\n            }\n          }\n\n          if (isEventHandled) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        }\n      },\n      [expandable, handleExpansion, handleSelection, selectable, isOpen],\n    );\n\n    const renderedContent = useMemo(() => {\n      const buttonLinkProps = {\n        href,\n        target,\n      };\n\n      const hasChildren = !!children;\n      const showTooltip = !hasChildren && !isOpen && !disableTooltip;\n\n      const isLink = href !== undefined && !disabled;\n\n      return (\n        <HvTooltip placement=\"right\" title={showTooltip && label}>\n          <HvTypography\n            id={setId(id, \"button\")}\n            component={isLink ? \"a\" : \"div\"}\n            {...(isLink ? buttonLinkProps : null)}\n            ref={contentRef}\n            classes={{\n              root: cx(classes.content, {\n                [classes.link]: isLink,\n                [classes.minimized]: !isOpen,\n              }),\n            }}\n            variant=\"body\"\n            disabled={disabled}\n            onClick={handleClick}\n            onMouseDown={handleMouseDown}\n            style={{\n              paddingLeft:\n                (useIcons || !isOpen ? 0 : 10) +\n                level * (collapsible ? 16 : 10),\n            }}\n            role={isLink ? undefined : \"button\"}\n            {...(treeviewMode\n              ? {\n                  tabIndex: -1,\n                  onFocus: handleFocus,\n                }\n              : {\n                  tabIndex: selectable || expandable ? 0 : -1,\n                  onKeyDown: handleKeyDown,\n                  \"aria-current\":\n                    (selectable && selected) ||\n                    (!isOpen && isChildSelected?.(nodeId))\n                      ? href\n                        ? \"page\"\n                        : true\n                      : undefined,\n                  \"aria-expanded\": expandable ? expanded : undefined,\n                  \"aria-controls\":\n                    isOpen && expandable ? setId(id, \"group\") : undefined,\n                  \"aria-label\": payload?.label,\n                })}\n          >\n            <div\n              className={classes.icon}\n              style={mergeStyles(undefined, {\n                \"--icon-margin-left\": hasAnyChildWithData ? \"auto\" : \"unset\",\n              })}\n            >\n              {!icon && useIcons ? (\n                <HvAvatar\n                  variant=\"square\"\n                  size=\"xs\"\n                  backgroundColor=\"textSubtle\"\n                >\n                  {payload?.label?.substring(0, 1)}\n                </HvAvatar>\n              ) : (\n                useIcons && icon\n              )}\n              {hasChildren && !isOpen ? (\n                <Forwards iconSize=\"XS\" />\n              ) : (\n                hasAnyChildWithData && !isOpen && <div />\n              )}\n            </div>\n\n            {isOpen && (\n              <div\n                className={cx(classes.label, {\n                  [classes.labelIcon]: useIcons,\n                  [classes.labelExpandable]: !!expandable,\n                })}\n              >\n                <HvOverflowTooltip data={label} />\n              </div>\n            )}\n\n            {isOpen && expandable && (\n              <DropDownXS color=\"currentcolor\" rotate={expanded} />\n            )}\n          </HvTypography>\n        </HvTooltip>\n      );\n    }, [\n      href,\n      target,\n      children,\n      isOpen,\n      disableTooltip,\n      disabled,\n      label,\n      id,\n      cx,\n      classes.content,\n      classes.link,\n      classes.minimized,\n      classes.icon,\n      classes.label,\n      classes.labelIcon,\n      classes.labelExpandable,\n      handleClick,\n      handleMouseDown,\n      useIcons,\n      level,\n      collapsible,\n      treeviewMode,\n      handleFocus,\n      selectable,\n      expandable,\n      handleKeyDown,\n      selected,\n      isChildSelected,\n      nodeId,\n      expanded,\n      payload?.label,\n      icon,\n      hasAnyChildWithData,\n    ]);\n\n    const renderedChildren = useMemo(\n      () =>\n        children && (\n          <ul\n            id={setId(id, \"group\")}\n            className={classes.group}\n            role={treeviewMode ? \"group\" : undefined}\n          >\n            {children}\n          </ul>\n        ),\n      [children, classes?.group, id, treeviewMode],\n    );\n\n    return (\n      <li\n        ref={handleRef}\n        id={id ?? undefined}\n        className={cx(\n          classes.node,\n          {\n            [classes.disabled]: disabled,\n            [classes.expandable]: expandable,\n            [classes.collapsed]: expandable && !expanded,\n            [classes.expanded]: expandable && expanded,\n            [classes.selectable]: selectable && !disabled,\n            [classes.unselectable]: !disabled && !selectable,\n            [classes.selected]:\n              (!disabled && selectable && selected) ||\n              (!isOpen &&\n                useIcons &&\n                isChildSelected &&\n                isChildSelected(nodeId)),\n            [classes.unselected]: !disabled && selectable && !selected,\n            [classes.focused]: focused,\n            [classes.hide]: !isOpen && !useIcons,\n          },\n          className,\n        )}\n        data-hasicon={icon != null ? true : undefined}\n        {...(mode === \"treeview\" && {\n          role: \"treeitem\",\n          \"aria-selected\": ariaSelected,\n          \"aria-expanded\": expandable ? expanded : undefined,\n          \"aria-disabled\": disabled ? true : undefined,\n        })}\n        {...others}\n      >\n        {renderedContent}\n        {isOpen && (\n          <DescendantProvider id={nodeId} level={level + 1}>\n            {renderedChildren}\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  },\n);\n"],"names":["HvVerticalNavigationTreeViewItem"],"mappings":"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"}
+{"version":3,"file":"TreeViewItem.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { DropDownXS, Forwards } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport {\n  DescendantProvider,\n  useDescendant,\n} from \"../../TreeView/internals/DescendantProvider\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport {\n  TreeViewControlContext,\n  TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { staticClasses, useClasses } from \"./TreeViewItem.styles\";\n\nexport { staticClasses as treeViewItemClasses };\n\nexport type HvVerticalNavigationTreeViewItemClasses = ExtractNames<\n  typeof useClasses\n>;\n\nexport interface HvVerticalNavigationTreeViewItemProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the Radio button.\n   */\n  classes?: HvVerticalNavigationTreeViewItemClasses;\n  /**\n   * Is the node disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Can the node be selected.\n   */\n  selectable?: boolean;\n  /**\n   * The id of the node.\n   */\n  nodeId?: string;\n  /**\n   * The icon to display next to the node's label.\n   */\n  icon?: React.ReactNode;\n  /**\n   * The item label.\n   */\n  label?: React.ReactNode;\n  /**\n   * The url for the link.\n   */\n  href?: string;\n  /**\n   * The behavior when opening a link.\n   */\n  target?: string;\n  /**\n   * The node payload.\n   */\n  payload?: any;\n  /**\n   * @ignore\n   */\n  onClick?: any;\n  /**\n   * @ignore\n   */\n  onMouseDown?: any;\n  /**\n   * @ignore\n   */\n  onFocus?: any;\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode;\n  /**\n   * @ignore\n   */\n  onMouseEnter?: any;\n  /**\n   * Disables the appearence of a tooltip on hovering an element ( Only applicable when the in collapsed mode)\n   */\n  disableTooltip?: boolean;\n}\n\nconst preventSelection = (event: any, disabled: any) => {\n  if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n    // Prevent text selection\n    event.preventDefault();\n  }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n  function HvVerticalNavigationTreeViewItem(\n    props: HvVerticalNavigationTreeViewItemProps,\n    ref,\n  ) {\n    const {\n      id: idProp,\n      className,\n      classes: classesProp,\n\n      disabled: disabledProp = false,\n\n      selectable: selectableProp,\n\n      nodeId,\n      icon = null,\n      label,\n      href,\n      target,\n      payload,\n\n      onClick,\n      onMouseDown,\n      onFocus,\n\n      children,\n\n      disableTooltip,\n\n      ...others\n    } = useDefaultProps(\"HvVerticalNavigationTreeViewItem\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const treeViewControlContext = useContext(TreeViewControlContext);\n    const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n      useContext(TreeViewStateContext);\n\n    const {\n      treeId,\n      mode,\n      collapsible,\n      toggleExpansion,\n      multiSelect,\n      selectNode,\n      selectRange,\n      disabledItemsFocusable,\n      registerNode,\n      unregisterNode,\n      mapFirstChar,\n      unMapFirstChar,\n      focus,\n    } = treeViewControlContext;\n\n    const treeviewMode = mode === \"treeview\";\n\n    let id: string | null = null;\n\n    if (idProp != null) {\n      id = idProp;\n    } else if (treeId && nodeId) {\n      id = `${treeId}-${nodeId}`;\n    }\n\n    const [treeitemElement, setTreeitemElement] = useState<HTMLLIElement>();\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeitemElement, ref);\n\n    const descendant = useMemo(\n      () => ({\n        element: treeitemElement!,\n        id: nodeId!,\n      }),\n      [nodeId, treeitemElement],\n    );\n\n    const { isOpen, useIcons, hasAnyChildWithData } = useContext(\n      VerticalNavigationContext,\n    );\n\n    const { index, parentId, level } = useDescendant(descendant);\n\n    const expandable = collapsible && Array.isArray(children);\n    const expanded = isExpanded ? isExpanded(nodeId) : false;\n    const focused = isFocused ? isFocused(nodeId) : false;\n    const selected = isSelected ? isSelected(nodeId) : false;\n    const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n    const selectable =\n      selectableProp != null\n        ? selectableProp\n        : !collapsible || !expandable || !isOpen;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (registerNode && unregisterNode && index !== -1) {\n        registerNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          selectable,\n          expandable,\n          disabled: disabledProp,\n          onFocus,\n          payload,\n        });\n\n        return () => {\n          unregisterNode(nodeId);\n        };\n      }\n\n      return undefined;\n    }, [\n      registerNode,\n      unregisterNode,\n      parentId,\n      index,\n      nodeId,\n      expandable,\n      disabledProp,\n      id,\n      selectable,\n      onFocus,\n      payload,\n    ]);\n\n    useEffect(() => {\n      if (\n        mapFirstChar &&\n        unMapFirstChar &&\n        label &&\n        contentRef.current?.textContent\n      ) {\n        mapFirstChar(\n          nodeId,\n          contentRef.current?.textContent.substring(0, 1).toLowerCase(),\n        );\n\n        return () => {\n          unMapFirstChar(nodeId);\n        };\n      }\n      return undefined;\n    }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n    let ariaSelected;\n    if (multiSelect) {\n      ariaSelected = selected;\n    } else if (selected) {\n      /* single-selection trees unset aria-selected on un-selected items.\n       *\n       * If the tree does not support multiple selection, aria-selected\n       * is set to true for the selected node and it is not present on any other node in the tree.\n       * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n       */\n      ariaSelected = true;\n    }\n\n    const handleFocus = useCallback(\n      (event: any) => {\n        // DOM focus stays on the tree which manages focus with aria-activedescendant\n        if (event.target === event.currentTarget) {\n          (event.target.ownerDocument || document)\n            .getElementById(treeId)\n            .focus({ preventScroll: true });\n        }\n\n        const unfocusable = !disabledItemsFocusable && disabled;\n        if (\n          !focused &&\n          event.currentTarget === event.target &&\n          !unfocusable &&\n          focus\n        ) {\n          focus(event, nodeId);\n        }\n      },\n      [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId],\n    );\n\n    const handleExpansion = useCallback(\n      (event: any) => {\n        if (!disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          // If already expanded and trying to toggle selection don't close\n          if (\n            expandable &&\n            isOpen &&\n            !(multiple && isExpanded && isExpanded(nodeId))\n          ) {\n            if (toggleExpansion) toggleExpansion(event, nodeId);\n          }\n        }\n      },\n      [\n        disabled,\n        expandable,\n        focus,\n        focused,\n        isExpanded,\n        multiSelect,\n        nodeId,\n        toggleExpansion,\n        treeviewMode,\n        isOpen,\n      ],\n    );\n\n    const handleSelection = useCallback(\n      (event: any) => {\n        if (selectable && !disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          if (multiple) {\n            if (event.shiftKey) {\n              if (selectRange) return selectRange(event, { end: nodeId });\n            } else if (selectNode) return selectNode(event, nodeId, true);\n          } else if (selectNode) return selectNode(event, nodeId);\n        } else {\n          return false;\n        }\n      },\n      [\n        disabled,\n        focus,\n        focused,\n        multiSelect,\n        nodeId,\n        selectNode,\n        selectRange,\n        selectable,\n        treeviewMode,\n      ],\n    );\n\n    const handleMouseDown = useCallback(\n      (event: any) => {\n        preventSelection(event, disabled);\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [disabled, onMouseDown],\n    );\n\n    const handleClick = useCallback(\n      (event: any) => {\n        if (!disabled) {\n          if (expandable && isOpen) {\n            handleExpansion(event);\n          }\n\n          if (selectable) {\n            handleSelection(event);\n          }\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [\n        disabled,\n        expandable,\n        handleExpansion,\n        handleSelection,\n        onClick,\n        selectable,\n        isOpen,\n      ],\n    );\n\n    const handleKeyDown = useCallback(\n      (event: any) => {\n        let isEventHandled = false;\n        const { key } = event;\n\n        if (\n          event.altKey ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.currentTarget !== event.target\n        ) {\n          return;\n        }\n        if (contentRef.current === event.currentTarget) {\n          if (key === \"Enter\" || key === \" \") {\n            if (expandable && isOpen) {\n              isEventHandled = handleExpansion(event) as unknown as boolean;\n            }\n\n            if (selectable) {\n              isEventHandled = handleSelection(event) as boolean;\n            }\n          }\n\n          if (isEventHandled) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        }\n      },\n      [expandable, handleExpansion, handleSelection, selectable, isOpen],\n    );\n\n    const renderedContent = useMemo(() => {\n      const buttonLinkProps = {\n        href,\n        target,\n      };\n\n      const hasChildren = !!children;\n      const showTooltip = !hasChildren && !isOpen && !disableTooltip;\n\n      const isLink = href !== undefined && !disabled;\n\n      return (\n        <HvTooltip placement=\"right\" title={showTooltip && label}>\n          <HvTypography\n            id={setId(id, \"button\")}\n            component={isLink ? \"a\" : \"div\"}\n            {...(isLink ? buttonLinkProps : null)}\n            ref={contentRef}\n            classes={{\n              root: cx(classes.content, {\n                [classes.link]: isLink,\n                [classes.minimized]: !isOpen,\n              }),\n            }}\n            variant=\"body\"\n            disabled={disabled}\n            onClick={handleClick}\n            onMouseDown={handleMouseDown}\n            style={{\n              paddingLeft:\n                (useIcons || !isOpen ? 0 : 10) +\n                level * (collapsible ? 16 : 10),\n            }}\n            role={isLink ? undefined : \"button\"}\n            {...(treeviewMode\n              ? {\n                  tabIndex: -1,\n                  onFocus: handleFocus,\n                }\n              : {\n                  tabIndex: selectable || expandable ? 0 : -1,\n                  onKeyDown: handleKeyDown,\n                  \"aria-current\":\n                    (selectable && selected) ||\n                    (!isOpen && isChildSelected?.(nodeId))\n                      ? href\n                        ? \"page\"\n                        : true\n                      : undefined,\n                  \"aria-expanded\": expandable ? expanded : undefined,\n                  \"aria-controls\":\n                    isOpen && expandable ? setId(id, \"group\") : undefined,\n                  \"aria-label\": payload?.label,\n                })}\n          >\n            <div\n              className={classes.icon}\n              style={mergeStyles(undefined, {\n                \"--icon-margin-left\": hasAnyChildWithData ? \"auto\" : \"unset\",\n              })}\n            >\n              {!icon && useIcons ? (\n                <HvAvatar\n                  variant=\"square\"\n                  size=\"xs\"\n                  backgroundColor=\"textSubtle\"\n                >\n                  {payload?.label?.substring(0, 1)}\n                </HvAvatar>\n              ) : (\n                useIcons && icon\n              )}\n              {hasChildren && !isOpen ? (\n                <Forwards iconSize=\"XS\" />\n              ) : (\n                hasAnyChildWithData && !isOpen && <div />\n              )}\n            </div>\n\n            {isOpen && (\n              <div\n                className={cx(classes.label, {\n                  [classes.labelIcon]: useIcons,\n                  [classes.labelExpandable]: !!expandable,\n                })}\n              >\n                <HvOverflowTooltip data={label} />\n              </div>\n            )}\n\n            {isOpen && expandable && <DropDownXS rotate={expanded} />}\n          </HvTypography>\n        </HvTooltip>\n      );\n    }, [\n      href,\n      target,\n      children,\n      isOpen,\n      disableTooltip,\n      disabled,\n      label,\n      id,\n      cx,\n      classes.content,\n      classes.link,\n      classes.minimized,\n      classes.icon,\n      classes.label,\n      classes.labelIcon,\n      classes.labelExpandable,\n      handleClick,\n      handleMouseDown,\n      useIcons,\n      level,\n      collapsible,\n      treeviewMode,\n      handleFocus,\n      selectable,\n      expandable,\n      handleKeyDown,\n      selected,\n      isChildSelected,\n      nodeId,\n      expanded,\n      payload?.label,\n      icon,\n      hasAnyChildWithData,\n    ]);\n\n    const renderedChildren = useMemo(\n      () =>\n        children && (\n          <ul\n            id={setId(id, \"group\")}\n            className={classes.group}\n            role={treeviewMode ? \"group\" : undefined}\n          >\n            {children}\n          </ul>\n        ),\n      [children, classes?.group, id, treeviewMode],\n    );\n\n    return (\n      <li\n        ref={handleRef}\n        id={id ?? undefined}\n        className={cx(\n          classes.node,\n          {\n            [classes.disabled]: disabled,\n            [classes.expandable]: expandable,\n            [classes.collapsed]: expandable && !expanded,\n            [classes.expanded]: expandable && expanded,\n            [classes.selectable]: selectable && !disabled,\n            [classes.unselectable]: !disabled && !selectable,\n            [classes.selected]:\n              (!disabled && selectable && selected) ||\n              (!isOpen &&\n                useIcons &&\n                isChildSelected &&\n                isChildSelected(nodeId)),\n            [classes.unselected]: !disabled && selectable && !selected,\n            [classes.focused]: focused,\n            [classes.hide]: !isOpen && !useIcons,\n          },\n          className,\n        )}\n        data-hasicon={icon != null ? true : undefined}\n        {...(mode === \"treeview\" && {\n          role: \"treeitem\",\n          \"aria-selected\": ariaSelected,\n          \"aria-expanded\": expandable ? expanded : undefined,\n          \"aria-disabled\": disabled ? true : undefined,\n        })}\n        {...others}\n      >\n        {renderedContent}\n        {isOpen && (\n          <DescendantProvider id={nodeId} level={level + 1}>\n            {renderedChildren}\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  },\n);\n"],"names":["HvVerticalNavigationTreeViewItem"],"mappings":"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"}

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.styles.js

@@ -125,6 +125,7 @@ const { staticClasses, useClasses } = createClasses(
     },
     icon: {
       display: "flex",
+      alignItems: "center",
       "> div:first-of-type": {
         marginLeft: "var(--icon-margin-left)"
       },

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../../Avatar\";\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst selected = {\n  background: theme.colors.bgPageSecondary,\n  borderLeft: `4px solid ${theme.colors.text}`,\n};\n\nconst hover = {\n  background: theme.colors.bgHover,\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTreeViewItem\",\n  {\n    node: {\n      listStyle: \"none\",\n      minHeight: \"32px\",\n      \"&:not(:last-child)\": {\n        marginBottom: \"8px\",\n      },\n      \"&$collapsed\": {\n        \"&>$group\": {\n          display: \"none\",\n        },\n      },\n      \"&$expanded\": {\n        \"&>$group\": {\n          display: \"block\",\n        },\n      },\n      \"&$link\": {\n        textDecoration: \"none\",\n      },\n      \"&$hide\": {\n        display: \"none\",\n      },\n    },\n    content: {\n      width: \"100%\",\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n      height: \"32px\",\n      borderLeft: `4px solid transparent`,\n      paddingRight: theme.space.xs,\n      \"&$minimized\": {\n        justifyContent: \"center\",\n        paddingRight: 0,\n      },\n      \"$expandable>&\": {\n        fontWeight: 600,\n      },\n      \"$selected>&\": { ...selected },\n      // hover\n      \":not($disabled>&):not($selected>&):hover\": { ...hover },\n      \":not($disabled)$selected>&:hover\": {},\n\n      // focus\n      \":not($disabled>&):not($selected>&):focus-visible\": { ...hover },\n      \":not($disabled>&):not($selected>&).focus-visible\": { ...hover },\n\n      \"*:focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n\n      \".focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n      \"$focused>&\": {\n        ...hover,\n      },\n\n      \"&[disabled], &:active\": {\n        outline: \"none\",\n      },\n\n      \"&:focus\": {\n        outline: \"none\",\n      },\n\n      \"&:focus-visible\": {\n        ...outlineStyles,\n      },\n\n      \"&.focus-visible\": {\n        ...outlineStyles,\n      },\n\n      // cursor\n      cursor: \"pointer\",\n      \"& *\": {\n        cursor: \"pointer\",\n      },\n\n      \"$disabled>&\": {\n        cursor: \"not-allowed\",\n        \"& *\": {\n          cursor: \"not-allowed\",\n        },\n      },\n    },\n    link: {},\n    group: {\n      margin: \"8px 0 0 0\",\n      padding: 0,\n    },\n    disabled: {},\n    expandable: {\n      fontWeight: 600,\n    },\n    collapsed: {},\n    expanded: {},\n    selectable: {},\n    unselectable: {},\n    selected: {},\n    unselected: {},\n    focused: {},\n    minimized: {},\n    hide: {},\n    label: {\n      display: \"flex\",\n      flexGrow: 1,\n      maxWidth: \"100%\",\n    },\n    labelIcon: {\n      maxWidth: \"calc(100% - 32px)\",\n    },\n    labelExpandable: {\n      maxWidth: \"calc(100% - 32px)\",\n\n      \"&$labelIcon\": {\n        maxWidth: \"calc(100% - 64px)\",\n      },\n    },\n    icon: {\n      display: \"flex\",\n      \"> div:first-of-type\": {\n        marginLeft: \"var(--icon-margin-left)\",\n      },\n      \"> div:nth-of-type(2)\": {\n        width: \"14px\",\n        marginLeft: \"auto\",\n      },\n      [`&& .${avatarClasses.root}`]: {\n        fontSize: \"15px\",\n      },\n    },\n  },\n);\n"],"names":["avatarClasses"],"mappings":"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"}
+{"version":3,"file":"TreeViewItem.styles.js","sources":["../../../../src/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../../Avatar\";\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst selected = {\n  background: theme.colors.bgPageSecondary,\n  borderLeft: `4px solid ${theme.colors.text}`,\n};\n\nconst hover = {\n  background: theme.colors.bgHover,\n};\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTreeViewItem\",\n  {\n    node: {\n      listStyle: \"none\",\n      minHeight: \"32px\",\n      \"&:not(:last-child)\": {\n        marginBottom: \"8px\",\n      },\n      \"&$collapsed\": {\n        \"&>$group\": {\n          display: \"none\",\n        },\n      },\n      \"&$expanded\": {\n        \"&>$group\": {\n          display: \"block\",\n        },\n      },\n      \"&$link\": {\n        textDecoration: \"none\",\n      },\n      \"&$hide\": {\n        display: \"none\",\n      },\n    },\n    content: {\n      width: \"100%\",\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n      height: \"32px\",\n      borderLeft: `4px solid transparent`,\n      paddingRight: theme.space.xs,\n      \"&$minimized\": {\n        justifyContent: \"center\",\n        paddingRight: 0,\n      },\n      \"$expandable>&\": {\n        fontWeight: 600,\n      },\n      \"$selected>&\": { ...selected },\n      // hover\n      \":not($disabled>&):not($selected>&):hover\": { ...hover },\n      \":not($disabled)$selected>&:hover\": {},\n\n      // focus\n      \":not($disabled>&):not($selected>&):focus-visible\": { ...hover },\n      \":not($disabled>&):not($selected>&).focus-visible\": { ...hover },\n\n      \"*:focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n\n      \".focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n      \"$focused>&\": {\n        ...hover,\n      },\n\n      \"&[disabled], &:active\": {\n        outline: \"none\",\n      },\n\n      \"&:focus\": {\n        outline: \"none\",\n      },\n\n      \"&:focus-visible\": {\n        ...outlineStyles,\n      },\n\n      \"&.focus-visible\": {\n        ...outlineStyles,\n      },\n\n      // cursor\n      cursor: \"pointer\",\n      \"& *\": {\n        cursor: \"pointer\",\n      },\n\n      \"$disabled>&\": {\n        cursor: \"not-allowed\",\n        \"& *\": {\n          cursor: \"not-allowed\",\n        },\n      },\n    },\n    link: {},\n    group: {\n      margin: \"8px 0 0 0\",\n      padding: 0,\n    },\n    disabled: {},\n    expandable: {\n      fontWeight: 600,\n    },\n    collapsed: {},\n    expanded: {},\n    selectable: {},\n    unselectable: {},\n    selected: {},\n    unselected: {},\n    focused: {},\n    minimized: {},\n    hide: {},\n    label: {\n      display: \"flex\",\n      flexGrow: 1,\n      maxWidth: \"100%\",\n    },\n    labelIcon: {\n      maxWidth: \"calc(100% - 32px)\",\n    },\n    labelExpandable: {\n      maxWidth: \"calc(100% - 32px)\",\n\n      \"&$labelIcon\": {\n        maxWidth: \"calc(100% - 64px)\",\n      },\n    },\n    icon: {\n      display: \"flex\",\n      alignItems: \"center\",\n      \"> div:first-of-type\": {\n        marginLeft: \"var(--icon-margin-left)\",\n      },\n      \"> div:nth-of-type(2)\": {\n        width: \"14px\",\n        marginLeft: \"auto\",\n      },\n      [`&& .${avatarClasses.root}`]: {\n        fontSize: \"15px\",\n      },\n    },\n  },\n);\n"],"names":["avatarClasses"],"mappings":"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"}

package/dist/esm/VerticalNavigation/VerticalNavigation.styles.js

@@ -15,7 +15,7 @@ const { staticClasses, useClasses } = createClasses(
         padding: theme.space.sm
       },
       "& > :not(nav:first-of-type)": {
-        borderTop: `3px solid ${theme.colors.borderStrong}`,
+        borderTop: `3px solid ${theme.colors.borderSubtle}`,
         padding: theme.spacing("xs", "sm", "sm", "sm")
       },
       "& > :first-of-type:not(:last-child)": {
@@ -37,7 +37,7 @@ const { staticClasses, useClasses } = createClasses(
     },
     slider: {
       "& > div:first-of-type": {
-        borderBottom: `3px solid ${theme.colors.borderStrong}`
+        borderBottom: `3px solid ${theme.colors.borderSubtle}`
       }
     },
     childData: {}

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.styles.js","sources":["../../../src/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigation\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"flex-start\",\n\n      width: \"220px\",\n\n      backgroundColor: theme.colors.bgContainer,\n      boxShadow: theme.colors.shadow,\n      clipPath: \"inset(0px -12px 0px 0px)\",\n\n      \"& > :only-child\": {\n        padding: theme.space.sm,\n      },\n      \"& > :not(nav:first-of-type)\": {\n        borderTop: `3px solid ${theme.colors.borderStrong}`,\n        padding: theme.spacing(\"xs\", \"sm\", \"sm\", \"sm\"),\n      },\n\n      \"& > :first-of-type:not(:last-child)\": {\n        borderTop: \"none\",\n        padding: theme.spacing(\"sm\", \"sm\", \"xs\", \"sm\"),\n      },\n    },\n    collapsed: {\n      width: \"56px\",\n      \"&$childData\": {\n        width: \"66px\",\n      },\n      \"& > :first-of-type:not(:last-child)\": {\n        padding: theme.spacing(\"sm\", \"xs\", \"xs\", \"xs\"),\n      },\n\n      \"& > :not(nav:first-of-type)\": {\n        padding: theme.spacing(\"xs\", \"xs\", \"sm\", \"xs\"),\n      },\n    },\n\n    slider: {\n      \"& > div:first-of-type\": {\n        borderBottom: `3px solid ${theme.colors.borderStrong}`,\n      },\n    },\n\n    childData: {},\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,OAAO;AAAA,MAEP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,UAAU;AAAA,MAEV,mBAAmB;AAAA,QACjB,SAAS,MAAM,MAAM;AAAA,MACvB;AAAA,MACA,+BAA+B;AAAA,QAC7B,WAAW,aAAa,MAAM,OAAO,YAAY;AAAA,QACjD,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,uCAAuC;AAAA,QACrC,WAAW;AAAA,QACX,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAEjD;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,eAAe;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,uCAAuC;AAAA,QACrC,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,+BAA+B;AAAA,QAC7B,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAEjD;AAAA,IAEA,QAAQ;AAAA,MACN,yBAAyB;AAAA,QACvB,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,MAAA;AAAA,IAExD;AAAA,IAEA,WAAW,CAAA;AAAA,EAAC;AAEhB;"}
+{"version":3,"file":"VerticalNavigation.styles.js","sources":["../../../src/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigation\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"flex-start\",\n\n      width: \"220px\",\n\n      backgroundColor: theme.colors.bgContainer,\n      boxShadow: theme.colors.shadow,\n      clipPath: \"inset(0px -12px 0px 0px)\",\n\n      \"& > :only-child\": {\n        padding: theme.space.sm,\n      },\n      \"& > :not(nav:first-of-type)\": {\n        borderTop: `3px solid ${theme.colors.borderSubtle}`,\n        padding: theme.spacing(\"xs\", \"sm\", \"sm\", \"sm\"),\n      },\n\n      \"& > :first-of-type:not(:last-child)\": {\n        borderTop: \"none\",\n        padding: theme.spacing(\"sm\", \"sm\", \"xs\", \"sm\"),\n      },\n    },\n    collapsed: {\n      width: \"56px\",\n      \"&$childData\": {\n        width: \"66px\",\n      },\n      \"& > :first-of-type:not(:last-child)\": {\n        padding: theme.spacing(\"sm\", \"xs\", \"xs\", \"xs\"),\n      },\n\n      \"& > :not(nav:first-of-type)\": {\n        padding: theme.spacing(\"xs\", \"xs\", \"sm\", \"xs\"),\n      },\n    },\n\n    slider: {\n      \"& > div:first-of-type\": {\n        borderBottom: `3px solid ${theme.colors.borderSubtle}`,\n      },\n    },\n\n    childData: {},\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,OAAO;AAAA,MAEP,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,UAAU;AAAA,MAEV,mBAAmB;AAAA,QACjB,SAAS,MAAM,MAAM;AAAA,MACvB;AAAA,MACA,+BAA+B;AAAA,QAC7B,WAAW,aAAa,MAAM,OAAO,YAAY;AAAA,QACjD,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,uCAAuC;AAAA,QACrC,WAAW;AAAA,QACX,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAEjD;AAAA,IACA,WAAW;AAAA,MACT,OAAO;AAAA,MACP,eAAe;AAAA,QACb,OAAO;AAAA,MACT;AAAA,MACA,uCAAuC;AAAA,QACrC,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAC/C;AAAA,MAEA,+BAA+B;AAAA,QAC7B,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAEjD;AAAA,IAEA,QAAQ;AAAA,MACN,yBAAyB;AAAA,QACvB,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,MAAA;AAAA,IAExD;AAAA,IAEA,WAAW,CAAA;AAAA,EAAC;AAEhB;"}

package/dist/esm/index.js

@@ -85,7 +85,7 @@ import { HvBannerContent } from "./Banner/BannerContent/BannerContent.js";
 import { staticClasses as staticClasses27 } from "./BaseCheckBox/BaseCheckBox.styles.js";
 import { HvBaseCheckBox } from "./BaseCheckBox/BaseCheckBox.js";
 import { staticClasses as staticClasses28 } from "./BaseRadio/BaseRadio.styles.js";
-import { HvBaseRadio, getSelectorIcons } from "./BaseRadio/BaseRadio.js";
+import { HvBaseRadio } from "./BaseRadio/BaseRadio.js";
 import { staticClasses as staticClasses29 } from "./BaseSwitch/BaseSwitch.styles.js";
 import { HvBaseSwitch } from "./BaseSwitch/BaseSwitch.js";
 import { staticClasses as staticClasses30 } from "./BreadCrumb/BreadCrumb.styles.js";
@@ -508,7 +508,6 @@ export {
   getFirstAndLastFocus,
   getFocusableList,
   getPrevNextFocus,
-  getSelectorIcons,
   getVarValue,
   staticClasses62 as globalActionsClasses,
   staticClasses63 as gridClasses,

package/dist/esm/utils/Callout.js

@@ -85,7 +85,7 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
   } = useDefaultProps("HvCallout", props);
   const { classes, cx } = useClasses(classesProp, false);
   const { activeTheme } = useTheme();
-  const icon = customIcon || showIcon && iconVariant(variant, "inherit");
+  const icon = customIcon || showIcon && iconVariant(variant);
   const actionsPosition = actionsPositionProp === "auto" ? "inline" : actionsPositionProp;
   const actionsContent = /* @__PURE__ */ jsx(
     HvActionsGeneric,