@orellabs/ui 0.1.2 → 1.0.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import z, { useState as C, useRef as j, useEffect as T, useCallback as L } from "react";
+import z, { useState as C, useRef as O, useEffect as T, useCallback as L } from "react";
 import { jsxs as f, jsx as n, Fragment as B } from "react/jsx-runtime";
 const e = {
   // Brand
@@ -105,7 +105,7 @@ const e = {
   md: "0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04)",
   lg: "0 20px 60px rgba(0,0,0,0.18)",
   focus: "0 0 0 3px rgba(26, 26, 26, 0.12)"
-}, V = {
+}, D = {
   sm: {
     padding: `${a[1]} ${a[3]}`,
     fontSize: t.size.base,
@@ -124,7 +124,7 @@ const e = {
     height: "48px",
     gap: a[2]
   }
-}, O = {
+}, W = {
   primary: {
     background: e.black,
     color: e.textInverse,
@@ -151,8 +151,8 @@ const e = {
   }
 };
 function N({
-  variant: r,
-  size: i,
+  variant: r = "primary",
+  size: i = "md",
   loading: o = !1,
   disabled: l = !1,
   fullWidth: s = !1,
@@ -160,7 +160,7 @@ function N({
   children: g,
   onClick: u
 }) {
-  const p = V[i], c = O[r], y = l || o, h = {
+  const p = D[i] || D.md, c = W[r] || W.primary, y = l || o, h = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -189,32 +189,32 @@ function N({
       style: h,
       onClick: u,
       disabled: y,
-      onMouseEnter: (x) => {
-        y || (x.currentTarget.style.background = c.hoverBg);
+      onMouseEnter: (b) => {
+        y || (b.currentTarget.style.background = c.hoverBg);
       },
-      onMouseLeave: (x) => {
-        y || (x.currentTarget.style.background = c.background);
+      onMouseLeave: (b) => {
+        y || (b.currentTarget.style.background = c.background);
       },
-      onFocus: (x) => {
-        x.currentTarget.style.boxShadow = I.focus;
+      onFocus: (b) => {
+        b.currentTarget.style.boxShadow = I.focus;
       },
-      onBlur: (x) => {
-        x.currentTarget.style.boxShadow = "none";
+      onBlur: (b) => {
+        b.currentTarget.style.boxShadow = "none";
       },
       children: [
-        o ? /* @__PURE__ */ n(K, {}) : d,
+        o ? /* @__PURE__ */ n(X, {}) : d,
         g
       ]
     }
   );
 }
-let D = !1;
+let A = !1;
 function U() {
-  if (D || typeof document > "u") return;
+  if (A || typeof document > "u") return;
   const r = document.createElement("style");
-  r.textContent = "@keyframes ol-spin { to { transform: rotate(360deg) } }", document.head.appendChild(r), D = !0;
+  r.textContent = "@keyframes ol-spin { to { transform: rotate(360deg) } }", document.head.appendChild(r), A = !0;
 }
-function K() {
+function X() {
   return U(), /* @__PURE__ */ n(
     "svg",
     {
@@ -242,7 +242,7 @@ function K() {
     }
   );
 }
-const X = {
+const G = {
   none: "0px",
   sm: a[3],
   md: a[6],
@@ -257,21 +257,21 @@ function ge({
   const s = {
     background: e.cardBg,
     borderRadius: m.xl,
-    padding: X[r],
+    padding: G[r],
     border: i ? "none" : `1px solid ${e.border}`,
     boxShadow: o ? I.sm : I.none,
     boxSizing: "border-box"
   };
   return /* @__PURE__ */ n("div", { style: s, children: l });
 }
-const G = {
+const K = {
   success: { bg: e.successBg, color: e.success, dot: e.success },
   warning: { bg: e.warningBg, color: e.warning, dot: e.warning },
   error: { bg: e.errorBg, color: e.error, dot: e.error },
   info: { bg: e.infoBg, color: e.info, dot: e.info },
   neutral: { bg: e.neutralBg, color: e.neutralText, dot: e.textTertiary }
 }, Y = z.memo(function({ tone: i, dot: o = !1, children: l }) {
-  const s = G[i], d = {
+  const s = K[i], d = {
     display: "inline-flex",
     alignItems: "center",
     gap: a[1],
@@ -406,11 +406,11 @@ function pe({ tabs: r, active: i, onChange: o, size: l = "md" }) {
         role: "tab",
         "aria-selected": c,
         onClick: () => !c && o(p.id),
-        onMouseEnter: (x) => {
-          c || (x.currentTarget.style.background = e.neutralBg, x.currentTarget.style.color = e.textPrimary);
+        onMouseEnter: (b) => {
+          c || (b.currentTarget.style.background = e.neutralBg, b.currentTarget.style.color = e.textPrimary);
         },
-        onMouseLeave: (x) => {
-          c || (x.currentTarget.style.background = "transparent", x.currentTarget.style.color = e.textSecondary);
+        onMouseLeave: (b) => {
+          c || (b.currentTarget.style.background = "transparent", b.currentTarget.style.color = e.textSecondary);
         },
         children: [
           p.label,
@@ -490,7 +490,7 @@ function he({
     flexDirection: "column",
     gap: a[1],
     fontFamily: t.fontFamily.base
-  }, x = {
+  }, b = {
     fontSize: t.size.base,
     fontWeight: t.weight.medium,
     color: e.textPrimary,
@@ -505,7 +505,7 @@ function he({
     borderRadius: m.md,
     transition: "border-color 150ms ease, box-shadow 150ms ease",
     cursor: u ? "not-allowed" : "text"
-  }, b = {
+  }, x = {
     flex: 1,
     border: "none",
     outline: "none",
@@ -516,17 +516,17 @@ function he({
     cursor: u ? "not-allowed" : "text",
     padding: 0,
     width: "100%"
-  }, S = {
+  }, k = {
     fontSize: t.size.sm,
     color: y ? e.error : e.textTertiary,
     margin: 0
-  }, k = {
+  }, S = {
     fontSize: t.size.base,
     color: e.textTertiary,
     flexShrink: 0
   };
   return /* @__PURE__ */ f("div", { style: h, children: [
-    r && /* @__PURE__ */ n("p", { style: x, children: r }),
+    r && /* @__PURE__ */ n("p", { style: b, children: r }),
     /* @__PURE__ */ f(
       "div",
       {
@@ -540,7 +540,7 @@ function he({
           M.style.borderColor = y ? e.error : e.border, M.style.boxShadow = "none";
         },
         children: [
-          l && /* @__PURE__ */ n("span", { style: k, children: l }),
+          l && /* @__PURE__ */ n("span", { style: S, children: l }),
           /* @__PURE__ */ n(
             "input",
             {
@@ -550,14 +550,14 @@ function he({
               placeholder: g,
               disabled: u,
               "aria-invalid": y,
-              style: b
+              style: x
             }
           ),
-          s && /* @__PURE__ */ n("span", { style: k, children: s })
+          s && /* @__PURE__ */ n("span", { style: S, children: s })
         ]
       }
     ),
-    (o || i) && /* @__PURE__ */ n("p", { style: S, children: o || i })
+    (o || i) && /* @__PURE__ */ n("p", { style: k, children: o || i })
   ] });
 }
 function J(r) {
@@ -585,7 +585,7 @@ const me = z.memo(function({
     background: p,
     borderRadius: m.full,
     overflow: "hidden"
-  }, x = {
+  }, b = {
     height: "100%",
     width: `${g}%`,
     background: u,
@@ -599,21 +599,21 @@ const me = z.memo(function({
     textAlign: "right"
   };
   return /* @__PURE__ */ f("div", { style: y, children: [
-    /* @__PURE__ */ n("div", { style: h, children: /* @__PURE__ */ n("div", { style: x }) }),
+    /* @__PURE__ */ n("div", { style: h, children: /* @__PURE__ */ n("div", { style: b }) }),
     s && /* @__PURE__ */ f("span", { style: w, children: [
       Math.round(g),
       "%"
     ] })
   ] });
-}), W = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function xe({
+}), R = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function be({
   open: r,
   onClose: i,
   children: o,
   maxWidth: l = 400,
   title: s
 }) {
-  const [d, g] = C(!1), u = j(null), p = z.useId();
+  const [d, g] = C(!1), u = O(null), p = z.useId();
   if (T(() => {
     if (!r) {
       g(!1);
@@ -629,14 +629,14 @@ function xe({
     return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
   }, [r, i]), T(() => {
     if (!r || !u.current) return;
-    const y = u.current, h = document.activeElement, x = y.querySelector(W);
-    x ? x.focus() : y.focus();
-    const w = (b) => {
-      if (b.key !== "Tab") return;
-      const S = y.querySelectorAll(W);
-      if (S.length === 0) return;
-      const k = S[0], F = S[S.length - 1];
-      b.shiftKey ? document.activeElement === k && (b.preventDefault(), F.focus()) : document.activeElement === F && (b.preventDefault(), k.focus());
+    const y = u.current, h = document.activeElement, b = y.querySelector(R);
+    b ? b.focus() : y.focus();
+    const w = (x) => {
+      if (x.key !== "Tab") return;
+      const k = y.querySelectorAll(R);
+      if (k.length === 0) return;
+      const S = k[0], F = k[k.length - 1];
+      x.shiftKey ? document.activeElement === S && (x.preventDefault(), F.focus()) : document.activeElement === F && (x.preventDefault(), S.focus());
     };
     return document.addEventListener("keydown", w), () => {
       document.removeEventListener("keydown", w), h == null || h.focus();
@@ -762,7 +762,7 @@ function xe({
     }
   );
 }
-function be({
+function xe({
   options: r,
   value: i,
   onChange: o,
@@ -843,7 +843,7 @@ const Q = v(
     /* @__PURE__ */ n("circle", { cx: "11", cy: "11", r: "8" }),
     /* @__PURE__ */ n("path", { d: "M21 21l-4.35-4.35" })
   ] })
-), Z = v("M20 6L9 17l-5-5"), ee = v("M18 6L6 18M6 6l12 12"), we = v("M3 12h18M3 6h18M3 18h18"), A = v(
+), Z = v("M20 6L9 17l-5-5"), ee = v("M18 6L6 18M6 6l12 12"), we = v("M3 12h18M3 6h18M3 18h18"), E = v(
   /* @__PURE__ */ f(B, { children: [
     /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ n("path", { d: "M12 16v-4M12 8h.01" })
@@ -894,16 +894,16 @@ function Ae({
     display: "flex",
     flexDirection: "column",
     gap: "2px"
-  }, x = {
+  }, b = {
     fontSize: t.size.md,
     fontWeight: t.weight.semibold,
     color: r ? e.textInverse : e.textPrimary,
     lineHeight: t.lineHeight.tight
-  }, w = {
+  }, w = z.useId(), x = {
     fontSize: t.size.sm,
     color: r ? e.textTertiary : e.textSecondary,
     lineHeight: t.lineHeight.tight
-  }, b = {
+  }, k = {
     width: "20px",
     height: "20px",
     borderRadius: m.xs,
@@ -921,6 +921,7 @@ function Ae({
       style: c,
       role: "checkbox",
       "aria-checked": r,
+      "aria-labelledby": w,
       tabIndex: p ? 0 : -1,
       onClick: () => p && i(!r),
       onKeyDown: (S) => {
@@ -934,13 +935,13 @@ function Ae({
       },
       children: [
         /* @__PURE__ */ n("span", { style: y }),
-        /* @__PURE__ */ f("div", { style: h, children: [
-          /* @__PURE__ */ n("span", { style: x, children: o }),
-          l && /* @__PURE__ */ n("span", { style: w, children: l })
+        /* @__PURE__ */ f("div", { style: h, id: w, children: [
+          /* @__PURE__ */ n("span", { style: b, children: o }),
+          l && /* @__PURE__ */ n("span", { style: x, children: l })
         ] }),
         g && /* @__PURE__ */ n("div", { children: g }),
         u && /* @__PURE__ */ n("div", { children: u }),
-        d ? /* @__PURE__ */ n(Q, { size: 16, style: { color: e.textTertiary } }) : /* @__PURE__ */ n("div", { style: b, children: r && /* @__PURE__ */ n("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ n(
+        d ? /* @__PURE__ */ n(Q, { size: 16, style: { color: e.textTertiary } }) : /* @__PURE__ */ n("div", { style: k, children: r && /* @__PURE__ */ n("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ n(
           "path",
           {
             d: "M2.5 6l2.5 2.5 4.5-4.5",
@@ -961,11 +962,11 @@ const ne = {
   info: e.info,
   neutral: e.textTertiary
 };
-let R = !1;
+let H = !1;
 function re() {
-  if (R || typeof document > "u") return;
+  if (H || typeof document > "u") return;
   const r = document.createElement("style");
-  r.textContent = "@keyframes ol-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }", document.head.appendChild(r), R = !0;
+  r.textContent = "@keyframes ol-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }", document.head.appendChild(r), H = !0;
 }
 const Re = z.memo(function({ tone: i, size: o = "md", pulse: l = !1 }) {
   l && re();
@@ -1070,8 +1071,8 @@ const ie = {
   success: { IconComponent: Z, bg: e.cardBg, accent: e.success },
   error: { IconComponent: ee, bg: e.cardBg, accent: e.error },
   warning: { IconComponent: te, bg: e.cardBg, accent: e.warning },
-  info: { IconComponent: A, bg: e.cardBg, accent: e.info },
-  neutral: { IconComponent: A, bg: e.cardBg, accent: e.textTertiary }
+  info: { IconComponent: E, bg: e.cardBg, accent: e.info },
+  neutral: { IconComponent: E, bg: e.cardBg, accent: e.textTertiary }
 };
 function Pe({
   open: r,
@@ -1087,12 +1088,12 @@ function Pe({
       u(!1);
       return;
     }
-    const k = requestAnimationFrame(() => u(!0));
-    return () => cancelAnimationFrame(k);
+    const S = requestAnimationFrame(() => u(!0));
+    return () => cancelAnimationFrame(S);
   }, [r]), T(() => {
     if (!r || s <= 0) return;
-    const k = setTimeout(i, s);
-    return () => clearTimeout(k);
+    const S = setTimeout(i, s);
+    return () => clearTimeout(S);
   }, [r, s, i]), !r) return null;
   const p = ie[l], c = {
     position: "fixed",
@@ -1128,7 +1129,7 @@ function Pe({
     fontWeight: t.weight.bold,
     flexShrink: 0,
     lineHeight: 1
-  }, x = {
+  }, b = {
     flex: 1,
     fontSize: t.size.base,
     color: e.textPrimary,
@@ -1145,7 +1146,7 @@ function Pe({
     textDecoration: "underline",
     textUnderlineOffset: "2px",
     fontFamily: t.fontFamily.base
-  }, b = {
+  }, x = {
     width: "24px",
     height: "24px",
     display: "flex",
@@ -1157,29 +1158,29 @@ function Pe({
     cursor: "pointer",
     color: e.textTertiary,
     flexShrink: 0
-  }, S = p.IconComponent;
+  }, k = p.IconComponent;
   return /* @__PURE__ */ n("div", { style: c, children: /* @__PURE__ */ f("div", { style: y, children: [
-    /* @__PURE__ */ n("span", { style: h, children: /* @__PURE__ */ n(S, { size: 14 }) }),
-    /* @__PURE__ */ n("span", { style: x, children: o }),
+    /* @__PURE__ */ n("span", { style: h, children: /* @__PURE__ */ n(k, { size: 14 }) }),
+    /* @__PURE__ */ n("span", { style: b, children: o }),
     d && /* @__PURE__ */ n("button", { style: w, onClick: d.onClick, children: d.label }),
     /* @__PURE__ */ n(
       "button",
       {
-        style: b,
+        style: x,
         onClick: i,
         "aria-label": "Dismiss",
-        onMouseEnter: (k) => {
-          k.currentTarget.style.background = e.pageBg;
+        onMouseEnter: (S) => {
+          S.currentTarget.style.background = e.pageBg;
         },
-        onMouseLeave: (k) => {
-          k.currentTarget.style.background = "transparent";
+        onMouseLeave: (S) => {
+          S.currentTarget.style.background = "transparent";
         },
         children: /* @__PURE__ */ n("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ n("path", { d: "M1 1l10 10M11 1L1 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
       }
     )
   ] }) });
 }
-const E = z.memo(function({ children: i }) {
+const P = z.memo(function({ children: i }) {
   const o = {
     fontFamily: t.fontFamily.mono,
     fontSize: t.size.sm,
@@ -1231,7 +1232,7 @@ function je({ title: r, handle: i, field: o, csvVal: l, storeVal: s, type: d, no
       /* @__PURE__ */ n("p", { style: { ...p, fontWeight: t.weight.bold }, children: r }),
       /* @__PURE__ */ n("p", { style: c, children: i })
     ] }),
-    /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(E, { children: o }) }),
+    /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(P, { children: o }) }),
     /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n("p", { style: { ...p, color: l ? e.textPrimary : e.error }, children: l || "(blank)" }) }),
     /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n("p", { style: { ...p, color: e.textTertiary }, children: s || "—" }) }),
     /* @__PURE__ */ f("div", { children: [
@@ -1263,7 +1264,7 @@ function se({ severity: r, field: i, rowCount: o, message: l, fixable: s, onFix:
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between"
-  }, x = {
+  }, b = {
     display: "flex",
     alignItems: "center",
     gap: a[3],
@@ -1279,9 +1280,9 @@ function se({ severity: r, field: i, rowCount: o, message: l, fixable: s, onFix:
   };
   return /* @__PURE__ */ f("div", { style: y, children: [
     /* @__PURE__ */ f("div", { style: h, children: [
-      /* @__PURE__ */ f("div", { style: x, children: [
+      /* @__PURE__ */ f("div", { style: b, children: [
         /* @__PURE__ */ n(Y, { tone: c.tone, dot: !0, children: r.charAt(0).toUpperCase() + r.slice(1) }),
-        /* @__PURE__ */ n(E, { children: i }),
+        /* @__PURE__ */ n(P, { children: i }),
         /* @__PURE__ */ f("span", { style: w, children: [
           o.toLocaleString(),
           " rows affected"
@@ -1308,7 +1309,7 @@ function se({ severity: r, field: i, rowCount: o, message: l, fixable: s, onFix:
       }
     ) }),
     g && /* @__PURE__ */ f("div", { style: { display: "flex", gap: a[2], marginTop: a[1], flexWrap: "wrap" }, children: [
-      [1, 2, 3].map((b) => /* @__PURE__ */ f("span", { style: {
+      [1, 2, 3].map((x) => /* @__PURE__ */ f("span", { style: {
         fontSize: t.size.xs,
         border: `1px solid ${e.border}`,
         padding: `2px ${a[2]}`,
@@ -1316,8 +1317,8 @@ function se({ severity: r, field: i, rowCount: o, message: l, fixable: s, onFix:
         color: e.textSecondary
       }, children: [
         "row ",
-        b
-      ] }, b)),
+        x
+      ] }, x)),
       o > 3 && /* @__PURE__ */ f("span", { style: { fontSize: t.size.xs, color: e.textTertiary, alignSelf: "center" }, children: [
         "+ ",
         o - 3,
@@ -1327,7 +1328,7 @@ function se({ severity: r, field: i, rowCount: o, message: l, fixable: s, onFix:
   ] });
 }
 function Ve({ category: r, issues: i, defaultOpen: o = !0 }) {
-  const [l, s] = C(o), d = i.some((b) => b.severity === "error"), g = i.some((b) => b.severity === "warning"), u = d ? e.error : g ? e.warning : e.info, p = i.reduce((b, S) => b + S.rowCount, 0), c = {
+  const [l, s] = C(o), d = i.some((x) => x.severity === "error"), g = i.some((x) => x.severity === "warning"), u = d ? e.error : g ? e.warning : e.info, p = i.reduce((x, k) => x + k.rowCount, 0), c = {
     backgroundColor: e.cardBg,
     borderRadius: m.lg,
     border: `1px solid ${e.border}`,
@@ -1347,7 +1348,7 @@ function Ve({ category: r, issues: i, defaultOpen: o = !0 }) {
     display: "flex",
     alignItems: "center",
     gap: a[3]
-  }, x = {
+  }, b = {
     width: 8,
     height: 8,
     borderRadius: "50%",
@@ -1365,7 +1366,7 @@ function Ve({ category: r, issues: i, defaultOpen: o = !0 }) {
   return /* @__PURE__ */ f("div", { style: c, children: [
     /* @__PURE__ */ f("div", { style: y, onClick: () => s(!l), children: [
       /* @__PURE__ */ f("div", { style: h, children: [
-        /* @__PURE__ */ n("span", { style: x }),
+        /* @__PURE__ */ n("span", { style: b }),
         /* @__PURE__ */ n("span", { style: { fontSize: t.size.lg, fontWeight: t.weight.bold, color: e.textPrimary }, children: r })
       ] }),
       /* @__PURE__ */ f("div", { style: { display: "flex", alignItems: "center", gap: a[3] }, children: [
@@ -1381,9 +1382,9 @@ function Ve({ category: r, issues: i, defaultOpen: o = !0 }) {
         }, children: "▼" })
       ] })
     ] }),
-    l && /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column" }, children: i.map((b, S) => /* @__PURE__ */ n("div", { style: {
-      borderBottom: S === i.length - 1 ? "none" : `1px solid ${e.borderSubtle}`
-    }, children: /* @__PURE__ */ n(se, { ...b }) }, S)) })
+    l && /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column" }, children: i.map((x, k) => /* @__PURE__ */ n("div", { style: {
+      borderBottom: k === i.length - 1 ? "none" : `1px solid ${e.borderSubtle}`
+    }, children: /* @__PURE__ */ n(se, { ...x }) }, k)) })
   ] });
 }
 const Oe = z.memo(function({ value: i, label: o, tone: l = "neutral" }) {
@@ -1448,7 +1449,7 @@ const Oe = z.memo(function({ value: i, label: o, tone: l = "neutral" }) {
   };
   return /* @__PURE__ */ n("div", { style: l, role: "progressbar", "aria-valuenow": i, "aria-valuemin": 0, "aria-valuemax": 100, children: /* @__PURE__ */ n("div", { style: s }) });
 });
-function Ke({ steps: r }) {
+function Xe({ steps: r }) {
   const i = {
     display: "flex",
     flexDirection: "column",
@@ -1495,7 +1496,7 @@ function Ke({ steps: r }) {
     ] }, o.id);
   }) });
 }
-function Xe({
+function Ge({
   checked: r,
   onChange: i,
   value: o,
@@ -1505,14 +1506,14 @@ function Xe({
   description: g,
   id: u
 }) {
-  const [p, c] = C(!1), [y, h] = C(!1), x = z.useId(), w = u || x, b = {
+  const [p, c] = C(!1), [y, h] = C(!1), b = z.useId(), w = u || b, x = {
     display: "flex",
     alignItems: "flex-start",
     gap: a[3],
     opacity: s ? 0.5 : 1,
     cursor: s ? "not-allowed" : "pointer",
     fontFamily: t.fontFamily.base
-  }, S = {
+  }, k = {
     position: "relative",
     width: "18px",
     height: "18px",
@@ -1525,7 +1526,7 @@ function Xe({
     outline: "none",
     marginTop: "1px"
     // Optical alignment
-  }, k = {
+  }, S = {
     position: "absolute",
     top: "50%",
     left: "50%",
@@ -1545,7 +1546,7 @@ function Xe({
     color: e.textPrimary,
     margin: 0,
     cursor: s ? "not-allowed" : "pointer"
-  }, H = {
+  }, j = {
     fontSize: t.size.sm,
     color: e.textSecondary,
     margin: 0
@@ -1553,7 +1554,7 @@ function Xe({
   return /* @__PURE__ */ f(
     "label",
     {
-      style: b,
+      style: x,
       htmlFor: w,
       onMouseEnter: () => h(!0),
       onMouseLeave: () => h(!1),
@@ -1568,8 +1569,8 @@ function Xe({
               value: o,
               checked: r,
               disabled: s,
-              onChange: (P) => {
-                s || i(P.target.checked);
+              onChange: (V) => {
+                s || i(V.target.checked);
               },
               onFocus: () => c(!0),
               onBlur: () => c(!1),
@@ -1582,17 +1583,17 @@ function Xe({
               }
             }
           ),
-          /* @__PURE__ */ n("div", { style: S, "aria-hidden": "true", children: /* @__PURE__ */ n("div", { style: k }) })
+          /* @__PURE__ */ n("div", { style: k, "aria-hidden": "true", children: /* @__PURE__ */ n("div", { style: S }) })
         ] }),
         (d || g) && /* @__PURE__ */ f("div", { style: F, children: [
           d && /* @__PURE__ */ n("span", { style: M, children: d }),
-          g && /* @__PURE__ */ n("span", { style: H, children: g })
+          g && /* @__PURE__ */ n("span", { style: j, children: g })
         ] })
       ]
     }
   );
 }
-function Ge({ steps: r, current: i }) {
+function Ke({ steps: r, current: i }) {
   const o = {
     display: "flex",
     justifyContent: "space-between",
@@ -1632,7 +1633,7 @@ function Ge({ steps: r, current: i }) {
         zIndex: 2,
         position: "relative",
         transition: "all 300ms ease"
-      }, x = {
+      }, b = {
         position: "absolute",
         top: l + 8,
         left: "50%",
@@ -1649,7 +1650,7 @@ function Ge({ steps: r, current: i }) {
         alignItems: "center"
       }, children: [
         /* @__PURE__ */ n("div", { style: h, children: c ? /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ n("path", { d: "M2.5 7.5L5.5 10.5L11.5 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : p }),
-        /* @__PURE__ */ n("span", { style: x, children: g })
+        /* @__PURE__ */ n("span", { style: b, children: g })
       ] }, g);
     })
   ] });
@@ -1704,7 +1705,7 @@ function qe({ checked: r, onChange: i, disabled: o = !1, label: l, description:
     flexShrink: 0,
     boxShadow: g ? I.focus : "none",
     outline: "none"
-  }, x = {
+  }, b = {
     position: "absolute",
     top: "2px",
     left: r ? "calc(100% - 18px)" : "2px",
@@ -1720,16 +1721,18 @@ function qe({ checked: r, onChange: i, disabled: o = !1, label: l, description:
     gap: a[1],
     marginTop: "1px"
     // Optical alignment with switch thumb
-  }, b = {
+  }, x = {
     fontSize: t.size.md,
     fontWeight: t.weight.medium,
     color: e.textPrimary,
     margin: 0,
     cursor: o ? "not-allowed" : "pointer"
-  }, S = {
+  }, k = {
     fontSize: t.size.sm,
     color: e.textSecondary,
     margin: 0
+  }, S = (F) => {
+    (F.key === " " || F.key === "Enter") && (F.preventDefault(), o || i(!r));
   };
   return /* @__PURE__ */ f(
     "label",
@@ -1746,22 +1749,21 @@ function qe({ checked: r, onChange: i, disabled: o = !1, label: l, description:
             role: "switch",
             "aria-checked": r,
             "aria-disabled": o,
+            "aria-labelledby": l || s ? `${c}-label` : void 0,
             tabIndex: o ? -1 : 0,
-            onKeyDown: (F) => {
-              (F.key === " " || F.key === "Enter") && (F.preventDefault(), o || i(!r));
-            },
+            onKeyDown: S,
             onFocus: () => u(!0),
             onBlur: () => u(!1),
             onClick: (F) => {
               F.preventDefault(), o || i(!r);
             },
             style: h,
-            children: /* @__PURE__ */ n("div", { style: x })
+            children: /* @__PURE__ */ n("div", { style: b })
           }
         ),
-        (l || s) && /* @__PURE__ */ f("div", { style: w, children: [
-          l && /* @__PURE__ */ n("span", { style: b, children: l }),
-          s && /* @__PURE__ */ n("span", { style: S, children: s })
+        (l || s) && /* @__PURE__ */ f("div", { style: w, id: `${c}-label`, children: [
+          l && /* @__PURE__ */ n("span", { style: x, children: l }),
+          s && /* @__PURE__ */ n("span", { style: k, children: s })
         ] })
       ]
     }
@@ -1836,24 +1838,24 @@ export {
   Le as ChevronLeftIcon,
   $e as ChevronRightIcon,
   De as ChevronUpIcon,
-  E as CodeChip,
+  P as CodeChip,
   ye as DataTable,
   je as DiffRow,
   Ce as DownloadIcon,
-  A as InfoIcon,
+  E as InfoIcon,
   he as Input,
   se as IssueCard,
   Ve as IssueGroup,
   Q as LockIcon,
   we as MenuIcon,
   Oe as MiniStat,
-  xe as Modal,
+  be as Modal,
   Ne as ModelTag,
   Ee as PageHeader,
   ve as PlayIcon,
   Ue as ProgressBar,
-  Ke as ProgressList,
-  Xe as Radio,
+  Xe as ProgressList,
+  Ge as Radio,
   me as ScoreBar,
   Se as SearchIcon,
   fe as SectionLabel,
@@ -1861,12 +1863,12 @@ export {
   ke as StarIcon,
   ue as StatGrid,
   Re as StatusDot,
-  Ge as StepBar,
+  Ke as StepBar,
   Ye as SummaryCard,
   qe as Switch,
   pe as TabBar,
   Pe as Toast,
-  be as ToggleGroup,
+  xe as ToggleGroup,
   Je as Trend,
   ze as UploadIcon,
   ee as XIcon,