@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/composed/activity-feed.js

@@ -23,12 +23,12 @@ const z = {
   older: "Older"
 };
 function G(e, a) {
-  const d = { ...B, ...a }, o = /* @__PURE__ */ new Date(), c = new Date(o.getFullYear(), o.getMonth(), o.getDate()), n = new Date(c.getTime() - 24 * 60 * 60 * 1e3), r = o.getDay(), y = r === 0 ? 6 : r - 1, b = new Date(
-    c.getTime() - y * 24 * 60 * 60 * 1e3
+  const d = { ...B, ...a }, o = /* @__PURE__ */ new Date(), c = new Date(o.getFullYear(), o.getMonth(), o.getDate()), n = new Date(c.getTime() - 24 * 60 * 60 * 1e3), r = o.getDay(), b = r === 0 ? 6 : r - 1, y = new Date(
+    c.getTime() - b * 24 * 60 * 60 * 1e3
   ), f = [], m = [], u = [], g = [];
   for (const l of e) {
     const x = (typeof l.timestamp == "string" ? new Date(l.timestamp) : l.timestamp).getTime();
-    x >= c.getTime() ? f.push(l) : x >= n.getTime() ? m.push(l) : x >= b.getTime() ? u.push(l) : g.push(l);
+    x >= c.getTime() ? f.push(l) : x >= n.getTime() ? m.push(l) : x >= y.getTime() ? u.push(l) : g.push(l);
   }
   const h = [];
   return f.length > 0 && h.push({ label: d.today, items: f }), m.length > 0 && h.push({ label: d.yesterday, items: m }), u.length > 0 && h.push({ label: d.thisWeek, items: u }), g.length > 0 && h.push({ label: d.older, items: g }), h;
@@ -53,7 +53,7 @@ function O({
       "div",
       {
         className: i(
-          "relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-1",
+          "relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base",
           z[c]
         )
       }
@@ -75,7 +75,7 @@ function O({
             {
               className: i(
                 "text-surface-fg-muted",
-                e.detail && "cursor-pointer hover:underline hover:bg-surface-2 rounded-ds-md"
+                e.detail && "cursor-pointer hover:underline hover:bg-surface-raised rounded-ds-md"
               ),
               onClick: n,
               role: e.detail ? "button" : void 0,
@@ -120,7 +120,7 @@ function Y({
       ),
       children: [
         /* @__PURE__ */ t("hr", { className: "flex-1 border-surface-border" }),
-        /* @__PURE__ */ t("span", { className: "bg-surface-1 px-ds-03 text-ds-xs font-medium uppercase tracking-wider text-surface-fg-subtle", children: e }),
+        /* @__PURE__ */ t("span", { className: "bg-surface-base px-ds-03 text-ds-xs font-medium uppercase tracking-wider text-surface-fg-subtle", children: e }),
         /* @__PURE__ */ t("hr", { className: "flex-1 border-surface-border" })
       ]
     }
@@ -135,8 +135,8 @@ const M = k.forwardRef(
     emptyState: c,
     compact: n = !1,
     maxInitialItems: r,
-    groupBy: y = "none",
-    groupLabels: b,
+    groupBy: b = "none",
+    groupLabels: y,
     className: f,
     ...m
   }, u) => {
@@ -145,9 +145,9 @@ const M = k.forwardRef(
       return /* @__PURE__ */ t("div", { ref: u, className: i("relative", f), ...m, children: /* @__PURE__ */ t(I, { compact: n }) });
     if (e.length === 0)
       return c ? /* @__PURE__ */ t("div", { ref: u, className: f, ...m, children: c }) : null;
-    const l = r != null && !g && e.length > r, w = l ? e.slice(0, r) : e, x = y === "time";
+    const l = r != null && !g && e.length > r, w = l ? e.slice(0, r) : e, x = b === "time";
     return /* @__PURE__ */ s("div", { ref: u, className: i("relative", f), ...m, children: [
-      x ? /* @__PURE__ */ t("div", { children: G(w, b).map((p, N) => /* @__PURE__ */ s("div", { children: [
+      x ? /* @__PURE__ */ t("div", { children: G(w, y).map((p, N) => /* @__PURE__ */ s("div", { children: [
         /* @__PURE__ */ t(Y, { label: p.label, isFirst: N === 0 }),
         /* @__PURE__ */ s("div", { className: i("relative flex flex-col", n ? "gap-1" : "gap-3"), children: [
           /* @__PURE__ */ t("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }),

package/dist/composed/avatar-group.js

@@ -1,112 +1,111 @@
 "use client";
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import * as b from "react";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import * as v from "react";
 import { ag as $ } from "../_chunks/vendor-utils.js";
 import { cn as o } from "../ui/lib/utils.js";
 import { Avatar as E, AvatarImage as F, AvatarFallback as G } from "../ui/avatar.js";
-import { TooltipProvider as H, Tooltip as y, TooltipTrigger as N, TooltipContent as w } from "../ui/tooltip.js";
+import { TooltipProvider as H, Tooltip as x, TooltipTrigger as y, TooltipContent as N } from "../ui/tooltip.js";
 import { getInitials as B } from "./lib/string-utils.js";
-const I = {
-  lead: "ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-2",
-  admin: "ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-2",
-  client: "ring-2 ring-info-7 ring-offset-1 ring-offset-surface-2"
-}, g = $(
+const w = {
+  lead: "ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-raised",
+  admin: "ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-raised",
+  client: "ring-2 ring-info-7 ring-offset-1 ring-offset-surface-raised"
+}, I = $(
   "shrink-0 overflow-hidden rounded-ds-full border-2",
   {
     variants: {
       size: {
-        xs: "h-ds-xs w-ds-xs text-[10px]",
-        sm: "h-ds-sm w-ds-sm text-ds-xs",
-        md: "h-ds-md w-ds-md text-ds-sm",
-        lg: "h-ds-lg w-ds-lg text-ds-md",
-        xl: "h-ds-xl w-ds-xl text-ds-md"
+        xs: "h-ds-xs w-ds-xs",
+        sm: "h-ds-sm w-ds-sm",
+        md: "h-ds-md w-ds-md",
+        lg: "h-ds-lg w-ds-lg",
+        xl: "h-ds-xl w-ds-xl"
       }
     },
     defaultVariants: {
       size: "md"
     }
   }
-), L = b.forwardRef(
+), L = v.forwardRef(
   ({
     users: l,
-    max: p = 4,
-    size: a,
+    max: m = 4,
+    size: n,
     showTooltip: M = !0,
     borderColor: T = "surface-2",
-    onOverflowClick: h,
-    renderAvatar: u,
-    expandDirection: C = "right",
-    expandAmount: z = "default",
+    onOverflowClick: p,
+    renderAvatar: h,
+    expandDirection: z = "right",
+    expandAmount: C = "default",
     className: S,
     ...j
-  }, A) => {
-    const s = l.slice(0, p), i = l.length - p, c = {
+  }, k) => {
+    const a = l.slice(0, m), i = l.length - m, c = {
       xs: "-ml-ds-02",
       sm: "-ml-ds-02b",
       md: "-ml-ds-03",
       lg: "-ml-ds-04",
       xl: "-ml-ds-05"
-    }[a ?? "md"], d = T === "surface-1" ? "border-surface-1" : "border-surface-2", [P, f] = b.useState(!1), k = {
+    }[n ?? "md"], g = T === "surface-1" ? "border-surface-base" : "border-surface-raised", [A, d] = v.useState(!1), P = {
       xs: 8,
       sm: 10,
       md: 12,
       lg: 16,
       xl: 20
-    }[a ?? "md"], R = { compact: 0.5, default: 1, wide: 1.5 }[z], V = s.length + (i > 0 ? 1 : 0);
-    function m(e) {
-      if (!P) return "translateX(0)";
-      const t = k * R;
-      return C === "left" ? `translateX(-${(V - 1 - e) * t}px)` : `translateX(${e * t}px)`;
+    }[n ?? "md"], R = { compact: 0.5, default: 1, wide: 1.5 }[C], V = a.length + (i > 0 ? 1 : 0);
+    function f(e) {
+      if (!A) return "translateX(0)";
+      const r = P * R;
+      return z === "left" ? `translateX(-${(V - 1 - e) * r}px)` : `translateX(${e * r}px)`;
     }
-    const x = "transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85";
-    return /* @__PURE__ */ r(H, { children: /* @__PURE__ */ n(
+    const u = "transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85";
+    return /* @__PURE__ */ t(H, { children: /* @__PURE__ */ s(
       "div",
       {
-        ref: A,
+        ref: k,
         role: "group",
         "aria-label": `${l.length} team members`,
         tabIndex: 0,
         className: o("group flex items-center", S),
-        onMouseEnter: () => f(!0),
-        onMouseLeave: () => f(!1),
-        onFocus: () => f(!0),
+        onMouseEnter: () => d(!0),
+        onMouseLeave: () => d(!1),
+        onFocus: () => d(!0),
         onBlur: (e) => {
-          e.currentTarget.contains(e.relatedTarget) || f(!1);
+          e.currentTarget.contains(e.relatedTarget) || d(!1);
         },
         ...j,
         children: [
-          s.map((e, t) => {
+          a.map((e, r) => {
             const X = B(e.name);
-            if (u)
-              return /* @__PURE__ */ r(
+            if (h)
+              return /* @__PURE__ */ t(
                 "div",
                 {
                   className: o(
-                    g({ size: a }),
-                    d,
-                    t > 0 && c,
-                    x,
-                    e.ring && e.ring !== "none" && I[e.ring]
+                    "shrink-0",
+                    r > 0 && c,
+                    u,
+                    e.ring && e.ring !== "none" && w[e.ring]
                   ),
-                  style: { zIndex: s.length - t, transform: m(t) },
-                  children: u(e, t)
+                  style: { zIndex: a.length - r, transform: f(r) },
+                  children: h(e, r)
                 },
                 e.name
               );
-            const v = /* @__PURE__ */ n(
+            const b = /* @__PURE__ */ s(
               E,
               {
+                size: n,
                 className: o(
-                  g({ size: a }),
-                  d,
-                  t > 0 && c,
-                  x,
-                  e.ring && e.ring !== "none" && I[e.ring]
+                  g,
+                  r > 0 && c,
+                  u,
+                  e.ring && e.ring !== "none" && w[e.ring]
                 ),
-                style: { zIndex: s.length - t, transform: m(t) },
+                style: { zIndex: a.length - r, transform: f(r) },
                 children: [
-                  e.image && /* @__PURE__ */ r(F, { src: e.image, alt: e.name }),
-                  /* @__PURE__ */ r(
+                  e.image && /* @__PURE__ */ t(F, { src: e.image, alt: e.name }),
+                  /* @__PURE__ */ t(
                     G,
                     {
                       className: "font-body font-semibold",
@@ -118,60 +117,60 @@ const I = {
               },
               e.name
             );
-            return M ? /* @__PURE__ */ n(y, { children: [
-              /* @__PURE__ */ r(N, { asChild: !0, children: v }),
-              /* @__PURE__ */ r(
-                w,
+            return M ? /* @__PURE__ */ s(x, { children: [
+              /* @__PURE__ */ t(y, { asChild: !0, children: b }),
+              /* @__PURE__ */ t(
+                N,
                 {
-                  className: "border-surface-border-strong bg-surface-1 text-surface-fg",
+                  className: "border-surface-border-strong bg-surface-base text-surface-fg",
                   sideOffset: 6,
-                  children: /* @__PURE__ */ r("p", { className: "text-ds-sm", children: e.name })
+                  children: /* @__PURE__ */ t("p", { className: "text-ds-sm", children: e.name })
                 }
               )
-            ] }, e.name) : v;
+            ] }, e.name) : b;
           }),
-          i > 0 && /* @__PURE__ */ n(y, { children: [
-            /* @__PURE__ */ r(N, { asChild: !0, children: h ? /* @__PURE__ */ n(
+          i > 0 && /* @__PURE__ */ s(x, { children: [
+            /* @__PURE__ */ t(y, { asChild: !0, children: p ? /* @__PURE__ */ s(
               "button",
               {
                 type: "button",
-                onClick: h,
+                onClick: p,
                 className: o(
-                  g({ size: a }),
-                  d,
+                  I({ size: n }),
+                  g,
                   c,
                   "flex cursor-pointer items-center justify-center bg-accent-2 font-body font-semibold text-accent-11",
                   "hover:scale-105 hover:bg-accent-3 transition-[transform,background-color] duration-300 ease-out"
                 ),
-                style: { zIndex: 0, transform: m(s.length) },
+                style: { zIndex: 0, transform: f(a.length) },
                 children: [
                   "+",
                   i
                 ]
               }
-            ) : /* @__PURE__ */ n(
+            ) : /* @__PURE__ */ s(
               "div",
               {
                 className: o(
-                  g({ size: a }),
-                  d,
+                  I({ size: n }),
+                  g,
                   c,
                   "flex cursor-default items-center justify-center bg-accent-2 font-body font-semibold text-accent-11",
                   "transition-[transform,opacity] duration-300 ease-out"
                 ),
-                style: { zIndex: 0, transform: m(s.length) },
+                style: { zIndex: 0, transform: f(a.length) },
                 children: [
                   "+",
                   i
                 ]
               }
             ) }),
-            /* @__PURE__ */ r(
-              w,
+            /* @__PURE__ */ t(
+              N,
               {
-                className: "border-surface-border-strong bg-surface-1 text-surface-fg",
+                className: "border-surface-border-strong bg-surface-base text-surface-fg",
                 sideOffset: 6,
-                children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-ds-01", children: l.slice(p).map((e, t) => /* @__PURE__ */ r("p", { className: "text-ds-sm", children: e.name }, t)) })
+                children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-01", children: l.slice(m).map((e, r) => /* @__PURE__ */ t("p", { className: "text-ds-sm", children: e.name }, r)) })
               }
             )
           ] })

package/dist/composed/command-palette.js

@@ -100,7 +100,7 @@ const H = n.forwardRef(
           ...E,
           className: p(
             "fixed left-1/2 top-[20%] z-modal w-full max-w-[560px] -translate-x-1/2",
-            "overflow-hidden rounded-ds-xl border border-surface-border-strong bg-surface-1 shadow-05",
+            "overflow-hidden rounded-ds-xl border border-surface-border-strong bg-surface-overlay shadow-overlay",
             "duration-moderate-02 data-[state=open]:animate-in data-[state=closed]:animate-out",
             "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -152,7 +152,7 @@ const H = n.forwardRef(
                   spellCheck: !1
                 }
               ),
-              /* @__PURE__ */ t("kbd", { className: "hidden shrink-0 select-none rounded-ds-md border border-surface-border-strong bg-surface-2 px-ds-02b py-ds-01 text-ds-sm font-medium text-surface-fg-subtle shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)] sm:inline-flex", children: "Esc" })
+              /* @__PURE__ */ t("kbd", { className: "hidden shrink-0 select-none rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b py-ds-01 text-ds-sm font-medium text-surface-fg-subtle shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)] sm:inline-flex", children: "Esc" })
             ] }),
             /* @__PURE__ */ r(
               "div",
@@ -201,7 +201,7 @@ const H = n.forwardRef(
                               onMouseEnter: () => f(o),
                               className: p(
                                 "flex w-full items-center gap-ds-04 rounded-ds-lg px-ds-03 py-ds-03 text-left transition-[color,background-color] duration-fast-02 ease-productive-standard",
-                                u ? "bg-surface-3 text-surface-fg" : "text-surface-fg-muted hover:bg-surface-2"
+                                u ? "bg-surface-raised-hover text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"
                               ),
                               children: [
                                 a.icon && /* @__PURE__ */ t(
@@ -221,7 +221,7 @@ const H = n.forwardRef(
                                 ] }),
                                 a.shortcut && /* @__PURE__ */ t("kbd", { className: p(
                                   "shrink-0 rounded border border-surface-border-strong px-ds-02b py-ds-01 text-ds-xs font-medium shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)] transition-colors duration-fast-02 ease-productive-standard",
-                                  u ? "bg-accent-2 text-accent-11 border-accent-6" : "bg-surface-2 text-surface-fg-subtle"
+                                  u ? "bg-accent-2 text-accent-11 border-accent-6" : "bg-surface-raised text-surface-fg-subtle"
                                 ), children: a.shortcut }),
                                 /* @__PURE__ */ t(G, { children: u && /* @__PURE__ */ t(
                                   c.span,
@@ -262,17 +262,17 @@ const H = n.forwardRef(
                 children: [
                   /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-02b", children: [
                     /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-01", children: [
-                      /* @__PURE__ */ t("kbd", { className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-2 shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ t(U, { className: "h-ds-03 w-ds-03 text-surface-fg-subtle", stroke: 2 }) }),
-                      /* @__PURE__ */ t("kbd", { className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-2 shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ t(V, { className: "h-ds-03 w-ds-03 text-surface-fg-subtle", stroke: 2 }) })
+                      /* @__PURE__ */ t("kbd", { className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ t(U, { className: "h-ds-03 w-ds-03 text-surface-fg-subtle", stroke: 2 }) }),
+                      /* @__PURE__ */ t("kbd", { className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded border border-surface-border-strong bg-surface-raised shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ t(V, { className: "h-ds-03 w-ds-03 text-surface-fg-subtle", stroke: 2 }) })
                     ] }),
                     /* @__PURE__ */ t("span", { className: "text-ds-xs text-surface-fg-subtle", children: "Navigate" })
                   ] }),
                   /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-02b", children: [
-                    /* @__PURE__ */ t("kbd", { className: "inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-2 px-ds-02b shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ t(C, { className: "h-ds-03 w-ds-03 text-surface-fg-subtle", stroke: 2 }) }),
+                    /* @__PURE__ */ t("kbd", { className: "inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: /* @__PURE__ */ t(C, { className: "h-ds-03 w-ds-03 text-surface-fg-subtle", stroke: 2 }) }),
                     /* @__PURE__ */ t("span", { className: "text-ds-xs text-surface-fg-subtle", children: "Select" })
                   ] }),
                   /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-02b", children: [
-                    /* @__PURE__ */ t("kbd", { className: "inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-2 px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: "Esc" }),
+                    /* @__PURE__ */ t("kbd", { className: "inline-flex h-[20px] items-center justify-center rounded-ds-md border border-surface-border-strong bg-surface-raised px-ds-02b text-ds-xs font-medium text-surface-fg-subtle shadow-[inset_0_-1px_0_rgba(0,0,0,0.1)]", children: "Esc" }),
                     /* @__PURE__ */ t("span", { className: "text-ds-xs text-surface-fg-subtle", children: "Close" })
                   ] })
                 ]

package/dist/composed/content-card.js

@@ -1,15 +1,15 @@
 import { jsxs as i, jsx as e, Fragment as m } from "react/jsx-runtime";
 import * as g from "react";
 import { ag as h } from "../_chunks/vendor-utils.js";
-import { cn as t } from "../ui/lib/utils.js";
+import { cn as d } from "../ui/lib/utils.js";
 const v = h(
   "rounded-ds-lg will-change-[box-shadow] transition-[color,background-color,border-color,box-shadow] duration-fast-02 ease-productive-standard",
   {
     variants: {
       variant: {
-        default: "border border-surface-border-strong bg-surface-2 shadow-01 hover:shadow-02",
+        default: "border border-surface-border-strong bg-surface-raised shadow-raised hover:shadow-raised-hover",
         outline: "border border-surface-border bg-transparent hover:border-surface-border-strong",
-        ghost: "border border-transparent bg-transparent hover:bg-surface-2"
+        ghost: "border border-transparent bg-transparent hover:bg-surface-raised"
       },
       padding: {
         default: "p-ds-05b",
@@ -46,19 +46,19 @@ const v = h(
     variant: r,
     padding: s,
     header: c,
-    headerTitle: d,
+    headerTitle: t,
     headerActions: o,
     footer: a,
     className: u,
     children: p,
     ...l
   }, f) => {
-    const n = c || d || o;
+    const n = c || t || o;
     return /* @__PURE__ */ i(
       "div",
       {
         ref: f,
-        className: t(
+        className: d(
           v({ variant: r, padding: n || a ? "none" : s }),
           u
         ),
@@ -67,12 +67,12 @@ const v = h(
           n && /* @__PURE__ */ e(
             "div",
             {
-              className: t(
+              className: d(
                 "flex items-center justify-between border-b border-surface-border-strong",
                 b(s)
               ),
               children: c ?? /* @__PURE__ */ i(m, { children: [
-                d && /* @__PURE__ */ e("h3", { className: "text-ds-base font-semibold text-surface-fg", children: d }),
+                t && /* @__PURE__ */ e("h3", { className: "text-ds-base font-semibold text-surface-fg", children: t }),
                 o && /* @__PURE__ */ e("div", { className: "flex items-center gap-ds-03", children: o })
               ] })
             }
@@ -80,7 +80,7 @@ const v = h(
           /* @__PURE__ */ e(
             "div",
             {
-              className: t(
+              className: d(
                 (n || a) && x(s)
               ),
               children: p
@@ -89,7 +89,7 @@ const v = h(
           a && /* @__PURE__ */ e(
             "div",
             {
-              className: t(
+              className: d(
                 "border-t border-surface-border-strong",
                 b(s)
               ),

package/dist/composed/empty-state.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as s, jsxs as r } from "react/jsx-runtime";
+import { jsx as s, jsxs as o } from "react/jsx-runtime";
 import * as l from "react";
 import { tweens as g } from "../ui/lib/motion.js";
 import { cn as t } from "../ui/lib/utils.js";
@@ -29,7 +29,7 @@ const y = ({ className: e }) => /* @__PURE__ */ s(
       sm: "h-ico-sm w-ico-sm",
       md: "h-ico-lg w-ico-lg",
       lg: "h-ico-xl w-ico-xl"
-    }[f ?? (c ? "sm" : "md")], o = e != null && !l.isValidElement(e) && (typeof e == "function" || typeof e == "object" && "$$typeof" in e), h = e ? o ? l.createElement(e, {
+    }[f ?? (c ? "sm" : "md")], r = e != null && !l.isValidElement(e) && (typeof e == "function" || typeof e == "object" && "$$typeof" in e), h = e ? r ? l.createElement(e, {
       className: t("text-surface-fg-subtle", a)
     }) : e : /* @__PURE__ */ s(
       y,
@@ -37,7 +37,7 @@ const y = ({ className: e }) => /* @__PURE__ */ s(
         className: t("text-surface-fg-subtle", a)
       }
     );
-    return /* @__PURE__ */ r(
+    return /* @__PURE__ */ o(
       "div",
       {
         ref: u,
@@ -52,16 +52,16 @@ const y = ({ className: e }) => /* @__PURE__ */ s(
             n.div,
             {
               className: t(
-                "flex items-center justify-center rounded-ds-xl bg-surface-2",
+                "flex items-center justify-center rounded-ds-xl bg-surface-raised",
                 c ? "h-ds-md w-ds-md" : "h-ds-lg w-ds-lg",
-                !o && e != null && a
+                !r && e != null && a
               ),
               animate: { y: [0, -4, 0] },
               transition: { repeat: 1 / 0, duration: 3, ease: "easeInOut" },
               children: h
             }
           ),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ o(
             n.div,
             {
               className: "flex max-w-[280px] flex-col gap-ds-02",

package/dist/composed/error-boundary.js

@@ -66,7 +66,7 @@ const k = p.forwardRef(
     return /* @__PURE__ */ t("div", { ref: f, ...d, className: o("flex min-h-[60vh] items-center justify-center p-ds-05", l), children: /* @__PURE__ */ r(
       "div",
       {
-        className: "flex w-full max-w-lg flex-col items-center gap-ds-06 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-07 text-center shadow-01",
+        className: "flex w-full max-w-lg flex-col items-center gap-ds-06 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-07 text-center shadow-raised",
         children: [
           /* @__PURE__ */ t(
             "div",
@@ -100,7 +100,7 @@ const k = p.forwardRef(
               children: "Try Again"
             }
           ) }),
-          m && c && /* @__PURE__ */ r("div", { className: "w-full overflow-auto rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-05 text-left", children: [
+          m && c && /* @__PURE__ */ r("div", { className: "w-full overflow-auto rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-05 text-left", children: [
             /* @__PURE__ */ t("p", { className: "text-ds-sm mb-ds-03 font-semibold text-surface-fg", children: "Stack Trace (development only)" }),
             /* @__PURE__ */ t("pre", { className: "whitespace-pre-wrap text-ds-sm text-surface-fg-subtle", children: c })
           ] })