@hitachivantara/uikit-react-core 5.91.3 → 5.93.0

package/dist/esm/Input/Input.js

@@ -1,32 +1,33 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useState, useMemo, useCallback, cloneElement, isValidElement, useEffect } from "react";
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
-import { CloseXS, Search, Success } from "@hitachivantara/uikit-react-icons";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { DEFAULT_ERROR_MESSAGES, computeValidationType, validateInput, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { HvSuggestions } from "../FormElement/Suggestions/Suggestions.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useIsMounted } from "../hooks/useIsMounted.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvIcon } from "../icons.js";
 import { fixedForwardRef } from "../types/generic.js";
 import { isKey } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
 import { EyeIcon } from "./icons.js";
 import { useClasses } from "./Input.styles.js";
 import { staticClasses } from "./Input.styles.js";
+import { changeInputValue } from "./utils.js";
 import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
-import { validationStates, isInvalid, isValid } from "../FormElement/utils.js";
+import { isValid, isInvalid } from "../FormElement/utils.js";
 import { HvBaseInput } from "../BaseInput/BaseInput.js";
 import { HvTooltip } from "../Tooltip/Tooltip.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
+import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 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.",
@@ -38,15 +39,6 @@ const DEFAULT_LABELS = {
 function eventTargetIsInsideContainer(container, event) {
   return !!container?.contains(event.relatedTarget);
 }
-const changeInputValue = (input, value = "") => {
-  const event = new Event("input", { bubbles: true });
-  const setInputValue = Object.getOwnPropertyDescriptor(
-    window.HTMLInputElement.prototype,
-    "value"
-  )?.set;
-  setInputValue?.call(input, value);
-  input?.dispatchEvent(event);
-};
 const HvInput = fixedForwardRef(function HvInput2(props, ref) {
   const {
     classes: classesProp,
@@ -58,31 +50,32 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     required,
     readOnly,
     disabled,
-    enablePortal = false,
-    suggestOnFocus = false,
+    enablePortal,
+    suggestOnFocus,
     label,
+    description: descriptionProp,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    description,
     "aria-describedby": ariaDescribedBy,
     onChange,
     onEnter,
     status,
     statusMessage,
+    infoMessage: infoMessageProp,
     "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,
@@ -94,15 +87,17 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
   const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId(id);
+  const { activeTheme } = useTheme();
   const inputRef = useRef(null);
   const forkedRef = useForkRef(ref, inputRef, inputRefProp);
   const suggestionsRef = useRef(null);
+  const [description, infoMessage] = activeTheme?.name === "pentahoPlus" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
   const [focused, setFocused] = useState(false);
   const isDirty = useRef(false);
   const isEmptyValue = !inputRef.current?.value;
   const [validationState, setValidationState] = useControlled(
     status,
-    validationStates.standBy
+    "standBy"
   );
   const [validationMessage, setValidationMessage] = useControlled(
     statusMessage,
@@ -154,6 +149,8 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     inputProps
   ));
   const isStateInvalid = isInvalid(validationState);
+  const willShowError = canShowError && isStateInvalid;
+  const canShowInfo = !!infoMessage && !willShowError;
   const [revealPassword, setRevealPassword] = useState(false);
   const realType = useMemo(() => {
     if (type === "password") {
@@ -162,13 +159,15 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     if (type === "search") {
       return "search";
     }
+    if (type === "number") {
+      return "number";
+    }
     return "text";
   }, [revealPassword, type]);
   const [suggestionValues, setSuggestionValues] = useState(null);
   const canShowSuggestions = suggestionListCallback != null;
   const hasSuggestions = !!suggestionValues;
   const hasLabel = label != null;
-  const hasDescription = description != null;
   const focusInput = () => {
     inputRef.current?.focus();
   };
@@ -210,7 +209,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
   };
   const onFocusHandler = (event) => {
     setFocused(true);
-    setValidationState(validationStates.standBy);
+    setValidationState("standBy");
     onFocus?.(event, event.target.value);
   };
   const getSuggestions = (li) => {
@@ -245,12 +244,12 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
       }, 10);
     }
   };
-  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!onEnter || type !== "search" || disableSearchButton || validationState !== validationStates.standBy);
+  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!onEnter || type !== "search" || disableSearchButton || validationState !== "standBy");
   const showSearchIcon = type === "search" && !disableSearchButton;
   const showRevealPasswordButton = type === "password" && !disableRevealPassword;
   const handleClear = useCallback(
     (event) => {
-      setValidationState(validationStates.standBy);
+      setValidationState("standBy");
       changeInputValue(inputRef.current, "");
       if (canShowSuggestions && suggestOnFocus) event.stopPropagation();
       else {
@@ -272,7 +271,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
         onClick: handleClear,
         "aria-label": labels?.clearButtonLabel,
         "aria-controls": setId(elementId, "input"),
-        icon: /* @__PURE__ */ jsx(CloseXS, {})
+        icon: /* @__PURE__ */ jsx(HvIcon, { compact: true, name: "Close", size: "xs" })
       }
     );
   }, [
@@ -286,14 +285,14 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     cx
   ]);
   const searchButton = useMemo(() => {
-    const reallyShowIt = showSearchIcon && (isEmptyValue || onEnter && validationState === validationStates.standBy);
+    const reallyShowIt = showSearchIcon && (isEmptyValue || onEnter && validationState === "standBy");
     if (!reallyShowIt) return null;
     return /* @__PURE__ */ jsx(
       HvAdornment,
       {
         className: classes.adornmentButton,
         onClick: onEnter && ((evt) => onEnter?.(evt, inputRef.current?.value ?? "")),
-        icon: /* @__PURE__ */ jsx(Search, { title: labels.searchButtonLabel })
+        icon: /* @__PURE__ */ jsx(HvIcon, { compact: true, name: "Search", title: labels.searchButtonLabel })
       }
     );
   }, [
@@ -309,15 +308,12 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     return /* @__PURE__ */ jsx(
       HvTooltip,
       {
-        disableFocusListener: true,
-        disableTouchListener: true,
         title: revealPassword ? labels?.revealPasswordButtonClickToHideTooltip : labels?.revealPasswordButtonClickToShowTooltip,
         children: /* @__PURE__ */ jsx(
           HvAdornment,
           {
             className: classes.adornmentButton,
             onClick: () => setRevealPassword((s) => !s),
-            "aria-label": labels?.revealPasswordButtonLabel,
             "aria-controls": setId(elementId, "input"),
             icon: /* @__PURE__ */ jsx(EyeIcon, { selected: revealPassword }),
             tabIndex: 0,
@@ -331,34 +327,27 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
     revealPassword,
     labels?.revealPasswordButtonClickToHideTooltip,
     labels?.revealPasswordButtonClickToShowTooltip,
-    labels?.revealPasswordButtonLabel,
     classes.adornmentButton,
     elementId
   ]);
   const validationIcon = useMemo(() => {
     if (!showValidationIcon) return null;
     if (!isValid(validationState)) return null;
-    return /* @__PURE__ */ jsx(Success, { color: "positive", className: classes.icon });
+    return /* @__PURE__ */ jsx(HvIcon, { name: "Success", color: "positive", className: classes.icon });
   }, [showValidationIcon, validationState, classes.icon]);
-  const customIconEl = useMemo(
-    () => isValidElement(endAdornment) ? cloneElement(endAdornment, {
-      className: cx(endAdornment.props.className, classes.icon)
-    }) : endAdornment,
-    [classes.icon, endAdornment, cx]
-  );
   const adornments = useMemo(() => {
-    if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
+    if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !endAdornment)
       return null;
     return /* @__PURE__ */ jsxs("div", { className: classes.adornmentsBox, children: [
       clearButton,
       revealPasswordButton,
       searchButton,
-      validationIcon || customIconEl
+      validationIcon || endAdornment
     ] });
   }, [
     classes.adornmentsBox,
     clearButton,
-    customIconEl,
+    endAdornment,
     revealPasswordButton,
     searchButton,
     validationIcon
@@ -388,26 +377,21 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
       ),
       onBlur: onContainerBlurHandler,
       children: [
-        (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-          hasLabel && /* @__PURE__ */ jsx(
-            HvLabel,
-            {
-              showGutter: true,
-              id: setId(elementId, "label"),
-              className: classes.label,
-              htmlFor: setId(elementId, "input"),
-              label
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsx(
-            HvInfoMessage,
-            {
-              id: setId(elementId, "description"),
-              className: classes.description,
-              children: description
+        /* @__PURE__ */ jsx(
+          HvLabelContainer,
+          {
+            label,
+            description,
+            inputId: setId(elementId, "input"),
+            labelId: setId(elementId, "label"),
+            descriptionId: setId(elementId, "description"),
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
             }
-          )
-        ] }),
+          }
+        ),
         /* @__PURE__ */ jsx(
           HvBaseInput,
           {
@@ -488,7 +472,8 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
             className: classes.error,
             children: validationMessage
           }
-        )
+        ),
+        canShowInfo && /* @__PURE__ */ jsx(HvInfoMessage, { disableGutter: true, variant: "caption1", children: infoMessage })
       ]
     }
   );

package/dist/esm/Input/Input.styles.js

@@ -4,28 +4,22 @@ import { staticClasses as staticClasses$1 } from "../FormElement/Suggestions/Sug
 import "../FormElement/Suggestions/Suggestions.js";
 const { staticClasses, useClasses } = createClasses("HvInput", {
   root: { display: "block" },
-  labelContainer: { display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   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/esm/Input/icons.js

@@ -1,6 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { SvgBase } from "../icons.js";
-const EyeIcon = ({ selected }) => /* @__PURE__ */ jsxs(SvgBase, { viewBox: "0 0 16 16", style: { margin: 8 }, children: [
+const EyeIcon = ({
+  selected,
+  ...others
+}) => /* @__PURE__ */ jsxs(SvgBase, { viewBox: "0 0 16 16", ...others, children: [
   /* @__PURE__ */ 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__ */ jsx(
     "rect",

package/dist/esm/Input/utils.js

@@ -0,0 +1,12 @@
+const changeInputValue = (input, value = "") => {
+  const event = new Event("input", { bubbles: true });
+  const setInputValue = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    "value"
+  )?.set;
+  setInputValue?.call(input, value);
+  input?.dispatchEvent(event);
+};
+export {
+  changeInputValue
+};

package/dist/esm/List/List.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRef, useEffect, useMemo, forwardRef, isValidElement } from "react";
 import { FixedSizeList } from "react-window";
-import { DropRightXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
 import { CounterLabel } from "../utils/CounterLabel.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./List.styles.js";
@@ -152,7 +152,7 @@ const HvList = (props) => {
         selected: multiSelect || selected ? selected : void 0,
         onClick: (evt) => handleSelect(evt, item),
         startAdornment,
-        endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(DropRightXS, { className: classes.box, iconSize: "XS" }),
+        endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", className: classes.box, size: "xs" }),
         ...otherProps,
         children: renderSelectItem(item, itemId)
       },

package/dist/esm/NumberInput/NumberInput.js

@@ -0,0 +1,54 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useMemo } from "react";
+import { useForkRef } from "@mui/material";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
+import { changeInputValue } from "../Input/utils.js";
+import { useClasses } from "./NumberInput.styles.js";
+import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
+import { HvInput } from "../Input/Input.js";
+const HvNumberInput = forwardRef(function HvNumberInput2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    readOnly,
+    ...others
+  } = useDefaultProps("HvNumberInput", props);
+  const { classes, cx } = useClasses(classesProp);
+  const inputRef = useRef(null);
+  const forkedRef = useForkRef(ref, inputRef);
+  const buttons = useMemo(() => {
+    const handleIncrease = () => {
+      if (inputRef.current) {
+        inputRef.current.stepUp();
+        changeInputValue(inputRef.current, inputRef.current.value);
+      }
+    };
+    const handleDecrease = () => {
+      if (inputRef.current) {
+        inputRef.current.stepDown();
+        changeInputValue(inputRef.current, inputRef.current.value);
+      }
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(HvAdornment, { icon: /* @__PURE__ */ jsx(HvIcon, { name: "Remove" }), onClick: handleDecrease }),
+      /* @__PURE__ */ jsx(HvAdornment, { icon: /* @__PURE__ */ jsx(HvIcon, { name: "Add" }), onClick: handleIncrease })
+    ] });
+  }, []);
+  return /* @__PURE__ */ jsx(
+    HvInput,
+    {
+      ref: forkedRef,
+      type: "number",
+      className: cx(classes.root, className),
+      endAdornment: !readOnly && buttons,
+      classes,
+      readOnly,
+      disableClear: true,
+      ...others
+    }
+  );
+});
+export {
+  HvNumberInput
+};

package/dist/esm/NumberInput/NumberInput.styles.js

@@ -0,0 +1,11 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
+import "../Input/Input.js";
+const { staticClasses, useClasses } = createClasses(
+  "HvNumberInput",
+  staticClasses$1
+);
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Pagination/Pagination.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef, useState, useCallback, useEffect } from "react";
 import { useTheme, useMediaQuery } from "@mui/material";
-import { Start, Backwards, Forwards, End } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, clamp } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
+import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Pagination.styles.js";
 import { staticClasses } from "./Pagination.styles.js";
@@ -150,7 +150,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
           disabled: !canPrevious,
           onClick: () => changePage(0),
           title: labels?.firstPage || labels?.paginationFirstPageTitle,
-          children: /* @__PURE__ */ jsx(Start, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsx(HvIcon, { name: "Start", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -161,7 +161,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
           disabled: !canPrevious,
           onClick: () => changePage(page - 1),
           title: labels?.previousPage || labels?.paginationPreviousPageTitle,
-          children: /* @__PURE__ */ jsx(Backwards, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsx(HvIcon, { name: "Backwards", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: classes.pageInfo, children: [
@@ -185,7 +185,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
           disabled: !canNext,
           onClick: () => changePage(page + 1),
           title: labels?.nextPage || labels?.paginationNextPageTitle,
-          children: /* @__PURE__ */ jsx(Forwards, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsx(HvIcon, { name: "Forwards", className: classes.icon, size: "xs" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -196,7 +196,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
           disabled: !canNext,
           onClick: () => changePage(pages - 1),
           title: labels?.lastPage || labels?.paginationLastPageTitle,
-          children: /* @__PURE__ */ jsx(End, { className: classes.icon, iconSize: "XS" })
+          children: /* @__PURE__ */ jsx(HvIcon, { name: "End", className: classes.icon, size: "xs" })
         }
       )
     ] })

package/dist/esm/Pagination/Pagination.styles.js

@@ -1,9 +1,8 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
-import "../Input/Input.js";
 import { staticClasses as staticClasses$2 } from "../BaseDropdown/BaseDropdown.styles.js";
 import "../BaseDropdown/BaseDropdown.js";
+import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
 const { staticClasses, useClasses } = createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {

package/dist/esm/QueryBuilder/Rule/Rule.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { Delete } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../../icons.js";
 import { useQueryBuilderContext } from "../Context.js";
 import { useClasses } from "./Rule.styles.js";
 import { staticClasses } from "./Rule.styles.js";
@@ -92,7 +92,7 @@ const Rule = (props) => {
               dialog: labels.rule.delete
             }),
             disabled: readOnly,
-            children: /* @__PURE__ */ jsx(Delete, {})
+            children: /* @__PURE__ */ jsx(HvIcon, { name: "Delete" })
           }
         ) })
       ]

package/dist/esm/QueryBuilder/Rule/Rule.styles.js

@@ -20,7 +20,7 @@ const { useClasses, staticClasses } = createClasses(
         position: "absolute",
         zIndex: 2,
         width: "17px",
-        height: "39px",
+        height: "44px",
         borderBottom: `1px solid ${theme.colors.border}`,
         borderLeft: `1px solid ${theme.colors.border}`,
         top: 0,

package/dist/esm/QueryBuilder/RuleGroup/RuleGroup.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { Add, Delete, Info } from "@hitachivantara/uikit-react-icons";
+import { HvIcon } from "../../icons.js";
 import { useQueryBuilderContext } from "../Context.js";
 import { useClasses } from "../QueryBuilder.styles.js";
 import { HvButton } from "../../Button/Button.js";
@@ -37,7 +37,7 @@ const RuleGroup = ({
           dispatchAction({ type: "add-rule", id });
         },
         disabled: readOnly,
-        startIcon: /* @__PURE__ */ jsx(Add, {}),
+        startIcon: /* @__PURE__ */ jsx(HvIcon, { compact: true, name: "Add" }),
         children: level === 0 && labels.query?.addRule?.label != null ? labels.query?.addRule?.label : labels.group.addRule.label
       }
     ) }),
@@ -49,7 +49,7 @@ const RuleGroup = ({
           dispatchAction({ type: "add-group", id });
         },
         disabled: readOnly,
-        startIcon: /* @__PURE__ */ jsx(Add, {}),
+        startIcon: /* @__PURE__ */ jsx(HvIcon, { compact: true, name: "Add" }),
         children: level === 0 && labels.query?.addGroup?.label != null ? labels.query?.addGroup?.label : labels.group.addGroup.label
       }
     ) })
@@ -103,8 +103,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__ */ jsx(
-              Delete,
+              HvIcon,
               {
+                name: "Delete",
                 className: cx({ [classes.topRemoveButtonDisabled]: readOnly })
               }
             )
@@ -188,7 +189,7 @@ const RuleGroup = ({
                 )
               ] })
             ] }),
-            icon: /* @__PURE__ */ jsx(Info, {})
+            icon: /* @__PURE__ */ jsx(HvIcon, { name: "Info" })
           }
         ),
         /* @__PURE__ */ jsx(

package/dist/esm/RadioGroup/RadioGroup.js

@@ -1,14 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo, Children, cloneElement } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+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 "./RadioGroup.styles.js";
 import { staticClasses } from "./RadioGroup.styles.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const getValueFromSelectedChildren = (children) => {
   const childrenArray = Children.toArray(children);
@@ -113,16 +112,18 @@ const HvRadioGroup = forwardRef(
         readOnly,
         className: cx(classes.root, className),
         children: [
-          label && /* @__PURE__ */ jsx(
-            HvLabel,
+          /* @__PURE__ */ jsx(
+            HvLabelContainer,
             {
-              showGutter: true,
-              id: setId(elementId, "label"),
               label,
-              className: classes.label
+              description,
+              labelId: setId(elementId, "label"),
+              descriptionId: setId(elementId, "description"),
+              classes: {
+                label: classes.label
+              }
             }
           ),
-          description && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), children: description }),
           /* @__PURE__ */ jsx(
             "div",
             {

package/dist/esm/SearchInput/SearchInput.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
+import { useClasses } from "./SearchInput.styles.js";
+import { HvInput } from "../Input/Input.js";
+import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
+const HvSearchInput = forwardRef(function HvSearchInput2(props, ref) {
+  const { classes: classesProp, ...others } = useDefaultProps(
+    "HvSearchInput",
+    props
+  );
+  const { classes } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    HvInput,
+    {
+      ref,
+      type: "search",
+      disableSearchButton: true,
+      startAdornment: /* @__PURE__ */ jsx(HvAdornment, { icon: /* @__PURE__ */ jsx(HvIcon, { compact: true, name: "Search" }) }),
+      classes,
+      ...others
+    }
+  );
+});
+export {
+  HvSearchInput
+};

package/dist/esm/SearchInput/SearchInput.styles.js

@@ -0,0 +1,10 @@
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
+const { staticClasses, useClasses } = createClasses("HvSearchInput", {
+  root: { paddingLeft: theme.space.xs },
+  input: { marginLeft: 0 }
+});
+export {
+  staticClasses,
+  useClasses
+};