@purpurds/checkbox 8.8.1 → 8.9.0

package/dist/checkbox.es.js

@@ -5,13 +5,7 @@ import "react-dom";
 function ge(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var q = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-var z;
+var q = { exports: {} }, z;
 function ve() {
   return z || (z = 1, (function(e) {
     (function() {
@@ -78,13 +72,7 @@ const ke = {
 function Oe(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var W = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-var L;
+var W = { exports: {} }, L;
 function Pe() {
   return L || (L = 1, (function(e) {
     (function() {
@@ -122,7 +110,7 @@ const Re = /* @__PURE__ */ Oe(Ae), Ee = {
   "purpur-field-error-text": "_purpur-field-error-text_u1cy2_1",
   "purpur-field-error-text--negative": "_purpur-field-error-text--negative_u1cy2_11",
   "purpur-field-error-text__icon": "_purpur-field-error-text__icon_u1cy2_14"
-}, T = Re.bind(Ee), A = "purpur-field-error-text", Me = ({
+}, H = Re.bind(Ee), A = "purpur-field-error-text", Me = ({
   children: e,
   className: t,
   negative: n = !1,
@@ -131,14 +119,14 @@ const Re = /* @__PURE__ */ Oe(Ae), Ee = {
 }) => /* @__PURE__ */ S(
   "div",
   {
-    className: T(t, A, {
+    className: H(t, A, {
       [`${A}--negative`]: n
     }),
     "aria-live": "assertive",
     "aria-relevant": a,
     ...i,
     children: [
-      /* @__PURE__ */ p(te, { svg: ke, size: "xs", className: T(`${A}__icon`) }),
+      /* @__PURE__ */ p(te, { svg: ke, size: "xs", className: H(`${A}__icon`) }),
       e
     ]
   }
@@ -146,15 +134,9 @@ const Re = /* @__PURE__ */ Oe(Ae), Ee = {
 function je(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var U = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-var V;
+var T = { exports: {} }, U;
 function De() {
-  return V || (V = 1, (function(e) {
+  return U || (U = 1, (function(e) {
     (function() {
       var t = {}.hasOwnProperty;
       function n() {
@@ -183,7 +165,7 @@ function De() {
       }
       e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
     })();
-  })(U)), U.exports;
+  })(T)), T.exports;
 }
 var Ie = De();
 const qe = /* @__PURE__ */ je(Ie), ze = {
@@ -207,15 +189,9 @@ const qe = /* @__PURE__ */ je(Ie), ze = {
 function Le(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var F = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-var Z;
-function Te() {
-  return Z || (Z = 1, (function(e) {
+var V = { exports: {} }, F;
+function He() {
+  return F || (F = 1, (function(e) {
     (function() {
       var t = {}.hasOwnProperty;
       function n() {
@@ -244,10 +220,10 @@ function Te() {
       }
       e.exports ? (n.default = n, e.exports = n) : window.classNames = n;
     })();
-  })(F)), F.exports;
+  })(V)), V.exports;
 }
-var Ue = Te();
-const Ve = /* @__PURE__ */ Le(Ue), Fe = {
+var Te = He();
+const Ue = /* @__PURE__ */ Le(Te), Ve = {
   "purpur-icon": "_purpur-icon_8u1lq_1",
   "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
   "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
@@ -255,7 +231,7 @@ const Ve = /* @__PURE__ */ Le(Ue), Fe = {
   "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
   "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
   "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
-}, Ze = Ve.bind(Fe), H = "purpur-icon", He = "md", Ke = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Ge = ({ content: e = "", title: t } = {}) => {
+}, Fe = Ue.bind(Ve), Z = "purpur-icon", Ze = "md", Ke = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), Ge = ({ content: e = "", title: t } = {}) => {
   const n = [
     { name: "xmlns", value: "http://www.w3.org/2000/svg" },
     { name: "fill", value: "currentColor" },
@@ -263,11 +239,11 @@ const Ve = /* @__PURE__ */ Le(Ue), Fe = {
     t ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
   ], a = t ? `<title>${t}</title>` : "";
   return `<svg ${Ke(n)}>${a}${e}</svg>`;
-}, Xe = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), j = ({ svg: e, allyTitle: t, className: n, size: a = He, ...i }) => {
+}, Xe = (e) => e.replace(/<(\/?)svg([^>]*)>/g, "").trim(), j = ({ svg: e, allyTitle: t, className: n, size: a = Ze, ...i }) => {
   const r = Ge({
     content: Xe(e.svg),
     title: t
-  }), o = Ze(H, `${H}--${a}`, n);
+  }), o = Fe(Z, `${Z}--${a}`, n);
   return /* @__PURE__ */ p("span", { className: o, dangerouslySetInnerHTML: { __html: r }, ...i });
 };
 j.displayName = "Icon";
@@ -352,9 +328,8 @@ function ar(e, t) {
   return { ...e, ...n };
 }
 function ur(e) {
-  var t, n;
-  let a = (t = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : t.get, i = a && "isReactWarning" in a && a.isReactWarning;
-  return i ? e.ref : (a = (n = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : n.get, i = a && "isReactWarning" in a && a.isReactWarning, i ? e.props.ref : e.props.ref || e.ref);
+  let t = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, n = t && "isReactWarning" in t && t.isReactWarning;
+  return n ? e.ref : (t = Object.getOwnPropertyDescriptor(e, "ref")?.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
 }
 var sr = [
   "a",
@@ -386,8 +361,7 @@ var sr = [
     ...e,
     ref: t,
     onMouseDown: (n) => {
-      var a;
-      n.target.closest("button, input, select, textarea") || ((a = e.onMouseDown) == null || a.call(e, n), !n.defaultPrevented && n.detail > 1 && n.preventDefault());
+      n.target.closest("button, input, select, textarea") || (e.onMouseDown?.(n), !n.defaultPrevented && n.detail > 1 && n.preventDefault());
     }
   }
 ));
@@ -396,13 +370,7 @@ var pr = oe;
 function fr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var G = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-var X;
+var G = { exports: {} }, X;
 function dr() {
   return X || (X = 1, (function(e) {
     (function() {
@@ -456,13 +424,7 @@ const mr = /* @__PURE__ */ fr(hr), _r = {
 function yr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var J = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-var Q;
+var J = { exports: {} }, Q;
 function br() {
   return Q || (Q = 1, (function(e) {
     (function() {
@@ -560,14 +522,12 @@ function Nr(e, t = []) {
     const u = s.createContext(o), c = n.length;
     n = [...n, o];
     const l = (f) => {
-      var y;
-      const { scope: h, children: m, ..._ } = f, v = ((y = h == null ? void 0 : h[e]) == null ? void 0 : y[c]) || u, w = s.useMemo(() => _, Object.values(_));
-      return /* @__PURE__ */ p(v.Provider, { value: w, children: m });
+      const { scope: m, children: h, ..._ } = f, b = m?.[e]?.[c] || u, $ = s.useMemo(() => _, Object.values(_));
+      return /* @__PURE__ */ p(b.Provider, { value: $, children: h });
     };
     l.displayName = r + "Provider";
-    function d(f, h) {
-      var v;
-      const m = ((v = h == null ? void 0 : h[e]) == null ? void 0 : v[c]) || u, _ = s.useContext(m);
+    function d(f, m) {
+      const h = m?.[e]?.[c] || u, _ = s.useContext(h);
       if (_) return _;
       if (o !== void 0) return o;
       throw new Error(`\`${f}\` must be used within \`${r}\``);
@@ -577,7 +537,7 @@ function Nr(e, t = []) {
   const i = () => {
     const r = n.map((o) => s.createContext(o));
     return function(u) {
-      const c = (u == null ? void 0 : u[e]) || r;
+      const c = u?.[e] || r;
       return s.useMemo(
         () => ({ [`__scope${e}`]: { ...u, [e]: c } }),
         [u, c]
@@ -606,18 +566,15 @@ function kr(...e) {
 }
 function ee(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
   return function(i) {
-    if (e == null || e(i), n === !1 || !i.defaultPrevented)
-      return t == null ? void 0 : t(i);
+    if (e?.(i), n === !1 || !i.defaultPrevented)
+      return t?.(i);
   };
 }
 function se(e) {
   const t = s.useRef(e);
   return s.useEffect(() => {
     t.current = e;
-  }), s.useMemo(() => (...n) => {
-    var a;
-    return (a = t.current) == null ? void 0 : a.call(t, ...n);
-  }, []);
+  }), s.useMemo(() => (...n) => t.current?.(...n), []);
 }
 function Or({
   prop: e,
@@ -650,7 +607,7 @@ function Ar(e) {
   const t = s.useRef({ value: e, previous: e });
   return s.useMemo(() => (t.current.value !== e && (t.current.previous = t.current.value, t.current.value = e), t.current.previous), [e]);
 }
-var D = globalThis != null && globalThis.document ? s.useLayoutEffect : () => {
+var D = globalThis?.document ? s.useLayoutEffect : () => {
 };
 function Rr(e) {
   const [t, n] = s.useState(void 0);
@@ -702,25 +659,25 @@ function Mr(e) {
   }, [u]), D(() => {
     const l = a.current, d = i.current;
     if (d !== e) {
-      const h = r.current, m = k(l);
-      e ? c("MOUNT") : m === "none" || (l == null ? void 0 : l.display) === "none" ? c("UNMOUNT") : c(d && h !== m ? "ANIMATION_OUT" : "UNMOUNT"), i.current = e;
+      const m = r.current, h = k(l);
+      e ? c("MOUNT") : h === "none" || l?.display === "none" ? c("UNMOUNT") : c(d && m !== h ? "ANIMATION_OUT" : "UNMOUNT"), i.current = e;
     }
   }, [e, c]), D(() => {
     if (t) {
       let l;
-      const d = t.ownerDocument.defaultView ?? window, f = (m) => {
-        const v = k(a.current).includes(m.animationName);
-        if (m.target === t && v && (c("ANIMATION_END"), !i.current)) {
-          const w = t.style.animationFillMode;
+      const d = t.ownerDocument.defaultView ?? window, f = (h) => {
+        const b = k(a.current).includes(h.animationName);
+        if (h.target === t && b && (c("ANIMATION_END"), !i.current)) {
+          const $ = t.style.animationFillMode;
           t.style.animationFillMode = "forwards", l = d.setTimeout(() => {
-            t.style.animationFillMode === "forwards" && (t.style.animationFillMode = w);
+            t.style.animationFillMode === "forwards" && (t.style.animationFillMode = $);
           });
         }
-      }, h = (m) => {
-        m.target === t && (r.current = k(a.current));
+      }, m = (h) => {
+        h.target === t && (r.current = k(a.current));
       };
-      return t.addEventListener("animationstart", h), t.addEventListener("animationcancel", f), t.addEventListener("animationend", f), () => {
-        d.clearTimeout(l), t.removeEventListener("animationstart", h), t.removeEventListener("animationcancel", f), t.removeEventListener("animationend", f);
+      return t.addEventListener("animationstart", m), t.addEventListener("animationcancel", f), t.addEventListener("animationend", f), () => {
+        d.clearTimeout(l), t.removeEventListener("animationstart", m), t.removeEventListener("animationcancel", f), t.removeEventListener("animationend", f);
       };
     } else
       c("ANIMATION_END");
@@ -732,12 +689,11 @@ function Mr(e) {
   };
 }
 function k(e) {
-  return (e == null ? void 0 : e.animationName) || "none";
+  return e?.animationName || "none";
 }
 function jr(e) {
-  var a, i;
-  let t = (a = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : a.get, n = t && "isReactWarning" in t && t.isReactWarning;
-  return n ? e.ref : (t = (i = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : i.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
+  let t = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, n = t && "isReactWarning" in t && t.isReactWarning;
+  return n ? e.ref : (t = Object.getOwnPropertyDescriptor(e, "ref")?.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
 }
 // @__NO_SIDE_EFFECTS__
 function Dr(e) {
@@ -778,9 +734,8 @@ function Br(e, t) {
   return { ...e, ...n };
 }
 function Wr(e) {
-  var a, i;
-  let t = (a = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : a.get, n = t && "isReactWarning" in t && t.isReactWarning;
-  return n ? e.ref : (t = (i = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : i.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
+  let t = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, n = t && "isReactWarning" in t && t.isReactWarning;
+  return n ? e.ref : (t = Object.getOwnPropertyDescriptor(e, "ref")?.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
 }
 var Lr = [
   "a",
@@ -805,7 +760,7 @@ var Lr = [
     return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ p(c, { ...u, ref: r });
   });
   return a.displayName = `Primitive.${t}`, { ...e, [t]: a };
-}, {}), I = "Checkbox", [Tr] = Nr(I), [Ur, Vr] = Tr(I), pe = s.forwardRef(
+}, {}), I = "Checkbox", [Hr] = Nr(I), [Tr, Ur] = Hr(I), pe = s.forwardRef(
   (e, t) => {
     const {
       __scopeCheckbox: n,
@@ -818,26 +773,26 @@ var Lr = [
       onCheckedChange: l,
       form: d,
       ...f
-    } = e, [h, m] = s.useState(null), _ = ue(t, (g) => m(g)), v = s.useRef(!1), w = h ? d || !!h.closest("form") : !0, [y = !1, P] = Or({
+    } = e, [m, h] = s.useState(null), _ = ue(t, (g) => h(g)), b = s.useRef(!1), $ = m ? d || !!m.closest("form") : !0, [w = !1, P] = Or({
       prop: i,
       defaultProp: r,
       onChange: l
-    }), me = s.useRef(y);
+    }), me = s.useRef(w);
     return s.useEffect(() => {
-      const g = h == null ? void 0 : h.form;
+      const g = m?.form;
       if (g) {
         const C = () => P(me.current);
         return g.addEventListener("reset", C), () => g.removeEventListener("reset", C);
       }
-    }, [h, P]), /* @__PURE__ */ S(Ur, { scope: n, state: y, disabled: u, children: [
+    }, [m, P]), /* @__PURE__ */ S(Tr, { scope: n, state: w, disabled: u, children: [
       /* @__PURE__ */ p(
         le.button,
         {
           type: "button",
           role: "checkbox",
-          "aria-checked": x(y) ? "mixed" : y,
+          "aria-checked": y(w) ? "mixed" : w,
           "aria-required": o,
-          "data-state": he(y),
+          "data-state": he(w),
           "data-disabled": u ? "" : void 0,
           disabled: u,
           value: c,
@@ -847,23 +802,23 @@ var Lr = [
             g.key === "Enter" && g.preventDefault();
           }),
           onClick: ee(e.onClick, (g) => {
-            P((C) => x(C) ? !0 : !C), w && (v.current = g.isPropagationStopped(), v.current || g.stopPropagation());
+            P((C) => y(C) ? !0 : !C), $ && (b.current = g.isPropagationStopped(), b.current || g.stopPropagation());
           })
         }
       ),
-      w && /* @__PURE__ */ p(
-        Fr,
+      $ && /* @__PURE__ */ p(
+        Vr,
         {
-          control: h,
-          bubbles: !v.current,
+          control: m,
+          bubbles: !b.current,
           name: a,
           value: c,
-          checked: y,
+          checked: w,
           required: o,
           disabled: u,
           form: d,
           style: { transform: "translateX(-100%)" },
-          defaultChecked: x(r) ? !1 : r
+          defaultChecked: y(r) ? !1 : r
         }
       )
     ] });
@@ -872,8 +827,8 @@ var Lr = [
 pe.displayName = I;
 var fe = "CheckboxIndicator", de = s.forwardRef(
   (e, t) => {
-    const { __scopeCheckbox: n, forceMount: a, ...i } = e, r = Vr(fe, n);
-    return /* @__PURE__ */ p(ce, { present: a || x(r.state) || r.state === !0, children: /* @__PURE__ */ p(
+    const { __scopeCheckbox: n, forceMount: a, ...i } = e, r = Ur(fe, n);
+    return /* @__PURE__ */ p(ce, { present: a || y(r.state) || r.state === !0, children: /* @__PURE__ */ p(
       le.span,
       {
         "data-state": he(r.state),
@@ -886,16 +841,16 @@ var fe = "CheckboxIndicator", de = s.forwardRef(
   }
 );
 de.displayName = fe;
-var Fr = (e) => {
+var Vr = (e) => {
   const { control: t, checked: n, bubbles: a = !0, defaultChecked: i, ...r } = e, o = s.useRef(null), u = Ar(n), c = Rr(t);
   s.useEffect(() => {
-    const d = o.current, f = window.HTMLInputElement.prototype, m = Object.getOwnPropertyDescriptor(f, "checked").set;
-    if (u !== n && m) {
+    const d = o.current, f = window.HTMLInputElement.prototype, h = Object.getOwnPropertyDescriptor(f, "checked").set;
+    if (u !== n && h) {
       const _ = new Event("click", { bubbles: a });
-      d.indeterminate = x(n), m.call(d, x(n) ? !1 : n), d.dispatchEvent(_);
+      d.indeterminate = y(n), h.call(d, y(n) ? !1 : n), d.dispatchEvent(_);
     }
   }, [u, n, a]);
-  const l = s.useRef(x(n) ? !1 : n);
+  const l = s.useRef(y(n) ? !1 : n);
   return /* @__PURE__ */ p(
     "input",
     {
@@ -916,22 +871,17 @@ var Fr = (e) => {
     }
   );
 };
-function x(e) {
+function y(e) {
   return e === "indeterminate";
 }
 function he(e) {
-  return x(e) ? "indeterminate" : e ? "checked" : "unchecked";
+  return y(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
-var Zr = pe, Hr = de;
+var Fr = pe, Zr = de;
 function Kr(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 var M = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
 var re;
 function Gr() {
   return re || (re = 1, (function(e) {
@@ -975,7 +925,7 @@ const Jr = /* @__PURE__ */ Kr(Xr), Qr = {
   "purpur-checkbox__label-container": "_purpur-checkbox__label-container_150ck_70",
   "purpur-checkbox__wrapper": "_purpur-checkbox__wrapper_150ck_76",
   "purpur-checkbox__container": "_purpur-checkbox__container_150ck_82"
-}, $ = Jr.bind(Qr), nt = ["indeterminate", !0, !1], b = "purpur-checkbox", Yr = _e(
+}, x = Jr.bind(Qr), nt = ["indeterminate", !0, !1], v = "purpur-checkbox", Yr = _e(
   ({
     ["data-testid"]: e,
     checked: t,
@@ -988,24 +938,24 @@ const Jr = /* @__PURE__ */ Kr(Xr), Qr = {
     ...c
   }, l) => {
     const d = i && !t, f = a && !t;
-    return /* @__PURE__ */ S("div", { className: $([`${b}__wrapper`, n]), children: [
-      /* @__PURE__ */ S("div", { className: $([`${b}__container`, n]), children: [
+    return /* @__PURE__ */ S("div", { className: x([`${v}__wrapper`, n]), children: [
+      /* @__PURE__ */ S("div", { className: x([`${v}__container`, n]), children: [
         /* @__PURE__ */ p(
-          Zr,
+          Fr,
           {
             ...c,
             checked: t,
-            className: $([
-              b,
+            className: x([
+              v,
               {
-                [`${b}--error`]: d,
-                [`${b}--error-checkbox`]: f
+                [`${v}--error`]: d,
+                [`${v}--error-checkbox`]: f
               }
             ]),
             "data-testid": e,
             onCheckedChange: u,
             ref: l,
-            children: /* @__PURE__ */ p("span", { className: $(`${b}__box`), children: /* @__PURE__ */ p(Hr, { className: $(`${b}__indicator`), children: t === "indeterminate" ? /* @__PURE__ */ p(
+            children: /* @__PURE__ */ p("span", { className: x(`${v}__box`), children: /* @__PURE__ */ p(Zr, { className: x(`${v}__indicator`), children: t === "indeterminate" ? /* @__PURE__ */ p(
               j,
               {
                 "data-testid": e && `${e}-checked-icon`,
@@ -1022,7 +972,7 @@ const Jr = /* @__PURE__ */ Kr(Xr), Qr = {
             ) }) })
           }
         ),
-        /* @__PURE__ */ S("span", { className: $(`${b}__label-container`), children: [
+        /* @__PURE__ */ S("span", { className: x(`${v}__label-container`), children: [
           r && /* @__PURE__ */ p(
             vr,
             {
@@ -1038,7 +988,7 @@ const Jr = /* @__PURE__ */ Kr(Xr), Qr = {
           o && /* @__PURE__ */ p(
             We,
             {
-              className: $(`${b}__helper`),
+              className: x(`${v}__helper`),
               "data-testid": e && `${e}-helper-text`,
               disabled: c.disabled,
               id: `${c.id}-helper-text`,