impact-nova 1.5.14 → 1.6.0

package/dist/components/ui/ag-grid-react/cell-renderers/input-display-renderer.js

@@ -1,9 +1,9 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { applyValueFormatter as F } from "./cell-renderer-utils.js";
 const w = (h) => {
-  const { valueFormatted: l, value: e, placeholder: g, disabled: n, colDef: s, className: y, data: t, valueFormatter: v } = h, c = e && typeof e == "object" && "cellMetadata" in e ? e.cellMetadata?._isDisabled : void 0, u = t && typeof t == "object" && "rowMetadata" in t ? t.rowMetadata?._isDisabled : void 0;
+  const { valueFormatted: l, value: e, placeholder: v, disabled: d, colDef: s, className: y, data: t, valueFormatter: g } = h, c = e && typeof e == "object" && "cellMetadata" in e ? e.cellMetadata?._isDisabled : void 0, u = t && typeof t == "object" && "rowMetadata" in t ? t.rowMetadata?._isDisabled : void 0;
   let a = !1;
-  if (!n) {
+  if (!d) {
     const o = s?._originalEditable;
     s?.editable === !1 ? a = !1 : c === !1 ? a = !0 : c === !0 ? a = !1 : u === !1 ? a = !0 : u === !0 ? a = !1 : a = o === !0 || s?.editable === !0;
   }
@@ -12,24 +12,24 @@ const w = (h) => {
   if (l != null && l !== "Invalid Number" && l !== "")
     i = l;
   else if (m) {
-    const o = e.cellMetadata?.valueFormatter, x = t && typeof t == "object" && "rowMetadata" in t ? t.rowMetadata?.valueFormatter : void 0, b = o ?? x ?? v;
+    const o = e.cellMetadata?.valueFormatter, x = t && typeof t == "object" && "rowMetadata" in t ? t.rowMetadata?.valueFormatter : void 0, b = o ?? x ?? g;
     i = b ? F(b, r) : r;
   } else
     i = l ?? r;
   const p = !i;
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: `w-full h-full flex items-center ag-cell-inner-padding ${y} ${n ? "opacity-60 cursor-not-allowed" : a ? "in-ag-editable-cell-highlight" : ""}`,
-      children: /* @__PURE__ */ d(
+      className: `w-full h-full flex items-center ag-cell-inner-padding ${y} ${d ? "opacity-60 cursor-not-allowed" : a ? "in-ag-editable-cell-highlight" : ""}`,
+      children: /* @__PURE__ */ n(
         "div",
         {
-          className: `flex w-full items-center rounded-[8px] px-1.5 h-7 ${f ? "justify-end text-right" : ""} ${a ? "bg-white" : "bg-inherit"}`,
-          children: /* @__PURE__ */ d(
+          className: `flex w-full items-center rounded-[8px] px-1.5 h-7 ${f ? "justify-end text-right" : ""} ${a ? "bg-canvas-elevated" : "bg-inherit"}`,
+          children: /* @__PURE__ */ n(
             "span",
             {
-              className: `flex h-full w-full bg-transparent p-0 text-sm font-medium items-center truncate text-[#1f2b4d] ${p ? "text-[#dfe2e7]" : ""} ${f ? "justify-end text-right" : ""}`,
-              children: p ? g ?? "--" : i
+              className: `flex h-full w-full bg-transparent p-0 text-sm font-medium items-center truncate text-content ${p ? "text-content-empty" : ""} ${f ? "justify-end text-right" : ""}`,
+              children: p ? v ?? "--" : i
             }
           )
         }

package/dist/components/ui/ag-grid-react/cell-renderers/link-with-batch-cell-renderer.js

@@ -20,7 +20,7 @@ const Q = (e, l, r, a) => {
   let t = null;
   const i = m(e.iconField, e.icon, l);
   if (typeof i == "string" ? t = H(i, { size: 16 }) : t = i, !t) return null;
-  const o = m(e.backgroundColorField, e.backgroundColor, l), s = m(e.colorField, e.color, l) ?? "#60697D", f = m(e.tooltipField, e.tooltip, l), g = /* @__PURE__ */ c(
+  const o = m(e.backgroundColorField, e.backgroundColor, l), s = m(e.colorField, e.color, l) ?? "var(--color-foreground-icon)", f = m(e.tooltipField, e.tooltip, l), g = /* @__PURE__ */ c(
     "div",
     {
       className: `flex items-center justify-center ${e.onClick ? "cursor-pointer" : ""} ${e.showOnHover ? "opacity-0 group-hover:opacity-100 transition-opacity" : ""}`,
@@ -135,7 +135,7 @@ const Q = (e, l, r, a) => {
     /* @__PURE__ */ c(
       "div",
       {
-        className: `flex-1 truncate min-w-0 ${F ? "text-blue-600 cursor-pointer hover:underline font-medium" : ""}`,
+        className: `flex-1 truncate min-w-0 ${F ? "text-brand cursor-pointer hover:underline font-medium" : ""}`,
         onClick: F ? C : void 0,
         children: N
       }

package/dist/components/ui/ag-grid-react/cell-renderers/percent-progress-display-renderer.js

@@ -1,4 +1,4 @@
-import { jsx as o, jsxs as V } from "react/jsx-runtime";
+import { jsx as c, jsxs as V } from "react/jsx-runtime";
 import { Badge as j } from "../../badge.js";
 import { cn as w } from "../../../../lib/utils.js";
 import { Progress as $ } from "../../progress.js";
@@ -15,19 +15,19 @@ function S(e, a, n) {
   return Math.min(n, Math.max(a, e));
 }
 const _ = (e) => {
-  const { value: a, disabled: n, colDef: c, className: b, data: s } = e, l = e.min ?? 0, d = e.max ?? 100, u = e.fractionDigits ?? 0, x = e.badgeVariant ?? "subtle", h = e.badgeColor ?? "neutral", p = e.badgeShape ?? "circle", N = e.progressVariant ?? "default", f = a && typeof a == "object" && "cellMetadata" in a ? a.cellMetadata?._isDisabled : void 0, m = s && typeof s == "object" && "rowMetadata" in s ? s.rowMetadata?._isDisabled : void 0;
+  const { value: a, disabled: n, colDef: o, className: b, data: s } = e, l = e.min ?? 0, d = e.max ?? 100, u = e.fractionDigits ?? 0, h = e.badgeVariant ?? "subtle", x = e.badgeColor ?? "neutral", p = e.badgeShape ?? "circle", N = e.progressVariant ?? "default", f = a && typeof a == "object" && "cellMetadata" in a ? a.cellMetadata?._isDisabled : void 0, m = s && typeof s == "object" && "rowMetadata" in s ? s.rowMetadata?._isDisabled : void 0;
   let t = !1;
   if (!n) {
-    const P = c?._originalEditable;
-    c?.editable === !1 ? t = !1 : f === !1 ? t = !0 : f === !0 ? t = !1 : m === !1 ? t = !0 : m === !0 ? t = !1 : t = P === !0 || c?.editable === !0;
+    const P = o?._originalEditable;
+    o?.editable === !1 ? t = !1 : f === !1 ? t = !0 : f === !0 ? t = !1 : m === !1 ? t = !0 : m === !0 ? t = !1 : t = P === !0 || o?.editable === !0;
   }
   const v = E(a), g = F(v), i = g != null, r = i ? S(g, l, d) : l, y = d - l || 1, D = i ? (r - l) / y * 100 : 0, M = i ? u > 0 ? `${r.toFixed(u)}%` : `${Math.round(r)}%` : "--";
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: `w-full h-full flex items-center ag-cell-inner-padding ${b ?? ""} ${n ? "opacity-60 cursor-not-allowed" : t ? "in-ag-editable-cell-highlight" : ""}`,
       children: /* @__PURE__ */ V("div", { className: "flex w-full min-w-0 items-center gap-2", children: [
-        /* @__PURE__ */ o("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ o(
+        /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ c(
           $,
           {
             label: !1,
@@ -40,16 +40,14 @@ const _ = (e) => {
             className: "h-2.5"
           }
         ) }),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ c(
           j,
           {
-            variant: x,
-            color: h,
+            variant: h,
+            color: x,
             shape: p,
-            className: w(
-              "shrink-0 tabular-nums px-2 py-0.5 text-xs font-medium leading-none border-0",
-              !i && "text-[#dfe2e7]"
-            ),
+            size: "sm",
+            className: w("shrink-0 tabular-nums leading-none", !i && "text-content-empty"),
             children: M
           }
         )

package/dist/components/ui/ag-grid-react/cell-renderers/select-display-renderer.js

@@ -1,24 +1,24 @@
 import { jsx as n, jsxs as m } from "react/jsx-runtime";
 import { ChevronDown as g } from "lucide-react";
 const h = (u) => {
-  const { value: e, options: b = [], placeholder: p = "Select...", disabled: o, colDef: i, data: t } = u, r = e && typeof e == "object" && "cellMetadata" in e ? e.cellMetadata?._isDisabled : void 0, d = t && typeof t == "object" && "rowMetadata" in t ? t.rowMetadata?._isDisabled : void 0;
-  let l = !1;
+  const { value: e, options: p = [], placeholder: b = "Select...", disabled: o, colDef: i, data: l } = u, c = e && typeof e == "object" && "cellMetadata" in e ? e.cellMetadata?._isDisabled : void 0, r = l && typeof l == "object" && "rowMetadata" in l ? l.rowMetadata?._isDisabled : void 0;
+  let t = !1;
   if (!o) {
     const s = i?._originalEditable;
-    i?.editable === !1 ? l = !1 : r === !1 ? l = !0 : r === !0 ? l = !1 : d === !1 ? l = !0 : d === !0 ? l = !1 : l = s === !0 || i?.editable === !0;
+    i?.editable === !1 ? t = !1 : c === !1 ? t = !0 : c === !0 ? t = !1 : r === !1 ? t = !0 : r === !0 ? t = !1 : t = s === !0 || i?.editable === !0;
   }
-  const a = e && typeof e == "object" && "value" in e ? e.value : e, c = b.find((s) => s.value === String(a ?? ""))?.label ?? (a != null && a !== "" ? String(a) : ""), f = !c;
+  const a = e && typeof e == "object" && "value" in e ? e.value : e, d = p.find((s) => s.value === String(a ?? ""))?.label ?? (a != null && a !== "" ? String(a) : ""), f = !d;
   return /* @__PURE__ */ n(
     "div",
     {
-      className: `w-full h-full flex items-center ag-cell-inner-padding ${o ? "opacity-60 cursor-not-allowed" : l ? "in-ag-editable-cell-highlight" : ""}`,
+      className: `w-full h-full flex items-center ag-cell-inner-padding ${o ? "opacity-60 cursor-not-allowed" : t ? "in-ag-editable-cell-highlight" : ""}`,
       children: /* @__PURE__ */ m(
         "div",
         {
-          className: `flex w-full items-center justify-between rounded-[8px] px-1.5 h-7 ${l ? "bg-white cursor-pointer" : "bg-inherit"}`,
+          className: `flex w-full items-center justify-between rounded-[8px] px-1.5 h-7 ${t ? "bg-canvas-elevated cursor-pointer" : "bg-inherit"}`,
           children: [
-            /* @__PURE__ */ n("span", { className: `truncate text-sm font-medium text-[#1f2b4d] ${f ? "text-[#dfe2e7]" : ""}`, children: f ? p : c }),
-            l && /* @__PURE__ */ n(g, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+            /* @__PURE__ */ n("span", { className: `truncate text-sm font-medium text-content ${f ? "text-content-empty" : ""}`, children: f ? b : d }),
+            t && /* @__PURE__ */ n(g, { className: "h-3.5 w-3.5 shrink-0 text-content-muted" })
           ]
         }
       )

package/dist/components/ui/ag-grid-react/cell-renderers/split-cell-renderer.js

@@ -2,18 +2,18 @@ import { jsx as o } from "react/jsx-runtime";
 import "react";
 import { resolveCellEditable as V, resolveValueFormatter as x, applyValueFormatter as N } from "./cell-renderer-utils.js";
 const E = (v) => {
-  const { splits: l, commonParams: n, data: i, node: g, api: c, column: b, context: d, value: h, colDef: s, valueFormatter: y } = v;
+  const { splits: l, commonParams: n, data: i, node: h, api: c, column: b, context: s, value: g, colDef: d, valueFormatter: y } = v;
   if (!l || !Array.isArray(l)) return null;
   const w = (t) => {
     const e = t;
     if (typeof e == "string") {
       const a = c?.getGridOption("components");
-      return d?.frameworkComponents?.[e] || a?.[e];
+      return s?.frameworkComponents?.[e] || a?.[e];
     }
     return e;
   };
   return /* @__PURE__ */ o("div", { style: { display: "grid", gridTemplateRows: `repeat(${l?.length}, 1fr)`, height: "100%", width: "100%" }, children: l?.map((t, e) => {
-    const a = t?.field?.split(".")?.pop(), r = h?.[a], m = r?.value?.toString(), p = i, C = typeof s?.editable == "boolean" ? s.editable : void 0, F = V(C, t.editable, p, r), u = x(r, p, t?.valueFormatter, y ?? null), R = u ? N(u, m) : m, f = n?.cellRenderer && typeof n?.cellRenderer == "string" ? w(n?.cellRenderer) : void 0;
+    const a = t?.field?.split(".")?.pop(), r = g?.[a], m = r?.value?.toString(), p = i, C = typeof d?.editable == "boolean" ? d.editable : void 0, F = V(C, t.editable, p, r), u = x(r, p, t?.valueFormatter, y ?? null), R = u ? N(u, m) : m, f = n?.cellRenderer && typeof n?.cellRenderer == "string" ? w(n?.cellRenderer) : void 0;
     return /* @__PURE__ */ o(
       "div",
       {
@@ -22,15 +22,15 @@ const E = (v) => {
         children: f ? /* @__PURE__ */ o(
           f,
           {
-            node: g,
+            node: h,
             api: c,
             column: b,
-            context: d,
+            context: s,
             data: i,
             value: r,
             colDef: { ...t, editable: F },
             valueFormatted: R,
-            className: e !== l.length - 1 ? "border-b border-gray-200" : ""
+            className: e !== l.length - 1 ? "border-b border-stroke-hairline" : ""
           }
         ) : /* @__PURE__ */ o(
           "div",

package/dist/components/ui/ag-grid-react/cell-renderers/status-badge-renderer.d.ts

@@ -22,7 +22,7 @@ export interface StatusBadgeRendererProps extends ICellRendererParams {
  *   cellRenderer: StatusBadgeRenderer,
  *   cellRendererParams: {
  *     statusConfig: {
- *       draft: { label: 'Draft', className: 'bg-purple-100 text-purple-800' },
+ *       draft: { label: 'Draft', className: 'bg-accent text-accent-foreground' },
  *     }
  *   }
  * }

package/dist/components/ui/ag-grid-react/cell-renderers/status-badge-renderer.js

@@ -1,26 +1,26 @@
 import { jsx as a } from "react/jsx-runtime";
-const r = {
-  active: { label: "Active", className: "bg-green-100 text-green-800" },
-  inactive: { label: "Inactive", className: "bg-gray-100 text-gray-800" },
-  pending: { label: "Pending", className: "bg-yellow-100 text-yellow-800" },
-  approved: { label: "Approved", className: "bg-blue-100 text-blue-800" },
-  rejected: { label: "Rejected", className: "bg-red-100 text-red-800" }
-}, c = (t) => {
-  const { value: e, statusConfig: s = r } = t;
+const c = {
+  active: { label: "Active", className: "bg-feedback-success-surface text-success" },
+  inactive: { label: "Inactive", className: "bg-muted text-content-charcoal" },
+  pending: { label: "Pending", className: "bg-feedback-warning-surface text-content" },
+  approved: { label: "Approved", className: "bg-brand-tint text-brand-strong" },
+  rejected: { label: "Rejected", className: "bg-feedback-error-surface text-destructive" }
+}, r = (s) => {
+  const { value: e, statusConfig: l = c } = s;
   if (e == null || e === "") return null;
-  const n = String(e).toLowerCase(), l = s[n] ?? {
+  const n = String(e).toLowerCase(), t = l[n] ?? {
     label: String(e),
-    className: "bg-gray-100 text-gray-800"
+    className: "bg-muted text-content-charcoal"
   };
   return /* @__PURE__ */ a("div", { className: "w-full h-full flex items-center ag-cell-inner-padding", children: /* @__PURE__ */ a(
     "span",
     {
-      className: `inline-flex px-2 py-0.5 text-xs font-semibold rounded-full ${l.className}`,
-      children: l.label
+      className: `inline-flex px-2 py-0.5 text-xs font-semibold rounded-full ${t.className}`,
+      children: t.label
     }
   ) });
 };
-c.displayName = "StatusBadgeRenderer";
+r.displayName = "StatusBadgeRenderer";
 export {
-  c as StatusBadgeRenderer
+  r as StatusBadgeRenderer
 };

package/dist/components/ui/ag-grid-react/cell-renderers/switch-display-renderer.js

@@ -1,35 +1,35 @@
-import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import { useCallback as d } from "react";
-const p = (c) => {
-  const { value: u, node: i, column: l, leftLabel: o, rightLabel: s, disabled: e } = c, r = !!u, n = d(() => {
-    e || !l || i.setDataValue(l.getColId(), !r);
-  }, [e, l, i, r]), h = d(
-    (a) => {
-      e || (a.key === " " || a.key === "Enter") && (a.preventDefault(), n());
+import { jsxs as b, jsx as n } from "react/jsx-runtime";
+import { useCallback as c } from "react";
+const p = (d) => {
+  const { value: h, node: i, column: a, leftLabel: s, rightLabel: o, disabled: e } = d, t = !!h, l = c(() => {
+    e || !a || i.setDataValue(a.getColId(), !t);
+  }, [e, a, i, t]), u = c(
+    (r) => {
+      e || (r.key === " " || r.key === "Enter") && (r.preventDefault(), l());
     },
-    [e, n]
+    [e, l]
   );
   return /* @__PURE__ */ b("div", { className: `flex items-center justify-center h-full w-full gap-2 ag-cell-inner-padding ${e ? "opacity-60 cursor-not-allowed" : !e ? "in-ag-editable-cell-highlight" : ""}`, children: [
-    o && /* @__PURE__ */ t("span", { className: "text-xs text-muted-foreground", children: o }),
-    /* @__PURE__ */ t(
+    s && /* @__PURE__ */ n("span", { className: "text-xs text-content-muted", children: s }),
+    /* @__PURE__ */ n(
       "div",
       {
-        onClick: n,
-        onKeyDown: h,
+        onClick: l,
+        onKeyDown: u,
         role: "switch",
-        "aria-checked": r,
+        "aria-checked": t,
         "aria-disabled": e,
         tabIndex: e ? -1 : 0,
-        className: `inline-flex h-4 w-6 shrink-0 items-center rounded-full border transition-colors ${e ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${r ? "bg-[#eceefd] border-accordion-bg" : "bg-white border-light-blue"}`,
-        children: /* @__PURE__ */ t(
+        className: `inline-flex h-4 w-6 shrink-0 items-center rounded-full border transition-colors ${e ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${t ? "bg-brand-tint border-canvas-accordion" : "bg-canvas-elevated border-canvas-tint"}`,
+        children: /* @__PURE__ */ n(
           "div",
           {
-            className: `pointer-events-none block h-[10px] w-[10px] rounded-full shadow-lg transition-transform ${r ? "translate-x-[10px] bg-primary" : "translate-x-[2px] bg-tertiary-border"}`
+            className: `pointer-events-none block h-[10px] w-[10px] rounded-full shadow-lg transition-transform ${t ? "translate-x-[10px] bg-brand" : "translate-x-[2px] bg-stroke-field"}`
           }
         )
       }
     ),
-    s && /* @__PURE__ */ t("span", { className: "text-xs text-muted-foreground", children: s })
+    o && /* @__PURE__ */ n("span", { className: "text-xs text-content-muted", children: o })
   ] });
 };
 p.displayName = "SwitchDisplayRenderer";

package/dist/components/ui/ag-grid-react/cell-renderers/textarea-display-renderer.js

@@ -1,24 +1,24 @@
 import { jsx as l } from "react/jsx-runtime";
-const m = (r) => {
-  const { valueFormatted: n, value: t, placeholder: s, disabled: i, maxLines: d = 2, colDef: o } = r, c = !i && o?.editable === !0, e = n ?? (t != null ? String(t) : ""), a = e === "" || e == null;
+const m = (n) => {
+  const { valueFormatted: r, value: t, placeholder: s, disabled: a, maxLines: d = 2, colDef: c } = n, o = !a && c?.editable === !0, e = r ?? (t != null ? String(t) : ""), i = e === "" || e == null;
   return /* @__PURE__ */ l(
     "div",
     {
-      className: `w-full h-full flex items-center ag-cell-inner-padding ${i ? "opacity-60 cursor-not-allowed" : c ? "in-ag-editable-cell-highlight" : ""}`,
+      className: `w-full h-full flex items-center ag-cell-inner-padding ${a ? "opacity-60 cursor-not-allowed" : o ? "in-ag-editable-cell-highlight" : ""}`,
       children: /* @__PURE__ */ l(
         "div",
         {
-          className: "flex w-full items-center rounded-[8px] bg-white px-1.5 h-7 cursor-text",
+          className: "flex w-full items-center rounded-[8px] bg-canvas-elevated px-1.5 h-7 cursor-text",
           children: /* @__PURE__ */ l(
             "span",
             {
-              className: `w-full text-sm font-medium text-[#1f2b4d] overflow-hidden ${a ? "text-[#dfe2e7]" : ""}`,
+              className: `w-full text-sm font-medium text-content overflow-hidden ${i ? "text-content-empty" : ""}`,
               style: {
                 display: "-webkit-box",
                 WebkitLineClamp: d,
                 WebkitBoxOrient: "vertical"
               },
-              children: a ? s ?? "" : e
+              children: i ? s ?? "" : e
             }
           )
         }

package/dist/components/ui/ag-grid-react/headers/advanced-filter/advanced-filter-dialog.js

@@ -1,5 +1,5 @@
 import { jsxs as f, jsx as r, Fragment as U } from "react/jsx-runtime";
-import { useState as R } from "react";
+import { useState as D } from "react";
 import { Dialog as W, DialogContent as X, DialogHeader as Y, DialogTitle as Z, DialogClose as _, DialogBody as I, DialogFooter as ee } from "../../../dialog.js";
 import { Button as C } from "../../../button.js";
 import { ButtonGroup as te } from "../../../button-group.js";
@@ -21,17 +21,17 @@ const B = (S) => {
   columnType: v,
   selectOptions: j,
   isMultiSelect: $,
-  initialModel: T,
+  initialModel: k,
   api: h
   // Add api to props
 }) => {
-  const { t: d } = ne(), k = () => (T?.rules || []).filter((e) => !("logic" in e)), [y, G] = R("column"), [F, O] = R(() => {
-    const e = {}, n = k(), t = B(n);
+  const { t: d } = ne(), T = () => (k?.rules || []).filter((e) => !("logic" in e)), [y, G] = D("column"), [F, O] = D(() => {
+    const e = {}, n = T(), t = B(n);
     return Object.keys(t).forEach((a) => {
-      e[a] = T?.logic || "OR";
+      e[a] = k?.logic || "OR";
     }), e[s] || (e[s] = "OR"), e;
-  }), [g, L] = R(() => {
-    const e = k();
+  }), [g, L] = D(() => {
+    const e = T();
     if (h) {
       const t = h.getFilterModel();
       t && Object.keys(t).forEach((i) => {
@@ -63,7 +63,7 @@ const B = (S) => {
               value: l.values
             };
           else if (l.filterType === "multi") {
-            const c = l.filterModels?.find((D) => D && D.filterType === "set");
+            const c = l.filterModels?.find((R) => R && R.filterType === "set");
             c && (o = {
               id: Math.random().toString(36).substr(2, 9),
               columnId: i,
@@ -78,7 +78,7 @@ const B = (S) => {
       });
     }
     return e.some((t) => t.columnId === s) || e.push(N(s, v)), e;
-  }), [x] = R(() => ({
+  }), [x] = D(() => ({
     allRules: g,
     // Use the computed rules (potentially synced)
     columnLogic: { ...F }
@@ -143,7 +143,7 @@ const B = (S) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ r(_, { asChild: !0, children: /* @__PURE__ */ r(C, { variant: "ghost", size: "icon", className: "h-8 w-8 p-0 text-[#60697D] hover:text-[#3649C6]", onClick: u, "aria-label": d("aria.close"), children: /* @__PURE__ */ r(le, { size: 14 }) }) })
+        /* @__PURE__ */ r(_, { asChild: !0, children: /* @__PURE__ */ r(C, { variant: "ghost", size: "icon", className: "h-8 w-8 p-0 text-content-tertiary hover:text-brand-variant-hover", onClick: u, "aria-label": d("aria.close"), children: /* @__PURE__ */ r(le, { size: 14 }) }) })
       ] }),
       /* @__PURE__ */ r(I, { className: "px-0 py-4 min-h-[300px] max-h-[400px] overflow-y-auto", children: /* @__PURE__ */ r("div", { className: "flex flex-col gap-6 w-full px-4", children: y === "column" ? (
         // Column Mode: Single column section
@@ -163,7 +163,7 @@ const B = (S) => {
         )
       ) : (
         // Global Mode: All columns with filters
-        /* @__PURE__ */ r(U, { children: A.length === 0 ? /* @__PURE__ */ r("div", { className: "text-center py-8 text-slate-400", children: d("advancedFilter.noFiltersApplied") }) : A.map((e, n) => {
+        /* @__PURE__ */ r(U, { children: A.length === 0 ? /* @__PURE__ */ r("div", { className: "text-center py-8 text-content-placeholder", children: d("advancedFilter.noFiltersApplied") }) : A.map((e, n) => {
           let t = null;
           if (h) {
             const p = h.getColumn(e);
@@ -171,9 +171,9 @@ const B = (S) => {
           }
           const a = t?.headerComponentParams, i = t?.headerName || e, l = q(e, i), o = t?.filter === "agNumberColumnFilter" ? "number" : t?.filter === "agDateColumnFilter" ? "date" : t?.filter === "agMultiColumnFilter" ? "multi" : t?.filter === "agSetColumnFilter" || a?.selectOptions ? "select" : "text";
           console.log(`[AdvancedFilterDialog] Column: ${e}, Type: ${o}, Filter: ${t?.filter}`);
-          const c = a?.selectOptions, D = a?.isMultiSelect;
+          const c = a?.selectOptions, R = a?.isMultiSelect;
           return /* @__PURE__ */ f("div", { children: [
-            n > 0 && /* @__PURE__ */ r("hr", { className: "border-slate-200 mb-6" }),
+            n > 0 && /* @__PURE__ */ r("hr", { className: "border-stroke-hairline mb-6" }),
             /* @__PURE__ */ r(
               z,
               {
@@ -181,7 +181,7 @@ const B = (S) => {
                 columnLabel: l,
                 columnType: o,
                 selectOptions: c,
-                isMultiSelect: D,
+                isMultiSelect: R,
                 rules: E(e),
                 logic: M(e),
                 onLogicChange: (p) => w(e, p),

package/dist/components/ui/ag-grid-react/headers/advanced-filter/column-filter-section.js

@@ -8,7 +8,7 @@ import p from "../../../select/select.js";
 import { Bin as E } from "../../../../../icons/index.js";
 import { createEmptyRule as q } from "../utils/filter-utils.js";
 import { useImpactNovaI18n as I } from "../../../../../i18n/ImpactNovaI18nContext.js";
-const C = {
+const y = {
   text: ["contains", "notContains", "equals", "notEqual", "startsWith", "endsWith", "empty", "notEmpty"],
   number: ["equals", "notEqual", "greaterThan", "greaterThanOrEqual", "lessThan", "lessThanOrEqual", "inRange", "empty", "notEmpty"],
   date: ["equals", "notEqual", "greaterThan", "lessThan", "inRange"],
@@ -16,36 +16,36 @@ const C = {
   multi: ["contains", "notContains", "startsWith", "endsWith", "equals", "notEqual", "empty", "notEmpty"]
 }, $ = ({
   columnId: h,
-  columnLabel: R,
-  columnType: n,
+  columnLabel: C,
+  columnType: l,
   selectOptions: g,
   isMultiSelect: c,
   rules: s,
-  logic: y,
+  logic: R,
   onLogicChange: O,
   onRulesChange: m,
   canDeleteLastRule: f = !1,
   onDeleteColumnFilter: x
 }) => {
-  const { t: r } = I(), b = w(() => (C[n] ?? C.text).map((l) => ({ label: r(`filter.operators.${n === "date" && l === "greaterThan" ? "after" : n === "date" && l === "lessThan" ? "before" : n === "date" && l === "inRange" ? "between" : l}`), value: l })), [n, r]), N = w(
+  const { t: r } = I(), b = w(() => (y[l] ?? y.text).map((n) => ({ label: r(`filter.operators.${l === "date" && n === "greaterThan" ? "after" : l === "date" && n === "lessThan" ? "before" : l === "date" && n === "inRange" ? "between" : n}`), value: n })), [l, r]), N = w(
     () => [
       { label: r("filter.logicAll"), value: "AND" },
       { label: r("filter.logicAny"), value: "OR" }
     ],
     [r]
   ), A = () => {
-    m([...s, q(h, n)]);
+    m([...s, q(h, l)]);
   }, F = (e) => {
     if (s.length > 1 || f) {
-      const l = s.filter((t) => t.id !== e);
-      l.length === 0 && f ? m([]) : m(l.length > 0 ? l : [q(h, n)]);
+      const n = s.filter((t) => t.id !== e);
+      n.length === 0 && f ? m([]) : m(n.length > 0 ? n : [q(h, l)]);
     }
-  }, i = (e, l) => {
-    m(s.map((t) => t.id === e ? { ...t, ...l } : t));
+  }, o = (e, n) => {
+    m(s.map((t) => t.id === e ? { ...t, ...n } : t));
   }, S = (e) => {
     if (e.operator === "empty" || e.operator === "notEmpty")
-      return /* @__PURE__ */ a("span", { className: "text-slate-400 italic text-sm", children: r("advancedFilter.noValueNeeded") });
-    if (n === "date")
+      return /* @__PURE__ */ a("span", { className: "text-content-placeholder italic text-sm", children: r("advancedFilter.noValueNeeded") });
+    if (l === "date")
       return e.operator === "inRange" ? /* @__PURE__ */ a(
         T,
         {
@@ -54,7 +54,7 @@ const C = {
             to: e.valueTo ? new Date(e.valueTo) : void 0
           },
           onChange: (t) => {
-            i(e.id, {
+            o(e.id, {
               value: t?.from?.toISOString() || "",
               valueTo: t?.to?.toISOString() || ""
             });
@@ -65,22 +65,22 @@ const C = {
         P,
         {
           value: e.value ? new Date(e.value) : void 0,
-          onChange: (t) => i(e.id, { value: t?.toISOString() || "" }),
+          onChange: (t) => o(e.id, { value: t?.toISOString() || "" }),
           placeholder: r("filter.selectDate"),
           showFooter: !0
         }
       );
-    const l = e.operator === "equals" || e.operator === "notEqual";
-    return n === "select" || n === "multi" && l ? /* @__PURE__ */ a(
+    const n = e.operator === "equals" || e.operator === "notEqual";
+    return l === "select" || l === "multi" && n ? /* @__PURE__ */ a(
       p,
       {
         options: g || [],
         value: (() => {
-          const t = (g || []).filter((o) => Array.isArray(e.value) ? e.value.includes(o.value) : String(e.value) === String(o.value));
+          const t = (g || []).filter((i) => Array.isArray(e.value) ? e.value.includes(i.value) : String(e.value) === String(i.value));
           return t.length === 0 ? null : c !== !1 ? t : t[0];
         })(),
         onChange: (t) => {
-          Array.isArray(t) ? i(e.id, { value: t.map((o) => o.value) }) : i(e.id, { value: t?.value || "" });
+          Array.isArray(t) ? o(e.id, { value: t.map((i) => i.value) }) : o(e.id, { value: t?.value || "" });
         },
         isMulti: c !== void 0 ? c : !0,
         placeholder: r(c === !1 ? "filter.selectValue" : "filter.selectValues"),
@@ -92,20 +92,20 @@ const C = {
         v,
         {
           value: e.value,
-          onChange: (t) => i(e.id, { value: t.target.value }),
+          onChange: (t) => o(e.id, { value: t.target.value }),
           placeholder: r("filter.from"),
-          type: n === "number" ? "number" : "text",
+          type: l === "number" ? "number" : "text",
           className: "flex-1"
         }
       ),
-      /* @__PURE__ */ a("span", { className: "text-slate-400 shrink-0", children: r("filter.to") }),
+      /* @__PURE__ */ a("span", { className: "text-content-placeholder shrink-0", children: r("filter.to") }),
       /* @__PURE__ */ a(
         v,
         {
           value: e.valueTo || "",
-          onChange: (t) => i(e.id, { valueTo: t.target.value }),
+          onChange: (t) => o(e.id, { valueTo: t.target.value }),
           placeholder: r("filter.to"),
-          type: n === "number" ? "number" : "text",
+          type: l === "number" ? "number" : "text",
           className: "flex-1"
         }
       )
@@ -113,23 +113,23 @@ const C = {
       v,
       {
         value: e.value,
-        onChange: (t) => i(e.id, { value: t.target.value }),
+        onChange: (t) => o(e.id, { value: t.target.value }),
         placeholder: r("filter.enterValue"),
-        type: n === "number" ? "number" : "text",
+        type: l === "number" ? "number" : "text",
         className: "w-full"
       }
     );
   }, k = (e) => {
-    const l = b.find((t) => t.value === e.operator);
+    const n = b.find((t) => t.value === e.operator);
     return /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ a("div", { className: "w-[120px] shrink-0", children: /* @__PURE__ */ a(
         p,
         {
           options: b,
-          value: l || null,
+          value: n || null,
           onChange: (t) => {
-            const o = t;
-            o && i(e.id, { operator: o.value });
+            const i = t;
+            i && o(e.id, { operator: i.value });
           },
           placeholder: r("filter.operator"),
           className: "w-full",
@@ -151,16 +151,16 @@ const C = {
     ] }, e.id);
   };
   return /* @__PURE__ */ d("div", { className: "flex flex-col gap-4", children: [
-    /* @__PURE__ */ d("div", { className: "text-slate-500 text-sm flex items-center gap-2 flex-wrap", children: [
+    /* @__PURE__ */ d("div", { className: "text-content-muted text-sm flex items-center gap-2 flex-wrap", children: [
       /* @__PURE__ */ a("span", { children: r("advancedFilter.match") }),
       /* @__PURE__ */ a("div", { className: "w-[80px]", children: /* @__PURE__ */ a(
         p,
         {
           options: N,
-          value: N.find((e) => e.value === y),
+          value: N.find((e) => e.value === R),
           onChange: (e) => {
-            const l = e;
-            l && O(l.value);
+            const n = e;
+            n && O(n.value);
           },
           className: "h-8",
           menuPortalTarget: document.body,
@@ -168,7 +168,7 @@ const C = {
         }
       ) }),
       /* @__PURE__ */ a("span", { children: r("advancedFilter.ofTheFollowingRulesForColumn") }),
-      /* @__PURE__ */ a("span", { className: "font-semibold text-slate-700", children: R })
+      /* @__PURE__ */ a("span", { className: "font-semibold text-content-tertiary", children: C })
     ] }),
     /* @__PURE__ */ a("div", { className: "flex flex-col gap-3", children: s.map((e) => k(e)) }),
     /* @__PURE__ */ d("div", { className: "flex items-center justify-between mt-1", children: [
@@ -179,7 +179,7 @@ const C = {
           variant: "outline",
           size: "sm",
           onClick: x,
-          className: "text-red-500 hover:text-red-600 hover:bg-red-50 border-red-300",
+          className: "text-validation hover:text-destructive hover:bg-feedback-error-surface border-destructive",
           children: [
             /* @__PURE__ */ a(E, { size: "xs" }),
             r("advancedFilter.deleteColumn")