@hitachivantara/uikit-react-core 5.91.3 → 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/Adornment/Adornment.styles.cjs

@@ -3,8 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAdornment", {
   root: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     width: 32,
-    height: 30
+    height: 30,
+    flexShrink: 0
   },
   /** @deprecated use `classes.root` */
   icon: {},

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/InfoMessage/InfoMessage.styles.cjs

@@ -5,7 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInfoMessage", {
   root: { color: uikitStyles.theme.colors.textSubtle, display: "inline-block" },
   infoDisabled: { color: uikitStyles.theme.colors.textDisabled },
-  gutter: { padding: `0 0 6px ${uikitStyles.theme.space.xs}` }
+  gutter: { padding: uikitStyles.theme.spacing(0, 0, "xxs", "xs") }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

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/Label/Label.styles.cjs

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

package/dist/cjs/FormElement/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/Suggestions/Suggestions.cjs

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

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../../icons.cjs");
 const setId = require("../../utils/setId.cjs");
 const context = require("../context.cjs");
 const WarningText_styles = require("./WarningText.styles.cjs");
@@ -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);
@@ -28,7 +28,7 @@ const HvWarningText = (props) => {
   const visible = isVisibleProp ?? context$1.status === "invalid";
   const id = idProp ?? setId.setId(context$1.id, "error");
   const showWarning = visible && !disabled;
-  const adornment = adornmentProp || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fail, { size: "xs", className: classes.defaultIcon });
+  const adornment = adornmentProp || /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Fail", size: "xs", className: classes.defaultIcon });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {

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

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

package/dist/cjs/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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
 const useEnhancedEffect = require("../hooks/useEnhancedEffect.cjs");
+const icons = require("../icons.cjs");
 const generic = require("../types/generic.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const InlineEditor_styles = require("./InlineEditor.styles.cjs");
@@ -100,8 +100,10 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
     {
       variant: "secondaryGhost",
       endIcon: /* @__PURE__ */ jsxRuntime.jsx(
-        uikitReactIcons.Edit,
+        icons.HvIcon,
         {
+          compact: true,
+          name: "Edit",
           color: "textDisabled",
           className: cx(classes.icon, {
             [classes.iconVisible]: showIcon

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

@@ -3,31 +3,32 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const utils = require("@mui/material/utils");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const validations = require("../BaseInput/validations.cjs");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
 const Suggestions = require("../FormElement/Suggestions/Suggestions.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useIsMounted = require("../hooks/useIsMounted.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
+const icons = require("../icons.cjs");
 const generic = require("../types/generic.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
-const icons = require("./icons.cjs");
+const icons$1 = require("./icons.cjs");
 const Input_styles = require("./Input.styles.cjs");
+const 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",
-  /** 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.",
@@ -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,
@@ -59,31 +51,32 @@ const HvInput = generic.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,
@@ -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);
@@ -273,7 +272,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
         onClick: handleClear,
         "aria-label": labels?.clearButtonLabel,
         "aria-controls": setId.setId(elementId, "input"),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, {})
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Close", size: "xs" })
       }
     );
   }, [
@@ -287,14 +286,14 @@ 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,
       {
         className: classes.adornmentButton,
         onClick: onEnter && ((evt) => onEnter?.(evt, inputRef.current?.value ?? "")),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Search, { title: labels.searchButtonLabel })
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { compact: true, name: "Search", title: labels.searchButtonLabel })
       }
     );
   }, [
@@ -310,17 +309,14 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Tooltip.HvTooltip,
       {
-        disableFocusListener: true,
-        disableTouchListener: true,
         title: revealPassword ? labels?.revealPasswordButtonClickToHideTooltip : labels?.revealPasswordButtonClickToShowTooltip,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Adornment.HvAdornment,
           {
             className: classes.adornmentButton,
             onClick: () => setRevealPassword((s) => !s),
-            "aria-label": labels?.revealPasswordButtonLabel,
             "aria-controls": setId.setId(elementId, "input"),
-            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.EyeIcon, { selected: revealPassword }),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons$1.EyeIcon, { selected: revealPassword }),
             tabIndex: 0,
             ...{ selected: revealPassword }
           }
@@ -332,34 +328,27 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     revealPassword,
     labels?.revealPasswordButtonClickToHideTooltip,
     labels?.revealPasswordButtonClickToShowTooltip,
-    labels?.revealPasswordButtonLabel,
     classes.adornmentButton,
     elementId
   ]);
   const validationIcon = React.useMemo(() => {
     if (!showValidationIcon) return null;
-    if (!utils$1.isValid(validationState)) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { color: "positive", className: classes.icon });
+    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 customIconEl = React.useMemo(
-    () => React.isValidElement(endAdornment) ? React.cloneElement(endAdornment, {
-      className: cx(endAdornment.props.className, classes.icon)
-    }) : endAdornment,
-    [classes.icon, endAdornment, cx]
-  );
   const adornments = React.useMemo(() => {
-    if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
+    if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !endAdornment)
       return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.adornmentsBox, children: [
       clearButton,
       revealPasswordButton,
       searchButton,
-      validationIcon || customIconEl
+      validationIcon || endAdornment
     ] });
   }, [
     classes.adornmentsBox,
     clearButton,
-    customIconEl,
+    endAdornment,
     revealPasswordButton,
     searchButton,
     validationIcon
@@ -389,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,
           {
@@ -489,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,28 +6,22 @@ const Suggestions_styles = require("../FormElement/Suggestions/Suggestions.style
 require("../FormElement/Suggestions/Suggestions.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
   root: { display: "block" },
-  labelContainer: { display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   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: {},