asma-ui-core 3.81.2 → 3.81.3

package/dist/components/custom/pathfinder-card/PathfinderCard.js

@@ -153,6 +153,7 @@ function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot
       }),
       /* @__PURE__ */ e("div", {
         "aria-hidden": !0,
+        inert: "true",
         className: h.measureLayer,
         children: /* @__PURE__ */ I("div", {
           className: h.measureRow,

package/dist/components/data-display/interactive-chip/StyledInteractiveChip.js

@@ -1,37 +1,37 @@
-import { cn as a } from "../../../helpers/cn.js";
+import { cn as o } from "../../../helpers/cn.js";
 import { StyledChip as f } from "../chip/StyledChip.js";
 import { StyledCheckbox as v } from "../../inputs/checkbox/base-ui/StyledCheckbox.js";
 import { StyledRadio as u } from "../../inputs/radio-button/base-ui/StyledRadio.js";
 import i from "./StyledInteractiveChip.module.js";
 import { forwardRef as x } from "react";
-import { jsx as o } from "react/jsx-runtime";
-var y = "[&[data-testid][role=button]]:border-2 [&[data-testid][role=button]]:border-gama-400 [&[data-testid][role=button]]:bg-gama-25", S = { paddingLeft: "6px" }, h = x(({ type: r = "checkbox", checked: t, size: l = "small", ariaLabel: n, ...e }, c) => {
-  const d = r === "checkbox", m = n ?? (typeof e.label == "string" ? e.label : void 0), s = !e.readOnly && !d && !!t, b = d ? /* @__PURE__ */ o(v, {
+import { jsx as r } from "react/jsx-runtime";
+var y = "[&[data-testid][role=button]]:border-2 [&[data-testid][role=button]]:border-gama-400 [&[data-testid][role=button]]:bg-gama-25", S = { paddingLeft: "6px" }, h = x(({ type: l = "checkbox", checked: t, size: d = "small", ariaLabel: n, ...e }, c) => {
+  const a = l === "checkbox", m = n ?? (typeof e.label == "string" ? e.label : void 0), s = !e.readOnly && !a && !!t, b = a ? /* @__PURE__ */ r(v, {
     dataTest: e.dataTest,
     disableRipple: !0,
     checked: t,
-    size: l,
+    size: d,
     readOnly: e.readOnly,
     decorative: !0,
-    className: a("pointer-events-none", i.control)
-  }) : /* @__PURE__ */ o(u, {
+    className: o("pointer-events-none", i.control)
+  }) : /* @__PURE__ */ r(u, {
     dataTest: e.dataTest,
     checked: t,
-    size: l,
+    size: d,
     decorative: !0,
-    className: a("pointer-events-none", i.control)
+    className: o("pointer-events-none", i.control)
   });
-  return /* @__PURE__ */ o(f, {
+  return /* @__PURE__ */ r(f, {
     ref: c,
     "aria-label": m,
-    role: r,
+    role: l,
     "aria-checked": !!t,
-    "aria-readonly": e.readOnly,
+    "aria-readonly": a ? e.readOnly : void 0,
     avatar: b,
     clickable: !0,
     tabIndex: 0,
     ...e,
-    className: a(s && y, e.className),
+    className: o(s && y, e.className),
     sx: {
       ...S,
       ...e.sx

package/dist/components/miscellaneous/StyledFormControlLabel.js

@@ -1,29 +1,31 @@
-import { cn as a } from "../../helpers/cn.js";
-import { resolveSx as v } from "../../helpers/sx.js";
-import { cloneElement as u, isValidElement as s } from "react";
-import { jsx as b, jsxs as g } from "react/jsx-runtime";
-var h = {
+import { cn as o } from "../../helpers/cn.js";
+import { resolveSx as h } from "../../helpers/sx.js";
+import { cloneElement as g, isValidElement as t, useId as C } from "react";
+import { jsx as y, jsxs as A } from "react/jsx-runtime";
+var E = {
   end: "flex-row",
   start: "flex-row-reverse",
   top: "flex-col-reverse",
   bottom: "flex-col"
-}, k = ({ control: e, label: t, checked: o, disabled: n, name: i, value: m, labelPlacement: d = "end", className: c, sx: f, onChange: p }) => {
-  const l = s(e) ? e.props : {}, r = n ?? l.disabled ?? !1, x = s(e) ? u(e, {
-    checked: l.checked ?? o,
-    onChange: l.onChange ?? p,
-    disabled: r,
-    name: l.name ?? i,
-    value: l.value ?? m
-  }) : e;
-  return /* @__PURE__ */ g("label", {
-    className: a("m-0 inline-flex items-center gap-2 align-middle text-delta-800", r ? "cursor-default" : "cursor-pointer", h[d], c),
+}, k = ({ control: l, label: a, checked: i, disabled: d, name: m, value: c, labelPlacement: b = "end", className: f, sx: x, onChange: p }) => {
+  const e = t(l) ? l.props : {}, s = d ?? e.disabled ?? !1, r = C(), u = e["aria-label"] != null || e["aria-labelledby"] != null, n = t(l) && a != null && !u, v = t(l) ? g(l, {
+    checked: e.checked ?? i,
+    onChange: e.onChange ?? p,
+    disabled: s,
+    name: e.name ?? m,
+    value: e.value ?? c,
+    ...n ? { "aria-labelledby": r } : {}
+  }) : l;
+  return /* @__PURE__ */ A("label", {
+    className: o("m-0 inline-flex items-center gap-2 align-middle text-delta-800", s ? "cursor-default" : "cursor-pointer", E[b], f),
     style: {
       fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-      ...v(f)
+      ...h(x)
     },
-    children: [x, t != null && /* @__PURE__ */ b("span", {
-      className: a("text-sm leading-5 tracking-[0.00938em]", r && "text-delta-300"),
-      children: t
+    children: [v, a != null && /* @__PURE__ */ y("span", {
+      id: n ? r : void 0,
+      className: o("text-sm leading-5 tracking-[0.00938em]", s && "text-delta-300"),
+      children: a
     })]
   });
 };

package/dist/datetime/components/date-picker/components/StyledCalendarPickerFooter.js

@@ -1,11 +1,11 @@
 import { ChevronRightIcon as f } from "../../../../components/icons/chevron-right-icon/ChevronRightIcon.js";
 import { ChevronLeftIcon as u } from "../../../../components/icons/chevron-left-icon/ChevronLeftIcon.js";
-import { StyledButton as e } from "../../../shared-components/button/StyledButton.js";
+import { StyledButton as a } from "../../../shared-components/button/StyledButton.js";
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import { useNavigation as y } from "react-day-picker";
 import { isDate as v, isValid as x } from "date-fns";
-var j = ({ onClose: m, isNb: n, selected: i, removeSelection: h, setMonth: a, onClear: d, required: p }) => {
-  const { nextMonth: l, previousMonth: r } = y(), c = i == null ? !1 : Array.isArray(i) ? i.length > 0 : v(i) ? x(i) : typeof i == "object" ? Object.values(i).some(Boolean) : !0;
+var j = ({ onClose: m, isNb: e, selected: i, removeSelection: h, setMonth: n, onClear: d, required: p }) => {
+  const { nextMonth: r, previousMonth: l } = y(), c = i == null ? !1 : Array.isArray(i) ? i.length > 0 : v(i) ? x(i) : typeof i == "object" ? Object.values(i).some(Boolean) : !0;
   return /* @__PURE__ */ s("div", {
     style: {
       marginTop: "8px",
@@ -13,16 +13,16 @@ var j = ({ onClose: m, isNb: n, selected: i, removeSelection: h, setMonth: a, on
       justifyContent: "space-between"
     },
     children: [
-      /* @__PURE__ */ t(e, {
+      /* @__PURE__ */ t(a, {
         dataTest: "",
         variant: "text",
         onClick: (o) => {
-          d ? d() : h(o), a(new Date(Date.now()));
+          d ? d() : h(o), n(new Date(Date.now()));
         },
         size: "small",
         disabled: !!p || !c,
         style: { minWidth: "60px" },
-        children: n ? "Nullstill" : "Clear"
+        children: e ? "Nullstill" : "Clear"
       }),
       /* @__PURE__ */ s("div", {
         style: {
@@ -30,13 +30,14 @@ var j = ({ onClose: m, isNb: n, selected: i, removeSelection: h, setMonth: a, on
           gap: 8
         },
         children: [
-          /* @__PURE__ */ t(e, {
+          /* @__PURE__ */ t(a, {
             dataTest: "",
+            "aria-label": e ? "Forrige maned" : "Previous month",
             variant: "outlined",
             size: "small",
-            disabled: !r,
+            disabled: !l,
             onClick: () => {
-              r && a(r);
+              l && n(l);
             },
             style: { minWidth: "25px" },
             children: /* @__PURE__ */ t(u, {
@@ -44,22 +45,23 @@ var j = ({ onClose: m, isNb: n, selected: i, removeSelection: h, setMonth: a, on
               height: 20
             })
           }),
-          /* @__PURE__ */ t(e, {
+          /* @__PURE__ */ t(a, {
             dataTest: "",
             size: "small",
             onClick: () => {
-              a(new Date(Date.now()));
+              n(new Date(Date.now()));
             },
             variant: "outlined",
-            children: n ? "I dag" : "Today"
+            children: e ? "I dag" : "Today"
           }),
-          /* @__PURE__ */ t(e, {
+          /* @__PURE__ */ t(a, {
             dataTest: "",
+            "aria-label": e ? "Neste maned" : "Next month",
             variant: "outlined",
             size: "small",
-            disabled: !l,
+            disabled: !r,
             onClick: () => {
-              l && a(l);
+              r && n(r);
             },
             style: { minWidth: "25px" },
             children: /* @__PURE__ */ t(f, {
@@ -69,7 +71,7 @@ var j = ({ onClose: m, isNb: n, selected: i, removeSelection: h, setMonth: a, on
           })
         ]
       }),
-      /* @__PURE__ */ t(e, {
+      /* @__PURE__ */ t(a, {
         dataTest: "",
         variant: "contained",
         size: "small",
@@ -77,7 +79,7 @@ var j = ({ onClose: m, isNb: n, selected: i, removeSelection: h, setMonth: a, on
           m?.(o, "backdropClick");
         },
         style: { minWidth: "60px" },
-        children: n ? "Velg" : "Select"
+        children: e ? "Velg" : "Select"
       })
     ]
   });

package/dist/datetime/components/time-picker/components/TimePickerPanel.js

@@ -1,12 +1,12 @@
 import { StyledButton as e } from "../../../shared-components/button/StyledButton.js";
 import { TimePickerBody as d } from "./TimePickerBody.js";
-import { EraserIcon as s } from "../../../shared-components/EraserIcon.js";
-import { CheckIcon as c } from "../../../shared-components/CheckIcon.js";
-import { Fragment as p, jsx as t, jsxs as r } from "react/jsx-runtime";
-var g = ({ dataTest: n, value: i, onSelect: a, handleClear: m, onConfirm: o }) => /* @__PURE__ */ r(p, { children: [/* @__PURE__ */ t(d, {
-  dataTest: `${n}-time-picker-body`,
+import { EraserIcon as l } from "../../../shared-components/EraserIcon.js";
+import { CheckIcon as s } from "../../../shared-components/CheckIcon.js";
+import { Fragment as c, jsx as t, jsxs as r } from "react/jsx-runtime";
+var b = ({ dataTest: a, value: i, onSelect: m, handleClear: n, onConfirm: o }) => /* @__PURE__ */ r(c, { children: [/* @__PURE__ */ t(d, {
+  dataTest: `${a}-time-picker-body`,
   value: i,
-  onSelect: a
+  onSelect: m
 }), /* @__PURE__ */ r("div", {
   style: {
     display: "flex",
@@ -17,21 +17,23 @@ var g = ({ dataTest: n, value: i, onSelect: a, handleClear: m, onConfirm: o }) =
   children: [/* @__PURE__ */ t(e, {
     dataTest: "time-picker-erase-button",
     "data-testid": "time-picker-erase-button",
+    "aria-label": "Clear time",
     variant: "text",
-    onClick: m,
+    onClick: n,
     size: "small",
     disabled: !i,
     style: {
       minWidth: "40px",
       marginLeft: "10px"
     },
-    children: /* @__PURE__ */ t(s, {
+    children: /* @__PURE__ */ t(l, {
       width: 24,
       height: 24
     })
   }), /* @__PURE__ */ t(e, {
     dataTest: "time-picker-confirm-button",
     "data-testid": "time-picker-confirm-button",
+    "aria-label": "Confirm time",
     variant: "contained",
     size: "small",
     onClick: o,
@@ -39,12 +41,12 @@ var g = ({ dataTest: n, value: i, onSelect: a, handleClear: m, onConfirm: o }) =
       minWidth: "40px",
       marginRight: "16px"
     },
-    children: /* @__PURE__ */ t(c, {
+    children: /* @__PURE__ */ t(s, {
       width: 20,
       height: 20
     })
   })]
 })] });
 export {
-  g as TimePickerPanel
+  b as TimePickerPanel
 };

package/dist/src/components/miscellaneous/StyledFormControlLabel.d.ts

@@ -17,5 +17,15 @@ export interface FormControlLabelProps {
  * Native replacement for MUI `FormControlLabel` — a `<label>` that pairs a form control with a
  * text label and forwards `checked`/`onChange`/`disabled`/`name`/`value` into the control (MUI's
  * clone behavior). Public props preserved (DEC-003). TASK-203.
+ *
+ * The label text carries an `id` and is wired to the control with `aria-labelledby` (ASMA-8143).
+ * Without it every checkbox/radio placed here failed axe `label`: `StyledCheckbox`/`StyledRadio`
+ * render their own `<label>` around the real `<input>`, so nesting them inside this `<label>`
+ * produces nested labels, and axe resolves an input's implicit label with `closest('label')` — it
+ * finds the *inner* one, which holds only the visual box and no text. `<button role="switch">` had
+ * the same gap for `button-name`: `<label>` does not name a non-labelable element at all.
+ * `aria-labelledby` names the control from the same visible text either way, so the accessible name
+ * is unchanged and no markup moves. A control that already sets `aria-label`/`aria-labelledby`
+ * keeps its own.
  */
 export declare const StyledFormControlLabel: ({ control, label, checked, disabled, name, value, labelPlacement, className, sx, onChange, }: FormControlLabelProps) => JSX.Element;

package/dist/src/table/shared-components/StyledCheckbox.d.ts

@@ -8,6 +8,15 @@ type StyledCheckboxProps = {
     hideWrapper?: boolean;
     className?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /**
+     * Renders the identical visual box (same classes, same `data-*` state attributes — no visual
+     * change) with NO real `<input>` at all, for use as a pure state indicator inside a widget that
+     * already owns selection itself. A real `<input type="checkbox">` nested inside such a widget is
+     * an axe `nested-interactive` violation, and axe is explicit that `aria-hidden`/`tabIndex={-1}`
+     * do NOT satisfy the check — only removing the input does. Mirrors the `decorative` prop on the
+     * main `src/components/inputs/checkbox/base-ui/StyledCheckbox`.
+     */
+    decorative?: boolean;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'checked' | 'type'>;
 export declare const IndeterminateIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
 export declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/table/components/columns/selectColumn.js

@@ -1,21 +1,21 @@
 import { SELECT_COLUMN_ID as p } from "../../types.js";
-import s from "../StyledTable.module.js";
-import { StyledCheckbox as c } from "../../shared-components/StyledCheckbox.js";
+import a from "../StyledTable.module.js";
+import { StyledCheckbox as n } from "../../shared-components/StyledCheckbox.js";
 import { StyledTooltip as u } from "../../shared-components/tooltip/index.js";
 import { jsx as r } from "react/jsx-runtime";
-var a = (t) => {
-  t.preventDefault(), t.stopPropagation();
-}, i = (t, l) => {
-  t.key !== "Enter" && t.key !== " " || (t.preventDefault(), t.stopPropagation(), l());
-}, w = (t) => t === "no" ? {
+var s = (o) => {
+  o.preventDefault(), o.stopPropagation();
+}, i = (o, l) => {
+  o.key !== "Enter" && o.key !== " " || (o.preventDefault(), o.stopPropagation(), l());
+}, w = (o) => o === "no" ? {
   selectAll: "Velg alle rader",
   selectRow: (l) => `Velg rad ${l}`
 } : {
   selectAll: "Select all rows",
   selectRow: (l) => `Select row ${l}`
 };
-function k(t, l, d) {
-  const n = w(d);
+function x(o, l, d) {
+  const c = w(d);
   return {
     id: p,
     minSize: 38,
@@ -24,18 +24,17 @@ function k(t, l, d) {
     header: ({ table: e }) => /* @__PURE__ */ r("div", {
       role: "checkbox",
       tabIndex: 0,
-      "aria-label": n.selectAll,
+      "aria-label": c.selectAll,
       "aria-checked": e.getIsSomeRowsSelected() ? "mixed" : e.getIsAllRowsSelected(),
-      className: s["select-control"],
+      className: a["select-control"],
       onClick: () => e.toggleAllRowsSelected(),
-      onMouseDown: a,
-      onMouseUp: a,
-      onKeyDown: (o) => i(o, () => e.toggleAllRowsSelected()),
-      children: /* @__PURE__ */ r(c, {
+      onMouseDown: s,
+      onMouseUp: s,
+      onKeyDown: (t) => i(t, () => e.toggleAllRowsSelected()),
+      children: /* @__PURE__ */ r(n, {
         size: "small",
         dataTest: "cell-select-all",
-        "aria-hidden": !0,
-        tabIndex: -1,
+        decorative: !0,
         checked: e.getIsAllRowsSelected(),
         indeterminate: e.getIsSomeRowsSelected(),
         className: "pointer-events-none",
@@ -43,46 +42,45 @@ function k(t, l, d) {
       })
     }),
     cell: ({ cell: e }) => {
-      const o = !e.row.getCanSelect();
+      const t = !e.row.getCanSelect();
       return /* @__PURE__ */ r("div", {
         role: "checkbox",
-        tabIndex: o ? -1 : 0,
-        "aria-label": n.selectRow(e.row.index + 1),
+        tabIndex: t ? -1 : 0,
+        "aria-label": c.selectRow(e.row.index + 1),
         "aria-checked": e.row.getIsSelected(),
-        "aria-disabled": o,
+        "aria-disabled": t,
         style: { height: l ?? "auto" },
-        className: s["select-control"],
+        className: a["select-control"],
         onClick: () => {
-          o || e.row.toggleSelected();
+          t || e.row.toggleSelected();
         },
-        onMouseDown: a,
-        onMouseUp: a,
+        onMouseDown: s,
+        onMouseUp: s,
         onKeyDown: (m) => {
-          o || i(m, () => e.row.toggleSelected());
+          t || i(m, () => e.row.toggleSelected());
         },
         children: /* @__PURE__ */ r(u, {
           arrow: !0,
           placement: "top-start",
           title: e.row.getRowSelectionTooltip(),
           children: /* @__PURE__ */ r("span", {
-            className: o ? s["cursor-not-allowed"] : void 0,
-            children: /* @__PURE__ */ r(c, {
+            className: t ? a["cursor-not-allowed"] : void 0,
+            children: /* @__PURE__ */ r(n, {
               size: "small",
               dataTest: "cell-select",
-              "aria-hidden": !0,
-              tabIndex: -1,
+              decorative: !0,
               checked: e.row.getIsSelected(),
               hideWrapper: !0,
-              disabled: o,
+              disabled: t,
               className: "pointer-events-none"
             })
           })
         })
       });
     },
-    fixedLeft: t
+    fixedLeft: o
   };
 }
 export {
-  k as selectColumn
+  x as selectColumn
 };

package/dist/table/components/columns/showTextColumn.js

@@ -1,8 +1,8 @@
 import { SHOW_FULL_TEXT_ID as i } from "../../types.js";
-import { ChevronDownIcon as s } from "../../shared-components/ChevronDownIcon.js";
-import { StyledButton as l } from "../../shared-components/button/StyledButton.js";
+import { ChevronDownIcon as l } from "../../shared-components/ChevronDownIcon.js";
+import { StyledButton as s } from "../../shared-components/button/StyledButton.js";
 import { jsx as o } from "react/jsx-runtime";
-function f(e, n) {
+function f(e, r) {
   return {
     id: i,
     minSize: 38,
@@ -11,24 +11,25 @@ function f(e, n) {
     enableHiding: !1,
     enableSorting: !1,
     header: () => null,
-    cell: (r) => /* @__PURE__ */ o(u, {
-      info: r,
-      rowHeight: n
+    cell: (n) => /* @__PURE__ */ o(u, {
+      info: n,
+      rowHeight: r
     }),
     fixedLeft: e
   };
 }
-function u({ info: e, rowHeight: n }) {
-  const r = e.row.getCanExpand(), a = e.row.isExpanded();
+function u({ info: e, rowHeight: r }) {
+  const n = e.row.getCanExpand(), a = e.row.isExpanded();
   return /* @__PURE__ */ o("div", {
     className: "flex w-full items-center justify-center",
-    style: { height: n ?? "auto" },
-    children: /* @__PURE__ */ o(l, {
+    style: { height: r ?? "auto" },
+    children: /* @__PURE__ */ o(s, {
       dataTest: "expand-text-button",
+      "aria-label": a ? "Collapse text" : "Show full text",
       size: "small",
       variant: "textGray",
       onClick: (t) => {
-        t.stopPropagation(), r && e.row.getToggleExpandedHandler()(), e.row.toggleExpand();
+        t.stopPropagation(), n && e.row.getToggleExpandedHandler()(), e.row.toggleExpand();
       },
       onMouseDown: (t) => {
         t.preventDefault(), t.stopPropagation();
@@ -36,7 +37,7 @@ function u({ info: e, rowHeight: n }) {
       onMouseUp: (t) => {
         t.preventDefault(), t.stopPropagation();
       },
-      startIcon: /* @__PURE__ */ o(s, {
+      startIcon: /* @__PURE__ */ o(l, {
         className: "block size-5 shrink-0",
         width: 20,
         height: 20,

package/dist/table/shared-components/StyledCheckbox.js

@@ -1,20 +1,20 @@
-import { cn as m } from "../../helpers/cn.js";
+import { cn as x } from "../../helpers/cn.js";
 import e from "./StyledCheckbox.module.js";
-import L, { useEffect as C, useRef as f } from "react";
-import { jsx as o, jsxs as k } from "react/jsx-runtime";
-var E = (t) => /* @__PURE__ */ k("svg", {
+import P, { useEffect as v, useRef as b } from "react";
+import { Fragment as $, jsx as t, jsxs as l } from "react/jsx-runtime";
+var y = (r) => /* @__PURE__ */ l("svg", {
   viewBox: "0 0 24 24",
   width: "100%",
   height: "100%",
   fill: "none",
-  ...t,
-  children: [/* @__PURE__ */ o("title", { children: "Indeterminate icon" }), /* @__PURE__ */ o("path", {
+  ...r,
+  children: [/* @__PURE__ */ t("title", { children: "Indeterminate icon" }), /* @__PURE__ */ t("path", {
     d: "M6 12H18",
     stroke: "currentColor",
-    strokeWidth: t.strokeWidth ?? 3,
+    strokeWidth: r.strokeWidth ?? 3,
     strokeLinecap: "round"
   })]
-}), H = (t) => /* @__PURE__ */ k("svg", {
+}), B = (r) => /* @__PURE__ */ l("svg", {
   viewBox: "0 0 24 24",
   width: "100%",
   height: "100%",
@@ -23,56 +23,62 @@ var E = (t) => /* @__PURE__ */ k("svg", {
   strokeWidth: 2,
   strokeLinecap: "round",
   strokeLinejoin: "round",
-  ...t,
-  children: [/* @__PURE__ */ o("title", { children: "Check icon" }), /* @__PURE__ */ o("path", { d: "M4 12l5 5L20 6" })]
-}), M = ({ dataTest: t, size: l = "medium", disabled: d, readOnly: c, indeterminate: n = !1, checked: h, disableRipple: x, hideWrapper: v, className: b, onChange: g, ...I }) => {
-  const a = !!v, s = !x && !a && !d && !c, p = f(null), u = f(null);
-  C(() => {
-    p.current && (p.current.indeterminate = n);
+  ...r,
+  children: [/* @__PURE__ */ t("title", { children: "Check icon" }), /* @__PURE__ */ t("path", { d: "M4 12l5 5L20 6" })]
+}), _ = ({ dataTest: r, size: d = "medium", disabled: h, readOnly: a, indeterminate: n = !1, checked: p, disableRipple: g, hideWrapper: I, className: N, onChange: R, decorative: w, ...W }) => {
+  const c = !!I, s = !g && !c && !h && !a, u = b(null), m = b(null);
+  v(() => {
+    u.current && (u.current.indeterminate = n);
   }, [n]);
-  const R = m(e.CheckboxWrapper, !a && e[`size-${l}`], a && e.HideWrapper, n && e.Indeterminate, c && e.ReadOnly, s && e.CheckboxHover, b), w = m(e.Checkbox, e[`size-${l}`], n && e.Indeterminate), N = n ? E : H, W = L.useCallback((r) => {
-    if (r.stopPropagation(), !s) return;
+  const k = x(e.CheckboxWrapper, !c && e[`size-${d}`], c && e.HideWrapper, n && e.Indeterminate, a && e.ReadOnly, s && e.CheckboxHover, N), L = x(e.Checkbox, e[`size-${d}`], n && e.Indeterminate), E = n ? y : B, H = P.useCallback((o) => {
+    if (o.stopPropagation(), !s) return;
     const i = document.createElement("span");
-    i.className = e.CheckboxRipple ?? "", i.addEventListener("animationend", () => i.remove(), { once: !0 }), u.current?.appendChild(i);
+    i.className = e.CheckboxRipple ?? "", i.addEventListener("animationend", () => i.remove(), { once: !0 }), m.current?.appendChild(i);
   }, [s]);
-  return C(() => {
-    const r = u.current;
-    return () => r?.replaceChildren();
-  }, []), /* @__PURE__ */ k("label", {
-    className: R,
-    "data-test": t,
-    onPointerDown: W,
-    "data-checked": h && !n ? "" : void 0,
-    "data-unchecked": !h && !n ? "" : void 0,
+  v(() => {
+    const o = m.current;
+    return () => o?.replaceChildren();
+  }, []);
+  const j = (o) => {
+    a || R?.(o, o.target.checked);
+  }, C = {
+    "data-checked": p && !n ? "" : void 0,
+    "data-unchecked": !p && !n ? "" : void 0,
     "data-indeterminate": n ? "" : void 0,
-    "data-disabled": d ? "" : void 0,
-    children: [
-      /* @__PURE__ */ o("input", {
-        ref: p,
-        type: "checkbox",
-        className: "sr-only",
-        checked: h,
-        disabled: d,
-        readOnly: c,
-        onChange: (r) => {
-          c || g?.(r, r.target.checked);
-        },
-        ...I
-      }),
-      !a && s && /* @__PURE__ */ o("span", {
-        ref: u,
-        className: e.CheckboxRippleContainer
-      }),
-      /* @__PURE__ */ o("span", {
-        className: w,
-        children: /* @__PURE__ */ o("span", {
-          className: e.Indicator,
-          children: /* @__PURE__ */ o(N, { strokeWidth: l === "small" ? 3 : 2 })
-        })
-      })
-    ]
+    "data-disabled": h ? "" : void 0
+  }, f = /* @__PURE__ */ l($, { children: [!c && s && /* @__PURE__ */ t("span", {
+    ref: m,
+    className: e.CheckboxRippleContainer
+  }), /* @__PURE__ */ t("span", {
+    className: L,
+    children: /* @__PURE__ */ t("span", {
+      className: e.Indicator,
+      children: /* @__PURE__ */ t(E, { strokeWidth: d === "small" ? 3 : 2 })
+    })
+  })] });
+  return w ? /* @__PURE__ */ t("span", {
+    "aria-hidden": "true",
+    className: k,
+    "data-test": r,
+    ...C,
+    children: f
+  }) : /* @__PURE__ */ l("label", {
+    className: k,
+    "data-test": r,
+    onPointerDown: H,
+    ...C,
+    children: [/* @__PURE__ */ t("input", {
+      ref: u,
+      type: "checkbox",
+      className: "sr-only",
+      checked: p,
+      disabled: h,
+      readOnly: a,
+      onChange: j,
+      ...W
+    }), f]
   });
 };
 export {
-  M as StyledCheckbox
+  _ as StyledCheckbox
 };

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.81.2",
+    "version": "3.81.3",
     "type": "module",
     "sideEffects": [
         "**/*.css",