impact-nova 1.5.14 → 1.6.0

package/dist/components/ui/nested-list/components/SortableItem.js

@@ -1,45 +1,45 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
 import z, { useMemo as L } from "react";
 import { useSortable as O, defaultAnimateLayoutChanges as P } from "@dnd-kit/sortable";
 import { useDroppable as $ } from "@dnd-kit/core";
 import { CSS as j } from "@dnd-kit/utilities";
 import { Checkbox as E } from "../../checkbox.js";
 import { ChevronRight as H, Drag as F } from "../../../../icons/index.js";
-import { cn as d } from "../../../../lib/utils.js";
+import { cn as s } from "../../../../lib/utils.js";
 import { useImpactNovaI18n as M } from "../../../../i18n/ImpactNovaI18nContext.js";
-const _ = (e, o, r, l, a) => {
-  const s = "flex items-center gap-1 py-[3px] px-2 rounded transition-all duration-200";
-  return e ? d(s, "bg-transparent") : a ? d(s, "bg-red-100 border border-red-300 animate-pulse") : o && r ? l ? d(s, "bg-blue-50 border-2 border-blue-300 shadow-sm") : d(s, "bg-red-50 border-2 border-red-300 shadow-sm") : d(s, "hover:bg-gray-50");
+const _ = (e, o, t, c, a) => {
+  const n = "flex items-center gap-1 py-[3px] px-2 rounded transition-all duration-200";
+  return e ? s(n, "bg-transparent") : a ? s(n, "bg-feedback-error-surface border border-destructive animate-pulse") : o && t ? c ? s(n, "bg-canvas-tint border-2 border-brand shadow-sm") : s(n, "bg-feedback-error-surface border-2 border-destructive shadow-sm") : s(n, "hover:bg-canvas-muted");
 }, T = (e) => P({ ...e, wasDragging: !0 }), q = ({ item: e, isAnyDragging: o }) => {
-  const r = !e.children || e.children.length === 0, {
-    setNodeRef: l,
+  const t = !e.children || e.children.length === 0, {
+    setNodeRef: c,
     isOver: a
   } = $({
     id: `droppable-${e.id}`,
     data: { sectionId: e.id },
-    disabled: !r
+    disabled: !t
   });
-  return /* @__PURE__ */ p("div", { ref: r ? l : void 0, children: [
+  return /* @__PURE__ */ p("div", { ref: t ? c : void 0, children: [
     /* @__PURE__ */ p(
       "div",
       {
-        className: d(
-          "flex items-center px-2 py-0 text-xs font-[500] leading-4 text-[#7a8294] select-none",
-          e.id === "root-scrollable" ? "mt-2 pt-2 pb-1 border-t border-solid border-gray-100" : "mt-1 pb-1",
-          a && o && r && "bg-blue-50 rounded"
+        className: s(
+          "flex items-center px-2 py-0 text-xs font-[500] leading-4 text-navigation-muted select-none",
+          e.id === "root-scrollable" ? "mt-2 pt-2 pb-1 border-t border-solid border-stroke-subtle" : "mt-1 pb-1",
+          a && o && t && "bg-canvas-tint rounded"
         ),
         children: [
           e.label,
-          a && o && r && /* @__PURE__ */ t("span", { className: "ml-2 text-blue-400 text-[11px]", children: "Drop here" })
+          a && o && t && /* @__PURE__ */ r("span", { className: "ml-2 text-brand text-[11px]", children: "Drop here" })
         ]
       }
     ),
-    r && /* @__PURE__ */ t(
+    t && /* @__PURE__ */ r(
       "div",
       {
-        className: d(
+        className: s(
           "mx-2 my-1 rounded border-2 border-dashed min-h-[36px] flex items-center justify-center text-[11px] transition-colors",
-          a && o ? "border-blue-400 bg-blue-50 text-blue-400" : "border-gray-200 text-gray-300"
+          a && o ? "border-brand bg-canvas-tint text-brand" : "border-stroke-hairline text-content-empty"
         ),
         children: a && o ? "Release to drop" : "Drag here"
       }
@@ -48,120 +48,120 @@ const _ = (e, o, r, l, a) => {
 }, B = ({
   item: e,
   level: o,
-  isCollapsed: r,
-  onToggle: l,
+  isCollapsed: t,
+  onToggle: c,
   onToggleCollapse: a,
-  isAnyDragging: s = !1,
+  isAnyDragging: n = !1,
   isOver: h = !1,
   isValidDrop: x = !1,
-  enableDragDrop: g = !0,
+  enableDragDrop: v = !0,
   enableCollapse: u = !0,
-  shouldBlink: v = !1
+  shouldBlink: g = !1
 }) => {
-  const { t: m } = M(), f = e.category === "structure", c = e.children && e.children.length > 0, y = L(() => !e.children || e.children.length === 0 || e.children.every((b) => b.checked) ? !1 : e.children.some((b) => b.checked), [e.children]), {
-    attributes: C,
-    listeners: k,
-    setNodeRef: N,
+  const { t: m } = M(), f = e.category === "structure", i = e.children && e.children.length > 0, k = L(() => !e.children || e.children.length === 0 || e.children.every((b) => b.checked) ? !1 : e.children.some((b) => b.checked), [e.children]), {
+    attributes: N,
+    listeners: C,
+    setNodeRef: y,
     transform: I,
     transition: S,
-    isDragging: i,
+    isDragging: l,
     isOver: w
   } = O({
     id: e.id,
     animateLayoutChanges: T,
     data: {
       level: o,
-      hasChildren: c,
-      isExpanded: !r
+      hasChildren: i,
+      isExpanded: !t
     },
     disabled: f || e.disabled
   });
   if (f)
-    return /* @__PURE__ */ t(q, { item: e, isAnyDragging: s });
+    return /* @__PURE__ */ r(q, { item: e, isAnyDragging: n });
   const R = h !== void 0 ? h : w, D = {
     transform: j.Transform.toString(I),
     transition: S,
-    opacity: i ? 0.5 : 1,
-    zIndex: i ? 100 : "auto",
+    opacity: l ? 0.5 : 1,
+    zIndex: l ? 100 : "auto",
     height: "auto"
   };
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ r(
     "div",
     {
-      ref: N,
+      ref: y,
       style: D,
       className: "relative",
       "data-item-id": e.id,
       "data-level": o,
       "data-checked": e.checked,
       "data-disabled": e.disabled,
-      "data-collapsed": r,
+      "data-collapsed": t,
       children: /* @__PURE__ */ p(
         "div",
         {
           className: _(
-            i,
+            l,
             R,
-            s,
+            n,
             x,
-            v
+            g
           ),
           style: {
             paddingLeft: `${8 + o * 20}px`
           },
           children: [
-            u && c && /* @__PURE__ */ t(
+            u && i && /* @__PURE__ */ r(
               "button",
               {
                 type: "button",
-                onClick: (n) => {
-                  n.stopPropagation(), a(e.id);
+                onClick: (d) => {
+                  d.stopPropagation(), a(e.id);
                 },
-                onMouseDown: (n) => n.stopPropagation(),
-                className: "p-1 hover:bg-gray-200 rounded-full transition-colors flex items-center text-[#8C8C8C] hover:text-primary",
-                "aria-label": m(r ? "nestedList.expand" : "nestedList.collapse"),
-                children: /* @__PURE__ */ t(
+                onMouseDown: (d) => d.stopPropagation(),
+                className: "p-1 hover:bg-muted rounded-full transition-colors flex items-center text-content-icon hover:text-brand",
+                "aria-label": m(t ? "nestedList.expand" : "nestedList.collapse"),
+                children: /* @__PURE__ */ r(
                   H,
                   {
                     size: "16px",
-                    className: d("transition-transform", !r && "rotate-90")
+                    className: s("transition-transform", !t && "rotate-90")
                   }
                 )
               }
             ),
-            (!u || !c) && /* @__PURE__ */ t("div", { className: "w-4" }),
-            /* @__PURE__ */ t(
+            (!u || !i) && /* @__PURE__ */ r("div", { className: "w-4" }),
+            /* @__PURE__ */ r(
               E,
               {
                 id: `checkbox-${e.id}`,
-                checked: y ? "indeterminate" : e.checked,
-                onCheckedChange: () => l(e.id),
+                checked: k ? "indeterminate" : e.checked,
+                onCheckedChange: () => c(e.id),
                 disabled: e.disabled
               }
             ),
-            g && /* @__PURE__ */ t(
+            v && /* @__PURE__ */ r(
               "div",
               {
+                ...N,
                 ...C,
-                ...k,
-                className: "cursor-grab active:cursor-grabbing p-0 hover:bg-gray-200 rounded flex items-center",
+                className: "cursor-grab active:cursor-grabbing p-0 hover:bg-muted rounded flex items-center",
                 style: {
                   pointerEvents: "auto",
                   position: "relative",
                   zIndex: 30,
                   touchAction: "none"
                 },
-                onPointerDown: (n) => {
-                  n.stopPropagation();
+                onPointerDown: (d) => {
+                  d.stopPropagation();
                 },
-                children: /* @__PURE__ */ t(F, { size: "14px", color: "#8C8C8C" })
+                children: /* @__PURE__ */ r(F, { size: "14px", className: "text-content-icon" })
               }
             ),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ r(
               "label",
               {
                 htmlFor: `checkbox-${e.id}`,
-                className: "flex-1 text-[13px] text-gray-900 capitalize ml-1 cursor-pointer select-none",
+                className: "flex-1 text-[13px] text-content capitalize ml-1 cursor-pointer select-none",
                 children: e.label
               }
             )

package/dist/components/ui/notification-panel/notification-item.js

@@ -1,88 +1,88 @@
-import { jsxs as f, jsx as n, Fragment as d } from "react/jsx-runtime";
-import m from "react";
+import { jsxs as p, jsx as i, Fragment as m } from "react/jsx-runtime";
+import f from "react";
 import { cn as a } from "../../../lib/utils.js";
 import { Checkbox as u } from "../checkbox.js";
 const y = ({
-  children: e,
+  children: n,
   className: t,
   read: o,
-  selected: i,
+  selected: e,
   onSelect: c,
   selectable: r,
   ...s
-}) => /* @__PURE__ */ f(
+}) => /* @__PURE__ */ p(
   "div",
   {
     "data-component": "notification-item",
     "data-read": o ? "true" : "false",
     className: a(
       "group relative flex w-full gap-2 p-3 items-start rounded-xl transition-all border-l-[3px] border-transparent",
-      "bg-[#f8f9fb]",
-      !o && "border-[#4259ee]",
-      i && "bg-[#eceefd]",
+      "bg-secondary",
+      !o && "border-brand",
+      e && "bg-brand-tint",
       t
     ),
     ...s,
     children: [
-      r && /* @__PURE__ */ n("div", { className: a(
+      r && /* @__PURE__ */ i("div", { className: a(
         "absolute left-3 top-3 z-10 flex h-[30px] w-[30px] items-center justify-center transition-all duration-200",
-        i ? "opacity-100 scale-100" : "opacity-0 scale-90 group-hover:opacity-100 group-hover:scale-100"
-      ), children: /* @__PURE__ */ n(
+        e ? "opacity-100 scale-100" : "opacity-0 scale-90 group-hover:opacity-100 group-hover:scale-100"
+      ), children: /* @__PURE__ */ i(
         u,
         {
-          checked: i,
+          checked: e,
           onCheckedChange: c,
           className: "translate-y-0"
         }
       ) }),
-      /* @__PURE__ */ n("div", { className: a(
+      /* @__PURE__ */ i("div", { className: a(
         "flex flex-1 min-w-0 gap-3",
         r && "[&_[data-role=notification-icon]]:transition-opacity [&_[data-role=notification-icon]]:duration-200",
         r && "group-hover:[&_[data-role=notification-icon]]:opacity-0",
-        r && i && "[&_[data-role=notification-icon]]:opacity-0"
-      ), children: e })
+        r && e && "[&_[data-role=notification-icon]]:opacity-0"
+      ), children: n })
     ]
   }
-), v = ({ className: e, children: t, ...o }) => /* @__PURE__ */ n("div", { "data-role": "notification-icon", className: a("flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full transition-opacity duration-200", e), ...o, children: t }), b = ({ className: e, children: t, ...o }) => /* @__PURE__ */ n("div", { className: a("flex flex-col flex-1 min-w-0 gap-1", e), ...o, children: t }), k = ({ className: e, children: t, ml: o, ...i }) => /* @__PURE__ */ n("h4", { className: a("text-sm font-bold text-[#0d152c] leading-snug break-words", o && "ml-2", e), ...i, children: t }), w = ({ className: e, children: t, isTime: o, ...i }) => {
-  const [c, r] = m.useState(!1), s = typeof t == "string" ? t : "", l = !o && s.length > 150;
-  return o ? /* @__PURE__ */ n("p", { className: a("text-xs text-[#5f6673] mt-0.5", e), ...i, children: t }) : /* @__PURE__ */ n("div", { className: a("text-sm font-medium text-[#394960] break-words leading-5", e), children: /* @__PURE__ */ f("p", { ...i, children: [
+), b = ({ className: n, children: t, ...o }) => /* @__PURE__ */ i("div", { "data-role": "notification-icon", className: a("flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full transition-opacity duration-200", n), ...o, children: t }), v = ({ className: n, children: t, ...o }) => /* @__PURE__ */ i("div", { className: a("flex flex-col flex-1 min-w-0 gap-1", n), ...o, children: t }), k = ({ className: n, children: t, ml: o, ...e }) => /* @__PURE__ */ i("h4", { className: a("text-sm font-bold text-content leading-snug break-words", o && "ml-2", n), ...e, children: t }), w = ({ className: n, children: t, isTime: o, ...e }) => {
+  const [c, r] = f.useState(!1), s = typeof t == "string" ? t : "", l = !o && s.length > 150;
+  return o ? /* @__PURE__ */ i("p", { className: a("text-xs text-content-badge mt-0.5", n), ...e, children: t }) : /* @__PURE__ */ i("div", { className: a("text-sm font-medium text-content break-words leading-5", n), children: /* @__PURE__ */ p("p", { ...e, children: [
     l && !c ? `${s.slice(0, 150)}` : t,
-    l && !c && /* @__PURE__ */ f(d, { children: [
+    l && !c && /* @__PURE__ */ p(m, { children: [
       "... ",
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ i(
         "span",
         {
           role: "button",
-          onClick: (p) => {
-            p.stopPropagation(), r(!0);
+          onClick: (d) => {
+            d.stopPropagation(), r(!0);
           },
-          className: "text-[#4259ee] hover:underline cursor-pointer ml-1",
+          className: "text-brand hover:underline cursor-pointer ml-1",
           children: "Read More"
         }
       )
     ] }),
-    l && c && /* @__PURE__ */ n(
+    l && c && /* @__PURE__ */ i(
       "span",
       {
         role: "button",
-        onClick: (p) => {
-          p.stopPropagation(), r(!1);
+        onClick: (d) => {
+          d.stopPropagation(), r(!1);
         },
-        className: "text-[#4259ee] hover:underline cursor-pointer ml-1",
+        className: "text-brand hover:underline cursor-pointer ml-1",
         children: "Show Less"
       }
     )
   ] }) });
-}, I = ({ className: e, children: t, alwaysVisible: o = !0, ...i }) => /* @__PURE__ */ n("div", { className: a(
+}, I = ({ className: n, children: t, alwaysVisible: o = !0, ...e }) => /* @__PURE__ */ i("div", { className: a(
   "flex items-center gap-1 shrink-0 ml-2 self-start transition-opacity focus-within:opacity-100",
   !o && "opacity-0 group-hover:opacity-100",
-  e
-), ...i, children: t });
+  n
+), ...e, children: t });
 export {
   y as NotificationItem,
   I as NotificationItemActions,
-  b as NotificationItemContent,
+  v as NotificationItemContent,
   w as NotificationItemDescription,
-  v as NotificationItemIcon,
+  b as NotificationItemIcon,
   k as NotificationItemTitle
 };

package/dist/components/ui/notification-panel/notification-list.js

@@ -1,41 +1,41 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import d, { useRef as p, useEffect as x } from "react";
-import { cn as n } from "../../../lib/utils.js";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import p, { useRef as d, useEffect as x } from "react";
+import { cn as i } from "../../../lib/utils.js";
 import { Loader2 as h } from "lucide-react";
-import { MulticolorBell as b } from "../../../icons/index.js";
-const E = ({ className: t, ...r }) => /* @__PURE__ */ i("div", { className: n("flex flex-col gap-4 items-center justify-center h-full text-center p-8", t), ...r, children: [
-  /* @__PURE__ */ e(b, { size: 72 }),
-  /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ e("h3", { className: "text-xl font-bold text-[#0d152c]", children: "Everything looks quiet for now" }),
-    /* @__PURE__ */ e("p", { className: "text-sm  text-[#7a8294]", children: "We'll notify you when something new comes up" })
+import { MulticolorBell as v } from "../../../icons/index.js";
+const E = ({ className: t, ...r }) => /* @__PURE__ */ c("div", { className: i("flex flex-col gap-4 items-center justify-center h-full text-center p-8", t), ...r, children: [
+  /* @__PURE__ */ e(v, { size: 72 }),
+  /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ e("h3", { className: "text-xl font-bold text-content", children: "Everything looks quiet for now" }),
+    /* @__PURE__ */ e("p", { className: "text-sm  text-navigation-muted", children: "We'll notify you when something new comes up" })
   ] })
 ] }), j = ({
   children: t,
   className: r,
-  onLoadMore: o,
-  isLoading: c,
+  onLoadMore: l,
+  isLoading: o,
   hasMore: s,
-  loader: u,
-  emptyState: f
+  loader: m,
+  emptyState: a
 }) => {
-  const l = p(null);
+  const n = d(null);
   return x(() => {
-    const a = new IntersectionObserver(
-      (m) => {
-        m[0].isIntersecting && s && !c && o && o();
+    const f = new IntersectionObserver(
+      (u) => {
+        u[0].isIntersecting && s && !o && l && l();
       },
       { threshold: 0.1 }
     );
-    return l.current && a.observe(l.current), () => {
-      l.current && a.unobserve(l.current);
+    return n.current && f.observe(n.current), () => {
+      n.current && f.unobserve(n.current);
     };
-  }, [s, c, o]), d.Children.count(t) === 0 && !c && f ? /* @__PURE__ */ e("div", { className: "h-full w-full", children: f }) : /* @__PURE__ */ i("div", { className: n("flex flex-1 flex-col overflow-y-auto min-h-0", r), children: [
+  }, [s, o, l]), p.Children.count(t) === 0 && !o && a ? /* @__PURE__ */ e("div", { className: "h-full w-full", children: a }) : /* @__PURE__ */ c("div", { className: i("flex flex-1 flex-col overflow-y-auto min-h-0", r), children: [
     /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 p-2", children: t }),
-    /* @__PURE__ */ e("div", { ref: l, className: "h-4 w-full flex-shrink-0" }),
-    c && /* @__PURE__ */ e("div", { className: "flex justify-center p-4", children: u || /* @__PURE__ */ e(h, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })
+    /* @__PURE__ */ e("div", { ref: n, className: "h-4 w-full flex-shrink-0" }),
+    o && /* @__PURE__ */ e("div", { className: "flex justify-center p-4", children: m || /* @__PURE__ */ e(h, { className: "h-6 w-6 animate-spin text-content-muted" }) })
   ] });
-}, z = ({ label: t, children: r, className: o }) => /* @__PURE__ */ i("div", { "data-component": "notification-group", className: n("flex flex-col", o), children: [
-  /* @__PURE__ */ e("div", { "data-component": "notification-group-label", className: "sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 py-2 text-sm font-medium text-muted-foreground border-b border-border/50", children: t }),
+}, z = ({ label: t, children: r, className: l }) => /* @__PURE__ */ c("div", { "data-component": "notification-group", className: i("flex flex-col", l), children: [
+  /* @__PURE__ */ e("div", { "data-component": "notification-group-label", className: "sticky top-0 z-10 bg-canvas/95 backdrop-blur supports-[backdrop-filter]:bg-canvas/60 px-4 py-2 text-sm font-medium text-content-muted border-b border-stroke/50", children: t }),
   /* @__PURE__ */ e("div", { className: "flex flex-col gap-2 p-2", children: r })
 ] });
 export {

package/dist/components/ui/notification-panel/notification-panel.js

@@ -1,65 +1,65 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { useContext as m, createContext as h } from "react";
-import { Sheet as p, SheetContent as x, SheetDescription as u, SheetTitle as N, SheetClose as w } from "../sheet.js";
+import { useContext as m, createContext as p } from "react";
+import { Sheet as h, SheetContent as x, SheetDescription as u, SheetTitle as v, SheetClose as N } from "../sheet.js";
 import { Button as b } from "../button.js";
-import { Bell as v, X as g } from "lucide-react";
-import { cn as r } from "../../../lib/utils.js";
+import { Bell as w, X as g } from "lucide-react";
+import { cn as c } from "../../../lib/utils.js";
 import { useImpactNovaI18n as s } from "../../../i18n/ImpactNovaI18nContext.js";
-const d = h(null), B = () => {
+const d = p(null), I = () => {
   const t = m(d);
   if (!t)
     throw new Error("useNotificationContext must be used within a NotificationPanel");
   return t;
-}, I = ({
+}, k = ({
   open: t,
   onOpenChange: n,
-  children: o,
+  children: i,
   className: l,
-  preventClose: i = !1
+  preventClose: o = !1
 }) => {
   const { t: f } = s();
   return /* @__PURE__ */ e(d.Provider, { value: { setPreventClose: () => {
-  } }, children: /* @__PURE__ */ e(p, { open: t, onOpenChange: n, children: /* @__PURE__ */ a(
+  } }, children: /* @__PURE__ */ e(h, { open: t, onOpenChange: n, children: /* @__PURE__ */ a(
     x,
     {
       side: "right",
-      className: r(
-        "w-full !max-w-[640px] p-0 sm:!max-w-[640px] gap-0 border-l shadow-xl transition-all duration-300 ease-in-out bg-white",
+      className: c(
+        "w-full !max-w-[640px] p-0 sm:!max-w-[640px] gap-0 border-l shadow-xl transition-all duration-300 ease-in-out bg-canvas-elevated",
         l
       ),
-      onInteractOutside: (c) => {
-        i && c.preventDefault();
+      onInteractOutside: (r) => {
+        o && r.preventDefault();
       },
-      onEscapeKeyDown: (c) => {
-        i && c.preventDefault();
+      onEscapeKeyDown: (r) => {
+        o && r.preventDefault();
       },
       children: [
         /* @__PURE__ */ e(u, { className: "sr-only", children: f("notificationPanel.description") }),
-        o
+        i
       ]
     }
   ) }) });
-}, E = ({ children: t, className: n }) => /* @__PURE__ */ e("div", { "data-component": "notification-panel-content", className: r("flex h-full flex-col bg-white", n), children: t }), T = ({ title: t, children: n, className: o }) => {
-  const { t: l } = s(), i = t ?? l("notificationPanel.title");
-  return /* @__PURE__ */ a("div", { "data-component": "notification-panel-header", className: r("flex shrink-0 items-center justify-between border-b px-4 py-3 bg-white", o), children: [
+}, E = ({ children: t, className: n }) => /* @__PURE__ */ e("div", { "data-component": "notification-panel-content", className: c("flex h-full flex-col bg-canvas-elevated", n), children: t }), T = ({ title: t, children: n, className: i }) => {
+  const { t: l } = s(), o = t ?? l("notificationPanel.title");
+  return /* @__PURE__ */ a("div", { "data-component": "notification-panel-header", className: c("flex shrink-0 items-center justify-between border-b px-4 py-3 bg-canvas-elevated", i), children: [
     /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ e("div", { className: "flex h-6 w-6 items-center justify-center", children: /* @__PURE__ */ e(v, { className: "h-5 w-5 text-gray-500" }) }),
-      typeof i == "string" ? /* @__PURE__ */ e(N, { className: "text-lg font-bold text-[#1f2b4d]", children: i }) : i
+      /* @__PURE__ */ e("div", { className: "flex h-6 w-6 items-center justify-center", children: /* @__PURE__ */ e(w, { className: "h-5 w-5 text-content-muted" }) }),
+      typeof o == "string" ? /* @__PURE__ */ e(v, { className: "text-lg font-bold text-content", children: o }) : o
     ] }),
     /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
       n,
-      /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(b, { variant: "secondary", size: "icon", "aria-label": l("aria.close"), "data-component": "notification-panel-close", children: /* @__PURE__ */ e(g, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ e(N, { asChild: !0, children: /* @__PURE__ */ e(b, { variant: "secondary", size: "icon", "aria-label": l("aria.close"), "data-component": "notification-panel-close", children: /* @__PURE__ */ e(g, { className: "h-4 w-4" }) }) })
     ] })
   ] });
-}, z = ({ children: t, className: n }) => /* @__PURE__ */ e("div", { "data-component": "notification-panel-body", className: r("flex flex-1 flex-col overflow-hidden bg-background", n), children: t }), F = ({ children: t, className: n, leftAction: o }) => /* @__PURE__ */ a("div", { "data-component": "notification-panel-footer", className: r("flex items-center justify-between border-t p-4 bg-white shrink-0 mt-auto shadow-md", n), children: [
-  /* @__PURE__ */ e("div", { children: o }),
+}, z = ({ children: t, className: n }) => /* @__PURE__ */ e("div", { "data-component": "notification-panel-body", className: c("flex flex-1 flex-col overflow-hidden bg-canvas", n), children: t }), F = ({ children: t, className: n, leftAction: i }) => /* @__PURE__ */ a("div", { "data-component": "notification-panel-footer", className: c("flex items-center justify-between border-t p-4 bg-canvas-elevated shrink-0 mt-auto shadow-md", n), children: [
+  /* @__PURE__ */ e("div", { children: i }),
   /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: t })
 ] });
 export {
-  I as NotificationPanel,
+  k as NotificationPanel,
   z as NotificationPanelBody,
   E as NotificationPanelContent,
   F as NotificationPanelFooter,
   T as NotificationPanelHeader,
-  B as useNotificationContext
+  I as useNotificationContext
 };

package/dist/components/ui/popover.js

@@ -2,9 +2,9 @@ import { jsx as t, jsxs as d } from "react/jsx-runtime";
 import * as l from "react";
 import * as a from "@radix-ui/react-popover";
 import { X as p } from "lucide-react";
-import { Tooltip as m, TooltipTrigger as c, TooltipContent as f } from "./tooltip.js";
+import { Tooltip as c, TooltipTrigger as m, TooltipContent as v } from "./tooltip.js";
 import { cn as r } from "../../lib/utils.js";
-import { useImpactNovaI18n as v } from "../../i18n/ImpactNovaI18nContext.js";
+import { useImpactNovaI18n as f } from "../../i18n/ImpactNovaI18nContext.js";
 const j = a.Root, R = a.Trigger, z = a.Anchor, h = l.forwardRef(({ className: e, align: o = "center", sideOffset: i = 4, ...s }, n) => /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ t(
   a.Content,
   {
@@ -13,14 +13,14 @@ const j = a.Root, R = a.Trigger, z = a.Anchor, h = l.forwardRef(({ className: e,
     sideOffset: i,
     "data-component": "popover-content",
     className: r(
-      "z-50 min-w-[240px] rounded-xl border bg-popover p-3 text-popover-foreground shadow-md outline-none overflow-hidden 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin] pointer-events-auto",
+      "z-50 min-w-[240px] rounded-xl border bg-canvas-overlay p-3 text-canvas-overlay-foreground shadow-md outline-none overflow-hidden 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin] pointer-events-auto",
       e
     ),
     ...s
   }
 ) }));
 h.displayName = a.Content.displayName;
-const N = ({
+const y = ({
   className: e,
   ...o
 }) => /* @__PURE__ */ t(
@@ -30,8 +30,8 @@ const N = ({
     ...o
   }
 );
-N.displayName = "PopoverHeader";
-const g = ({
+y.displayName = "PopoverHeader";
+const N = ({
   className: e,
   ...o
 }) => /* @__PURE__ */ t(
@@ -39,17 +39,17 @@ const g = ({
   {
     "data-component": "popover-title",
     className: r(
-      "text-[16px] font-extrabold leading-none text-[#1f2b4d]",
+      "text-[16px] font-extrabold leading-none text-content",
       e
     ),
     ...o
   }
 );
-g.displayName = "PopoverTitle";
-const x = l.forwardRef(({ className: e, ...o }, i) => {
-  const { t: s } = v(), n = s("aria.close");
-  return /* @__PURE__ */ d(m, { children: [
-    /* @__PURE__ */ t(c, { asChild: !0, children: /* @__PURE__ */ d(
+N.displayName = "PopoverTitle";
+const g = l.forwardRef(({ className: e, ...o }, i) => {
+  const { t: s } = f(), n = s("aria.close");
+  return /* @__PURE__ */ d(c, { children: [
+    /* @__PURE__ */ t(m, { asChild: !0, children: /* @__PURE__ */ d(
       a.Close,
       {
         ref: i,
@@ -61,36 +61,36 @@ const x = l.forwardRef(({ className: e, ...o }, i) => {
         "aria-label": n,
         ...o,
         children: [
-          /* @__PURE__ */ t(p, { className: "h-4 w-4 text-[#60697d]" }),
+          /* @__PURE__ */ t(p, { className: "h-4 w-4 text-content-tertiary" }),
           /* @__PURE__ */ t("span", { className: "sr-only", children: n })
         ]
       }
     ) }),
-    /* @__PURE__ */ t(f, { variant: "tertiary", side: "top", children: n })
+    /* @__PURE__ */ t(v, { variant: "tertiary", side: "top", children: n })
   ] });
 });
-x.displayName = a.Close.displayName;
-const y = ({
+g.displayName = a.Close.displayName;
+const x = ({
   className: e,
   ...o
 }) => /* @__PURE__ */ t("div", { className: r("text-sm", e), ...o });
-y.displayName = "PopoverBody";
+x.displayName = "PopoverBody";
 const u = ({
   className: e,
   ...o
 }) => /* @__PURE__ */ d("div", { className: r("mt-4 flex flex-col gap-3", e), ...o, children: [
-  /* @__PURE__ */ t("div", { className: "h-[1px] w-full bg-[#f0f2f5]" }),
+  /* @__PURE__ */ t("div", { className: "h-[1px] w-full bg-stroke-hairline" }),
   /* @__PURE__ */ t("div", { className: "flex justify-end gap-2", children: o.children })
 ] });
 u.displayName = "PopoverFooter";
 export {
   j as Popover,
   z as PopoverAnchor,
-  y as PopoverBody,
-  x as PopoverClose,
+  x as PopoverBody,
+  g as PopoverClose,
   h as PopoverContent,
   u as PopoverFooter,
-  N as PopoverHeader,
-  g as PopoverTitle,
+  y as PopoverHeader,
+  N as PopoverTitle,
   R as PopoverTrigger
 };