@hitachivantara/uikit-react-core 5.87.0 → 5.87.2

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const CounterLabel = require("../../utils/CounterLabel.cjs");
 const setId = require("../../utils/setId.cjs");
 const FilterGroupContext = require("../FilterGroupContext.cjs");
 const RightPanel_styles = require("./RightPanel.styles.cjs");
-const Typography = require("../../Typography/Typography.cjs");
 const CheckBox = require("../../CheckBox/CheckBox.cjs");
 const Panel = require("../../Panel/Panel.cjs");
 const Input = require("../../Input/Input.cjs");
@@ -32,8 +32,8 @@ const HvFilterGroupRightPanel = ({
       (option) => option.name.toLowerCase().includes(searchStr.toLowerCase())
     );
     return {
-      all: filteredOptions.map((option) => option.id) || [],
-      enabled: filteredOptions.filter((option) => !option.disabled).map((option) => option.id) || []
+      all: filteredOptions?.map((option) => option.id) || [],
+      enabled: filteredOptions?.filter((option) => !option.disabled)?.map((option) => option.id) || []
     };
   }, [filterOptions, activeGroup, searchStr]);
   const activeFilterValues = React.useMemo(
@@ -95,19 +95,18 @@ const HvFilterGroupRightPanel = ({
     searchStr
   ]);
   const SelectAll = React.useCallback(() => {
-    const nbrSelected = activeFilterValues?.length;
-    const defaultLabel = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: nbrSelected > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: nbrSelected }),
-      ` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: labels?.selectAll }),
-      ` (${allActiveGroupOptions.length})`
-    ] }) });
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.selectAllContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
       CheckBox.HvCheckBox,
       {
         id: setId.setId(id, "select-all"),
-        label: defaultLabel,
+        label: /* @__PURE__ */ jsxRuntime.jsx(
+          CounterLabel.CounterLabel,
+          {
+            selected: activeFilterValues?.length,
+            total: allActiveGroupOptions.length,
+            conjunctionLabel: labels?.multiSelectionConjunction
+          }
+        ),
         onChange: () => handleSelectAll(),
         className: classes.selectAll,
         indeterminate: anySelected && !allSelected,

package/dist/cjs/Radio/Radio.cjs

@@ -126,6 +126,7 @@ const HvRadio = React.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Label.HvLabel,
                   {
+                    noWrap: true,
                     id: setId.setId(elementId, "label"),
                     htmlFor: setId.setId(elementId, "input"),
                     label,
@@ -136,7 +137,7 @@ const HvRadio = React.forwardRef(
               ]
             }
           ) : radio,
-          canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableBorder: true, children: statusMessage })
+          canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), children: statusMessage })
         ]
       }
     );

package/dist/cjs/Radio/Radio.styles.cjs

@@ -8,50 +8,30 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
   container: {
     cursor: "pointer",
     display: "flex",
-    height: "32px",
-    transitionProperty: "background-color",
-    transitionDuration: "150ms",
-    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-    transitionDelay: "0ms",
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
-      borderRadius: uikitStyles.theme.radii.base
-    }
-  },
-  invalidContainer: {
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`,
-    "&:hover": {
-      borderBottomLeftRadius: "0px",
-      borderBottomRightRadius: "0px"
+    alignItems: "center",
+    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+    borderRadius: uikitStyles.theme.radii.base,
+    ":hover:not($disabled)": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
     }
   },
+  invalidContainer: {},
   disabled: {
     cursor: "not-allowed",
     "& $label": { color: uikitStyles.theme.colors.secondary_60, cursor: "not-allowed" }
   },
   radio: {
-    height: "32px",
     "& svg": {
       outline: "none",
       boxShadow: "none"
     }
   },
-  invalidRadio: {
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`,
-    "&:hover": {
-      borderBottomLeftRadius: "0px",
-      borderBottomRightRadius: "0px"
-    }
-  },
+  invalidRadio: {},
   label: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
     verticalAlign: "middle",
     paddingRight: uikitStyles.theme.space.xs,
-    whiteSpace: "nowrap",
     ...uikitStyles.theme.typography.body,
     cursor: "pointer",
-    height: "32px",
     lineHeight: "32px",
     width: "100%"
   },

package/dist/cjs/Table/TableCell/TableCell.styles.cjs

@@ -8,8 +8,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
     verticalAlign: "inherit",
     alignContent: "inherit",
     textAlign: "left",
+    borderColor: uikitStyles.theme.colors.atmo4,
     padding: `calc(${uikitStyles.theme.space.xs} - 2px ) ${uikitStyles.theme.space.xs} calc(${uikitStyles.theme.space.xs} - 3px ) ${uikitStyles.theme.spacing(4)}`,
-    borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`
+    borderBottomWidth: 1
   },
   /** Styles applied to the cell when it's in the table head. */
   head: {
@@ -18,7 +19,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
     alignContent: "start",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     borderTop: "1px solid transparent",
-    borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
     ...uikitStyles.theme.typography.label
   },
   /** Styles applied to the cell when it's in the table body. */
@@ -63,7 +63,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   /** Styles applied to the component root when its variant is actions */
   variantActions: {
@@ -71,7 +71,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderLeftWidth: 1
   },
   /** Styles applied to the component root when its variant is expand */
   variantExpand: {
@@ -86,7 +86,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
       height: 52
     },
     padding: "0, 0, 0, 32px",
-    border: 0
+    borderWidth: 0
   },
   /** Styles applied to the cell when its variant is list and the type is head. */
   variantListHead: {
@@ -124,40 +124,40 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   },
   /** Styles applied to the cell when it's part of the last sticky to the left column. */
   stickyColumnMostLeft: {
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   /** Styles applied to the cell when it's part of the first right sticky column. */
   stickyColumnLeastRight: {
-    borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderLeftWidth: 1
   },
   /** Styles applied to the cell when it's part of the first column in the group. */
   groupColumnMostLeft: {
-    borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+    borderLeftWidth: 1,
     "&:first-of-type": {
-      borderLeft: 0
+      borderLeftWidth: 0
     }
   },
   /** Styles applied to the cell when it's part of the last column in the group. */
   groupColumnMostRight: {
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+    borderRightWidth: 1,
     // due to the ":has()" selector not being supported in browsers,
     // this need to be managed with inline styles
     // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)
     // "&:last-child,&:has(+ $stickyColumnLeastRight)": {
     "&:last-child": {
-      borderRight: 0
+      borderRightWidth: 0
     },
     "&+:not($stickyColumn)": {
-      borderLeft: 0
+      borderLeftWidth: 0
     }
   },
   /** Styles applied to the cell when it's part of a resizable column. */
   resizable: {
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   /** Styles applied to the cell when it's part of a resizing column. */
   resizing: {
-    borderRight: `solid 2px ${uikitStyles.theme.colors.primary_80}`
+    borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}`
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Table/TableHeader/TableHeader.styles.cjs

@@ -11,7 +11,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     alignContent: "inherit",
     textAlign: "left",
     padding: uikitStyles.theme.spacing(0, 1, 0, 4),
-    borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`
+    borderColor: uikitStyles.theme.colors.atmo4,
+    borderBottomWidth: 1
   },
   head: {
     paddingTop: 8,
@@ -19,14 +20,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     alignContent: "start",
     ...uikitStyles.theme.typography.label,
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    borderBottomWidth: 1,
     "*:first-of-type > &": {
       height: "var(--first-row-cell-height)",
       borderTop: "1px solid transparent"
     },
     "&$variantList": {
       backgroundColor: "inherit",
-      borderBottom: 0,
+      borderBottomWidth: 0,
       "*:first-of-type > &": {
         borderTop: 0
       }
@@ -60,23 +61,23 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     position: "sticky",
     zIndex: 2,
     "&$groupColumnMostRight+$stickyColumn": {
-      borderLeft: 0
+      borderLeftWidth: 0
     }
   },
-  stickyColumnMostLeft: { borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}` },
-  stickyColumnLeastRight: { borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}` },
-  groupColumnMostLeft: { borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}` },
+  stickyColumnMostLeft: { borderRightWidth: 1 },
+  stickyColumnLeastRight: { borderLeftWidth: 1 },
+  groupColumnMostLeft: { borderLeftWidth: 1 },
   groupColumnMostRight: {
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+    borderRightWidth: 1,
     // due to the ":has()" selector not being supported in browsers,
     // this need to be managed with inline styles
     // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)
     // "&:last-child,&:has(+ $stickyColumnLeastRight)": {
     "&:last-child": {
-      borderRight: 0
+      borderRightWidth: 0
     },
     "&+:not($stickyColumn)": {
-      borderLeft: 0
+      borderLeftWidth: 0
     }
   },
   headerContent: { display: "flex", alignItems: "flex-start", width: "100%" },
@@ -108,27 +109,27 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   variantExpand: {},
   variantActions: {
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+    borderLeftWidth: 1
   },
   variantNone: { padding: 0 },
   variantList: {
     backgroundColor: "inherit",
-    borderBottom: 0,
+    borderBottomWidth: 0,
     height: 16,
     ":first-of-type > &": {
-      borderTop: 0,
+      borderTopWidth: 0,
       height: 16
     }
   },
   resizable: {
-    borderRight: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    borderRightWidth: 1,
     ":has($resizer:hover)": {
       borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}`
     }

package/dist/cjs/utils/CounterLabel.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const CounterLabel = ({
+  selected,
+  total,
+  conjunctionLabel = "/"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("b", { children: selected }),
+    " ",
+    ` ${conjunctionLabel} ${total}`
+  ] });
+};
+exports.CounterLabel = CounterLabel;

package/dist/esm/BaseRadio/BaseRadio.styles.js

@@ -16,7 +16,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
       width: 16,
       height: 16,
       borderRadius: theme.radii.circle,
-      border: `1px solid ${theme.colors.secondary}`,
+      borderWidth: 1,
+      borderColor: theme.colors.secondary,
       backgroundColor: theme.colors.atmo1
     },
     borderRadius: 0
@@ -25,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
     cursor: "not-allowed",
     pointerEvents: "initial",
     "& svg": {
-      border: `1px solid ${theme.colors.secondary_60}`,
+      borderColor: theme.colors.secondary_60,
       backgroundColor: theme.colors.atmo3
     }
   },
@@ -38,20 +39,20 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
   icon: {},
   checked: {
     "& svg": {
-      border: `1px solid ${theme.colors.secondary}`,
+      borderColor: theme.colors.secondary,
       backgroundColor: theme.colors.secondary,
       color: theme.colors.atmo2
     },
     "&$semantic": {
       "& svg": {
-        border: `1px solid ${theme.colors.base_dark}`,
+        borderColor: theme.colors.base_dark,
         backgroundColor: theme.colors.base_light,
         color: theme.colors.base_dark
       }
     },
     "&$disabled": {
       "& svg": {
-        border: `1px solid ${theme.colors.secondary_60}`,
+        borderColor: theme.colors.secondary_60,
         backgroundColor: theme.colors.secondary_60,
         color: theme.colors.atmo3
       }
@@ -59,7 +60,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
   },
   semantic: {
     "& svg": {
-      border: `1px solid ${theme.colors.base_dark}`,
+      borderColor: theme.colors.base_dark,
       backgroundColor: theme.colors.base_light
     }
   }

package/dist/esm/BaseRadio/BaseRadio.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.styles.js","sources":["../../../src/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    cursor: \"pointer\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      borderRadius: theme.radii.circle,\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.atmo1,\n    },\n    borderRadius: 0,\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      backgroundColor: theme.colors.atmo3,\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      borderRadius: \"8px\",\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo2,\n    },\n    \"&$semantic\": {\n      \"& svg\": {\n        border: `1px solid ${theme.colors.base_dark}`,\n        backgroundColor: theme.colors.base_light,\n        color: theme.colors.base_dark,\n      },\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: theme.colors.secondary_60,\n        color: theme.colors.atmo3,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.base_dark}`,\n      backgroundColor: theme.colors.base_light,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,cAAc;AAAA,MACd,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,QAC3C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IAExB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,QAC9C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IACtB;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;"}
+{"version":3,"file":"BaseRadio.styles.js","sources":["../../../src/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    cursor: \"pointer\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      borderRadius: theme.radii.circle,\n      borderWidth: 1,\n      borderColor: theme.colors.secondary,\n      backgroundColor: theme.colors.atmo1,\n    },\n    borderRadius: 0,\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      borderColor: theme.colors.secondary_60,\n      backgroundColor: theme.colors.atmo3,\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      borderRadius: \"8px\",\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      borderColor: theme.colors.secondary,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo2,\n    },\n    \"&$semantic\": {\n      \"& svg\": {\n        borderColor: theme.colors.base_dark,\n        backgroundColor: theme.colors.base_light,\n        color: theme.colors.base_dark,\n      },\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        borderColor: theme.colors.secondary_60,\n        backgroundColor: theme.colors.secondary_60,\n        color: theme.colors.atmo3,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      borderColor: theme.colors.base_dark,\n      backgroundColor: theme.colors.base_light,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,MAAM,MAAM;AAAA,MAC1B,aAAa;AAAA,MACb,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,MACP,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,cAAc;AAAA,MACd,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IAExB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IACtB;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;"}

package/dist/esm/BulkActions/BulkActions.js

@@ -1,11 +1,11 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { CounterLabel } from "../utils/CounterLabel.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./BulkActions.styles.js";
 import { staticClasses } from "./BulkActions.styles.js";
 import { HvButton } from "../Button/Button.js";
-import { HvTypography } from "../Typography/Typography.js";
 import { HvCheckBox } from "../CheckBox/CheckBox.js";
 import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
 const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
@@ -20,7 +20,6 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
     actions,
     numTotal = 0,
     numSelected = 0,
-    selectAllLabel = "All",
     selectAllConjunctionLabel = "/",
     showSelectAllPages = false,
     semantic = true,
@@ -35,21 +34,6 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
   const { activeTheme } = useTheme();
   const anySelected = numSelected > 0;
   const isSemantic = semantic && anySelected;
-  const selectAllLabelComponent = /* @__PURE__ */ jsx(
-    HvTypography,
-    {
-      component: "span",
-      disabled: checkboxProps?.disabled,
-      variant: "body",
-      children: !anySelected ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: selectAllLabel }),
-        ` (${numTotal})`
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: numSelected }),
-        ` ${selectAllConjunctionLabel} ${numTotal}`
-      ] })
-    }
-  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -72,7 +56,14 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
               semantic: isSemantic,
               onChange: onSelectAll,
               indeterminate: numSelected > 0 && numSelected < numTotal,
-              label: selectAllLabelComponent,
+              label: /* @__PURE__ */ jsx(
+                CounterLabel,
+                {
+                  selected: numSelected,
+                  total: numTotal,
+                  conjunctionLabel: selectAllConjunctionLabel
+                }
+              ),
               ...checkboxProps
             }
           ),

package/dist/esm/BulkActions/BulkActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.js","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /** Custom label for select all checkbox */\n  selectAllLabel?: React.ReactNode;\n  /** Custom label for select all checkbox conjunction */\n  selectAllConjunctionLabel?: string;\n  /** Custom label for select all pages button */\n  selectAllPagesLabel?: React.ReactNode;\n  /** Whether select all pages element should be visible */\n  showSelectAllPages?: boolean;\n  /** The total number of elements */\n  numTotal?: number;\n  /** The number of elements currently selected */\n  numSelected?: number;\n  /** Function called when the \"select all\" Checkbox is toggled. */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /** Function called when the \"select all pages\" button is clicked toggled. */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /** Whether the bulk actions should use the semantic styles when there are selected elements. */\n  semantic?: boolean;\n  /** The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /** Whether actions should be all disabled */\n  actionsDisabled?: boolean;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. */\n  checkboxProps?: HvCheckBoxProps;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvBulkActionsProps\n>(function HvBulkActions(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        variant={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n});\n"],"names":["HvBulkActions"],"mappings":";;;;;;;;;;AA8DO,MAAM,gBAAgB,WAG3B,SAASA,eAAc,OAAO,KAAK;AAC7B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,YAAY,IAAI,SAAS;AAEjC,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAE/B,QAAM,0BACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAQ;AAAA,MAEP,UAAA,CAAC,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAe,gBAAA;AAAA,QAC7C,KAAK,QAAQ;AAAA,MAAA,EAAA,CAChB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAY,aAAA;AAAA,QAC1C,IAAI,yBAAyB,IAAI,QAAQ;AAAA,MAAA,EAC5C,CAAA;AAAA,IAAA;AAAA,EAEJ;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OAAO;AAAA,cACN,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UAChD,EACF,CAAA;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,SACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"BulkActions.js","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { CounterLabel } from \"../utils/CounterLabel\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /** Custom label for select all checkbox. @deprecated no longer used */\n  selectAllLabel?: React.ReactNode;\n  /** Custom label for select all checkbox conjunction */\n  selectAllConjunctionLabel?: string;\n  /** Custom label for select all pages button */\n  selectAllPagesLabel?: React.ReactNode;\n  /** Whether select all pages element should be visible */\n  showSelectAllPages?: boolean;\n  /** The total number of elements */\n  numTotal?: number;\n  /** The number of elements currently selected */\n  numSelected?: number;\n  /** Function called when the \"select all\" Checkbox is toggled. */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /** Function called when the \"select all pages\" button is clicked toggled. */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /** Whether the bulk actions should use the semantic styles when there are selected elements. */\n  semantic?: boolean;\n  /** The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /** Whether actions should be all disabled */\n  actionsDisabled?: boolean;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. */\n  checkboxProps?: HvCheckBoxProps;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvBulkActionsProps\n>(function HvBulkActions(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={\n            <CounterLabel\n              selected={numSelected}\n              total={numTotal}\n              conjunctionLabel={selectAllConjunctionLabel}\n            />\n          }\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        variant={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n});\n"],"names":["HvBulkActions"],"mappings":";;;;;;;;;;AA8DO,MAAM,gBAAgB,WAG3B,SAASA,eAAc,OAAO,KAAK;AAC7B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,YAAY,IAAI,SAAS;AAEjC,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAG7B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,UAAU;AAAA,kBACV,OAAO;AAAA,kBACP,kBAAkB;AAAA,gBAAA;AAAA,cACpB;AAAA,cAED,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UAChD,EACF,CAAA;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,SACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}