@hitachivantara/uikit-react-core 5.91.3 → 5.93.0

package/dist/esm/TextArea/TextArea.js

@@ -1,20 +1,20 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { DEFAULT_ERROR_MESSAGES, validateInput, validationTypes, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { DEFAULT_ERROR_MESSAGES, validateInput, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./TextArea.styles.js";
 import { staticClasses } from "./TextArea.styles.js";
-import { validationStates, isInvalid } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvCharCounter } from "../FormElement/CharCounter/CharCounter.js";
 import { HvBaseInput } from "../BaseInput/BaseInput.js";
+import { isInvalid } from "../FormElement/utils.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
+import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
   const {
     id,
@@ -22,10 +22,11 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
     classes: classesProp,
     name,
     label,
-    description,
+    description: descriptionProp,
     placeholder,
     status,
     statusMessage,
+    infoMessage: infoMessageProp,
     validationMessages,
     maxCharQuantity,
     minCharQuantity,
@@ -34,8 +35,8 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
     rows = 1,
     defaultValue = "",
     middleCountLabel = "/",
-    countCharProps = {},
-    inputProps = {},
+    countCharProps,
+    inputProps,
     required,
     readOnly,
     disabled,
@@ -56,14 +57,16 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
   } = useDefaultProps("HvTextArea", props);
   const { classes, cx } = useClasses(classesProp);
   const elementId = useUniqueId(id);
+  const { activeTheme } = useTheme();
   const isDirty = useRef(false);
   const inputRef = useRef(null);
   const forkedRef = useForkRef(ref, inputRefProp, inputRef);
+  const [description, infoMessage] = activeTheme?.name === "pentahoPlus" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
   const [focused, setFocused] = useState(false);
   const [autoScrolling, setAutoScrolling] = useState(autoScroll);
   const [validationState, setValidationState] = useControlled(
     status,
-    validationStates.standBy
+    "standBy"
   );
   const [validationMessage, setValidationMessage] = useControlled(
     statusMessage,
@@ -73,7 +76,6 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
   const isStateInvalid = isInvalid(validationState);
   const isEmptyValue = value == null || value === "";
   const hasLabel = label != null;
-  const hasDescription = description != null;
   const hasCounter = maxCharQuantity != null && !hideCounter;
   const errorMessages = useMemo(
     () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),
@@ -85,7 +87,7 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
       required,
       minCharQuantity,
       maxCharQuantity,
-      validationTypes.none,
+      "none",
       validation
     );
     setValidationState(computeValidationState(inputValidity, isEmptyValue));
@@ -122,7 +124,7 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
   };
   const onFocusHandler = (event) => {
     setFocused(true);
-    setValidationState(validationStates.standBy);
+    setValidationState("standBy");
     onFocus?.(event, String(value));
   };
   const isScrolledDown = useCallback(() => {
@@ -161,7 +163,7 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
   }, [focused, isEmptyValue, performValidation]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && hasBuiltInValidations(
     required,
-    validationTypes.none,
+    "none",
     minCharQuantity,
     // If blockMax is true maxCharQuantity will never produce an error
     // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity
@@ -169,6 +171,8 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
     validation,
     inputProps
   ));
+  const willShowError = canShowError && isStateInvalid;
+  const canShowInfo = !!infoMessage && !willShowError;
   let errorMessageId;
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
@@ -193,35 +197,30 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
       ),
       onBlur: onContainerBlurHandler,
       children: [
-        (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-          hasLabel && /* @__PURE__ */ jsx(
-            HvLabel,
-            {
-              showGutter: true,
-              className: classes.label,
-              id: setId(id, "label"),
-              htmlFor: setId(elementId, "input"),
-              label
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsx(
-            HvInfoMessage,
-            {
-              className: classes.description,
-              id: setId(elementId, "description"),
-              children: description
-            }
-          )
-        ] }),
-        hasCounter && /* @__PURE__ */ jsx(
-          HvCharCounter,
+        /* @__PURE__ */ jsx(
+          HvLabelContainer,
           {
-            id: setId(elementId, "charCounter"),
-            className: classes.characterCounter,
-            separator: middleCountLabel,
-            currentCharQuantity: String(value).length,
-            maxCharQuantity,
-            ...countCharProps
+            label,
+            description,
+            inputId: setId(elementId, "input"),
+            labelId: setId(elementId, "label"),
+            descriptionId: setId(elementId, "description"),
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
+            },
+            children: hasCounter && /* @__PURE__ */ jsx(
+              HvCharCounter,
+              {
+                id: setId(elementId, "charCounter"),
+                className: classes.characterCounter,
+                separator: middleCountLabel,
+                currentCharQuantity: String(value).length,
+                maxCharQuantity,
+                ...countCharProps
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx(
@@ -267,7 +266,8 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
             disableBorder: true,
             children: validationMessage
           }
-        )
+        ),
+        canShowInfo && /* @__PURE__ */ jsx(HvInfoMessage, { disableGutter: true, variant: "caption1", children: infoMessage })
       ]
     }
   );

package/dist/esm/TextArea/TextArea.styles.js

@@ -7,14 +7,12 @@ const { staticClasses, useClasses } = createClasses("HvTextArea", {
   baseInput: { clear: "both", float: "left" },
   input: {},
   inputResizable: {},
-  labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   label: {},
-  description: { display: "block", float: "left" },
+  description: {},
   characterCounter: {
-    display: "block",
-    float: "right",
     textAlign: "right",
-    marginBottom: "6px"
+    marginLeft: "auto"
   },
   error: { float: "left" }
 });

package/dist/esm/TimePicker/TimePicker.js

@@ -1,28 +1,27 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, useMemo } from "react";
-import { Time as Time$1 } from "@internationalized/date";
+import { Time } from "@internationalized/date";
 import { useForkRef } from "@mui/material/utils";
 import { useTimeField } from "@react-aria/datepicker";
 import { useTimeFieldState } from "@react-stately/datepicker";
-import { Time } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { DEFAULT_LOCALE } from "../Calendar/utils.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { Placeholder } from "./Placeholder.js";
 import { useClasses } from "./TimePicker.styles.js";
 import { staticClasses } from "./TimePicker.styles.js";
 import { Unit } from "./Unit/Unit.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const toTime = (value) => {
   if (!value) return value;
   const { hours, minutes, seconds } = value;
-  return new Time$1(hours, minutes, seconds);
+  return new Time(hours, minutes, seconds);
 };
 const HvTimePicker = forwardRef(
   function HvTimePicker2(props, ref) {
@@ -117,25 +116,20 @@ const HvTimePicker = forwardRef(
         className: cx(classes.root, className),
         ...others,
         children: [
-          (label || description) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-            label && /* @__PURE__ */ jsx(
-              HvLabel,
-              {
-                showGutter: true,
-                label,
-                className: classes.label,
-                ...labelProps
-              }
-            ),
-            description && /* @__PURE__ */ jsx(
-              HvInfoMessage,
-              {
-                className: classes.description,
-                ...descriptionProps,
-                children: description
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsx(
+            HvLabelContainer,
+            {
+              label,
+              description,
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
+              },
+              labelProps,
+              descriptionProps
+            }
+          ),
           /* @__PURE__ */ jsx(
             HvBaseDropdown,
             {
@@ -165,13 +159,7 @@ const HvTimePicker = forwardRef(
                 headerOpen: classes.dropdownHeaderOpen
               },
               placement: "right",
-              adornment: /* @__PURE__ */ jsx(
-                Time,
-                {
-                  color: disabled ? "textDisabled" : void 0,
-                  className: classes.icon
-                }
-              ),
+              adornment: /* @__PURE__ */ jsx(HvIcon, { name: "Time", className: classes.icon }),
               expanded: open,
               onToggle: (evt, newOpen) => {
                 if (disableExpand) return;

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

@@ -4,10 +4,7 @@ const { useClasses, staticClasses } = createClasses("HvTimePicker", {
   root: {
     position: "relative"
   },
-  labelContainer: {
-    display: "flex",
-    alignItems: "flex-start"
-  },
+  labelContainer: {},
   label: {},
   description: {},
   placeholder: {

package/dist/esm/TimePicker/Unit/Unit.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
+import { HvIcon } from "../../icons.js";
 import { useClasses } from "./Unit.styles.js";
 import { HvButton } from "../../Button/Button.js";
 import { HvBaseInput } from "../../BaseInput/BaseInput.js";
@@ -17,7 +17,7 @@ const Unit = ({
   const { type, text } = segment;
   const placeholder = placeholderProp ?? segment.placeholder;
   return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
-    type !== "literal" && /* @__PURE__ */ jsx(DropUpXS, { onClick: onAdd }),
+    type !== "literal" && /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: true, onClick: onAdd }),
     type === "literal" && /* @__PURE__ */ jsx("div", { className: classes.separator, children: text }),
     type === "dayPeriod" && /* @__PURE__ */ jsx(HvButton, { icon: true, className: classes.periodToggle, onClick: onAdd, children: text }),
     ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsx(
@@ -45,7 +45,7 @@ const Unit = ({
         inputProps: { autoComplete: "off", type: "number" }
       }
     ),
-    type !== "literal" && /* @__PURE__ */ jsx(DropDownXS, { onClick: onSub })
+    type !== "literal" && /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", onClick: onSub })
   ] });
 };
 export {

package/dist/esm/TreeView/TreeView.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useSlotProps } from "@mui/base/utils";
-import { DropDownXS, DropRightXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
 import { fixedForwardRef } from "../types/generic.js";
 import { useTreeView } from "./internals/hooks/useTreeView.js";
 import { TreeViewProvider } from "./internals/TreeViewProvider.js";
@@ -21,8 +21,8 @@ const HvTreeView = fixedForwardRef(function HvTreeView2(props, ref) {
     selected,
     defaultSelected,
     disableSelection,
-    defaultCollapseIcon = /* @__PURE__ */ jsx(DropDownXS, {}),
-    defaultExpandIcon = /* @__PURE__ */ jsx(DropRightXS, {}),
+    defaultCollapseIcon = /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs" }),
+    defaultExpandIcon = /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", size: "xs" }),
     defaultEndIcon,
     defaultParentIcon,
     onNodeSelect,

package/dist/esm/VerticalNavigation/Actions/Action.js

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

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

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

package/dist/esm/VerticalNavigation/Header/Header.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
-import { Backwards, Menu, Forwards } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../../icons.js";
 import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
 import { useClasses } from "./Header.styles.js";
 import { staticClasses } from "./Header.styles.js";
@@ -33,8 +33,8 @@ const HvVerticalNavigationHeader = (props) => {
     [parentItem, slider]
   );
   if (!shouldShowTitle) return null;
-  const openIcon = openIconProp ?? (!useIcons ? /* @__PURE__ */ jsx(Menu, {}) : /* @__PURE__ */ jsx(Forwards, {}));
-  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsx(Backwards, {});
+  const openIcon = openIconProp ?? /* @__PURE__ */ jsx(HvIcon, { name: useIcons ? "Forwards" : "Menu" });
+  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsx(HvIcon, { name: "Backwards" });
   const handleClickBack = () => navigateToParentHandler?.();
   const { className: backButtonClassName, ...otherBackButtonProps } = backButtonProps;
   const {
@@ -56,7 +56,7 @@ const HvVerticalNavigationHeader = (props) => {
             className: cx(classes.backButton, backButtonClassName),
             "aria-label": "Back",
             ...otherBackButtonProps,
-            children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" })
+            children: /* @__PURE__ */ jsx(HvIcon, { name: "Backwards", size: "xs" })
           }
         ),
         isOpen && /* @__PURE__ */ jsx(

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { DropRightXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../../icons.js";
 import { useClasses } from "./NavigationSlider.styles.js";
 import { staticClasses } from "./NavigationSlider.styles.js";
 import { HvButton } from "../../Button/Button.js";
@@ -50,7 +50,7 @@ const HvVerticalNavigationSlider = (props) => {
               },
               className: classes.forwardButton,
               "aria-label": forwardButtonAriaLabel,
-              children: /* @__PURE__ */ jsx(DropRightXS, {})
+              children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", size: "xs" })
             }
           ) : void 0,
           children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: item.label })

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useState, useRef, useMemo, useEffect, useCallback } from "react";
-import { Forwards, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { useForkRef } from "../../hooks/useForkRef.js";
+import { HvIcon } from "../../icons.js";
 import { useDescendant, DescendantProvider } from "../../TreeView/internals/DescendantProvider.js";
 import { setId } from "../../utils/setId.js";
 import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
@@ -313,7 +313,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
                       children: payload?.label?.substring(0, 1)
                     }
                   ) : useIcons && icon,
-                  hasChildren && !isOpen ? /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsx("div", {})
+                  hasChildren && !isOpen ? /* @__PURE__ */ jsx(HvIcon, { name: "Forwards", size: "xs", compact: true }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsx("div", {})
                 ]
               }
             ),
@@ -327,7 +327,7 @@ const HvVerticalNavigationTreeViewItem = forwardRef(
                 children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: label })
               }
             ),
-            isOpen && expandable && /* @__PURE__ */ jsx(DropDownXS, { rotate: expanded })
+            isOpen && expandable && /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: expanded })
           ]
         }
       ) });

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

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

package/dist/esm/icons.js

@@ -1,4 +1,15 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useMemo } from "react";
 import styled from "@emotion/styled";
+import { useTheme } from "@hitachivantara/uikit-react-utils";
+import { getColor } from "@hitachivantara/uikit-styles";
+const svgSizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 32,
+  lg: 96,
+  xl: 112
+};
 const SvgBase = styled("svg")({
   display: "inline-block",
   fill: "currentcolor",
@@ -8,6 +19,79 @@ const SvgBase = styled("svg")({
   flexShrink: 0,
   transition: "rotate 0.2s ease"
 });
+const Svg = styled(SvgBase)(({ size, color, compact, rotate }) => ({
+  rotate: rotate ? "180deg" : void 0,
+  margin: compact ? 0 : size === "xs" ? 10 : 8,
+  color: 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 } = useTheme();
+  const iconsPathMap = useMemo(
+    () => ({ ...defaultIconPathMap, ...activeTheme?.icons }),
+    [activeTheme?.icons]
+  );
+  const isDefaultIcon = iconsPathMap[name] === defaultIconPathMap[name];
+  return (
+    // @ts-expect-error `rotate` is fine
+    /* @__PURE__ */ 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__ */ jsx("title", { children: title }) : null,
+          /* @__PURE__ */ jsx("path", { d: iconsPathMap[name] })
+        ]
+      }
+    )
+  );
+}
+const HvIcon = memo(forwardRef(HvIconInternal));
 export {
+  HvIcon,
   SvgBase
 };

package/dist/esm/index.js

@@ -188,6 +188,7 @@ import { staticClasses as staticClasses75 } from "./Login/Login.styles.js";
 import { HvLogin } from "./Login/Login.js";
 import { staticClasses as staticClasses76 } from "./MultiButton/MultiButton.styles.js";
 import { HvMultiButton } from "./MultiButton/MultiButton.js";
+import { HvNumberInput } from "./NumberInput/NumberInput.js";
 import { staticClasses as staticClasses77 } from "./OverflowTooltip/OverflowTooltip.styles.js";
 import { HvOverflowTooltip } from "./OverflowTooltip/OverflowTooltip.js";
 import { staticClasses as staticClasses78 } from "./Pagination/Pagination.styles.js";
@@ -209,6 +210,7 @@ import { HvScrollToHorizontal } from "./ScrollToHorizontal/ScrollToHorizontal.js
 import { staticClasses as staticClasses86 } from "./ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.js";
 import { staticClasses as staticClasses87 } from "./ScrollToVertical/ScrollToVertical.styles.js";
 import { HvScrollToVertical } from "./ScrollToVertical/ScrollToVertical.js";
+import { HvSearchInput } from "./SearchInput/SearchInput.js";
 import { staticClasses as staticClasses88 } from "./Section/Section.styles.js";
 import { HvSection } from "./Section/Section.js";
 import { staticClasses as staticClasses89 } from "./SimpleGrid/SimpleGrid.styles.js";
@@ -385,6 +387,7 @@ export {
   HvLoadingContainer,
   HvLogin,
   HvMultiButton,
+  HvNumberInput,
   HvOption,
   HvOptionGroup,
   HvOverflowTooltip,
@@ -399,6 +402,7 @@ export {
   HvRightControl,
   HvScrollToHorizontal,
   HvScrollToVertical,
+  HvSearchInput,
   HvSection,
   HvSelect,
   HvSelectionList,

package/dist/esm/utils/Callout.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import SnackbarContent from "@mui/material/SnackbarContent";
-import { Close } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, createClasses, useTheme } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
+import { HvIcon } from "../icons.js";
 import { iconVariant } from "./iconVariant.js";
 import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
 import { HvButton } from "../Button/Button.js";
@@ -43,7 +43,9 @@ const { useClasses } = createClasses("HvCallout", {
     overflow: "hidden",
     wordBreak: "break-word"
   },
-  messageIcon: {},
+  messageIcon: {
+    lineHeight: 0
+  },
   messageTitle: {
     display: "block",
     fontWeight: theme.fontWeights.semibold
@@ -126,7 +128,7 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
             "aria-label": "Close",
             onClick: (evt) => onClose?.(evt, "clickaway"),
             ...actionProps,
-            children: /* @__PURE__ */ jsx(Close, { size: "XS" })
+            children: /* @__PURE__ */ jsx(HvIcon, { size: "xs", name: "Close" })
           }
         ),
         showCustomActions && actionsContent

package/dist/esm/utils/iconVariant.js

@@ -1,18 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { Info, Fail, Caution, Success } from "@hitachivantara/uikit-react-icons";
+import { HvIcon } from "../icons.js";
+const variantIconMap = {
+  success: "Success",
+  warning: "Caution",
+  error: "Fail",
+  info: "Info"
+};
 const iconVariant = (variant, color) => {
-  switch (variant) {
-    case "success":
-      return /* @__PURE__ */ jsx(Success, { color });
-    case "warning":
-      return /* @__PURE__ */ jsx(Caution, { color });
-    case "error":
-      return /* @__PURE__ */ jsx(Fail, { color });
-    case "info":
-      return /* @__PURE__ */ jsx(Info, { color });
-    default:
-      return null;
-  }
+  if (variant === "default" || variant === "accent") return null;
+  return /* @__PURE__ */ jsx(HvIcon, { name: variantIconMap[variant], color });
 };
 export {
   iconVariant