@hitachivantara/uikit-react-core 5.87.2 → 5.88.0

package/dist/cjs/FormElement/Adornment/Adornment.cjs

@@ -6,68 +6,47 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const context = require("../context.cjs");
 const Adornment_styles = require("./Adornment.styles.cjs");
 const ButtonBase = require("../../ButtonBase/ButtonBase.cjs");
-const noop = () => {
-};
 const HvAdornment = React.forwardRef(function HvAdornment2(props, ref) {
   const {
-    id,
     classes: classesProp,
     className,
     icon,
     showWhen,
     onClick,
     isVisible,
+    tabIndex,
     ...others
   } = uikitReactUtils.useDefaultProps("HvAdornment", props);
   const { classes, cx } = Adornment_styles.useClasses(classesProp);
   const { status, disabled } = React.useContext(context.HvFormElementContext);
   const { input } = React.useContext(context.HvFormElementDescriptorsContext);
   const displayIcon = isVisible ?? (showWhen == null || status === showWhen);
-  const isClickable = !!onClick;
-  return isClickable ? /* @__PURE__ */ jsxRuntime.jsx(
-    ButtonBase.HvButtonBase,
+  const Component = onClick ? ButtonBase.HvButtonBase : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
     {
-      id,
-      focusableWhenDisabled: true,
       ref,
-      type: "button",
-      tabIndex: -1,
-      "aria-controls": input?.[0]?.id,
+      "aria-hidden": tabIndex == null || tabIndex < 0 ? true : void 0,
       className: cx(
         classes.root,
         classes.adornment,
-        classes.adornmentButton,
+        classes.icon,
+        onClick ? classes.adornmentButton : classes.adornmentIcon,
         {
           [classes.hideIcon]: !displayIcon,
           [classes.disabled]: disabled
         },
         className
       ),
-      onClick,
-      onMouseDown: (event) => event.preventDefault(),
-      onKeyDown: noop,
-      disabled,
+      ...onClick && {
+        disabled,
+        tabIndex: tabIndex ?? -1,
+        "aria-controls": input?.[0]?.id,
+        onClick,
+        onMouseDown: (event) => event.preventDefault()
+      },
       ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: icon })
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      id,
-      ref,
-      className: cx(
-        classes.root,
-        classes.adornment,
-        classes.adornmentIcon,
-        {
-          [classes.hideIcon]: !displayIcon,
-          [classes.disabled]: disabled
-        },
-        className
-      ),
-      role: "presentation",
-      ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.icon, children: icon })
+      children: icon
     }
   );
 });

package/dist/cjs/FormElement/Adornment/Adornment.styles.cjs

@@ -2,27 +2,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAdornment", {
-  root: {},
-  icon: { width: 32, height: 32 },
-  adornment: {
-    backgroundColor: "transparent",
-    border: "none",
-    padding: 0,
-    margin: 0
+  root: {
+    width: 32,
+    height: 30
   },
-  adornmentIcon: { cursor: "default", pointerEvents: "none" },
+  /** @deprecated use `classes.root` */
+  icon: {},
+  /** @deprecated use `classes.root` */
+  adornment: {},
+  /** @deprecated use `classes.root` */
+  adornmentIcon: {},
   hideIcon: { display: "none" },
-  adornmentButton: {
-    cursor: "pointer",
-    "&:focus": {
-      ...focusUtils.outlineStyles
-    }
-  },
+  /** @deprecated use `classes.root` */
+  adornmentButton: {},
   disabled: {
-    "&$adornmentButton": { cursor: "not-allowed" },
-    "&$adornmentIcon": { cursor: "not-allowed" },
     "& svg *.color0": { fill: uikitStyles.theme.colors.secondary_60 }
   }
 });

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

@@ -54,7 +54,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     id,
     name,
     value: valueProp,
-    defaultValue = "",
+    defaultValue,
     required,
     readOnly,
     disabled,
@@ -99,8 +99,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   const suggestionsRef = React.useRef(null);
   const [focused, setFocused] = React.useState(false);
   const isDirty = React.useRef(false);
-  const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
-  const isEmptyValue = value == null || value === "";
+  const isEmptyValue = !inputRef.current?.value;
   const [validationState, setValidationState] = useControlled.useControlled(
     status,
     utils$1.validationStates.standBy
@@ -124,7 +123,6 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   const performValidation = React.useCallback(() => {
     const inputValidity = validations.validateInput(
       inputRef.current,
-      String(value),
       required,
       minCharQuantity,
       maxCharQuantity,
@@ -145,8 +143,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     setValidationMessage,
     setValidationState,
     validation,
-    validationType,
-    value
+    validationType
   ]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && validations.hasBuiltInValidations(
     required,
@@ -200,7 +197,6 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
   };
   const onChangeHandler = (event, newValue) => {
     isDirty.current = true;
-    setValue(newValue);
     onChange?.(event, newValue);
     if (canShowSuggestions) {
       suggestionHandler(newValue);
@@ -210,12 +206,12 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;
     setFocused(false);
     const inputValidity = performValidation();
-    onBlur?.(event, String(value), inputValidity);
+    onBlur?.(event, event.target.value, inputValidity);
   };
   const onFocusHandler = (event) => {
     setFocused(true);
     setValidationState(utils$1.validationStates.standBy);
-    onFocus?.(event, String(value));
+    onFocus?.(event, event.target.value);
   };
   const getSuggestions = (li) => {
     const listEl = document.getElementById(
@@ -232,13 +228,14 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     }
   };
   const onKeyDownHandler = (event) => {
+    const { value } = event.currentTarget;
     if (keyboardUtils.isKey(event, "ArrowDown") && hasSuggestions) {
       const li = getSuggestions(0);
       li?.focus();
     } else if (keyboardUtils.isKey(event, "Enter")) {
-      onEnter?.(event, String(value));
+      onEnter?.(event, value);
     }
-    onKeyDown?.(event, String(value));
+    onKeyDown?.(event, value);
   };
   const onContainerBlurHandler = (event) => {
     if (event.relatedTarget) {
@@ -248,8 +245,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
       }, 10);
     }
   };
-  const hasOnEnter = onEnter != null;
-  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState !== utils$1.validationStates.standBy);
+  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!onEnter || type !== "search" || disableSearchButton || validationState !== utils$1.validationStates.standBy);
   const showSearchIcon = type === "search" && !disableSearchButton;
   const showRevealPasswordButton = type === "password" && !disableRevealPassword;
   const handleClear = React.useCallback(
@@ -289,42 +285,27 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     elementId,
     cx
   ]);
-  const handleSearch = React.useCallback(
-    (event) => {
-      onEnter?.(event, String(value));
-    },
-    [onEnter, value]
-  );
   const searchButton = React.useMemo(() => {
-    const reallyShowIt = showSearchIcon && (isEmptyValue || hasOnEnter && validationState === utils$1.validationStates.standBy);
-    if (!reallyShowIt) {
-      return null;
-    }
+    const reallyShowIt = showSearchIcon && (isEmptyValue || onEnter && validationState === utils$1.validationStates.standBy);
+    if (!reallyShowIt) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Adornment.HvAdornment,
       {
         className: classes.adornmentButton,
-        onClick: hasOnEnter ? handleSearch : void 0,
-        "aria-label": labels?.searchButtonLabel,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Search, {})
+        onClick: onEnter && ((evt) => onEnter?.(evt, inputRef.current?.value ?? "")),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Search, { title: labels.searchButtonLabel })
       }
     );
   }, [
     showSearchIcon,
     isEmptyValue,
-    hasOnEnter,
+    onEnter,
     validationState,
     classes.adornmentButton,
-    handleSearch,
-    labels?.searchButtonLabel
+    labels.searchButtonLabel
   ]);
-  const handleRevealPassword = React.useCallback(() => {
-    setRevealPassword(!revealPassword);
-  }, [revealPassword]);
   const revealPasswordButton = React.useMemo(() => {
-    if (!showRevealPasswordButton) {
-      return null;
-    }
+    if (!showRevealPasswordButton) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Tooltip.HvTooltip,
       {
@@ -335,10 +316,12 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
           Adornment.HvAdornment,
           {
             className: classes.adornmentButton,
-            onClick: handleRevealPassword,
+            onClick: () => setRevealPassword((s) => !s),
             "aria-label": labels?.revealPasswordButtonLabel,
             "aria-controls": setId.setId(elementId, "input"),
-            icon: revealPassword ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.PreviewOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Preview, {})
+            icon: revealPassword ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.PreviewOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Preview, {}),
+            tabIndex: 0,
+            ...{ selected: revealPassword }
           }
         )
       }
@@ -350,28 +333,23 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
     labels?.revealPasswordButtonClickToShowTooltip,
     labels?.revealPasswordButtonLabel,
     classes.adornmentButton,
-    handleRevealPassword,
     elementId
   ]);
   const validationIcon = React.useMemo(() => {
-    if (!showValidationIcon) {
-      return null;
-    }
-    if (!utils$1.isValid(validationState)) {
-      return null;
-    }
+    if (!showValidationIcon) return null;
+    if (!utils$1.isValid(validationState)) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { color: "positive", className: classes.icon });
   }, [showValidationIcon, validationState, classes.icon]);
   const customIconEl = React.useMemo(
-    () => React.isValidElement(endAdornment) && React.cloneElement(endAdornment, {
+    () => React.isValidElement(endAdornment) ? React.cloneElement(endAdornment, {
       className: cx(endAdornment.props.className, classes.icon)
-    }),
+    }) : endAdornment,
     [classes.icon, endAdornment, cx]
   );
   const adornments = React.useMemo(() => {
     if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
       return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.adornmentsBox, "aria-hidden": "true", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.adornmentsBox, children: [
       clearButton,
       revealPasswordButton,
       searchButton,
@@ -435,7 +413,8 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
           {
             id: hasLabel || showClear || showRevealPasswordButton ? setId.setId(elementId, "input") : setId.setId(id, "input"),
             name,
-            value,
+            value: valueProp,
+            defaultValue,
             required,
             readOnly,
             disabled,
@@ -448,11 +427,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: {
@@ -462,13 +440,12 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
               "aria-errormessage": errorMessageId,
               "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description ? setId.setId(elementId, "description") : void 0,
               "aria-controls": canShowSuggestions ? setId.setId(elementId, "suggestions") : void 0,
-              ref: inputRef,
               // prevent browsers auto-fill/suggestions when we have our own
               autoComplete: canShowSuggestions ? "off" : void 0,
               onFocus: (event) => {
                 inputProps.onFocus?.(event);
                 if (canShowSuggestions && suggestOnFocus) {
-                  suggestionHandler(String(value));
+                  suggestionHandler(event.currentTarget.value);
                 }
               },
               onClick: (event) => {
@@ -477,7 +454,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
               },
               ...inputProps
             },
-            inputRef: forkedRef,
+            ref: forkedRef,
             endAdornment: adornments,
             ...others
           }

package/dist/cjs/Input/Input.styles.cjs

@@ -13,6 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
     display: "flex",
     flexDirection: "row",
     height: "30px",
+    alignItems: "center",
     justifyContent: "center",
     marginRight: 1
   },
@@ -35,18 +36,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
     backgroundColor: uikitStyles.theme.colors.atmo1,
     boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
   },
-  input: {
-    "&::-ms-clear": {
-      display: "none"
-    }
-  },
+  input: {},
   inputRoot: {
-    ":hover": {
-      "& $iconClear": {
-        display: "block"
-      }
-    },
-    ":focus-within $iconClear": {
+    ":is(:hover,:focus-within) $iconClear": {
       display: "block"
     }
   },
@@ -55,15 +47,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
       display: "block"
     }
   },
-  inputRootDisabled: {
-    cursor: "not-allowed"
-  },
+  inputRootDisabled: {},
   inputRootMultiline: { padding: 0 },
-  inputBorderContainer: {
-    "$hasSuggestions &": {
-      display: "none"
-    }
-  },
+  /** @deprecated unused. use `::after` instead */
+  inputBorderContainer: {},
   error: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/List/List.cjs

@@ -5,19 +5,21 @@ const React = require("react");
 const reactWindow = require("react-window");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const CounterLabel = require("../utils/CounterLabel.cjs");
 const setId = require("../utils/setId.cjs");
 const List_styles = require("./List.styles.cjs");
 const useSelectableList = require("./useSelectableList.cjs");
 const utils = require("./utils.cjs");
 const CheckBox = require("../CheckBox/CheckBox.cjs");
+const Radio = require("../Radio/Radio.cjs");
 const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
 const Link = require("../Link/Link.cjs");
-const Radio = require("../Radio/Radio.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const DEFAULT_LABELS = {
+  /** The label used for the All checkbox action. @deprecated no longer used */
   selectAll: "Select All",
+  /** The label used in the middle of the multi-selection count. */
   selectionConjunction: "/"
 };
 const HvList = (props) => {
@@ -89,22 +91,20 @@ const HvList = (props) => {
     }) : null;
   };
   const renderSelectAll = () => {
-    const { selectAll, selectionConjunction } = labels;
     const anySelected2 = !!selection?.length;
     const allSelected = selection.length === list.length;
-    const selectionLabel = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: !anySelected2 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectAll }),
-      ` (${list.length})`
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selection.length }),
-      ` ${selectionConjunction} `,
-      list.length
-    ] }) });
     return /* @__PURE__ */ jsxRuntime.jsx(
       CheckBox.HvCheckBox,
       {
         id: setId.setId(id, "select-all"),
-        label: selectionLabel,
+        label: /* @__PURE__ */ jsxRuntime.jsx(
+          CounterLabel.CounterLabel,
+          {
+            selected: selection.length,
+            total: list.length,
+            conjunctionLabel: labels.selectionConjunction
+          }
+        ),
         onChange: handleSelectAll,
         className: classes.selectAllSelector,
         indeterminate: anySelected2 && !allSelected,

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const Input_styles = require("../Input/Input.styles.cjs");
+require("../Input/Input.cjs");
 const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
 require("../BaseDropdown/BaseDropdown.cjs");
-const Input_styles = require("../Input/Input.styles.cjs");
 const hoverColor = uikitStyles.theme.colors.atmo3;
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */

package/dist/cjs/Pagination/Select.cjs

@@ -4,10 +4,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Select_styles = require("./Select.styles.cjs");
-const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
 const Panel = require("../Panel/Panel.cjs");
 const SelectionList = require("../SelectionList/SelectionList.cjs");
+const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const Option = ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.HvListItem, { ...props });
 const HvSelect = (props) => {
   const {

package/dist/cjs/Select/Select.styles.cjs

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
   disabled: {},
   readOnly: {},
   invalid: {
-    border: `1px solid ${uikitStyles.theme.colors.negative_120}`
+    borderColor: uikitStyles.theme.colors.negative_120
   },
   labelContainer: {
     display: "flex",