@hitachivantara/uikit-react-core 5.87.2 → 5.88.0

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -6,9 +6,9 @@ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const setId = require("../utils/setId.cjs");
 const ActionsGeneric_styles = require("./ActionsGeneric.styles.cjs");
+const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
 const IconButton = require("../IconButton/IconButton.cjs");
 const Button = require("../Button/Button.cjs");
-const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
 const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref) {
   const {
     id: idProp,

package/dist/cjs/Banner/BannerContent/BannerContent.cjs

@@ -7,8 +7,8 @@ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const iconVariant = require("../../utils/iconVariant.cjs");
 const setId = require("../../utils/setId.cjs");
 const BannerContent_styles = require("./BannerContent.styles.cjs");
-const ActionsGeneric = require("../../ActionsGeneric/ActionsGeneric.cjs");
 const Button = require("../../Button/Button.cjs");
+const ActionsGeneric = require("../../ActionsGeneric/ActionsGeneric.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
 const HvBannerContent = React.forwardRef(

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}`
+    // #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
       }
     },
-    "&: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}`
-        }
-      }
-    }
-  },
-  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"
-    }
-  },
-  inputRootFocused: {
-    backgroundColor: uikitStyles.theme.colors.atmo1,
-    ...focusUtils.outlineStyles,
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.atmo1
-    },
-    "&$inputRootReadOnly": {
-      backgroundColor: uikitStyles.theme.colors.atmo2
+    ":focus-within:not($disabled)": {
+      ...focusUtils.outlineStyles
     }
   },
-  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: 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/BaseInput/validations.cjs

@@ -49,7 +49,7 @@ const computeValidationMessage = (inputValidity, errorMessages) => {
   }
   return errorMessages.error;
 };
-const validateInput = (input, value, required, minCharQuantity, maxCharQuantity, validationType, validation) => {
+const validateInput = (input, required, minCharQuantity, maxCharQuantity, validationType, validation) => {
   const inputValidity = {
     valid: input?.validity?.valid ?? true,
     badInput: input?.validity?.badInput,
@@ -63,6 +63,7 @@ const validateInput = (input, value, required, minCharQuantity, maxCharQuantity,
     typeMismatch: input?.validity?.typeMismatch,
     valueMissing: input?.validity?.valueMissing
   };
+  const value = input?.value;
   if (!value) {
     if (required) {
       inputValidity.valueMissing = true;

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/ColorPicker/ColorPicker.cjs

@@ -16,8 +16,8 @@ const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
 const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const Panel = require("../Panel/Panel.cjs");
+const Typography = require("../Typography/Typography.cjs");
 const DEFAULT_LABELS = {
   recommendedColorsLabel: "Recommended colors:",
   customColorsLabel: "Custom colors:"

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const utils = require("@mui/material/utils");
+const utils$1 = require("@mui/material/utils");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const utils$3 = require("../Calendar/utils.cjs");
+const utils = require("../Calendar/utils.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
@@ -13,10 +13,10 @@ const setId = require("../utils/setId.cjs");
 const useSavedState = require("../utils/useSavedState.cjs");
 const DatePicker_styles = require("./DatePicker.styles.cjs");
 const useVisibleDate = require("./useVisibleDate.cjs");
-const utils$1 = require("./utils.cjs");
+const utils$2 = require("./utils.cjs");
 const Calendar = require("../Calendar/Calendar.cjs");
 const Button = require("../Button/Button.cjs");
-const utils$2 = require("../FormElement/utils.cjs");
+const utils$3 = require("../FormElement/utils.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
 const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
@@ -65,7 +65,7 @@ const HvDatePicker = React.forwardRef(
       rangeMode = false,
       startAdornment,
       horizontalPlacement = "right",
-      locale = utils$3.DEFAULT_LOCALE,
+      locale = utils.DEFAULT_LOCALE,
       showActions,
       showClear,
       disablePortal = true,
@@ -93,7 +93,7 @@ const HvDatePicker = React.forwardRef(
     const [visibleDate, dispatchAction] = useVisibleDate.default(startDate, endDate);
     const focusTarget = React.useRef(null);
     const { ref: refProp, ...otherDropdownProps } = dropdownProps;
-    const dropdownForkedRef = utils.useForkRef(ref, refProp);
+    const dropdownForkedRef = utils$1.useForkRef(ref, refProp);
     React.useEffect(() => {
       setStartDate(rangeMode ? startValue : value, true);
       setEndDate(endValue, true);
@@ -125,7 +125,7 @@ const HvDatePicker = React.forwardRef(
       setEndDate(endDate ?? startDate, true);
       onChange?.(startDate, endDate);
       setValidationState(() => {
-        if (required && (!utils$3.isDate(startDate) || rangeMode && !utils$3.isDate(endDate))) {
+        if (required && (!utils.isDate(startDate) || rangeMode && !utils.isDate(endDate))) {
           return "invalid";
         }
         return "valid";
@@ -158,7 +158,7 @@ const HvDatePicker = React.forwardRef(
       focusTarget.current?.focus();
     };
     const handleDateChange = (event, newDate) => {
-      if (!utils$3.isDate(newDate)) return;
+      if (!utils.isDate(newDate)) return;
       const autoSave = !showActions && !rangeMode;
       if (rangeMode) {
         if (!startDate || startDate && endDate || newDate < startDate) {
@@ -173,7 +173,7 @@ const HvDatePicker = React.forwardRef(
       if (autoSave) {
         onChange?.(newDate);
         setValidationState(() => {
-          if (required && !utils$3.isDate(newDate)) {
+          if (required && !utils.isDate(newDate)) {
             return "invalid";
           }
           return "valid";
@@ -182,7 +182,7 @@ const HvDatePicker = React.forwardRef(
       }
     };
     const handleInputDateChange = (event, newDate, position) => {
-      if (!utils$3.isDate(newDate)) return;
+      if (!utils.isDate(newDate)) return;
       if (!rangeMode) {
         handleDateChange(event, newDate);
         return;
@@ -232,11 +232,11 @@ const HvDatePicker = React.forwardRef(
       ] })
     ] });
     const dateValue = rangeMode ? { startDate, endDate } : startDate;
-    const dateString = utils$1.getDateLabel(dateValue, rangeMode, locale);
+    const dateString = utils$2.getDateLabel(dateValue, rangeMode, locale);
     const hasLabel = label != null;
     const hasDescription = description != null;
     const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-    const isStateInvalid = utils$2.isInvalid(validationState);
+    const isStateInvalid = utils$3.isInvalid(validationState);
     let errorMessageId;
     if (isStateInvalid) {
       errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;

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/FilterGroup/FilterContent/FilterContent.cjs

@@ -12,8 +12,8 @@ const RightPanel = require("../RightPanel/RightPanel.cjs");
 const Button = require("../../Button/Button.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const BaseDropdown = require("../../BaseDropdown/BaseDropdown.cjs");
-const Counter = require("../Counter/Counter.cjs");
 const ActionBar = require("../../ActionBar/ActionBar.cjs");
+const Counter = require("../Counter/Counter.cjs");
 const HvFilterGroupContent = React.forwardRef(function HvFilterGroupContent2(props, ref) {
   const {
     id,