@hitachivantara/uikit-react-core 5.91.3 → 5.93.0

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/Actions/Action.cjs

@@ -24,6 +24,7 @@ const HvVerticalNavigationAction = (props) => {
       id: setId.setId(id, "button"),
       variant: "secondaryGhost",
       icon: !isOpen,
+      startIcon: isOpen && icon,
       className: cx(
         classes.action,
         {
@@ -35,7 +36,7 @@ const HvVerticalNavigationAction = (props) => {
       ...!isOpen && { "aria-label": label },
       ...others,
       children: [
-        icon,
+        !isOpen && icon,
         isOpen && label
       ]
     }

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

@@ -11,19 +11,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       height: "32px",
       color: "inherit",
       fontWeight: "inherit",
-      padding: 0,
+      padding: uikitStyles.theme.spacing(0, "xs"),
       border: "none",
       // cursor
       "& *": {
         cursor: "pointer"
       }
     },
-    noIcon: {
-      paddingLeft: uikitStyles.theme.space.xs
-    },
+    noIcon: {},
     minimized: {
       justifyContent: "center",
-      paddingRight: 0
+      padding: 0
     }
   }
 );

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/icons.cjs

@@ -1,8 +1,19 @@
 "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",
@@ -12,4 +23,77 @@ const SvgBase = styled__default.default("svg")({
   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",
+  Remove: "M0 7.5h16v1H0z"
+};
+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/index.cjs

@@ -190,6 +190,7 @@ const Login_styles = require("./Login/Login.styles.cjs");
 const Login = require("./Login/Login.cjs");
 const MultiButton_styles = require("./MultiButton/MultiButton.styles.cjs");
 const MultiButton = require("./MultiButton/MultiButton.cjs");
+const NumberInput = require("./NumberInput/NumberInput.cjs");
 const OverflowTooltip_styles = require("./OverflowTooltip/OverflowTooltip.styles.cjs");
 const OverflowTooltip = require("./OverflowTooltip/OverflowTooltip.cjs");
 const Pagination_styles = require("./Pagination/Pagination.styles.cjs");
@@ -211,6 +212,7 @@ const ScrollToHorizontal = require("./ScrollToHorizontal/ScrollToHorizontal.cjs"
 const VerticalScrollListItem_styles = require("./ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs");
 const ScrollToVertical_styles = require("./ScrollToVertical/ScrollToVertical.styles.cjs");
 const ScrollToVertical = require("./ScrollToVertical/ScrollToVertical.cjs");
+const SearchInput = require("./SearchInput/SearchInput.cjs");
 const Section_styles = require("./Section/Section.styles.cjs");
 const Section = require("./Section/Section.cjs");
 const SimpleGrid_styles = require("./SimpleGrid/SimpleGrid.styles.cjs");
@@ -540,6 +542,7 @@ exports.loginClasses = Login_styles.staticClasses;
 exports.HvLogin = Login.HvLogin;
 exports.multiButtonClasses = MultiButton_styles.staticClasses;
 exports.HvMultiButton = MultiButton.HvMultiButton;
+exports.HvNumberInput = NumberInput.HvNumberInput;
 exports.overflowTooltipClasses = OverflowTooltip_styles.staticClasses;
 exports.HvOverflowTooltip = OverflowTooltip.HvOverflowTooltip;
 exports.paginationClasses = Pagination_styles.staticClasses;
@@ -564,6 +567,7 @@ exports.HvScrollToHorizontal = ScrollToHorizontal.HvScrollToHorizontal;
 exports.verticalScrollListItemClasses = VerticalScrollListItem_styles.staticClasses;
 exports.scrollToVerticalClasses = ScrollToVertical_styles.staticClasses;
 exports.HvScrollToVertical = ScrollToVertical.HvScrollToVertical;
+exports.HvSearchInput = SearchInput.HvSearchInput;
 exports.sectionClasses = Section_styles.staticClasses;
 exports.HvSection = Section.HvSection;
 exports.simpleGridClasses = SimpleGrid_styles.staticClasses;

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;

package/dist/esm/Accordion/Accordion.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from "react";
-import { DropUpXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useExpandable } from "../hooks/useExpandable.js";
+import { HvIcon } from "../icons.js";
 import { useClasses } from "./Accordion.styles.js";
 import { staticClasses } from "./Accordion.styles.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -55,7 +55,7 @@ const HvAccordion = forwardRef(function HvAccordion2(props, ref) {
         onClick: handleClick,
         variant: labelVariant,
         children: [
-          /* @__PURE__ */ jsx(DropUpXS, { rotate: !isOpen }),
+          /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", rotate: isOpen, size: "xs" }),
           label
         ]
       }

package/dist/esm/ActionsGeneric/ActionsGeneric.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, isValidElement } from "react";
-import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./ActionsGeneric.styles.js";
 import { staticClasses } from "./ActionsGeneric.styles.js";
@@ -77,7 +77,7 @@ const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
             icon: classes.dropDownMenuButton,
             iconSelected: classes.dropDownMenuButtonSelected
           },
-          icon: /* @__PURE__ */ jsx(MoreOptionsVertical, { color: iconColor }),
+          icon: /* @__PURE__ */ jsx(HvIcon, { name: "DotsVertical", color: iconColor }),
           placement: "left",
           onClick: (event, action) => {
             handleCallback(event, idProp || "", action);

package/dist/esm/AppSwitcher/Action/Action.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { Info } from "@hitachivantara/uikit-react-icons";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
+import { HvIcon } from "../../icons.js";
 import { useClasses } from "./Action.styles.js";
 import { staticClasses } from "./Action.styles.js";
 import { HvAvatar } from "../../Avatar/Avatar.js";
@@ -97,7 +97,15 @@ const HvAppSwitcherAction = ({
                 }
               }
             ),
-            description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx(Info, { className: classes.iconInfo, id: descriptionElementId }) })
+            description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx(
+              HvIcon,
+              {
+                name: "Info",
+                compact: true,
+                className: classes.iconInfo,
+                id: descriptionElementId
+              }
+            ) })
           ]
         }
       )

package/dist/esm/Avatar/Avatar.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import MuiAvatar from "@mui/material/Avatar";
-import { User } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
 import { useImageLoaded } from "../hooks/useImageLoaded.js";
+import { HvIcon } from "../icons.js";
 import { useClasses } from "./Avatar.styles.js";
 import { staticClasses } from "./Avatar.styles.js";
 const decreaseSizeMap = {
@@ -61,8 +61,9 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     [children] = alt;
   } else {
     children = /* @__PURE__ */ jsx(
-      User,
+      HvIcon,
       {
+        name: "User",
         color,
         size: decreaseSizeMap[size],
         className: classes.fallback

package/dist/esm/Badge/Badge.styles.js

@@ -1,7 +1,19 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvBadge", {
-  root: { position: "relative", "&>*": { float: "left" } },
+  root: {
+    position: "relative",
+    "&>*": { float: "left" },
+    ":has($badgeIcon)": {
+      width: "fit-content",
+      height: "fit-content",
+      "&>div:first-child": {
+        minWidth: 32,
+        minHeight: 32,
+        "--icsize": "100%"
+      }
+    }
+  },
   /** class applied to the badge container when it has content */
   badgeContainer: {},
   /** class applied to the badge */

package/dist/esm/Banner/BannerContent/BannerContent.styles.js

@@ -6,7 +6,7 @@ const { useClasses, staticClasses } = createClasses("HvBannerContent", {
     width: "100%",
     position: "relative",
     gap: theme.space.xs,
-    borderRadius: theme.radii.none
+    borderRadius: 0
   },
   success: {},
   warning: {},

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -3,10 +3,10 @@ import { forwardRef, useState, useCallback, useMemo, isValidElement, cloneElemen
 import { usePopper } from "react-popper";
 import { useForkRef } from "@mui/material/utils";
 import { detectOverflow } from "@popperjs/core";
-import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvIcon } from "../icons.js";
 import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
 import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
@@ -90,7 +90,6 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
     },
     [isOpen, disabled, setIsOpen, onToggle, referenceElement]
   );
-  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
   const defaultHeaderElement = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -120,10 +119,11 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
           }
         ),
         /* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(
-          ExpanderComponent,
+          HvIcon,
           {
-            iconSize: "XS",
-            color: disabled ? "textDisabled" : void 0,
+            name: "CaretDown",
+            size: "xs",
+            rotate: isOpen,
             className: classes.arrow
           }
         ) })
@@ -188,6 +188,7 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
         classes,
         containerId,
         onClickAway: handleOutside,
+        disablePortal,
         onContainerKeyDown: handleContainerKeyDown,
         children
       }

package/dist/esm/BaseInput/BaseInput.styles.js

@@ -35,7 +35,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     fontFamily: theme.fontFamily.body,
     alignItems: "stretch",
     ...theme.typography.body,
-    ":hover:not($disabled,$invalid,$readOnly)": {
+    ":hover:not($disabled,$readOnly)": {
       borderColor: theme.colors.primary
     },
     ":focus-within:not($disabled)": {

package/dist/esm/BaseInput/validations.js

@@ -1,4 +1,3 @@
-import { validationStates } from "../FormElement/utils.js";
 const isNumeric = (num) => (
   // to prevent Number( <spaces> ) = 0
   num.trim().length > 0 && !Number.isNaN(Number(num))
@@ -7,27 +6,22 @@ const isEmail = (email) => {
   const regexp = /^[^\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;
   return regexp.test(email);
 };
-const validationTypes = Object.freeze({
-  none: "none",
-  number: "number",
-  email: "email"
-});
 const computeValidationType = (type) => {
   switch (type) {
     case "number":
-      return validationTypes.number;
+      return "number";
     case "email":
-      return validationTypes.email;
+      return "email";
     default:
-      return validationTypes.none;
+      return "none";
   }
 };
-const hasBuiltInValidations = (required, validationType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || validationType !== validationTypes.none || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type != null && inputProps?.type !== "text" && inputProps?.type !== "password" || inputProps?.pattern != null;
+const hasBuiltInValidations = (required, validationType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || validationType !== "none" || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type != null && inputProps?.type !== "text" && inputProps?.type !== "password" || inputProps?.pattern != null;
 const computeValidationState = (inputValidity, isEmptyValue) => {
   if (inputValidity.valid && isEmptyValue) {
-    return validationStates.standBy;
+    return "standBy";
   }
-  return inputValidity.valid ? validationStates.valid : validationStates.invalid;
+  return inputValidity.valid ? "valid" : "invalid";
 };
 const computeValidationMessage = (inputValidity, errorMessages) => {
   if (inputValidity.valid) {
@@ -77,13 +71,13 @@ const validateInput = (input, required, minCharQuantity, maxCharQuantity, valida
       inputValidity.valid = false;
     }
     switch (validationType) {
-      case validationTypes.number:
+      case "number":
         if (!isNumeric(value)) {
           inputValidity.typeMismatch = true;
           inputValidity.valid = false;
         }
         break;
-      case validationTypes.email:
+      case "email":
         if (!isEmail(value)) {
           inputValidity.typeMismatch = true;
           inputValidity.valid = false;
@@ -110,6 +104,5 @@ export {
   computeValidationState,
   computeValidationType,
   hasBuiltInValidations,
-  validateInput,
-  validationTypes
+  validateInput
 };

package/dist/esm/BaseSwitch/BaseSwitch.styles.js

@@ -89,7 +89,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
   },
   readOnly: {},
   focusVisible: {
-    borderRadius: "8px",
+    borderRadius: theme.radii.round,
     ...outlineStyles
   }
 });

package/dist/esm/BreadCrumb/PathElement/PathElement.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { DropRightXS } from "@hitachivantara/uikit-react-icons";
+import { HvIcon } from "../../icons.js";
 import { useClasses } from "./PathElement.styles.js";
 import { staticClasses } from "./PathElement.styles.js";
 const HvPathElement = ({
@@ -11,8 +11,10 @@ const HvPathElement = ({
   return /* @__PURE__ */ jsxs("li", { className: classes.centerContainer, children: [
     children,
     !last && /* @__PURE__ */ jsx(
-      DropRightXS,
+      HvIcon,
       {
+        name: "CaretRight",
+        size: "xs",
         className: classes.separatorContainer,
         color: "textDisabled"
       }

package/dist/esm/BreadCrumb/utils.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { MoreOptionsHorizontal } from "@hitachivantara/uikit-react-icons";
+import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
 const removeExtension = (label) => label.includes(".") ? label.substring(0, label.lastIndexOf(".")) : label;
@@ -17,7 +17,7 @@ const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps)
       HvDropDownMenu,
       {
         id: setId(id, "submenu"),
-        icon: /* @__PURE__ */ jsx(MoreOptionsHorizontal, { iconSize: "S", color: "text" }),
+        icon: /* @__PURE__ */ jsx(HvIcon, { name: "DotsHorizontal" }),
         dataList: subMenuList,
         ...dropDownMenuProps,
         onClick: onClick != null ? handleClick : void 0