@devalok/shilp-sutra-karm 0.20.2 → 0.21.0

package/dist/dashboard/index.js

@@ -1,10 +1,10 @@
 "use client";
 import { A as Me, D as Re, b as je, c as Ae, S as Le, a as Be, u as Ie } from "../_chunks/sidebar-scratchpad.js";
 import { jsx as r, jsxs as u, Fragment as G } from "react/jsx-runtime";
-import * as k from "react";
+import * as v from "react";
 import { useMemo as U, useContext as Z, createContext as q, useState as J, useRef as Q, useCallback as V } from "react";
 import { motion as C } from "framer-motion";
-import { cn as b } from "@devalok/shilp-sutra/ui/lib/utils";
+import { cn as k } from "@devalok/shilp-sutra/ui/lib/utils";
 import { motionProps as M } from "@devalok/shilp-sutra/ui/lib/motion";
 import { Badge as S } from "@devalok/shilp-sutra/ui/badge";
 import { Progress as R } from "@devalok/shilp-sutra/ui/progress";
@@ -12,43 +12,43 @@ import { MotionStagger as ee, MotionPop as te, MotionStaggerItem as re } from "@
 import { Tooltip as ae, TooltipTrigger as se, TooltipContent as ne, TooltipProvider as oe } from "@devalok/shilp-sutra/ui/tooltip";
 function ce(t, e, s, o) {
   if (t.length < 2) return { path: "", endX: 0, endY: 0, startX: 0 };
-  const a = t.length, i = e - o * 2, c = s - o * 2;
+  const a = t.length, l = e - o * 2, c = s - o * 2;
   let m = Math.min(...t), f = Math.max(...t);
   if (f - m < 0.1) {
     const d = (f + m) / 2;
     m = d - 0.05, f = d + 0.05;
   }
-  const p = t.map((d, h) => o + h / (a - 1) * i), n = t.map(
+  const p = t.map((d, h) => o + h / (a - 1) * l), n = t.map(
     (d) => o + (1 - (d - m) / (f - m)) * c
-  ), l = [];
-  l.push(`M ${p[0]} ${n[0]}`);
+  ), i = [];
+  i.push(`M ${p[0]} ${n[0]}`);
   for (let d = 0; d < a - 1; d++) {
-    const h = p[Math.max(0, d - 1)], g = n[Math.max(0, d - 1)], w = p[d], x = n[d], N = p[d + 1], v = n[d + 1], B = p[Math.min(a - 1, d + 2)], I = n[Math.min(a - 1, d + 2)], E = (N - h) / 6, X = (v - g) / 6, z = (B - w) / 6, F = (I - x) / 6, K = w + E, O = x + X, Y = N - z, _ = v - F;
-    l.push(`C ${K} ${O}, ${Y} ${_}, ${N} ${v}`);
+    const h = p[Math.max(0, d - 1)], g = n[Math.max(0, d - 1)], w = p[d], x = n[d], N = p[d + 1], b = n[d + 1], B = p[Math.min(a - 1, d + 2)], I = n[Math.min(a - 1, d + 2)], E = (N - h) / 6, X = (b - g) / 6, z = (B - w) / 6, F = (I - x) / 6, K = w + E, O = x + X, Y = N - z, _ = b - F;
+    i.push(`C ${K} ${O}, ${Y} ${_}, ${N} ${b}`);
   }
   return {
-    path: l.join(" "),
+    path: i.join(" "),
     endX: p[a - 1],
     endY: n[a - 1],
     startX: p[0]
   };
 }
-function le(t) {
+function ie(t) {
   const e = t.length;
   if (e < 6)
     return { stroke: "var(--warning-9)", fill: "var(--warning-4)" };
   const s = (t[0] + t[1] + t[2]) / 3, a = (t[e - 3] + t[e - 2] + t[e - 1]) / 3 - s;
   return a > 0.05 ? { stroke: "var(--success-9)", fill: "var(--success-4)" } : a < -0.05 ? { stroke: "var(--error-9)", fill: "var(--error-4)" } : { stroke: "var(--warning-9)", fill: "var(--warning-4)" };
 }
-function ie({ trend: t, id: e }) {
-  const { path: i, endX: c, endY: m, startX: f } = ce(
+function le({ trend: t, id: e }) {
+  const { path: l, endX: c, endY: m, startX: f } = ce(
     t,
     48,
     20,
     2
-  ), { stroke: p, fill: n } = le(t);
-  if (!i) return null;
-  const l = `sparkline-fill-${e}`;
+  ), { stroke: p, fill: n } = ie(t);
+  if (!l) return null;
+  const i = `sparkline-fill-${e}`;
   return /* @__PURE__ */ u(
     "svg",
     {
@@ -58,21 +58,21 @@ function ie({ trend: t, id: e }) {
       className: "sparkline",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ u("linearGradient", { id: l, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ u("linearGradient", { id: i, x1: "0", y1: "0", x2: "0", y2: "1", children: [
           /* @__PURE__ */ r("stop", { offset: "0%", stopColor: n, stopOpacity: 0.15 }),
           /* @__PURE__ */ r("stop", { offset: "100%", stopColor: n, stopOpacity: 0 })
         ] }) }),
         /* @__PURE__ */ r(
           "path",
           {
-            d: `${i} L ${c} 18 L ${f} 18 Z`,
-            fill: `url(#${l})`
+            d: `${l} L ${c} 18 L ${f} 18 Z`,
+            fill: `url(#${i})`
           }
         ),
         /* @__PURE__ */ r(
           "path",
           {
-            d: i,
+            d: l,
             fill: "none",
             stroke: p,
             strokeWidth: 1.5,
@@ -92,18 +92,18 @@ function de({
   return /* @__PURE__ */ r(
     "div",
     {
-      className: b(
-        "rounded-ds-md border border-surface-border bg-surface-2 p-ds-04",
+      className: k(
+        "rounded-ds-md border border-surface-border bg-surface-raised p-ds-04",
         t
       ),
       ...e,
       children: /* @__PURE__ */ u("div", { className: "flex flex-col gap-ds-03", children: [
         /* @__PURE__ */ u("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ r("div", { className: "h-5 w-32 animate-pulse rounded bg-surface-3" }),
-          /* @__PURE__ */ r("div", { className: "h-5 w-16 animate-pulse rounded bg-surface-3" })
+          /* @__PURE__ */ r("div", { className: "h-5 w-32 animate-pulse rounded bg-surface-raised-hover" }),
+          /* @__PURE__ */ r("div", { className: "h-5 w-16 animate-pulse rounded bg-surface-raised-hover" })
         ] }),
-        /* @__PURE__ */ r("div", { className: "h-2 w-full animate-pulse rounded bg-surface-3" }),
-        /* @__PURE__ */ r("div", { className: "h-4 w-48 animate-pulse rounded bg-surface-3" })
+        /* @__PURE__ */ r("div", { className: "h-2 w-full animate-pulse rounded bg-surface-raised-hover" }),
+        /* @__PURE__ */ r("div", { className: "h-4 w-48 animate-pulse rounded bg-surface-raised-hover" })
       ] })
     }
   );
@@ -123,17 +123,17 @@ function ue({
 function me(t) {
   return t > 75 ? "success" : t >= 25 ? "warning" : "error";
 }
-const fe = k.forwardRef(function({ project: e, onClick: s, loading: o, className: a, ...i }, c) {
+const fe = v.forwardRef(function({ project: e, onClick: s, loading: o, className: a, ...l }, c) {
   if (o)
-    return /* @__PURE__ */ r(de, { className: a, ...i });
-  const { id: m, name: f, completed: p, total: n, overdue: l, urgent: d, contextLine: h, trend: g } = e, w = n > 0 ? Math.round(p / n * 100) : 0, x = [];
+    return /* @__PURE__ */ r(de, { className: a, ...l });
+  const { id: m, name: f, completed: p, total: n, overdue: i, urgent: d, contextLine: h, trend: g } = e, w = n > 0 ? Math.round(p / n * 100) : 0, x = [];
   h && x.push(
     /* @__PURE__ */ r("span", { children: h }, "ctx")
-  ), l && l > 0 && (x.length > 0 && x.push(
+  ), i && i > 0 && (x.length > 0 && x.push(
     /* @__PURE__ */ r("span", { "aria-hidden": "true", children: " · " }, "sep")
   ), x.push(
     /* @__PURE__ */ u("span", { className: "text-error-11", children: [
-      l,
+      i,
       " overdue"
     ] }, "overdue")
   ));
@@ -142,8 +142,8 @@ const fe = k.forwardRef(function({ project: e, onClick: s, loading: o, className
     onClick: s,
     role: "button",
     tabIndex: 0,
-    onKeyDown: (v) => {
-      (v.key === "Enter" || v.key === " ") && (v.preventDefault(), s());
+    onKeyDown: (b) => {
+      (b.key === "Enter" || b.key === " ") && (b.preventDefault(), s());
     }
   } : {};
   return /* @__PURE__ */ r(
@@ -151,17 +151,17 @@ const fe = k.forwardRef(function({ project: e, onClick: s, loading: o, className
     {
       ref: c,
       "data-testid": "project-health-card",
-      className: b(
-        "rounded-ds-md border border-surface-border bg-surface-2 p-ds-04",
-        s && "cursor-pointer hover:bg-surface-3 transition-colors duration-150",
+      className: k(
+        "rounded-ds-md border border-surface-border bg-surface-raised p-ds-04",
+        s && "cursor-pointer hover:bg-surface-raised-hover transition-colors duration-150",
         a
       ),
       ...N,
-      ...M(i),
+      ...M(l),
       children: /* @__PURE__ */ u("div", { className: "flex flex-col gap-ds-03", children: [
         /* @__PURE__ */ u("div", { className: "flex items-center justify-between gap-ds-02", children: [
           /* @__PURE__ */ r("span", { className: "min-w-0 truncate text-ds-md font-semibold text-surface-fg", children: f }),
-          /* @__PURE__ */ r(ue, { urgent: d, overdue: l })
+          /* @__PURE__ */ r(ue, { urgent: d, overdue: i })
         ] }),
         /* @__PURE__ */ u("div", { className: "flex items-center gap-ds-03", children: [
           /* @__PURE__ */ u("div", { className: "flex-1 flex items-center gap-ds-03", children: [
@@ -173,7 +173,7 @@ const fe = k.forwardRef(function({ project: e, onClick: s, loading: o, className
               " tasks"
             ] })
           ] }),
-          g && g.length >= 2 && /* @__PURE__ */ r(ie, { trend: g, id: m })
+          g && g.length >= 2 && /* @__PURE__ */ r(le, { trend: g, id: m })
         ] }),
         x.length > 0 && /* @__PURE__ */ r("div", { className: "text-ds-xs text-surface-fg-subtle", children: x })
       ] })
@@ -189,7 +189,7 @@ function y() {
   return t;
 }
 function pe(t, e) {
-  const s = t.filter((a) => a.date < e).sort((a, i) => i.date.localeCompare(a.date));
+  const s = t.filter((a) => a.date < e).sort((a, l) => l.date.localeCompare(a.date));
   let o = 0;
   for (const a of s)
     if (a.total > 0 && a.completed === a.total)
@@ -205,8 +205,8 @@ function A({
   overdue: o,
   today: a
 }) {
-  const i = a ?? (/* @__PURE__ */ new Date()).toISOString().split("T")[0], c = U(() => {
-    const m = e.reduce((n, l) => n + l.completed, 0), f = e.reduce((n, l) => n + l.total, 0), p = pe(e, i);
+  const l = a ?? (/* @__PURE__ */ new Date()).toISOString().split("T")[0], c = U(() => {
+    const m = e.reduce((n, i) => n + i.completed, 0), f = e.reduce((n, i) => n + i.total, 0), p = pe(e, l);
     return {
       days: e,
       onDayClick: s,
@@ -214,14 +214,14 @@ function A({
       totalCompleted: m,
       totalTasks: f,
       streak: p,
-      today: i
+      today: l
     };
-  }, [e, s, o, i]);
+  }, [e, s, o, l]);
   return /* @__PURE__ */ r(j.Provider, { value: c, children: t });
 }
 A.displayName = "WeekHeatmapProvider";
-const H = k.forwardRef(
-  function({ days: e, onDayClick: s, overdue: o, today: a, className: i, children: c, ...m }, f) {
+const H = v.forwardRef(
+  function({ days: e, onDayClick: s, overdue: o, today: a, className: l, children: c, ...m }, f) {
     return /* @__PURE__ */ r(
       A,
       {
@@ -229,7 +229,7 @@ const H = k.forwardRef(
         onDayClick: s,
         overdue: o,
         today: a,
-        children: /* @__PURE__ */ r("div", { ref: f, className: b("flex flex-col gap-ds-04 rounded-ds-md border border-surface-border bg-surface-2 p-ds-04", i), ...m, children: c })
+        children: /* @__PURE__ */ r("div", { ref: f, className: k("flex flex-col gap-ds-04 rounded-ds-md border border-surface-border bg-surface-raised p-ds-04", l), ...m, children: c })
       }
     );
   }
@@ -247,19 +247,19 @@ function xe(t) {
     day: "numeric"
   });
 }
-function ke(t, e) {
+function ve(t, e) {
   return t.date === e ? "today" : t.total === 0 ? "empty" : t.date > e ? "future" : t.completed === t.total ? "complete" : t.completed > 0 ? "partial" : "none";
 }
-const be = {
+const ke = {
   complete: "bg-success-9 text-success-11",
   partial: "bg-warning-9 text-warning-11",
   none: "bg-error-9 text-error-11",
   today: "bg-info-9 ring-1 ring-info-7 text-info-11 font-medium",
-  future: "bg-surface-4 text-surface-fg-muted",
-  empty: "bg-surface-3 border border-dashed border-surface-border text-surface-fg-subtle"
-}, W = k.forwardRef(
-  function({ day: e, index: s, focusedIndex: o, onFocusChange: a }, i) {
-    const { onDayClick: c, today: m } = y(), f = ke(e, m), p = ge(e.date), n = f === "empty", l = /* @__PURE__ */ u("div", { className: "flex flex-col", children: [
+  future: "bg-surface-raised-active text-surface-fg-muted",
+  empty: "bg-surface-raised-hover border border-dashed border-surface-border text-surface-fg-subtle"
+}, W = v.forwardRef(
+  function({ day: e, index: s, focusedIndex: o, onFocusChange: a }, l) {
+    const { onDayClick: c, today: m } = y(), f = ve(e, m), p = ge(e.date), n = f === "empty", i = /* @__PURE__ */ u("div", { className: "flex flex-col", children: [
       /* @__PURE__ */ r("span", { children: xe(e.date) }),
       /* @__PURE__ */ r("span", { children: e.total > 0 ? `${e.completed} of ${e.total} completed` : "No tasks" })
     ] }), d = () => {
@@ -271,7 +271,7 @@ const be = {
       /* @__PURE__ */ r(se, { asChild: !0, children: /* @__PURE__ */ u(
         C.div,
         {
-          ref: i,
+          ref: l,
           role: "gridcell",
           tabIndex: o === s ? 0 : -1,
           "aria-disabled": n || void 0,
@@ -286,9 +286,9 @@ const be = {
             /* @__PURE__ */ r(
               "div",
               {
-                className: b(
-                  "flex h-8 w-10 items-center justify-center rounded-ds-md transition-colors duration-150",
-                  be[f]
+                className: k(
+                  "flex h-8 w-10 items-center justify-center rounded-ds-md transition-[background-color,box-shadow] duration-fast-01 ease-productive-standard hover:ring-1 hover:ring-accent-7",
+                  ke[f]
                 )
               }
             ),
@@ -300,34 +300,34 @@ const be = {
           ]
         }
       ) }),
-      /* @__PURE__ */ r(ne, { children: l })
+      /* @__PURE__ */ r(ne, { children: i })
     ] });
   }
 );
 W.displayName = "WeekHeatmapDay";
-const D = k.forwardRef(
+const D = v.forwardRef(
   function({ className: e, ...s }, o) {
-    const { days: a, today: i } = y(), [c, m] = J(0), f = Q([]), p = V(
+    const { days: a, today: l } = y(), [c, m] = J(0), f = Q([]), p = V(
       (n) => {
         var d;
-        let l = c;
+        let i = c;
         switch (n.key) {
           case "ArrowRight":
-            n.preventDefault(), l = Math.min(c + 1, a.length - 1);
+            n.preventDefault(), i = Math.min(c + 1, a.length - 1);
             break;
           case "ArrowLeft":
-            n.preventDefault(), l = Math.max(c - 1, 0);
+            n.preventDefault(), i = Math.max(c - 1, 0);
             break;
           case "Home":
-            n.preventDefault(), l = 0;
+            n.preventDefault(), i = 0;
             break;
           case "End":
-            n.preventDefault(), l = a.length - 1;
+            n.preventDefault(), i = a.length - 1;
             break;
           default:
             return;
         }
-        m(l), (d = f.current[l]) == null || d.focus();
+        m(i), (d = f.current[i]) == null || d.focus();
       },
       [c, a.length]
     );
@@ -338,18 +338,18 @@ const D = k.forwardRef(
         role: "grid",
         "aria-label": "Weekly task completion",
         delay: 0.05,
-        className: b("grid grid-cols-7 gap-ds-03", e),
+        className: k("grid grid-cols-7 gap-ds-03", e),
         onKeyDown: p,
         ...M(s),
-        children: /* @__PURE__ */ r("div", { role: "row", className: "contents", children: a.map((n, l) => {
-          const d = n.date === i, h = /* @__PURE__ */ r(
+        children: /* @__PURE__ */ r("div", { role: "row", className: "contents", children: a.map((n, i) => {
+          const d = n.date === l, h = /* @__PURE__ */ r(
             W,
             {
               ref: (g) => {
-                f.current[l] = g;
+                f.current[i] = g;
               },
               day: n,
-              index: l,
+              index: i,
               focusedIndex: c,
               onFocusChange: m
             }
@@ -361,14 +361,14 @@ const D = k.forwardRef(
   }
 );
 D.displayName = "WeekHeatmapDayStrip";
-const $ = k.forwardRef(
+const $ = v.forwardRef(
   function({ className: e, ...s }, o) {
-    const { totalCompleted: a, totalTasks: i, overdue: c } = y(), m = i - a;
+    const { totalCompleted: a, totalTasks: l, overdue: c } = y(), m = l - a;
     return /* @__PURE__ */ u(
       "div",
       {
         ref: o,
-        className: b("flex items-center gap-ds-03 text-ds-sm", e),
+        className: k("flex items-center gap-ds-03 text-ds-sm", e),
         ...s,
         children: [
           /* @__PURE__ */ u("span", { className: "text-success-11", children: [
@@ -393,21 +393,21 @@ const $ = k.forwardRef(
   }
 );
 $.displayName = "WeekHeatmapSummary";
-const P = k.forwardRef(
+const P = v.forwardRef(
   function({ className: e, ...s }, o) {
-    const { totalCompleted: a, totalTasks: i } = y(), c = i > 0 ? Math.round(a / i * 100) : 0;
-    return /* @__PURE__ */ r("div", { ref: o, className: b(e), ...s, children: /* @__PURE__ */ r(R, { color: "success", size: "sm", value: c, "aria-label": "Weekly completion progress" }) });
+    const { totalCompleted: a, totalTasks: l } = y(), c = l > 0 ? Math.round(a / l * 100) : 0;
+    return /* @__PURE__ */ r("div", { ref: o, className: k(e), ...s, children: /* @__PURE__ */ r(R, { color: "success", size: "sm", value: c, "aria-label": "Weekly completion progress" }) });
   }
 );
 P.displayName = "WeekHeatmapProgressBar";
-const T = k.forwardRef(
+const T = v.forwardRef(
   function({ className: e, ...s }, o) {
     const { streak: a } = y();
     return a <= 1 ? null : /* @__PURE__ */ u(
       "div",
       {
         ref: o,
-        className: b("text-ds-sm font-medium text-warning-11", e),
+        className: k("text-ds-sm font-medium text-warning-11", e),
         ...s,
         children: [
           "🔥 ",
@@ -419,7 +419,7 @@ const T = k.forwardRef(
   }
 );
 T.displayName = "WeekHeatmapStreak";
-const L = k.forwardRef(
+const L = v.forwardRef(
   function(e, s) {
     const { children: o, ...a } = e;
     return /* @__PURE__ */ u(H, { ref: s, ...a, children: [

package/dist/index.js

@@ -10,7 +10,7 @@ import { A as ma, D as ha, S as fa, a as ba } from "./_chunks/sidebar-scratchpad
 import { A as pa, C as ua, P as va } from "./_chunks/project-card.js";
 import { A as ka, a as Na, D as wa, b as ya, c as Aa, d as Ca, B as Ba, e as Da, f as Sa, g as Ta, h as Ea, i as ja, C as Ia, j as Pa, k as Ra, l as La, E as $a, m as _a, L as Ma, n as Oa, R as Ha, o as qa, p as Ka, q as Wa, r as Fa, s as Ua, t as za, u as Ga, v as Ja, w as Qa, x as Va, y as Xa, z as Ya, F as Za, G as ae, H as ee } from "./_chunks/render-adjustment-type.js";
 import { IconShieldCheck as g, IconUmbrella as m, IconCalendarCheck as h, IconClipboardList as p, IconUserPlus as u, IconSettings as v, IconLayoutDashboard as x, IconLayoutKanban as k, IconListCheck as N, IconBook as w, IconAdjustmentsHorizontal as y, IconUserCircle as A } from "@tabler/icons-react";
-const r = "bg-surface-3", C = o.forwardRef(
+const r = "bg-surface-raised-hover", C = o.forwardRef(
   function({ className: c, ...t }, i) {
     return /* @__PURE__ */ d("div", { ref: i, className: e("flex flex-col gap-ds-06", c), ...t, children: [
       /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-03", children: [
@@ -18,7 +18,7 @@ const r = "bg-surface-3", C = o.forwardRef(
         /* @__PURE__ */ a(s, { className: e("h-ds-04 w-56", r) })
       ] }),
       /* @__PURE__ */ d("div", { className: "grid grid-cols-1 gap-ds-05 lg:grid-cols-3", children: [
-        /* @__PURE__ */ a("div", { className: "lg:col-span-2", children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-06", children: [
+        /* @__PURE__ */ a("div", { className: "lg:col-span-2", children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-06", children: [
           /* @__PURE__ */ a(s, { className: e("h-5 w-40", r) }),
           /* @__PURE__ */ a("div", { className: "flex flex-col gap-ds-04", children: Array.from({ length: 4 }).map((n, l) => /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-04", children: [
             /* @__PURE__ */ a(s, { className: e("h-ico-sm w-ico-sm rounded", r) }),
@@ -26,7 +26,7 @@ const r = "bg-surface-3", C = o.forwardRef(
             /* @__PURE__ */ a(s, { className: e("h-5 w-16 rounded-ds-full", r) })
           ] }, `ds-main-${l}`)) })
         ] }) }),
-        /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-06", children: [
+        /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-06", children: [
           /* @__PURE__ */ a(s, { className: e("h-5 w-28", r) }),
           /* @__PURE__ */ a("div", { className: "flex flex-col gap-ds-04", children: Array.from({ length: 3 }).map((n, l) => /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-04", children: [
             /* @__PURE__ */ a(s, { className: e("h-ds-sm w-ds-sm rounded-ds-full", r) }),
@@ -36,7 +36,7 @@ const r = "bg-surface-3", C = o.forwardRef(
             ] })
           ] }, `ds-side-${l}`)) })
         ] }),
-        /* @__PURE__ */ a("div", { className: "lg:col-span-3", children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-06", children: [
+        /* @__PURE__ */ a("div", { className: "lg:col-span-3", children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-06", children: [
           /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ a(s, { className: e("h-5 w-36", r) }),
             /* @__PURE__ */ a(s, { className: e("h-ds-sm w-24 rounded-ds-lg", r) })
@@ -54,14 +54,14 @@ const r = "bg-surface-3", C = o.forwardRef(
             `ds-card-${l}`
           )) })
         ] }) }),
-        /* @__PURE__ */ a("div", { className: "lg:col-span-2", children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-06", children: [
+        /* @__PURE__ */ a("div", { className: "lg:col-span-2", children: /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-06", children: [
           /* @__PURE__ */ a(s, { className: e("h-5 w-24", r) }),
           /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-ds-05 sm:grid-cols-4", children: Array.from({ length: 4 }).map((n, l) => /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-03", children: [
             /* @__PURE__ */ a(s, { className: e("h-3 w-16", r) }),
             /* @__PURE__ */ a(s, { className: e("h-6 w-ds-lg", r) })
           ] }, `ds-stat-${l}`)) })
         ] }) }),
-        /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-06", children: [
+        /* @__PURE__ */ d("div", { className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-06", children: [
           /* @__PURE__ */ a(s, { className: e("h-5 w-20", r) }),
           /* @__PURE__ */ a("div", { className: "flex flex-col gap-ds-05", children: Array.from({ length: 3 }).map((n, l) => /* @__PURE__ */ d("div", { className: "flex gap-ds-04", children: [
             /* @__PURE__ */ a(s, { className: e("h-3 w-3 shrink-0 rounded-ds-full", r) }),
@@ -82,7 +82,7 @@ const B = o.forwardRef(
       /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-3", children: Array.from({ length: 3 }).map((n, l) => /* @__PURE__ */ d(
         "div",
         {
-          className: "flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-05b",
+          className: "flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b",
           children: [
             /* @__PURE__ */ a(s, { className: e("h-3 w-24", r) }),
             /* @__PURE__ */ a(s, { className: e("h-ds-xs-plus w-16", r) }),
@@ -92,7 +92,7 @@ const B = o.forwardRef(
         `bw-card-${l}`
       )) }),
       /* @__PURE__ */ d("div", { className: "overflow-hidden rounded-ds-xl border border-surface-border-strong", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-2 px-ds-05b py-ds-04", children: Array.from({ length: 5 }).map((n, l) => /* @__PURE__ */ a(
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-raised px-ds-05b py-ds-04", children: Array.from({ length: 5 }).map((n, l) => /* @__PURE__ */ a(
           s,
           {
             className: e(