@hitachivantara/uikit-react-core 5.87.2 → 5.87.3

package/dist/cjs/BaseInput/BaseInput.cjs

@@ -2,38 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const react = require("@emotion/react");
 const MuiInputBase = require("@mui/material/InputBase");
 const utils$1 = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const BaseInput_styles = require("./BaseInput.styles.cjs");
 const context = require("../FormElement/context.cjs");
 const utils = require("../FormElement/utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiInputBase__default = /* @__PURE__ */ _interopDefault(MuiInputBase);
-const baseInputStyles = react.css({
-  "input:-webkit-autofill": {
-    WebkitBoxShadow: `0 0 0px 1000px ${uikitStyles.theme.colors.atmo1} inset`,
-    WebkitTextFillColor: uikitStyles.theme.colors.secondary
-  },
-  // Clears number input up/down arrows in Chrome and Firefox
-  "input::-webkit-outer-spin-button,input::-webkit-inner-spin-button": {
-    WebkitAppearance: "none",
-    margin: 0
-  },
-  "input[type=number]": {
-    MozAppearance: "textfield"
-  },
-  // Clears time input clock in Chrome
-  "input::-webkit-calendar-picker-indicator": {
-    display: "none"
-  },
-  // Clears search input clear button in Chrome
-  "input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration": {
-    display: "none"
-  }
-});
 const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
   const {
     classes: classesProp,
@@ -50,7 +26,7 @@ const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
     placeholder,
     multiline,
     resizable,
-    invalid,
+    invalid: invalidProp,
     inputRef,
     inputProps = {},
     ...others
@@ -65,72 +41,57 @@ const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
     formElementContext
   );
   const forkedRef = utils$1.useForkRef(ref, inputRef);
-  const localInvalid = invalid || formElementProps.status === "invalid";
+  const invalid = invalidProp || formElementProps.status === "invalid";
   const formElementDescriptorsContext = React.useContext(
     context.HvFormElementDescriptorsContext
   );
   const ariaProps = utils.buildAriaPropsFromContext(
     inputProps,
     formElementDescriptorsContext,
-    localInvalid,
+    invalid,
     id
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: baseInputStyles }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cx(classes.root, className, {
-          [classes.disabled]: formElementProps.disabled,
-          [classes.invalid]: localInvalid,
-          [classes.resizable]: multiline && resizable,
-          [classes.readOnly]: formElementProps.readOnly
-        }),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            MuiInputBase__default.default,
-            {
-              id,
-              name: formElementProps.name,
-              value,
-              defaultValue,
-              type,
-              placeholder,
-              readOnly: !!formElementProps.readOnly,
-              disabled: formElementProps.disabled,
-              onChange: (event) => onChange?.(event, event.target.value),
-              className: cx({
-                [classes.inputRootInvalid]: localInvalid,
-                [classes.inputRootReadOnly]: formElementProps.readOnly
-              }),
-              classes: {
-                root: classes.inputRoot,
-                focused: classes.inputRootFocused,
-                disabled: classes.inputRootDisabled,
-                multiline: classes.inputRootMultiline,
-                input: cx(classes.input, {
-                  [classes.inputResizable]: !formElementProps.disabled && resizable,
-                  [classes.inputDisabled]: formElementProps.disabled,
-                  [classes.inputReadOnly]: formElementProps.readOnly
-                })
-              },
-              inputProps: {
-                // Avoid the required attribute at the root node
-                required: formElementProps.required,
-                ...inputProps,
-                ...ariaProps
-              },
-              inputRef: forkedRef,
-              multiline,
-              rows: 10,
-              ...others
-            }
-          ),
-          !multiline && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", className: classes.inputBorderContainer })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MuiInputBase__default.default,
+    {
+      id,
+      name: formElementProps.name,
+      value,
+      defaultValue,
+      placeholder,
+      readOnly: !!formElementProps.readOnly,
+      disabled: formElementProps.disabled,
+      onChange: (event) => onChange?.(event, event.target.value),
+      className: cx(classes.root, classes.inputRoot, className, {
+        [classes.inputRootMultiline]: multiline,
+        [classes.multiline]: multiline,
+        [classes.inputRootInvalid]: invalid,
+        [classes.invalid]: invalid,
+        [classes.inputRootReadOnly]: formElementProps.readOnly,
+        [classes.readOnly]: formElementProps.readOnly,
+        [classes.inputRootDisabled]: formElementProps.disabled,
+        [classes.disabled]: formElementProps.disabled
+      }),
+      classes: {
+        focused: cx(classes.focused, classes.inputRootFocused),
+        input: cx(classes.input, {
+          [classes.inputResizable]: !formElementProps.disabled && resizable,
+          [classes.inputDisabled]: formElementProps.disabled,
+          [classes.inputReadOnly]: formElementProps.readOnly
+        })
+      },
+      inputProps: {
+        // Avoid the required attribute at the root node
+        required: formElementProps.required,
+        ...inputProps,
+        ...ariaProps
+      },
+      inputRef: forkedRef,
+      multiline,
+      ...multiline ? { rows: 10 } : { type },
+      ...others
+    }
+  );
 });
 exports.baseInputClasses = BaseInput_styles.staticClasses;
 exports.HvBaseInput = HvBaseInput;

package/dist/cjs/BaseInput/BaseInput.styles.cjs

@@ -5,176 +5,99 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput", {
   root: {
-    display: "inline-block",
-    width: "100%",
-    position: "relative",
-    "&:hover $inputBorderContainer": {
-      backgroundColor: uikitStyles.theme.colors.primary
-    },
-    "&:focus-within $inputBorderContainer": {
-      backgroundColor: uikitStyles.theme.colors.primary
-    }
-  },
-  disabled: {
-    "& $inputRoot": {
-      backgroundColor: uikitStyles.theme.colors.atmo2,
-      borderColor: uikitStyles.theme.colors.secondary_60
-    },
-    "& $inputBorderContainer": {
-      backgroundColor: uikitStyles.theme.colors.atmo4
-    },
-    "&:hover $inputBorderContainer": {
-      backgroundColor: uikitStyles.theme.colors.atmo4
-    },
-    "&& $input": {
-      color: uikitStyles.theme.colors.secondary_60,
-      WebkitTextFillColor: uikitStyles.theme.colors.secondary_60
-    },
-    "& $inputRootMultiline": {
-      "& $input": {
-        backgroundColor: uikitStyles.theme.colors.atmo2,
-        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
-      }
-    },
-    "&:hover $inputRootMultiline": {
-      "& $input": {
-        backgroundColor: uikitStyles.theme.colors.atmo2,
-        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
-      }
-    }
-  },
-  invalid: {
-    "&:not(.disabled)": {
-      "& $inputBorderContainer": {
-        backgroundColor: uikitStyles.theme.colors.negative_120
-      },
-      "&:hover $inputBorderContainer": {
-        backgroundColor: uikitStyles.theme.colors.negative_120
-      },
-      "& $inputRootMultiline": {
-        "& $input": {
-          border: `1px solid ${uikitStyles.theme.colors.negative_120}`
-        }
-      },
-      "&:hover $inputRootMultiline": {
-        "& $input": {
-          border: `1px solid ${uikitStyles.theme.colors.negative_120}`
-        }
-      },
-      "&:focus-within $inputRootMultiline": {
-        "& $input": {
-          border: `1px solid ${uikitStyles.theme.colors.negative_120}`
-        }
+    // #region `input` style reset
+    "input:-webkit-autofill": {
+      WebkitBoxShadow: `0 0 0px 1000px ${uikitStyles.theme.colors.atmo1} inset`,
+      WebkitTextFillColor: uikitStyles.theme.colors.secondary
+    },
+    // Clears number input up/down arrows in Chrome and Firefox
+    "input[type=number]": {
+      MozAppearance: "textfield",
+      "&::-webkit-outer-spin-button,&::-webkit-inner-spin-button": {
+        WebkitAppearance: "none",
+        margin: 0
       }
-    }
-  },
-  resizable: { width: "auto" },
-  readOnly: {
-    "& $inputBorderContainer": {
-      backgroundColor: "transparent"
     },
-    "&:hover $inputBorderContainer": {
-      backgroundColor: "transparent"
-    },
-    "&:focus-within $inputBorderContainer": {
-      backgroundColor: "transparent"
-    },
-    "& $inputRootMultiline": {
-      "& $input": {
-        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
-        backgroundColor: uikitStyles.theme.colors.atmo2
-      }
+    // Clears time input clock in Chrome
+    "input::-webkit-calendar-picker-indicator": {
+      display: "none"
     },
-    "&:hover $inputRootMultiline": {
-      "& $input": {
-        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
-        backgroundColor: uikitStyles.theme.colors.atmo2
-      }
+    // Clears search input clear button in Chrome
+    "input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration": {
+      display: "none"
     },
-    "&:focus-within $inputRootMultiline": {
-      "& $input": {
-        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
-        backgroundColor: uikitStyles.theme.colors.atmo2
-      }
-    }
-  },
-  inputBorderContainer: {
-    position: "absolute",
-    width: "calc(100% - 4px)",
-    height: "0px",
-    top: "31px",
-    left: "2px",
-    backgroundColor: uikitStyles.theme.colors.atmo4
-  },
-  inputRootInvalid: { borderColor: uikitStyles.theme.colors.negative_120 },
-  inputRootReadOnly: {
-    borderColor: uikitStyles.theme.colors.secondary_60,
-    backgroundColor: uikitStyles.theme.colors.atmo2
-  },
-  inputRoot: {
-    margin: 0,
+    // #endregion
+    display: "inline-flex",
     width: "100%",
+    position: "relative",
+    margin: 0,
     borderRadius: uikitStyles.theme.radii.base,
     height: "32px",
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+    borderWidth: 1,
+    borderColor: uikitStyles.theme.colors.secondary,
     boxSizing: "border-box",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     fontFamily: uikitStyles.theme.fontFamily.body,
-    "&:hover:not($inputRootDisabled):not($inputRootInvalid):not($inputRootReadOnly)": {
+    ":hover:not($disabled,$invalid,$readOnly)": {
       borderColor: uikitStyles.theme.colors.primary
     },
-    "&:hover:not($inputRootDisabled)::before": {
-      borderBottom: "none"
-    },
-    "&::before": {
-      borderBottom: "none"
-    },
-    "&::after": {
-      borderBottom: "none"
+    ":focus-within:not($disabled)": {
+      ...focusUtils.outlineStyles
     }
   },
-  inputRootFocused: {
-    backgroundColor: uikitStyles.theme.colors.atmo1,
-    ...focusUtils.outlineStyles,
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.atmo1
-    },
-    "&$inputRootReadOnly": {
-      backgroundColor: uikitStyles.theme.colors.atmo2
-    }
-  },
-  inputRootDisabled: {
+  disabled: {
+    backgroundColor: uikitStyles.theme.colors.atmo2,
+    borderColor: uikitStyles.theme.colors.secondary_60,
     cursor: "not-allowed",
     "&&::before": {
       borderBottomStyle: "none"
     }
   },
-  inputRootMultiline: {
+  invalid: {
+    borderColor: uikitStyles.theme.colors.negative_120
+  },
+  multiline: {
     padding: 0,
-    backgroundColor: "transparent",
     overflow: "auto",
-    border: "none",
     height: "auto",
     "& $input": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
       borderRadius: uikitStyles.theme.radii.base,
-      backgroundColor: uikitStyles.theme.colors.atmo1,
       height: "auto",
       minHeight: "21px",
       padding: "5px 10px",
       overflow: "auto",
-      marginLeft: "0px",
-      marginRight: "0px",
-      "&:hover": {
-        border: `1px solid ${uikitStyles.theme.colors.primary}`
-      }
+      margin: 0
     }
   },
+  resizable: { width: "auto" },
+  readOnly: {
+    borderColor: uikitStyles.theme.colors.secondary_60,
+    backgroundColor: uikitStyles.theme.colors.atmo2
+  },
+  focused: {},
+  /** @deprecated unused. use `::after` instead */
+  inputBorderContainer: {},
+  /** @deprecated use `classes.invalid` instead */
+  inputRootInvalid: { borderColor: uikitStyles.theme.colors.negative_120 },
+  /** @deprecated use `classes.readOnly` instead */
+  inputRootReadOnly: {
+    borderColor: uikitStyles.theme.colors.secondary_60,
+    backgroundColor: uikitStyles.theme.colors.atmo2
+  },
+  /** @deprecated use `classes.root` instead */
+  inputRoot: {},
+  /** @deprecated unused */
+  inputRootFocused: {},
+  /** @deprecated use `classes.disabled` instead */
+  inputRootDisabled: {},
+  /** @deprecated use `classes.multiline` instead */
+  inputRootMultiline: {},
   input: {
-    height: "19px",
+    height: "100%",
     marginLeft: uikitStyles.theme.space.xs,
     marginRight: uikitStyles.theme.space.xs,
-    padding: "6px 0 5px",
+    padding: uikitStyles.theme.spacing("5px", 0),
+    backgroundColor: "transparent",
     overflow: "hidden",
     textOverflow: "ellipsis",
     outline: "none",
@@ -184,16 +107,19 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     "&::placeholder": {
       opacity: 1,
       color: uikitStyles.theme.colors.secondary_80
-    },
-    "&::-ms-clear": {
-      display: "none"
     }
   },
-  inputDisabled: {},
+  inputDisabled: {
+    color: uikitStyles.theme.colors.secondary_60,
+    WebkitTextFillColor: uikitStyles.theme.colors.secondary_60
+  },
   inputReadOnly: {
     color: uikitStyles.theme.colors.secondary_80
   },
-  inputResizable: { resize: "both", width: "100%" }
+  inputResizable: {
+    resize: "both",
+    width: "100%"
+  }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs

@@ -107,12 +107,6 @@ const HvCalendarHeader = (props) => {
           {
             type: "text",
             id: setId.setId(id, "header-input"),
-            className: classes.headerDate,
-            classes: {
-              input: classes.input,
-              inputBorderContainer: classes.inputBorderContainer,
-              error: classes.invalidMessageStyling
-            },
             placeholder: localeFormat,
             value: inputValue,
             "aria-labelledby": label?.[0]?.id,

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.styles.cjs

@@ -12,11 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarH
   invalid: {},
   headerDayOfWeek: {
     color: uikitStyles.theme.colors.secondary_80
-  },
-  headerDate: {},
-  input: {},
-  inputBorderContainer: {},
-  invalidMessageStyling: {}
+  }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Dropdown/Dropdown.cjs

@@ -8,6 +8,7 @@ const useControlled = require("../hooks/useControlled.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const generic = require("../types/generic.cjs");
+const CounterLabel = require("../utils/CounterLabel.cjs");
 const setId = require("../utils/setId.cjs");
 const Dropdown_styles = require("./Dropdown.styles.cjs");
 const utils = require("./utils.cjs");
@@ -22,7 +23,7 @@ const Typography = require("../Typography/Typography.cjs");
 const DEFAULT_LABELS = {
   /** Label for overwrite the default header behavior. */
   select: void 0,
-  /** Label used for the All checkbox action. */
+  /** Label used for the All checkbox action. @deprecated unused */
   selectAll: "All",
   /** Cancel button label. */
   cancelLabel: "Cancel",
@@ -183,18 +184,15 @@ const HvDropdown = generic.fixedForwardRef(function HvDropdown2(props, ref) {
         }),
         children: selectionLabel.selected
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsxs(
-      Typography.HvTypography,
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      CounterLabel.CounterLabel,
       {
-        component: "div",
+        selected: selectionLabel.selected,
+        total: selectionLabel.total,
+        conjunctionLabel: labels.multiSelectionConjunction,
         className: cx(classes.placeholder, {
           [classes.selectionDisabled]: disabled
-        }),
-        variant: "body",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectionLabel.selected }),
-          ` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`
-        ]
+        })
       }
     );
   };

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -40,12 +40,9 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
   const [isOverflowing, setIsOverflowing] = React.useState(false);
   const typographyStyles = activeTheme?.typography[variant] || {};
   const { lineHeight } = typographyStyles;
-  const checkOverflow = () => {
-    if (inputRef.current) {
-      setIsOverflowing(
-        inputRef.current.scrollWidth > inputRef.current.clientWidth
-      );
-    }
+  const checkOverflow = (el) => {
+    if (!el) return;
+    setIsOverflowing(el.scrollWidth > el.clientWidth);
   };
   useEnhancedEffect.useEnhancedEffect(() => {
     const input = inputRef.current;
@@ -70,13 +67,11 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       newValue = cachedValue;
       setEditMode(false);
       setValue(newValue);
-      checkOverflow();
     }
     onKeyDown?.(event, newValue);
   };
   const handleChange = (event, val) => {
     setValue(val);
-    checkOverflow();
     onChange?.(event, val);
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), children: editMode && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -86,8 +81,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       inputRef,
       classes: {
         root: classes.inputRoot,
-        input: classes.input,
-        inputBorderContainer: classes.inputBorderContainer
+        input: classes.input
       },
       inputProps: {
         style: {
@@ -101,7 +95,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       onKeyDown: handleKeyDown,
       ...others
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: isOverflowing && value, children: /* @__PURE__ */ jsxRuntime.jsx(
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
     Button.HvButton,
     {
       variant: "secondaryGhost",
@@ -121,18 +115,20 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       onClick: handleClick,
       disabled,
       ...buttonProps,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: isOverflowing && value, children: /* @__PURE__ */ jsxRuntime.jsx(
         Typography.HvTypography,
         {
+          component: "div",
+          ref: checkOverflow,
           variant,
           noWrap: true,
           className: cx(classes.text, { [classes.textEmpty]: !value }),
           ...typographyProps,
           children: value || placeholder
         }
-      )
+      ) })
     }
-  ) }) });
+  ) });
 });
 exports.inlineEditorClasses = InlineEditor_styles.staticClasses;
 exports.HvInlineEditor = HvInlineEditor;

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

@@ -2,29 +2,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
-require("../BaseInput/BaseInput.cjs");
-const Input_styles = require("../Input/Input.styles.cjs");
-require("../Input/Input.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInlineEditor", {
-  root: {
-    [`& .${BaseInput_styles.staticClasses.inputRoot}.${Input_styles.staticClasses.inputRoot}`]: {
-      height: "100%",
-      minHeight: "32px"
-    }
-  },
-  inputBorderContainer: {
-    top: "unset",
-    bottom: 0
-  },
+  root: {},
+  /** @deprecated unused. use `classes.root::after` instead */
+  inputBorderContainer: {},
   input: {},
-  inputRoot: {},
-  text: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    alignSelf: "center"
+  inputRoot: {
+    height: "100%",
+    minHeight: "32px"
   },
+  text: {},
   largeText: {},
   textEmpty: {
     color: uikitStyles.theme.colors.secondary_60
@@ -37,41 +24,31 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInlineEdi
     height: "100%",
     width: "100%",
     maxWidth: "100%",
-    justifyContent: "flex-start",
+    justifyContent: "start",
+    textAlign: "start",
     alignItems: "center",
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    border: `1px solid transparent`,
+    borderColor: "transparent",
     "&:hover, &:focus": {
-      border: `1px solid ${uikitStyles.theme.colors.primary}`,
+      borderColor: uikitStyles.theme.colors.primary,
       backgroundColor: uikitStyles.theme.colors.atmo1,
       "& $icon": {
         visibility: "visible"
       }
     },
     "&:active": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+      borderColor: uikitStyles.theme.colors.secondary,
       backgroundColor: "transparent",
       "& $icon": {
         visibility: "visible"
       }
-    },
-    "& > div": {
-      width: "100%"
-    },
-    "& > div > span": {
-      width: "100%"
     }
   },
   icon: {
     cursor: "pointer",
     visibility: "hidden",
     alignSelf: "center",
-    height: "16px",
-    width: "32px",
-    minWidth: "32px",
-    "& svg": {
-      margin: uikitStyles.theme.spacing(0, "xs")
-    }
+    height: 16
   },
   iconVisible: {
     visibility: "visible"

package/dist/cjs/Input/Input.cjs

@@ -448,11 +448,10 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
             type: realType,
             classes: {
               input: classes.input,
-              inputRoot: classes.inputRoot,
-              inputRootFocused: classes.inputRootFocused,
-              inputRootDisabled: classes.inputRootDisabled,
-              inputRootMultiline: classes.inputRootMultiline,
-              inputBorderContainer: classes.inputBorderContainer
+              root: classes.inputRoot,
+              focused: classes.inputRootFocused,
+              disabled: classes.inputRootDisabled,
+              multiline: classes.inputRootMultiline
             },
             invalid: isStateInvalid,
             inputProps: {