@actioneer/ads 0.7.0 → 0.8.0

package/components/assistant-ui/image.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as g, jsx as a, Fragment as E } from "react/jsx-runtime";
+import { jsxs as u, jsx as n, Fragment as E } from "react/jsx-runtime";
 import { memo as D, useRef as F, useState as p, useEffect as b } from "react";
 import { createPortal as O } from "react-dom";
 import { cva as P } from "class-variance-authority";
@@ -24,10 +24,10 @@ const G = (e) => {
   }
 }, z = (e) => {
   var r;
-  const [t, n] = e.split(","), i = ((r = t == null ? void 0 : t.match(/data:([^;]+)/)) == null ? void 0 : r[1]) ?? "application/octet-stream";
+  const [t, a] = e.split(","), i = ((r = t == null ? void 0 : t.match(/data:([^;]+)/)) == null ? void 0 : r[1]) ?? "application/octet-stream";
   if (!/;base64/i.test(t ?? ""))
-    return new Blob([decodeURIComponent(n ?? "")], { type: i });
-  const l = atob(n ?? ""), o = new Uint8Array(l.length);
+    return new Blob([decodeURIComponent(a ?? "")], { type: i });
+  const l = atob(a ?? ""), o = new Uint8Array(l.length);
   for (let s = 0; s < l.length; s++) o[s] = l.charCodeAt(s);
   return new Blob([o], { type: i });
 }, N = (e) => {
@@ -35,13 +35,13 @@ const G = (e) => {
   return (t = e.match(/^data:([^;,]+)/)) == null ? void 0 : t[1];
 }, K = (e) => {
   if (typeof document > "u") return;
-  const t = G(N(e.image)), n = e.filename ?? `image.${t}`, l = e.image.startsWith("data:") ? URL.createObjectURL(z(e.image)) : null, o = l ?? e.image, r = document.createElement("a");
-  r.href = o, r.download = n, r.rel = "noopener", document.body.appendChild(r), r.click(), document.body.removeChild(r), l && URL.revokeObjectURL(l);
+  const t = G(N(e.image)), a = e.filename ?? `image.${t}`, l = e.image.startsWith("data:") ? URL.createObjectURL(z(e.image)) : null, o = l ?? e.image, r = document.createElement("a");
+  r.href = o, r.download = a, r.rel = "noopener", document.body.appendChild(r), r.click(), document.body.removeChild(r), l && URL.revokeObjectURL(l);
 }, M = async (e) => {
   if (typeof navigator > "u" || !navigator.clipboard || typeof ClipboardItem > "u")
     throw new Error("Clipboard API is not available in this environment.");
-  const t = e.image.startsWith("data:") ? z(e.image) : await fetch(e.image).then((i) => i.blob()), n = N(e.image) ?? t.type ?? "image/png";
-  await navigator.clipboard.write([new ClipboardItem({ [n]: t })]);
+  const t = e.image.startsWith("data:") ? z(e.image) : await fetch(e.image).then((i) => i.blob()), a = N(e.image) ?? t.type ?? "image/png";
+  await navigator.clipboard.write([new ClipboardItem({ [a]: t })]);
 }, T = P(
   "aui-image-root relative overflow-hidden rounded-lg",
   {
@@ -67,17 +67,17 @@ const G = (e) => {
 function h({
   className: e,
   variant: t,
-  size: n,
+  size: a,
   children: i,
   ...l
 }) {
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "image-root",
       "data-variant": t,
-      "data-size": n,
-      className: d(T({ variant: t, size: n, className: e })),
+      "data-size": a,
+      className: d(T({ variant: t, size: a, className: e })),
       ...l,
       children: i
     }
@@ -86,7 +86,7 @@ function h({
 function C({
   className: e,
   containerClassName: t,
-  onLoad: n,
+  onLoad: a,
   onError: i,
   alt: l = "Image content",
   src: o,
@@ -94,20 +94,20 @@ function C({
 }) {
   const s = F(null), [f, m] = p(void 0), [y, U] = p(void 0), x = f === o, I = y === o;
   return b(() => {
-    var u;
-    typeof o == "string" && ((u = s.current) != null && u.complete) && s.current.naturalWidth > 0 && m(o);
-  }, [o]), /* @__PURE__ */ g(
+    var g;
+    typeof o == "string" && ((g = s.current) != null && g.complete) && s.current.naturalWidth > 0 && m(o);
+  }, [o]), /* @__PURE__ */ u(
     "div",
     {
       "data-slot": "image-preview",
       className: d("relative min-h-32", t),
       children: [
-        !x && !I && /* @__PURE__ */ a(
+        !x && !I && /* @__PURE__ */ n(
           "div",
           {
             "data-slot": "image-preview-loading",
             className: "bg-muted/50 absolute inset-0 flex items-center justify-center",
-            children: /* @__PURE__ */ a(
+            children: /* @__PURE__ */ n(
               w,
               {
                 variant: "content",
@@ -118,14 +118,14 @@ function C({
             )
           }
         ),
-        I ? /* @__PURE__ */ a(
+        I ? /* @__PURE__ */ n(
           "div",
           {
             "data-slot": "image-preview-error",
             className: "bg-muted/50 flex min-h-32 items-center justify-center p-4",
-            children: /* @__PURE__ */ a(S, { className: "text-muted-foreground size-8" })
+            children: /* @__PURE__ */ n(S, { className: "text-muted-foreground size-8" })
           }
-        ) : /* @__PURE__ */ a(
+        ) : /* @__PURE__ */ n(
           "img",
           {
             ref: s,
@@ -136,11 +136,11 @@ function C({
               !x && "invisible",
               e
             ),
-            onLoad: (u) => {
-              typeof o == "string" && m(o), n == null || n(u);
+            onLoad: (g) => {
+              typeof o == "string" && m(o), a == null || a(g);
             },
-            onError: (u) => {
-              typeof o == "string" && U(o), i == null || i(u);
+            onError: (g) => {
+              typeof o == "string" && U(o), i == null || i(g);
             },
             ...r
           }
@@ -152,9 +152,9 @@ function C({
 function v({
   className: e,
   children: t,
-  ...n
+  ...a
 }) {
-  return t ? /* @__PURE__ */ a(
+  return t ? /* @__PURE__ */ n(
     "span",
     {
       "data-slot": "image-filename",
@@ -162,12 +162,12 @@ function v({
         "text-muted-foreground block truncate px-2 py-1.5 text-xs",
         e
       ),
-      ...n,
+      ...a,
       children: t
     }
   ) : null;
 }
-function j({ src: e, alt: t = "Image preview", children: n }) {
+function j({ src: e, alt: t = "Image preview", children: a }) {
   const [i, l] = p(!1), [o, r] = p(!1);
   b(() => {
     l(!0);
@@ -185,8 +185,8 @@ function j({ src: e, alt: t = "Image preview", children: n }) {
     return document.body.style.overflow = "hidden", () => {
       document.body.style.overflow = m;
     };
-  }, [o]), /* @__PURE__ */ g(E, { children: [
-    /* @__PURE__ */ a(
+  }, [o]), /* @__PURE__ */ u(E, { children: [
+    /* @__PURE__ */ n(
       "div",
       {
         onClick: s,
@@ -195,21 +195,21 @@ function j({ src: e, alt: t = "Image preview", children: n }) {
         tabIndex: 0,
         className: "aui-image-zoom-trigger cursor-zoom-in",
         "aria-label": "Click to zoom image",
-        children: n
+        children: a
       }
     ),
     i && o && O(
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ n(
         "div",
         {
           "data-slot": "image-zoom-overlay",
           role: "button",
           tabIndex: 0,
-          className: "aui-image-zoom-overlay fade-in animate-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 duration-200",
+          className: "aui-image-zoom-overlay fade-in animate-in fixed inset-0 z-50 flex items-center justify-center bg-wg12/80 duration-200",
           onClick: f,
           onKeyDown: (m) => m.key === "Enter" && f(),
           "aria-label": "Close zoomed image",
-          children: /* @__PURE__ */ a(
+          children: /* @__PURE__ */ n(
             "img",
             {
               "data-slot": "image-zoom-content",
@@ -228,7 +228,7 @@ function j({ src: e, alt: t = "Image preview", children: n }) {
   ] });
 }
 function k({ className: e }) {
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "image-generating",
@@ -236,7 +236,7 @@ function k({ className: e }) {
         "bg-muted/50 flex min-h-32 items-center justify-center p-4",
         e
       ),
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ n(
         w,
         {
           variant: "surface",
@@ -252,7 +252,7 @@ function R({
   className: e,
   reason: t
 }) {
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ u(
     "div",
     {
       "data-slot": "image-content-filter-error",
@@ -261,9 +261,9 @@ function R({
         e
       ),
       children: [
-        /* @__PURE__ */ a(B, { className: "text-muted-foreground size-8" }),
-        /* @__PURE__ */ a("p", { className: "text-sm font-medium", children: "Image could not be generated" }),
-        t && /* @__PURE__ */ a("p", { className: "text-muted-foreground text-xs", children: t })
+        /* @__PURE__ */ n(B, { className: "text-muted-foreground size-8" }),
+        /* @__PURE__ */ n("p", { className: "text-sm font-medium", children: "Image could not be generated" }),
+        t && /* @__PURE__ */ n("p", { className: "text-muted-foreground text-xs", children: t })
       ]
     }
   );
@@ -271,17 +271,17 @@ function R({
 function V({
   onRegenerate: e
 }) {
-  const [t, n] = p(!1);
-  return /* @__PURE__ */ a(
+  const [t, a] = p(!1);
+  return /* @__PURE__ */ n(
     "button",
     {
       type: "button",
       onClick: async () => {
-        n(!0);
+        a(!0);
         try {
           await e();
         } finally {
-          n(!1);
+          a(!1);
         }
       },
       disabled: t,
@@ -289,18 +289,18 @@ function V({
       "aria-label": "Regenerate image",
       "aria-busy": t || void 0,
       className: "hover:bg-muted inline-flex size-7 items-center justify-center rounded disabled:opacity-50",
-      children: t ? /* @__PURE__ */ a(w, { variant: "action", size: "sm", "aria-hidden": !0 }) : /* @__PURE__ */ a(W, { className: "size-4" })
+      children: t ? /* @__PURE__ */ n(w, { variant: "action", size: "sm", "aria-hidden": !0 }) : /* @__PURE__ */ n(W, { className: "size-4" })
     }
   );
 }
-function Z({ part: e, onRegenerate: t, className: n }) {
-  return /* @__PURE__ */ g(
+function Z({ part: e, onRegenerate: t, className: a }) {
+  return /* @__PURE__ */ u(
     "div",
     {
       "data-slot": "image-actions",
-      className: d("flex items-center gap-1 p-1", n),
+      className: d("flex items-center gap-1 p-1", a),
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
@@ -308,10 +308,10 @@ function Z({ part: e, onRegenerate: t, className: n }) {
             "data-slot": "image-download",
             "aria-label": "Download image",
             className: "hover:bg-muted inline-flex size-7 items-center justify-center rounded",
-            children: /* @__PURE__ */ a(A, { className: "size-4" })
+            children: /* @__PURE__ */ n(A, { className: "size-4" })
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
@@ -322,22 +322,22 @@ function Z({ part: e, onRegenerate: t, className: n }) {
             "data-slot": "image-copy",
             "aria-label": "Copy image",
             className: "hover:bg-muted inline-flex size-7 items-center justify-center rounded",
-            children: /* @__PURE__ */ a(L, { className: "size-4" })
+            children: /* @__PURE__ */ n(L, { className: "size-4" })
           }
         ),
-        t && /* @__PURE__ */ a(V, { onRegenerate: t })
+        t && /* @__PURE__ */ n(V, { onRegenerate: t })
       ]
     }
   );
 }
 const $ = (e) => {
-  const { image: t, filename: n, status: i } = e;
-  return (i == null ? void 0 : i.type) === "running" ? /* @__PURE__ */ g(h, { children: [
-    /* @__PURE__ */ a(k, {}),
-    /* @__PURE__ */ a(v, { children: n })
-  ] }) : (i == null ? void 0 : i.type) === "incomplete" && i.reason === "content-filter" ? /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(R, { reason: "The provider blocked this image." }) }) : /* @__PURE__ */ g(h, { children: [
-    /* @__PURE__ */ a(j, { src: t, alt: n || "Image content", children: /* @__PURE__ */ a(C, { src: t, alt: n || "Image content" }) }),
-    /* @__PURE__ */ a(v, { children: n })
+  const { image: t, filename: a, status: i } = e;
+  return (i == null ? void 0 : i.type) === "running" ? /* @__PURE__ */ u(h, { children: [
+    /* @__PURE__ */ n(k, {}),
+    /* @__PURE__ */ n(v, { children: a })
+  ] }) : (i == null ? void 0 : i.type) === "incomplete" && i.reason === "content-filter" ? /* @__PURE__ */ n(h, { children: /* @__PURE__ */ n(R, { reason: "The provider blocked this image." }) }) : /* @__PURE__ */ u(h, { children: [
+    /* @__PURE__ */ n(j, { src: t, alt: a || "Image content", children: /* @__PURE__ */ n(C, { src: t, alt: a || "Image content" }) }),
+    /* @__PURE__ */ n(v, { children: a })
   ] });
 }, c = D($);
 c.displayName = "Image";

package/components/assistant-ui/message-timing.js

@@ -25,7 +25,7 @@ const r = (s) => s === void 0 ? "—" : s < 1e3 ? `${Math.round(s)}ms` : `${(s /
         side: o,
         sideOffset: 8,
         "data-slot": "message-timing-popover",
-        className: "bg-popover text-popover-foreground rounded-lg border px-3 py-2 shadow-md [&_span>svg]:hidden!",
+        className: "bg-popover text-popover-foreground rounded-lg border px-3 py-2 shadow-300 [&_span>svg]:hidden!",
         children: /* @__PURE__ */ n("div", { className: "grid min-w-35 gap-1.5 text-xs", children: [
           e.firstTokenTime !== void 0 && /* @__PURE__ */ n("div", { className: "flex items-center justify-between gap-4", children: [
             /* @__PURE__ */ t("span", { className: "text-muted-foreground", children: "First token" }),

package/components/assistant-ui/selection-toolbar.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsxs as l, jsx as t, Fragment as m } from "react/jsx-runtime";
+import { jsxs as l, jsx as t, Fragment as p } from "react/jsx-runtime";
 import { memo as f } from "react";
-import { SelectionToolbarPrimitive as p } from "@assistant-ui/react";
+import { SelectionToolbarPrimitive as m } from "@assistant-ui/react";
 import { Quote as y, Copy as S } from "../../lib/icons.js";
 import { cn as i } from "../../lib/cn.js";
 function d({
@@ -9,11 +9,11 @@ function d({
   ...e
 }) {
   return /* @__PURE__ */ t(
-    p.Root,
+    m.Root,
     {
       "data-slot": "selection-toolbar",
       className: i(
-        "bg-popover flex items-center gap-1 rounded-lg border px-1 py-1 shadow-md",
+        "bg-popover flex items-center gap-1 rounded-lg border px-1 py-1 shadow-300",
         o
       ),
       ...e
@@ -26,7 +26,7 @@ function u({
   ...r
 }) {
   return /* @__PURE__ */ t(
-    p.Quote,
+    m.Quote,
     {
       "data-slot": "selection-toolbar-quote",
       className: i(
@@ -34,7 +34,7 @@ function u({
         o
       ),
       ...r,
-      children: e ?? /* @__PURE__ */ l(m, { children: [
+      children: e ?? /* @__PURE__ */ l(p, { children: [
         /* @__PURE__ */ t(y, { className: "size-3.5" }),
         "Quote"
       ] })
@@ -63,7 +63,7 @@ function b({
         ), (s = window.getSelection()) == null || s.removeAllRanges(), r == null || r(x);
       },
       ...g,
-      children: e ?? /* @__PURE__ */ l(m, { children: [
+      children: e ?? /* @__PURE__ */ l(p, { children: [
         /* @__PURE__ */ t(S, { className: "size-3.5" }),
         "Copy"
       ] })

package/components/avatar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as l, jsxs as b } from "react/jsx-runtime";
+import { jsx as n, jsxs as b } from "react/jsx-runtime";
 import * as f from "react";
 import { cn as s } from "../lib/cn.js";
 const m = {
@@ -8,69 +8,69 @@ const m = {
   md: "size-10 text-xs",
   lg: "size-12 text-base",
   xl: "size-16 text-lg"
-}, h = {
+}, p = {
   full: "rounded-full",
   lg: "rounded-lg"
 };
-function v(r) {
-  const e = r.trim().split(/\s+/).filter(Boolean);
+function v(t) {
+  const e = t.trim().split(/\s+/).filter(Boolean);
   return e.length === 0 ? "" : e.length === 1 ? e[0].slice(0, 2).toUpperCase() : (e[0][0] + e[e.length - 1][0]).toUpperCase();
 }
 const g = [
-  "bg-g9 text-white",
-  "bg-g10 text-white",
-  "bg-g11 text-white",
+  "bg-g9 text-action-primary-foreground",
+  "bg-g10 text-action-primary-foreground",
+  "bg-g11 text-action-primary-foreground",
   "bg-g4 text-g12"
 ];
-function N(r) {
-  const e = Array.from(r).reduce(
-    (t, i) => t + i.charCodeAt(0),
+function y(t) {
+  const e = Array.from(t).reduce(
+    (r, i) => r + i.charCodeAt(0),
     0
   );
   return g[e % g.length];
 }
-const A = f.forwardRef(
-  ({ className: r, src: e, name: t, size: i = "md", radius: o = "full", ...a }, d) => {
-    const n = t ? v(t) : "";
-    return /* @__PURE__ */ l(
+const N = f.forwardRef(
+  ({ className: t, src: e, name: r, size: i = "md", radius: o = "full", ...a }, d) => {
+    const l = r ? v(r) : "";
+    return /* @__PURE__ */ n(
       "span",
       {
         ref: d,
         role: "img",
-        "aria-label": t,
+        "aria-label": r,
         className: s(
           "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-normal",
           // Images sit on the neutral fill; initials use the ADS green ramp.
-          e || !t ? "bg-fill text-fill-foreground" : N(t),
+          e || !r ? "bg-fill text-fill-foreground" : y(r),
           m[i],
-          h[o],
-          r
+          p[o],
+          t
         ),
         ...a,
-        children: e ? /* @__PURE__ */ l(
+        children: e ? /* @__PURE__ */ n(
           "img",
           {
             src: e,
-            alt: t ?? "",
+            alt: r ?? "",
             className: "size-full object-cover"
           }
-        ) : /* @__PURE__ */ l("span", { "aria-hidden": !0, children: n })
+        ) : /* @__PURE__ */ n("span", { "aria-hidden": !0, children: l })
       }
     );
   }
 );
-A.displayName = "Avatar";
-const w = f.forwardRef(
-  ({ className: r, max: e, size: t = "md", radius: i = "full", children: o, ...a }, d) => {
-    const n = f.Children.toArray(o), c = typeof e == "number" ? n.length - e : 0, p = typeof e == "number" ? n.slice(0, e) : n;
+N.displayName = "Avatar";
+const A = f.forwardRef(
+  ({ className: t, max: e, size: r = "md", radius: i = "full", children: o, ...a }, d) => {
+    const l = f.Children.toArray(o), c = typeof e == "number" ? l.length - e : 0, h = typeof e == "number" ? l.slice(0, e) : l;
     return /* @__PURE__ */ b(
       "div",
       {
         ref: d,
-        className: s("flex items-center", r),
+        className: s("flex items-center", t),
         ...a,
         children: [
-          p.map((x, u) => /* @__PURE__ */ l(
+          h.map((x, u) => /* @__PURE__ */ n(
             "div",
             {
               className: s(
@@ -81,7 +81,7 @@ const w = f.forwardRef(
             },
             u
           )),
-          c > 0 && /* @__PURE__ */ l("div", { className: s("ring-2 ring-background rounded-full -ml-2"), children: /* @__PURE__ */ l(
+          c > 0 && /* @__PURE__ */ n("div", { className: s("ring-2 ring-background rounded-full -ml-2"), children: /* @__PURE__ */ n(
             "span",
             {
               role: "img",
@@ -89,10 +89,10 @@ const w = f.forwardRef(
               className: s(
                 "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-normal",
                 "bg-muted text-muted-foreground",
-                m[t],
-                h[i]
+                m[r],
+                p[i]
               ),
-              children: /* @__PURE__ */ l("span", { "aria-hidden": !0, children: `+${c}` })
+              children: /* @__PURE__ */ n("span", { "aria-hidden": !0, children: `+${c}` })
             }
           ) })
         ]
@@ -100,8 +100,8 @@ const w = f.forwardRef(
     );
   }
 );
-w.displayName = "AvatarGroup";
+A.displayName = "AvatarGroup";
 export {
-  A as Avatar,
-  w as AvatarGroup
+  N as Avatar,
+  A as AvatarGroup
 };

package/components/chip.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs as x, Fragment as h, jsx as e } from "react/jsx-runtime";
-import * as N from "react";
-import { cva as y } from "class-variance-authority";
-import { Close as w } from "../lib/icons.js";
+import * as w from "react";
+import { cva as N } from "class-variance-authority";
+import { Close as y } from "../lib/icons.js";
 import { cn as i } from "../lib/cn.js";
-const k = y(
+const k = N(
   "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: {
@@ -23,8 +23,8 @@ const k = y(
     },
     compoundVariants: [
       // solid — the default tinted surface
-      { variant: "solid", color: "default", className: "border-ng6 bg-ng2 text-muted-foreground" },
-      { variant: "solid", color: "primary", className: "border-ng5 bg-fill text-fill-foreground" },
+      { variant: "solid", color: "default", className: "border-wg6 bg-wg2 text-muted-foreground" },
+      { variant: "solid", color: "primary", className: "border-wg5 bg-fill text-fill-foreground" },
       { variant: "solid", color: "success", className: "border-success-400 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" },
@@ -46,7 +46,7 @@ const k = y(
   warning: "bg-warning",
   danger: "bg-danger",
   info: "bg-info"
-}, j = N.forwardRef(
+}, j = w.forwardRef(
   ({
     className: u,
     variant: b = "solid",
@@ -93,7 +93,7 @@ const k = y(
             "outline-none focus-visible:ring-3 focus-visible:ring-ring",
             "[&_svg]:size-3"
           ),
-          children: /* @__PURE__ */ e(w, { "aria-hidden": !0 })
+          children: /* @__PURE__ */ e(y, { "aria-hidden": !0 })
         }
       )
     ] });

package/components/divider.js

@@ -1,69 +1,69 @@
 "use client";
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import * as k from "react";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import * as b from "react";
 import { cn as e } from "../lib/cn.js";
-const p = "linear-gradient(to right, black, transparent)", g = "linear-gradient(to bottom, black, transparent)", u = k.forwardRef(
+const p = "linear-gradient(to right, var(--color-wg12), transparent)", g = "linear-gradient(to bottom, var(--color-wg12), transparent)", v = b.forwardRef(
   ({
-    className: n,
+    className: o,
     orientation: m = "horizontal",
-    variant: b = "primary",
+    variant: x = "primary",
     fade: c = !1,
     label: d,
-    style: o,
+    style: n,
     ...i
   }, s) => {
-    const x = b === "secondary", a = m === "vertical", t = x ? a ? "w-px [background-image:linear-gradient(to_bottom,var(--color-border)_50%,transparent_50%)] [background-size:1px_12px] [background-repeat:repeat-y]" : "h-px [background-image:linear-gradient(to_right,var(--color-border)_50%,transparent_50%)] [background-size:12px_1px] [background-repeat:repeat-x]" : a ? "w-px bg-border" : "h-px bg-border", l = c ? {
-      WebkitMaskImage: a ? g : p,
-      maskImage: a ? g : p
+    const f = x === "secondary", r = m === "vertical", t = f ? r ? "w-px [background-image:linear-gradient(to_bottom,var(--color-border)_50%,transparent_50%)] [background-size:1px_12px] [background-repeat:repeat-y]" : "h-px [background-image:linear-gradient(to_right,var(--color-border)_50%,transparent_50%)] [background-size:12px_1px] [background-repeat:repeat-x]" : r ? "w-px bg-border" : "h-px bg-border", l = c ? {
+      WebkitMaskImage: r ? g : p,
+      maskImage: r ? g : p
     } : void 0;
-    return a ? /* @__PURE__ */ r(
+    return r ? /* @__PURE__ */ a(
       "div",
       {
         ref: s,
         role: "separator",
         "aria-orientation": "vertical",
-        className: e("h-full self-stretch", t, n),
-        style: { ...l, ...o },
+        className: e("h-full self-stretch", t, o),
+        style: { ...l, ...n },
         ...i
       }
-    ) : d != null ? /* @__PURE__ */ f(
+    ) : d != null ? /* @__PURE__ */ u(
       "div",
       {
         ref: s,
         role: "separator",
         "aria-orientation": "horizontal",
-        className: e("flex items-center gap-3 w-full", n),
-        style: o,
+        className: e("flex items-center gap-3 w-full", o),
+        style: n,
         ...i,
         children: [
-          /* @__PURE__ */ r("span", { className: e("flex-1", t), style: l }),
-          /* @__PURE__ */ r("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: d }),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a("span", { className: e("flex-1", t), style: l }),
+          /* @__PURE__ */ a("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: d }),
+          /* @__PURE__ */ a(
             "span",
             {
               className: e("flex-1", t),
               style: c ? {
-                WebkitMaskImage: "linear-gradient(to left, black, transparent)",
-                maskImage: "linear-gradient(to left, black, transparent)"
+                WebkitMaskImage: "linear-gradient(to left, var(--color-wg12), transparent)",
+                maskImage: "linear-gradient(to left, var(--color-wg12), transparent)"
               } : void 0
             }
           )
         ]
       }
-    ) : /* @__PURE__ */ r(
+    ) : /* @__PURE__ */ a(
       "div",
       {
         ref: s,
         role: "separator",
         "aria-orientation": "horizontal",
-        className: e("w-full", t, n),
-        style: { ...l, ...o },
+        className: e("w-full", t, o),
+        style: { ...l, ...n },
         ...i
       }
     );
   }
 );
-u.displayName = "Divider";
+v.displayName = "Divider";
 export {
-  u as Divider
+  v as Divider
 };