@actioneer/ads 0.7.0 → 0.8.0

package/components/sidebar.js

@@ -3,7 +3,7 @@ import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import * as s from "react";
 import { MotionConfig as z, motion as _ } from "motion/react";
 import { User as j, PanelLeft as E } from "../lib/icons.js";
-import { cn as o } from "../lib/cn.js";
+import { cn as n } from "../lib/cn.js";
 import { springSidebar as H } from "../lib/motion.js";
 import { Tooltip as I } from "./tooltip.js";
 import { Avatar as L } from "./avatar.js";
@@ -23,7 +23,7 @@ const K = s.forwardRef(
     collapsed: e,
     defaultCollapsed: a = !1,
     onCollapsedChange: i,
-    animateOnMount: n = !1,
+    animateOnMount: o = !1,
     keyboardToggle: d = !0,
     ...l
   }, m) => {
@@ -52,7 +52,7 @@ const K = s.forwardRef(
       {
         ref: m,
         "data-collapsed": u ? "true" : "false",
-        initial: n ? {
+        initial: o ? {
           width: u ? 56 : 240,
           transform: "translate3d(-100%, 0, 0)",
           opacity: 0
@@ -63,7 +63,7 @@ const K = s.forwardRef(
           opacity: 1
         },
         transition: H,
-        className: o(
+        className: n(
           "group/sidebar flex h-full shrink-0 flex-col bg-background",
           t
         ),
@@ -82,13 +82,13 @@ function k({
   tooltipSide: a = "right",
   ...i
 }) {
-  const { collapsed: n, toggle: d } = M();
+  const { collapsed: o, toggle: d } = M();
   return /* @__PURE__ */ r(
     I,
     {
       side: a,
       content: /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
-        n ? "Expand" : "Collapse",
+        o ? "Expand" : "Collapse",
         /* @__PURE__ */ c("span", { className: "flex items-center gap-0.5", children: [
           /* @__PURE__ */ r(S, { children: "⌘" }),
           /* @__PURE__ */ r(S, { children: "B" })
@@ -98,12 +98,12 @@ function k({
         "button",
         {
           type: "button",
-          "aria-label": n ? "Expand sidebar" : "Collapse sidebar",
-          "aria-pressed": n,
+          "aria-label": o ? "Expand sidebar" : "Collapse sidebar",
+          "aria-pressed": o,
           onClick: (l) => {
             e == null || e(l), d();
           },
-          className: o(
+          className: n(
             "inline-flex size-(--sidebar-item) shrink-0 items-center justify-center rounded-sm border border-transparent text-muted-foreground",
             "transition-colors hover:border-border hover:bg-elevated hover:text-foreground",
             "outline-none focus-visible:ring-3 focus-visible:ring-ring",
@@ -122,11 +122,11 @@ function Y({
   href: e,
   label: a = "Home",
   showTrigger: i = !0,
-  children: n,
+  children: o,
   className: d,
   ...l
 }) {
-  const m = o(
+  const m = n(
     // 20px mark centered in a 32px square — the same box as every other rail icon.
     // group/brand lets a BrandMark logo play its blip loop on hover.
     "group/brand flex size-(--sidebar-item) items-center justify-center",
@@ -139,7 +139,7 @@ function Y({
   return /* @__PURE__ */ c(
     "div",
     {
-      className: o(
+      className: n(
         "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-4",
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
         d
@@ -150,7 +150,7 @@ function Y({
         i && /* @__PURE__ */ r("div", { className: "hidden group-data-[collapsed=true]/sidebar:group-hover/sidebar:flex group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:flex", children: /* @__PURE__ */ r(k, { tooltipSide: "right" }) }),
         /* @__PURE__ */ c("div", { className: "flex items-center gap-1 group-data-[collapsed=true]/sidebar:hidden", children: [
           i && /* @__PURE__ */ r(k, { tooltipSide: "bottom" }),
-          n
+          o
         ] })
       ]
     }
@@ -161,7 +161,7 @@ const q = s.forwardRef(
     "div",
     {
       ref: a,
-      className: o(
+      className: n(
         "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-3",
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
         t
@@ -172,36 +172,36 @@ const q = s.forwardRef(
 );
 q.displayName = "SidebarHeader";
 const A = s.forwardRef(
-  ({ className: t, ...e }, a) => /* @__PURE__ */ r("nav", { ref: a, className: o("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", t), ...e })
+  ({ className: t, ...e }, a) => /* @__PURE__ */ r("nav", { ref: a, className: n("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", t), ...e })
 );
 A.displayName = "SidebarNav";
 const B = s.forwardRef(
-  ({ className: t, label: e, children: a, ...i }, n) => /* @__PURE__ */ c("div", { ref: n, className: t, ...i, children: [
-    e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s leading-[var(--text-s--line-height)] font-medium text-ng10 group-data-[collapsed=true]/sidebar:hidden", children: e }),
+  ({ className: t, label: e, children: a, ...i }, o) => /* @__PURE__ */ c("div", { ref: o, className: t, ...i, children: [
+    e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s leading-[var(--text-s--line-height)] font-medium text-on-warm-grey-secondary group-data-[collapsed=true]/sidebar:hidden", children: e }),
     /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5 group-data-[collapsed=true]/sidebar:gap-2", children: a })
   ] })
 );
 B.displayName = "SidebarSection";
 const D = s.forwardRef(
-  ({ className: t, icon: e, isActive: a, endContent: i, children: n, title: d, ...l }, m) => /* @__PURE__ */ c(
+  ({ className: t, icon: e, isActive: a, endContent: i, children: o, title: d, ...l }, m) => /* @__PURE__ */ c(
     "a",
     {
       ref: m,
       "aria-current": a ? "page" : void 0,
-      title: d ?? (typeof n == "string" ? n : void 0),
-      className: o(
-        "flex h-9 items-center gap-2.5 rounded-md border border-transparent px-3 text-m leading-[var(--text-m--line-height)] font-normal text-ng12 transition-colors",
+      title: d ?? (typeof o == "string" ? o : void 0),
+      className: n(
+        "flex h-9 items-center gap-2.5 rounded-md border border-transparent px-3 text-m leading-[var(--text-m--line-height)] font-normal text-wg12 transition-colors",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "[&_svg]:size-4 [&_svg]:shrink-0",
         // Collapsed: a centered square (--sidebar-item) so every rail item lines up.
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
-        a ? "border-ng4 bg-white" : "hover:bg-sidebar-accent/60",
+        a ? "border-wg4 bg-card" : "hover:bg-sidebar-accent/60",
         t
       ),
       ...l,
       children: [
         a && s.isValidElement(e) ? s.cloneElement(e, { weight: "fill" }) : e,
-        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: n }),
+        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: o }),
         i && /* @__PURE__ */ r("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: i })
       ]
     }
@@ -213,21 +213,21 @@ const F = s.forwardRef(
     "div",
     {
       ref: a,
-      className: o("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", t),
+      className: n("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", t),
       ...e
     }
   )
 );
 F.displayName = "SidebarFooter";
 const W = s.forwardRef(
-  ({ className: t, icon: e, children: a, ...i }, n) => /* @__PURE__ */ r("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
+  ({ className: t, icon: e, children: a, ...i }, o) => /* @__PURE__ */ r("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
     "button",
     {
-      ref: n,
+      ref: o,
       type: "button",
-      className: o(
+      className: n(
         "flex h-9 w-full items-center justify-start gap-2 rounded-md px-3",
-        "text-m leading-[var(--text-m--line-height)] font-normal text-ng12",
+        "text-m leading-[var(--text-m--line-height)] font-normal text-wg12",
         // Reads as a normal nav item: transparent at rest, the shared grey
         // hover wash on hover (no fill-at-rest, no elevation).
         "transition-colors duration-150 ease-out motion-reduce:transition-none",
@@ -247,21 +247,21 @@ const W = s.forwardRef(
 );
 W.displayName = "SidebarAction";
 const $ = s.forwardRef(
-  ({ className: t, label: e, children: a, ...i }, n) => /* @__PURE__ */ c(
+  ({ className: t, label: e, children: a, ...i }, o) => /* @__PURE__ */ c(
     "div",
     {
-      ref: n,
-      className: o("group-data-[collapsed=true]/sidebar:hidden", t),
+      ref: o,
+      className: n("group-data-[collapsed=true]/sidebar:hidden", t),
       ...i,
       children: [
-        e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s leading-[var(--text-s--line-height)] font-medium text-ng10", children: e }),
+        e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-s leading-[var(--text-s--line-height)] font-medium text-on-warm-grey-secondary", children: e }),
         /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: a })
       ]
     }
   )
 );
 $.displayName = "SidebarHistory";
-const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActive: n, icon: d, ...l }, m) => {
+const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActive: o, icon: d, ...l }, m) => {
   const v = s.useRef(null), y = s.useRef(null), [b, u] = s.useState(0);
   s.useLayoutEffect(() => {
     const x = v.current, p = y.current;
@@ -278,10 +278,10 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
   return /* @__PURE__ */ c(
     "div",
     {
-      className: o(
+      className: n(
         "group/hist relative flex items-center rounded-md transition-colors",
-        "text-ng12",
-        n ? "bg-sidebar-accent/60" : "hover:bg-sidebar-accent/60"
+        "text-wg12",
+        o ? "bg-sidebar-accent/60" : "hover:bg-sidebar-accent/60"
       ),
       children: [
         d && /* @__PURE__ */ r(
@@ -297,7 +297,7 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
           {
             ref: m,
             title: a ?? (typeof e == "string" ? e : void 0),
-            className: o(
+            className: n(
               // Left pad matches a SidebarItem's text column (px-3 + icon size-4 +
               // gap-2.5 = 2.375rem) so history titles line up under the nav labels.
               "block min-w-0 flex-1 rounded-md py-1.5 pr-3 ps-(--sidebar-text-indent) text-m leading-[var(--text-m--line-height)] font-normal",
@@ -309,19 +309,19 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
               "span",
               {
                 ref: v,
-                className: o(
+                className: n(
                   "block overflow-hidden",
                   // Rest: fade the right edge (no ellipsis). Hover: the title scrolls,
                   // so fade the LEFT edge where it exits; the action backdrop (or the
                   // string's own end) handles the right.
-                  g && "[mask-image:linear-gradient(to_right,#000_calc(100%-1.5rem),transparent)]",
-                  g && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,#000_1.25rem,#000_100%)]"
+                  g && "[mask-image:linear-gradient(to_right,var(--color-wg12)_calc(100%-1.5rem),transparent)]",
+                  g && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,var(--color-wg12)_1.25rem,var(--color-wg12)_100%)]"
                 ),
                 children: /* @__PURE__ */ r(
                   "span",
                   {
                     ref: y,
-                    className: o(
+                    className: n(
                       "block w-max whitespace-nowrap transition-transform ease-linear",
                       g && "group-hover/hist:[transform:translateX(var(--mq-x))]",
                       "motion-reduce:transition-none motion-reduce:group-hover/hist:[transform:none]"
@@ -340,7 +340,7 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
         i && /* @__PURE__ */ r(
           "span",
           {
-            className: o(
+            className: n(
               // Rounded end matches the row's radius so the backdrop doesn't
               // square off the highlight's right corners.
               "absolute inset-y-0 right-0 flex items-center rounded-e-md pl-8 pr-1",
@@ -358,20 +358,20 @@ const O = s.forwardRef(({ className: t, children: e, title: a, action: i, isActi
 });
 O.displayName = "SidebarHistoryItem";
 const P = s.forwardRef(
-  ({ className: t, name: e, role: a, src: i, hideAvatar: n, ...d }, l) => /* @__PURE__ */ c(
+  ({ className: t, name: e, role: a, src: i, hideAvatar: o, ...d }, l) => /* @__PURE__ */ c(
     "a",
     {
       ref: l,
-      className: o(
-        "flex items-center gap-2.5 rounded-md border border-transparent p-2 transition-colors hover:border-ng10",
+      className: n(
+        "flex items-center gap-2.5 rounded-md border border-transparent p-2 transition-colors hover:border-wg10",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
         t
       ),
       ...d,
       children: [
-        !n && /* @__PURE__ */ r(L, { size: "sm", name: e, src: i }),
-        n && /* @__PURE__ */ r(
+        !o && /* @__PURE__ */ r(L, { size: "sm", name: e, src: i }),
+        o && /* @__PURE__ */ r(
           j,
           {
             "aria-hidden": !0,

package/components/table.d.ts

@@ -32,7 +32,7 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
     /**
      * Turns the final `sticky="right"` column into a persistent action surface.
      * Its cells stay on `bg-elevated` while one flat Table-level
-     * `shadow-elevation` compatibility hook spans the body below the NG1 header.
+     * `shadow-elevation` compatibility hook spans the body below the WG1 header.
      * The matching header cell stays transparent and scrolls normally, so it
      * never becomes a blank sticky surface over the header labels.
      */

package/components/table.js

@@ -3,7 +3,7 @@ import { jsx as d, jsxs as T } from "react/jsx-runtime";
 import * as n from "react";
 import { cn as m } from "../lib/cn.js";
 import { Checkbox as ne } from "./checkbox.js";
-import { ChevronUp as ve, ChevronDown as we, SortIcon as ye } from "../lib/icons.js";
+import { ChevronUp as ve, ChevronDown as ye, SortIcon as we } from "../lib/icons.js";
 const se = (r) => r === "center" ? "text-center" : r === "right" ? "text-right" : "text-left", ae = (r, t = !1) => r === "left" ? m(
   "sticky left-0 z-10",
   // Scroll-aware: the smudge only appears once content is actually
@@ -17,18 +17,16 @@ const se = (r) => r === "center" ? "text-center" : r === "right" ? "text-right"
   !t && "group-data-[scroll-right=true]/table-shell:shadow-table-smudge-right"
 ) : void 0, ie = n.createContext(!1), le = (r) => m(
   "bg-card align-middle transition-colors",
-  // The header is the first NG1 band, so the first body row stays white.
-  "group-even/row:bg-ng1",
   // Functional row hairline; the table shell carries the outer stroke.
   "border-b border-table-stroke group-last/row:border-b-0",
   r && m(
-    // Use NG2 without introducing a new
+    // Use WG2 without introducing a new
     // rounded silhouette. The wash is pre-composited so scrolled text
     // cannot show through sticky cells.
     "group-hover/row:bg-(--table-row-hover) group-focus-within/row:bg-(--table-row-hover)",
     "group-data-[selected]/row:bg-(--table-row-selected)"
   )
-), ce = "bg-ng1", ue = m(
+), ce = "bg-card", ue = m(
   "after:pointer-events-none after:absolute after:right-0 after:top-1/2",
   "after:h-4 after:w-px after:-translate-y-1/2 after:rounded-sm",
   "after:bg-border-strong last:after:hidden"
@@ -102,13 +100,13 @@ function Ne(r) {
       if (!n.isValidElement(e)) return e;
       for (; (t[u] ?? 0) > c; )
         u += 1;
-      const N = Math.max(1, Number(e.props.colSpan ?? 1)), x = Math.max(1, Number(e.props.rowSpan ?? 1)), w = u;
+      const N = Math.max(1, Number(e.props.colSpan ?? 1)), x = Math.max(1, Number(e.props.rowSpan ?? 1)), y = u;
       for (let g = 0; g < N; g += 1)
-        t[w + g] = Math.max(
-          t[w + g] ?? 0,
+        t[y + g] = Math.max(
+          t[y + g] ?? 0,
           c + x
         );
-      return u += N, e.type !== be ? e : n.cloneElement(e, { _sortColumnIndex: w });
+      return u += N, e.type !== be ? e : n.cloneElement(e, { _sortColumnIndex: y });
     });
     return n.cloneElement(s, void 0, f);
   });
@@ -153,7 +151,7 @@ const ze = n.forwardRef(
     elevatedActionColumn: e = !1,
     actionColumnWidth: N = "3rem",
     sortDescriptor: x,
-    onSortChange: w,
+    onSortChange: y,
     allowsSorting: g = !0,
     isStatic: A = !1,
     resizableColumns: E = !0,
@@ -176,13 +174,13 @@ const ze = n.forwardRef(
       [h, c, D, z, C, v]
     ), I = n.useCallback(() => {
       h && h(R ? /* @__PURE__ */ new Set() : new Set(C));
-    }, [h, R, C]), [H, U] = n.useState(), p = g && !w, l = p ? H ?? x : x, S = n.useCallback(
+    }, [h, R, C]), [H, U] = n.useState(), p = g && !y, l = p ? H ?? x : x, S = n.useCallback(
       (i) => {
         if (!g) return;
-        const b = (l == null ? void 0 : l.column) === i && l.direction === "ascending" ? "descending" : "ascending", y = { column: i, direction: b };
-        w ? w(y) : U(y);
+        const b = (l == null ? void 0 : l.column) === i && l.direction === "ascending" ? "descending" : "ascending", w = { column: i, direction: b };
+        y ? y(w) : U(w);
       },
-      [l, g, w]
+      [l, g, y]
     ), j = n.useMemo(
       () => p ? me(s, l) : s,
       [l, p, s]
@@ -192,9 +190,9 @@ const ze = n.forwardRef(
     }), q = n.useCallback(() => {
       const i = M.current;
       if (!i) return;
-      const b = i.scrollWidth - i.clientWidth, y = i.scrollLeft > 1, L = i.scrollLeft < b - 1;
+      const b = i.scrollWidth - i.clientWidth, w = i.scrollLeft > 1, L = i.scrollLeft < b - 1;
       he(
-        (K) => K.left === y && K.right === L ? K : { left: y, right: L }
+        (K) => K.left === w && K.right === L ? K : { left: w, right: L }
       );
     }, []);
     n.useEffect(() => {
@@ -203,8 +201,8 @@ const ze = n.forwardRef(
       if (!i || typeof ResizeObserver > "u") return;
       const b = new ResizeObserver(q);
       b.observe(i);
-      const y = i.querySelector("table");
-      return y && b.observe(y), () => b.disconnect();
+      const w = i.querySelector("table");
+      return w && b.observe(w), () => b.disconnect();
     }, [q]);
     const [P, J] = n.useState(
       null
@@ -213,15 +211,15 @@ const ze = n.forwardRef(
         J(
           (b) => b ?? Array.from(
             i.cells,
-            (y) => y.getBoundingClientRect().width
+            (w) => w.getBoundingClientRect().width
           )
         );
       },
       []
     ), te = n.useCallback((i, b) => {
-      J((y) => {
-        if (!y) return y;
-        const L = [...y];
+      J((w) => {
+        if (!w) return w;
+        const L = [...w];
         return L[i] = Math.max(Q, b), L;
       });
     }, []), re = n.useCallback(
@@ -275,7 +273,7 @@ const ze = n.forwardRef(
         "data-scroll-left": F.left ? "true" : "false",
         "data-scroll-right": F.right ? "true" : "false",
         className: m(
-          "group/table-shell overflow-clip rounded-m border border-table-stroke bg-white",
+          "group/table-shell overflow-clip rounded-m border border-table-stroke bg-table-shell",
           "[--table-card-radius:var(--radius-m)]",
           t
         ),
@@ -374,7 +372,7 @@ const pe = n.forwardRef(({ className: r, ...t }, a) => {
       ref: a,
       className: m(
         "text-s font-medium uppercase text-table-header-foreground",
-        (o == null ? void 0 : o.elevatedActionColumn) && "relative z-30 bg-ng1",
+        (o == null ? void 0 : o.elevatedActionColumn) && "relative z-30 bg-wg1",
         r
       ),
       ...t
@@ -394,13 +392,13 @@ const Z = n.forwardRef(
     role: c,
     ...u
   }, h) => {
-    const f = B(), e = n.useContext(Y), N = !!f && f.selectionMode !== "none", x = e === "body" && !(f != null && f.isStatic) && (o || N || typeof s == "function" || c === "button" || u["aria-expanded"] !== void 0), w = N && e === "body" && t !== void 0 ? f.isSelected(t) : !1;
+    const f = B(), e = n.useContext(Y), N = !!f && f.selectionMode !== "none", x = e === "body" && !(f != null && f.isStatic) && (o || N || typeof s == "function" || c === "button" || u["aria-expanded"] !== void 0), y = N && e === "body" && t !== void 0 ? f.isSelected(t) : !1;
     return /* @__PURE__ */ d(ie.Provider, { value: x, children: /* @__PURE__ */ T(
       "tr",
       {
         ref: h,
         "data-interactive": x || void 0,
-        "data-selected": w || void 0,
+        "data-selected": y || void 0,
         className: m("group/row", e === "body" && "h-12", r),
         onClick: s,
         role: c,
@@ -448,7 +446,7 @@ const Z = n.forwardRef(
                 {
                   size: "sm",
                   "aria-label": `Select ${t}`,
-                  checked: w,
+                  checked: y,
                   onChange: () => f.toggleKey(t)
                 }
               )
@@ -473,7 +471,7 @@ const be = n.forwardRef(
     ...h
   }, f) => {
     var I, H, U;
-    const e = B(), x = (e != null && e.automaticSorting && c !== void 0 ? `${G}${c}` : void 0) ?? o, w = Number(h.colSpan ?? 1) === 1, g = String(X(u)).trim(), A = g.length > 0, E = s && w && a !== "right" && A && !!x && !!(e != null && e.requestSort), k = E && ((I = e == null ? void 0 : e.sortDescriptor) == null ? void 0 : I.column) === x, _ = (H = e == null ? void 0 : e.sortDescriptor) == null ? void 0 : H.direction, O = !!(e != null && e.resizableColumns) && w && a !== "right", C = n.useRef(null), [z, v] = n.useState(!1), D = (p) => {
+    const e = B(), x = (e != null && e.automaticSorting && c !== void 0 ? `${G}${c}` : void 0) ?? o, y = Number(h.colSpan ?? 1) === 1, g = String(X(u)).trim(), A = g.length > 0, E = s && y && a !== "right" && A && !!x && !!(e != null && e.requestSort), k = E && ((I = e == null ? void 0 : e.sortDescriptor) == null ? void 0 : I.column) === x, _ = (H = e == null ? void 0 : e.sortDescriptor) == null ? void 0 : H.direction, O = !!(e != null && e.resizableColumns) && y && a !== "right", C = n.useRef(null), [z, v] = n.useState(!1), D = (p) => {
       if (p.button !== 0 || !e) return;
       const l = p.currentTarget.parentElement, S = l == null ? void 0 : l.parentElement;
       if (!(!l || !S)) {
@@ -525,7 +523,7 @@ const be = n.forwardRef(
           // decorative one; the last column never shows a handle.
           O && "after:hidden [&:last-child>[data-slot=resize-handle]]:hidden",
           // Capped-height tables scroll under the header: pin it to the
-          // viewport top, painted NG1 so rows pass beneath.
+          // viewport top, painted WG1 so rows pass beneath.
           (e == null ? void 0 : e.stickyHeader) && "sticky top-0 z-30",
           se(t),
           a && (a === "right" && (e != null && e.elevatedActionColumn) ? m(
@@ -555,7 +553,7 @@ const be = n.forwardRef(
               ),
               children: [
                 u,
-                k ? _ === "ascending" ? /* @__PURE__ */ d(ve, { className: "size-3.5" }) : /* @__PURE__ */ d(we, { className: "size-3.5" }) : /* @__PURE__ */ d(ye, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
+                k ? _ === "ascending" ? /* @__PURE__ */ d(ve, { className: "size-3.5" }) : /* @__PURE__ */ d(ye, { className: "size-3.5" }) : /* @__PURE__ */ d(we, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
               ]
             }
           ) : A ? u : /* @__PURE__ */ d("span", { className: "sr-only", children: h["aria-label"] ?? "Table column" }),
@@ -617,7 +615,9 @@ const Se = n.forwardRef(
           // overflow-x-auto viewport scrolls horizontally instead, matching the
           // header cells. Opt back into wrapping with `whitespace-normal` for
           // deliberate multi-line content (e.g. an EmptyState in a colSpan cell).
-          "h-12 whitespace-nowrap px-4 py-2",
+          // Cell values own the ADS 15px body-text contract instead of relying
+          // on inheritance from <Table>; nested content stays 15px by default.
+          "h-12 whitespace-nowrap px-4 py-2 text-m",
           le(h),
           se(t),
           a && ae(a, u == null ? void 0 : u.elevatedActionColumn),
@@ -627,8 +627,7 @@ const Se = n.forwardRef(
             "max-w-[var(--table-action-column-width)]",
             "px-2",
             "bg-elevated",
-            // Keep the action column off the zebra wash.
-            "group-even/row:bg-elevated",
+            // Keep the action column on its elevated surface during hover.
             "group-hover/row:bg-elevated group-focus-within/row:bg-elevated"
           ),
           r

package/components/tabs.js

@@ -18,13 +18,13 @@ const _ = r.forwardRef(
     value: e,
     defaultValue: t,
     onValueChange: a,
-    variant: g,
+    variant: y,
     orientation: d = "horizontal",
     size: b,
     children: R,
     ...A
   }, S) => {
-    const x = e !== void 0, [y, v] = r.useState(t), T = r.useId().replaceAll(":", ""), c = r.useId(), w = r.useRef([]), h = r.useRef(/* @__PURE__ */ new Set()), f = x ? e : y, I = r.useCallback(
+    const x = e !== void 0, [g, v] = r.useState(t), T = r.useId().replaceAll(":", ""), c = r.useId(), w = r.useRef([]), h = r.useRef(/* @__PURE__ */ new Set()), u = x ? e : g, I = r.useCallback(
       (l) => {
         x || v(l), a == null || a(l);
       },
@@ -33,7 +33,7 @@ const _ = r.forwardRef(
       w.current.includes(l) || w.current.push(l);
     }, []), s = r.useMemo(
       () => ({
-        value: f,
+        value: u,
         setValue: I,
         baseId: T,
         registerTab: i,
@@ -43,7 +43,7 @@ const _ = r.forwardRef(
         orientation: d
       }),
       [
-        f,
+        u,
         I,
         T,
         i,
@@ -99,7 +99,7 @@ const C = L("inline-flex gap-0 text-m", {
 B.displayName = "TabList";
 const H = L(
   p(
-    "relative inline-flex items-center whitespace-nowrap font-medium select-none",
+    "relative inline-flex items-center whitespace-nowrap 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 disabled:cursor-not-allowed"
@@ -111,8 +111,8 @@ const H = L(
         vertical: "h-8 justify-start px-3 pr-4 -mr-px"
       },
       selected: {
-        true: "text-action-primary-text",
-        false: "text-muted-foreground hover:text-foreground"
+        true: "font-medium text-action-primary-text",
+        false: "font-normal text-secondary hover:text-foreground"
       }
     },
     defaultVariants: {
@@ -121,17 +121,17 @@ const H = L(
     }
   }
 ), O = r.forwardRef(
-  ({ className: o, value: e, isDisabled: t, count: a, children: g, onClick: d, onKeyDown: b, ...R }, A) => {
+  ({ className: o, value: e, isDisabled: t, count: a, children: y, onClick: d, onKeyDown: b, ...R }, A) => {
     const {
       value: S,
       setValue: x,
-      baseId: y,
+      baseId: g,
       registerTab: v,
       tabs: T,
       disabled: c,
       thumbId: w,
       orientation: h
-    } = z("Tab"), f = S === e;
+    } = z("Tab"), u = S === e;
     r.useEffect(() => {
       v(e);
     }, [v, e]), r.useEffect(() => {
@@ -154,19 +154,19 @@ const H = L(
           n = (n - 1 + s.length) % s.length;
         while (c.current.has(s[n]) && n !== l);
       } else if (i.key === "Home")
-        n = s.findIndex((u) => !c.current.has(u));
+        n = s.findIndex((f) => !c.current.has(f));
       else if (i.key === "End") {
-        for (let u = s.length - 1; u >= 0; u--)
-          if (!c.current.has(s[u])) {
-            n = u;
+        for (let f = s.length - 1; f >= 0; f--)
+          if (!c.current.has(s[f])) {
+            n = f;
             break;
           }
       }
       if (n !== null && n !== -1) {
         i.preventDefault();
-        const u = s[n];
-        x(u);
-        const k = document.getElementById(N(y, "tab", u));
+        const f = s[n];
+        x(f);
+        const k = document.getElementById(N(g, "tab", f));
         k == null || k.focus();
       }
     };
@@ -176,15 +176,15 @@ const H = L(
         ref: A,
         type: "button",
         role: "tab",
-        id: N(y, "tab", e),
-        "aria-selected": f,
+        id: N(g, "tab", e),
+        "aria-selected": u,
         "aria-disabled": t || void 0,
         disabled: t,
-        "data-selected": f || void 0,
+        "data-selected": u || void 0,
         "data-disabled": t || void 0,
-        tabIndex: f && !t ? 0 : -1,
+        tabIndex: u && !t ? 0 : -1,
         className: p(
-          H({ orientation: h, selected: f }),
+          H({ orientation: h, selected: u }),
           o
         ),
         onClick: (i) => {
@@ -193,7 +193,7 @@ const H = L(
         onKeyDown: I,
         ...R,
         children: [
-          f && /* @__PURE__ */ m(
+          u && /* @__PURE__ */ m(
             M.span,
             {
               layoutId: w,
@@ -206,7 +206,7 @@ const H = L(
             }
           ),
           /* @__PURE__ */ E("span", { className: "relative inline-flex items-center gap-1", children: [
-            g,
+            y,
             a != null && /* @__PURE__ */ E("span", { className: "tabular-nums text-muted-foreground", children: [
               "· ",
               a
@@ -239,12 +239,12 @@ const q = r.forwardRef(
 );
 q.displayName = "TabSeparator";
 const F = r.forwardRef(
-  ({ className: o, value: e, children: t, ...a }, g) => {
+  ({ className: o, value: e, children: t, ...a }, y) => {
     const { value: d, baseId: b } = z("TabPanel");
     return d !== e ? null : /* @__PURE__ */ m(
       "div",
       {
-        ref: g,
+        ref: y,
         role: "tabpanel",
         id: N(b, "panel", e),
         "aria-labelledby": N(b, "tab", e),