@pismo/marola 2.0.0 → 2.0.2

package/dist/components/RadioButton/RadioButton.js

@@ -1,40 +1,918 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { useState as x, useEffect as y } from "react";
-import { c as s } from "../../clsx-OuTLNxxd.js";
-import { Icon as C } from "../Icon/Icon.js";
-import { Typography as S } from "../Typography/Typography.js";
-import '../../assets/RadioButton.css';const g = "_radio_1t160_1", a = {
-  radio: g,
-  "radio--label": "_radio--label_1t160_9",
-  "radio--label__disabled": "_radio--label__disabled_1t160_12",
-  "radio--input": "_radio--input_1t160_16",
-  "radio--input__disabled": "_radio--input__disabled_1t160_26",
-  "radio--disabled": "_radio--disabled_1t160_37"
-}, B = ({
-  className: l,
-  name: n,
-  label: _,
-  checked: e = !1,
-  disabled: i = !1,
-  "data-testid": c = "radio-button",
-  onChange: p
+import { jsx as V, jsxs as le, Fragment as Ne } from "react/jsx-runtime";
+import * as f from "react";
+import { useState as Ve, useEffect as Se } from "react";
+import { c as Q } from "../../clsx-OuTLNxxd.js";
+import { Icon as De } from "../Icon/Icon.js";
+import { Typography as Me } from "../Typography/Typography.js";
+import "../Input/Input.js";
+import "../Avatar/Avatar.js";
+import "../Button/Button.js";
+import "../../Toggle-DEVeyo2f.js";
+import "../Dialog/Dialog.js";
+import "../IconButton/IconButton.js";
+import "../InputSearch/InputSearch.js";
+import "../Select/Select.js";
+import "../Popover/Popover.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+import "../../Group-Cyc1W1kV.js";
+import "../../contexts/SnackbarProvider/SnackbarProvider.js";
+import { u as ne, C as Te, e as Y, b as oe, m as G, D as xe, c as _e, g as Ae, h as ce, j as Pe, r as ke, R as ve, i as He, s as P } from "../../RadioButton.module-B4kmS66R.js";
+import { P as d } from "../../useSlotProps-DSnfx453.js";
+import { r as Ke } from "../../index-CATDT7fJ.js";
+const Le = Object.is;
+function Ge(e, t) {
+  if (e === t)
+    return !0;
+  if (!(e instanceof Object) || !(t instanceof Object))
+    return !1;
+  let o = 0, r = 0;
+  for (const n in e)
+    if (o += 1, !Le(e[n], t[n]) || !(n in t))
+      return !1;
+  for (const n in t)
+    r += 1;
+  return o === r;
+}
+function ze(e, t) {
+  const o = e.compareDocumentPosition(t);
+  return o & Node.DOCUMENT_POSITION_FOLLOWING || o & Node.DOCUMENT_POSITION_CONTAINED_BY ? -1 : o & Node.DOCUMENT_POSITION_PRECEDING || o & Node.DOCUMENT_POSITION_CONTAINS ? 1 : 0;
+}
+function Fe(e, t) {
+  if (e.size !== t.size)
+    return !1;
+  for (const [o, r] of e.entries()) {
+    const n = t.get(o);
+    if ((r == null ? void 0 : r.index) !== (n == null ? void 0 : n.index) || n !== void 0 && !Ge(r, n))
+      return !1;
+  }
+  return !0;
+}
+function de(e) {
+  const {
+    children: t,
+    elementsRef: o,
+    labelsRef: r,
+    onMapChange: n
+  } = e, [u, l] = f.useState(() => /* @__PURE__ */ new Map()), g = f.useCallback((s, i) => {
+    l((c) => new Map(c).set(s, i ?? null));
+  }, []), a = f.useCallback((s) => {
+    l((i) => {
+      const c = new Map(i);
+      return c.delete(s), c;
+    });
+  }, []);
+  ne(() => {
+    const s = new Map(u);
+    Array.from(s.keys()).sort(ze).forEach((c, m) => {
+      const y = u.get(c) ?? {};
+      s.set(c, {
+        ...y,
+        index: m
+      });
+    }), Fe(u, s) || (l(s), n == null || n(s));
+  }, [u, n]);
+  const p = f.useMemo(() => ({
+    register: g,
+    unregister: a,
+    map: u,
+    elementsRef: o,
+    labelsRef: r
+  }), [g, a, u, o, r]);
+  return /* @__PURE__ */ V(Te.Provider, {
+    value: p,
+    children: t
+  });
+}
+process.env.NODE_ENV !== "production" && (de.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: d.node,
+  /**
+   * A ref to the list of HTML elements, ordered by their index.
+   * `useListNavigation`'s `listRef` prop.
+   */
+  elementsRef: d.any,
+  /**
+   * A ref to the list of element labels, ordered by their index.
+   * `useTypeahead`'s `listRef` prop.
+   */
+  labelsRef: d.shape({
+    current: d.arrayOf(d.string).isRequired
+  }),
+  /**
+   * @ignore
+   */
+  onMapChange: d.func
+});
+const fe = /* @__PURE__ */ f.createContext(void 0);
+process.env.NODE_ENV !== "production" && (fe.displayName = "DirectionContext");
+function je(e = !0) {
+  const t = f.useContext(fe);
+  if (t === void 0 && !e)
+    throw new Error("Base UI: DirectionContext is missing.");
+  return (t == null ? void 0 : t.direction) ?? "ltr";
+}
+function Ue({
+  controlled: e,
+  default: t,
+  name: o,
+  state: r = "value"
+}) {
+  const {
+    current: n
+  } = f.useRef(e !== void 0), [u, l] = f.useState(t), g = n ? e : u;
+  if (process.env.NODE_ENV !== "production") {
+    f.useEffect(() => {
+      n !== (e !== void 0) && console.error([`Base UI: A component is changing the ${n ? "" : "un"}controlled ${r} state of ${o} to be ${n ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${o} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join(`
+`));
+    }, [r, o, e]);
+    const {
+      current: p
+    } = f.useRef(t);
+    f.useEffect(() => {
+      !n && !Object.is(p, t) && console.error([`Base UI: A component is changing the default ${r} state of an uncontrolled ${o} after being initialized. To suppress this warning opt to use a controlled ${o}.`].join(`
+`));
+    }, [JSON.stringify(t)]);
+  }
+  const a = f.useCallback((p) => {
+    n || l(p);
+  }, []);
+  return [g, a];
+}
+let ee = null, te;
+function $e() {
+  return ee == null && (ee = document.createElement("div")), te === void 0 && (te = ee.computedStyleMap !== void 0), te;
+}
+function We(e) {
+  return e && e.ownerDocument || document;
+}
+function Be(e) {
+  return We(e).defaultView || window;
+}
+const z = "ArrowUp", k = "ArrowDown", v = "ArrowLeft", x = "ArrowRight", q = "Home", J = "End", ge = [v, x], Ye = [v, x, q, J], he = [z, k], qe = [z, k, q, J], me = [...ge, ...he], Je = [...me, q, J];
+function U(e) {
+  e.preventDefault(), e.stopPropagation();
+}
+function $(e, t, o) {
+  return Math.floor(e / t) !== o;
+}
+function W(e, t) {
+  return t < 0 || t >= e.current.length;
+}
+function Xe(e, t) {
+  return N(e, {
+    disabledIndices: t
+  });
+}
+function Ze(e, t) {
+  return N(e, {
+    decrement: !0,
+    startingIndex: e.current.length,
+    disabledIndices: t
+  });
+}
+function N(e, {
+  startingIndex: t = -1,
+  decrement: o = !1,
+  disabledIndices: r,
+  amount: n = 1
+} = {}) {
+  const u = e.current;
+  let l = t;
+  do
+    l += o ? -n : n;
+  while (l >= 0 && l <= u.length - 1 && B(u, l, r));
+  return l;
+}
+function Qe(e, {
+  event: t,
+  orientation: o,
+  loop: r,
+  cols: n,
+  disabledIndices: u,
+  minIndex: l,
+  maxIndex: g,
+  prevIndex: a,
+  rtl: p,
+  stopEvent: s = !1
+}) {
+  let i = a;
+  if (t.key === z) {
+    if (s && U(t), a === -1)
+      i = g;
+    else if (i = N(e, {
+      startingIndex: i,
+      amount: n,
+      decrement: !0,
+      disabledIndices: u
+    }), r && (a - n < l || i < 0)) {
+      const c = a % n, m = g % n, y = g - (m - c);
+      m === c ? i = g : i = m > c ? y : y - n;
+    }
+    W(e, i) && (i = a);
+  }
+  if (t.key === k && (s && U(t), a === -1 ? i = l : (i = N(e, {
+    startingIndex: a,
+    amount: n,
+    disabledIndices: u
+  }), r && a + n > g && (i = N(e, {
+    startingIndex: a % n - n,
+    amount: n,
+    disabledIndices: u
+  }))), W(e, i) && (i = a)), o === "both") {
+    const c = p ? v : x, m = p ? x : v, y = Math.floor(a / n);
+    t.key === c && (s && U(t), a % n !== n - 1 ? (i = N(e, {
+      startingIndex: a,
+      disabledIndices: u
+    }), r && $(i, n, y) && (i = N(e, {
+      startingIndex: a - a % n - 1,
+      disabledIndices: u
+    }))) : r && (i = N(e, {
+      startingIndex: a - a % n - 1,
+      disabledIndices: u
+    })), $(i, n, y) && (i = a)), t.key === m && (s && U(t), a % n !== 0 ? (i = N(e, {
+      startingIndex: a,
+      decrement: !0,
+      disabledIndices: u
+    }), r && $(i, n, y) && (i = N(e, {
+      startingIndex: a + (n - a % n),
+      decrement: !0,
+      disabledIndices: u
+    }))) : r && (i = N(e, {
+      startingIndex: a + (n - a % n),
+      decrement: !0,
+      disabledIndices: u
+    })), $(i, n, y) && (i = a));
+    const C = Math.floor(g / n) === y;
+    W(e, i) && (r && C ? i = t.key === m ? g : N(e, {
+      startingIndex: a - a % n - 1,
+      disabledIndices: u
+    }) : i = a);
+  }
+  return i;
+}
+function et(e, t, o) {
+  const r = [];
+  let n = 0;
+  return e.forEach(({
+    width: u,
+    height: l
+  }, g) => {
+    if (u > t && process.env.NODE_ENV !== "production")
+      throw new Error(`[Base UI]: Invalid grid - item width at index ${g} is greater than grid columns`);
+    let a = !1;
+    for (o && (n = 0); !a; ) {
+      const p = [];
+      for (let s = 0; s < u; s += 1)
+        for (let i = 0; i < l; i += 1)
+          p.push(n + s + i * t);
+      n % t + u <= t && p.every((s) => r[s] == null) ? (p.forEach((s) => {
+        r[s] = g;
+      }), a = !0) : n += 1;
+    }
+  }), [...r];
+}
+function tt(e, t, o, r, n) {
+  if (e === -1)
+    return -1;
+  const u = o.indexOf(e), l = t[e];
+  switch (n) {
+    case "tl":
+      return u;
+    case "tr":
+      return l ? u + l.width - 1 : u;
+    case "bl":
+      return l ? u + (l.height - 1) * r : u;
+    case "br":
+      return o.lastIndexOf(e);
+    default:
+      return -1;
+  }
+}
+function nt(e, t) {
+  return t.flatMap((o, r) => e.includes(o) ? [r] : []);
+}
+function B(e, t, o) {
+  if (o)
+    return o.includes(t);
+  const r = e[t];
+  return r == null || r.hasAttribute("disabled") || r.getAttribute("aria-disabled") === "true";
+}
+function ot(e) {
+  if ($e()) {
+    const t = e.computedStyleMap().get("direction");
+    return t == null ? void 0 : t.value;
+  }
+  return Be(e).getComputedStyle(e).direction;
+}
+let se = 0;
+function rt(e, t = "mui") {
+  const [o, r] = f.useState(e), n = e || o;
+  return f.useEffect(() => {
+    o == null && (se += 1, r(`${t}-${se}`));
+  }, [o, t]), n;
+}
+const it = {
+  ...f
+}, ue = it.useId;
+function at(e, t) {
+  if (ue !== void 0) {
+    const o = ue();
+    return `${t}-${o}`;
+  }
+  return rt(e, t);
+}
+function st(e) {
+  return at(e, "base-ui");
+}
+function ut() {
+  return typeof window < "u";
+}
+function lt(e) {
+  var t;
+  return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
+}
+function ct(e) {
+  return !ut() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof lt(e).ShadowRoot;
+}
+function dt(e, t) {
+  if (!e || !t)
+    return !1;
+  const o = t.getRootNode == null ? void 0 : t.getRootNode();
+  if (e.contains(t))
+    return !0;
+  if (o && ct(o)) {
+    let r = t;
+    for (; r; ) {
+      if (e === r)
+        return !0;
+      r = r.parentNode || r.host;
+    }
+  }
+  return !1;
+}
+const pe = /* @__PURE__ */ f.createContext({
+  formRef: {
+    current: {
+      fields: /* @__PURE__ */ new Map()
+    }
+  },
+  errors: {},
+  onClearErrors: () => {
+  }
+});
+process.env.NODE_ENV !== "production" && (pe.displayName = "FormContext");
+function ye() {
+  return f.useContext(pe);
+}
+function Ce(e, t) {
+  return {
+    ...e,
+    state: {
+      ...e.state,
+      valid: !t && e.state.valid
+    }
+  };
+}
+const ft = Object.keys(xe);
+function gt() {
+  const {
+    setValidityData: e,
+    validate: t,
+    messageIds: o,
+    validityData: r,
+    validationMode: n,
+    validationDebounceTime: u,
+    invalid: l,
+    markedDirtyRef: g,
+    controlId: a,
+    state: p
+  } = Y(), {
+    formRef: s
+  } = ye(), i = f.useRef(-1), c = f.useRef(null);
+  f.useEffect(() => () => {
+    window.clearTimeout(i.current);
+  }, []);
+  const m = oe(async (R) => {
+    const E = c.current;
+    if (!E)
+      return;
+    function O(S) {
+      return ft.reduce((T, b) => (T[b] = S.validity[b], !S.validity.customError && !g.current && (T[b] = b === "valid"), T), {});
+    }
+    window.clearTimeout(i.current);
+    const I = t(R);
+    let h = null;
+    typeof I == "object" && I !== null && "then" in I ? h = await I : h = I;
+    let M = "";
+    h !== null && (M = Array.isArray(h) ? h.join(`
+`) : h), E.setCustomValidity(M);
+    const X = O(E);
+    let w = [];
+    Array.isArray(h) ? w = h : h ? w = [h] : E.validationMessage && (w = [E.validationMessage]);
+    const _ = {
+      value: R,
+      state: X,
+      error: Array.isArray(h) ? h[0] : h ?? E.validationMessage,
+      errors: w,
+      initialValue: r.initialValue
+    };
+    if (a) {
+      const S = s.current.fields.get(a);
+      S && s.current.fields.set(a, {
+        ...S,
+        ...Ce(_, l)
+      });
+    }
+    e(_);
+  }), y = f.useCallback((R = {}) => G(R, {
+    ...o.length && {
+      "aria-describedby": o.join(" ")
+    },
+    ...p.valid === !1 && {
+      "aria-invalid": !0
+    }
+  }), [o, p.valid]), C = f.useCallback((R = {}) => G(y(R), {
+    onChange(E) {
+      if (E.nativeEvent.defaultPrevented || l || n !== "onChange")
+        return;
+      const O = E.currentTarget;
+      if (O.value === "") {
+        m(O.value);
+        return;
+      }
+      window.clearTimeout(i.current), u ? i.current = window.setTimeout(() => {
+        m(O.value);
+      }, u) : m(O.value);
+    }
+  }), [y, l, n, u, m]);
+  return f.useMemo(() => ({
+    getValidationProps: y,
+    getInputValidationProps: C,
+    inputRef: c,
+    commitValidation: m
+  }), [y, C, m]);
+}
+function ht(e) {
+  const {
+    formRef: t
+  } = ye(), {
+    invalid: o,
+    markedDirtyRef: r,
+    validityData: n,
+    setValidityData: u
+  } = Y(), {
+    value: l,
+    id: g,
+    controlRef: a,
+    commitValidation: p
+  } = e, s = _e(e.getValue);
+  ne(() => {
+    var c;
+    let i = l;
+    i === void 0 && (i = (c = s.current) == null ? void 0 : c.call(s)), n.initialValue === null && i !== n.initialValue && u((m) => ({
+      ...m,
+      initialValue: i
+    }));
+  }, [u, l, n.initialValue, s]), ne(() => {
+    g && t.current.fields.set(g, {
+      controlRef: a,
+      validityData: Ce(n, o),
+      validate() {
+        var c;
+        let i = l;
+        i === void 0 && (i = (c = s.current) == null ? void 0 : c.call(s)), r.current = !0, Ke.flushSync(() => p(i));
+      }
+    });
+  }, [p, a, t, s, g, o, r, n, l]);
+}
+const L = void 0;
+function mt(e) {
+  const {
+    itemSizes: t,
+    cols: o = 1,
+    loop: r = !0,
+    dense: n = !1,
+    orientation: u = "both",
+    direction: l,
+    highlightedIndex: g,
+    onHighlightedIndexChange: a,
+    rootRef: p,
+    enableHomeAndEndKeys: s = !1,
+    stopEventPropagation: i = !1
+  } = e, [c, m] = f.useState(0), y = o > 1, C = g ?? c, R = oe(a ?? m), E = f.useRef(l ?? null), O = f.useRef(null), I = Ae(O, p), h = f.useRef([]), M = f.useCallback((X = {}) => G(X, {
+    "aria-orientation": u === "both" ? void 0 : u,
+    ref: I,
+    onKeyDown(w) {
+      const _ = s ? Je : me;
+      if (!_.includes(w.key))
+        return;
+      const S = O.current;
+      if (!S)
+        return;
+      (E == null ? void 0 : E.current) == null && (E.current = ot(S));
+      const T = E.current === "rtl";
+      let b = C;
+      const F = Xe(h, L), j = Ze(h, L);
+      if (y) {
+        const H = t || Array.from({
+          length: h.current.length
+        }, () => ({
+          width: 1,
+          height: 1
+        })), A = et(H, o, n), we = A.findIndex((D) => D != null && !B(h.current, D, L)), Oe = A.reduce((D, K, Ie) => K != null && !B(h.current, K, L) ? Ie : D, -1);
+        b = A[Qe({
+          current: A.map((D) => D ? h.current[D] : null)
+        }, {
+          event: w,
+          orientation: u,
+          loop: r,
+          cols: o,
+          // treat undefined (empty grid spaces) as disabled indices so we
+          // don't end up in them
+          disabledIndices: nt([...h.current.map((D, K) => B(h.current, K) ? K : void 0), void 0], A),
+          minIndex: we,
+          maxIndex: Oe,
+          prevIndex: tt(
+            C > j ? F : C,
+            H,
+            A,
+            o,
+            // use a corner matching the edge closest to the direction we're
+            // moving in so we don't end up in the same item. Prefer
+            // top/left over bottom/right.
+            // eslint-disable-next-line no-nested-ternary
+            w.key === k ? "bl" : w.key === x ? "tr" : "tl"
+          ),
+          rtl: T
+        })];
+      }
+      const re = T ? v : x, ie = {
+        horizontal: [re],
+        vertical: [k],
+        both: [re, k]
+      }[u], ae = T ? x : v, Z = {
+        horizontal: [ae],
+        vertical: [z],
+        both: [ae, z]
+      }[u], be = y ? _ : {
+        horizontal: s ? Ye : ge,
+        vertical: s ? qe : he,
+        both: _
+      }[u];
+      s && (w.key === q ? b = F : w.key === J && (b = j)), b === C && [...ie, ...Z].includes(w.key) && (r && b === j && ie.includes(w.key) ? b = F : r && b === F && Z.includes(w.key) ? b = j : b = N(h, {
+        startingIndex: b,
+        decrement: Z.includes(w.key),
+        disabledIndices: L
+      })), b !== C && !W(h, b) && (i && w.stopPropagation(), be.includes(w.key) && w.preventDefault(), R(b), queueMicrotask(() => {
+        var H;
+        (H = h.current[b]) == null || H.focus();
+      }));
+    }
+  }), [C, i, o, n, h, y, t, r, I, R, u, s]);
+  return f.useMemo(() => ({
+    getRootProps: M,
+    highlightedIndex: C,
+    onHighlightedIndexChange: R,
+    elementsRef: h
+  }), [M, C, R, h]);
+}
+function Ee(e) {
+  const {
+    render: t,
+    className: o,
+    highlightedIndex: r,
+    onHighlightedIndexChange: n,
+    orientation: u,
+    dense: l,
+    itemSizes: g,
+    loop: a,
+    cols: p,
+    direction: s,
+    enableHomeAndEndKeys: i,
+    onMapChange: c,
+    stopEventPropagation: m,
+    rootRef: y,
+    ...C
+  } = e, {
+    getRootProps: R,
+    highlightedIndex: E,
+    onHighlightedIndexChange: O,
+    elementsRef: I
+  } = mt({
+    itemSizes: g,
+    cols: p,
+    loop: a,
+    dense: l,
+    orientation: u,
+    highlightedIndex: r,
+    onHighlightedIndexChange: n,
+    rootRef: y,
+    stopEventPropagation: m,
+    enableHomeAndEndKeys: i,
+    direction: s
+  }), {
+    renderElement: h
+  } = ce({
+    propGetter: R,
+    render: t ?? "div",
+    state: {},
+    className: o,
+    extraProps: C
+  }), M = f.useMemo(() => ({
+    highlightedIndex: E,
+    onHighlightedIndexChange: O
+  }), [E, O]);
+  return /* @__PURE__ */ V(Pe.Provider, {
+    value: M,
+    children: /* @__PURE__ */ V(de, {
+      elementsRef: I,
+      onMapChange: c,
+      children: h()
+    })
+  });
+}
+process.env.NODE_ENV !== "production" && (Ee.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: d.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: d.oneOfType([d.func, d.string]),
+  /**
+   * @ignore
+   */
+  cols: d.number,
+  /**
+   * @ignore
+   */
+  dense: d.bool,
+  /**
+   * @ignore
+   */
+  direction: d.oneOf(["ltr", "rtl"]),
+  /**
+   * @ignore
+   */
+  enableHomeAndEndKeys: d.bool,
+  /**
+   * @ignore
+   */
+  highlightedIndex: d.number,
+  /**
+   * @ignore
+   */
+  itemSizes: d.arrayOf(d.shape({
+    height: d.number.isRequired,
+    width: d.number.isRequired
+  })),
+  /**
+   * @ignore
+   */
+  loop: d.bool,
+  /**
+   * @ignore
+   */
+  onHighlightedIndexChange: d.func,
+  /**
+   * @ignore
+   */
+  onMapChange: d.func,
+  /**
+   * @ignore
+   */
+  orientation: d.oneOf(["both", "horizontal", "vertical"]),
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: d.oneOfType([d.element, d.func]),
+  /**
+   * @ignore
+   */
+  rootRef: ke,
+  /**
+   * @ignore
+   */
+  stopEventPropagation: d.bool
+});
+function pt(e) {
+  const {
+    disabled: t = !1,
+    name: o,
+    defaultValue: r,
+    readOnly: n,
+    value: u
+  } = e, {
+    labelId: l,
+    setTouched: g,
+    setFocused: a,
+    validationMode: p
+  } = Y(), s = gt(), i = st(), [c, m] = Ue({
+    controlled: u,
+    default: r,
+    name: "RadioGroup",
+    state: "value"
+  });
+  ht({
+    id: i,
+    commitValidation: s.commitValidation,
+    value: c,
+    controlRef: s.inputRef
+  });
+  const [y, C] = f.useState(!1), R = f.useCallback((I = {}) => G(s.getValidationProps(I), {
+    role: "radiogroup",
+    "aria-disabled": t || void 0,
+    "aria-readonly": n || void 0,
+    "aria-labelledby": l,
+    onFocus() {
+      a(!0);
+    },
+    onBlur(h) {
+      dt(h.currentTarget, h.relatedTarget) || (g(!0), a(!1), p === "onBlur" && s.commitValidation(c));
+    },
+    onKeyDownCapture(h) {
+      h.key.startsWith("Arrow") && (g(!0), C(!0), a(!0));
+    }
+  }), [s, t, n, l, a, g, p, c]), E = f.useMemo(() => c == null ? "" : typeof c == "string" ? c : JSON.stringify(c), [c]), O = f.useCallback((I = {}) => G(s.getInputValidationProps(I), {
+    type: "hidden",
+    value: E,
+    ref: s.inputRef,
+    id: i,
+    name: o,
+    disabled: t,
+    readOnly: n
+  }), [s, E, i, o, t, n]);
+  return f.useMemo(() => ({
+    getRootProps: R,
+    getInputProps: O,
+    checkedValue: c,
+    setCheckedValue: m,
+    touched: y,
+    setTouched: C,
+    fieldControlValidation: s
+  }), [R, O, c, m, y, s]);
+}
+const Re = /* @__PURE__ */ f.forwardRef(function(t, o) {
+  const {
+    render: r,
+    className: n,
+    disabled: u,
+    readOnly: l,
+    required: g,
+    onValueChange: a,
+    name: p,
+    ...s
+  } = t, i = je(), c = pt(t), {
+    state: m,
+    disabled: y
+  } = Y(), C = y || u, R = oe(a ?? (() => {
+  })), E = f.useMemo(() => ({
+    ...m,
+    disabled: C ?? !1,
+    required: g ?? !1,
+    readOnly: l ?? !1
+  }), [m, C, l, g]), O = f.useMemo(() => ({
+    ...m,
+    ...c,
+    onValueChange: R,
+    disabled: C,
+    readOnly: l,
+    required: g
+  }), [m, C, R, c, l, g]), {
+    renderElement: I
+  } = ce({
+    propGetter: c.getRootProps,
+    render: r ?? "div",
+    ref: o,
+    className: n,
+    state: E,
+    extraProps: s,
+    customStyleHookMapping: He
+  });
+  return /* @__PURE__ */ le(ve.Provider, {
+    value: O,
+    children: [/* @__PURE__ */ V(Ee, {
+      direction: i,
+      enableHomeAndEndKeys: !1,
+      render: I()
+    }), /* @__PURE__ */ V("input", {
+      ...c.getInputProps()
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (Re.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: d.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: d.oneOfType([d.func, d.string]),
+  /**
+   * The uncontrolled value of the radio button that should be initially selected.
+   *
+   * To render a controlled radio group, use the `value` prop instead.
+   */
+  defaultValue: d.any,
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled: d.bool,
+  /**
+   * Identifies the field when a form is submitted.
+   */
+  name: d.string,
+  /**
+   * Callback fired when the value changes.
+   */
+  onValueChange: d.func,
+  /**
+   * Whether the user should be unable to select a different radio button in the group.
+   * @default false
+   */
+  readOnly: d.bool,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: d.oneOfType([d.element, d.func]),
+  /**
+   * Whether the user must choose a value before submitting a form.
+   * @default false
+   */
+  required: d.bool,
+  /**
+   * The controlled value of the radio item that should be currently selected.
+   *
+   * To render an uncontrolled radio group, use the `defaultValue` prop instead.
+   */
+  value: d.any
+});
+const Kt = ({
+  className: e,
+  name: t,
+  label: o,
+  disabled: r,
+  defaultValue: n,
+  checked: u,
+  "data-testid": l = "radio-button-group",
+  onChange: g,
+  children: a
 }) => {
-  const [o, r] = x(e), b = s(a["radio--input"], i && a["radio--input__disabled"]), u = s(a["radio--label"], i && a["radio--label__disabled"]), m = s(a.radio, i && a["radio--disabled"], l);
-  y(() => {
-    r(e);
-  }, [e]);
-  const f = () => {
-    if (i)
+  a || console.error(
+    "[Marola - Radio Button component]A new component version using RadioGroup is available. Please use that instead."
+  );
+  const [p, s] = Ve(u), i = Q(P["legacy-radio--input"], r && P["legacy-radio--input__disabled"]), c = Q(P["legacy-radio--label"], r && P["legacy-radio--label__disabled"]), m = Q(P["legacy-radio"], r && P["legacy-radio--disabled"], e);
+  Se(() => {
+    s(u);
+  }, [u]);
+  const y = () => {
+    if (r)
       return;
-    const d = !o;
-    r(d), p(d);
+    const C = !p;
+    s(C), g(C);
   };
-  return /* @__PURE__ */ h("div", { "data-testid": c, onClick: () => f(), className: m, children: [
-    /* @__PURE__ */ t("input", { name: n, type: "radio", checked: o, readOnly: !0 }),
-    /* @__PURE__ */ t("span", { className: b, children: o && /* @__PURE__ */ t(C, { icon: "circle", color: "var(--accent)", size: 8 }) }),
-    /* @__PURE__ */ t(S, { className: u, variant: "base-lg", children: _ })
+  return a ? /* @__PURE__ */ V(Ne, { children: /* @__PURE__ */ V(
+    Re,
+    {
+      "data-testid": l,
+      onValueChange: g,
+      name: t,
+      defaultValue: n,
+      className: e,
+      children: a
+    }
+  ) }) : /* @__PURE__ */ le("div", { "data-testid": l, onClick: () => y(), className: m, children: [
+    /* @__PURE__ */ V("input", { name: t, type: "radio", checked: p, readOnly: !0 }),
+    /* @__PURE__ */ V("span", { className: i, children: p && /* @__PURE__ */ V(De, { icon: "circle", color: "var(--accent)", size: 8 }) }),
+    /* @__PURE__ */ V(Me, { className: c, variant: "base-lg", children: o })
   ] });
 };
 export {
-  B as RadioButton
+  Kt as RadioButton
 };