@hitachivantara/uikit-react-core 5.17.0 → 5.18.1

package/dist/cjs/components/Input/Input.cjs

@@ -1,12 +1,12 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const material = require("@mui/material");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const react = require("@emotion/react");
 const Input_styles = require("./Input.styles.cjs");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const validations = require("../BaseInput/validations.cjs");
-const inputClasses = require("./inputClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useIsMounted = require("../../hooks/useIsMounted.cjs");
@@ -38,60 +38,80 @@ const getFocusedElement = (event) => browser.default("ie") ? document.activeElem
 function eventTargetIsInsideContainer(container, event) {
   return container != null && container.contains(getFocusedElement(event));
 }
-const HvInput = ({
-  classes,
-  className,
-  id,
-  name,
-  value: valueProp,
-  defaultValue = "",
-  required = false,
-  readOnly = false,
-  disabled = false,
-  label,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  description,
-  "aria-describedby": ariaDescribedBy,
-  onChange,
-  onEnter,
-  status,
-  statusMessage,
-  "aria-errormessage": ariaErrorMessage,
-  type = "text",
-  placeholder,
-  autoFocus = false,
-  labels: labelsProp,
-  validationMessages,
-  disableClear = false,
-  disableRevealPassword = false,
-  disableSearchButton = false,
-  endAdornment,
-  maxCharQuantity,
-  minCharQuantity,
-  validation,
-  showValidationIcon = false,
-  suggestionListCallback,
-  inputRef: inputRefProp,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  inputProps = {},
-  ...others
-}) => {
+const setInputValue = (_a = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : _a.set;
+const changeInputValue = (input, value = "") => {
+  const event = new Event("input", {
+    bubbles: true
+  });
+  setInputValue == null ? void 0 : setInputValue.call(input, value);
+  input == null ? void 0 : input.dispatchEvent(event);
+};
+const HvInput = React.forwardRef((props, ref) => {
+  var _a2;
+  const {
+    classes: classesProp,
+    className,
+    id,
+    name,
+    value: valueProp,
+    defaultValue = "",
+    required = false,
+    readOnly = false,
+    disabled = false,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    onChange,
+    onEnter,
+    status,
+    statusMessage,
+    "aria-errormessage": ariaErrorMessage,
+    type = "text",
+    placeholder,
+    autoFocus = false,
+    labels: labelsProp,
+    validationMessages,
+    disableClear = false,
+    disableRevealPassword = false,
+    disableSearchButton = false,
+    endAdornment,
+    maxCharQuantity,
+    minCharQuantity,
+    validation,
+    showValidationIcon = false,
+    suggestionListCallback,
+    inputRef: inputRefProp,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    inputProps = {},
+    ...others
+  } = props;
+  const {
+    classes,
+    cx
+  } = Input_styles.useClasses(classesProp);
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId.default(id, "hvinput");
-  const inputRef = React.useRef(inputRefProp || null);
+  const inputRef = React.useRef(null);
+  const forkedRef = material.useForkRef(ref, inputRef, inputRefProp);
+  const suggestionsRef = React.useRef(null);
   const [focused, setFocused] = React.useState(false);
   const isDirty = React.useRef(false);
   const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
   const isEmptyValue = value == null || value === "";
   const [validationState, setValidationState] = useControlled.useControlled(status, validationStates.default.standBy);
   const [validationMessage, setValidationMessage] = useControlled.useControlled(statusMessage, "");
-  const errorMessages = React.useMemo(() => ({
-    ...validations.DEFAULT_ERROR_MESSAGES,
-    ...validationMessages
-  }), [validationMessages == null ? void 0 : validationMessages.error, validationMessages == null ? void 0 : validationMessages.requiredError, validationMessages == null ? void 0 : validationMessages.minCharError, validationMessages == null ? void 0 : validationMessages.maxCharError, validationMessages == null ? void 0 : validationMessages.typeMismatchError]);
+  const errorMessages = React.useMemo(
+    () => ({
+      ...validations.DEFAULT_ERROR_MESSAGES,
+      ...validationMessages
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [validationMessages == null ? void 0 : validationMessages.error, validationMessages == null ? void 0 : validationMessages.requiredError, validationMessages == null ? void 0 : validationMessages.minCharError, validationMessages == null ? void 0 : validationMessages.maxCharError, validationMessages == null ? void 0 : validationMessages.typeMismatchError]
+  );
   const validationType = React.useMemo(() => validations.computeValidationType(type), [type]);
   const performValidation = React.useCallback(() => {
     const inputValidity = validations.validateInput(inputRef.current, value, required, minCharQuantity, maxCharQuantity, validationType, validation);
@@ -114,16 +134,11 @@ const HvInput = ({
   const [suggestionValues, setSuggestionValues] = React.useState(null);
   const canShowSuggestions = suggestionListCallback != null;
   const hasSuggestions = !!suggestionValues;
-  const materialInputRef = React.useRef(null);
-  const suggestionRef = React.useRef(null);
-  React.useEffect(() => {
-    suggestionRef.current = document.getElementById(setId.setId(elementId, "suggestions") || "");
-  }, [elementId]);
   const hasLabel = label != null;
   const hasDescription = description != null;
   const focusInput = () => {
-    var _a;
-    (_a = materialInputRef.current) == null ? void 0 : _a.focus();
+    var _a3;
+    (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
   };
   const isMounted = useIsMounted.default();
   const suggestionClearHandler = () => {
@@ -132,9 +147,9 @@ const HvInput = ({
     }
   };
   const suggestionHandler = (val) => {
-    var _a;
+    var _a3;
     const suggestionsArray = suggestionListCallback == null ? void 0 : suggestionListCallback(val);
-    if ((_a = suggestionsArray == null ? void 0 : suggestionsArray[0]) == null ? void 0 : _a.label) {
+    if ((_a3 = suggestionsArray == null ? void 0 : suggestionsArray[0]) == null ? void 0 : _a3.label) {
       setSuggestionValues(suggestionsArray);
     } else {
       suggestionClearHandler();
@@ -142,8 +157,7 @@ const HvInput = ({
   };
   const suggestionSelectedHandler = (event, item) => {
     const newValue = item.value || item.label;
-    setValue(newValue);
-    onChange == null ? void 0 : onChange(event, newValue);
+    changeInputValue(inputRef.current, newValue);
     focusInput();
     suggestionClearHandler();
     if (type === "search") {
@@ -159,7 +173,7 @@ const HvInput = ({
     }
   };
   const onInputBlurHandler = (event) => {
-    if (eventTargetIsInsideContainer(suggestionRef == null ? void 0 : suggestionRef.current, event))
+    if (eventTargetIsInsideContainer(suggestionsRef.current, event))
       return;
     setFocused(false);
     const inputValidity = performValidation();
@@ -171,9 +185,9 @@ const HvInput = ({
     onFocus == null ? void 0 : onFocus(event, value);
   };
   const getSuggestions = (li) => {
-    var _a;
+    var _a3;
     const listEl = document.getElementById(setId.setId(elementId, "suggestions-list") || "");
-    return li != null ? (_a = listEl == null ? void 0 : listEl.getElementsByTagName("li")) == null ? void 0 : _a[li] : listEl;
+    return li != null ? (_a3 = listEl == null ? void 0 : listEl.getElementsByTagName("li")) == null ? void 0 : _a3[li] : listEl;
   };
   const onSuggestionKeyDown = (event) => {
     if (keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.Esc)) {
@@ -205,32 +219,28 @@ const HvInput = ({
   const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState !== validationStates.default.standBy);
   const showSearchIcon = type === "search" && !disableSearchButton;
   const showRevealPasswordButton = type === "password" && !disableRevealPassword;
-  const handleClear = React.useCallback((event) => {
+  const handleClear = React.useCallback(() => {
     setValidationState(validationStates.default.standBy);
-    setValue("");
-    onChange == null ? void 0 : onChange(event, "");
+    changeInputValue(inputRef.current, "");
     setTimeout(focusInput);
-  }, [onChange, setValidationState, setValue]);
+  }, [setValidationState]);
   const clearButton = React.useMemo(() => {
     if (!showClear) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsxRuntime.jsx(
-        Adornment.HvAdornment,
-        {
-          className: cx(inputClasses.default.adornmentButton, !showSearchIcon && inputClasses.default.iconClear, css(Input_styles.styles.adornmentButton), !showSearchIcon && css(Input_styles.styles.iconClear), classes == null ? void 0 : classes.adornmentButton, !showSearchIcon && (classes == null ? void 0 : classes.iconClear)),
-          onClick: handleClear,
-          "aria-label": labels == null ? void 0 : labels.clearButtonLabel,
-          "aria-controls": setId.setId(elementId, "input"),
-          icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, {})
-        }
-      )
-    });
-  }, [showClear, classes == null ? void 0 : classes.adornmentButton, classes == null ? void 0 : classes.iconClear, showSearchIcon, handleClear, labels == null ? void 0 : labels.clearButtonLabel, elementId]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Adornment.HvAdornment,
+      {
+        className: cx(classes.adornmentButton, {
+          [classes.iconClear]: !showSearchIcon
+        }),
+        onClick: handleClear,
+        "aria-label": labels == null ? void 0 : labels.clearButtonLabel,
+        "aria-controls": setId.setId(elementId, "input"),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, {})
+      }
+    );
+  }, [showClear, classes.adornmentButton, classes.iconClear, showSearchIcon, handleClear, labels == null ? void 0 : labels.clearButtonLabel, elementId, cx]);
   const handleSearch = React.useCallback((event) => {
     onEnter == null ? void 0 : onEnter(event, value);
   }, [onEnter, value]);
@@ -239,18 +249,13 @@ const HvInput = ({
     if (!reallyShowIt) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsxRuntime.jsx(Adornment.HvAdornment, {
-        className: cx(inputClasses.default.adornmentButton, css(Input_styles.styles.adornmentButton), classes == null ? void 0 : classes.adornmentButton),
-        onClick: hasOnEnter ? handleSearch : void 0,
-        "aria-label": labels == null ? void 0 : labels.searchButtonLabel,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Search, {})
-      })
+    return /* @__PURE__ */ jsxRuntime.jsx(Adornment.HvAdornment, {
+      className: classes.adornmentButton,
+      onClick: hasOnEnter ? handleSearch : void 0,
+      "aria-label": labels == null ? void 0 : labels.searchButtonLabel,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Search, {})
     });
-  }, [showSearchIcon, isEmptyValue, hasOnEnter, validationState, classes == null ? void 0 : classes.adornmentButton, handleSearch, labels == null ? void 0 : labels.searchButtonLabel]);
+  }, [showSearchIcon, isEmptyValue, hasOnEnter, validationState, classes.adornmentButton, handleSearch, labels == null ? void 0 : labels.searchButtonLabel]);
   const handleRevealPassword = React.useCallback(() => {
     setRevealPassword(!revealPassword);
   }, [revealPassword]);
@@ -258,26 +263,21 @@ const HvInput = ({
     if (!showRevealPasswordButton) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, {
-        disableFocusListener: true,
-        disableTouchListener: true,
-        title: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-          children: revealPassword ? labels == null ? void 0 : labels.revealPasswordButtonClickToHideTooltip : labels == null ? void 0 : labels.revealPasswordButtonClickToShowTooltip
-        }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Adornment.HvAdornment, {
-          className: cx(inputClasses.default.adornmentButton, css(Input_styles.styles.adornmentButton), classes == null ? void 0 : classes.adornmentButton),
-          onClick: handleRevealPassword,
-          "aria-label": labels == null ? void 0 : labels.revealPasswordButtonLabel,
-          "aria-controls": setId.setId(elementId, "input"),
-          icon: revealPassword ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.PreviewOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Preview, {})
-        })
+    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      title: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+        children: revealPassword ? labels == null ? void 0 : labels.revealPasswordButtonClickToHideTooltip : labels == null ? void 0 : labels.revealPasswordButtonClickToShowTooltip
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Adornment.HvAdornment, {
+        className: classes.adornmentButton,
+        onClick: handleRevealPassword,
+        "aria-label": labels == null ? void 0 : labels.revealPasswordButtonLabel,
+        "aria-controls": setId.setId(elementId, "input"),
+        icon: revealPassword ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.PreviewOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Preview, {})
       })
     });
-  }, [showRevealPasswordButton, revealPassword, labels == null ? void 0 : labels.revealPasswordButtonClickToHideTooltip, labels == null ? void 0 : labels.revealPasswordButtonClickToShowTooltip, labels == null ? void 0 : labels.revealPasswordButtonLabel, classes == null ? void 0 : classes.adornmentButton, handleRevealPassword, elementId]);
+  }, [showRevealPasswordButton, revealPassword, labels == null ? void 0 : labels.revealPasswordButtonClickToHideTooltip, labels == null ? void 0 : labels.revealPasswordButtonClickToShowTooltip, labels == null ? void 0 : labels.revealPasswordButtonLabel, classes.adornmentButton, handleRevealPassword, elementId]);
   const validationIcon = React.useMemo(() => {
     if (!showValidationIcon) {
       return null;
@@ -285,139 +285,117 @@ const HvInput = ({
     if (!validationStates.isValid(validationState)) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, {
-        semantic: "positive",
-        className: cx(inputClasses.default.icon, css(Input_styles.styles.icon), classes == null ? void 0 : classes.icon)
-      })
+    return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, {
+      semantic: "positive",
+      className: classes.icon
     });
-  }, [showValidationIcon, validationState, classes == null ? void 0 : classes.icon]);
-  const customIconEl = React.useMemo(() => React.isValidElement(endAdornment) && /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => React__default.default.cloneElement(endAdornment, {
-      className: cx(inputClasses.default.icon, css(Input_styles.styles.icon), endAdornment.props.className, classes == null ? void 0 : classes.icon)
-    })
-  }), [classes == null ? void 0 : classes.icon, endAdornment]);
+  }, [showValidationIcon, validationState, classes.icon]);
+  const customIconEl = React.useMemo(() => React.isValidElement(endAdornment) && React__default.default.cloneElement(endAdornment, {
+    className: cx(endAdornment.props.className, classes.icon)
+  }), [classes.icon, endAdornment, cx]);
   const adornments = React.useMemo(() => {
     if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
       return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: cx(inputClasses.default.adornmentsBox, css(Input_styles.styles.adornmentsBox), classes == null ? void 0 : classes.adornmentsBox),
-        "aria-hidden": "true",
-        children: [clearButton, revealPasswordButton, searchButton, validationIcon || customIconEl]
-      })
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.adornmentsBox,
+      "aria-hidden": "true",
+      children: [clearButton, revealPasswordButton, searchButton, validationIcon || customIconEl]
     });
-  }, [classes == null ? void 0 : classes.adornmentsBox, clearButton, customIconEl, revealPasswordButton, searchButton, validationIcon]);
+  }, [classes.adornmentsBox, clearButton, customIconEl, revealPasswordButton, searchButton, validationIcon]);
   React.useEffect(() => {
     if (focused || !isDirty.current && isEmptyValue) {
       return;
     }
     performValidation();
   }, [focused, isEmptyValue, performValidation]);
-  let errorMessageId;
-  if (isStateInvalid) {
-    errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => {
-      var _a;
-      return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
-        id,
-        name,
-        status: validationState,
-        disabled,
-        required,
-        readOnly,
-        className: cx(inputClasses.default.root, hasSuggestions && inputClasses.default.hasSuggestions, css(Input_styles.styles.root), className, classes == null ? void 0 : classes.root, hasSuggestions && (classes == null ? void 0 : classes.hasSuggestions)),
-        onBlur: onContainerBlurHandler,
-        children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          className: cx(inputClasses.default.labelContainer, css(Input_styles.styles.labelContainer), classes == null ? void 0 : classes.labelContainer),
-          children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
-            id: setId.setId(elementId, "label"),
-            className: cx(inputClasses.default.label, css(Input_styles.styles.label), classes == null ? void 0 : classes.label),
-            htmlFor: setId.setId(elementId, "input"),
-            label
-          }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
-            id: setId.setId(elementId, "description"),
-            className: cx(inputClasses.default.description, classes == null ? void 0 : classes.description),
-            children: description
-          })]
-        }), /* @__PURE__ */ jsxRuntime.jsx(BaseInput.HvBaseInput, {
-          id: hasLabel || showClear || showRevealPasswordButton ? setId.setId(elementId, "input") : setId.setId(id, "input"),
-          name,
-          value,
-          required,
-          readOnly,
-          disabled,
-          onChange: onChangeHandler,
-          autoFocus,
-          onKeyDown: onKeyDownHandler,
-          onBlur: onInputBlurHandler,
-          onFocus: onFocusHandler,
-          placeholder,
-          type: realType,
-          classes: {
-            input: cx(inputClasses.default.input, css(Input_styles.styles.input), classes == null ? void 0 : classes.input),
-            inputRoot: cx(inputClasses.default.inputRoot, css(Input_styles.styles.inputRoot), classes == null ? void 0 : classes.inputRoot),
-            inputRootFocused: cx(inputClasses.default.inputRootFocused, css(Input_styles.styles.inputRootFocused), classes == null ? void 0 : classes.inputRootFocused),
-            inputRootDisabled: cx(inputClasses.default.inputRootDisabled, css(Input_styles.styles.inputRootDisabled), classes == null ? void 0 : classes.inputRootDisabled),
-            inputRootMultiline: cx(inputClasses.default.inputRootMultiline, css(Input_styles.styles.inputRootMultiline), classes == null ? void 0 : classes.inputRootMultiline),
-            inputBorderContainer: cx(inputClasses.default.inputBorderContainer, css(Input_styles.styles.inputBorderContainer), classes == null ? void 0 : classes.inputBorderContainer)
-          },
-          invalid: isStateInvalid,
-          inputProps: {
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy,
-            "aria-invalid": isStateInvalid ? true : void 0,
-            "aria-errormessage": errorMessageId,
-            "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description ? setId.setId(elementId, "description") : void 0,
-            "aria-controls": canShowSuggestions ? setId.setId(elementId, "suggestions") : void 0,
-            ref: materialInputRef,
-            // prevent browsers auto-fill/suggestions when we have our own
-            autoComplete: canShowSuggestions ? "off" : void 0,
-            ...inputProps
-          },
-          inputRef: inputRefProp || inputRef,
-          endAdornment: adornments,
-          ...others
-        }), canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx("div", {
-            role: "presentation",
-            className: cx(inputClasses.default.inputExtension, css(Input_styles.styles.inputExtension), classes == null ? void 0 : classes.inputExtension)
-          }), /* @__PURE__ */ jsxRuntime.jsx(Suggestions.HvSuggestions, {
-            id: setId.setId(elementId, "suggestions"),
-            classes: {
-              root: cx(inputClasses.default.suggestionsContainer, css(Input_styles.styles.suggestionsContainer), classes == null ? void 0 : classes.suggestionsContainer),
-              list: cx(inputClasses.default.suggestionList, css(Input_styles.styles.suggestionList), classes == null ? void 0 : classes.suggestionList)
-            },
-            expanded: hasSuggestions,
-            anchorEl: (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.parentElement,
-            onClose: suggestionClearHandler,
-            onKeyDown: onSuggestionKeyDown,
-            onSuggestionSelected: suggestionSelectedHandler,
-            suggestionValues
-          })]
-        }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
-          id: setId.setId(elementId, "error"),
-          disableBorder: true,
-          className: cx(inputClasses.default.error, classes == null ? void 0 : classes.error),
-          children: validationMessage
-        })]
-      });
-    }
+  const errorMessageId = isStateInvalid ? canShowError ? setId.setId(elementId, "error") : ariaErrorMessage : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
+    id,
+    name,
+    status: validationState,
+    disabled,
+    required,
+    readOnly,
+    className: cx(className, classes.root, {
+      [classes.hasSuggestions]: hasSuggestions
+    }),
+    onBlur: onContainerBlurHandler,
+    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
+        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(BaseInput.HvBaseInput, {
+      id: hasLabel || showClear || showRevealPasswordButton ? setId.setId(elementId, "input") : setId.setId(id, "input"),
+      name,
+      value,
+      required,
+      readOnly,
+      disabled,
+      onChange: onChangeHandler,
+      autoFocus,
+      onKeyDown: onKeyDownHandler,
+      onBlur: onInputBlurHandler,
+      onFocus: onFocusHandler,
+      placeholder,
+      type: realType,
+      classes: {
+        input: classes.input,
+        inputRoot: classes.inputRoot,
+        inputRootFocused: classes.inputRootFocused,
+        inputRootDisabled: classes.inputRootDisabled,
+        inputRootMultiline: classes.inputRootMultiline,
+        inputBorderContainer: classes.inputBorderContainer
+      },
+      invalid: isStateInvalid,
+      inputProps: {
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-invalid": isStateInvalid ? true : void 0,
+        "aria-errormessage": errorMessageId,
+        "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description ? setId.setId(elementId, "description") : void 0,
+        "aria-controls": canShowSuggestions ? setId.setId(elementId, "suggestions") : void 0,
+        ref: inputRef,
+        // prevent browsers auto-fill/suggestions when we have our own
+        autoComplete: canShowSuggestions ? "off" : void 0,
+        ...inputProps
+      },
+      inputRef: forkedRef,
+      endAdornment: adornments,
+      ...others
+    }), canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        role: "presentation",
+        className: classes.inputExtension
+      }), /* @__PURE__ */ jsxRuntime.jsx(Suggestions.HvSuggestions, {
+        ref: suggestionsRef,
+        id: setId.setId(elementId, "suggestions"),
+        classes: {
+          root: classes.suggestionsContainer,
+          list: classes.suggestionList
+        },
+        expanded: hasSuggestions,
+        anchorEl: (_a2 = inputRef.current) == null ? void 0 : _a2.parentElement,
+        onClose: suggestionClearHandler,
+        onKeyDown: onSuggestionKeyDown,
+        onSuggestionSelected: suggestionSelectedHandler,
+        suggestionValues
+      })]
+    }), canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, {
+      id: setId.setId(elementId, "error"),
+      disableBorder: true,
+      className: classes.error,
+      children: validationMessage
+    })]
   });
-};
+});
+exports.inputClasses = Input_styles.staticClasses;
 exports.HvInput = HvInput;
 //# sourceMappingURL=Input.cjs.map