chordia-ui 3.3.8 → 3.3.9

package/dist/components/data.es.js

@@ -1,7 +1,1036 @@
-import { D as e, a as s, S as l } from "../SummaryStatsPanel.es.js";
+import { jsxs as l, jsx as o, Fragment as je } from "react/jsx-runtime";
+import xe, { useState as m, useRef as T, useEffect as P, Suspense as ft, useMemo as I, useCallback as de } from "react";
+import { u as gt, a as _e, D as mt, c as ht, S as xt, h as yt, b as bt, s as vt, K as wt, P as St, d as ye, e as kt, C as Ct } from "../sortable.esm.es.js";
+import { CalendarClock as Ae, Download as Dt, ChevronDown as ve, ChevronUp as Ie, Filter as Pe, GripVertical as Re } from "lucide-react";
+import { createPortal as Nt } from "react-dom";
+import { C as Ft, P as zt } from "../CustomFilterChips.es.js";
+import "../TourGuideTooltip.es.js";
+function Ot({
+  dateRangePicker: g,
+  onWeekToDate: d,
+  exportConfig: y,
+  filterChipsConfig: p,
+  trailingActions: C
+  // Optional extra actions rendered after Export (e.g., Add Users button)
+}) {
+  const [R, j] = m(!1), v = T(null), E = T(null);
+  P(() => {
+    const c = (z) => {
+      E.current && !E.current.contains(z.target) && v.current && !v.current.contains(z.target) && j(!1);
+    };
+    if (R)
+      return document.addEventListener("mousedown", c), () => {
+        document.removeEventListener("mousedown", c);
+      };
+  }, [R]);
+  const J = () => {
+    j((c) => !c);
+  }, q = (c) => {
+    j(!1), y != null && y.onExport && y.onExport(c);
+  }, S = (() => {
+    if (!(p != null && p.filters))
+      return !1;
+    const c = p.filters, z = p.customFilters || [], O = Object.entries(c).some(([h, w]) => !!(Array.isArray(w) && w.length || typeof w == "string" && w.trim() !== "" || w && typeof w == "object" && (w.min != null || w.max != null))), G = z.some((h) => h.active);
+    return O || G;
+  })();
+  return /* @__PURE__ */ l("div", { className: "flex items-center gap-3 flex-wrap", children: [
+    d && /* @__PURE__ */ l(
+      "button",
+      {
+        onClick: d,
+        className: "inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white/80 px-4 py-2.5 transition-colors hover:bg-white text-sm font-medium text-gray-900",
+        style: { fontFamily: "var(--font-sans)" },
+        children: [
+          /* @__PURE__ */ o(Ae, { size: 16 }),
+          /* @__PURE__ */ o("span", { children: "Week to Date" })
+        ]
+      }
+    ),
+    g && /* @__PURE__ */ o(
+      ft,
+      {
+        fallback: /* @__PURE__ */ l("div", { className: "inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white/80 px-4 py-2.5 text-sm font-medium text-gray-400", children: [
+          /* @__PURE__ */ o(Ae, { size: 16 }),
+          /* @__PURE__ */ o("span", { children: "Loading..." })
+        ] }),
+        children: g
+      }
+    ),
+    y && /* @__PURE__ */ l("div", { className: "relative", children: [
+      /* @__PURE__ */ l(
+        "button",
+        {
+          ref: v,
+          onClick: J,
+          disabled: y.isExporting,
+          className: "inline-flex items-center justify-between gap-2 rounded-lg border border-gray-300 bg-white/80 px-4 py-2.5 transition-colors hover:bg-white text-sm font-medium text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed min-w-[120px]",
+          style: { fontFamily: "var(--font-sans)" },
+          children: [
+            /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ o(Dt, { size: 16 }),
+              /* @__PURE__ */ o("span", { children: y.isExporting ? "Exporting..." : "Export" })
+            ] }),
+            /* @__PURE__ */ o(ve, { size: 16 })
+          ]
+        }
+      ),
+      R && /* @__PURE__ */ o(
+        "div",
+        {
+          ref: E,
+          className: "absolute top-full right-0 mt-2 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50 min-w-[120px]",
+          children: (y.types || ["csv"]).map((c) => /* @__PURE__ */ l(
+            "button",
+            {
+              onClick: () => q(c),
+              className: "w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors",
+              style: { fontFamily: "var(--font-sans)" },
+              children: [
+                "Export ",
+                c.toUpperCase()
+              ]
+            },
+            c
+          ))
+        }
+      )
+    ] }),
+    (S || C) && /* @__PURE__ */ l(je, { children: [
+      S && /* @__PURE__ */ o("div", { className: "h-9 mt-1 w-px bg-gray-300 flex-shrink-0" }),
+      /* @__PURE__ */ l("div", { className: "flex items-center gap-3 justify-end", children: [
+        S && p && /* @__PURE__ */ o(
+          Ft,
+          {
+            filters: p.filters,
+            onChange: p.onChange,
+            onClear: p.onClear,
+            customFilters: p.customFilters || [],
+            fieldOptions: p.fieldOptions || {}
+          }
+        ),
+        C && /* @__PURE__ */ o("div", { className: "flex-shrink-0", children: C })
+      ] })
+    ] })
+  ] });
+}
+function be() {
+  return /* @__PURE__ */ o("div", { style: { height: 1, background: "rgba(52,58,64,0.08)" } });
+}
+const Lt = () => ({ userData: { email: "anonymous" } }), Tt = (g) => /* @__PURE__ */ o("img", { ...g });
+function Et({ children: g }) {
+  return g;
+}
+function Bt({
+  data: g = [],
+  columns: d = [],
+  initialPageSize: y = 10,
+  onRowClick: p,
+  // Server-side pagination props (optional)
+  totalCount: C = null,
+  // Total count from server (null = use client-side pagination)
+  page: R = null,
+  // Controlled page (null = use internal state)
+  pageSize: j = null,
+  // Controlled pageSize (null = use internal state)
+  onPageChange: v = null,
+  // Callback for page changes (null = use internal state)
+  onPageSizeChange: E = null,
+  // Callback for pageSize changes (null = use internal state)
+  onFilterChange: J = null,
+  // Callback for filter changes (null = use client-side filtering)
+  // Optional callback to surface column limit errors to host app
+  onMaxColumnsError: q = null,
+  // Server-side sorting props (optional)
+  onSort: Q = null,
+  // Callback for sort changes (null = use client-side sorting)
+  sortFields: S = [],
+  // Array of [field, direction] tuples from parent (null = use internal state)
+  tableId: c = null,
+  // Optional unique identifier for localStorage persistence (e.g., "history", "agents")
+  isLoading: z = !1,
+  // Loading state to show overlay inside table
+  // Filter props (optional)
+  filtersConfig: O = null
+  // Configuration for filters (dateRangePicker, onWeekToDate, exportConfig, filterChipsConfig)
+}) {
+  var Me;
+  const { userData: G } = Lt(), h = (G == null ? void 0 : G.email) || "anonymous", w = xe.memo(({ children: e, content: t, className: r = "" }) => {
+    const n = T(null), [s, a] = m(!1);
+    P(() => {
+      const u = () => {
+        if (n.current) {
+          const X = n.current.scrollWidth > n.current.clientWidth;
+          a(X);
+        }
+      };
+      u();
+      const U = setTimeout(u, 0);
+      return window.addEventListener("resize", u), () => {
+        clearTimeout(U), window.removeEventListener("resize", u);
+      };
+    }, [e, t]);
+    const i = /* @__PURE__ */ o("span", { className: `truncate block ${r}`, ref: n, children: e });
+    return s && t ? /* @__PURE__ */ o(
+      Et,
+      {
+        content: t,
+        styling: "bg-green-2 text-gray-900 px-3 py-2 text-sm rounded-lg shadow-md border border-gray-300 max-w-xs whitespace-normal",
+        indicatorColor: "bg-green-2",
+        direction: "top",
+        children: i
+      }
+    ) : i;
+  });
+  w.displayName = "TruncatedCell";
+  const Z = C !== null && v !== null, ce = J !== null, B = Q !== null, [Be, ue] = m(1), [We, Ve] = m(y), pe = R !== null ? R : Be, ee = j !== null ? j : We, te = (e) => {
+    v ? v(e) : ue(e);
+  }, we = (e) => {
+    E ? E(e) : Ve(e);
+  }, D = 9, b = "action", $ = T(!1), W = I(() => c ? `dataTable_columns_${c}:${h}` : `dataTable_columns_${d.map((t) => t.id || t.key).sort().join("_")}:${h}`, [c, d, h]), V = I(() => c ? `dataTable_manual_change_${c}:${h}` : null, [c, h]);
+  de((e, t) => {
+    if (typeof window > "u" || !e || !t || t.length === 0)
+      return null;
+    try {
+      const r = localStorage.getItem(e);
+      if (r) {
+        const s = JSON.parse(r).filter(
+          (a) => t.some((i) => (i.id || i.key) === a)
+        );
+        if (s.length > 0)
+          return s;
+      }
+    } catch (r) {
+      console.warn("Failed to load saved columns from localStorage:", r);
+    }
+    return null;
+  }, []);
+  const [M, He] = m({}), [Se, Ke] = m(null), [ke, Ce] = m("asc");
+  de((e, t) => e === "csat_score" && t === "evaluation.csat_score" ? t : e, []);
+  const Y = B && S.length > 0 ? S[0][0] : Se, re = B && S.length > 0 ? S[0][1] : ke, [$t, De] = m(
+    () => d.map((e) => e.id || e.key)
+  ), L = de((e) => {
+    if (!e || e.length === 0)
+      return e;
+    let t = Array.from(new Set(e));
+    t.length > D && (t = t.slice(0, D));
+    const n = d.map((i) => i.id || i.key).includes(b);
+    return !t.includes(b) && n && (t.length >= D ? t = [...t.slice(0, D - 1), b] : t = [...t, b]), [...t.filter((i) => i !== b), b];
+  }, [d]), [f, _] = m(() => {
+    if (typeof window < "u" && c)
+      try {
+        if (localStorage.getItem(`dataTable_manual_change_${c}:${h}`) === "true") {
+          const n = localStorage.getItem(`dataTable_columns_${c}:${h}`);
+          if (n) {
+            const s = JSON.parse(n);
+            if (Array.isArray(s) && s.length > 0) {
+              $.current = !0;
+              const a = s.filter(
+                (i) => d.some((u) => (u.id || u.key) === i)
+              );
+              if (a.length > 0)
+                return a.slice(0, D);
+            }
+          }
+        }
+      } catch (r) {
+        console.warn("Failed to load saved columns from localStorage:", r);
+      }
+    const t = d.map((r) => r.id || r.key).slice(0, D);
+    return L(t);
+  }), [k, Ne] = m(!1), [fe, Ue] = m({ top: 0, left: 0, width: 0 }), [Je, Fe] = m(/* @__PURE__ */ new Set()), [ze, Oe] = m(/* @__PURE__ */ new Set()), [N, ge] = m(null), [Ge, ne] = m(null), H = T(null), me = T(null), K = T(null), [Le, Te] = m(null), Ye = T(null), x = (e) => e.id || e.key, Xe = gt(
+    _e(St),
+    _e(wt, {
+      coordinateGetter: vt
+    })
+  ), qe = (e) => {
+    const { active: t, over: r } = e;
+    r && t.id !== r.id && ($.current = !0, _((n) => {
+      const s = n.indexOf(t.id), a = n.indexOf(r.id);
+      if (s !== -1 && a !== -1) {
+        const i = ye(n, s, a);
+        return ie(i), i;
+      }
+      return n;
+    }), De((n) => {
+      const s = n.indexOf(t.id), a = n.indexOf(r.id);
+      return ye(n, s, a);
+    })), Te(null);
+  }, Qe = (e) => {
+    Te(e.active.id);
+  }, oe = I(() => ce ? g || [] : !g || g.length === 0 ? [] : g.filter((e) => Object.keys(M).every((t) => {
+    const r = M[t];
+    if (!r || r.trim() === "")
+      return !0;
+    const n = e[t];
+    if (n == null)
+      return !1;
+    const s = String(n).toLowerCase();
+    return r.toLowerCase().trim().split(/\s+/).filter((u) => u.length > 0).every((u) => s.includes(u));
+  })), [g, M, ce]), se = I(() => B || !Y ? oe : [...oe].sort((e, t) => {
+    const r = e[Y], n = t[Y];
+    if (r == null)
+      return 1;
+    if (n == null)
+      return -1;
+    if (typeof r == "number" && typeof n == "number")
+      return re === "asc" ? r - n : n - r;
+    const s = String(r).toLowerCase(), a = String(n).toLowerCase();
+    return re === "asc" ? s.localeCompare(a) : a.localeCompare(s);
+  }), [oe, Y, re, B]), ae = I(() => {
+    if (Z)
+      return g || [];
+    {
+      const e = (pe - 1) * ee, t = e + ee;
+      return se.slice(e, t);
+    }
+  }, [g, se, pe, ee, Z]), Ze = (e) => {
+    B && Q ? (Q(e), v ? v(1) : ue(1)) : (Se === e ? Ce(ke === "asc" ? "desc" : "asc") : (Ke(e), Ce("asc")), te(1));
+  }, Ee = (e, t) => {
+    const r = t && t.trim() !== "" ? { ...M, [e]: t } : Object.fromEntries(Object.entries(M).filter(([n]) => n !== e));
+    He(r), ce && J && J(r), v ? v(1) : ue(1);
+  }, et = (e) => {
+    K.current || (typeof q == "function" && q(e), K.current = setTimeout(() => {
+      K.current = null;
+    }, 3e3));
+  }, ie = de((e) => {
+    if (typeof window < "u" && W && e.length > 0 && $.current)
+      try {
+        localStorage.setItem(W, JSON.stringify(e)), V && localStorage.setItem(V, "true");
+      } catch (t) {
+        console.warn("Failed to save columns to localStorage:", t);
+      }
+  }, [W, V]), he = (e) => {
+    e !== b && ($.current = !0, _((t) => t.includes(e) ? (K.current && (clearTimeout(K.current), K.current = null), t.length === 1 || (Oe((r) => new Set(r).add(e)), setTimeout(() => {
+      _((r) => {
+        const n = r.filter((a) => a !== e), s = L(n);
+        return ie(s), s;
+      }), Oe((r) => {
+        const n = new Set(r);
+        return n.delete(e), n;
+      });
+    }, 200)), t) : t.length >= D ? (et("Maximum 9 column selection allowed"), t) : (Fe((r) => new Set(r).add(e)), setTimeout(() => {
+      _((r) => {
+        const n = r.includes(e) ? r : [...r, e], s = L(n);
+        return ie(s), s;
+      }), Fe((r) => {
+        const n = new Set(r);
+        return n.delete(e), n;
+      });
+    }, 200), t)));
+  }, tt = (e, t) => {
+    f[t] !== b && ge(t);
+  }, rt = () => {
+    ge(null), ne(null);
+  }, nt = (e, t) => {
+    e.preventDefault(), N !== null && N !== t && ne(t);
+  }, ot = () => {
+    ne(null);
+  }, st = (e, t) => {
+    e.preventDefault(), N !== null && N !== t && f[t] !== b && f[N] !== b && ($.current = !0, _((r) => {
+      const n = ye(r, N, t), s = L(n);
+      return ie(s), s;
+    })), ge(null), ne(null);
+  };
+  P(() => {
+    De((e) => {
+      const t = f.filter((s) => e.includes(s)), r = f.filter((s) => !e.includes(s)), n = e.filter((s) => !f.includes(s));
+      return [...t, ...r, ...n];
+    });
+  }, [f]), P(() => {
+    if (typeof window < "u" && W && f.length > 0 && $.current)
+      try {
+        const e = L(f);
+        localStorage.setItem(W, JSON.stringify(e)), V && localStorage.setItem(V, "true");
+      } catch (e) {
+        console.warn("Failed to save columns to localStorage:", e);
+      }
+  }, [f, W, V]), P(() => {
+    if (d.length > 0 && f.length === 0) {
+      if (typeof window < "u" && c)
+        try {
+          if (localStorage.getItem(`dataTable_manual_change_${c}:${h}`) === "true") {
+            const r = localStorage.getItem(`dataTable_columns_${c}:${h}`);
+            if (r) {
+              const n = JSON.parse(r);
+              if (Array.isArray(n) && n.length > 0) {
+                const s = n.filter(
+                  (a) => d.some((i) => (i.id || i.key) === a)
+                );
+                if (s.length > 0) {
+                  $.current = !0, _(s.slice(0, D));
+                  return;
+                }
+              }
+            }
+          }
+        } catch (t) {
+          console.warn("Failed to load saved columns from localStorage:", t);
+        }
+      const e = d.map((t) => t.id || t.key);
+      _(L(e.slice(0, D)));
+    }
+  }, [d, c, h, L]);
+  const A = I(() => {
+    const e = f.map((t) => d.find((r) => x(r) === t)).filter(Boolean);
+    return L(e.map(x)).map((t) => d.find((r) => x(r) === t)).filter(Boolean);
+  }, [d, f]), at = I(() => A.some((e) => e.filterable === !0), [A]);
+  P(() => {
+    if (!k || !H.current)
+      return;
+    const e = () => {
+      if (H.current) {
+        const t = H.current.getBoundingClientRect();
+        Ue({
+          top: t.bottom,
+          // No gap - connect directly
+          left: t.left,
+          width: Math.max(t.width || 220, 220)
+        });
+      }
+    };
+    return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+    };
+  }, [k]), P(() => {
+    const e = (t) => {
+      k && H.current && !H.current.contains(t.target) && me.current && !me.current.contains(t.target) && Ne(!1);
+    };
+    if (k)
+      return document.addEventListener("mousedown", e), () => {
+        document.removeEventListener("mousedown", e);
+      };
+  }, [k]);
+  const it = f.length === 1 ? ((Me = d.find((e) => (e.id || e.key) === f[0])) == null ? void 0 : Me.label) || "1 selected" : `${f.length} selected`;
+  function lt({ column: e, isHeaderRow: t = !0 }) {
+    const r = x(e), n = r === b, {
+      attributes: s,
+      listeners: a,
+      setNodeRef: i,
+      transform: u,
+      transition: U,
+      isDragging: X
+    } = kt({ id: r }), ct = {
+      transform: Ct.Transform.toString(u),
+      transition: U,
+      opacity: X ? 0.5 : 1,
+      width: e.width || "auto",
+      minWidth: e.width || "auto"
+    };
+    let le = !1;
+    if (B && S.length > 0) {
+      const F = S[0][0];
+      (F === r || F === "csat_score" && r === "evaluation.csat_score") && (le = !0);
+    } else
+      le = Y === r;
+    const ut = re === "asc", pt = e.filterable === !0;
+    return t ? /* @__PURE__ */ o(
+      "th",
+      {
+        ref: i,
+        style: {
+          ...ct,
+          padding: "12px 14px",
+          textAlign: n ? "center" : "left",
+          fontWeight: 650,
+          fontSize: "11px",
+          letterSpacing: "0.14em",
+          textTransform: "uppercase",
+          color: "rgba(30, 33, 37, 0.62)",
+          cursor: e.sortable !== !1 ? "pointer" : "default",
+          width: e.width || "auto",
+          borderRight: "1px solid rgba(52, 58, 64, 0.06)",
+          userSelect: "none",
+          background: "var(--primary-foreground)",
+          borderBottom: "1px solid rgba(52, 58, 64, 0.12)",
+          position: "sticky",
+          top: 0,
+          zIndex: 10,
+          fontFamily: "var(--font-sans)"
+        },
+        children: /* @__PURE__ */ l(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              justifyContent: n ? "center" : "flex-start"
+            },
+            children: [
+              !n && /* @__PURE__ */ o(
+                "div",
+                {
+                  ...s,
+                  ...a,
+                  style: { cursor: "grab", color: "rgba(30, 33, 37, 0.32)" },
+                  children: /* @__PURE__ */ o(Re, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ o(
+                "span",
+                {
+                  onClick: () => e.sortable !== !1 && Ze(r),
+                  style: { cursor: e.sortable !== !1 ? "pointer" : "default" },
+                  children: e.label.toUpperCase()
+                }
+              ),
+              e.sortable !== !1 && le && /* @__PURE__ */ o("span", { children: ut ? /* @__PURE__ */ o(Ie, { size: 12 }) : /* @__PURE__ */ o(ve, { size: 12 }) })
+            ]
+          }
+        )
+      }
+    ) : /* @__PURE__ */ o(
+      "th",
+      {
+        style: {
+          width: e.width || "auto",
+          minWidth: e.width || "auto",
+          backgroundColor: "var(--primary-foreground)"
+        },
+        className: "sticky top-[57px] z-10 border-b border-[var(--border-strong)] px-4 py-2 text-left",
+        children: pt ? /* @__PURE__ */ l("div", { className: "relative", children: [
+          /* @__PURE__ */ o(
+            Pe,
+            {
+              size: 12,
+              className: "absolute left-2 top-1/2 -translate-y-1/2 text-[var(--text-faint)] pointer-events-none"
+            }
+          ),
+          /* @__PURE__ */ o(
+            "input",
+            {
+              type: "text",
+              placeholder: "Filter...",
+              value: M[r] || "",
+              onChange: (F) => {
+                F.stopPropagation(), Ee(r, F.target.value);
+              },
+              onKeyDown: (F) => F.stopPropagation(),
+              onMouseDown: (F) => F.stopPropagation(),
+              className: "w-full pl-7 pr-2 py-1.5 text-xs border border-[var(--border)] rounded text-[var(--text-ink)] placeholder:text-[var(--text-faint)] focus:outline-none focus:border-[var(--border-hover)] focus:ring-1 focus:ring-[var(--focus)] transition-colors",
+              style: { fontFamily: "var(--font-sans)", backgroundColor: "var(--primary-foreground)" },
+              autoComplete: "off"
+            }
+          )
+        ] }) : /* @__PURE__ */ o("div", { className: "h-[34px]" })
+      }
+    );
+  }
+  const $e = Le ? d.find((e) => x(e) === Le) : null, dt = k ? /* @__PURE__ */ l(
+    "div",
+    {
+      ref: me,
+      className: "flex flex-col overflow-auto z-[49] min-w-[220px]",
+      style: {
+        position: "fixed",
+        top: `${fe.top}px`,
+        left: `${fe.left}px`,
+        width: fe.width || 220,
+        maxHeight: "400px",
+        fontFamily: "var(--font-sans)",
+        backgroundColor: "var(--primary-foreground)",
+        borderRadius: "0 0 8px 8px",
+        // Rounded corners only on bottom
+        boxShadow: "4px 4px 6px 0px #6D70681A, -4px 0px 6px 0px #6D70681A",
+        border: "1px solid rgba(52, 58, 64, 0.12)",
+        borderTop: "none"
+        // No top border to connect seamlessly
+      },
+      children: [
+        f.map((e, t) => {
+          const r = d.find((u) => x(u) === e);
+          if (!r)
+            return null;
+          const n = f.indexOf(e), s = N === n, a = Ge === n, i = e === b;
+          return /* @__PURE__ */ l(xe.Fragment, { children: [
+            /* @__PURE__ */ l(
+              "div",
+              {
+                draggable: !i,
+                onDragStart: i ? void 0 : (u) => tt(u, n),
+                onDragEnd: i ? void 0 : rt,
+                onDragOver: i ? void 0 : (u) => nt(u, n),
+                onDragLeave: i ? void 0 : ot,
+                onDrop: i ? void 0 : (u) => st(u, n),
+                className: `flex items-center gap-2 px-3 py-2 rounded transition-all ${i ? "cursor-default opacity-100" : "cursor-move"} ${!i && s ? "opacity-50" : ""} ${!i && a && N !== null && N !== n ? "ring-2 ring-green-2 ring-offset-1" : ""}`,
+                children: [
+                  !i && /* @__PURE__ */ o(
+                    "svg",
+                    {
+                      className: "h-4 w-4 text-gray-600 flex-shrink-0",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ o(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M4 8h16M4 12h16M4 16h16"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ o(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (u) => {
+                        u.preventDefault(), u.stopPropagation(), i || he(e);
+                      },
+                      className: `h-4 w-4 rounded-[2px] border flex items-center justify-center transition-colors flex-shrink-0 ${i ? "bg-green-2 border-green-2 cursor-default" : ze.has(e) ? "bg-white border-gray-300" : "bg-green-2 border-green-2"}`,
+                      children: !ze.has(e) && /* @__PURE__ */ o(
+                        "svg",
+                        {
+                          className: "h-3 w-3",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          strokeWidth: 3,
+                          style: { color: "#1E2125" },
+                          children: /* @__PURE__ */ o(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              d: "M5 13l4 4L19 7"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ o("span", { className: "text-sm text-gray-900 flex-1", style: { fontFamily: "var(--font-sans)" }, children: r.label })
+                ]
+              }
+            ),
+            t < f.length - 1 && /* @__PURE__ */ o(be, {})
+          ] }, `selected-${e}-${t}`);
+        }),
+        d.filter((e) => !f.includes(x(e))).map((e, t) => {
+          const r = x(e), n = Je.has(r), s = d.filter((a) => !f.includes(x(a))).indexOf(e);
+          return /* @__PURE__ */ l(xe.Fragment, { children: [
+            f.length > 0 && s === 0 && /* @__PURE__ */ o(be, {}),
+            /* @__PURE__ */ l(
+              "label",
+              {
+                className: "flex items-center gap-2 px-3 py-2 hover:bg-gray-50 rounded cursor-pointer transition-colors",
+                onClick: (a) => {
+                  a.preventDefault(), he(r);
+                },
+                children: [
+                  /* @__PURE__ */ o(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (a) => {
+                        a.preventDefault(), a.stopPropagation(), he(r);
+                      },
+                      className: `h-4 w-4 rounded-[2px] border flex items-center justify-center transition-colors flex-shrink-0 ${n ? "bg-green-2 border-green-2" : "bg-white border-gray-300"}`,
+                      children: n && /* @__PURE__ */ o(
+                        "svg",
+                        {
+                          className: "h-3 w-3",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          strokeWidth: 3,
+                          style: { color: "#1E2125" },
+                          children: /* @__PURE__ */ o(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              d: "M5 13l4 4L19 7"
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ o("span", { className: "text-sm text-gray-900 flex-1", children: e.label })
+                ]
+              }
+            ),
+            s < d.filter((a) => !f.includes(x(a))).length - 1 && /* @__PURE__ */ o(be, {})
+          ] }, `unselected-${r}`);
+        })
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ l("div", { className: "w-full", style: { top: "130px", position: "sticky", zIndex: 35, backgroundColor: "var(--primary-foreground)" }, children: [
+    d.length > 0 && /* @__PURE__ */ o(
+      "div",
+      {
+        className: "pt-2 pb-1",
+        style: {
+          position: "sticky",
+          zIndex: 35,
+          backgroundColor: "var(--primary-foreground)"
+        },
+        children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3 flex-wrap", children: [
+          /* @__PURE__ */ l("div", { className: "flex-shrink-0", children: [
+            /* @__PURE__ */ o("div", { className: "mb-1 ml-1.5", children: /* @__PURE__ */ o("p", { className: "text-xs font-medium text-gray-600", style: { fontFamily: "var(--font-sans)" }, children: "Select Columns" }) }),
+            /* @__PURE__ */ l(
+              "div",
+              {
+                ref: H,
+                className: "inline-flex items-center justify-between gap-2 px-4 py-2.5 cursor-pointer transition-colors text-sm font-medium text-gray-900 border border-gray-300 min-w-[220px]",
+                onClick: () => Ne(!k),
+                style: {
+                  fontFamily: "var(--font-sans)",
+                  backgroundColor: "var(--primary-foreground)",
+                  borderRadius: k ? "8px 8px 0 0" : "8px"
+                  // Rounded top corners when open, all corners when closed
+                },
+                children: [
+                  /* @__PURE__ */ o("span", { children: it }),
+                  k ? /* @__PURE__ */ o(Ie, { size: 16 }) : /* @__PURE__ */ o(ve, { size: 16 })
+                ]
+              }
+            ),
+            k && Nt(dt, document.body)
+          ] }),
+          O && /* @__PURE__ */ l(je, { children: [
+            /* @__PURE__ */ o("div", { className: "h-9 mt-[1.5rem] w-px bg-gray-300 flex-shrink-0" }),
+            /* @__PURE__ */ o("div", { className: "flex-shrink-0 mt-[1.5rem]", children: /* @__PURE__ */ o(
+              Ot,
+              {
+                dateRangePicker: O.dateRangePicker,
+                onWeekToDate: O.onWeekToDate,
+                exportConfig: O.exportConfig,
+                filterChipsConfig: O.filterChipsConfig,
+                trailingActions: O.trailingActions
+              }
+            ) })
+          ] })
+        ] })
+      }
+    ),
+    d.length > 0 && A.length > 0 ? /* @__PURE__ */ l(
+      mt,
+      {
+        sensors: Xe,
+        collisionDetection: ht,
+        onDragStart: Qe,
+        onDragEnd: qe,
+        children: [
+          /* @__PURE__ */ l("div", { className: "rounded-t-[14px]", style: {
+            border: "1px solid rgba(52, 58, 64, 0.12)",
+            borderBottom: "1px solid rgba(52, 58, 64, 0.12)",
+            overflow: "hidden",
+            background: "var(--primary-foreground)",
+            position: "relative",
+            top: "0.5rem"
+          }, children: [
+            z && /* @__PURE__ */ o("div", { style: {
+              position: "absolute",
+              inset: 0,
+              background: "rgba(255, 255, 255, 0.9)",
+              backdropFilter: "blur(2px)",
+              zIndex: 20,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "14px"
+            }, children: /* @__PURE__ */ l("div", { style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: "12px"
+            }, children: [
+              /* @__PURE__ */ o("p", { style: {
+                fontSize: "13px",
+                color: "rgba(30, 33, 37, 0.6)",
+                margin: 0
+              }, children: "Loading..." }),
+              /* @__PURE__ */ o(
+                Tt,
+                {
+                  src: "/BrandLoading.gif",
+                  alt: "Loading",
+                  width: 50,
+                  height: 50,
+                  unoptimized: !0,
+                  className: "mt-1"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ o("div", { className: "overflow-x-auto custom-thin-scrollbar-hidden", ref: Ye, style: { maxHeight: "500px", overflowY: "auto", position: "relative", zIndex: 1 }, children: /* @__PURE__ */ l("table", { style: {
+              width: "100%",
+              borderCollapse: "collapse",
+              fontSize: "13px",
+              fontFamily: "var(--font-sans)"
+            }, children: [
+              /* @__PURE__ */ l("thead", { children: [
+                /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o(
+                  xt,
+                  {
+                    items: f,
+                    strategy: yt,
+                    children: A.map((e) => /* @__PURE__ */ o(lt, { column: e, isHeaderRow: !0 }, `header-${x(e)}`))
+                  }
+                ) }),
+                at && /* @__PURE__ */ o("tr", { children: A.map((e) => {
+                  const t = x(e), r = e.filterable === !0;
+                  return /* @__PURE__ */ o(
+                    "th",
+                    {
+                      style: {
+                        padding: "8px 14px",
+                        background: "var(--primary-foreground)",
+                        borderBottom: "1px solid rgba(52, 58, 64, 0.10)",
+                        position: "sticky",
+                        top: "41px",
+                        zIndex: 10,
+                        width: e.width || "auto",
+                        fontFamily: "var(--font-sans)"
+                      },
+                      children: r ? /* @__PURE__ */ l("div", { style: { position: "relative" }, children: [
+                        /* @__PURE__ */ o(
+                          "input",
+                          {
+                            type: "text",
+                            placeholder: "Filter...",
+                            value: M[t] || "",
+                            onChange: (n) => {
+                              n.stopPropagation(), Ee(t, n.target.value);
+                            },
+                            onKeyDown: (n) => n.stopPropagation(),
+                            onMouseDown: (n) => n.stopPropagation(),
+                            style: {
+                              width: "100%",
+                              padding: "4px 8px 4px 26px",
+                              fontSize: "11.5px",
+                              border: "1px solid rgba(52, 58, 64, 0.16)",
+                              borderRadius: "6px",
+                              background: "var(--primary-foreground)",
+                              color: "rgba(30, 33, 37, 0.78)",
+                              outline: "none",
+                              fontFamily: "var(--font-sans)"
+                            },
+                            onFocus: (n) => {
+                              n.target.style.borderColor = "rgba(231, 212, 162, 0.65)", n.target.style.background = "var(--primary-foreground)";
+                            },
+                            onBlur: (n) => {
+                              n.target.style.borderColor = "rgba(52, 58, 64, 0.16)", n.target.style.background = "var(--primary-foreground)";
+                            },
+                            autoComplete: "off"
+                          }
+                        ),
+                        /* @__PURE__ */ o(
+                          Pe,
+                          {
+                            size: 11,
+                            style: {
+                              position: "absolute",
+                              left: "8px",
+                              top: "50%",
+                              transform: "translateY(-50%)",
+                              color: "rgba(30, 33, 37, 0.42)",
+                              pointerEvents: "none"
+                            }
+                          }
+                        )
+                      ] }) : /* @__PURE__ */ o("div", { className: "h-[34px]" })
+                    },
+                    `filter-${t}`
+                  );
+                }) })
+              ] }),
+              /* @__PURE__ */ o("tbody", { children: !z && ae.length === 0 ? /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o(
+                "td",
+                {
+                  colSpan: A.length,
+                  style: {
+                    padding: "32px",
+                    textAlign: "center",
+                    color: "rgba(30, 33, 37, 0.42)",
+                    fontSize: "12px",
+                    fontFamily: "var(--font-sans)"
+                  },
+                  children: "No results found"
+                }
+              ) }) : !z && ae.length > 0 ? ae.map((e, t) => /* @__PURE__ */ o(
+                "tr",
+                {
+                  "data-row-id": e.id || t,
+                  style: {
+                    borderBottom: "1px solid rgba(52, 58, 64, 0.08)",
+                    cursor: p ? "pointer" : "default",
+                    transition: "background 0.15s ease"
+                  },
+                  onClick: p ? (r) => {
+                    r.stopPropagation(), p(e, t);
+                  } : void 0,
+                  onMouseEnter: (r) => {
+                    r.currentTarget.style.background = "rgba(231, 212, 162, 0.12)";
+                  },
+                  onMouseLeave: (r) => {
+                    r.currentTarget.style.background = "transparent";
+                  },
+                  children: A.map((r) => {
+                    const n = x(r), s = e[n], a = r.render ? r.render(s, e) : s, i = r.width && r.width !== "auto", u = typeof a == "string" && a.trim() !== "", U = i && u, X = U ? /* @__PURE__ */ o(w, { content: a, children: a }) : a;
+                    return /* @__PURE__ */ o(
+                      "td",
+                      {
+                        style: {
+                          padding: "10px 14px",
+                          color: "rgba(30, 33, 37, 0.78)",
+                          fontSize: "13px",
+                          borderRight: "1px solid rgba(52, 58, 64, 0.04)",
+                          width: r.width || "auto",
+                          fontFamily: "var(--font-sans)",
+                          ...U && { maxWidth: r.width || "200px", overflow: "hidden" }
+                        },
+                        children: X
+                      },
+                      n
+                    );
+                  })
+                },
+                t
+              )) : null })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ o(bt, { children: $e ? /* @__PURE__ */ o("div", { className: "bg-[var(--paper-high)] border border-[var(--border-strong)] rounded px-4 py-2 shadow-lg", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ o(Re, { size: 14, className: "text-[var(--text-faint)]" }),
+            /* @__PURE__ */ o("span", { className: "text-sm font-semibold text-[var(--text-ink)]", children: $e.label })
+          ] }) }) : null })
+        ]
+      }
+    ) : null,
+    (Z ? C > 0 : se.length > 0) && /* @__PURE__ */ o("div", { className: "border-t border-gray-200 rounded-b-[14px]", style: { backgroundColor: "var(--primary-foreground)" }, children: /* @__PURE__ */ o(
+      zt,
+      {
+        page: pe,
+        pageSizeOptions: [5, 10, 20, 50, 100],
+        pageSize: ee,
+        totalCount: Z ? C : se.length,
+        currentDataLength: ae.length,
+        onPageChange: te,
+        onPageSizeChange: E ? (e) => {
+          we(e), te(1);
+        } : (e) => {
+          we(e), te(1);
+        },
+        showPageSizeSelector: !0
+      }
+    ) })
+  ] });
+}
+function Wt({
+  title: g = "Summary stats",
+  stats: d = [],
+  columns: y = 2
+}) {
+  return /* @__PURE__ */ l("div", { style: { fontFamily: "system-ui, -apple-system, sans-serif" }, children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: "text-[11px] tracking-[0.14em] uppercase mb-[10px]",
+        style: { color: "rgba(30, 33, 37, 0.42)", fontWeight: 650 },
+        children: g
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(${y}, minmax(0, 1fr))`,
+          gap: "10px"
+        },
+        children: d.map((p, C) => /* @__PURE__ */ l(
+          "div",
+          {
+            style: {
+              position: "relative",
+              border: "1px solid rgba(52, 58, 64, 0.12)",
+              borderRadius: "12px",
+              background: "rgba(255, 255, 255, 0.72)",
+              padding: p.accentColor ? "10px 10px 10px 14px" : "10px",
+              minHeight: "62px",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gap: "5px",
+              overflow: "hidden"
+            },
+            children: [
+              p.accentColor && /* @__PURE__ */ o(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    width: "4px",
+                    background: p.accentColor,
+                    borderTopLeftRadius: "12px",
+                    borderBottomLeftRadius: "12px"
+                  }
+                }
+              ),
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "text-[10px] tracking-[0.14em] uppercase",
+                  style: {
+                    color: "rgba(30, 33, 37, 0.42)",
+                    fontWeight: 650,
+                    lineHeight: 1.1,
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  children: p.label
+                }
+              ),
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  style: {
+                    fontSize: "13px",
+                    color: p.valueStyle === "muted" ? "rgba(30, 33, 37, 0.56)" : "rgba(30, 33, 37, 0.78)",
+                    fontWeight: 700,
+                    lineHeight: 1.15,
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    fontFamily: p.valueStyle === "mono" ? "ui-monospace, monospace" : "inherit"
+                  },
+                  children: p.value
+                }
+              ),
+              p.subtext && /* @__PURE__ */ o(
+                "div",
+                {
+                  style: {
+                    fontSize: "11px",
+                    color: "rgba(30, 33, 37, 0.52)",
+                    lineHeight: 1.15,
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  children: p.subtext
+                }
+              )
+            ]
+          },
+          C
+        ))
+      }
+    )
+  ] });
+}
 export {
-  e as DataTable,
-  s as DataTableFilters,
-  l as SummaryStatsPanel
+  Bt as DataTable,
+  Ot as DataTableFilters,
+  Wt as SummaryStatsPanel
 };
 //# sourceMappingURL=data.es.js.map