@hitachivantara/uikit-react-core 5.17.0 → 5.18.0

package/dist/esm/components/InlineEditor/InlineEditor.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.styles.js","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { baseInputClasses, inputClasses } from \"@core/components\";\nimport inlineEditorClasses, {\n  HvInlineEditorClasses,\n} from \"./inlineEditorClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvInlineEditorClasses, CSSInterpolation>\n> = {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n      minHeight: \"32px\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  textEmpty: {\n    color: theme.typography.placeholderText.color,\n  },\n  button: {\n    padding: theme.spacing([\"6px\", \"8px\", \"5px\", \"8px\"]),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    backgroundColor: \"transparent\",\n    border: `${theme.inlineEditor.borderWidth} solid transparent`,\n\n    \"&:hover, &:focus\": {\n      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.hoverBorderColor}`,\n      backgroundColor: \"transparent\",\n\n      [`& .${inlineEditorClasses.icon}`]: {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.activeBorderColor}`,\n      backgroundColor: \"transparent\",\n\n      [`& .${inlineEditorClasses.icon}`]: {\n        visibility: \"visible\",\n      },\n    },\n\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: \"16px\",\n    width: \"32px\",\n    minWidth: \"32px\",\n\n    \"& svg\": {\n      margin: theme.spacing([0, \"8px\"]),\n    },\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n};\n"],"names":["styles","root","baseInputClasses","inputRoot","inputClasses","height","minHeight","inputBorderContainer","top","bottom","text","overflow","textOverflow","whiteSpace","alignSelf","textEmpty","color","theme","typography","placeholderText","button","padding","spacing","boxSizing","cursor","width","maxWidth","justifyContent","alignItems","backgroundColor","border","inlineEditor","borderWidth","hoverBorderColor","inlineEditorClasses","icon","visibility","activeBorderColor","minWidth","margin","iconVisible"],"mappings":";;;;AAOO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJ,CAAE,MAAKC,iBAAiBC,aAAaC,aAAaD,WAAW,GAAG;AAAA,MAC9DE,QAAQ;AAAA,MACRC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW;AAAA,IACTC,OAAOC,MAAMC,WAAWC,gBAAgBH;AAAAA,EAC1C;AAAA,EACAI,QAAQ;AAAA,IACNC,SAASJ,MAAMK,QAAQ,CAAC,OAAO,OAAO,OAAO,KAAK,CAAC;AAAA,IACnDhB,WAAW;AAAA,IAEXiB,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRnB,QAAQ;AAAA,IACRoB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IAEZC,iBAAiB;AAAA,IACjBC,QAAS,GAAEb,MAAMc,aAAaC;AAAAA,IAE9B,oBAAoB;AAAA,MAClBF,QAAS,GAAEb,MAAMc,aAAaC,qBAAqBf,MAAMc,aAAaE;AAAAA,MACtEJ,iBAAiB;AAAA,MAEjB,CAAE,MAAKK,oBAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACVN,QAAS,GAAEb,MAAMc,aAAaC,qBAAqBf,MAAMc,aAAaM;AAAAA,MACtER,iBAAiB;AAAA,MAEjB,CAAE,MAAKK,oBAAoBC,MAAM,GAAG;AAAA,QAClCC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACTX,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAU,MAAM;AAAA,IACJX,QAAQ;AAAA,IACRY,YAAY;AAAA,IACZtB,WAAW;AAAA,IACXT,QAAQ;AAAA,IACRoB,OAAO;AAAA,IACPa,UAAU;AAAA,IAEV,SAAS;AAAA,MACPC,QAAQtB,MAAMK,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,IAClC;AAAA,EACF;AAAA,EACAkB,aAAa;AAAA,IACXJ,YAAY;AAAA,EACd;AACF;"}
+{"version":3,"file":"InlineEditor.styles.js","sources":["../../../../src/components/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { baseInputClasses, inputClasses } from \"@core/components\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {\n    [`& .${baseInputClasses.inputRoot}.${inputClasses.inputRoot}`]: {\n      height: \"100%\",\n      minHeight: \"32px\",\n    },\n  },\n  inputBorderContainer: {\n    top: \"unset\",\n    bottom: 0,\n  },\n  input: {},\n  inputRoot: {},\n  text: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    alignSelf: \"center\",\n  },\n  largeText: {},\n  textEmpty: {\n    color: theme.typography.placeholderText.color,\n  },\n  button: {\n    padding: theme.spacing([\"6px\", \"8px\", \"5px\", \"8px\"]),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n\n    backgroundColor: \"transparent\",\n    border: `${theme.inlineEditor.borderWidth} solid transparent`,\n\n    \"&:hover, &:focus\": {\n      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.hoverBorderColor}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      border: `${theme.inlineEditor.borderWidth} solid ${theme.inlineEditor.activeBorderColor}`,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"& > div\": {\n      width: \"100%\",\n    },\n    \"& > div > span\": {\n      width: \"100%\",\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: \"16px\",\n    width: \"32px\",\n    minWidth: \"32px\",\n\n    \"& svg\": {\n      margin: theme.spacing([0, \"8px\"]),\n    },\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","baseInputClasses","inputRoot","inputClasses","height","minHeight","inputBorderContainer","top","bottom","input","text","overflow","textOverflow","whiteSpace","alignSelf","largeText","textEmpty","color","theme","typography","placeholderText","button","padding","spacing","boxSizing","cursor","width","maxWidth","justifyContent","alignItems","backgroundColor","border","inlineEditor","borderWidth","hoverBorderColor","visibility","activeBorderColor","icon","minWidth","margin","iconVisible"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJ,CAAE,MAAKC,gBAAiBC,aAAaC,gBAAaD,WAAW,GAAG;AAAA,MAC9DE,QAAQ;AAAA,MACRC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,sBAAsB;AAAA,IACpBC,KAAK;AAAA,IACLC,QAAQ;AAAA,EACV;AAAA,EACAC,OAAO,CAAC;AAAA,EACRP,WAAW,CAAC;AAAA,EACZQ,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,WAAW;AAAA,EACb;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,WAAW;AAAA,IACTC,OAAOC,MAAMC,WAAWC,gBAAgBH;AAAAA,EAC1C;AAAA,EACAI,QAAQ;AAAA,IACNC,SAASJ,MAAMK,QAAQ,CAAC,OAAO,OAAO,OAAO,KAAK,CAAC;AAAA,IACnDlB,WAAW;AAAA,IAEXmB,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRrB,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IAEZC,iBAAiB;AAAA,IACjBC,QAAS,GAAEb,MAAMc,aAAaC;AAAAA,IAE9B,oBAAoB;AAAA,MAClBF,QAAS,GAAEb,MAAMc,aAAaC,qBAAqBf,MAAMc,aAAaE;AAAAA,MACtEJ,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTK,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACVJ,QAAS,GAAEb,MAAMc,aAAaC,qBAAqBf,MAAMc,aAAaI;AAAAA,MACtEN,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACTK,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACTT,OAAO;AAAA,IACT;AAAA,IACA,kBAAkB;AAAA,MAChBA,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAW,MAAM;AAAA,IACJZ,QAAQ;AAAA,IACRU,YAAY;AAAA,IACZrB,WAAW;AAAA,IACXV,QAAQ;AAAA,IACRsB,OAAO;AAAA,IACPY,UAAU;AAAA,IAEV,SAAS;AAAA,MACPC,QAAQrB,MAAMK,QAAQ,CAAC,GAAG,KAAK,CAAC;AAAA,IAClC;AAAA,EACF;AAAA,EACAiB,aAAa;AAAA,IACXL,YAAY;AAAA,EACd;AACF,CAAC;"}

package/dist/esm/components/Input/Input.js

@@ -1,10 +1,9 @@
 import React__default, { useRef, useState, useMemo, useCallback, useEffect, isValidElement } from "react";
 import { CloseXS, Search, PreviewOff, Preview, Success } from "@hitachivantara/uikit-react-icons";
-import { ClassNames } from "@emotion/react";
-import { styles } from "./Input.styles.js";
+import { useClasses } from "./Input.styles.js";
+import { staticClasses } from "./Input.styles.js";
 import validationState, { isInvalid, isValid } from "../Forms/FormElement/validationStates.js";
 import { DEFAULT_ERROR_MESSAGES, computeValidationType, validateInput, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
-import inputClasses from "./inputClasses.js";
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import useUniqueId from "../../hooks/useUniqueId.js";
 import useIsMounted from "../../hooks/useIsMounted.js";
@@ -35,7 +34,7 @@ function eventTargetIsInsideContainer(container, event) {
   return container != null && container.contains(getFocusedElement(event));
 }
 const HvInput = ({
-  classes,
+  classes: classesProp,
   className,
   id,
   name,
@@ -75,6 +74,11 @@ const HvInput = ({
   inputProps = {},
   ...others
 }) => {
+  var _a;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId(id, "hvinput");
   const inputRef = useRef(inputRefProp || null);
@@ -118,8 +122,8 @@ const HvInput = ({
   const hasLabel = label != null;
   const hasDescription = description != null;
   const focusInput = () => {
-    var _a;
-    (_a = materialInputRef.current) == null ? void 0 : _a.focus();
+    var _a2;
+    (_a2 = materialInputRef.current) == null ? void 0 : _a2.focus();
   };
   const isMounted = useIsMounted();
   const suggestionClearHandler = () => {
@@ -128,9 +132,9 @@ const HvInput = ({
     }
   };
   const suggestionHandler = (val) => {
-    var _a;
+    var _a2;
     const suggestionsArray = suggestionListCallback == null ? void 0 : suggestionListCallback(val);
-    if ((_a = suggestionsArray == null ? void 0 : suggestionsArray[0]) == null ? void 0 : _a.label) {
+    if ((_a2 = suggestionsArray == null ? void 0 : suggestionsArray[0]) == null ? void 0 : _a2.label) {
       setSuggestionValues(suggestionsArray);
     } else {
       suggestionClearHandler();
@@ -167,9 +171,9 @@ const HvInput = ({
     onFocus == null ? void 0 : onFocus(event, value);
   };
   const getSuggestions = (li) => {
-    var _a;
+    var _a2;
     const listEl = document.getElementById(setId(elementId, "suggestions-list") || "");
-    return li != null ? (_a = listEl == null ? void 0 : listEl.getElementsByTagName("li")) == null ? void 0 : _a[li] : listEl;
+    return li != null ? (_a2 = listEl == null ? void 0 : listEl.getElementsByTagName("li")) == null ? void 0 : _a2[li] : listEl;
   };
   const onSuggestionKeyDown = (event) => {
     if (isKeypress(event, keyboardCodes.Esc)) {
@@ -211,22 +215,19 @@ const HvInput = ({
     if (!showClear) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx(
-        HvAdornment,
-        {
-          className: cx(inputClasses.adornmentButton, !showSearchIcon && inputClasses.iconClear, css(styles.adornmentButton), !showSearchIcon && css(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(elementId, "input"),
-          icon: /* @__PURE__ */ jsx(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__ */ jsx(
+      HvAdornment,
+      {
+        className: cx(classes.adornmentButton, {
+          [classes.iconClear]: !showSearchIcon
+        }),
+        onClick: handleClear,
+        "aria-label": labels == null ? void 0 : labels.clearButtonLabel,
+        "aria-controls": setId(elementId, "input"),
+        icon: /* @__PURE__ */ jsx(CloseXS, {})
+      }
+    );
+  }, [showClear, classes.adornmentButton, classes.iconClear, showSearchIcon, handleClear, labels == null ? void 0 : labels.clearButtonLabel, elementId]);
   const handleSearch = useCallback((event) => {
     onEnter == null ? void 0 : onEnter(event, value);
   }, [onEnter, value]);
@@ -235,18 +236,13 @@ const HvInput = ({
     if (!reallyShowIt) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx(HvAdornment, {
-        className: cx(inputClasses.adornmentButton, css(styles.adornmentButton), classes == null ? void 0 : classes.adornmentButton),
-        onClick: hasOnEnter ? handleSearch : void 0,
-        "aria-label": labels == null ? void 0 : labels.searchButtonLabel,
-        icon: /* @__PURE__ */ jsx(Search, {})
-      })
+    return /* @__PURE__ */ jsx(HvAdornment, {
+      className: classes.adornmentButton,
+      onClick: hasOnEnter ? handleSearch : void 0,
+      "aria-label": labels == null ? void 0 : labels.searchButtonLabel,
+      icon: /* @__PURE__ */ jsx(Search, {})
     });
-  }, [showSearchIcon, isEmptyValue, hasOnEnter, validationState$1, classes == null ? void 0 : classes.adornmentButton, handleSearch, labels == null ? void 0 : labels.searchButtonLabel]);
+  }, [showSearchIcon, isEmptyValue, hasOnEnter, validationState$1, classes.adornmentButton, handleSearch, labels == null ? void 0 : labels.searchButtonLabel]);
   const handleRevealPassword = useCallback(() => {
     setRevealPassword(!revealPassword);
   }, [revealPassword]);
@@ -254,26 +250,21 @@ const HvInput = ({
     if (!showRevealPasswordButton) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx(HvTooltip, {
-        disableFocusListener: true,
-        disableTouchListener: true,
-        title: /* @__PURE__ */ jsx(HvTypography, {
-          children: revealPassword ? labels == null ? void 0 : labels.revealPasswordButtonClickToHideTooltip : labels == null ? void 0 : labels.revealPasswordButtonClickToShowTooltip
-        }),
-        children: /* @__PURE__ */ jsx(HvAdornment, {
-          className: cx(inputClasses.adornmentButton, css(styles.adornmentButton), classes == null ? void 0 : classes.adornmentButton),
-          onClick: handleRevealPassword,
-          "aria-label": labels == null ? void 0 : labels.revealPasswordButtonLabel,
-          "aria-controls": setId(elementId, "input"),
-          icon: revealPassword ? /* @__PURE__ */ jsx(PreviewOff, {}) : /* @__PURE__ */ jsx(Preview, {})
-        })
+    return /* @__PURE__ */ jsx(HvTooltip, {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      title: /* @__PURE__ */ jsx(HvTypography, {
+        children: revealPassword ? labels == null ? void 0 : labels.revealPasswordButtonClickToHideTooltip : labels == null ? void 0 : labels.revealPasswordButtonClickToShowTooltip
+      }),
+      children: /* @__PURE__ */ jsx(HvAdornment, {
+        className: classes.adornmentButton,
+        onClick: handleRevealPassword,
+        "aria-label": labels == null ? void 0 : labels.revealPasswordButtonLabel,
+        "aria-controls": setId(elementId, "input"),
+        icon: revealPassword ? /* @__PURE__ */ jsx(PreviewOff, {}) : /* @__PURE__ */ jsx(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 = useMemo(() => {
     if (!showValidationIcon) {
       return null;
@@ -281,38 +272,23 @@ const HvInput = ({
     if (!isValid(validationState$1)) {
       return null;
     }
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsx(Success, {
-        semantic: "positive",
-        className: cx(inputClasses.icon, css(styles.icon), classes == null ? void 0 : classes.icon)
-      })
+    return /* @__PURE__ */ jsx(Success, {
+      semantic: "positive",
+      className: classes.icon
     });
-  }, [showValidationIcon, validationState$1, classes == null ? void 0 : classes.icon]);
-  const customIconEl = useMemo(() => isValidElement(endAdornment) && /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => React__default.cloneElement(endAdornment, {
-      className: cx(inputClasses.icon, css(styles.icon), endAdornment.props.className, classes == null ? void 0 : classes.icon)
-    })
-  }), [classes == null ? void 0 : classes.icon, endAdornment]);
+  }, [showValidationIcon, validationState$1, classes.icon]);
+  const customIconEl = useMemo(() => isValidElement(endAdornment) && React__default.cloneElement(endAdornment, {
+    className: cx(endAdornment.props.className, classes.icon)
+  }), [classes.icon, endAdornment]);
   const adornments = useMemo(() => {
     if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
       return null;
-    return /* @__PURE__ */ jsx(ClassNames, {
-      children: ({
-        css,
-        cx
-      }) => /* @__PURE__ */ jsxs("div", {
-        className: cx(inputClasses.adornmentsBox, css(styles.adornmentsBox), classes == null ? void 0 : classes.adornmentsBox),
-        "aria-hidden": "true",
-        children: [clearButton, revealPasswordButton, searchButton, validationIcon || customIconEl]
-      })
+    return /* @__PURE__ */ 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]);
   useEffect(() => {
     if (focused || !isDirty.current && isEmptyValue) {
       return;
@@ -323,99 +299,94 @@ const HvInput = ({
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => {
-      var _a;
-      return /* @__PURE__ */ jsxs(HvFormElement, {
-        id,
-        name,
-        status: validationState$1,
-        disabled,
-        required,
-        readOnly,
-        className: cx(inputClasses.root, hasSuggestions && inputClasses.hasSuggestions, css(styles.root), className, classes == null ? void 0 : classes.root, hasSuggestions && (classes == null ? void 0 : classes.hasSuggestions)),
-        onBlur: onContainerBlurHandler,
-        children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
-          className: cx(inputClasses.labelContainer, css(styles.labelContainer), classes == null ? void 0 : classes.labelContainer),
-          children: [hasLabel && /* @__PURE__ */ jsx(HvLabel, {
-            id: setId(elementId, "label"),
-            className: cx(inputClasses.label, css(styles.label), classes == null ? void 0 : classes.label),
-            htmlFor: setId(elementId, "input"),
-            label
-          }), hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, {
-            id: setId(elementId, "description"),
-            className: cx(inputClasses.description, classes == null ? void 0 : classes.description),
-            children: description
-          })]
-        }), /* @__PURE__ */ jsx(HvBaseInput, {
-          id: hasLabel || showClear || showRevealPasswordButton ? setId(elementId, "input") : setId(id, "input"),
-          name,
-          value,
-          required,
-          readOnly,
-          disabled,
-          onChange: onChangeHandler,
-          autoFocus,
-          onKeyDown: onKeyDownHandler,
-          onBlur: onInputBlurHandler,
-          onFocus: onFocusHandler,
-          placeholder,
-          type: realType,
-          classes: {
-            input: cx(inputClasses.input, css(styles.input), classes == null ? void 0 : classes.input),
-            inputRoot: cx(inputClasses.inputRoot, css(styles.inputRoot), classes == null ? void 0 : classes.inputRoot),
-            inputRootFocused: cx(inputClasses.inputRootFocused, css(styles.inputRootFocused), classes == null ? void 0 : classes.inputRootFocused),
-            inputRootDisabled: cx(inputClasses.inputRootDisabled, css(styles.inputRootDisabled), classes == null ? void 0 : classes.inputRootDisabled),
-            inputRootMultiline: cx(inputClasses.inputRootMultiline, css(styles.inputRootMultiline), classes == null ? void 0 : classes.inputRootMultiline),
-            inputBorderContainer: cx(inputClasses.inputBorderContainer, css(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(elementId, "description") : void 0,
-            "aria-controls": canShowSuggestions ? 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__ */ jsxs(Fragment, {
-          children: [hasSuggestions && /* @__PURE__ */ jsx("div", {
-            role: "presentation",
-            className: cx(inputClasses.inputExtension, css(styles.inputExtension), classes == null ? void 0 : classes.inputExtension)
-          }), /* @__PURE__ */ jsx(HvSuggestions, {
-            id: setId(elementId, "suggestions"),
-            classes: {
-              root: cx(inputClasses.suggestionsContainer, css(styles.suggestionsContainer), classes == null ? void 0 : classes.suggestionsContainer),
-              list: cx(inputClasses.suggestionList, css(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__ */ jsx(HvWarningText, {
-          id: setId(elementId, "error"),
-          disableBorder: true,
-          className: cx(inputClasses.error, classes == null ? void 0 : classes.error),
-          children: validationMessage
-        })]
-      });
-    }
+  return /* @__PURE__ */ jsxs(HvFormElement, {
+    id,
+    name,
+    status: validationState$1,
+    disabled,
+    required,
+    readOnly,
+    className: cx(className, classes.root, {
+      [classes.hasSuggestions]: hasSuggestions
+    }),
+    onBlur: onContainerBlurHandler,
+    children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", {
+      className: classes.labelContainer,
+      children: [hasLabel && /* @__PURE__ */ jsx(HvLabel, {
+        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(HvBaseInput, {
+      id: hasLabel || showClear || showRevealPasswordButton ? setId(elementId, "input") : 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(elementId, "description") : void 0,
+        "aria-controls": canShowSuggestions ? 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__ */ jsxs(Fragment, {
+      children: [hasSuggestions && /* @__PURE__ */ jsx("div", {
+        role: "presentation",
+        className: classes.inputExtension
+      }), /* @__PURE__ */ jsx(HvSuggestions, {
+        id: setId(elementId, "suggestions"),
+        classes: {
+          root: classes.suggestionsContainer,
+          list: 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__ */ jsx(HvWarningText, {
+      id: setId(elementId, "error"),
+      disableBorder: true,
+      className: classes.error,
+      children: validationMessage
+    })]
   });
 };
 export {
-  HvInput
+  HvInput,
+  staticClasses as inputClasses
 };
 //# sourceMappingURL=Input.js.map