@hitachivantara/uikit-react-core 5.87.1 → 5.87.2

package/dist/esm/CheckBoxGroup/CheckBoxGroup.js

@@ -1,8 +1,9 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useMemo, Children, useCallback, cloneElement } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { CounterLabel } from "../utils/CounterLabel.js";
 import { multiSelectionEventHandler } from "../utils/multiSelectionEventHandler.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./CheckBoxGroup.styles.js";
@@ -48,7 +49,6 @@ const HvCheckBoxGroup = forwardRef(
       disabled,
       showSelectAll,
       orientation = "vertical",
-      selectAllLabel = "All",
       selectAllConjunctionLabel = "/",
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
@@ -165,13 +165,6 @@ const HvCheckBoxGroup = forwardRef(
         return newValue;
       });
     };
-    const selectAllLabelComponent = selectedCount === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("b", { children: selectAllLabel }),
-      ` (${Children.toArray(children).length})`
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("b", { children: selectedCount }),
-      ` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`
-    ] });
     const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
     const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
     return /* @__PURE__ */ jsxs(
@@ -218,7 +211,14 @@ const HvCheckBoxGroup = forwardRef(
                   {
                     checked: selectAllState === "all",
                     indeterminate: selectAllState === "some",
-                    label: selectAllLabelComponent,
+                    label: /* @__PURE__ */ jsx(
+                      CounterLabel,
+                      {
+                        selected: selectedCount,
+                        total: Children.count(children),
+                        conjunctionLabel: selectAllConjunctionLabel
+                      }
+                    ),
                     disabled,
                     readOnly,
                     className: classes.selectAll,

package/dist/esm/CheckBoxGroup/CheckBoxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  function HvCheckBoxGroup(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      label,\n      description,\n      status,\n      statusMessage,\n      defaultValue,\n      value: valueProp,\n      required,\n      readOnly,\n      disabled,\n      showSelectAll,\n      orientation = \"vertical\",\n      selectAllLabel = \"All\",\n      selectAllConjunctionLabel = \"/\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children),\n    );\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const selectionAnchor = useRef(undefined);\n\n    const [allValues, selectedState, selectedCount] = useMemo(() => {\n      const childValues: any[] = [];\n      const childSelectedState: boolean[] = [];\n      let childSelectedCounter = 0;\n\n      Children.toArray(children).forEach((child: any, i: number) => {\n        const childValue = child?.props?.value;\n        const childIsSelected = value.indexOf(childValue) !== -1;\n\n        childValues[i] = childValue;\n        childSelectedState[i] = childIsSelected;\n\n        if (childIsSelected) {\n          childSelectedCounter += 1;\n        }\n      });\n\n      return [childValues, childSelectedState, childSelectedCounter];\n    }, [children, value]);\n\n    const selectAllState = computeSelectAllState(\n      value.length,\n      selectedState.length,\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        index: number,\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n      ) => {\n        const newValue = multiSelectionEventHandler(\n          event,\n          index,\n          selectionAnchor,\n          allValues,\n          selectedState,\n          isChecked,\n        );\n\n        childOnChange?.(event, isChecked);\n\n        onChange?.(event, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      },\n      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ],\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any, i: number) => {\n        const childIsSelected = selectedState[i];\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n          ) =>\n            onChildChangeInterceptor(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked,\n            ),\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      selectedState,\n    ]);\n\n    const handleSelectAll = (\n      event: React.ChangeEvent<HTMLInputElement>,\n      selectAllChecked: boolean,\n    ) => {\n      let newValue: any[];\n      if (selectAllState === \"some\") {\n        newValue = [];\n      } else if (selectAllChecked) {\n        newValue = [...allValues];\n      } else {\n        newValue = [];\n      }\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    };\n\n    const selectAllLabelComponent =\n      selectedCount === 0 ? (\n        <>\n          <b>{selectAllLabel}</b>\n          {` (${Children.toArray(children).length})`}\n        </>\n      ) : (\n        <>\n          <b>{selectedCount}</b>\n          {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n        </>\n      );\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            showGutter\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-disabled={disabled ? true : undefined}\n          aria-invalid={validationState === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            validationState === \"invalid\" ? errorMessageId : undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\n          {...others}\n        >\n          {showSelectAll && (\n            <HvCheckBox\n              checked={selectAllState === \"all\"}\n              indeterminate={selectAllState === \"some\"}\n              label={selectAllLabelComponent}\n              disabled={disabled}\n              readOnly={readOnly}\n              className={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvCheckBoxGroup"],"mappings":";;;;;;;;;;;;;;AA4BA,MAAM,wBAAwB,CAAC,UAAkB,UAAkB;AACjE,MAAI,aAAa,GAAG;AACX,WAAA;AAAA,EAAA;AAGT,MAAI,aAAa,OAAO;AACf,WAAA;AAAA,EAAA;AAGF,SAAA;AACT;AAEA,MAAM,+BAA+B,CAAC,aAA8B;AAClE,QAAM,iBAAiB,SAAS,QAAQ,QAAQ,EAC7C,IAAI,CAAC,UAAe;AACb,UAAA,oBAAoB,OAAO,OAAO,YAAY;AACpD,UAAM,kBAAkB,oBACpB,OAAO,OAAO,UACd,OAAO,OAAO;AAEX,WAAA,kBAAkB,OAAO,OAAO,QAAQ;AAAA,EAChD,CAAA,EACA,OAAO,CAAC,MAAM,MAAM,MAAS;AAEzB,SAAA;AACT;AA+FO,MAAM,kBAAkB;AAAA,EAC7B,SAASA,iBAAgB,OAAO,KAAK;AAC7B,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,4BAA4B;AAAA,MAC5B,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,UAAA,CAAC,OAAO,QAAQ,IAAI;AAAA,MACxB;AAAA,MACA,iBAAiB,SACb;AAAA;AAAA;AAAA,QAGA,MAAM,6BAA6B,QAAQ;AAAA;AAAA,IACjD;AAEM,UAAA,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,MAC5C;AAAA,MACA;AAAA,IACF;AAEA,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAE7D,UAAA,YAAY,YAAY,EAAE;AAE1B,UAAA,kBAAkB,OAAO,MAAS;AAExC,UAAM,CAAC,WAAW,eAAe,aAAa,IAAI,QAAQ,MAAM;AAC9D,YAAM,cAAqB,CAAC;AAC5B,YAAM,qBAAgC,CAAC;AACvC,UAAI,uBAAuB;AAE3B,eAAS,QAAQ,QAAQ,EAAE,QAAQ,CAAC,OAAY,MAAc;AACtD,cAAA,aAAa,OAAO,OAAO;AACjC,cAAM,kBAAkB,MAAM,QAAQ,UAAU,MAAM;AAEtD,oBAAY,CAAC,IAAI;AACjB,2BAAmB,CAAC,IAAI;AAExB,YAAI,iBAAiB;AACK,kCAAA;AAAA,QAAA;AAAA,MAC1B,CACD;AAEM,aAAA,CAAC,aAAa,oBAAoB,oBAAoB;AAAA,IAAA,GAC5D,CAAC,UAAU,KAAK,CAAC;AAEpB,UAAM,iBAAiB;AAAA,MACrB,MAAM;AAAA,MACN,cAAc;AAAA,IAChB;AAEA,UAAM,2BAA2B;AAAA,MAC/B,CACE,OACA,eAIA,OACA,cACG;AACH,cAAM,WAAW;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAEA,wBAAgB,OAAO,SAAS;AAEhC,mBAAW,OAAO,QAAQ;AAE1B,iBAAS,MAAM;AAGT,cAAA,YAAY,SAAS,WAAW,GAAG;AACrC,+BAAmB,SAAS;AAAA,UAAA,OACvB;AACL,+BAAmB,OAAO;AAAA,UAAA;AAGrB,iBAAA;AAAA,QAAA,CACR;AAAA,MACH;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ;AAEM,UAAA,mBAAmB,QAAQ,MAAM;AACrC,aAAO,SAAS,IAAI,UAAU,CAAC,OAAY,MAAc;AACjD,cAAA,kBAAkB,cAAc,CAAC;AAEvC,eAAO,aAAa,OAAO;AAAA,UACzB,SAAS;AAAA,UACT,MAAM,OAAO,OAAO,QAAQ;AAAA,UAC5B,UAAU,CACR,OACA,cAEA;AAAA,YACE;AAAA,YACA,OAAO,OAAO;AAAA,YACd;AAAA,YACA;AAAA,UACF;AAAA,UACF,UAAU,YAAY,OAAO,OAAO;AAAA,UACpC,UAAU,YAAY,OAAO,OAAO;AAAA,QAAA,CACrC;AAAA,MAAA,CACF;AAAA,IAAA,GACA;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,kBAAkB,CACtB,OACA,qBACG;AACC,UAAA;AACJ,UAAI,mBAAmB,QAAQ;AAC7B,mBAAW,CAAC;AAAA,iBACH,kBAAkB;AAChB,mBAAA,CAAC,GAAG,SAAS;AAAA,MAAA,OACnB;AACL,mBAAW,CAAC;AAAA,MAAA;AAGd,iBAAW,OAAO,QAAQ;AAE1B,eAAS,MAAM;AAET,YAAA,YAAY,SAAS,WAAW,GAAG;AACrC,6BAAmB,SAAS;AAAA,QAAA,OACvB;AACL,6BAAmB,OAAO;AAAA,QAAA;AAGrB,eAAA;AAAA,MAAA,CACR;AAAA,IACH;AAEM,UAAA,0BACJ,kBAAkB,IAEd,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,OAAG,UAAe,eAAA,CAAA;AAAA,MAClB,KAAK,SAAS,QAAQ,QAAQ,EAAE,MAAM;AAAA,IAAA,EAAA,CACzC,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,oBAAC,OAAG,UAAc,cAAA,CAAA;AAAA,MACjB,IAAI,yBAAyB,IAAI,SAAS,QAAQ,QAAQ,EAAE,MAAM;AAAA,IAAA,GACrE;AAOE,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,UAAM,iBAAiB,eACnB,MAAM,WAAW,OAAO,IACxB;AAGF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QAEpC,UAAA;AAAA,UACC,SAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,YAAU;AAAA,cACV,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B;AAAA,cACA,WAAW,QAAQ;AAAA,YAAA;AAAA,UACrB;AAAA,UAGD,mCACE,eAAc,EAAA,IAAI,MAAM,WAAW,aAAa,GAC9C,UACH,aAAA;AAAA,UAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,mBACE,kBAAmB,SAAS,MAAM,WAAW,OAAO,KAAM;AAAA,cAE5D,iBAAe,WAAW,OAAO;AAAA,cACjC,gBAAc,oBAAoB,YAAY,OAAO;AAAA,cACrD,qBACE,oBAAoB,YAAY,iBAAiB;AAAA,cAEnD,oBACE,CAAC,eAAe,MAAM,WAAW,aAAa,GAAG,eAAe,EAC7D,KAAK,GAAG,EACR,UAAU;AAAA,cAEf,WAAW,GAAG,QAAQ,OAAO;AAAA,gBAC3B,CAAC,QAAQ,QAAQ,GAAG,gBAAgB;AAAA,gBACpC,CAAC,QAAQ,UAAU,GAAG,gBAAgB;AAAA,gBACtC,CAAC,QAAQ,OAAO,GAAG,oBAAoB;AAAA,cAAA,CACxC;AAAA,cACA,GAAG;AAAA,cAEH,UAAA;AAAA,gBACC,iBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAS,mBAAmB;AAAA,oBAC5B,eAAe,mBAAmB;AAAA,oBAClC,OAAO;AAAA,oBACP;AAAA,oBACA;AAAA,oBACA,WAAW,QAAQ;AAAA,oBACnB,UAAU;AAAA,kBAAA;AAAA,gBACZ;AAAA,gBAED;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,UAEC,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,eAAa;AAAA,cACb,WAAW,QAAQ;AAAA,cAElB,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"CheckBoxGroup.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { CounterLabel } from \"../utils/CounterLabel\";\nimport { multiSelectionEventHandler } from \"../utils/multiSelectionEventHandler\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\". @deprecated no longer used\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  function HvCheckBoxGroup(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      children,\n      name,\n      label,\n      description,\n      status,\n      statusMessage,\n      defaultValue,\n      value: valueProp,\n      required,\n      readOnly,\n      disabled,\n      showSelectAll,\n      orientation = \"vertical\",\n      selectAllConjunctionLabel = \"/\",\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      ...others\n    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [value, setValue] = useControlled(\n      valueProp,\n      defaultValue !== undefined\n        ? defaultValue\n        : // When uncontrolled and no default value is given,\n          // extract the initial selected values from the children own state\n          () => getValueFromSelectedChildren(children),\n    );\n\n    const [validationState, setValidationState] = useControlled<HvFormStatus>(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const selectionAnchor = useRef(undefined);\n\n    const [allValues, selectedState, selectedCount] = useMemo(() => {\n      const childValues: any[] = [];\n      const childSelectedState: boolean[] = [];\n      let childSelectedCounter = 0;\n\n      Children.toArray(children).forEach((child: any, i: number) => {\n        const childValue = child?.props?.value;\n        const childIsSelected = value.indexOf(childValue) !== -1;\n\n        childValues[i] = childValue;\n        childSelectedState[i] = childIsSelected;\n\n        if (childIsSelected) {\n          childSelectedCounter += 1;\n        }\n      });\n\n      return [childValues, childSelectedState, childSelectedCounter];\n    }, [children, value]);\n\n    const selectAllState = computeSelectAllState(\n      value.length,\n      selectedState.length,\n    );\n\n    const onChildChangeInterceptor = useCallback(\n      (\n        index: number,\n        childOnChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean,\n        ) => void,\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean,\n      ) => {\n        const newValue = multiSelectionEventHandler(\n          event,\n          index,\n          selectionAnchor,\n          allValues,\n          selectedState,\n          isChecked,\n        );\n\n        childOnChange?.(event, isChecked);\n\n        onChange?.(event, newValue);\n\n        setValue(() => {\n          // This will only run if uncontrolled\n\n          if (required && newValue.length === 0) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newValue;\n        });\n      },\n      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ],\n    );\n\n    const modifiedChildren = useMemo(() => {\n      return Children.map(children, (child: any, i: number) => {\n        const childIsSelected = selectedState[i];\n\n        return cloneElement(child, {\n          checked: childIsSelected,\n          name: child?.props?.name || name,\n          onChange: (\n            event: React.ChangeEvent<HTMLInputElement>,\n            isChecked: boolean,\n          ) =>\n            onChildChangeInterceptor(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked,\n            ),\n          disabled: disabled || child?.props?.disabled,\n          readOnly: readOnly || child?.props?.readOnly,\n        });\n      });\n    }, [\n      children,\n      disabled,\n      name,\n      onChildChangeInterceptor,\n      readOnly,\n      selectedState,\n    ]);\n\n    const handleSelectAll = (\n      event: React.ChangeEvent<HTMLInputElement>,\n      selectAllChecked: boolean,\n    ) => {\n      let newValue: any[];\n      if (selectAllState === \"some\") {\n        newValue = [];\n      } else if (selectAllChecked) {\n        newValue = [...allValues];\n      } else {\n        newValue = [];\n      }\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    };\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            showGutter\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n          }\n          aria-disabled={disabled ? true : undefined}\n          aria-invalid={validationState === \"invalid\" ? true : undefined}\n          aria-errormessage={\n            validationState === \"invalid\" ? errorMessageId : undefined\n          }\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          className={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\n          {...others}\n        >\n          {showSelectAll && (\n            <HvCheckBox\n              checked={selectAllState === \"all\"}\n              indeterminate={selectAllState === \"some\"}\n              label={\n                <CounterLabel\n                  selected={selectedCount}\n                  total={Children.count(children)}\n                  conjunctionLabel={selectAllConjunctionLabel}\n                />\n              }\n              disabled={disabled}\n              readOnly={readOnly}\n              className={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvCheckBoxGroup"],"mappings":"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"}

package/dist/esm/FilterGroup/RightPanel/RightPanel.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useContext, useMemo, useCallback, useEffect } from "react";
+import { CounterLabel } from "../../utils/CounterLabel.js";
 import { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./RightPanel.styles.js";
 import { staticClasses } from "./RightPanel.styles.js";
-import { HvTypography } from "../../Typography/Typography.js";
 import { HvCheckBox } from "../../CheckBox/CheckBox.js";
 import { HvPanel } from "../../Panel/Panel.js";
 import { HvInput } from "../../Input/Input.js";
@@ -94,19 +94,18 @@ const HvFilterGroupRightPanel = ({
     searchStr
   ]);
   const SelectAll = useCallback(() => {
-    const nbrSelected = activeFilterValues?.length;
-    const defaultLabel = /* @__PURE__ */ jsx(HvTypography, { component: "span", children: nbrSelected > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("b", { children: nbrSelected }),
-      ` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("b", { children: labels?.selectAll }),
-      ` (${allActiveGroupOptions.length})`
-    ] }) });
     return /* @__PURE__ */ jsx("div", { className: classes.selectAllContainer, children: /* @__PURE__ */ jsx(
       HvCheckBox,
       {
         id: setId(id, "select-all"),
-        label: defaultLabel,
+        label: /* @__PURE__ */ jsx(
+          CounterLabel,
+          {
+            selected: activeFilterValues?.length,
+            total: allActiveGroupOptions.length,
+            conjunctionLabel: labels?.multiSelectionConjunction
+          }
+        ),
         onChange: () => handleSelectAll(),
         className: classes.selectAll,
         indeterminate: anySelected && !allSelected,

package/dist/esm/FilterGroup/RightPanel/RightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.js","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState(\"\");\n  const [allSelected, setAllSelected] = useState(false);\n  const [anySelected, setAnySelected] = useState(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } =\n    useMemo(() => {\n      const filteredOptions = filterOptions[activeGroup]?.data.filter(\n        (option) => option.name.toLowerCase().includes(searchStr.toLowerCase()),\n      );\n\n      return {\n        all: filteredOptions?.map((option) => option.id) || [],\n        enabled:\n          filteredOptions\n            ?.filter((option) => !option.disabled)\n            ?.map((option) => option.id) || [],\n      };\n    }, [filterOptions, activeGroup, searchStr]);\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        allActiveGroupOptions.includes(value),\n      ) || [],\n    [filterValues, allActiveGroupOptions, activeGroup],\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr],\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === allActiveGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, allActiveGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler: HvListProps[\"onChange\"] = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])],\n    );\n    setFilterValues(newFilterValues as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = structuredClone(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !enabledActiveGroupOptions.includes(value),\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      const currentOptions = newFilterValues[activeGroup] || [];\n      newFilterValues[activeGroup] = [\n        ...currentOptions,\n        ...enabledActiveGroupOptions,\n      ];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    enabledActiveGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${allActiveGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${allActiveGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    allActiveGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RightPanel.js","sources":["../../../../src/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvCheckBox } from \"../../CheckBox\";\nimport { HvInput } from \"../../Input\";\nimport { HvList, HvListProps } from \"../../List\";\nimport { HvPanel } from \"../../Panel\";\nimport { CounterLabel } from \"../../utils/CounterLabel\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState(\"\");\n  const [allSelected, setAllSelected] = useState(false);\n  const [anySelected, setAnySelected] = useState(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const { all: allActiveGroupOptions, enabled: enabledActiveGroupOptions } =\n    useMemo(() => {\n      const filteredOptions = filterOptions[activeGroup]?.data.filter(\n        (option) => option.name.toLowerCase().includes(searchStr.toLowerCase()),\n      );\n\n      return {\n        all: filteredOptions?.map((option) => option.id) || [],\n        enabled:\n          filteredOptions\n            ?.filter((option) => !option.disabled)\n            ?.map((option) => option.id) || [],\n      };\n    }, [filterOptions, activeGroup, searchStr]);\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        allActiveGroupOptions.includes(value),\n      ) || [],\n    [filterValues, allActiveGroupOptions, activeGroup],\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr],\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === allActiveGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, allActiveGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler: HvListProps[\"onChange\"] = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])],\n    );\n    setFilterValues(newFilterValues as any);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = structuredClone(filterValues);\n\n    if (anySelected) {\n      if (searchStr !== \"\") {\n        newFilterValues[activeGroup] = filterValues[activeGroup]?.filter(\n          (value) => !enabledActiveGroupOptions.includes(value),\n        );\n      } else {\n        newFilterValues[activeGroup] = [];\n      }\n    } else {\n      const currentOptions = newFilterValues[activeGroup] || [];\n      newFilterValues[activeGroup] = [\n        ...currentOptions,\n        ...enabledActiveGroupOptions,\n      ];\n    }\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    enabledActiveGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n    searchStr,\n  ]);\n\n  const SelectAll = useCallback(() => {\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={\n            <CounterLabel\n              selected={activeFilterValues?.length}\n              total={allActiveGroupOptions.length}\n              conjunctionLabel={labels?.multiSelectionConjunction}\n            />\n          }\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    allActiveGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Radio/Radio.js

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

package/dist/esm/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/Radio/Radio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseRadio } from \"../BaseRadio\";\nimport {\n  HvFormElement,\n  HvLabel,\n  HvLabelProps,\n  HvWarningText,\n  isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvRadioClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that user input is required on the form element.\n   *\n   * If a single radio button in a group has the required attribute, a radio button in\n   * that group must be check, though it doesn't have to be the one with the attribute is applied.\n   *\n   * For that reason, the component doesn't make any uncontrolled changes to its validation status.\n   * That should ideally be managed in the context of a radio button group.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   */\n  status?: HvRadioStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the radio button.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /** @ignore */\n  ref?: MuiRadioProps[\"ref\"];\n  /** @ignore */\n  component?: MuiRadioProps[\"component\"];\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select just an option from a group of options.\n *\n * It should used in a Radio Button Group to present the user with a range of options from\n * which the user **may select just one option** to complete their task.\n *\n * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(\n  function HvRadio(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required,\n      readOnly,\n      disabled,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n      checked,\n      defaultChecked = false,\n      onChange,\n      status = \"standBy\",\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n      semantic,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible],\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur],\n    );\n\n    const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n        setIsChecked(newChecked);\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, setIsChecked, value],\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled\n    const canShowError =\n      ariaErrorMessage == null &&\n      status !== undefined &&\n      statusMessage !== undefined;\n\n    const hasLabel = label != null;\n\n    const isStateInvalid = isInvalid(status);\n\n    let errorMessageId: string | undefined;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const radio = (\n      <HvBaseRadio\n        ref={ref}\n        id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.radio, {\n          [classes.invalidRadio]: isStateInvalid,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={isChecked}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={status || \"standBy\"}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.focusVisible]: !!(focusVisible && label),\n              [classes.invalidContainer]: isStateInvalid,\n              [classes.checked]: isChecked,\n              [classes.semantic]: semantic,\n            })}\n          >\n            {radio}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          radio\n        )}\n        {canShowError && (\n          <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n            {statusMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvRadio"],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../../../src/Radio/Radio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseRadio } from \"../BaseRadio\";\nimport {\n  HvFormElement,\n  HvLabel,\n  HvLabelProps,\n  HvWarningText,\n  isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvRadioClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that user input is required on the form element.\n   *\n   * If a single radio button in a group has the required attribute, a radio button in\n   * that group must be check, though it doesn't have to be the one with the attribute is applied.\n   *\n   * For that reason, the component doesn't make any uncontrolled changes to its validation status.\n   * That should ideally be managed in the context of a radio button group.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   */\n  status?: HvRadioStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the radio button.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /** @ignore */\n  ref?: MuiRadioProps[\"ref\"];\n  /** @ignore */\n  component?: MuiRadioProps[\"component\"];\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select just an option from a group of options.\n *\n * It should used in a Radio Button Group to present the user with a range of options from\n * which the user **may select just one option** to complete their task.\n *\n * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(\n  function HvRadio(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required,\n      readOnly,\n      disabled,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n      checked,\n      defaultChecked = false,\n      onChange,\n      status = \"standBy\",\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n      semantic,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible],\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur],\n    );\n\n    const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n        setIsChecked(newChecked);\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, setIsChecked, value],\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled\n    const canShowError =\n      ariaErrorMessage == null &&\n      status !== undefined &&\n      statusMessage !== undefined;\n\n    const hasLabel = label != null;\n\n    const isStateInvalid = isInvalid(status);\n\n    let errorMessageId: string | undefined;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const radio = (\n      <HvBaseRadio\n        ref={ref}\n        id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.radio, {\n          [classes.invalidRadio]: isStateInvalid,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={isChecked}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={status || \"standBy\"}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.focusVisible]: !!(focusVisible && label),\n              [classes.invalidContainer]: isStateInvalid,\n              [classes.checked]: isChecked,\n              [classes.semantic]: semantic,\n            })}\n          >\n            {radio}\n            <HvLabel\n              noWrap\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          radio\n        )}\n        {canShowError && (\n          <HvWarningText id={setId(elementId, \"error\")}>\n            {statusMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  },\n);\n"],"names":["HvRadio"],"mappings":"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"}

package/dist/esm/Radio/Radio.styles.js

@@ -6,50 +6,30 @@ const { staticClasses, useClasses } = 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: theme.colors.containerBackgroundHover,
-      borderRadius: theme.radii.base
-    }
-  },
-  invalidContainer: {
-    borderBottom: `1px solid ${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: theme.radii.base,
+    ":hover:not($disabled)": {
+      backgroundColor: theme.colors.containerBackgroundHover
     }
   },
+  invalidContainer: {},
   disabled: {
     cursor: "not-allowed",
     "& $label": { color: theme.colors.secondary_60, cursor: "not-allowed" }
   },
   radio: {
-    height: "32px",
     "& svg": {
       outline: "none",
       boxShadow: "none"
     }
   },
-  invalidRadio: {
-    borderBottom: `1px solid ${theme.colors.negative_120}`,
-    "&:hover": {
-      borderBottomLeftRadius: "0px",
-      borderBottomRightRadius: "0px"
-    }
-  },
+  invalidRadio: {},
   label: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
     verticalAlign: "middle",
     paddingRight: theme.space.xs,
-    whiteSpace: "nowrap",
     ...theme.typography.body,
     cursor: "pointer",
-    height: "32px",
     lineHeight: "32px",
     width: "100%"
   },

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.styles.js","sources":["../../../src/Radio/Radio.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(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDelay: \"0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  radio: {\n    height: \"32px\",\n\n    \"& svg\": {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidRadio: {\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },\n  checked: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,iBAAiB;AAAA,IAEjB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IAEpD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,IAER,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,cAAc;AAAA,IACZ,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IAEpD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,cAAc,EAAE,iBAAiB,MAAM,OAAO,OAAO,GAAG,cAAc;AAAA,EACtE,SAAS,CAAC;AAAA,EACV,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"Radio.styles.js","sources":["../../../src/Radio/Radio.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(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    alignItems: \"center\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n    borderRadius: theme.radii.base,\n\n    \":hover:not($disabled)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  invalidContainer: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  radio: {\n    \"& svg\": {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidRadio: {},\n  label: {\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },\n  checked: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc,MAAM,MAAM;AAAA,IAE1B,yBAAyB;AAAA,MACvB,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,cAAc,CAAC;AAAA,EACf,OAAO;AAAA,IACL,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,cAAc,EAAE,iBAAiB,MAAM,OAAO,OAAO,GAAG,cAAc;AAAA,EACtE,SAAS,CAAC;AAAA,EACV,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/Table/TableCell/TableCell.styles.js

@@ -6,8 +6,9 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
     verticalAlign: "inherit",
     alignContent: "inherit",
     textAlign: "left",
+    borderColor: theme.colors.atmo4,
     padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${theme.space.xs} - 3px ) ${theme.spacing(4)}`,
-    borderBottom: `1px solid ${theme.colors.atmo4}`
+    borderBottomWidth: 1
   },
   /** Styles applied to the cell when it's in the table head. */
   head: {
@@ -16,7 +17,6 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
     alignContent: "start",
     backgroundColor: theme.colors.atmo1,
     borderTop: "1px solid transparent",
-    borderBottom: `1px solid ${theme.colors.atmo4}`,
     ...theme.typography.label
   },
   /** Styles applied to the cell when it's in the table body. */
@@ -61,7 +61,7 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderRight: `solid 1px ${theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   /** Styles applied to the component root when its variant is actions */
   variantActions: {
@@ -69,7 +69,7 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderLeft: `solid 1px ${theme.colors.atmo4}`
+    borderLeftWidth: 1
   },
   /** Styles applied to the component root when its variant is expand */
   variantExpand: {
@@ -84,7 +84,7 @@ const { staticClasses, useClasses } = 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: {
@@ -122,40 +122,40 @@ const { staticClasses, useClasses } = createClasses("HvTableCell", {
   },
   /** Styles applied to the cell when it's part of the last sticky to the left column. */
   stickyColumnMostLeft: {
-    borderRight: `solid 1px ${theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   /** Styles applied to the cell when it's part of the first right sticky column. */
   stickyColumnLeastRight: {
-    borderLeft: `solid 1px ${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 ${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 ${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 ${theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   /** Styles applied to the cell when it's part of a resizing column. */
   resizing: {
-    borderRight: `solid 2px ${theme.colors.primary_80}`
+    borderRight: `2px solid ${theme.colors.primary_80}`
   }
 });
 export {

package/dist/esm/Table/TableCell/TableCell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.styles.js","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n  /** Styles applied to the component root class. */\n  root: {\n    verticalAlign: \"inherit\",\n    alignContent: \"inherit\",\n    textAlign: \"left\",\n    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n      theme.space.xs\n    } - 3px ) ${theme.spacing(4)}`,\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's in the table head. */\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n    alignContent: \"start\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"1px solid transparent\",\n    borderBottom: `1px solid ${theme.colors.atmo4}`,\n    ...theme.typography.label,\n  },\n  /** Styles applied to the cell when it's in the table body. */\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n\n    \"&$sorted\": {\n      backgroundColor: theme.alpha(\"primary\", 0.1),\n    },\n  },\n  /** Styles applied to the cell when it's in the table footer. */\n  footer: {},\n  /** Styles applied to the cell when it's part of a sorted column. */\n  sorted: {},\n  /** Styles applied to the component root when it is left aligned */\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  /** Styles applied to the component root when it is center aligned */\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  /** Styles applied to the component root when it is right aligned */\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  /** Styles applied to the component root when it is justified */\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  /** Styles applied to the component root when its variant is none */\n  variantNone: {\n    padding: 0,\n  },\n  /** Styles applied to the component root when its variant is checkbox */\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the component root when its variant is actions */\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the component root when its variant is expand */\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  /** Styles applied to the component root when its variant is list */\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    border: 0,\n  },\n  /** Styles applied to the cell when its variant is list and the type is head. */\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  /** Styles applied to the cell when its variant is list and actions. */\n  variantListactions: {\n    verticalAlign: \"middle\",\n    alignContent: \"center\",\n    borderLeft: \"none\",\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  /** Styles applied to the cell when its variant is list and checkbox. */\n  variantListcheckbox: {\n    borderRight: \"none\",\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  /** Styles applied to the cell when it's part of a sticky column. */\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    backgroundColor: theme.colors.atmo2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last sticky to the left column. */\n  stickyColumnMostLeft: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's part of the first right sticky column. */\n  stickyColumnLeastRight: {\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n  },\n\n  /** Styles applied to the cell when it's part of the first column in the group. */\n  groupColumnMostLeft: {\n    borderLeft: `solid 1px ${theme.colors.atmo4}`,\n\n    \"&:first-of-type\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last column in the group. */\n  groupColumnMostRight: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRight: 0,\n    },\n\n    \"&+:not($stickyColumn)\": {\n      borderLeft: 0,\n    },\n  },\n\n  /** Styles applied to the cell when it's part of a resizable column. */\n  resizable: {\n    borderRight: `solid 1px ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the cell when it's part of a resizing column. */\n  resizing: {\n    borderRight: `solid 2px ${theme.colors.primary_80}`,\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableCell.styles.js","sources":["../../../../src/Table/TableCell/TableCell.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTableCell\", {\n  /** Styles applied to the component root class. */\n  root: {\n    verticalAlign: \"inherit\",\n    alignContent: \"inherit\",\n    textAlign: \"left\",\n    borderColor: theme.colors.atmo4,\n    padding: `calc(${theme.space.xs} - 2px ) ${theme.space.xs} calc(${\n      theme.space.xs\n    } - 3px ) ${theme.spacing(4)}`,\n    borderBottomWidth: 1,\n  },\n  /** Styles applied to the cell when it's in the table head. */\n  head: {\n    height: 52,\n    verticalAlign: \"top\",\n    alignContent: \"start\",\n\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"1px solid transparent\",\n    ...theme.typography.label,\n  },\n  /** Styles applied to the cell when it's in the table body. */\n  body: {\n    minHeight: 32,\n    \"td&\": {\n      height: 32,\n    },\n    backgroundColor: \"inherit\",\n\n    \"&$sorted\": {\n      backgroundColor: theme.alpha(\"primary\", 0.1),\n    },\n  },\n  /** Styles applied to the cell when it's in the table footer. */\n  footer: {},\n  /** Styles applied to the cell when it's part of a sorted column. */\n  sorted: {},\n  /** Styles applied to the component root when it is left aligned */\n  alignLeft: {\n    textAlign: \"left\",\n  },\n  /** Styles applied to the component root when it is center aligned */\n  alignCenter: {\n    textAlign: \"center\",\n  },\n  /** Styles applied to the component root when it is right aligned */\n  alignRight: {\n    textAlign: \"right\",\n    flexDirection: \"row-reverse\",\n  },\n  /** Styles applied to the component root when it is justified */\n  alignJustify: {\n    textAlign: \"justify\",\n  },\n\n  /** Styles applied to the component root when its variant is none */\n  variantNone: {\n    padding: 0,\n  },\n  /** Styles applied to the component root when its variant is checkbox */\n  variantCheckbox: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderRightWidth: 1,\n  },\n  /** Styles applied to the component root when its variant is actions */\n  variantActions: {\n    boxSizing: \"content-box\",\n    padding: 0,\n    width: 32,\n    maxWidth: 32,\n    borderLeftWidth: 1,\n  },\n  /** Styles applied to the component root when its variant is expand */\n  variantExpand: {\n    paddingLeft: 0,\n    paddingTop: 0,\n    paddingBottom: 0,\n  },\n  /** Styles applied to the component root when its variant is list */\n  variantList: {\n    minHeight: 52,\n    \"td&\": {\n      height: 52,\n    },\n    padding: \"0, 0, 0, 32px\",\n    borderWidth: 0,\n  },\n  /** Styles applied to the cell when its variant is list and the type is head. */\n  variantListHead: {\n    backgroundColor: \"inherit\",\n    \"td&\": {\n      height: 16,\n    },\n  },\n  /** Styles applied to the cell when its variant is list and actions. */\n  variantListactions: {\n    verticalAlign: \"middle\",\n    alignContent: \"center\",\n    borderLeft: \"none\",\n    paddingLeft: \"0\",\n    textAlign: \"center\",\n    width: 130,\n    maxWidth: 130,\n  },\n  /** Styles applied to the cell when its variant is list and checkbox. */\n  variantListcheckbox: {\n    borderRight: \"none\",\n    padding: 0,\n    textAlign: \"center\",\n    width: 34,\n    maxWidth: 34,\n  },\n  /** Styles applied to the cell when it's part of a sticky column. */\n  stickyColumn: {\n    position: \"sticky\",\n    zIndex: 2,\n    backgroundColor: theme.colors.atmo2,\n\n    \"&$groupColumnMostRight+$stickyColumn\": {\n      borderLeft: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last sticky to the left column. */\n  stickyColumnMostLeft: {\n    borderRightWidth: 1,\n  },\n  /** Styles applied to the cell when it's part of the first right sticky column. */\n  stickyColumnLeastRight: {\n    borderLeftWidth: 1,\n  },\n\n  /** Styles applied to the cell when it's part of the first column in the group. */\n  groupColumnMostLeft: {\n    borderLeftWidth: 1,\n\n    \"&:first-of-type\": {\n      borderLeftWidth: 0,\n    },\n  },\n  /** Styles applied to the cell when it's part of the last column in the group. */\n  groupColumnMostRight: {\n    borderRightWidth: 1,\n\n    // due to the \":has()\" selector not being supported in browsers,\n    // this need to be managed with inline styles\n    // To be uncommented when not needed (see comment in src/Table/hooks/useSticky.js)\n    // \"&:last-child,&:has(+ $stickyColumnLeastRight)\": {\n    \"&:last-child\": {\n      borderRightWidth: 0,\n    },\n\n    \"&+:not($stickyColumn)\": {\n      borderLeftWidth: 0,\n    },\n  },\n\n  /** Styles applied to the cell when it's part of a resizable column. */\n  resizable: {\n    borderRightWidth: 1,\n  },\n  /** Styles applied to the cell when it's part of a resizing column. */\n  resizing: {\n    borderRight: `2px solid ${theme.colors.primary_80}`,\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Table/TableHeader/TableHeader.styles.js

@@ -9,7 +9,8 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
     alignContent: "inherit",
     textAlign: "left",
     padding: theme.spacing(0, 1, 0, 4),
-    borderBottom: `1px solid ${theme.colors.atmo4}`
+    borderColor: theme.colors.atmo4,
+    borderBottomWidth: 1
   },
   head: {
     paddingTop: 8,
@@ -17,14 +18,14 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
     alignContent: "start",
     ...theme.typography.label,
     backgroundColor: theme.colors.atmo1,
-    borderBottom: `1px solid ${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
       }
@@ -58,23 +59,23 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
     position: "sticky",
     zIndex: 2,
     "&$groupColumnMostRight+$stickyColumn": {
-      borderLeft: 0
+      borderLeftWidth: 0
     }
   },
-  stickyColumnMostLeft: { borderRight: `solid 1px ${theme.colors.atmo4}` },
-  stickyColumnLeastRight: { borderLeft: `solid 1px ${theme.colors.atmo4}` },
-  groupColumnMostLeft: { borderLeft: `solid 1px ${theme.colors.atmo4}` },
+  stickyColumnMostLeft: { borderRightWidth: 1 },
+  stickyColumnLeastRight: { borderLeftWidth: 1 },
+  groupColumnMostLeft: { borderLeftWidth: 1 },
   groupColumnMostRight: {
-    borderRight: `solid 1px ${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%" },
@@ -106,27 +107,27 @@ const { staticClasses, useClasses } = createClasses("HvTableHeader", {
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderRight: `solid 1px ${theme.colors.atmo4}`
+    borderRightWidth: 1
   },
   variantExpand: {},
   variantActions: {
     padding: 0,
     width: 32,
     maxWidth: 32,
-    borderLeft: `solid 1px ${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 ${theme.colors.atmo4}`,
+    borderRightWidth: 1,
     ":has($resizer:hover)": {
       borderRight: `2px solid ${theme.colors.primary_80}`
     }