@actioneer/ads 1.0.7 → 1.0.9

package/components/chip.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const chipVariants: (props?: ({
-    variant?: "outline" | "solid" | null | undefined;
+    variant?: "outline" | "solid" | "plain" | null | undefined;
     color?: "success" | "warning" | "danger" | "info" | "default" | "primary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ChipInteraction = "actionable" | "non-actionable";
@@ -19,6 +19,7 @@ export interface ChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
     onClose?: () => void;
     startContent?: React.ReactNode;
     avatar?: React.ReactNode;
+    /** Leading square tone dot. Always on for `variant="plain"`. */
     showDot?: boolean;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;

package/components/chip.js

@@ -1,16 +1,19 @@
 "use client";
-import { jsxs as x, Fragment as h, jsx as a } from "react/jsx-runtime";
-import * as y from "react";
-import { cva as N } from "class-variance-authority";
-import { Close as w } from "../lib/icons.js";
+import { jsxs as v, Fragment as h, jsx as e } from "react/jsx-runtime";
+import * as N from "react";
+import { cva as w } from "class-variance-authority";
+import { Close as y } from "../lib/icons.js";
 import { cn as i } from "../lib/cn.js";
-const k = N(
+const k = w(
   "inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-[4px] border px-2 py-0 text-s font-medium leading-[var(--text-s--line-height)]",
   {
     variants: {
       variant: {
         solid: "",
-        outline: ""
+        outline: "",
+        // Status text for table cells and detail panels: no container, an 8px
+        // tone dot, and a 14px Regular primary label. The dot carries the tone.
+        plain: "h-auto gap-2 rounded-none border-0 bg-transparent px-0 text-m font-normal leading-[var(--text-m--line-height)] text-on-white-primary"
       },
       color: {
         default: "",
@@ -23,15 +26,15 @@ const k = N(
     },
     compoundVariants: [
       // solid — the default tinted surface
-      { variant: "solid", color: "default", className: "border-wg6 bg-wg2 text-muted-foreground" },
-      { variant: "solid", color: "primary", className: "border-brand bg-action-primary-soft text-brand-text" },
-      { variant: "solid", color: "success", className: "border-success-400 bg-success-50 text-success-700" },
+      { variant: "solid", color: "default", className: "border-wg4 bg-wg2 text-muted-foreground" },
+      { variant: "solid", color: "primary", className: "border-t6 bg-action-primary-soft text-brand-text" },
+      { variant: "solid", color: "success", className: "border-success-300 bg-success-50 text-success-700" },
       { variant: "solid", color: "warning", className: "border-warning-300 bg-warning-50 text-warning-700" },
       { variant: "solid", color: "danger", className: "border-danger-300 bg-danger-50 text-danger-700" },
       { variant: "solid", color: "info", className: "border-info-300 bg-info-50 text-info-700" },
       // outline
-      { variant: "outline", color: "default", className: "border-border-strong bg-card text-foreground" },
-      { variant: "outline", color: "primary", className: "border-brand bg-card text-brand-text" },
+      { variant: "outline", color: "default", className: "border-border bg-card text-foreground" },
+      { variant: "outline", color: "primary", className: "border-t7 bg-card text-brand-text" },
       { variant: "outline", color: "success", className: "border-success-400 bg-success-50 text-success-700" },
       { variant: "outline", color: "warning", className: "border-warning-400 bg-warning-50 text-warning-700" },
       { variant: "outline", color: "danger", className: "border-danger-400 bg-danger-50 text-danger-700" },
@@ -46,74 +49,76 @@ const k = N(
   warning: "bg-warning",
   danger: "bg-danger",
   info: "bg-info"
-}, j = y.forwardRef(
+}, j = N.forwardRef(
   ({
-    className: g,
-    variant: u = "solid",
-    color: t = "default",
+    className: u,
+    variant: a = "solid",
+    color: o = "default",
     interaction: m,
     isPressable: f = !1,
-    onClose: e,
-    startContent: o,
-    avatar: r,
+    onClose: r,
+    startContent: s,
+    avatar: n,
     showDot: p = !1,
-    children: v,
-    ...s
-  }, c) => {
-    const n = e ? "actionable" : m ?? (f ? "actionable" : "non-actionable"), l = n === "actionable" && !e, d = i(
-      k({ variant: u, color: t }),
-      r && "pl-1",
-      e && "pr-1.5",
-      l && "cursor-pointer select-none shadow-100 outline-none transition-[background,border,color,box-shadow,transform] duration-150 ease-out data-[interaction=actionable]:border-action-primary data-[interaction=actionable]:bg-card data-[interaction=actionable]:text-action-primary-text hover:-translate-y-px hover:bg-action-primary-soft hover:shadow-200 active:translate-y-0 active:scale-[0.97] active:bg-action-primary-soft aria-pressed:border-brand! aria-pressed:bg-action-primary-soft! aria-pressed:text-brand-text! focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:active:scale-100",
-      g
-    ), b = /* @__PURE__ */ x(h, { children: [
-      r && /* @__PURE__ */ a("span", { className: "-ml-0.5 inline-flex shrink-0", children: r }),
-      p && /* @__PURE__ */ a(
+    children: x,
+    ...c
+  }, l) => {
+    const t = r ? "actionable" : m ?? (f ? "actionable" : "non-actionable"), d = t === "actionable" && !r, g = i(
+      k({ variant: a, color: o }),
+      n && "pl-1",
+      r && "pr-1",
+      d && "cursor-pointer select-none outline-none transition-[background,border,color,box-shadow,transform] duration-150 ease-out data-[interaction=actionable]:border-action-primary data-[interaction=actionable]:bg-card data-[interaction=actionable]:text-action-primary-text hover:-translate-y-px hover:bg-action-primary-soft active:translate-y-0 active:scale-[0.97] active:bg-action-primary-soft aria-pressed:border-brand! aria-pressed:bg-action-primary-soft! aria-pressed:text-brand-text! focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:active:scale-100",
+      u
+    ), b = /* @__PURE__ */ v(h, { children: [
+      n && /* @__PURE__ */ e("span", { className: "-ml-0.5 inline-flex shrink-0", children: n }),
+      (p || a === "plain") && /* @__PURE__ */ e(
         "span",
         {
           "aria-hidden": !0,
           className: i(
-            "size-1.5",
+            a === "plain" ? "size-2 shrink-0" : "size-1.5",
             "rounded-dot",
-            z[t ?? "default"]
+            z[o ?? "default"]
           )
         }
       ),
-      o && /* @__PURE__ */ a("span", { className: "inline-flex shrink-0 [&_svg]:size-3.5", children: o }),
-      v,
-      e && /* @__PURE__ */ a(
+      s && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0 [&_svg]:size-3.5", children: s }),
+      x,
+      r && /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           "aria-label": "Remove",
-          onClick: e,
+          onClick: r,
           className: i(
-            "inline-flex size-4 shrink-0 items-center justify-center rounded-full",
-            "opacity-60 transition-opacity hover:opacity-100",
-            "outline-none focus-visible:ring-3 focus-visible:ring-ring",
-            "[&_svg]:size-3"
+            // A 16px container tinted from the chip's own ink so the remove
+            // control reads as a button: 10% at rest, 20% on hover/press.
+            "inline-flex size-4 shrink-0 items-center justify-center rounded-xs",
+            "bg-current/10 transition-[background-color,transform] duration-150 ease-out hover:bg-current/20 active:scale-[0.97] active:bg-current/20",
+            "outline-none focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none",
+            "[&_svg]:size-2.5"
           ),
-          children: /* @__PURE__ */ a(w, { "aria-hidden": !0 })
+          children: /* @__PURE__ */ e(y, { "aria-hidden": !0, weight: "bold" })
         }
       )
     ] });
-    return l ? /* @__PURE__ */ a(
+    return d ? /* @__PURE__ */ e(
       "button",
       {
-        ref: c,
+        ref: l,
         type: "button",
-        "data-interaction": n,
-        className: d,
-        ...s,
+        "data-interaction": t,
+        className: g,
+        ...c,
         children: b
       }
-    ) : /* @__PURE__ */ a(
+    ) : /* @__PURE__ */ e(
       "span",
       {
-        ref: c,
-        "data-interaction": n,
-        className: d,
-        ...s,
+        ref: l,
+        "data-interaction": t,
+        className: g,
+        ...c,
         children: b
       }
     );

package/components/command-palette.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { jsxs as d, 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";
@@ -25,7 +25,7 @@ function L({
     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) }));
-  }, [l]), d = l[c];
+  }, [l]), u = l[c];
   o.useEffect(() => {
     x(0);
   }, [m, s]), o.useEffect(() => {
@@ -43,15 +43,15 @@ function L({
     };
   }, [s]), o.useEffect(() => {
     var e, r;
-    !s || !d || (r = (e = g.current) == null ? void 0 : e.querySelector(`[data-index="${c}"]`)) == null || r.scrollIntoView({ block: "nearest" });
-  }, [s, d, c]);
+    !s || !u || (r = (e = g.current) == null ? void 0 : e.querySelector(`[data-index="${c}"]`)) == null || r.scrollIntoView({ block: "nearest" });
+  }, [s, u, 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, l.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), x((r) => Math.max(r - 1, 0))) : e.key === "Enter" && d && (e.preventDefault(), k(d));
+    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" && u && (e.preventDefault(), k(u));
   };
   return s ? S(
-    /* @__PURE__ */ u("div", { className: "fixed inset-0 z-50 flex items-start justify-center px-4 pt-[15vh]", children: [
+    /* @__PURE__ */ d("div", { className: "fixed inset-0 z-50 flex items-start justify-center px-4 pt-[15vh]", children: [
       /* @__PURE__ */ a(
         "div",
         {
@@ -60,7 +60,7 @@ function L({
           onClick: () => i(!1)
         }
       ),
-      /* @__PURE__ */ u(
+      /* @__PURE__ */ d(
         "div",
         {
           role: "dialog",
@@ -68,13 +68,13 @@ function L({
           "aria-label": D,
           className: v(
             "relative flex w-full max-w-lg flex-col overflow-hidden",
-            "rounded-xl bg-elevated text-foreground shadow-elevation",
+            "rounded-xl bg-elevated text-foreground",
             E
           ),
           onKeyDown: I,
           children: [
             /* @__PURE__ */ a(C, { origin: "top" }),
-            /* @__PURE__ */ u("div", { className: "flex items-center gap-2.5 px-4 py-3", children: [
+            /* @__PURE__ */ d("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",
@@ -83,7 +83,7 @@ function L({
                   role: "combobox",
                   "aria-expanded": "true",
                   "aria-controls": f,
-                  "aria-activedescendant": d ? `${f}-${c}` : void 0,
+                  "aria-activedescendant": u ? `${f}-${c}` : void 0,
                   "aria-autocomplete": "list",
                   value: m,
                   onChange: (e) => N(e.target.value),
@@ -100,11 +100,11 @@ function L({
                 role: "listbox",
                 "aria-label": "Results",
                 className: "max-h-80 overflow-y-auto p-1.5 pt-0",
-                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: [
+                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__ */ d("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 n = l.indexOf(t), h = n === c;
-                    return /* @__PURE__ */ u(
+                    return /* @__PURE__ */ d(
                       "div",
                       {
                         id: `${f}-${n}`,

package/components/connector-card.d.ts

@@ -4,8 +4,7 @@ import * as React from "react";
  * screen. Structure: identity row (logo + name + schema + connection status),
  * a tinted health strip, and a recessed footer with a usage metric + action.
  *
- * The clickable state retains the flat `shadow-elevation` compatibility hook;
- * add a numbered elevation utility only after an explicit user request. The
+ * The clickable state stays flat. The
  * health strip uses a soft status tint and the footer
  * steps down to `bg-muted`.
  */

package/components/connector-card.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as r, Fragment as f, jsx as t } from "react/jsx-runtime";
+import { jsxs as i, Fragment as f, jsx as t } from "react/jsx-runtime";
 import * as g from "react";
 import { Chip as x } from "./chip.js";
 import { Database as b, ChevronRight as p } from "../lib/icons.js";
@@ -17,11 +17,11 @@ function y(s) {
   let a;
   if (n < 7) a = `${n} days ago`;
   else if (n < 30) {
-    const i = Math.round(n / 7);
-    a = `${i} week${i > 1 ? "s" : ""} ago`;
+    const r = Math.round(n / 7);
+    a = `${r} week${r > 1 ? "s" : ""} ago`;
   } else {
-    const i = Math.round(n / 30);
-    a = `${i} month${i > 1 ? "s" : ""} ago`;
+    const r = Math.round(n / 30);
+    a = `${r} month${r > 1 ? "s" : ""} ago`;
   }
   return `Last sync from ${a}`;
 }
@@ -31,7 +31,7 @@ function N({
   label: n
 }) {
   const a = n ?? (s ? e ? y(e) : "Connected" : "Disconnected");
-  return s ? /* @__PURE__ */ r("span", { className: "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-xs text-tertiary", children: [
+  return s ? /* @__PURE__ */ i("span", { className: "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-xs text-tertiary", children: [
     /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "size-2 rounded-dot bg-success" }),
     a
   ] }) : /* @__PURE__ */ t(
@@ -67,11 +67,11 @@ function v({ strip: s }) {
   );
 }
 const w = g.forwardRef(
-  ({ className: s, card: e, onOpen: n, ...a }, i) => {
+  ({ className: s, card: e, onOpen: n, ...a }, r) => {
     var m;
-    const c = !!n, h = ((m = e.action) == null ? void 0 : m.tone) === "reconnect", l = /* @__PURE__ */ r(f, { children: [
-      /* @__PURE__ */ r("div", { className: "rounded-t-xl p-[var(--card-padding)]", children: [
-        /* @__PURE__ */ r("div", { className: "mb-5 flex items-center gap-3.5", children: [
+    const c = !!n, h = ((m = e.action) == null ? void 0 : m.tone) === "reconnect", l = /* @__PURE__ */ i(f, { children: [
+      /* @__PURE__ */ i("div", { className: "rounded-t-xl p-[var(--card-padding)]", children: [
+        /* @__PURE__ */ i("div", { className: "mb-5 flex items-center gap-3.5", children: [
           e.logo ? /* @__PURE__ */ t(
             "img",
             {
@@ -80,8 +80,8 @@ const w = g.forwardRef(
               className: "size-10 shrink-0 rounded-md object-contain"
             }
           ) : /* @__PURE__ */ t("span", { className: "grid size-10 shrink-0 place-items-center rounded-md bg-muted text-secondary", children: /* @__PURE__ */ t(b, { className: "size-5", "aria-hidden": !0 }) }),
-          /* @__PURE__ */ r("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ r("div", { className: "flex items-baseline justify-between gap-3", children: [
+          /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ i("div", { className: "flex items-baseline justify-between gap-3", children: [
               /* @__PURE__ */ t("div", { className: "min-w-0 truncate text-base font-medium leading-tight text-foreground", children: e.name }),
               /* @__PURE__ */ t(
                 N,
@@ -96,7 +96,7 @@ const w = g.forwardRef(
         ] }),
         /* @__PURE__ */ t(v, { strip: e.strip })
       ] }),
-      /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-3 rounded-b-xl bg-ink-100 px-[var(--card-padding)] py-3", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-3 rounded-b-xl bg-ink-100 px-[var(--card-padding)] py-3", children: [
         /* @__PURE__ */ t(
           "span",
           {
@@ -105,7 +105,7 @@ const w = g.forwardRef(
             children: e.footer.text
           }
         ),
-        e.action && /* @__PURE__ */ r(
+        e.action && /* @__PURE__ */ i(
           "span",
           {
             className: o(
@@ -126,13 +126,13 @@ const w = g.forwardRef(
       // aliasing under transform is a real browser gotcha; forcing a
       // compositor layer fixes it deterministically).
       "rounded-xl bg-card text-card-foreground transform-gpu [will-change:transform] [backface-visibility:hidden]",
-      c && "shadow-elevation transition-[transform,box-shadow] duration-150 ease-out motion-reduce:transition-none",
+      c && "transition-[transform,box-shadow] duration-150 ease-out motion-reduce:transition-none",
       s
     );
     return c ? /* @__PURE__ */ t(
       "button",
       {
-        ref: i,
+        ref: r,
         type: "button",
         onClick: () => n == null ? void 0 : n(e),
         className: o(
@@ -143,7 +143,7 @@ const w = g.forwardRef(
         ...a,
         children: l
       }
-    ) : /* @__PURE__ */ t("div", { ref: i, className: d, ...a, children: l });
+    ) : /* @__PURE__ */ t("div", { ref: r, className: d, ...a, children: l });
   }
 );
 w.displayName = "ConnectorCard";

package/components/date-range-picker.js

@@ -105,7 +105,6 @@ function se({
               }),
               "[--glow-border-rest:var(--input)]",
               "[--glow-border-active:var(--field-focus)]",
-              "[--glow-inset:var(--inner-glow-field)]",
               "data-[value-set]:text-on-white-primary!",
               "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
             ),
@@ -163,7 +162,7 @@ function se({
           {
             placement: "bottom end",
             offset: 6,
-            className: "z-50 w-72 rounded-md border border-input bg-popover p-3 text-popover-foreground shadow-elevation outline-none entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95",
+            className: "z-50 w-72 rounded-md border border-input bg-popover p-3 text-popover-foreground outline-none entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95",
             children: /* @__PURE__ */ t(E, { className: "outline-none", children: /* @__PURE__ */ d(T, { className: "w-full", visibleDuration: { months: 1 }, children: [
               /* @__PURE__ */ d("header", { className: "mb-3 flex items-center justify-between gap-2", children: [
                 /* @__PURE__ */ t(

package/components/drawer.js

@@ -10,8 +10,7 @@ import { springSheet as l, drawerOffset as h, drawerBackdropVariants as F } from
 const k = j(
   [
     "relative flex flex-col",
-    "bg-elevated text-foreground",
-    "shadow-elevation"
+    "bg-elevated text-foreground"
   ],
   {
     variants: {
@@ -80,9 +79,9 @@ function G({
   open: t,
   onOpenChange: e,
   side: r,
-  size: v,
+  size: x,
   className: c,
-  children: x,
+  children: v,
   "aria-label": g
 }) {
   const d = r ?? "right", m = a.useRef(null), s = a.useRef(null);
@@ -129,7 +128,7 @@ function G({
           "aria-modal": "true",
           "aria-label": g,
           tabIndex: -1,
-          className: n(k({ side: d, size: v }), "relative outline-none", c),
+          className: n(k({ side: d, size: x }), "relative outline-none", c),
           children: [
             /* @__PURE__ */ i(
               D,
@@ -138,7 +137,7 @@ function G({
                 className: "right-4 top-4"
               }
             ),
-            x
+            v
           ]
         },
         "panel"
@@ -151,14 +150,14 @@ function L({
   open: t,
   onOpenChange: e,
   dismissible: r = !0,
-  side: v,
+  side: x,
   size: c,
-  containerClassName: x,
+  containerClassName: v,
   className: g,
   children: d,
   "aria-label": m
 }) {
-  const s = v ?? "right", p = c ?? "md", f = a.useRef(null);
+  const s = x ?? "right", p = c ?? "md", f = a.useRef(null);
   return a.useEffect(() => {
     if (!t || !r) return;
     const u = (o) => {
@@ -174,7 +173,7 @@ function L({
       className: n(
         "shrink-0 overflow-hidden",
         s === "bottom" ? "w-full" : "h-full",
-        x
+        v
       ),
       children: /* @__PURE__ */ y(
         w.aside,

package/components/dropdown.js

@@ -120,7 +120,7 @@ function V({
         },
         className: R(
           "relative z-50 min-w-44 rounded-lg border border-menu-stroke bg-elevated p-1",
-          "text-foreground shadow-elevation outline-none",
+          "text-foreground outline-none",
           r
         ),
         ...d,

package/components/empty-state.d.ts

@@ -7,6 +7,8 @@ import * as React from "react";
  *  - `illustration`: a larger soft graphic for a full empty *screen*, with a
  *    bigger title and more breathing room — the calm, centred pattern.
  *
+ * Both registers sit in a dashed WG5 outline with an 8px radius and no fill.
+ *
  * Pass one or the other; `illustration` wins when both are present. The
  * built-in illustrations (`EmptyDocuments`, `EmptySearch`, `EmptyConnections`,
  * `EmptyInsights`) share one soft language — neutral-gray cards, a single ink

package/components/empty-state.js

@@ -1,23 +1,25 @@
 "use client";
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import * as x from "react";
-import { Inbox as f } from "../lib/icons.js";
+import { Inbox as g } from "../lib/icons.js";
 import { cn as s } from "../lib/cn.js";
-const g = x.forwardRef(
-  ({ className: r, icon: d, illustration: i, title: n, description: c, action: o, ...m }, h) => {
+const f = x.forwardRef(
+  ({ className: r, icon: c, illustration: i, title: n, description: d, action: o, ...m }, h) => {
     const l = i != null;
     return /* @__PURE__ */ t(
       "div",
       {
         ref: h,
         className: s(
-          "flex flex-col items-center px-6 text-center",
+          // No fill: the empty state is outlined by a dashed WG5 edge on
+          // whatever surface it sits on.
+          "flex flex-col items-center rounded-lg border border-dashed border-border-strong px-6 text-center",
           l ? "gap-5 py-16" : "gap-3 py-12",
           r
         ),
         ...m,
         children: [
-          l ? i : /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center rounded-full bg-muted p-3 text-muted-foreground [&_svg]:size-6", children: d ?? /* @__PURE__ */ e(f, { "aria-hidden": !0 }) }),
+          l ? i : /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center rounded-full bg-muted p-3 text-muted-foreground [&_svg]:size-6", children: c ?? /* @__PURE__ */ e(g, { "aria-hidden": !0 }) }),
           /* @__PURE__ */ t("div", { className: "flex flex-col gap-1.5", children: [
             /* @__PURE__ */ e(
               "p",
@@ -28,14 +30,14 @@ const g = x.forwardRef(
                 children: n
               }
             ),
-            c && /* @__PURE__ */ e(
+            d && /* @__PURE__ */ e(
               "p",
               {
                 className: s(
                   "max-w-sm text-muted-foreground",
                   l ? "text-sm" : "text-xs"
                 ),
-                children: c
+                children: d
               }
             )
           ] }),
@@ -45,7 +47,7 @@ const g = x.forwardRef(
     );
   }
 );
-g.displayName = "EmptyState";
+f.displayName = "EmptyState";
 const a = "h-28 w-auto";
 function y({ className: r }) {
   return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
@@ -82,7 +84,7 @@ function y({ className: r }) {
   ] });
 }
 y.displayName = "EmptyDocuments";
-function N({ className: r }) {
+function u({ className: r }) {
   return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
     /* @__PURE__ */ e(
       "rect",
@@ -125,8 +127,8 @@ function N({ className: r }) {
     ] })
   ] });
 }
-N.displayName = "EmptySearch";
-function u({ className: r }) {
+u.displayName = "EmptySearch";
+function N({ className: r }) {
   return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
     /* @__PURE__ */ e(
       "path",
@@ -153,7 +155,7 @@ function u({ className: r }) {
     )
   ] });
 }
-u.displayName = "EmptyConnections";
+N.displayName = "EmptyConnections";
 function p({ className: r }) {
   return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
     /* @__PURE__ */ e("rect", { x: "34", y: "88", width: "72", height: "3", rx: "1.5", className: "fill-border-strong" }),
@@ -164,9 +166,9 @@ function p({ className: r }) {
 }
 p.displayName = "EmptyInsights";
 export {
-  u as EmptyConnections,
+  N as EmptyConnections,
   y as EmptyDocuments,
   p as EmptyInsights,
-  N as EmptySearch,
-  g as EmptyState
+  u as EmptySearch,
+  f as EmptyState
 };

package/components/field.js

@@ -22,12 +22,11 @@ const L = i(
   R({ on: "all", color: "brand", intensity: "medium", animate: !0 }),
   "[--glow-border-rest:var(--input)]",
   "[--glow-border-hover:var(--input)]",
-  "[--glow-border-active:var(--field-focus)]",
-  "[--glow-inset:var(--inner-glow-field)]"
-), w = a.forwardRef(({ className: r, children: e, required: o, ...t }, d) => /* @__PURE__ */ v(
+  "[--glow-border-active:var(--field-focus)]"
+), w = a.forwardRef(({ className: r, children: e, required: o, ...t }, n) => /* @__PURE__ */ v(
   "label",
   {
-    ref: d,
+    ref: n,
     className: i(
       "flex items-center gap-1 text-m font-medium text-secondary select-none",
       "peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
@@ -63,18 +62,18 @@ const h = a.forwardRef(
 );
 h.displayName = "FieldError";
 const D = a.forwardRef(
-  ({ className: r, label: e, description: o, error: t, required: d, htmlFor: g, errorId: s, descriptionId: c, children: n, ...N }, F) => {
+  ({ className: r, label: e, description: o, error: t, required: n, htmlFor: g, errorId: s, descriptionId: c, children: d, ...N }, F) => {
     const m = a.useId(), p = s ?? `${m}-error`, f = c ?? `${m}-description`, u = t ? p : o ? f : void 0, E = s == null && c == null;
-    let x = n;
-    if (E && u && a.isValidElement(n)) {
-      const b = n.props;
-      x = a.cloneElement(n, {
+    let x = d;
+    if (E && u && a.isValidElement(d)) {
+      const b = d.props;
+      x = a.cloneElement(d, {
         "aria-describedby": [b["aria-describedby"], u].filter(Boolean).join(" ") || void 0,
         "aria-invalid": b["aria-invalid"] ?? (t ? !0 : void 0)
       });
     }
     return /* @__PURE__ */ v("div", { ref: F, className: i("flex flex-col gap-1.5", r), ...N, children: [
-      e && /* @__PURE__ */ l(w, { htmlFor: g, required: d, children: e }),
+      e && /* @__PURE__ */ l(w, { htmlFor: g, required: n, children: e }),
       x,
       t ? /* @__PURE__ */ l(h, { id: p, children: t }) : o ? /* @__PURE__ */ l(y, { id: f, children: o }) : null
     ] });

package/components/file-dropzone.d.ts

@@ -5,11 +5,14 @@ import * as React from "react";
  * `<input type="file">`.
  *
  * A dashed edge is the one sanctioned stroke here: it is the affordance
- * ("something goes in this hole"), not decoration. The zone is actionable, so
- * it takes hover, focus and press feedback; while a file is dragged over it
- * the fill deepens rather than the stroke thickening, so nothing jumps.
+ * ("something goes in this hole"), not decoration. The empty zone is a White
+ * surface with a dashed WG5 edge and an outlined icon tile; hover warms it to
+ * WG1, and a drag-over turns it pale teal with a teal edge, so nothing jumps.
+ * Once files are chosen it becomes a solid-edged row: file tile, name and
+ * size, with Replace and Clear on the right.
  */
 declare const fileDropzoneVariants: (props?: ({
+    hasFiles?: boolean | null | undefined;
     isDragging?: boolean | null | undefined;
     isDisabled?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;