@hitachivantara/uikit-react-core 5.91.3 → 5.92.0

package/dist/cjs/FormElement/Label/Label.styles.cjs

@@ -5,7 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLabel", {
   root: { fontWeight: uikitStyles.theme.fontWeights.normal, display: "inline-block" },
   labelDisabled: { color: uikitStyles.theme.colors.textDisabled },
-  childGutter: { paddingBottom: 4 }
+  childGutter: { paddingBottom: uikitStyles.theme.space.xxs }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/FormElement/Suggestions/Suggestions.cjs

@@ -18,10 +18,10 @@ const HvSuggestions = React.forwardRef(function HvSuggestions2(props, extRef) {
     className,
     classes: classesProp,
     expanded = false,
-    enablePortal = false,
+    enablePortal,
     open: openProp,
     anchorEl,
-    suggestionValues = [],
+    suggestionValues,
     onClose,
     onSuggestionSelected,
     popperProps,

package/dist/cjs/FormElement/WarningText/WarningText.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 setId = require("../../utils/setId.cjs");
 const context = require("../context.cjs");
 const WarningText_styles = require("./WarningText.styles.cjs");
@@ -28,7 +28,7 @@ const HvWarningText = (props) => {
   const visible = isVisibleProp ?? context$1.status === "invalid";
   const id = idProp ?? setId.setId(context$1.id, "error");
   const showWarning = visible && !disabled;
-  const adornment = adornmentProp || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fail, { size: "xs", className: classes.defaultIcon });
+  const adornment = adornmentProp || /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Fail", size: "xs", className: classes.defaultIcon });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {

package/dist/cjs/FormElement/WarningText/WarningText.styles.cjs

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvWarningTe
     display: "none",
     color: uikitStyles.theme.form.errorColor
   },
-  defaultIcon: { minWidth: "24px", width: "24px", height: "24px" },
+  defaultIcon: { margin: 6 },
   warningText: {
     ...uikitStyles.theme.typography.caption1,
     color: "inherit",

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -2,10 +2,10 @@
 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 useControlled = require("../hooks/useControlled.cjs");
 const useEnhancedEffect = require("../hooks/useEnhancedEffect.cjs");
+const icons = require("../icons.cjs");
 const generic = require("../types/generic.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const InlineEditor_styles = require("./InlineEditor.styles.cjs");
@@ -100,8 +100,9 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
     {
       variant: "secondaryGhost",
       endIcon: /* @__PURE__ */ jsxRuntime.jsx(
-        uikitReactIcons.Edit,
+        icons.HvIcon,
         {
+          name: "Edit",
           color: "textDisabled",
           className: cx(classes.icon, {
             [classes.iconVisible]: showIcon

package/dist/cjs/Input/Input.cjs

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const utils = require("@mui/material/utils");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const validations = require("../BaseInput/validations.cjs");
 const Suggestions = require("../FormElement/Suggestions/Suggestions.cjs");
@@ -11,10 +10,11 @@ const useControlled = require("../hooks/useControlled.cjs");
 const useIsMounted = require("../hooks/useIsMounted.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
+const icons = require("../icons.cjs");
 const generic = require("../types/generic.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
-const icons = require("./icons.cjs");
+const icons$1 = require("./icons.cjs");
 const Input_styles = require("./Input.styles.cjs");
 const Adornment = require("../FormElement/Adornment/Adornment.cjs");
 const utils$1 = require("../FormElement/utils.cjs");
@@ -27,7 +27,7 @@ const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const DEFAULT_LABELS = {
   /** The label of the clear button. */
   clearButtonLabel: "Clear the text",
-  /** The label of the reveal password button. */
+  /** The label of the reveal password button. @deprecated unused */
   revealPasswordButtonLabel: "Reveal password",
   /** The tooltip of the reveal password button when the password is hidden. */
   revealPasswordButtonClickToShowTooltip: "Click to show password.",
@@ -59,8 +59,8 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     required,
     readOnly,
     disabled,
-    enablePortal = false,
-    suggestOnFocus = false,
+    enablePortal,
+    suggestOnFocus,
     label,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -73,17 +73,17 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     "aria-errormessage": ariaErrorMessage,
     type = "text",
     placeholder,
-    autoFocus = false,
+    autoFocus,
     labels: labelsProp,
     validationMessages,
-    disableClear = false,
-    disableRevealPassword = false,
-    disableSearchButton = false,
+    disableClear,
+    disableRevealPassword,
+    disableSearchButton,
     endAdornment,
     maxCharQuantity,
     minCharQuantity,
     validation,
-    showValidationIcon = false,
+    showValidationIcon,
     suggestionListCallback,
     inputRef: inputRefProp,
     onBlur,
@@ -273,7 +273,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
         onClick: handleClear,
         "aria-label": labels?.clearButtonLabel,
         "aria-controls": setId.setId(elementId, "input"),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, {})
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Close", size: "xs" })
       }
     );
   }, [
@@ -294,7 +294,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
       {
         className: classes.adornmentButton,
         onClick: onEnter && ((evt) => onEnter?.(evt, inputRef.current?.value ?? "")),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Search, { title: labels.searchButtonLabel })
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Search", title: labels.searchButtonLabel })
       }
     );
   }, [
@@ -310,17 +310,14 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Tooltip.HvTooltip,
       {
-        disableFocusListener: true,
-        disableTouchListener: true,
         title: revealPassword ? labels?.revealPasswordButtonClickToHideTooltip : labels?.revealPasswordButtonClickToShowTooltip,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Adornment.HvAdornment,
           {
             className: classes.adornmentButton,
             onClick: () => setRevealPassword((s) => !s),
-            "aria-label": labels?.revealPasswordButtonLabel,
             "aria-controls": setId.setId(elementId, "input"),
-            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.EyeIcon, { selected: revealPassword }),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons$1.EyeIcon, { selected: revealPassword }),
             tabIndex: 0,
             ...{ selected: revealPassword }
           }
@@ -332,34 +329,27 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     revealPassword,
     labels?.revealPasswordButtonClickToHideTooltip,
     labels?.revealPasswordButtonClickToShowTooltip,
-    labels?.revealPasswordButtonLabel,
     classes.adornmentButton,
     elementId
   ]);
   const validationIcon = React.useMemo(() => {
     if (!showValidationIcon) return null;
     if (!utils$1.isValid(validationState)) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { color: "positive", className: classes.icon });
+    return /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Success", color: "positive", className: classes.icon });
   }, [showValidationIcon, validationState, classes.icon]);
-  const customIconEl = React.useMemo(
-    () => React.isValidElement(endAdornment) ? React.cloneElement(endAdornment, {
-      className: cx(endAdornment.props.className, classes.icon)
-    }) : endAdornment,
-    [classes.icon, endAdornment, cx]
-  );
   const adornments = React.useMemo(() => {
-    if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
+    if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !endAdornment)
       return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.adornmentsBox, children: [
       clearButton,
       revealPasswordButton,
       searchButton,
-      validationIcon || customIconEl
+      validationIcon || endAdornment
     ] });
   }, [
     classes.adornmentsBox,
     clearButton,
-    customIconEl,
+    endAdornment,
     revealPasswordButton,
     searchButton,
     validationIcon

package/dist/cjs/Input/Input.styles.cjs

@@ -6,28 +6,26 @@ const Suggestions_styles = require("../FormElement/Suggestions/Suggestions.style
 require("../FormElement/Suggestions/Suggestions.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
   root: { display: "block" },
-  labelContainer: { display: "flex", alignItems: "flex-start" },
+  labelContainer: {
+    display: "flex",
+    alignItems: "flex-start",
+    paddingBottom: 2
+  },
   label: {},
   description: {},
   adornmentsBox: {
     display: "flex",
     flexDirection: "row",
     height: "30px",
+    alignSelf: "center",
     alignItems: "center",
     justifyContent: "center",
-    marginRight: 1
-  },
-  icon: {
-    // TODO: review in v6 - don't assume/force size
-    ":has(svg)": {
-      width: "30px",
-      height: "30px"
-    }
+    borderRadius: "inherit",
+    flexShrink: 0
   },
+  icon: {},
   adornmentButton: {
-    ":focus-visible,:hover": {
-      backgroundColor: "transparent"
-    }
+    borderRadius: "inherit"
   },
   iconClear: { display: "none" },
   hasSuggestions: {},

package/dist/cjs/Input/icons.cjs

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const icons = require("../icons.cjs");
-const EyeIcon = ({ selected }) => /* @__PURE__ */ jsxRuntime.jsxs(icons.SvgBase, { viewBox: "0 0 16 16", style: { margin: 8 }, children: [
+const EyeIcon = ({
+  selected,
+  ...others
+}) => /* @__PURE__ */ jsxRuntime.jsxs(icons.SvgBase, { viewBox: "0 0 16 16", ...others, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 8a3 3 0 1 1-3-3 3 3 0 0 1 3 3m5 0s-3.58 6-8 6-8-6-8-6 4-6 8-6 8 6 8 6m-1.2.03a22 22 0 0 0-2-2.32C11.01 3.94 9.35 3 8 3s-3 .93-4.77 2.68a22 22 0 0 0-2.02 2.35 18 18 0 0 0 1.85 2.28C4.25 11.53 6.08 13 8 13s3.73-1.45 4.91-2.67a18 18 0 0 0 1.88-2.3z" }),
   /* @__PURE__ */ jsxRuntime.jsx(
     "rect",

package/dist/cjs/List/List.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const reactWindow = require("react-window");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
 const CounterLabel = require("../utils/CounterLabel.cjs");
 const setId = require("../utils/setId.cjs");
 const List_styles = require("./List.styles.cjs");
@@ -153,7 +153,7 @@ const HvList = (props) => {
         selected: multiSelect || selected ? selected : void 0,
         onClick: (evt) => handleSelect(evt, item),
         startAdornment,
-        endAdornment: item.showNavIcon && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { className: classes.box, iconSize: "XS" }),
+        endAdornment: item.showNavIcon && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretRight", className: classes.box, size: "xs" }),
         ...otherProps,
         children: renderSelectItem(item, itemId)
       },

package/dist/cjs/Pagination/Pagination.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
+const icons = require("../icons.cjs");
 const setId = require("../utils/setId.cjs");
 const Pagination_styles = require("./Pagination.styles.cjs");
 const Select = require("./Select.cjs");
@@ -151,7 +151,7 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
           disabled: !canPrevious,
           onClick: () => changePage(0),
           title: labels?.firstPage || labels?.paginationFirstPageTitle,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Start, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Start", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -162,7 +162,7 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
           disabled: !canPrevious,
           onClick: () => changePage(page - 1),
           title: labels?.previousPage || labels?.paginationPreviousPageTitle,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageInfo, children: [
@@ -186,7 +186,7 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
           disabled: !canNext,
           onClick: () => changePage(page + 1),
           title: labels?.nextPage || labels?.paginationNextPageTitle,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -197,7 +197,7 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
           disabled: !canNext,
           onClick: () => changePage(pages - 1),
           title: labels?.lastPage || labels?.paginationLastPageTitle,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.End, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "End", className: classes.icon, size: "xs" })
         }
       )
     ] })

package/dist/cjs/QueryBuilder/Rule/Rule.cjs

@@ -4,8 +4,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../../icons.cjs");
 const Context = require("../Context.cjs");
 const Rule_styles = require("./Rule.styles.cjs");
 const Grid = require("../../Grid/Grid.cjs");
@@ -95,7 +95,7 @@ const Rule = (props) => {
               dialog: labels.rule.delete
             }),
             disabled: readOnly,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {})
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Delete" })
           }
         ) })
       ]

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/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(
@@ -47,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;