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

@@ -18,7 +18,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
       width: 16,
       height: 16,
       borderRadius: uikitStyles.theme.radii.circle,
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+      borderWidth: 1,
+      borderColor: uikitStyles.theme.colors.secondary,
       backgroundColor: uikitStyles.theme.colors.atmo1
     },
     borderRadius: 0
@@ -27,7 +28,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     cursor: "not-allowed",
     pointerEvents: "initial",
     "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
+      borderColor: uikitStyles.theme.colors.secondary_60,
       backgroundColor: uikitStyles.theme.colors.atmo3
     }
   },
@@ -40,20 +41,20 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
   icon: {},
   checked: {
     "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+      borderColor: uikitStyles.theme.colors.secondary,
       backgroundColor: uikitStyles.theme.colors.secondary,
       color: uikitStyles.theme.colors.atmo2
     },
     "&$semantic": {
       "& svg": {
-        border: `1px solid ${uikitStyles.theme.colors.base_dark}`,
+        borderColor: uikitStyles.theme.colors.base_dark,
         backgroundColor: uikitStyles.theme.colors.base_light,
         color: uikitStyles.theme.colors.base_dark
       }
     },
     "&$disabled": {
       "& svg": {
-        border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
+        borderColor: uikitStyles.theme.colors.secondary_60,
         backgroundColor: uikitStyles.theme.colors.secondary_60,
         color: uikitStyles.theme.colors.atmo3
       }
@@ -61,7 +62,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
   },
   semantic: {
     "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.base_dark}`,
+      borderColor: uikitStyles.theme.colors.base_dark,
       backgroundColor: uikitStyles.theme.colors.base_light
     }
   }

package/dist/cjs/BulkActions/BulkActions.cjs

@@ -3,10 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const CounterLabel = require("../utils/CounterLabel.cjs");
 const setId = require("../utils/setId.cjs");
 const BulkActions_styles = require("./BulkActions.styles.cjs");
 const Button = require("../Button/Button.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const CheckBox = require("../CheckBox/CheckBox.cjs");
 const ActionsGeneric = require("../ActionsGeneric/ActionsGeneric.cjs");
 const HvBulkActions = React.forwardRef(function HvBulkActions2(props, ref) {
@@ -21,7 +21,6 @@ const HvBulkActions = React.forwardRef(function HvBulkActions2(props, ref) {
     actions,
     numTotal = 0,
     numSelected = 0,
-    selectAllLabel = "All",
     selectAllConjunctionLabel = "/",
     showSelectAllPages = false,
     semantic = true,
@@ -36,21 +35,6 @@ const HvBulkActions = React.forwardRef(function HvBulkActions2(props, ref) {
   const { activeTheme } = uikitReactUtils.useTheme();
   const anySelected = numSelected > 0;
   const isSemantic = semantic && anySelected;
-  const selectAllLabelComponent = /* @__PURE__ */ jsxRuntime.jsx(
-    Typography.HvTypography,
-    {
-      component: "span",
-      disabled: checkboxProps?.disabled,
-      variant: "body",
-      children: !anySelected ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", children: selectAllLabel }),
-        ` (${numTotal})`
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", children: numSelected }),
-        ` ${selectAllConjunctionLabel} ${numTotal}`
-      ] })
-    }
-  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -73,7 +57,14 @@ const HvBulkActions = React.forwardRef(function HvBulkActions2(props, ref) {
               semantic: isSemantic,
               onChange: onSelectAll,
               indeterminate: numSelected > 0 && numSelected < numTotal,
-              label: selectAllLabelComponent,
+              label: /* @__PURE__ */ jsxRuntime.jsx(
+                CounterLabel.CounterLabel,
+                {
+                  selected: numSelected,
+                  total: numTotal,
+                  conjunctionLabel: selectAllConjunctionLabel
+                }
+              ),
               ...checkboxProps
             }
           ),

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

@@ -5,6 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
+const CounterLabel = require("../utils/CounterLabel.cjs");
 const multiSelectionEventHandler = require("../utils/multiSelectionEventHandler.cjs");
 const setId = require("../utils/setId.cjs");
 const CheckBoxGroup_styles = require("./CheckBoxGroup.styles.cjs");
@@ -49,7 +50,6 @@ const HvCheckBoxGroup = React.forwardRef(
       disabled,
       showSelectAll,
       orientation = "vertical",
-      selectAllLabel = "All",
       selectAllConjunctionLabel = "/",
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
@@ -166,13 +166,6 @@ const HvCheckBoxGroup = React.forwardRef(
         return newValue;
       });
     };
-    const selectAllLabelComponent = selectedCount === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectAllLabel }),
-      ` (${React.Children.toArray(children).length})`
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectedCount }),
-      ` ${selectAllConjunctionLabel} ${React.Children.toArray(children).length}`
-    ] });
     const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
     const errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -219,7 +212,14 @@ const HvCheckBoxGroup = React.forwardRef(
                   {
                     checked: selectAllState === "all",
                     indeterminate: selectAllState === "some",
-                    label: selectAllLabelComponent,
+                    label: /* @__PURE__ */ jsxRuntime.jsx(
+                      CounterLabel.CounterLabel,
+                      {
+                        selected: selectedCount,
+                        total: React.Children.count(children),
+                        conjunctionLabel: selectAllConjunctionLabel
+                      }
+                    ),
                     disabled,
                     readOnly,
                     className: classes.selectAll,

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}`
-        ]
+        })
       }
     );
   };