prometeo-design-system 9.3.0 → 9.4.2

package/dist/FormField.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/FormField'
+export {}
+import PrometeoDesignSystem from './exports/FormField'
+export default PrometeoDesignSystem
+export * from './exports/FormField'
+export {}

package/dist/FormField.es.js

@@ -0,0 +1,62 @@
+import { j as e } from "./jsx-runtime-CqQglQKg.js";
+import { c as p } from "./cn-B6yFEsav.js";
+import { memo as b, useId as j } from "react";
+import I from "./HelperComponent.es.js";
+import { f as g } from "./fieldVariants-Ci6QYhCb.js";
+import { F as N } from "./FormFieldContext-H8_osEEP.js";
+import { u as E } from "./FormFieldContext-H8_osEEP.js";
+const y = b(function(f) {
+  const {
+    label: l,
+    supportingText: o,
+    showSupportingText: u,
+    state: r = "default",
+    disabled: t = !1,
+    required: d = !1,
+    htmlFor: m,
+    children: x,
+    className: h
+  } = f, s = j(), a = l ? `${s}-label` : void 0, i = `${s}-helper`, F = m ?? `${s}-control`, c = typeof o == "function" ? o() : o, n = u ?? c != null, v = {
+    labelId: a,
+    helperId: n ? i : void 0,
+    labelledBy: a,
+    describedBy: n ? i : void 0,
+    controlId: F,
+    state: r,
+    disabled: t,
+    required: d
+  };
+  return /* @__PURE__ */ e.jsx(N.Provider, { value: v, children: /* @__PURE__ */ e.jsxs("div", { className: p("relative flex w-full flex-col gap-1", h), children: [
+    l ? /* @__PURE__ */ e.jsx(
+      "label",
+      {
+        id: a,
+        htmlFor: m,
+        className: p(
+          g({ state: r, disabled: t }),
+          "relative z-10",
+          d && "after:ml-0.5 after:content-['*']"
+        ),
+        children: l
+      }
+    ) : null,
+    x,
+    n ? /* @__PURE__ */ e.jsx(
+      I,
+      {
+        id: i,
+        variant: r,
+        disabled: t,
+        className: "min-h-4",
+        children: c
+      }
+    ) : null
+  ] }) });
+});
+y.displayName = "FormField";
+export {
+  y as FormField,
+  N as FormFieldContext,
+  y as default,
+  E as useFormField
+};

package/dist/FormFieldContext-H8_osEEP.js

@@ -0,0 +1,11 @@
+import { createContext as t, useContext as e } from "react";
+const o = t(
+  null
+);
+function r() {
+  return e(o);
+}
+export {
+  o as F,
+  r as u
+};

package/dist/HelperComponent.es.js

@@ -1,12 +1,12 @@
 import { j as s } from "./jsx-runtime-CqQglQKg.js";
 import { c as r } from "./cn-B6yFEsav.js";
 import { c as i } from "./index-BOQuZ0gG.js";
-import { memo as d } from "react";
-import { Warning as c } from "./Icon-Warning.es.js";
-import { CheckCircle as o } from "./Icon-CheckCircle.es.js";
-import { Error as u } from "./Icon-Error.es.js";
-import { Info as f } from "./Icon-Info.es.js";
-const m = i("truncate", {
+import { memo as c } from "react";
+import { Warning as o } from "./Icon-Warning.es.js";
+import { CheckCircle as u } from "./Icon-CheckCircle.es.js";
+import { Error as f } from "./Icon-Error.es.js";
+import { Info as m } from "./Icon-Info.es.js";
+const b = i("truncate", {
   variants: {
     variant: {
       default: "text-neutral-tertiary-default",
@@ -23,7 +23,7 @@ const m = i("truncate", {
     variant: "default",
     disabled: !1
   }
-}), b = i("min-h-4 shrink-0", {
+}), v = i("min-h-4 shrink-0", {
   variants: {
     variant: {
       default: "",
@@ -50,23 +50,23 @@ const m = i("truncate", {
     variant: "default",
     disabled: !1
   }
-}), v = (a, t) => {
+}), x = (a, t) => {
   const e = {
-    default: f,
-    error: u,
-    success: o,
-    warning: c
+    default: m,
+    error: f,
+    success: u,
+    warning: o
   }[a];
-  return /* @__PURE__ */ s.jsx(e, { size: 16, className: r(b({ variant: a, disabled: t })) });
-}, x = "*:text-disabled-default *:icon-disabled-default", l = (a) => {
-  const { variant: t, className: n, disabled: e } = a;
-  return /* @__PURE__ */ s.jsxs("div", { ref: a.ref, className: r("flex gap-0.5 px-3 items-center prometeo-fonts-body-small", e && x, n), children: [
-    a.children && v(t, e ?? !1),
-    typeof a.children == "string" ? /* @__PURE__ */ s.jsx("p", { title: a.children, className: r(" prometeo-fonts-body-small", m({ variant: t, disabled: e })), children: a.children }) : a.children
+  return /* @__PURE__ */ s.jsx(e, { size: 16, className: r(v({ variant: a, disabled: t })) });
+}, p = "*:text-disabled-default *:icon-disabled-default", l = (a) => {
+  const { variant: t, className: n, disabled: e, id: d } = a;
+  return /* @__PURE__ */ s.jsxs("div", { id: d, ref: a.ref, className: r("flex gap-0.5 px-3 items-center prometeo-fonts-body-small", e && p, n), children: [
+    a.children && x(t, e ?? !1),
+    typeof a.children == "string" ? /* @__PURE__ */ s.jsx("p", { title: a.children, className: r(" prometeo-fonts-body-small", b({ variant: t, disabled: e })), children: a.children }) : a.children
   ] });
 };
 l.displayName = "HelperText";
-const V = d(l);
+const H = c(l);
 export {
-  V as default
+  H as default
 };

package/dist/SegmentedButton.es.js

@@ -1,15 +1,16 @@
-import { j as d } from "./jsx-runtime-CqQglQKg.js";
+import { j as u } from "./jsx-runtime-CqQglQKg.js";
 import { c as m } from "./cn-B6yFEsav.js";
-import { c as X } from "./index-BOQuZ0gG.js";
-import G, { useSyncExternalStore as tt, useId as nt, useRef as f, useState as S, useLayoutEffect as V, useEffect as z } from "react";
-import { useDragScroll as ot } from "./useDragScroll.es.js";
-import { PlainTooltip as rt } from "./PlainTooltip.es.js";
-const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof window > "u" ? !1 : window.matchMedia(Te).matches, st = (a) => {
+import { c as H } from "./index-BOQuZ0gG.js";
+import X, { useSyncExternalStore as it, useId as st, useRef as f, useState as O, useLayoutEffect as V, useEffect as S } from "react";
+import { useDragScroll as ct } from "./useDragScroll.es.js";
+import { u as dt } from "./FormFieldContext-H8_osEEP.js";
+import { PlainTooltip as ut } from "./PlainTooltip.es.js";
+const Ie = "(prefers-reduced-motion: reduce)", ft = () => !1, mt = () => typeof window > "u" ? !1 : window.matchMedia(Ie).matches, pt = (a) => {
   if (typeof window > "u") return () => {
   };
-  const r = window.matchMedia(Te);
-  return r.addEventListener("change", a), () => r.removeEventListener("change", a);
-}, it = () => tt(st, at, lt), ct = (a, r, y) => y ? { commit: null, pending: r } : a && a.left === r.left && a.right === r.right ? { commit: null, pending: null } : { commit: r, pending: null }, ut = {
+  const o = window.matchMedia(Ie);
+  return o.addEventListener("change", a), () => o.removeEventListener("change", a);
+}, bt = () => it(pt, mt, ft), gt = (a, o, v) => v ? { commit: null, pending: o } : a && a.left === o.left && a.right === o.right ? { commit: null, pending: null } : { commit: o, pending: null }, ht = {
   default: "brand",
   danger: "error"
 }, n = {
@@ -68,29 +69,29 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
     option: "px-3 py-1 min-h-7 pyrion-fonts-body-small"
   },
   medium: {
-    container: "py-[3px] px-[3px]",
+    container: "py-[3px] px-[3px] radius-large",
     pill: "py-2 min-h-[34px] radius-medium",
     option: "px-3 py-2 min-h-[34px] pyrion-fonts-body-medium"
   },
   large: {
-    container: "py-[3px] px-[3px]",
+    container: "py-[3px] px-[3px] radius-large",
     pill: "py-2.5 radius-medium",
     option: "px-4 py-2 min-h-10 pyrion-fonts-body-medium"
   }
-}, D = 20, xe = 4, we = 8, dt = { small: 280, medium: 320, large: 360 }, ft = 300, N = "cubic-bezier(0.2,0,0,1)", mt = "cubic-bezier(0.34,1.4,0.64,1)", pt = "cubic-bezier(0.3,0,0.2,1)", ve = {
+}, D = 20, we = 4, ve = 8, xt = { small: 280, medium: 320, large: 360 }, yt = 300, N = "cubic-bezier(0.2,0,0,1)", wt = "cubic-bezier(0.34,1.4,0.64,1)", vt = "cubic-bezier(0.3,0,0.2,1)", Te = {
   natural: "auto-cols-[minmax(0,max-content)]",
   equal: "auto-cols-[minmax(0,1fr)]"
-}, bt = "[transition:var(--sb-motion)] motion-reduce:transition-none", gt = "[transition:var(--sb-motion-text)] motion-reduce:transition-none", ht = "[transition:var(--sb-motion-weight)] motion-reduce:transition-none", xt = "[transition:var(--sb-motion-slot)] motion-reduce:transition-none", ye = (a, r, y) => Math.min(y, Math.max(r, a)), wt = (a, r) => typeof a == "function" ? G.createElement(a, {
+}, Tt = "[transition:var(--sb-motion)] motion-reduce:transition-none", Rt = "[transition:var(--sb-motion-text)] motion-reduce:transition-none", It = "[transition:var(--sb-motion-weight)] motion-reduce:transition-none", Nt = "[transition:var(--sb-motion-slot)] motion-reduce:transition-none", Re = (a, o, v) => Math.min(v, Math.max(o, a)), Et = (a, o) => typeof a == "function" ? X.createElement(a, {
   size: D,
-  className: m(r, "shrink-0!")
-}) : G.cloneElement(
+  className: m(o, "shrink-0!")
+}) : X.cloneElement(
   a,
   {
     size: D,
-    className: m(r, "shrink-0!")
+    className: m(o, "shrink-0!")
   }
-), vt = X(
-  "relative border inline-flex bg-neutral-default-default border-neutral-default-default radius-large shadow-[var(--dropshadow-inset-100)]",
+), Ct = H(
+  "relative border inline-flex bg-neutral-default-default border-neutral-default-default shadow-[var(--dropshadow-inset-100)]",
   {
     variants: {
       size: {
@@ -120,7 +121,7 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
       color: "brand"
     }
   }
-), yt = X(
+), Mt = H(
   "absolute top-0 bottom-0 z-10",
   {
     variants: {
@@ -151,7 +152,7 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
       color: "brand"
     }
   }
-), Tt = X("relative flex items-center justify-center", {
+), Bt = H("relative flex items-center justify-center", {
   variants: {
     size: {
       small: h.small.option,
@@ -179,217 +180,222 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
     size: "medium",
     color: "brand"
   }
-}), Ot = (a) => {
+}), kt = (a) => {
   const {
-    size: r = "medium",
-    color: y = "default",
+    size: o = "medium",
+    color: v = "default",
     options: E,
-    value: Re,
-    name: H,
-    ariaLabel: Ie,
-    onChange: Ne,
-    icon: P,
-    allowExpand: Q,
-    equalWidth: Ee,
+    value: Ne,
+    name: Q,
+    ariaLabel: Ee,
+    ariaLabelledBy: Ce,
+    ariaDescribedBy: Me,
+    onChange: Be,
+    icon: F,
+    allowExpand: Y,
+    equalWidth: Le,
     overflow: C = "truncate",
-    collapseAt: Ce,
-    disableAnimation: Me = !1,
-    animationDuration: Oe,
-    animationIntensity: Le,
-    disabled: $ = !1,
-    className: Se,
-    pillClassName: ze,
-    iconClassName: $e,
-    optionClassName: _e,
-    optionIconClassName: Be
-  } = a, je = `segmented-${nt()}`, Y = f(null), Z = f(null), J = f(null), ee = f(null), _ = f([]), [U, ke] = S(null), te = f(null), T = f(!1), M = f(null), W = f(!1), [b, Ae] = S(!1), [ne, Ve] = S(null), [F, oe] = S(!1), [q, re] = S(!1), le = f(0), O = f(null), De = it(), i = Me || De, c = i ? 0 : ye(Oe ?? ft, 0, 2e3), R = i ? 0 : ye(Le ?? 1, 0, 2), ae = Ee ?? (Q === !0 ? !1 : Q === !1 ? !0 : void 0), w = ae === "fill", B = ae === !0, I = C === "scroll" && !w, L = C === "collapse", Pe = C === "truncate" || C === "scroll" && w, se = E.every((e) => !!(e.icon ?? P)), Ue = Ce ?? dt[r], K = L && se && ne !== null && ne < Ue, v = $ ? "disabled" : ut[y] ?? y, l = Math.max(E.findIndex((e) => e.value === Re), 0), We = w ? "w-full" : "w-max max-w-full", Fe = I ? "overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "", qe = I && !B ? "auto-cols-max" : w || B ? ve.equal : ve.natural, Ke = i ? "none" : `color ${c}ms ${N}`, Ge = i ? "none" : `font-weight ${c}ms ${N}`, Xe = i ? "none" : `width ${c}ms ${N}, opacity ${c}ms ${N}`, ie = q ? Math.round(c * 0.4) : c, He = i ? "none" : `left ${ie}ms ${N}, right ${ie}ms ${N}, transform ${Math.round(F ? c * 0.4 : c * 0.9)}ms ${F ? pt : mt}`, Qe = le.current * 10 * R, Ye = F && R > 0 ? `translateX(${Qe}px) scaleX(${1 + 0.05 * R}) scaleY(${1 - 0.05 * R})` : void 0, ce = (e) => {
-    te.current = e, ke(
+    collapseAt: Oe,
+    disableAnimation: Se = !1,
+    animationDuration: ze,
+    animationIntensity: $e,
+    disabled: z = !1,
+    className: _e,
+    pillClassName: je,
+    iconClassName: ke,
+    optionClassName: Ae,
+    optionIconClassName: Ve
+  } = a, De = `segmented-${st()}`, P = dt(), Z = Ce ?? P?.labelledBy, Fe = Me ?? P?.describedBy, Pe = P?.required || void 0, J = f(null), ee = f(null), te = f(null), ne = f(null), $ = f([]), [q, qe] = O(null), re = f(null), T = f(!1), M = f(null), U = f(!1), [b, Ue] = O(!1), [oe, We] = O(null), [W, le] = O(!1), [K, ae] = O(!1), ie = f(0), B = f(null), Ke = bt(), s = Se || Ke, c = s ? 0 : Re(ze ?? yt, 0, 2e3), R = s ? 0 : Re($e ?? 1, 0, 2), se = Le ?? (Y === !0 ? !1 : Y === !1 ? !0 : void 0), y = se === "fill", _ = se === !0, I = C === "scroll" && !y, L = C === "collapse", Ge = C === "truncate" || C === "scroll" && y, ce = E.every((e) => !!(e.icon ?? F)), Xe = Oe ?? xt[o], G = L && ce && oe !== null && oe < Xe, w = z ? "disabled" : ht[v] ?? v, l = Math.max(E.findIndex((e) => e.value === Ne), 0), He = y ? "w-full" : "w-max max-w-full", Qe = I ? "overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "", Ye = I && !_ ? "auto-cols-max" : y || _ ? Te.equal : Te.natural, Ze = s ? "none" : `color ${c}ms ${N}`, Je = s ? "none" : `font-weight ${c}ms ${N}`, et = s ? "none" : `width ${c}ms ${N}, opacity ${c}ms ${N}`, de = K ? Math.round(c * 0.4) : c, tt = s ? "none" : `left ${de}ms ${N}, right ${de}ms ${N}, transform ${Math.round(W ? c * 0.4 : c * 0.9)}ms ${W ? vt : wt}`, nt = ie.current * 10 * R, rt = W && R > 0 ? `translateX(${nt}px) scaleX(${1 + 0.05 * R}) scaleY(${1 - 0.05 * R})` : void 0, ue = (e) => {
+    re.current = e, qe(
       (t) => t && t.left === e.left && t.right === e.right ? t : e
     );
-  }, ue = () => {
+  }, fe = () => {
     if (!T.current) return;
     T.current = !1;
     const e = M.current;
-    M.current = null, e && (re(!0), ce(e));
+    M.current = null, e && (ae(!0), ue(e));
   };
   V(() => {
-    const e = J.current;
+    const e = te.current;
     if (!L || !e) return;
     const t = () => {
-      const s = e.getBoundingClientRect().width;
-      Ve((p) => p === s ? p : s);
+      const i = e.getBoundingClientRect().width;
+      We((p) => p === i ? p : i);
     };
     t();
-    const o = new ResizeObserver(t);
-    return o.observe(e), () => o.disconnect();
+    const r = new ResizeObserver(t);
+    return r.observe(e), () => r.disconnect();
   }, [L]), V(() => {
-    if (O.current === null) {
-      O.current = l;
+    if (B.current === null) {
+      B.current = l;
       return;
     }
-    O.current !== l && (le.current = l > O.current ? 1 : -1, O.current = l, M.current = null, T.current = !1, W.current = !i);
-  }, [l, i]);
-  const de = f(null), { bind: Ze, ref: Je } = ot({
+    B.current !== l && (ie.current = l > B.current ? 1 : -1, B.current = l, M.current = null, T.current = !1, U.current = !s);
+  }, [l, s]);
+  const me = f(null), { bind: ot, ref: lt } = ct({
     axis: "x",
     cursor: { idle: "default", dragging: "grabbing" },
     disabled: !I
-  }), fe = (e, t) => e.icon ?? (t ? P : void 0) ? D + (e.label != null && !K ? xe : 0) : 0;
+  }), pe = (e, t) => e.icon ?? (t ? F : void 0) ? D + (e.label != null && !G ? we : 0) : 0;
   V(() => {
-    const e = Z.current, t = _.current[l];
+    const e = ee.current, t = $.current[l];
     if (!e || !t) return;
-    const o = de.current, s = !w && !B && o !== null && o !== l ? E.map(
-      (u, x) => fe(u, x === l) - fe(u, x === o)
-    ) : null, p = (u = !1) => {
+    const r = me.current, i = !y && !_ && r !== null && r !== l ? E.map(
+      (d, x) => pe(d, x === l) - pe(d, x === r)
+    ) : null, p = (d = !1) => {
       const x = e.getBoundingClientRect(), j = t.getBoundingClientRect();
       let k = {
         left: j.left - x.left,
         right: x.right - j.right
       };
-      if (u && s) {
-        let pe = 0, be = 0;
-        s.forEach((ge, he) => {
-          he < l ? pe += ge : he > l && (be += ge);
-        }), k = { left: k.left + pe, right: k.right + be };
+      if (d && i) {
+        let ge = 0, he = 0;
+        i.forEach((xe, ye) => {
+          ye < l ? ge += xe : ye > l && (he += xe);
+        }), k = { left: k.left + ge, right: k.right + he };
       }
-      const A = ct(
-        te.current,
+      const A = gt(
+        re.current,
         k,
         T.current
       );
-      A.pending && (M.current = A.pending), A.commit && ce(A.commit);
+      A.pending && (M.current = A.pending), A.commit && ue(A.commit);
     };
-    p(!0), de.current = l;
+    p(!0), me.current = l;
     const g = new ResizeObserver(() => p());
-    return g.observe(e), _.current.forEach((u) => {
-      u && g.observe(u);
+    return g.observe(e), $.current.forEach((d) => {
+      d && g.observe(d);
     }), () => g.disconnect();
   }, [
     l,
     E.length,
-    r,
-    w,
-    B,
+    o,
+    y,
+    _,
     C,
-    K
+    G
   ]), V(() => {
-    W.current && (W.current = !1, T.current = !0);
-  }, [l, i]), z(() => {
-    U && !b && Ae(!0);
-  }, [U, b]), z(() => {
-    if (!q) return;
+    U.current && (U.current = !1, T.current = !0);
+  }, [l, s]), S(() => {
+    q && !b && Ue(!0);
+  }, [q, b]), S(() => {
+    if (!K) return;
     const e = window.setTimeout(
-      () => re(!1),
+      () => ae(!1),
       Math.max(80, Math.round(c * 0.4))
     );
     return () => window.clearTimeout(e);
-  }, [q, c]), z(() => {
-    const e = ee.current;
+  }, [K, c]), S(() => {
+    const e = ne.current;
     if (!e) return;
-    const t = (o) => {
-      o.propertyName !== "left" && o.propertyName !== "right" || ue();
+    const t = (r) => {
+      r.propertyName !== "left" && r.propertyName !== "right" || fe();
     };
     return e.addEventListener("transitionend", t), () => e.removeEventListener("transitionend", t);
-  }), z(() => {
-    if (i || !T.current) return;
+  }), S(() => {
+    if (s || !T.current) return;
     let e, t;
-    return R > 0 && (oe(!0), e = window.setTimeout(
-      () => oe(!1),
+    return R > 0 && (le(!0), e = window.setTimeout(
+      () => le(!1),
       Math.max(80, Math.round(c * 0.45))
-    )), t = window.setTimeout(ue, c + 80), () => {
+    )), t = window.setTimeout(fe, c + 80), () => {
       e !== void 0 && window.clearTimeout(e), t !== void 0 && window.clearTimeout(t), M.current = null;
     };
-  }, [l, i, c, R]), z(() => {
+  }, [l, s, c, R]), S(() => {
     if (!I) return;
-    const e = Y.current, t = _.current[l];
+    const e = J.current, t = $.current[l];
     if (!e || !t) return;
-    const o = e.getBoundingClientRect(), s = t.getBoundingClientRect(), p = b && !i ? "smooth" : "auto", g = s.right - o.right + we, u = o.left - s.left + we;
-    g > 0 ? e.scrollBy({ left: g, behavior: p }) : u > 0 && e.scrollBy({ left: -u, behavior: p });
-  }, [I, l, b, i]);
-  const et = {
-    "--sb-motion": b ? He : "none",
-    "--sb-motion-text": b ? Ke : "none",
-    "--sb-motion-weight": b ? Ge : "none",
-    "--sb-motion-slot": b ? Xe : "none"
-  }, me = /* @__PURE__ */ d.jsx(
+    const r = e.getBoundingClientRect(), i = t.getBoundingClientRect(), p = b && !s ? "smooth" : "auto", g = i.right - r.right + ve, d = r.left - i.left + ve;
+    g > 0 ? e.scrollBy({ left: g, behavior: p }) : d > 0 && e.scrollBy({ left: -d, behavior: p });
+  }, [I, l, b, s]);
+  const at = {
+    "--sb-motion": b ? tt : "none",
+    "--sb-motion-text": b ? Ze : "none",
+    "--sb-motion-weight": b ? Je : "none",
+    "--sb-motion-slot": b ? et : "none"
+  }, be = /* @__PURE__ */ u.jsx(
     "div",
     {
       ref: (e) => {
-        Y.current = e, Je.current = e;
+        J.current = e, lt.current = e;
       },
       role: "radiogroup",
-      "aria-label": Ie ?? H,
-      "aria-disabled": $ || void 0,
+      "aria-labelledby": Z,
+      "aria-label": Z ? void 0 : Ee ?? Q,
+      "aria-describedby": Fe,
+      "aria-required": Pe,
+      "aria-disabled": z || void 0,
       className: m(
-        vt({ size: r, color: v }),
-        We,
-        Fe,
-        Se
+        Ct({ size: o, color: w }),
+        He,
+        Qe,
+        _e
       ),
-      style: et,
-      ...Ze,
-      children: /* @__PURE__ */ d.jsxs(
+      style: at,
+      ...ot,
+      children: /* @__PURE__ */ u.jsxs(
         "div",
         {
-          ref: Z,
+          ref: ee,
           className: m(
             "relative grid grid-flow-col items-stretch",
-            qe,
-            w && "w-full",
+            Ye,
+            y && "w-full",
             I && "w-max"
           ),
           children: [
-            /* @__PURE__ */ d.jsx(
+            /* @__PURE__ */ u.jsx(
               "div",
               {
-                ref: ee,
+                ref: ne,
                 "aria-hidden": !0,
                 className: m(
-                  yt({ size: r, color: v }),
+                  Mt({ size: o, color: w }),
                   "pointer-events-none",
-                  b && bt,
-                  ze
+                  b && Tt,
+                  je
                 ),
                 style: {
-                  ...U ?? {},
-                  transform: Ye
+                  ...q ?? {},
+                  transform: rt
                 }
               }
             ),
             E.map((e, t) => {
-              const o = t === l, s = e.icon ?? (o ? P : void 0), p = e.label != null && !K, g = Pe || L && !se ? "truncate" : "text-nowrap", u = o ? m(n[v].icon, $e) : m(n[v].optionIcon, Be), x = /* @__PURE__ */ d.jsxs(
+              const r = t === l, i = e.icon ?? (r ? F : void 0), p = e.label != null && !G, g = Ge || L && !ce ? "truncate" : "text-nowrap", d = r ? m(n[w].icon, ke) : m(n[w].optionIcon, Ve), x = /* @__PURE__ */ u.jsxs(
                 "label",
                 {
                   ref: (j) => {
-                    _.current[t] = j;
+                    $.current[t] = j;
                   },
                   title: e.tooltipText ? void 0 : e.label ?? e.ariaLabel,
                   className: m(
-                    Tt({ size: r, color: v }),
+                    Bt({ size: o, color: w }),
                     "relative z-20 min-w-0 select-none",
-                    gt,
-                    o ? n[v].pillText : n[v].option,
+                    Rt,
+                    r ? n[w].pillText : n[w].option,
                     "has-[input:focus-visible]:outline-2 has-[input:focus-visible]:-outline-offset-2 has-[input:focus-visible]:outline-[color:var(--border-brand-onneutral-default)]",
-                    _e
+                    Ae
                   ),
                   children: [
-                    /* @__PURE__ */ d.jsx(
+                    /* @__PURE__ */ u.jsx(
                       "span",
                       {
-                        "aria-hidden": !s,
-                        className: m("flex items-center overflow-hidden shrink-0", xt),
+                        "aria-hidden": !i,
+                        className: m("flex items-center overflow-hidden shrink-0", Nt),
                         style: {
-                          width: s ? D + (p ? xe : 0) : 0,
-                          opacity: s ? 1 : 0
+                          width: i ? D + (p ? we : 0) : 0,
+                          opacity: i ? 1 : 0
                         },
-                        children: s ? wt(s, u) : null
+                        children: i ? Et(i, d) : null
                       }
                     ),
-                    p && /* @__PURE__ */ d.jsxs(
+                    p && /* @__PURE__ */ u.jsxs(
                       "span",
                       {
                         className: "grid grid-cols-[minmax(0,1fr)] min-w-0",
                         children: [
-                          /* @__PURE__ */ d.jsx(
+                          /* @__PURE__ */ u.jsx(
                             "span",
                             {
                               "aria-hidden": !0,
@@ -400,7 +406,7 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
                               children: e.label
                             }
                           ),
-                          /* @__PURE__ */ d.jsx(
+                          /* @__PURE__ */ u.jsx(
                             "span",
                             {
                               className: m(
@@ -409,8 +415,8 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
                                 // `text-center` keeps the shorter regular weight centered
                                 // inside the semibold reserve.
                                 "col-start-1 row-start-1 min-w-0 text-center",
-                                ht,
-                                o ? "font-semibold" : "font-normal",
+                                It,
+                                r ? "font-semibold" : "font-normal",
                                 g
                               ),
                               children: e.label
@@ -419,35 +425,35 @@ const Te = "(prefers-reduced-motion: reduce)", lt = () => !1, at = () => typeof
                         ]
                       }
                     ),
-                    /* @__PURE__ */ d.jsx(
+                    /* @__PURE__ */ u.jsx(
                       "input",
                       {
                         type: "radio",
-                        name: je,
+                        name: De,
                         value: String(e.value),
-                        checked: o,
-                        disabled: $,
-                        onChange: () => Ne?.(H, e.value),
+                        checked: r,
+                        disabled: z,
+                        onChange: () => Be?.(Q, e.value),
                         "aria-label": e.ariaLabel ?? e.label,
                         className: m(
                           "absolute inset-0 z-30 m-0 h-full w-full opacity-0",
-                          $ ? "cursor-default" : "cursor-pointer"
+                          z ? "cursor-default" : "cursor-pointer"
                         )
                       }
                     )
                   ]
                 }
               );
-              return e.tooltipText ? /* @__PURE__ */ d.jsx(rt, { title: e.tooltipText, asChild: !0, children: x }, e.value) : /* @__PURE__ */ d.jsx(G.Fragment, { children: x }, e.value);
+              return e.tooltipText ? /* @__PURE__ */ u.jsx(ut, { title: e.tooltipText, asChild: !0, children: x }, e.value) : /* @__PURE__ */ u.jsx(X.Fragment, { children: x }, e.value);
             })
           ]
         }
       )
     }
   );
-  return L ? /* @__PURE__ */ d.jsx("div", { ref: J, className: "w-full min-w-0", children: me }) : me;
+  return L ? /* @__PURE__ */ u.jsx("div", { ref: te, className: "w-full min-w-0", children: be }) : be;
 };
 export {
-  Ot as SegmentedButton,
-  Ot as default
+  kt as SegmentedButton,
+  kt as default
 };