@actioneer/ads 1.0.3 → 1.0.5

package/components/command-palette.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
 import * as o from "react";
 import { createPortal as S } from "react-dom";
 import { Search as q } from "../lib/icons.js";
-import { cn as k } from "../lib/cn.js";
+import { cn as v } from "../lib/cn.js";
 import { Ripple as C } from "./ripple.js";
 const F = (s, i) => `${s.label} ${s.keywords ?? ""}`.toLowerCase().includes(i);
 function L({
@@ -14,44 +14,44 @@ function L({
   placeholder: $ = "Search…",
   emptyLabel: A = "No results",
   "aria-label": D = "Global search",
-  filter: h = F,
+  filter: y = F,
   className: E
 }) {
-  const f = o.useId(), v = o.useRef(null), g = o.useRef(null), y = o.useRef(null), [m, b] = o.useState(""), [c, x] = o.useState(0), n = o.useMemo(() => {
+  const f = o.useId(), b = o.useRef(null), g = o.useRef(null), w = o.useRef(null), [m, N] = o.useState(""), [c, x] = o.useState(0), l = o.useMemo(() => {
     const e = m.trim().toLowerCase();
-    return e ? p.filter((r) => h(r, e)) : [...p];
-  }, [p, m, h]), M = o.useMemo(() => {
+    return e ? p.filter((r) => y(r, e)) : [...p];
+  }, [p, m, y]), M = o.useMemo(() => {
     const e = [], r = /* @__PURE__ */ new Map();
-    for (const t of n)
+    for (const t of l)
       r.has(t.group) || (r.set(t.group, []), e.push(t.group)), r.get(t.group).push(t);
     return e.map((t) => ({ group: t, items: r.get(t) }));
-  }, [n]), u = n[c];
+  }, [l]), d = l[c];
   o.useEffect(() => {
     x(0);
   }, [m, s]), o.useEffect(() => {
     if (!s) return;
-    y.current = document.activeElement, b("");
+    w.current = document.activeElement, N("");
     const e = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const r = requestAnimationFrame(() => {
       var t;
-      return (t = v.current) == null ? void 0 : t.focus();
+      return (t = b.current) == null ? void 0 : t.focus();
     });
     return () => {
-      var t, l;
-      document.body.style.overflow = e, cancelAnimationFrame(r), (l = (t = y.current) == null ? void 0 : t.focus) == null || l.call(t);
+      var t, n;
+      document.body.style.overflow = e, cancelAnimationFrame(r), (n = (t = w.current) == null ? void 0 : t.focus) == null || n.call(t);
     };
   }, [s]), o.useEffect(() => {
     var e, r;
-    !s || !u || (r = (e = g.current) == null ? void 0 : e.querySelector(`[data-index="${c}"]`)) == null || r.scrollIntoView({ block: "nearest" });
-  }, [s, u, c]);
-  const w = (e) => {
+    !s || !d || (r = (e = g.current) == null ? void 0 : e.querySelector(`[data-index="${c}"]`)) == null || r.scrollIntoView({ block: "nearest" });
+  }, [s, d, c]);
+  const k = (e) => {
     i(!1), R(e);
   }, I = (e) => {
-    e.key === "Escape" ? (e.preventDefault(), i(!1)) : e.key === "ArrowDown" ? (e.preventDefault(), x((r) => Math.min(r + 1, n.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), x((r) => Math.max(r - 1, 0))) : e.key === "Enter" && u && (e.preventDefault(), w(u));
+    e.key === "Escape" ? (e.preventDefault(), i(!1)) : e.key === "ArrowDown" ? (e.preventDefault(), x((r) => Math.min(r + 1, l.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), x((r) => Math.max(r - 1, 0))) : e.key === "Enter" && d && (e.preventDefault(), k(d));
   };
   return s ? S(
-    /* @__PURE__ */ d("div", { className: "fixed inset-0 z-50 flex items-start justify-center px-4 pt-[15vh]", children: [
+    /* @__PURE__ */ u("div", { className: "fixed inset-0 z-50 flex items-start justify-center px-4 pt-[15vh]", children: [
       /* @__PURE__ */ a(
         "div",
         {
@@ -60,13 +60,13 @@ function L({
           onClick: () => i(!1)
         }
       ),
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ u(
         "div",
         {
           role: "dialog",
           "aria-modal": "true",
           "aria-label": D,
-          className: k(
+          className: v(
             "relative flex w-full max-w-lg flex-col overflow-hidden",
             "rounded-xl bg-elevated text-foreground shadow-elevation",
             E
@@ -74,19 +74,19 @@ function L({
           onKeyDown: I,
           children: [
             /* @__PURE__ */ a(C, { origin: "top" }),
-            /* @__PURE__ */ d("div", { className: "flex items-center gap-2.5 px-4 py-3", children: [
+            /* @__PURE__ */ u("div", { className: "flex items-center gap-2.5 px-4 py-3", children: [
               /* @__PURE__ */ a(q, { "aria-hidden": !0, className: "size-4 shrink-0 text-muted-foreground" }),
               /* @__PURE__ */ a(
                 "input",
                 {
-                  ref: v,
+                  ref: b,
                   role: "combobox",
                   "aria-expanded": "true",
                   "aria-controls": f,
-                  "aria-activedescendant": u ? `${f}-${c}` : void 0,
+                  "aria-activedescendant": d ? `${f}-${c}` : void 0,
                   "aria-autocomplete": "list",
                   value: m,
-                  onChange: (e) => b(e.target.value),
+                  onChange: (e) => N(e.target.value),
                   placeholder: $,
                   className: "w-full bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
                 }
@@ -100,34 +100,34 @@ function L({
                 role: "listbox",
                 "aria-label": "Results",
                 className: "max-h-80 overflow-y-auto p-1.5 pt-0",
-                children: n.length === 0 ? /* @__PURE__ */ a("p", { className: "px-2.5 py-6 text-center text-xs text-muted-foreground", children: A }) : M.map(({ group: e, items: r }) => /* @__PURE__ */ d("div", { role: "group", "aria-label": e, children: [
-                  e && /* @__PURE__ */ a("div", { className: "px-2.5 pb-1 pt-2.5 text-xs font-normal text-muted-foreground select-none", children: e }),
+                children: l.length === 0 ? /* @__PURE__ */ a("p", { className: "px-2.5 py-6 text-center text-s text-muted-foreground", children: A }) : M.map(({ group: e, items: r }) => /* @__PURE__ */ u("div", { role: "group", "aria-label": e, children: [
+                  e && /* @__PURE__ */ a("div", { className: "px-2.5 pb-1 pt-2.5 text-s font-normal text-muted-foreground select-none", children: e }),
                   r.map((t) => {
-                    const l = n.indexOf(t), N = l === c;
-                    return /* @__PURE__ */ d(
+                    const n = l.indexOf(t), h = n === c;
+                    return /* @__PURE__ */ u(
                       "div",
                       {
-                        id: `${f}-${l}`,
-                        "data-index": l,
+                        id: `${f}-${n}`,
+                        "data-index": n,
                         role: "option",
-                        "aria-selected": N,
-                        onPointerMove: () => x(l),
-                        onClick: () => w(t),
-                        className: k(
-                          "flex cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs",
-                          N ? "bg-fill text-foreground" : "text-secondary"
+                        "aria-selected": h,
+                        onPointerMove: () => x(n),
+                        onClick: () => k(t),
+                        className: v(
+                          "flex cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-m",
+                          h ? "bg-action-primary-soft text-brand-text" : "text-secondary"
                         ),
                         children: [
                           t.icon && /* @__PURE__ */ a(
                             "span",
                             {
                               "aria-hidden": !0,
-                              className: "flex shrink-0 items-center text-muted-foreground [&_svg]:size-4",
+                              className: v("flex shrink-0 items-center [&_svg]:size-4", h ? "text-brand-text" : "text-muted-foreground"),
                               children: t.icon
                             }
                           ),
                           /* @__PURE__ */ a("span", { className: "min-w-0 flex-1 truncate", children: t.label }),
-                          t.hint && /* @__PURE__ */ a("span", { className: "shrink-0 text-xs text-tertiary", children: t.hint })
+                          t.hint && /* @__PURE__ */ a("span", { className: "shrink-0 text-s text-tertiary", children: t.hint })
                         ]
                       },
                       t.id

package/components/connector-card.js

@@ -109,7 +109,7 @@ const w = g.forwardRef(
           "span",
           {
             className: o(
-              "inline-flex shrink-0 items-center gap-0.5 text-xs font-normal",
+              "inline-flex shrink-0 items-center gap-0.5 text-m font-normal",
               h ? "text-danger" : "text-foreground"
             ),
             children: [

package/components/date-range-picker.js

@@ -144,7 +144,7 @@ function se({
                   className: o(
                     "ml-auto inline-flex shrink-0 cursor-pointer items-center justify-center border border-transparent text-muted-foreground outline-none",
                     "transition-[background,color,transform] duration-150 ease-out",
-                    "group-hover/field:text-foreground group-focus-within/field:text-g12!",
+                    "group-hover/field:text-foreground group-focus-within/field:text-t12!",
                     "hover:bg-action-primary-soft hover:text-action-primary-text!",
                     "data-[pressed]:scale-[0.97] data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text!",
                     "motion-reduce:data-[pressed]:scale-100",
@@ -185,7 +185,7 @@ function se({
                 )
               ] }),
               /* @__PURE__ */ d(F, { weekdayStyle: "short", className: "w-full border-separate border-spacing-0.5", children: [
-                /* @__PURE__ */ t(_, { children: (r) => /* @__PURE__ */ t($, { className: "h-7 text-center text-xs font-medium text-muted-foreground", children: r }) }),
+                /* @__PURE__ */ t(_, { children: (r) => /* @__PURE__ */ t($, { className: "h-7 text-center text-s font-medium text-muted-foreground", children: r }) }),
                 /* @__PURE__ */ t(q, { children: (r) => /* @__PURE__ */ t(
                   K,
                   {
@@ -199,7 +199,7 @@ function se({
                       isSelectionStart: M,
                       isUnavailable: P
                     }) => o(
-                      "relative flex size-8 cursor-pointer items-center justify-center rounded-sm text-xs tabular-nums outline-none transition-colors duration-150",
+                      "relative flex size-8 cursor-pointer items-center justify-center rounded-sm text-s tabular-nums outline-none transition-colors duration-150",
                       "hover:bg-action-primary-soft hover:text-action-primary-text",
                       "data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text",
                       G && "bg-action-primary-soft font-medium text-action-primary-text",

package/components/dropdown.js

@@ -193,7 +193,7 @@ const T = s.forwardRef(({ className: r, ...t }, n) => /* @__PURE__ */ h(
   {
     ref: n,
     className: R(
-      "px-2 py-1.5 text-xs font-normal text-muted-foreground select-none",
+      "px-2 py-1.5 text-s font-normal text-muted-foreground select-none",
       r
     ),
     ...t

package/components/field.js

@@ -16,7 +16,7 @@ const L = i(
   "transition-[border-color,box-shadow]",
   "disabled:cursor-not-allowed disabled:opacity-50",
   // Form controls keep a subtle stroke (the "~25%") for crisp definition;
-  // hover stays neutral while focus uses the subtle semantic green edge. The inner
+  // hover stays neutral while focus uses the subtle teal edge. The inner
   // glow is a whisper of inset depth so the writing surface reads recessed —
   // carried through every interactive state by the --glow-inset hook.
   R({ on: "all", color: "brand", intensity: "medium", animate: !0 }),

package/components/file-dropzone.js

@@ -92,7 +92,7 @@ const T = C(
             /* @__PURE__ */ r("span", { "aria-hidden": !0, className: "text-tertiary [&>svg]:size-6", children: /* @__PURE__ */ r(R, {}) }),
             /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: s.map((e) => /* @__PURE__ */ a("span", { className: "text-base text-foreground", children: [
               e.name,
-              /* @__PURE__ */ r("span", { className: "ml-2 text-xs text-tertiary tabular-nums", children: j(e.size) })
+              /* @__PURE__ */ r("span", { className: "ml-2 text-s text-tertiary tabular-nums", children: j(e.size) })
             ] }, e.name)) }),
             /* @__PURE__ */ a("div", { className: "mt-1 flex items-center gap-2", children: [
               /* @__PURE__ */ r(D, { size: "sm", variant: "secondary", onClick: (e) => {
@@ -120,7 +120,7 @@ const T = C(
               " ",
               /* @__PURE__ */ r("span", { className: "underline underline-offset-4", children: "browse" })
             ] }) }),
-            p && /* @__PURE__ */ r("span", { className: "text-xs text-tertiary", children: p })
+            p && /* @__PURE__ */ r("span", { className: "text-s text-tertiary", children: p })
           ] })
         ]
       }

package/components/infinite-canvas.js

@@ -65,7 +65,7 @@ function S({
         /* @__PURE__ */ b(
           "span",
           {
-            className: "min-w-12 text-center text-xs tabular-nums text-muted-foreground",
+            className: "min-w-12 text-center text-s tabular-nums text-muted-foreground",
             "aria-live": "polite",
             children: [
               Math.round(u * 100),

package/components/input-field.js

@@ -85,9 +85,9 @@ const U = i.forwardRef(
     ), z = r || n ? (
       // group/field: adornment icons follow the field's interactive states.
       /* @__PURE__ */ C("div", { className: "group/field relative w-full", children: [
-        r && /* @__PURE__ */ t("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-g12! [&_svg]:size-4", children: r }),
+        r && /* @__PURE__ */ t("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-t12! [&_svg]:size-4", children: r }),
         k,
-        n && /* @__PURE__ */ t("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-g12! [&_svg]:size-4", children: n })
+        n && /* @__PURE__ */ t("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-t12! [&_svg]:size-4", children: n })
       ] })
     ) : k;
     return !v && !d && !o && !m ? z : /* @__PURE__ */ t(

package/components/input.js

@@ -18,7 +18,7 @@ const N = {
     type: s,
     ...c
   }, m) => {
-    const [i, p] = l.useState(!1), n = s === "password", r = u ?? (n ? /* @__PURE__ */ e(
+    const [i, p] = l.useState(!1), t = s === "password", r = u ?? (t ? /* @__PURE__ */ e(
       "button",
       {
         type: "button",
@@ -27,11 +27,11 @@ const N = {
         className: "-mr-1 flex items-center rounded-xs p-1 outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring",
         children: i ? /* @__PURE__ */ e(x, {}) : /* @__PURE__ */ e(w, {})
       }
-    ) : void 0), t = /* @__PURE__ */ e(
+    ) : void 0), n = /* @__PURE__ */ e(
       "input",
       {
         ref: m,
-        type: n && i ? "text" : s,
+        type: t && i ? "text" : s,
         "aria-invalid": f || void 0,
         className: h(
           b,
@@ -46,14 +46,14 @@ const N = {
         ...c
       }
     );
-    return !o && !r ? t : (
+    return !o && !r ? n : (
       // group/field: adornment icons follow the field's interactive states —
-      // muted at rest, readable on hover, and G12 green while the
-      // control is focused. Important keeps focus green while still hovered.
+      // muted at rest, readable on hover, and T12 teal while the
+      // control is focused. Important keeps focus teal while still hovered.
       /* @__PURE__ */ v("div", { className: "group/field relative w-full", children: [
-        o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-g12! [&_svg]:size-4", children: o }),
-        t,
-        r && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-g12! [&_svg]:size-4", children: r })
+        o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-t12! [&_svg]:size-4", children: o }),
+        n,
+        r && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-t12! [&_svg]:size-4", children: r })
       ] })
     );
   }

package/components/modal.js

@@ -61,10 +61,10 @@ function ee({
   overlayClassName: j,
   viewportClassName: V,
   "aria-label": v,
-  "aria-labelledby": _,
-  "aria-describedby": k
+  "aria-labelledby": k,
+  "aria-describedby": P
 }) {
-  const b = r.useRef(null), f = r.useId(), p = r.useId(), P = r.useMemo(
+  const b = r.useRef(null), f = r.useId(), p = r.useId(), _ = r.useMemo(
     () => M(d),
     [d]
   ), E = r.useMemo(
@@ -103,8 +103,8 @@ function ee({
             forceMount: !0,
             asChild: !0,
             "aria-label": v,
-            "aria-labelledby": _ ?? (v ? void 0 : f),
-            "aria-describedby": k ?? (P ? p : void 0),
+            "aria-labelledby": k ?? (v ? void 0 : f),
+            "aria-describedby": P ?? (_ ? p : void 0),
             onEscapeKeyDown: (s) => {
               z || s.preventDefault();
             },
@@ -258,7 +258,7 @@ const Q = r.forwardRef(({ className: o, ...e }, a) => /* @__PURE__ */ t(
     "data-slot": "modal-footer",
     className: n(
       "flex min-h-[3.75rem] shrink-0 flex-wrap items-center justify-end gap-2 border-t-[1px] border-border-tertiary px-4 py-4",
-      "[&_button]:h-7 [&_button]:rounded-sm [&_button]:px-2.5 [&_button]:text-xs",
+      "[&_button]:h-7 [&_button]:rounded-sm [&_button]:px-2.5",
       o
     ),
     ...e

package/components/pagination.js

@@ -4,15 +4,15 @@ import * as j from "react";
 import { ChevronLeft as L, MoreHorizontal as k, ChevronRight as G } from "../lib/icons.js";
 import { cn as u } from "../lib/cn.js";
 import { Select as M } from "./select.js";
-function p(t, s) {
+function p(t, r) {
   const e = [];
-  for (let r = t; r <= s; r += 1) e.push(r);
+  for (let s = t; s <= r; s += 1) e.push(s);
   return e;
 }
-function z(t, s, e) {
+function z(t, r, e) {
   if (e * 2 + 5 >= t)
     return p(1, t);
-  const m = Math.max(s - e, 1), a = Math.min(s + e, t), d = m > 2, i = a < t - 1;
+  const m = Math.max(r - e, 1), a = Math.min(r + e, t), d = m > 2, i = a < t - 1;
   if (!d && i) {
     const l = e * 2 + 3;
     return [...p(1, l), "end-ellipsis", t];
@@ -34,13 +34,13 @@ const E = () => u(
   "outline-none focus-visible:ring-3 focus-visible:ring-ring",
   "transition active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100",
   "disabled:pointer-events-none disabled:opacity-40",
-  "size-6 text-xs"
+  "size-6 text-s"
 ), N = (t) => t === "sm" ? "w-auto gap-1.5 px-2" : "w-auto gap-1.5 px-2.5", A = j.forwardRef(
   ({
     className: t,
-    total: s,
+    total: r,
     page: e,
-    onChange: r,
+    onChange: s,
     siblings: m = 1,
     size: a = "md",
     summary: d,
@@ -48,21 +48,21 @@ const E = () => u(
     pageSize: l,
     pageSizeOptions: w,
     onPageSizeChange: h,
-    ...C
-  }, y) => {
-    if (s <= 0) return null;
-    const P = z(s, e, m), R = e <= 1, S = e >= s, f = E(), g = a === "sm" ? "size-3.5" : "size-4", x = l != null && !!h, b = d != null || x;
+    ...y
+  }, C) => {
+    if (r <= 0) return null;
+    const P = z(r, e, m), R = e <= 1, S = e >= r, f = E(), x = a === "sm" ? "size-3.5" : "size-4", g = l != null && !!h, b = d != null || g;
     return /* @__PURE__ */ c(
       "nav",
       {
-        ref: y,
+        ref: C,
         "aria-label": "Pagination",
         className: u(
           "flex items-center",
           b ? "w-full justify-between gap-4" : "gap-1",
           t
         ),
-        ...C,
+        ...y,
         children: [
           b && /* @__PURE__ */ o(
             "span",
@@ -72,7 +72,7 @@ const E = () => u(
             }
           ),
           /* @__PURE__ */ c("div", { className: "flex items-center gap-4", children: [
-            x && /* @__PURE__ */ c(
+            g && /* @__PURE__ */ c(
               "label",
               {
                 className: "flex items-center gap-2 text-s text-muted-foreground",
@@ -102,14 +102,14 @@ const E = () => u(
                   type: "button",
                   "aria-label": "Go to previous page",
                   disabled: R,
-                  onClick: () => r(e - 1),
+                  onClick: () => s(e - 1),
                   className: u(
                     f,
-                    "text-foreground hover:bg-muted",
+                    "text-foreground hover:bg-action-primary-soft hover:text-brand-text",
                     i && N(a)
                   ),
                   children: [
-                    /* @__PURE__ */ o(L, { className: g, "aria-hidden": !0 }),
+                    /* @__PURE__ */ o(L, { className: x, "aria-hidden": !0 }),
                     i && "Prev"
                   ]
                 }
@@ -121,7 +121,7 @@ const E = () => u(
                     {
                       "aria-hidden": !0,
                       className: u(f, "text-muted-foreground"),
-                      children: /* @__PURE__ */ o(k, { className: g })
+                      children: /* @__PURE__ */ o(k, { className: x })
                     },
                     n
                   );
@@ -132,10 +132,10 @@ const E = () => u(
                     type: "button",
                     "aria-label": `Go to page ${n}`,
                     "aria-current": v ? "page" : void 0,
-                    onClick: () => r(n),
+                    onClick: () => s(n),
                     className: u(
                       f,
-                      v ? "bg-wg10 text-brand-foreground" : "text-foreground hover:bg-muted"
+                      v ? "bg-brand text-brand-foreground" : "text-foreground hover:bg-action-primary-soft hover:text-brand-text"
                     ),
                     children: n
                   },
@@ -148,15 +148,15 @@ const E = () => u(
                   type: "button",
                   "aria-label": "Go to next page",
                   disabled: S,
-                  onClick: () => r(e + 1),
+                  onClick: () => s(e + 1),
                   className: u(
                     f,
-                    "text-foreground hover:bg-muted",
+                    "text-foreground hover:bg-action-primary-soft hover:text-brand-text",
                     i && N(a)
                   ),
                   children: [
                     i && "Next",
-                    /* @__PURE__ */ o(G, { className: g, "aria-hidden": !0 })
+                    /* @__PURE__ */ o(G, { className: x, "aria-hidden": !0 })
                   ]
                 }
               )

package/components/radio.js

@@ -55,7 +55,7 @@ const j = i.forwardRef(
       "label",
       {
         className: b(
-          "group inline-flex items-center gap-2 text-xs text-foreground select-none",
+          "group inline-flex items-center gap-2 text-m text-foreground select-none",
           s ? "cursor-not-allowed opacity-50" : "cursor-pointer",
           d
         ),

package/components/segmented.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import { jsx as n, jsxs as x } from "react/jsx-runtime";
 import * as l from "react";
 import { MotionConfig as v, motion as w } from "motion/react";
 import { cva as c } from "class-variance-authority";
@@ -13,9 +13,9 @@ const D = c(
   {
     variants: {
       size: {
-        sm: "rounded-sm text-xs",
-        md: "rounded-md text-xs",
-        lg: "rounded-md text-base"
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-md"
       }
     },
     defaultVariants: { size: "md" }
@@ -24,7 +24,7 @@ const D = c(
   o(
     // The active segment is a shared motion thumb that SLIDES between options
     // (layoutId), so the option itself only carries text color.
-    "relative inline-flex items-center justify-center whitespace-nowrap font-normal select-none",
+    "relative inline-flex items-center justify-center whitespace-nowrap text-m font-normal select-none",
     "transition-colors duration-150 cursor-pointer",
     "outline-none focus-visible:ring-3 focus-visible:ring-ring",
     "disabled:pointer-events-none disabled:opacity-50"
@@ -37,21 +37,21 @@ const D = c(
         lg: "h-9 rounded-md px-4"
       },
       selected: {
-        true: "text-foreground",
-        false: "text-muted-foreground hover:text-foreground"
+        true: "text-brand-foreground",
+        false: "text-muted-foreground hover:text-brand-text"
       }
     },
     defaultVariants: { size: "md", selected: !1 }
   }
-), I = l.forwardRef(({ options: r, value: a, onChange: s, size: i, className: u, elevated: m = !0, ...f }, p) => {
-  const g = l.useId(), d = (e) => {
-    const t = r.findIndex((x) => x.value === a), b = ((t < 0 ? 0 : t) + e + r.length) % r.length;
-    s(r[b].value);
+), I = l.forwardRef(({ options: t, value: a, onChange: s, size: i, className: m, elevated: u = !0, ...f }, b) => {
+  const p = l.useId(), d = (e) => {
+    const r = t.findIndex((h) => h.value === a), g = ((r < 0 ? 0 : r) + e + t.length) % t.length;
+    s(t[g].value);
   };
   return /* @__PURE__ */ n(
     "div",
     {
-      ref: p,
+      ref: b,
       role: "radiogroup",
       onKeyDown: (e) => {
         switch (e.key) {
@@ -65,31 +65,31 @@ const D = c(
             break;
         }
       },
-      className: o(D({ size: i }), u),
+      className: o(D({ size: i }), m),
       ...f,
-      children: /* @__PURE__ */ n(v, { reducedMotion: "user", children: r.map((e) => {
-        const t = e.value === a;
-        return /* @__PURE__ */ h(
+      children: /* @__PURE__ */ n(v, { reducedMotion: "user", children: t.map((e) => {
+        const r = e.value === a;
+        return /* @__PURE__ */ x(
           "button",
           {
             type: "button",
             role: "radio",
-            "aria-checked": t,
+            "aria-checked": r,
             "aria-label": e.ariaLabel,
-            tabIndex: t ? 0 : -1,
+            tabIndex: r ? 0 : -1,
             onClick: () => s(e.value),
-            className: k({ size: i, selected: t }),
+            className: k({ size: i, selected: r }),
             children: [
-              t && /* @__PURE__ */ n(
+              r && /* @__PURE__ */ n(
                 w.span,
                 {
-                  layoutId: g,
+                  layoutId: p,
                   "aria-hidden": !0,
                   layoutDependency: a,
                   transition: y,
                   className: o(
-                    "absolute inset-0 rounded-[inherit] bg-elevated",
-                    m && "shadow-elevation"
+                    "absolute inset-0 rounded-[inherit] bg-brand",
+                    u && "shadow-elevation"
                   )
                 }
               ),

package/components/select.d.ts

@@ -24,7 +24,7 @@ export interface DropdownOptionsProps {
 }
 /**
  * DropdownOptions — the reusable options surface composed by Select.
- * It owns listbox semantics and the brand-green option interaction treatment;
+ * It owns listbox semantics and the brand-teal option interaction treatment;
  * positioning and open/closed state stay with the parent Select.
  */
 export declare const DropdownOptions: React.ForwardRefExoticComponent<DropdownOptionsProps & React.RefAttributes<HTMLUListElement>>;

package/components/select.js

@@ -254,7 +254,7 @@ const re = n.forwardRef(
               {
                 className: b(
                   "size-4 text-muted-foreground transition-[color,transform] duration-150 ease-out motion-reduce:transition-none",
-                  "group-hover/select:text-foreground group-focus/select:text-g12!",
+                  "group-hover/select:text-foreground group-focus/select:text-t12!",
                   r && "rotate-180"
                 ),
                 "aria-hidden": !0