@hitachivantara/uikit-react-core 5.91.2 → 5.92.0

package/dist/cjs/QueryBuilder/RuleGroup/RuleGroup.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const icons = require("../../icons.cjs");
 const Context = require("../Context.cjs");
 const QueryBuilder_styles = require("../QueryBuilder.styles.cjs");
 const Button = require("../../Button/Button.cjs");
@@ -39,7 +39,7 @@ const RuleGroup = ({
           dispatchAction({ type: "add-rule", id });
         },
         disabled: readOnly,
-        startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {}),
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Add" }),
         children: level === 0 && labels.query?.addRule?.label != null ? labels.query?.addRule?.label : labels.group.addRule.label
       }
     ) }),
@@ -51,7 +51,7 @@ const RuleGroup = ({
           dispatchAction({ type: "add-group", id });
         },
         disabled: readOnly,
-        startIcon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Add, {}),
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Add" }),
         children: level === 0 && labels.query?.addGroup?.label != null ? labels.query?.addGroup?.label : labels.group.addGroup.label
       }
     ) })
@@ -105,8 +105,9 @@ const RuleGroup = ({
             title: level === 0 && labels.query?.delete?.tooltip || labels.group.delete.tooltip || level === 0 && labels.query?.delete?.ariaLabel || labels.group.delete.ariaLabel,
             disabled: readOnly,
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              uikitReactIcons.Delete,
+              icons.HvIcon,
               {
+                name: "Delete",
                 className: cx({ [classes.topRemoveButtonDisabled]: readOnly })
               }
             )
@@ -190,7 +191,7 @@ const RuleGroup = ({
                 )
               ] })
             ] }),
-            icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, {})
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Info" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Radio/Radio.styles.cjs

@@ -11,8 +11,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     alignItems: "center",
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     borderRadius: uikitStyles.theme.radii.base,
-    ":hover:not($disabled)": {
+    "&:hover:not($disabled)": {
       backgroundColor: uikitStyles.theme.colors.bgHover
+    },
+    ":where(:has($label)) $radio": {
+      borderRadius: "inherit"
     }
   },
   invalidContainer: {},
@@ -20,6 +23,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     cursor: "not-allowed",
     "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" }
   },
+  focusVisible: {
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+    ...focusUtils.outlineStyles
+  },
   radio: {},
   invalidRadio: {},
   label: {
@@ -30,10 +37,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     lineHeight: "32px",
     width: "100%"
   },
-  focusVisible: {
-    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
-    ...focusUtils.outlineStyles
-  },
   checked: {},
   semantic: {}
 });

package/dist/cjs/Section/Section.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useExpandable = require("../hooks/useExpandable.cjs");
+const icons = require("../icons.cjs");
 const Section_styles = require("./Section.styles.cjs");
 const Button = require("../Button/Button.cjs");
 const HvSection = React.forwardRef(
@@ -54,7 +54,7 @@ const HvSection = React.forwardRef(
                 "aria-label": isOpen ? "Collapse" : "Expand",
                 ...buttonProps,
                 ...expandButtonProps,
-                children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: isOpen })
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: isOpen })
               }
             ),
             title,

package/dist/cjs/Table/TableHeader/TableHeader.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../../icons.cjs");
 const helpers = require("../../utils/helpers.cjs");
 const TableContext = require("../TableContext.cjs");
 const TableSectionContext = require("../TableSectionContext.cjs");
@@ -44,10 +45,6 @@ const HvTableHeader = React.forwardRef(
     const type = typeProp || tableSectionContext?.type || "body";
     const isHeadCell = type === "head";
     const scope = scopeProp ?? (isHeadCell ? "col" : "row");
-    const Sort = React.useMemo(
-      () => utils.getSortIcon(sorted && sortDirection),
-      [sorted, sortDirection]
-    );
     const Component = component || tableContext?.components?.Th || defaultComponent;
     const role = Component === defaultComponent ? null : isHeadCell ? "columnheader" : "rowheader";
     const paragraph = utils.isParagraph(children);
@@ -96,7 +93,13 @@ const HvTableHeader = React.forwardRef(
                     icon: true,
                     "aria-label": "Sort",
                     ...sortButtonProps,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Sort, { className: classes.sortIcon })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      icons.HvIcon,
+                      {
+                        name: utils.getSortIconName(sorted && sortDirection),
+                        className: classes.sortIcon
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Table/TableHeader/utils.cjs

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const getSortIcon = (dir) => {
+const getSortIconName = (dir) => {
   switch (dir) {
     case "ascending":
-      return uikitReactIcons.SortAscendingXS;
+      return "SortAsc";
     case "descending":
-      return uikitReactIcons.SortDescendingXS;
+      return "SortDesc";
     default:
-      return uikitReactIcons.SortXS;
+      return "Sort";
   }
 };
 const isParagraph = (children) => {
   return typeof children === "string" && /\s/.test(children);
 };
-exports.getSortIcon = getSortIcon;
+exports.getSortIconName = getSortIconName;
 exports.isParagraph = isParagraph;

package/dist/cjs/Table/hooks/useHvRowExpand.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useLabels = require("../../hooks/useLabels.cjs");
+const icons = require("../../icons.cjs");
 const Button = require("../../Button/Button.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const DEFAULT_LABELS = {
@@ -24,7 +24,7 @@ const CellWithExpandButton = ({
         "aria-label": row.isExpanded ? labels.collapseRowButtonAriaLabel : labels.expandRowButtonAriaLabel,
         "aria-expanded": row.isExpanded,
         onClick: rowProps?.onClick,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: row.isExpanded })
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: row.isExpanded })
       }
     ),
     cell?.value && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", component: "span", children: cell.value })

package/dist/cjs/Table/renderers/renderers.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("@emotion/react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const icons = require("../../icons.cjs");
 const setId = require("../../utils/setId.cjs");
 const DateColumnCell = require("./DateColumnCell.cjs");
 const DropdownColumnCell = require("./DropdownColumnCell.cjs");
@@ -52,7 +52,7 @@ function hvDateColumn(col, dateFormat) {
     ...col
   };
 }
-function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabel, getCanRowExpand, ExpandedIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {}), CollapsedIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {})) {
+function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabel, getCanRowExpand, ExpandedIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: true }), CollapsedIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs" })) {
   return {
     Cell: (cellProps) => {
       const { value, row } = cellProps;

package/dist/cjs/Tag/Tag.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const CheckBoxIcon = require("../BaseCheckBox/CheckBoxIcon.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
+const icons = require("../icons.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const Tag_styles = require("./Tag.styles.cjs");
 const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
@@ -57,15 +57,16 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
       [classes.disabledDeleteIcon]: disabled
     }),
     onClick: handleDeleteClick
-  }) : /* @__PURE__ */ jsxRuntime.jsx(
-    uikitReactIcons.CloseXS,
+  }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    icons.HvIcon,
     {
-      size: "XS",
+      compact: true,
+      name: "Close",
       onClick: handleDeleteClick,
       className: cx(classes.deleteIcon, classes.button, classes.tagButton),
       ...deleteButtonProps
     }
-  );
+  ) });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ButtonBase.HvButtonBase,
     {

package/dist/cjs/Tag/Tag.styles.cjs

@@ -16,6 +16,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     transition: "background-color 0.3s ease",
     "&,:hover,:focus-visible": {
       backgroundColor: "var(--tagColor)"
+    },
+    "& div:has($deleteIcon)": {
+      // ensure icon container doesn't grow into $label
+      width: "max-content",
+      lineHeight: 0
     }
   },
   hasIcon: {
@@ -65,9 +70,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     color: "inherit"
   },
   deleteIcon: {
-    width: 16,
-    height: 16,
-    "&:hover": {
+    margin: 0,
+    padding: 2,
+    ":hover": {
       backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -6,11 +6,11 @@ const date = require("@internationalized/date");
 const utils$1 = require("@mui/material/utils");
 const datepicker$1 = require("@react-aria/datepicker");
 const datepicker = require("@react-stately/datepicker");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const utils = require("../Calendar/utils.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
+const icons = require("../icons.cjs");
 const setId = require("../utils/setId.cjs");
 const Placeholder = require("./Placeholder.cjs");
 const TimePicker_styles = require("./TimePicker.styles.cjs");
@@ -166,13 +166,7 @@ const HvTimePicker = React.forwardRef(
                 headerOpen: classes.dropdownHeaderOpen
               },
               placement: "right",
-              adornment: /* @__PURE__ */ jsxRuntime.jsx(
-                uikitReactIcons.Time,
-                {
-                  color: disabled ? "textDisabled" : void 0,
-                  className: classes.icon
-                }
-              ),
+              adornment: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Time", className: classes.icon }),
               expanded: open,
               onToggle: (evt, newOpen) => {
                 if (disableExpand) return;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const icons = require("../../icons.cjs");
 const Unit_styles = require("./Unit.styles.cjs");
 const Button = require("../../Button/Button.cjs");
 const BaseInput = require("../../BaseInput/BaseInput.cjs");
@@ -19,7 +19,7 @@ const Unit = ({
   const { type, text } = segment;
   const placeholder = placeholderProp ?? segment.placeholder;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
-    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { onClick: onAdd }),
+    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: true, onClick: onAdd }),
     type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator, children: text }),
     type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, className: classes.periodToggle, onClick: onAdd, children: text }),
     ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(
@@ -31,8 +31,7 @@ const Unit = ({
         },
         classes: {
           input: classes.input,
-          root: classes.inputContainer,
-          inputRoot: classes.inputRoot
+          root: classes.inputRoot
         },
         onKeyDown: (event) => {
           if ("key" in event && event.key === "Enter") {
@@ -48,7 +47,7 @@ const Unit = ({
         inputProps: { autoComplete: "off", type: "number" }
       }
     ),
-    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { onClick: onSub })
+    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", onClick: onSub })
   ] });
 };
 exports.Unit = Unit;

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

@@ -29,8 +29,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTimePicke
     ...uikitStyles.theme.typography.title3,
     fontWeight: 600,
     textAlign: "center",
-    height: 40,
-    width: 40,
     padding: 0,
     margin: 0,
     "&::placeholder": {
@@ -44,10 +42,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTimePicke
   },
   subtractIcon: {
     marginTop: uikitStyles.theme.space.xs
-  },
-  inputContainer: {
-    minWidth: 40,
-    maxWidth: 40
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/TreeView/TreeView.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const utils = require("@mui/base/utils");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
 const generic = require("../types/generic.cjs");
 const useTreeView = require("./internals/hooks/useTreeView.cjs");
 const TreeViewProvider = require("./internals/TreeViewProvider.cjs");
@@ -22,8 +22,8 @@ const HvTreeView = generic.fixedForwardRef(function HvTreeView2(props, ref) {
     selected,
     defaultSelected,
     disableSelection,
-    defaultCollapseIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {}),
-    defaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {}),
+    defaultCollapseIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs" }),
+    defaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretRight", size: "xs" }),
     defaultEndIcon,
     defaultParentIcon,
     onNodeSelect,

package/dist/cjs/VerticalNavigation/Header/Header.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../../icons.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Header_styles = require("./Header.styles.cjs");
 const Button = require("../../Button/Button.cjs");
@@ -34,8 +34,8 @@ const HvVerticalNavigationHeader = (props) => {
     [parentItem, slider]
   );
   if (!shouldShowTitle) return null;
-  const openIcon = openIconProp ?? (!useIcons ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Menu, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}));
-  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {});
+  const openIcon = openIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: useIcons ? "Forwards" : "Menu" });
+  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards" });
   const handleClickBack = () => navigateToParentHandler?.();
   const { className: backButtonClassName, ...otherBackButtonProps } = backButtonProps;
   const {
@@ -57,7 +57,7 @@ const HvVerticalNavigationHeader = (props) => {
             className: cx(classes.backButton, backButtonClassName),
             "aria-label": "Back",
             ...otherBackButtonProps,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { iconSize: "XS" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", size: "xs" })
           }
         ),
         isOpen && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/VerticalNavigation/NavigationSlider/NavigationSlider.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../../icons.cjs");
 const NavigationSlider_styles = require("./NavigationSlider.styles.cjs");
 const Button = require("../../Button/Button.cjs");
 const ListContainer = require("../../ListContainer/ListContainer.cjs");
@@ -51,7 +51,7 @@ const HvVerticalNavigationSlider = (props) => {
               },
               className: classes.forwardButton,
               "aria-label": forwardButtonAriaLabel,
-              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretRight", size: "xs" })
             }
           ) : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label })

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useForkRef = require("../../hooks/useForkRef.cjs");
+const icons = require("../../icons.cjs");
 const DescendantProvider = require("../../TreeView/internals/DescendantProvider.cjs");
 const setId = require("../../utils/setId.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
@@ -314,7 +314,7 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                       children: payload?.label?.substring(0, 1)
                     }
                   ) : useIcons && icon,
-                  hasChildren && !isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { iconSize: "XS" }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", {})
+                  hasChildren && !isOpen ? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", size: "xs", compact: true }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", {})
                 ]
               }
             ),
@@ -328,7 +328,7 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                 children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: label })
               }
             ),
-            isOpen && expandable && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: expanded })
+            isOpen && expandable && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: expanded })
           ]
         }
       ) });

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.styles.cjs

@@ -132,7 +132,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
         marginLeft: "var(--icon-margin-left)"
       },
       "> div:nth-of-type(2)": {
-        width: "14px",
+        width: "12px",
         marginLeft: "auto"
       },
       [`&& .${Avatar_styles.staticClasses.root}`]: {

package/dist/cjs/VerticalNavigation/VerticalNavigation.styles.cjs

@@ -26,10 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       }
     },
     collapsed: {
-      width: "56px",
-      "&$childData": {
-        width: "66px"
-      },
+      width: "fit-content",
       "& > :first-of-type:not(:last-child)": {
         padding: uikitStyles.theme.spacing("sm", "xs", "xs", "xs")
       },

package/dist/cjs/icons.cjs

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styled = require("@emotion/styled");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const svgSizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 32,
+  lg: 96,
+  xl: 112
+};
+const SvgBase = styled__default.default("svg")({
+  display: "inline-block",
+  fill: "currentcolor",
+  width: "1em",
+  height: "1em",
+  fontSize: 16,
+  flexShrink: 0,
+  transition: "rotate 0.2s ease"
+});
+const Svg = styled__default.default(SvgBase)(({ size, color, compact, rotate }) => ({
+  rotate: rotate ? "180deg" : void 0,
+  margin: compact ? 0 : size === "xs" ? 10 : 8,
+  color: uikitStyles.getColor(color) ?? "inherit",
+  fontSize: svgSizeMap[size] ?? size ?? svgSizeMap.sm
+}));
+const defaultIconPathMap = {
+  // Semantic icons
+  Success: "M6.39 12 4 9.61l.7-.7 1.62 1.6 4.65-5.57.77.64zM8 15a7 7 0 0 1-4.94-2.06A7.02 7.02 0 1 1 8 15m8-7a8 8 0 1 0-8 8 8 8 0 0 0 8-8",
+  Caution: "M7.5 6h1v4h-1zm0 7h1v-1h-1zm8.5 2H0L8 1zM1.72 14h12.56L8 3.02z",
+  Fail: "M7.5 4h1v6h-1zm0 8h1v-1h-1zM16 8a8 8 0 1 0-8 8 8 8 0 0 0 8-8m-1 0a7 7 0 1 1-7-7 7 7 0 0 1 7 7",
+  Info: "M8 16a8 8 0 1 1 8-8 8 8 0 0 1-8 8M8 1a6.96 6.96 0 0 0-7 6.91V8a6.96 6.96 0 0 0 6.91 7H8a6.96 6.96 0 0 0 7-6.91V8a6.96 6.96 0 0 0-6.91-7zm-.5 11h1V6h-1zm0-7h1V4h-1z",
+  // Arrows/Navigation
+  CaretDown: "m8 11.53-6.13-6.13.93-.93L8 9.67l5.2-5.2.93.93z",
+  CaretRight: "m5.4 14.13-.93-.93L9.67 8l-5.2-5.2.93-.93L11.53 8z",
+  DotsHorizontal: "M9.1 7v2h-2V7zM2 7v2h2V7zm10 0v2h2V7z",
+  DotsVertical: "M7 6.9h2v2H7zM7 4h2V2H7zm0 10h2v-2H7z",
+  Start: "M2.99 16.05H2v-16h.99zm2.97-8 7.34 7.41.7-.7-6.64-6.71L14 1.33l-.7-.7z",
+  Backwards: "M11.3 15.5 4 8 11.3.5l.7.8L5.38 8 12 14.8z",
+  Forwards: "M4.79 15.5 4 14.8 10.62 8 4 1.3l.79-.8L12 8z",
+  End: "M13 0h1v16h-1zM2.58.58l-.7.7L8.57 8l-6.7 6.71.7.71L10 8z",
+  // Others
+  Add: "M16 8.5H8.5V16h-1V8.5H0v-1h7.5V0h1v7.5H16z",
+  Close: "m8.7 8 5.3 5.3-.7.7L8 8.7 2.7 14l-.7-.7L7.3 8 2 2.7l.7-.7L8 7.3 13.3 2l.7.7z",
+  Search: "M15.07 14.52 10.5 9.95a5.96 5.96 0 1 0-.72.7l4.58 4.58zM5.9 11A4.95 4.95 0 0 1 1 6v-.1A4.95 4.95 0 0 1 6 1h.1A4.95 4.95 0 0 1 11 6v.1A4.95 4.95 0 0 1 6 11z",
+  SortAsc: "M.08 6.07 6.5.01l6.42 6.06Zm0 0",
+  SortDesc: "M1.76 5 6 .76 10.24 5z",
+  Sort: "M10.24 7 6 11.24 1.76 7zM1.76 5 6 .76 10.24 5z",
+  // single-use icons in Widgets
+  Calendar: "M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z",
+  ColorPicker: "M15.41.57a2.05 2.05 0 0 0-2.82 0l-2.12 2.12-1.42-1.42-.7.71L14 7.64l.7-.7-1.4-1.42 2.1-2.12a2 2 0 0 0 0-2.83zm-.69 2.11L12.59 4.8l-1.42-1.42 2.12-2.12a1 1 0 0 1 1.42 1.42zM0 13v3h3l9-9-3-3zm2.59 2H1v-1.58l8-8L10.59 7z",
+  CurrentStep: "M16 8a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8",
+  Delete: "M12 1H4V0h8zm4 1v1h-2.1L13 16H3L2.1 3H0V2zm-3 1H3.1L4 15h8.1z",
+  Doc: "M9 0H2v16h12V5zm3.6 5H9V1.4zm.4 10H3V1h5v5h5z",
+  Edit: "M13.17 7.07 8.93 2.83 11.76 0 16 4.24zm-2.83-4.24 2.83 2.83 1.42-1.42-2.83-2.83zm-2.7 2.7L1 12.16V15h2.83l6.65-6.65-2.83-2.83m-.01-1.4 4.24 4.24L4.24 16H0v-4.24z",
+  Filters: "M1 2v1.6l6 6.1V14h2V9.7l6-6.1V2zM0 1h16v3l-6 6v5H6v-4.9L0 4z",
+  Fullscreen: "M16 0v4.5h-1V1.7l-4.65 4.65-.7-.7L14.29 1H11.5V0zM4.5 1V0H0v4.5h1V1.7l4.65 4.65.7-.7L1.71 1zM15 14.3l-4.65-4.65-.7.7L14.29 15H11.5v1H16v-4.5h-1zM5.65 9.64 1 14.29V11.5H0V16h4.5v-1H1.7l4.65-4.65z",
+  Menu: "M1 2v1.6l6 6.1V14h2V9.7l6-6.1V2zM0 1h16v3l-6 6v5H6v-4.9L0 4z",
+  OtherStep: "M12 8a4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4 4 4 0 0 1 4 4",
+  Time: "M8 15a7.02 7.02 0 1 0-4.94-2.06A7 7 0 0 0 8 15m0 1a8 8 0 1 1 8-8 8 8 0 0 1-8 8m2.65-4.65L7.5 8.21V3h1v4.8l2.85 2.85z",
+  User: "M9.6 8.7A4.5 4.5 0 0 0 8.04 0H8a4.5 4.5 0 0 0-4.5 4.46v.04a4.6 4.6 0 0 0 2.9 4.2A7.7 7.7 0 0 0 .5 16h1a6.5 6.5 0 0 1 6.47-6.5H8a6.5 6.5 0 0 1 6.5 6.47V16h1a7.5 7.5 0 0 0-5.9-7.3M4.5 4.5A3.54 3.54 0 0 1 8 1a3.54 3.54 0 0 1 3.5 3.5A3.54 3.54 0 0 1 8 8a3.54 3.54 0 0 1-3.5-3.5"
+};
+function HvIconInternal(props, ref) {
+  const { name, title, "aria-label": ariaLabel, children, ...others } = props;
+  const { activeTheme } = uikitReactUtils.useTheme();
+  const iconsPathMap = React.useMemo(
+    () => ({ ...defaultIconPathMap, ...activeTheme?.icons }),
+    [activeTheme?.icons]
+  );
+  const isDefaultIcon = iconsPathMap[name] === defaultIconPathMap[name];
+  return (
+    // @ts-expect-error `rotate` is fine
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Svg,
+      {
+        ref,
+        "data-name": name,
+        viewBox: !isDefaultIcon && activeTheme?.icons?.viewBox || "0 0 16 16",
+        focusable: false,
+        "aria-label": ariaLabel,
+        role: title || ariaLabel ? "img" : "none",
+        ...others,
+        children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: iconsPathMap[name] })
+        ]
+      }
+    )
+  );
+}
+const HvIcon = React.memo(React.forwardRef(HvIconInternal));
+exports.HvIcon = HvIcon;
+exports.SvgBase = SvgBase;

package/dist/cjs/utils/Callout.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const SnackbarContent = require("@mui/material/SnackbarContent");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const icons = require("../icons.cjs");
 const iconVariant = require("./iconVariant.cjs");
 const ActionsGeneric = require("../ActionsGeneric/ActionsGeneric.cjs");
 const Button = require("../Button/Button.cjs");
@@ -47,7 +47,9 @@ const { useClasses } = uikitReactUtils.createClasses("HvCallout", {
     overflow: "hidden",
     wordBreak: "break-word"
   },
-  messageIcon: {},
+  messageIcon: {
+    lineHeight: 0
+  },
   messageTitle: {
     display: "block",
     fontWeight: uikitStyles.theme.fontWeights.semibold
@@ -130,7 +132,7 @@ const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
             "aria-label": "Close",
             onClick: (evt) => onClose?.(evt, "clickaway"),
             ...actionProps,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { size: "XS" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { size: "xs", name: "Close" })
           }
         ),
         showCustomActions && actionsContent

package/dist/cjs/utils/iconVariant.cjs

@@ -1,19 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const icons = require("../icons.cjs");
+const variantIconMap = {
+  success: "Success",
+  warning: "Caution",
+  error: "Fail",
+  info: "Info"
+};
 const iconVariant = (variant, color) => {
-  switch (variant) {
-    case "success":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { color });
-    case "warning":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Caution, { color });
-    case "error":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fail, { color });
-    case "info":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { color });
-    default:
-      return null;
-  }
+  if (variant === "default" || variant === "accent") return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: variantIconMap[variant], color });
 };
 exports.iconVariant = iconVariant;