@hitachivantara/uikit-react-core 5.92.0 → 5.93.0

package/dist/cjs/FilterGroup/FilterGroup.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 LabelContainer = require("../FormElement/LabelContainer.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
@@ -11,8 +12,6 @@ const FilterGroup_styles = require("./FilterGroup.styles.cjs");
 const FilterGroupContext = require("./FilterGroupContext.cjs");
 const FilterContent = require("./FilterContent/FilterContent.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
-const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const DEFAULT_LABELS = {
   /** Apply button label. */
@@ -64,8 +63,6 @@ const HvFilterGroup = React.forwardRef(
     const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
     const elementId = useUniqueId.useUniqueId(id);
     const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
-    const hasLabel = label != null;
-    const hasDescription = description != null;
     const canShowError = status !== void 0 || required;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       FormElement.HvFormElement,
@@ -79,26 +76,21 @@ const HvFilterGroup = React.forwardRef(
         className: cx(classes.root, className),
         ...others,
         children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
-              Label.HvLabel,
-              {
-                showGutter: true,
-                id: setId.setId(elementId, "label"),
-                htmlFor: setId.setId(elementId, "input"),
-                label,
-                className: classes.label
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsxRuntime.jsx(
-              InfoMessage.HvInfoMessage,
-              {
-                id: setId.setId(elementId, "description"),
-                className: classes.description,
-                children: description
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelContainer.HvLabelContainer,
+            {
+              label,
+              description,
+              inputId: setId.setId(elementId, "input"),
+              labelId: setId.setId(elementId, "label"),
+              descriptionId: setId.setId(elementId, "description"),
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
               }
-            )
-          ] }),
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs(
             FilterGroupContext.HvFilterGroupProvider,
             {

package/dist/cjs/FilterGroup/FilterGroup.styles.cjs

@@ -4,7 +4,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFilterGroup", {
   root: {},
   label: {},
-  labelContainer: { display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   description: {},
   error: {}
 });

package/dist/cjs/FormElement/InfoMessage/InfoMessage.cjs

@@ -14,7 +14,7 @@ const HvInfoMessage = (props) => {
     className,
     children,
     disabled: disabledProp,
-    disableGutter = false,
+    disableGutter,
     ...others
   } = uikitReactUtils.useDefaultProps("HvInfoMessage", props);
   const { classes, cx } = InfoMessage_styles.useClasses(classesProp);

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

@@ -26,7 +26,10 @@ const HvLabel = (props) => {
   const disabled = disabledProp ?? context$1.disabled;
   const required = requiredProp ?? context$1.required;
   const id = idProp ?? setId.setId(context$1.id, "label");
-  const forId = htmlForProp || utils.findDescriptors(children)?.input?.[0]?.id;
+  const forId = React.useMemo(
+    () => htmlForProp || utils.findDescriptors(children)?.input?.[0]?.id,
+    [children, htmlForProp]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       Typography.HvTypography,

package/dist/cjs/FormElement/LabelContainer.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const InfoMessage = require("./InfoMessage/InfoMessage.cjs");
+const Label = require("./Label/Label.cjs");
+const { useClasses } = uikitReactUtils.createClasses("HvLabelContainer", {
+  root: {
+    display: "flex",
+    alignItems: "center",
+    gap: uikitStyles.theme.space.xs,
+    height: 24,
+    marginBottom: uikitStyles.theme.space.xxs
+  },
+  label: {},
+  description: {}
+});
+const HvLabelContainer = (props) => {
+  const {
+    label,
+    description,
+    inputId,
+    labelId,
+    descriptionId,
+    classes: classesProp,
+    labelProps,
+    descriptionProps,
+    children,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvLabelContainer", props);
+  const { classes } = useClasses(classesProp, false);
+  if (label == null && description == null && children == null) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, ...others, children: [
+    label != null && /* @__PURE__ */ jsxRuntime.jsx(
+      Label.HvLabel,
+      {
+        id: labelId,
+        className: classes.label,
+        htmlFor: inputId,
+        label,
+        ...labelProps
+      }
+    ),
+    description != null && /* @__PURE__ */ jsxRuntime.jsx(
+      InfoMessage.HvInfoMessage,
+      {
+        disableGutter: true,
+        id: descriptionId,
+        className: classes.description,
+        ...descriptionProps,
+        children: description
+      }
+    ),
+    children
+  ] });
+};
+exports.HvLabelContainer = HvLabelContainer;

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

@@ -16,10 +16,10 @@ const HvWarningText = (props) => {
     className,
     id: idProp,
     disabled: disabledProp,
-    disableGutter = false,
-    disableBorder = false,
-    disableAdornment = false,
-    hideText = false,
+    disableGutter,
+    disableBorder,
+    disableAdornment,
+    hideText,
     ...others
   } = uikitReactUtils.useDefaultProps("HvWarningText", props);
   const { classes, cx } = WarningText_styles.useClasses(classesProp);

package/dist/cjs/FormElement/utils.cjs

@@ -54,13 +54,8 @@ const buildAriaPropsFromContext = (props, context, isInvalid2, inputId) => {
   }
   return arias;
 };
-const validationStates = Object.freeze({
-  standBy: "standBy",
-  valid: "valid",
-  invalid: "invalid"
-});
-const isValid = (state) => state === validationStates.valid;
-const isInvalid = (state) => state === validationStates.invalid;
+const isValid = (state) => state === "valid";
+const isInvalid = (state) => state === "invalid";
 exports.buildAriaPropsFromContext = buildAriaPropsFromContext;
 exports.buildFormElementPropsFromContext = buildFormElementPropsFromContext;
 exports.findDescriptors = findDescriptors;
@@ -68,4 +63,3 @@ exports.getIdReferenceFor = getIdReferenceFor;
 exports.getIdReferenceListFor = getIdReferenceListFor;
 exports.isInvalid = isInvalid;
 exports.isValid = isValid;
-exports.validationStates = validationStates;

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -102,6 +102,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       endIcon: /* @__PURE__ */ jsxRuntime.jsx(
         icons.HvIcon,
         {
+          compact: true,
           name: "Edit",
           color: "textDisabled",
           className: cx(classes.icon, {

package/dist/cjs/InlineEditor/InlineEditor.styles.cjs

@@ -47,8 +47,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInlineEdi
   icon: {
     cursor: "pointer",
     visibility: "hidden",
-    alignSelf: "center",
-    height: 16
+    alignSelf: "center"
   },
   iconVisible: {
     visibility: "visible"

package/dist/cjs/Input/Input.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const utils = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const validations = require("../BaseInput/validations.cjs");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
 const Suggestions = require("../FormElement/Suggestions/Suggestions.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useIsMounted = require("../hooks/useIsMounted.cjs");
@@ -16,14 +17,14 @@ const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
 const icons$1 = require("./icons.cjs");
 const Input_styles = require("./Input.styles.cjs");
+const utils$1 = require("./utils.cjs");
 const Adornment = require("../FormElement/Adornment/Adornment.cjs");
-const utils$1 = require("../FormElement/utils.cjs");
+const utils$2 = require("../FormElement/utils.cjs");
 const BaseInput = require("../BaseInput/BaseInput.cjs");
 const Tooltip = require("../Tooltip/Tooltip.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
-const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
+const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const DEFAULT_LABELS = {
   /** The label of the clear button. */
   clearButtonLabel: "Clear the text",
@@ -39,15 +40,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 = generic.fixedForwardRef(function HvInput2(props, ref) {
   const {
     classes: classesProp,
@@ -62,14 +54,15 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     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,
@@ -95,15 +88,17 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   const { classes, cx } = Input_styles.useClasses(classesProp);
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId.useUniqueId(id);
+  const { activeTheme } = uikitReactUtils.useTheme();
   const inputRef = React.useRef(null);
   const forkedRef = utils.useForkRef(ref, inputRef, inputRefProp);
   const suggestionsRef = React.useRef(null);
+  const [description, infoMessage] = activeTheme?.name === "pentahoPlus" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
   const [focused, setFocused] = React.useState(false);
   const isDirty = React.useRef(false);
   const isEmptyValue = !inputRef.current?.value;
   const [validationState, setValidationState] = useControlled.useControlled(
     status,
-    utils$1.validationStates.standBy
+    "standBy"
   );
   const [validationMessage, setValidationMessage] = useControlled.useControlled(
     statusMessage,
@@ -154,7 +149,9 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     validation,
     inputProps
   ));
-  const isStateInvalid = utils$1.isInvalid(validationState);
+  const isStateInvalid = utils$2.isInvalid(validationState);
+  const willShowError = canShowError && isStateInvalid;
+  const canShowInfo = !!infoMessage && !willShowError;
   const [revealPassword, setRevealPassword] = React.useState(false);
   const realType = React.useMemo(() => {
     if (type === "password") {
@@ -163,13 +160,15 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     if (type === "search") {
       return "search";
     }
+    if (type === "number") {
+      return "number";
+    }
     return "text";
   }, [revealPassword, type]);
   const [suggestionValues, setSuggestionValues] = React.useState(null);
   const canShowSuggestions = suggestionListCallback != null;
   const hasSuggestions = !!suggestionValues;
   const hasLabel = label != null;
-  const hasDescription = description != null;
   const focusInput = () => {
     inputRef.current?.focus();
   };
@@ -189,7 +188,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   };
   const suggestionSelectedHandler = (event, item) => {
     const newValue = item.value || item.label;
-    changeInputValue(inputRef.current, newValue);
+    utils$1.changeInputValue(inputRef.current, newValue);
     focusInput();
     suggestionClearHandler();
     if (type === "search") {
@@ -211,7 +210,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   };
   const onFocusHandler = (event) => {
     setFocused(true);
-    setValidationState(utils$1.validationStates.standBy);
+    setValidationState("standBy");
     onFocus?.(event, event.target.value);
   };
   const getSuggestions = (li) => {
@@ -246,13 +245,13 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
       }, 10);
     }
   };
-  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!onEnter || type !== "search" || disableSearchButton || validationState !== utils$1.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 = React.useCallback(
     (event) => {
-      setValidationState(utils$1.validationStates.standBy);
-      changeInputValue(inputRef.current, "");
+      setValidationState("standBy");
+      utils$1.changeInputValue(inputRef.current, "");
       if (canShowSuggestions && suggestOnFocus) event.stopPropagation();
       else {
         setTimeout(focusInput);
@@ -287,7 +286,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     cx
   ]);
   const searchButton = React.useMemo(() => {
-    const reallyShowIt = showSearchIcon && (isEmptyValue || onEnter && validationState === utils$1.validationStates.standBy);
+    const reallyShowIt = showSearchIcon && (isEmptyValue || onEnter && validationState === "standBy");
     if (!reallyShowIt) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Adornment.HvAdornment,
@@ -334,7 +333,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   ]);
   const validationIcon = React.useMemo(() => {
     if (!showValidationIcon) return null;
-    if (!utils$1.isValid(validationState)) return null;
+    if (!utils$2.isValid(validationState)) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Success", color: "positive", className: classes.icon });
   }, [showValidationIcon, validationState, classes.icon]);
   const adornments = React.useMemo(() => {
@@ -379,26 +378,21 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
       ),
       onBlur: onContainerBlurHandler,
       children: [
-        (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-          hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
-            Label.HvLabel,
-            {
-              showGutter: true,
-              id: setId.setId(elementId, "label"),
-              className: classes.label,
-              htmlFor: setId.setId(elementId, "input"),
-              label
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsxRuntime.jsx(
-            InfoMessage.HvInfoMessage,
-            {
-              id: setId.setId(elementId, "description"),
-              className: classes.description,
-              children: description
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LabelContainer.HvLabelContainer,
+          {
+            label,
+            description,
+            inputId: setId.setId(elementId, "input"),
+            labelId: setId.setId(elementId, "label"),
+            descriptionId: setId.setId(elementId, "description"),
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
             }
-          )
-        ] }),
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           BaseInput.HvBaseInput,
           {
@@ -479,7 +473,8 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
             className: classes.error,
             children: validationMessage
           }
-        )
+        ),
+        canShowInfo && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { disableGutter: true, variant: "caption1", children: infoMessage })
       ]
     }
   );

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

@@ -6,11 +6,7 @@ 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",
-    paddingBottom: 2
-  },
+  labelContainer: {},
   label: {},
   description: {},
   adornmentsBox: {

package/dist/cjs/Input/utils.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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);
+};
+exports.changeInputValue = changeInputValue;

package/dist/cjs/NumberInput/NumberInput.cjs

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

package/dist/cjs/NumberInput/NumberInput.styles.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Input_styles = require("../Input/Input.styles.cjs");
+require("../Input/Input.cjs");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses(
+  "HvNumberInput",
+  Input_styles.staticClasses
+);
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const Input_styles = require("../Input/Input.styles.cjs");
-require("../Input/Input.cjs");
 const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
 require("../BaseDropdown/BaseDropdown.cjs");
+const Input_styles = require("../Input/Input.styles.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {

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

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

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

@@ -39,7 +39,7 @@ const RuleGroup = ({
           dispatchAction({ type: "add-rule", id });
         },
         disabled: readOnly,
-        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Add" }),
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, 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(icons.HvIcon, { name: "Add" }),
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Add" }),
         children: level === 0 && labels.query?.addGroup?.label != null ? labels.query?.addGroup?.label : labels.group.addGroup.label
       }
     ) })

package/dist/cjs/RadioGroup/RadioGroup.cjs

@@ -3,13 +3,12 @@ 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 LabelContainer = require("../FormElement/LabelContainer.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
 const RadioGroup_styles = require("./RadioGroup.styles.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
-const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const getValueFromSelectedChildren = (children) => {
   const childrenArray = React.Children.toArray(children);
@@ -114,16 +113,18 @@ const HvRadioGroup = React.forwardRef(
         readOnly,
         className: cx(classes.root, className),
         children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx(
-            Label.HvLabel,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelContainer.HvLabelContainer,
             {
-              showGutter: true,
-              id: setId.setId(elementId, "label"),
               label,
-              className: classes.label
+              description,
+              labelId: setId.setId(elementId, "label"),
+              descriptionId: setId.setId(elementId, "description"),
+              classes: {
+                label: classes.label
+              }
             }
           ),
-          description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), children: description }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {

package/dist/cjs/SearchInput/SearchInput.cjs

@@ -0,0 +1,28 @@
+"use strict";
+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 SearchInput_styles = require("./SearchInput.styles.cjs");
+const Input = require("../Input/Input.cjs");
+const Adornment = require("../FormElement/Adornment/Adornment.cjs");
+const HvSearchInput = React.forwardRef(function HvSearchInput2(props, ref) {
+  const { classes: classesProp, ...others } = uikitReactUtils.useDefaultProps(
+    "HvSearchInput",
+    props
+  );
+  const { classes } = SearchInput_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input.HvInput,
+    {
+      ref,
+      type: "search",
+      disableSearchButton: true,
+      startAdornment: /* @__PURE__ */ jsxRuntime.jsx(Adornment.HvAdornment, { icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Search" }) }),
+      classes,
+      ...others
+    }
+  );
+});
+exports.HvSearchInput = HvSearchInput;

package/dist/cjs/SearchInput/SearchInput.styles.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSearchInput", {
+  root: { paddingLeft: uikitStyles.theme.space.xs },
+  input: { marginLeft: 0 }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;