@actioneer/ads 0.8.0 → 1.0.0

package/components/tabs.js

@@ -1,9 +1,9 @@
 "use client";
-import { jsx as m, jsxs as E } from "react/jsx-runtime";
+import { jsx as p, jsxs as E } from "react/jsx-runtime";
 import * as r from "react";
 import { MotionConfig as $, motion as M } from "motion/react";
 import { cva as L } from "class-variance-authority";
-import { cn as p } from "../lib/cn.js";
+import { cn as b } from "../lib/cn.js";
 import { springControl as U } from "../lib/motion.js";
 const N = (o, e, t) => `${o}-${e}-${encodeURIComponent(t).replaceAll("%", "_")}`, P = r.createContext(null);
 function z(o) {
@@ -19,12 +19,12 @@ const _ = r.forwardRef(
     defaultValue: t,
     onValueChange: a,
     variant: y,
-    orientation: d = "horizontal",
-    size: b,
+    orientation: c = "horizontal",
+    size: m,
     children: R,
     ...A
-  }, S) => {
-    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(
+  }, k) => {
+    const x = e !== void 0, [g, v] = r.useState(t), T = r.useId().replaceAll(":", ""), d = r.useId(), w = r.useRef([]), h = r.useRef(/* @__PURE__ */ new Set()), f = x ? e : g, I = r.useCallback(
       (l) => {
         x || v(l), a == null || a(l);
       },
@@ -33,47 +33,47 @@ const _ = r.forwardRef(
       w.current.includes(l) || w.current.push(l);
     }, []), s = r.useMemo(
       () => ({
-        value: u,
+        value: f,
         setValue: I,
         baseId: T,
         registerTab: i,
         tabs: w,
         disabled: h,
-        thumbId: c,
-        orientation: d
+        thumbId: d,
+        orientation: c
       }),
       [
-        u,
+        f,
         I,
         T,
         i,
-        c,
-        d
+        d,
+        c
       ]
     );
-    return /* @__PURE__ */ m(P.Provider, { value: s, children: /* @__PURE__ */ m(
+    return /* @__PURE__ */ p(P.Provider, { value: s, children: /* @__PURE__ */ p(
       "div",
       {
-        ref: S,
-        "data-orientation": d,
+        ref: k,
+        "data-orientation": c,
         "data-variant": "primary",
-        className: p(
+        className: b(
           "flex w-full gap-4",
-          d === "horizontal" ? "flex-col" : "flex-row",
+          c === "horizontal" ? "flex-col" : "flex-row",
           o
         ),
         ...A,
-        children: /* @__PURE__ */ m($, { reducedMotion: "user", children: R })
+        children: /* @__PURE__ */ p($, { reducedMotion: "user", children: R })
       }
     ) });
   }
 );
 _.displayName = "Tabs";
-const C = L("inline-flex gap-0 text-m", {
+const C = L("inline-flex text-l", {
   variants: {
     orientation: {
-      horizontal: "w-full self-start flex-row items-center gap-6 overflow-x-auto border-b border-border",
-      vertical: "flex-col items-stretch border-r border-border"
+      horizontal: "w-full self-start flex-row items-center gap-4 overflow-x-auto border-b border-table-stroke",
+      vertical: "flex-col items-stretch gap-0 border-r border-table-stroke"
     }
   },
   defaultVariants: {
@@ -82,7 +82,7 @@ const C = L("inline-flex gap-0 text-m", {
 }), B = r.forwardRef(
   ({ className: o, ...e }, t) => {
     const { orientation: a } = z("TabList");
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ p(
       "div",
       {
         ref: t,
@@ -90,7 +90,7 @@ const C = L("inline-flex gap-0 text-m", {
         "aria-orientation": a,
         "data-orientation": a,
         "data-variant": "primary",
-        className: p(C({ orientation: a }), o),
+        className: b(C({ orientation: a }), o),
         ...e
       }
     );
@@ -98,7 +98,7 @@ const C = L("inline-flex gap-0 text-m", {
 );
 B.displayName = "TabList";
 const H = L(
-  p(
+  b(
     "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",
@@ -121,24 +121,24 @@ const H = L(
     }
   }
 ), O = r.forwardRef(
-  ({ className: o, value: e, isDisabled: t, count: a, children: y, onClick: d, onKeyDown: b, ...R }, A) => {
+  ({ className: o, value: e, isDisabled: t, count: a, children: y, onClick: c, onKeyDown: m, ...R }, A) => {
     const {
-      value: S,
+      value: k,
       setValue: x,
       baseId: g,
       registerTab: v,
       tabs: T,
-      disabled: c,
+      disabled: d,
       thumbId: w,
       orientation: h
-    } = z("Tab"), u = S === e;
+    } = z("Tab"), f = k === e;
     r.useEffect(() => {
       v(e);
     }, [v, e]), r.useEffect(() => {
-      t ? c.current.add(e) : c.current.delete(e);
-    }, [c, t, e]);
+      t ? d.current.add(e) : d.current.delete(e);
+    }, [d, t, e]);
     const I = (i) => {
-      if (b == null || b(i), i.defaultPrevented) return;
+      if (m == null || m(i), i.defaultPrevented) return;
       const s = T.current, l = s.indexOf(e);
       if (l === -1) return;
       const V = h === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], j = h === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
@@ -147,27 +147,27 @@ const H = L(
         n = l;
         do
           n = (n + 1) % s.length;
-        while (c.current.has(s[n]) && n !== l);
+        while (d.current.has(s[n]) && n !== l);
       } else if (j.includes(i.key)) {
         n = l;
         do
           n = (n - 1 + s.length) % s.length;
-        while (c.current.has(s[n]) && n !== l);
+        while (d.current.has(s[n]) && n !== l);
       } else if (i.key === "Home")
-        n = s.findIndex((f) => !c.current.has(f));
+        n = s.findIndex((u) => !d.current.has(u));
       else if (i.key === "End") {
-        for (let f = s.length - 1; f >= 0; f--)
-          if (!c.current.has(s[f])) {
-            n = f;
+        for (let u = s.length - 1; u >= 0; u--)
+          if (!d.current.has(s[u])) {
+            n = u;
             break;
           }
       }
       if (n !== null && n !== -1) {
         i.preventDefault();
-        const f = s[n];
-        x(f);
-        const k = document.getElementById(N(g, "tab", f));
-        k == null || k.focus();
+        const u = s[n];
+        x(u);
+        const S = document.getElementById(N(g, "tab", u));
+        S == null || S.focus();
       }
     };
     return /* @__PURE__ */ E(
@@ -177,29 +177,29 @@ const H = L(
         type: "button",
         role: "tab",
         id: N(g, "tab", e),
-        "aria-selected": u,
+        "aria-selected": f,
         "aria-disabled": t || void 0,
         disabled: t,
-        "data-selected": u || void 0,
+        "data-selected": f || void 0,
         "data-disabled": t || void 0,
-        tabIndex: u && !t ? 0 : -1,
-        className: p(
-          H({ orientation: h, selected: u }),
+        tabIndex: f && !t ? 0 : -1,
+        className: b(
+          H({ orientation: h, selected: f }),
           o
         ),
         onClick: (i) => {
-          d == null || d(i), t || x(e);
+          c == null || c(i), t || x(e);
         },
         onKeyDown: I,
         ...R,
         children: [
-          u && /* @__PURE__ */ m(
+          f && /* @__PURE__ */ p(
             M.span,
             {
               layoutId: w,
               "aria-hidden": !0,
               transition: U,
-              className: p(
+              className: b(
                 "absolute bg-action-primary",
                 h === "horizontal" ? "left-0 right-0 bottom-0 h-0.5" : "top-0 bottom-0 right-0 w-0.5"
               )
@@ -207,10 +207,19 @@ const H = L(
           ),
           /* @__PURE__ */ E("span", { className: "relative inline-flex items-center gap-1", children: [
             y,
-            a != null && /* @__PURE__ */ E("span", { className: "tabular-nums text-muted-foreground", children: [
-              "· ",
-              a
-            ] })
+            a != null && /* @__PURE__ */ E(
+              "span",
+              {
+                className: b(
+                  "tabular-nums",
+                  f ? "text-action-primary-text" : "text-secondary"
+                ),
+                children: [
+                  "· ",
+                  a
+                ]
+              }
+            )
           ] })
         ]
       }
@@ -221,13 +230,13 @@ O.displayName = "Tab";
 const q = r.forwardRef(
   ({ className: o, ...e }, t) => {
     const { orientation: a } = z("TabSeparator");
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ p(
       "span",
       {
         ref: t,
         "aria-hidden": !0,
         role: "separator",
-        className: p(
+        className: b(
           "shrink-0 bg-border",
           a === "horizontal" ? "mx-1 h-4 w-px" : "my-1 h-px w-full",
           o
@@ -240,16 +249,16 @@ const q = r.forwardRef(
 q.displayName = "TabSeparator";
 const F = r.forwardRef(
   ({ className: o, value: e, children: t, ...a }, y) => {
-    const { value: d, baseId: b } = z("TabPanel");
-    return d !== e ? null : /* @__PURE__ */ m(
+    const { value: c, baseId: m } = z("TabPanel");
+    return c !== e ? null : /* @__PURE__ */ p(
       "div",
       {
         ref: y,
         role: "tabpanel",
-        id: N(b, "panel", e),
-        "aria-labelledby": N(b, "tab", e),
+        id: N(m, "panel", e),
+        "aria-labelledby": N(m, "tab", e),
         tabIndex: 0,
-        className: p(
+        className: b(
           "flex-1 outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm",
           o
         ),

package/components/typography.d.ts

@@ -4,7 +4,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
 }
 export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
 declare const textSizes: {
-    readonly xs: "text-s";
+    readonly xs: "text-xs";
     readonly sm: "text-s";
     readonly md: "text-m";
     readonly lg: "text-l";

package/components/typography.js

@@ -15,7 +15,7 @@ const u = {
 );
 p.displayName = "Heading";
 const y = {
-  xs: "text-s",
+  xs: "text-xs",
   sm: "text-s",
   md: "text-m",
   lg: "text-l"

package/components/ui/button.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-xs" | "icon-lg" | null | undefined;
+    size?: "xs" | "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-xs" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/components/ui/dialog.js

@@ -115,7 +115,7 @@ function A({
     o.Title,
     {
       "data-slot": "dialog-title",
-      className: u("text-[15px] font-semibold leading-5", t),
+      className: u("text-l font-semibold leading-5", t),
       ...i
     }
   );

package/components/viz-charts.js

@@ -97,7 +97,7 @@ function oe({
     const t = new ResizeObserver(([x]) => w(x.contentRect.width));
     return t.observe(N.current), () => t.disconnect();
   }, []);
-  const [h, f] = $.useState(null), m = Math.max(0, y - b.l - b.r), M = Math.max(0, i - b.t - b.b), r = d.filter((t) => !t.ghost), { max: n, ticks: p } = ee(Math.max(1, ...d.flatMap((t) => t.values))), k = (t) => b.t + M - t / n * M, R = c.length, v = (t) => e === "bar" ? b.l + (t + 0.5) / R * m : b.l + (R <= 1 ? m / 2 : t / (R - 1) * m), _ = [...p].reverse(), D = r.map((t, x) => ({ label: t.name, color: t.color ?? L(x), dashed: t.dashed }));
+  const [h, f] = $.useState(null), m = Math.max(0, y - b.l - b.r), M = Math.max(0, i - b.t - b.b), r = d.filter((t) => !t.ghost), { max: n, ticks: v } = ee(Math.max(1, ...d.flatMap((t) => t.values))), k = (t) => b.t + M - t / n * M, R = c.length, p = (t) => e === "bar" ? b.l + (t + 0.5) / R * m : b.l + (R <= 1 ? m / 2 : t / (R - 1) * m), _ = [...v].reverse(), D = r.map((t, x) => ({ label: t.name, color: t.color ?? L(x), dashed: t.dashed }));
   return /* @__PURE__ */ s("div", { ref: N, className: O("relative w-full font-sans", l), children: [
     D.length > 1 && /* @__PURE__ */ a(te, { items: D }),
     /* @__PURE__ */ s(
@@ -126,10 +126,10 @@ function oe({
                 opacity: t === 0 ? 0.9 : 0.6
               }
             ),
-            /* @__PURE__ */ a("text", { x: b.l - 10, y: k(t), dy: "0.32em", textAnchor: "end", className: "fill-tertiary text-[11px] tabular-nums", children: u(t) })
+            /* @__PURE__ */ a("text", { x: b.l - 10, y: k(t), dy: "0.32em", textAnchor: "end", className: "fill-tertiary text-xs tabular-nums", children: u(t) })
           ] }, x)),
           q(c).map(
-            (t, x) => t == null ? null : /* @__PURE__ */ a("text", { x: v(x), y: i - 12, textAnchor: "middle", className: "fill-tertiary text-[11px] tabular-nums", children: t }, x)
+            (t, x) => t == null ? null : /* @__PURE__ */ a("text", { x: p(x), y: i - 12, textAnchor: "middle", className: "fill-tertiary text-xs tabular-nums", children: t }, x)
           ),
           e === "bar" && r.map((t, x) => {
             const T = m / R, S = Math.min(T * 0.7, 64), A = (S - (r.length - 1)) / r.length;
@@ -153,7 +153,7 @@ function oe({
           e === "area" && r[0] && /* @__PURE__ */ a(
             "path",
             {
-              d: `${P(r[0].values.map((t, x) => [v(x), k(t)]))} L${v(R - 1)},${k(0)} L${v(0)},${k(0)} Z`,
+              d: `${P(r[0].values.map((t, x) => [p(x), k(t)]))} L${p(R - 1)},${k(0)} L${p(0)},${k(0)} Z`,
               fill: r[0].color ?? L(0),
               opacity: 0.12
             }
@@ -163,7 +163,7 @@ function oe({
             return /* @__PURE__ */ a(
               "path",
               {
-                d: P(t.values.map((j, z) => [v(z), k(j)])),
+                d: P(t.values.map((j, z) => [p(z), k(j)])),
                 fill: "none",
                 stroke: T,
                 strokeWidth: A,
@@ -181,7 +181,7 @@ function oe({
               "circle",
               {
                 "aria-hidden": !0,
-                cx: v(A),
+                cx: p(A),
                 cy: k(S),
                 r: h === A ? 5.5 : 4,
                 fill: "var(--card)",
@@ -192,16 +192,16 @@ function oe({
               `${x}-${A}`
             ));
           }),
-          h != null && e !== "bar" && /* @__PURE__ */ a("line", { x1: v(h), x2: v(h), y1: b.t, y2: b.t + M, stroke: Y, strokeWidth: 1, opacity: 0.18 })
+          h != null && e !== "bar" && /* @__PURE__ */ a("line", { x1: p(h), x2: p(h), y1: b.t, y2: b.t + M, stroke: Y, strokeWidth: 1, opacity: 0.18 })
         ]
       }
     ),
     h != null && /* @__PURE__ */ a(
       K,
       {
-        x: v(h),
+        x: p(h),
         y: b.t + M / 2,
-        flip: v(h) > b.l + m * 0.66,
+        flip: p(h) > b.l + m * 0.66,
         title: c[h],
         rows: d.map((t) => ({
           swatch: t.color ?? L(d.indexOf(t)),
@@ -219,7 +219,7 @@ function ce({ steps: e, height: c = 320, className: d }) {
   const [i, u] = $.useState(720), o = $.useRef(null);
   $.useEffect(() => {
     if (!o.current) return;
-    const n = new ResizeObserver(([p]) => u(p.contentRect.width));
+    const n = new ResizeObserver(([v]) => u(v.contentRect.width));
     return n.observe(o.current), () => n.disconnect();
   }, []);
   const [l, y] = $.useState(null), w = Math.max(0, i - g.l - g.r), N = Math.max(0, c - g.t - g.b), h = ((r = e[0]) == null ? void 0 : r.value) || 1, f = (n) => g.t + N - n * N, m = w / Math.max(1, e.length), M = Math.min(m * 0.56, 120);
@@ -231,29 +231,29 @@ function ce({ steps: e, height: c = 320, className: d }) {
       ] }) }),
       [1, 0.75, 0.5, 0.25, 0].map((n) => /* @__PURE__ */ s("g", { children: [
         /* @__PURE__ */ a("line", { x1: g.l, x2: g.l + w, y1: f(n), y2: f(n), stroke: V, strokeWidth: 1, strokeDasharray: n === 0 ? void 0 : "3 4", opacity: n === 0 ? 0.9 : 0.6 }),
-        /* @__PURE__ */ a("text", { x: g.l, y: f(n) - 4, className: "fill-tertiary text-[10px] tabular-nums", children: n * 100 })
+        /* @__PURE__ */ a("text", { x: g.l, y: f(n) - 4, className: "fill-tertiary text-xs tabular-nums", children: n * 100 })
       ] }, n)),
-      e.map((n, p) => {
-        const k = n.value / h, R = p === 0 ? 1 : e[p - 1].value / h, v = g.l + p * m + m / 2, _ = v - M / 2, D = f(k), t = l != null && l !== p;
-        return /* @__PURE__ */ s("g", { opacity: t ? 0.55 : 1, onMouseEnter: () => y(p), onMouseLeave: () => y(null), children: [
-          p > 0 && /* @__PURE__ */ a("rect", { x: _, y: f(R), width: M, height: Math.max(0, D - f(R)), rx: 4, fill: `url(#${G})` }),
+      e.map((n, v) => {
+        const k = n.value / h, R = v === 0 ? 1 : e[v - 1].value / h, p = g.l + v * m + m / 2, _ = p - M / 2, D = f(k), t = l != null && l !== v;
+        return /* @__PURE__ */ s("g", { opacity: t ? 0.55 : 1, onMouseEnter: () => y(v), onMouseLeave: () => y(null), children: [
+          v > 0 && /* @__PURE__ */ a("rect", { x: _, y: f(R), width: M, height: Math.max(0, D - f(R)), rx: 4, fill: `url(#${G})` }),
           /* @__PURE__ */ a("rect", { x: _, y: D, width: M, height: Math.max(0, g.t + N - D), rx: 4, fill: C }),
-          /* @__PURE__ */ a("text", { x: v, y: D + 16, textAnchor: "middle", className: "fill-[var(--card)] text-[12px] font-medium tabular-nums", children: F(n.value) }),
-          /* @__PURE__ */ a("text", { x: v, y: g.t + N + 24, textAnchor: "middle", className: "fill-secondary text-[12.5px] font-medium", children: n.label }),
-          /* @__PURE__ */ s("text", { x: v, y: g.t + N + 45, textAnchor: "middle", className: "fill-foreground text-[12px] font-medium tabular-nums", children: [
+          /* @__PURE__ */ a("text", { x: p, y: D + 16, textAnchor: "middle", className: "fill-[var(--card)] text-s font-medium tabular-nums", children: F(n.value) }),
+          /* @__PURE__ */ a("text", { x: p, y: g.t + N + 24, textAnchor: "middle", className: "fill-secondary text-s font-medium", children: n.label }),
+          /* @__PURE__ */ s("text", { x: p, y: g.t + N + 45, textAnchor: "middle", className: "fill-foreground text-s font-medium tabular-nums", children: [
             H(n.value),
             " ",
-            /* @__PURE__ */ a("tspan", { className: "fill-tertiary", children: p === 0 ? "entered" : `→ ${E(k * 100)}` })
+            /* @__PURE__ */ a("tspan", { className: "fill-tertiary", children: v === 0 ? "entered" : `→ ${E(k * 100)}` })
           ] }),
-          p > 0 && /* @__PURE__ */ s("text", { x: v, y: g.t + N + 66, textAnchor: "middle", className: "fill-tertiary text-[12px] font-medium tabular-nums", children: [
+          v > 0 && /* @__PURE__ */ s("text", { x: p, y: g.t + N + 66, textAnchor: "middle", className: "fill-tertiary text-s font-medium tabular-nums", children: [
             "↘ ",
-            E((1 - n.value / e[p - 1].value) * 100)
+            E((1 - n.value / e[v - 1].value) * 100)
           ] }),
-          p > 0 && n.medianTime != null && /* @__PURE__ */ s("text", { x: v, y: g.t + N + 86, textAnchor: "middle", className: "fill-tertiary text-[11px] tabular-nums", children: [
+          v > 0 && n.medianTime != null && /* @__PURE__ */ s("text", { x: p, y: g.t + N + 86, textAnchor: "middle", className: "fill-tertiary text-xs tabular-nums", children: [
             "◷ ",
             B(n.medianTime)
           ] })
-        ] }, p);
+        ] }, v);
       })
     ] }),
     l != null && e[l] && /* @__PURE__ */ a(
@@ -283,7 +283,7 @@ function se({ steps: e, className: c }) {
     const l = u.value / d, y = o === 0 ? 1 : e[o - 1].value / d;
     return /* @__PURE__ */ s("div", { className: "w-full", children: [
       /* @__PURE__ */ s("div", { className: "mb-1.5 flex items-baseline justify-between gap-3", children: [
-        /* @__PURE__ */ s("span", { className: "truncate text-[12.5px] font-medium text-secondary", children: [
+        /* @__PURE__ */ s("span", { className: "truncate text-s font-medium text-secondary", children: [
           /* @__PURE__ */ s("span", { className: "text-tertiary tabular-nums", children: [
             o + 1,
             "."
@@ -292,11 +292,11 @@ function se({ steps: e, className: c }) {
           u.label
         ] }),
         /* @__PURE__ */ s("div", { className: "flex shrink-0 items-baseline gap-3", children: [
-          o > 0 && u.avgTime != null && /* @__PURE__ */ s("span", { className: "text-[11px] text-tertiary tabular-nums", children: [
+          o > 0 && u.avgTime != null && /* @__PURE__ */ s("span", { className: "text-xs text-tertiary tabular-nums", children: [
             "Avg time ",
             B(u.avgTime)
           ] }),
-          /* @__PURE__ */ a("span", { className: "text-[12.5px] font-medium text-foreground tabular-nums", children: E(l * 100) })
+          /* @__PURE__ */ a("span", { className: "text-s font-medium text-foreground tabular-nums", children: E(l * 100) })
         ] })
       ] }),
       /* @__PURE__ */ s("div", { className: "relative h-[46px] w-full overflow-hidden rounded-lg bg-muted-foreground/[0.06]", children: [
@@ -310,7 +310,7 @@ function se({ steps: e, className: c }) {
             }
           }
         ),
-        /* @__PURE__ */ a("div", { className: "absolute inset-y-0 left-0 flex items-center rounded-lg", style: { width: `${l * 100}%`, background: C }, children: /* @__PURE__ */ a("span", { className: "ml-3 text-[12px] font-medium text-ink-950 tabular-nums", children: F(u.value) }) })
+        /* @__PURE__ */ a("div", { className: "absolute inset-y-0 left-0 flex items-center rounded-lg", style: { width: `${l * 100}%`, background: C }, children: /* @__PURE__ */ a("span", { className: "ml-3 text-s font-medium text-ink-950 tabular-nums", children: F(u.value) }) })
       ] })
     ] }, o);
   }) });
@@ -333,24 +333,24 @@ function ie({ points: e, height: c = 300, className: d }) {
         className: "block select-none",
         onMouseLeave: () => y(null),
         onMouseMove: (r) => {
-          const n = r.currentTarget.getBoundingClientRect(), p = Math.round((r.clientX - n.left - W.l) / w * (h - 1));
-          y(Math.max(0, Math.min(h - 1, p)));
+          const n = r.currentTarget.getBoundingClientRect(), v = Math.round((r.clientX - n.left - W.l) / w * (h - 1));
+          y(Math.max(0, Math.min(h - 1, v)));
         },
         children: [
           [100, 75, 50, 25, 0].map((r) => /* @__PURE__ */ s("g", { children: [
             /* @__PURE__ */ a("line", { x1: W.l, x2: W.l + w, y1: m(r), y2: m(r), stroke: V, strokeWidth: 1, strokeDasharray: r === 0 ? void 0 : "3 4", opacity: r === 0 ? 0.9 : 0.6 }),
-            /* @__PURE__ */ s("text", { x: W.l - 10, y: m(r), dy: "0.32em", textAnchor: "end", className: "fill-tertiary text-[11px] tabular-nums", children: [
+            /* @__PURE__ */ s("text", { x: W.l - 10, y: m(r), dy: "0.32em", textAnchor: "end", className: "fill-tertiary text-xs tabular-nums", children: [
               r,
               "%"
             ] })
           ] }, r)),
           q(e).map(
-            (r, n) => r == null ? null : /* @__PURE__ */ a("text", { x: f(n), y: c - 12, textAnchor: "middle", className: "fill-tertiary text-[11px] tabular-nums", children: r.label }, n)
+            (r, n) => r == null ? null : /* @__PURE__ */ a("text", { x: f(n), y: c - 12, textAnchor: "middle", className: "fill-tertiary text-xs tabular-nums", children: r.label }, n)
           ),
           /* @__PURE__ */ a("path", { d: `${P(M)} L${f(h - 1)},${m(0)} L${f(0)},${m(0)} Z`, fill: C, opacity: 0.12 }),
           /* @__PURE__ */ a("path", { d: P(M), fill: "none", stroke: C, strokeWidth: X, strokeLinecap: "round", strokeLinejoin: "round" }),
           e.map((r, n) => /* @__PURE__ */ s("g", { children: [
-            /* @__PURE__ */ s("text", { x: f(n), y: m(r.v) - 12, textAnchor: "middle", className: "fill-foreground text-[11.5px] font-medium tabular-nums", children: [
+            /* @__PURE__ */ s("text", { x: f(n), y: m(r.v) - 12, textAnchor: "middle", className: "fill-foreground text-s font-medium tabular-nums", children: [
               r.v,
               "%"
             ] }),
@@ -383,13 +383,13 @@ function de({ cols: e, cohorts: c, className: d }) {
       e.map((i) => /* @__PURE__ */ a("th", { className: "px-1.5 py-2 text-center tabular-nums", children: i }, i))
     ] }) }),
     /* @__PURE__ */ a("tbody", { children: c.map((i) => /* @__PURE__ */ s("tr", { children: [
-      /* @__PURE__ */ a("td", { className: "sticky left-0 w-[1%] bg-card py-1.5 pr-4 text-[12.5px] text-secondary whitespace-nowrap", children: i.label }),
-      /* @__PURE__ */ a("td", { className: "w-[1%] py-1.5 pr-4 text-right text-[12.5px] text-secondary tabular-nums whitespace-nowrap", children: H(i.size) }),
-      i.values.map((u, o) => /* @__PURE__ */ a("td", { className: "px-1 py-1", children: u == null ? /* @__PURE__ */ a("div", { className: "py-[9px] text-center text-[12.5px] text-tertiary tabular-nums", children: "—" }) : /* @__PURE__ */ s(
+      /* @__PURE__ */ a("td", { className: "sticky left-0 w-[1%] bg-card py-1.5 pr-4 text-s text-secondary whitespace-nowrap", children: i.label }),
+      /* @__PURE__ */ a("td", { className: "w-[1%] py-1.5 pr-4 text-right text-s text-secondary tabular-nums whitespace-nowrap", children: H(i.size) }),
+      i.values.map((u, o) => /* @__PURE__ */ a("td", { className: "px-1 py-1", children: u == null ? /* @__PURE__ */ a("div", { className: "py-[9px] text-center text-s text-tertiary tabular-nums", children: "—" }) : /* @__PURE__ */ s(
         "div",
         {
           className: O(
-            "rounded-md py-[9px] text-center text-[12.5px] tabular-nums",
+            "rounded-md py-[9px] text-center text-s tabular-nums",
             "text-ink-950"
           ),
           style: { background: ae(u) },

package/demo/components/add-to-artifact.js

@@ -22,6 +22,7 @@ import "react-dom";
 import "motion/react";
 import "../../components/ripple.js";
 import { Input as I } from "../../components/input.js";
+import "../../components/search-disclosure.js";
 import "../../components/input-field.js";
 import "../../components/textarea.js";
 import "../../components/checkbox.js";
@@ -105,7 +106,7 @@ import "../../components/assistant-ui/quote.js";
 import "../../components/assistant-ui/sources.js";
 import "../../components/assistant-ui/tool-fallback.js";
 import "../../components/assistant-ui/tool-group.js";
-function ti({
+function ei({
   block: i,
   trigger: v = "button",
   className: A,
@@ -357,5 +358,5 @@ function ti({
   ] });
 }
 export {
-  ti as AddToArtifact
+  ei as AddToArtifact
 };

package/lib/cn.js

@@ -1,16 +1,16 @@
 "use client";
-import { clsx as t } from "clsx";
-import { extendTailwindMerge as s } from "tailwind-merge";
-const n = s({
+import { clsx as s } from "clsx";
+import { extendTailwindMerge as t } from "tailwind-merge";
+const n = t({
   extend: {
     classGroups: {
-      "font-size": [{ text: ["s", "m", "l", "xl", "2xl"] }]
+      "font-size": [{ text: ["xs", "s", "m", "l", "xl", "2xl", "3xl"] }]
     }
   }
 });
-function l(...e) {
-  return n(t(e));
+function o(...e) {
+  return n(s(e));
 }
 export {
-  l as cn
+  o as cn
 };

package/lib/icons.d.ts

@@ -81,6 +81,10 @@ export declare const Call: React.ForwardRefExoticComponent<Omit<import('@phospho
     /** Legacy Hugeicons prop — `>= 2` maps to weight="bold", else ignored. */
     strokeWidth?: number;
 } & React.RefAttributes<SVGSVGElement>>;
+export declare const PhoneIncoming: React.ForwardRefExoticComponent<Omit<import('@phosphor-icons/react').IconProps, "ref"> & {
+    /** Legacy Hugeicons prop — `>= 2` maps to weight="bold", else ignored. */
+    strokeWidth?: number;
+} & React.RefAttributes<SVGSVGElement>>;
 export declare const Close: React.ForwardRefExoticComponent<Omit<import('@phosphor-icons/react').IconProps, "ref"> & {
     /** Legacy Hugeicons prop — `>= 2` maps to weight="bold", else ignored. */
     strokeWidth?: number;