chordia-ui 3.7.2 → 3.7.4

package/dist/DataTable2.es.js

@@ -0,0 +1,1863 @@
+import { jsxs as p, jsx as i, Fragment as Qe } from "react/jsx-runtime";
+import Xe, { useState as h, useRef as j, useEffect as X, Suspense as Yt, useMemo as ae, useCallback as L } from "react";
+import { u as qt, a as yt, D as Zt, c as Vt, S as en, h as tn, b as nn, s as rn, K as on, P as sn, d as Ue, e as an, C as ln } from "./sortable.esm.es.js";
+import { CalendarClock as bt, Download as cn, ChevronDown as dn, Settings2 as un, Search as vt, X as fn, GripVertical as Ge, Check as wt, ArrowUp as pn, ArrowDown as hn, ArrowUpDown as mn, ListFilter as gn } from "lucide-react";
+import { createPortal as Ye } from "react-dom";
+import { C as yn, P as bn } from "./CustomFilterChips.es.js";
+import "motion/react";
+import "recharts";
+import "./TourGuideTooltip.es.js";
+function xn({
+  dateRangePicker: o,
+  onWeekToDate: a,
+  exportConfig: l,
+  filterChipsConfig: c,
+  trailingActions: x
+  // Optional extra actions rendered after Export (e.g., Add Users button)
+}) {
+  const [v, f] = h(!1), m = j(null), $ = j(null);
+  X(() => {
+    const S = (b) => {
+      $.current && !$.current.contains(b.target) && m.current && !m.current.contains(b.target) && f(!1);
+    };
+    if (v)
+      return document.addEventListener("mousedown", S), () => {
+        document.removeEventListener("mousedown", S);
+      };
+  }, [v]);
+  const y = () => {
+    f((S) => !S);
+  }, C = (S) => {
+    f(!1), l != null && l.onExport && l.onExport(S);
+  }, M = (() => {
+    if (!(c != null && c.filters))
+      return !1;
+    const S = c.filters, b = c.customFilters || [], P = Object.entries(S).some(([k, N]) => !!(Array.isArray(N) && N.length || typeof N == "string" && N.trim() !== "" || N && typeof N == "object" && (N.min != null || N.max != null))), T = b.some((k) => k.active);
+    return P || T;
+  })();
+  return /* @__PURE__ */ p("div", { className: "flex items-center gap-3 flex-wrap", children: [
+    a && /* @__PURE__ */ p(
+      "button",
+      {
+        onClick: a,
+        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__ */ i(bt, { size: 16 }),
+          /* @__PURE__ */ i("span", { children: "Week to Date" })
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ i(
+      Yt,
+      {
+        fallback: /* @__PURE__ */ p("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__ */ i(bt, { size: 16 }),
+          /* @__PURE__ */ i("span", { children: "Loading..." })
+        ] }),
+        children: o
+      }
+    ),
+    l && /* @__PURE__ */ p("div", { className: "relative", children: [
+      /* @__PURE__ */ p(
+        "button",
+        {
+          ref: m,
+          onClick: y,
+          disabled: l.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__ */ p("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ i(cn, { size: 16 }),
+              /* @__PURE__ */ i("span", { children: l.isExporting ? "Exporting..." : "Export" })
+            ] }),
+            /* @__PURE__ */ i(dn, { size: 16 })
+          ]
+        }
+      ),
+      v && /* @__PURE__ */ i(
+        "div",
+        {
+          ref: $,
+          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: (l.types || ["csv"]).map((S) => /* @__PURE__ */ p(
+            "button",
+            {
+              onClick: () => C(S),
+              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 ",
+                S.toUpperCase()
+              ]
+            },
+            S
+          ))
+        }
+      )
+    ] }),
+    (M || x) && /* @__PURE__ */ p(Qe, { children: [
+      M && /* @__PURE__ */ i("div", { className: "h-9 mt-1 w-px bg-gray-300 flex-shrink-0" }),
+      /* @__PURE__ */ p("div", { className: "flex items-center gap-3 justify-end", children: [
+        M && c && /* @__PURE__ */ i(
+          yn,
+          {
+            filters: c.filters,
+            onChange: c.onChange,
+            onClear: c.onClear,
+            customFilters: c.customFilters || [],
+            fieldOptions: c.fieldOptions || {}
+          }
+        ),
+        x && /* @__PURE__ */ i("div", { className: "flex-shrink-0", children: x })
+      ] })
+    ] })
+  ] });
+}
+function vn(o) {
+  if (o == null)
+    return NaN;
+  const a = String(o).replace(/[,$%]|pp/gi, "").trim(), l = parseFloat(a);
+  return Number.isFinite(l) ? l : NaN;
+}
+function wn(o) {
+  if (o == null)
+    return NaN;
+  const a = String(o).trim(), l = a.match(/^(\d+):(\d+)(?::(\d+))?$/);
+  if (l) {
+    const y = +l[1], C = +l[2], z = l[3] != null ? +l[3] : null;
+    return z != null ? y * 3600 + C * 60 + z : y * 60 + C;
+  }
+  let c = 0, x = !1;
+  const v = a.match(/(\d+)\s*d\b/i), f = a.match(/(\d+)\s*h\b/i), m = a.match(/(\d+)\s*m(?!s)\b/i), $ = a.match(/(\d+)\s*s\b/i);
+  return v && (c += +v[1] * 86400, x = !0), f && (c += +f[1] * 3600, x = !0), m && (c += +m[1] * 60, x = !0), $ && (c += +$[1], x = !0), x ? c : NaN;
+}
+function Sn(o) {
+  if (!o)
+    return null;
+  const a = String(o).trim(), l = a.match(/^(\d{1,2})\/(\d{1,2})\/(\d{2,4})$/);
+  if (l) {
+    const x = l[3].length === 2 ? 2e3 + +l[3] : +l[3], v = new Date(x, +l[1] - 1, +l[2]);
+    return isNaN(v.getTime()) ? null : v;
+  }
+  const c = new Date(a);
+  return isNaN(c.getTime()) ? null : c;
+}
+function Fn(o) {
+  if (!o || o.length === 0)
+    return "text";
+  const a = o.slice(0, 25), l = (c) => a.every(c);
+  return l((c) => /^\d{1,2}\/\d{1,2}\/\d{2,4}$/.test(c) || /^\d{4}-\d{2}-\d{2}/.test(c)) ? "date" : l((c) => /^\d+\s*[dhms]\b/i.test(c) || /^\d+:\d+(:\d+)?$/.test(c)) ? "duration" : l((c) => /^-?[\d,.]+(%|pp)?$/i.test(c)) ? "number" : "text";
+}
+function Ne(o) {
+  return o ? Array.isArray(o) ? o.length > 0 : o.type === "range" ? o.min !== "" && o.min !== void 0 && o.min !== null || o.max !== "" && o.max !== void 0 && o.max !== null : o.type === "durationRange" ? o.minSec !== "" && o.minSec != null || o.maxSec !== "" && o.maxSec != null : o.type === "dateRange" ? !!(o.from || o.to) : !1 : !1;
+}
+function xt(o) {
+  if (o == null || o === "" || isNaN(o))
+    return "";
+  const a = Number(o), l = Math.floor(a / 3600), c = Math.floor(a % 3600 / 60), x = Math.floor(a % 60);
+  return l > 0 ? `${l}h ${c}m` : c > 0 ? `${c}m ${x}s` : `${x}s`;
+}
+function kn(o) {
+  if (!o)
+    return "";
+  if (Array.isArray(o))
+    return o.length === 0 ? "" : String(o[0]);
+  if (o.type === "range") {
+    const a = o.min !== "" && o.min != null ? o.min : null, l = o.max !== "" && o.max != null ? o.max : null;
+    return a != null && l != null ? `${a} – ${l}` : a != null ? `≥ ${a}` : l != null ? `≤ ${l}` : "";
+  }
+  if (o.type === "durationRange") {
+    const a = o.minSec !== "" && o.minSec != null ? xt(o.minSec) : null, l = o.maxSec !== "" && o.maxSec != null ? xt(o.maxSec) : null;
+    return a && l ? `${a} – ${l}` : a ? `≥ ${a}` : l ? `≤ ${l}` : "";
+  }
+  return o.type === "dateRange" ? o.from && o.to ? `${o.from} – ${o.to}` : o.from ? `from ${o.from}` : o.to ? `to ${o.to}` : "" : "";
+}
+function Dn(o) {
+  return Array.isArray(o) ? Math.max(0, o.length - 1) : 0;
+}
+function Cn(o) {
+  return Array.isArray(o) ? o.slice(1).map(String).join(", ") : "";
+}
+function Rn({ count: o, values: a }) {
+  const [l, c] = h(!1);
+  return /* @__PURE__ */ p(
+    "span",
+    {
+      onMouseEnter: () => c(!0),
+      onMouseLeave: () => c(!1),
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 22,
+        minWidth: 22,
+        padding: "0 6px",
+        background: "#D8D8D8",
+        color: "#0B0B0B",
+        borderRadius: 14,
+        fontSize: 12,
+        fontWeight: 500,
+        lineHeight: 1,
+        cursor: "pointer"
+      },
+      children: [
+        "+",
+        o,
+        l && /* @__PURE__ */ i(
+          "span",
+          {
+            role: "tooltip",
+            style: {
+              position: "absolute",
+              bottom: "calc(100% + 6px)",
+              left: "50%",
+              transform: "translateX(-50%)",
+              background: "#1E2125",
+              color: "#FFFFFF",
+              fontFamily: "var(--font-sans)",
+              fontSize: 12,
+              fontWeight: 400,
+              lineHeight: "20px",
+              padding: "6px 10px",
+              borderRadius: 8,
+              whiteSpace: "nowrap",
+              pointerEvents: "none",
+              zIndex: 100,
+              boxShadow: "0 6px 16px rgba(11, 11, 11, 0.18)"
+            },
+            children: a
+          }
+        )
+      ]
+    }
+  );
+}
+function Je({ leftLabel: o, rightLabel: a, leftValue: l, rightValue: c, onLeftChange: x, onRightChange: v, type: f = "number", placeholderLeft: m = "Min", placeholderRight: $ = "Max" }) {
+  const y = {
+    width: "100%",
+    height: 32,
+    borderRadius: 8,
+    border: "1px solid #D9D9D9",
+    background: "#FFFFFF",
+    padding: "0 10px",
+    fontFamily: "var(--font-sans)",
+    fontSize: 14,
+    color: "#0B0B0B",
+    outline: "none",
+    boxSizing: "border-box"
+  }, C = { fontSize: 12, color: "#676767", marginBottom: 4, fontFamily: "var(--font-sans)" };
+  return /* @__PURE__ */ p("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ p("div", { style: { display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ i("span", { style: C, children: o }),
+      /* @__PURE__ */ i(
+        "input",
+        {
+          type: f,
+          value: l,
+          onChange: (z) => x(z.target.value),
+          placeholder: m,
+          style: y
+        }
+      )
+    ] }),
+    /* @__PURE__ */ p("div", { style: { display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ i("span", { style: C, children: a }),
+      /* @__PURE__ */ i(
+        "input",
+        {
+          type: f,
+          value: c,
+          onChange: (z) => v(z.target.value),
+          placeholder: $,
+          style: y
+        }
+      )
+    ] })
+  ] });
+}
+function zn({ column: o, columnId: a, filterType: l = "text", position: c, popoverRef: x, distinctValues: v, initialValue: f, onApply: m, onCancel: $ }) {
+  const y = l === "text", C = l === "number", z = l === "date", M = l === "duration", [S, b] = h(
+    () => y ? new Set(Array.isArray(f) ? f : []) : /* @__PURE__ */ new Set()
+  ), [P, T] = h(""), [k, N] = h(() => C && (f == null ? void 0 : f.type) === "range" && f.min != null ? f.min : ""), [V, W] = h(() => C && (f == null ? void 0 : f.type) === "range" && f.max != null ? f.max : ""), [_, U] = h(() => M && (f == null ? void 0 : f.type) === "durationRange" && f.minSec != null ? f.minSec : ""), [E, O] = h(() => M && (f == null ? void 0 : f.type) === "durationRange" && f.maxSec != null ? f.maxSec : ""), [ne, G] = h(() => z && (f == null ? void 0 : f.type) === "dateRange" && f.from || ""), [re, ee] = h(() => z && (f == null ? void 0 : f.type) === "dateRange" && f.to || "");
+  X(() => {
+    y && b(new Set(Array.isArray(f) ? f : []));
+  }, [a, y]);
+  const H = ae(() => {
+    const w = P.trim().toLowerCase();
+    return w ? v.filter((D) => String(D).toLowerCase().includes(w)) : v;
+  }, [v, P]), Q = (w) => {
+    b((D) => {
+      const A = new Set(D);
+      return A.has(w) ? A.delete(w) : A.add(w), A;
+    });
+  }, Y = () => {
+    y && b(/* @__PURE__ */ new Set()), C && (N(""), W("")), M && (U(""), O("")), z && (G(""), ee("")), T("");
+  }, pe = () => {
+    if (y)
+      return m(Array.from(S));
+    if (C)
+      return m({ type: "range", min: k === "" ? "" : Number(k), max: V === "" ? "" : Number(V) });
+    if (M)
+      return m({ type: "durationRange", minSec: _ === "" ? "" : Number(_), maxSec: E === "" ? "" : Number(E) });
+    if (z)
+      return m({ type: "dateRange", from: ne, to: re });
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      ref: x,
+      role: "dialog",
+      "aria-label": `Filter ${o.label || a}`,
+      style: {
+        position: "fixed",
+        top: c.top,
+        left: c.left,
+        zIndex: 50,
+        width: y ? 240 : 280,
+        background: "#FFFFFF",
+        border: "1px solid #E6E6E6",
+        borderRadius: 10,
+        padding: 12,
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+        boxShadow: "0 8px 24px rgba(11, 11, 11, 0.10)",
+        fontFamily: "var(--font-sans)"
+      },
+      children: [
+        y && /* @__PURE__ */ p(Qe, { children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              style: {
+                background: "#D8D8D8",
+                height: 32,
+                borderRadius: 10,
+                padding: 1,
+                display: "flex",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ p(
+                "div",
+                {
+                  style: {
+                    background: "#FFFFFF",
+                    flex: 1,
+                    height: 30,
+                    borderRadius: 10,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    padding: "0 8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ i(vt, { size: 16, color: "#989898", strokeWidth: 2 }),
+                    /* @__PURE__ */ i(
+                      "input",
+                      {
+                        autoFocus: !0,
+                        type: "text",
+                        value: P,
+                        onChange: (w) => T(w.target.value),
+                        placeholder: "Search",
+                        style: {
+                          flex: 1,
+                          border: "none",
+                          outline: "none",
+                          background: "transparent",
+                          fontSize: 14,
+                          color: "#0B0B0B",
+                          minWidth: 0,
+                          fontFamily: "var(--font-sans)"
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ i("div", { style: { maxHeight: 220, overflowY: "auto", display: "flex", flexDirection: "column", gap: 4 }, children: H.length === 0 ? /* @__PURE__ */ i("div", { style: { fontSize: 13, color: "#676767", padding: "8px 4px", textAlign: "center" }, children: "No values" }) : H.map((w) => {
+            const D = S.has(w);
+            return /* @__PURE__ */ p(
+              "label",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  padding: "6px 4px",
+                  cursor: "pointer",
+                  borderRadius: 6
+                },
+                children: [
+                  /* @__PURE__ */ i(
+                    "span",
+                    {
+                      style: {
+                        width: 20,
+                        height: 20,
+                        borderRadius: 4,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        background: D ? "#0B0B0B" : "#FFFFFF",
+                        border: `1px solid ${D ? "#0B0B0B" : "#676767"}`,
+                        flexShrink: 0
+                      },
+                      children: D && /* @__PURE__ */ i(wt, { size: 14, color: "#FFFFFF", strokeWidth: 3 })
+                    }
+                  ),
+                  /* @__PURE__ */ i(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: D,
+                      onChange: () => Q(w),
+                      style: { position: "absolute", opacity: 0, pointerEvents: "none" },
+                      tabIndex: -1
+                    }
+                  ),
+                  /* @__PURE__ */ i(
+                    "span",
+                    {
+                      onClick: (A) => {
+                        A.preventDefault(), Q(w);
+                      },
+                      style: {
+                        fontSize: 14,
+                        lineHeight: "20px",
+                        color: "#0B0B0B",
+                        flex: 1,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: w
+                    }
+                  )
+                ]
+              },
+              w
+            );
+          }) })
+        ] }),
+        C && /* @__PURE__ */ i(
+          Je,
+          {
+            leftLabel: "Min",
+            rightLabel: "Max",
+            leftValue: k,
+            rightValue: V,
+            onLeftChange: N,
+            onRightChange: W,
+            type: "number"
+          }
+        ),
+        M && /* @__PURE__ */ p(Qe, { children: [
+          /* @__PURE__ */ i("div", { style: { fontSize: 12, color: "#676767" }, children: "Duration in seconds" }),
+          /* @__PURE__ */ i(
+            Je,
+            {
+              leftLabel: "Min (sec)",
+              rightLabel: "Max (sec)",
+              leftValue: _,
+              rightValue: E,
+              onLeftChange: U,
+              onRightChange: O,
+              type: "number",
+              placeholderLeft: "0",
+              placeholderRight: "3600"
+            }
+          )
+        ] }),
+        z && /* @__PURE__ */ i(
+          Je,
+          {
+            leftLabel: "From",
+            rightLabel: "To",
+            leftValue: ne,
+            rightValue: re,
+            onLeftChange: G,
+            onRightChange: ee,
+            type: "date",
+            placeholderLeft: "",
+            placeholderRight: ""
+          }
+        ),
+        /* @__PURE__ */ i("div", { style: { height: 1, background: "#D9D9D9", margin: "0 -12px" } }),
+        /* @__PURE__ */ p("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              onClick: Y,
+              style: {
+                background: "transparent",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                fontSize: 14,
+                fontWeight: 500,
+                color: "#323232",
+                fontFamily: "var(--font-sans)"
+              },
+              children: "Reset"
+            }
+          ),
+          /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              onClick: pe,
+              style: {
+                background: "#0B0B0B",
+                color: "#FFFFFF",
+                border: "none",
+                borderRadius: 10,
+                height: 28,
+                padding: "0 14px",
+                fontSize: 14,
+                fontWeight: 600,
+                cursor: "pointer",
+                fontFamily: "var(--font-sans)"
+              },
+              children: "Apply"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const Mn = () => ({ userData: { email: "anonymous" } }), Nn = (o) => /* @__PURE__ */ i("img", { ...o });
+function En({
+  children: o,
+  content: a,
+  direction: l = "top",
+  align: c = "center",
+  styling: x,
+  indicatorColor: v
+}) {
+  const f = typeof a == "string" ? a : a != null ? String(a) : "", m = typeof v == "string" && (v.startsWith("#") || v.startsWith("rgb") || v.startsWith("hsl") || v.startsWith("var(")) ? v : "var(--Grey-Strong, #2E3236)", [$, y] = h(!1), [C, z] = h(!1), [M, S] = h({ top: 0, left: 0, arrowLeft: 0, placement: "top" }), b = j(null), P = j(null);
+  if (!f)
+    return o;
+  X(() => {
+    z(!0);
+  }, []);
+  const T = L(() => {
+    if (!b.current || !P.current || typeof window > "u")
+      return;
+    const k = b.current.getBoundingClientRect(), N = P.current.getBoundingClientRect(), V = window.innerWidth, W = window.innerHeight, _ = 8, U = 10, E = N.width, O = N.height, ne = k.top, G = W - k.bottom, re = l === "bottom" ? "bottom" : "top";
+    let ee = re;
+    re === "top" && ne < O + U + _ && G > ne ? ee = "bottom" : re === "bottom" && G < O + U + _ && ne > G && (ee = "top");
+    let H = k.left + k.width / 2;
+    c === "start" && (H = k.left), c === "end" && (H = k.right);
+    let Q = ee === "top" ? k.top - O - U : k.bottom + U, Y = c === "start" ? H : c === "end" ? H - E : H - E / 2;
+    Q = Math.max(_, Math.min(Q, W - O - _)), Y = Math.max(_, Math.min(Y, V - E - _));
+    const pe = Math.max(10, Math.min(H - Y, E - 10));
+    S({ top: Q, left: Y, arrowLeft: pe, placement: ee });
+  }, [c, l]);
+  return X(() => {
+    if (!$ || !C)
+      return;
+    T();
+    const k = () => T();
+    return window.addEventListener("resize", k), window.addEventListener("scroll", k, !0), () => {
+      window.removeEventListener("resize", k), window.removeEventListener("scroll", k, !0);
+    };
+  }, [$, C, T]), /* @__PURE__ */ p(
+    "span",
+    {
+      ref: b,
+      style: { display: "block", width: "100%" },
+      onMouseEnter: () => y(!0),
+      onMouseLeave: () => y(!1),
+      children: [
+        o,
+        $ && C && Ye(
+          /* @__PURE__ */ p(
+            "span",
+            {
+              ref: P,
+              style: {
+                position: "fixed",
+                top: `${M.top}px`,
+                left: `${M.left}px`,
+                background: "var(--Grey-Strong, #2E3236)",
+                color: "var(--Grey-White, #FFF)",
+                fontSize: "12px",
+                lineHeight: 1.3,
+                fontWeight: 500,
+                padding: "8px 10px",
+                borderRadius: "6px",
+                whiteSpace: "normal",
+                maxWidth: "320px",
+                width: "max-content",
+                boxShadow: "0 6px 18px rgba(0, 0, 0, 0.2)",
+                zIndex: 99999,
+                pointerEvents: "none",
+                ...typeof x == "object" ? x : {}
+              },
+              children: [
+                f,
+                /* @__PURE__ */ i(
+                  "span",
+                  {
+                    style: {
+                      position: "absolute",
+                      left: `${M.arrowLeft}px`,
+                      transform: "translateX(-50%)",
+                      width: 0,
+                      height: 0,
+                      borderLeft: "6px solid transparent",
+                      borderRight: "6px solid transparent",
+                      ...M.placement === "top" ? {
+                        top: "100%",
+                        borderTop: `7px solid ${m}`
+                      } : {
+                        bottom: "100%",
+                        borderBottom: `7px solid ${m}`
+                      }
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+function _n({
+  data: o = [],
+  columns: a = [],
+  initialPageSize: l = 10,
+  onRowClick: c,
+  // Server-side pagination props (optional)
+  totalCount: x = null,
+  // Total count from server (null = use client-side pagination)
+  page: v = null,
+  // Controlled page (null = use internal state)
+  pageSize: f = null,
+  // Controlled pageSize (null = use internal state)
+  onPageChange: m = null,
+  // Callback for page changes (null = use internal state)
+  onPageSizeChange: $ = null,
+  // Callback for pageSize changes (null = use internal state)
+  onFilterChange: y = null,
+  // Callback for filter changes (null = use client-side filtering)
+  columnFilters: C = null,
+  // Controlled inline header filters (columnId -> value). Used to rehydrate inputs in server-side filtering mode.
+  // Optional callback to surface column limit errors to host app
+  onMaxColumnsError: z = null,
+  // Server-side sorting props (optional)
+  onSort: M = null,
+  // Callback for sort changes (null = use client-side sorting)
+  sortFields: S = [],
+  // Array of [field, direction] tuples from parent (null = use internal state)
+  tableId: b = null,
+  // Optional unique identifier for localStorage persistence (e.g., "history", "agents")
+  isLoading: P = !1,
+  // Loading state to show overlay inside table
+  // Filter props (optional)
+  filtersConfig: T = null,
+  // Top toolbar filter config (chips/date/export). Note: this is different from `columnFilters` for inline header inputs.
+  // Column resize (optional) — min/max in px; columns may override with column.minWidth / column.maxWidth
+  columnResizeMinWidth: k = 100,
+  columnResizeMaxWidth: N = 280
+}) {
+  var gt;
+  const { userData: V } = Mn(), W = (V == null ? void 0 : V.email) || "anonymous", _ = Xe.memo(({ children: e, content: t, className: n = "" }) => {
+    const s = j(null), [r, d] = h(!1);
+    X(() => {
+      const g = () => {
+        if (s.current) {
+          const B = s.current.scrollWidth > s.current.clientWidth;
+          d(B);
+        }
+      };
+      g();
+      const K = setTimeout(g, 0);
+      return window.addEventListener("resize", g), () => {
+        clearTimeout(K), window.removeEventListener("resize", g);
+      };
+    }, [e, t]);
+    const u = /* @__PURE__ */ i("span", { className: `truncate block ${n}`, ref: s, children: e });
+    return r && t ? /* @__PURE__ */ i(
+      En,
+      {
+        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: u
+      }
+    ) : u;
+  });
+  _.displayName = "TruncatedCell";
+  const U = x !== null && m !== null, E = y !== null, O = M !== null, [ne, G] = h(1), [re, ee] = h(l), H = v !== null ? v : ne, Q = f !== null ? f : re, Y = (e) => {
+    m ? m(e) : G(e);
+  }, pe = (e) => {
+    $ ? $(e) : ee(e);
+  }, w = 50, D = "action", A = j(!1), oe = ae(() => b ? `dataTable_columns_${b}:${W}` : `dataTable_columns_${a.map((t) => t.id || t.key).sort().join("_")}:${W}`, [b, a, W]), le = ae(() => b ? `dataTable_manual_change_${b}:${W}` : null, [b, W]);
+  L((e, t) => {
+    if (typeof window > "u" || !e || !t || t.length === 0)
+      return null;
+    try {
+      const n = localStorage.getItem(e);
+      if (n) {
+        const r = JSON.parse(n).filter(
+          (d) => t.some((u) => (u.id || u.key) === d)
+        );
+        if (r.length > 0)
+          return r;
+      }
+    } catch (n) {
+      console.warn("Failed to load saved columns from localStorage:", n);
+    }
+    return null;
+  }, []);
+  const [q, Ee] = h({}), [Be, qe] = h(""), [J, he] = h(null), [St, Ft] = h({ top: 0, left: 0 }), Le = j(null), Ze = j({}), [Ve, kt] = h(null), [et, tt] = h("asc"), $e = L((e, t) => {
+    const n = Ne(t);
+    Ee((s) => {
+      const r = { ...s };
+      return n ? r[e] = t : delete r[e], r;
+    }), m ? m(1) : G(1), E && y && y(
+      n ? { ...q, [e]: t } : Object.fromEntries(Object.entries(q).filter(([s]) => s !== e))
+    );
+  }, [q, y, E, m]), Dt = L(() => {
+    Ee({}), qe(""), m ? m(1) : G(1), E && y && y({});
+  }, [y, E, m]), We = L((e) => {
+    if (!o || o.length === 0)
+      return [];
+    const t = /* @__PURE__ */ new Set(), n = [];
+    for (const s of o) {
+      const r = s[e];
+      if (r == null)
+        continue;
+      const d = typeof r == "object" ? JSON.stringify(r) : String(r);
+      t.has(d) || (t.add(d), n.push(d));
+    }
+    return n.sort((s, r) => s.localeCompare(r));
+  }, [o]), Ct = L((e) => {
+    const t = a.find((n) => I(n) === e);
+    return t && t.filterType ? t.filterType : Fn(We(e));
+  }, [a, We]), Rt = L((e, t) => {
+    if (!t) {
+      he(e);
+      return;
+    }
+    const n = t.getBoundingClientRect();
+    Ft({ top: n.bottom + 6, left: n.left }), he((s) => s === e ? null : e);
+  }, []);
+  X(() => {
+    if (!J)
+      return;
+    const e = (t) => {
+      if (Le.current && Le.current.contains(t.target))
+        return;
+      const n = Ze.current[J];
+      n && n.contains(t.target) || he(null);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [J]);
+  const nt = L((e) => !e || typeof e != "object" ? {} : Object.fromEntries(
+    Object.entries(e).filter(([, t]) => t == null ? !1 : typeof t == "string" ? t.trim() !== "" : !0)
+  ), []), rt = L((e, t) => {
+    const n = Object.keys(e || {}), s = Object.keys(t || {});
+    return n.length !== s.length ? !1 : n.every((r) => e[r] === t[r]);
+  }, []);
+  X(() => {
+    if (!E || C === null)
+      return;
+    const e = nt(C);
+    Ee((t) => rt(t, e) ? t : e);
+  }, [E, C, nt, rt]), L((e, t) => e === "csat_score" && t === "evaluation.csat_score" ? t : e, []);
+  const me = O && S.length > 0 ? S[0][0] : Ve, be = O && S.length > 0 ? S[0][1] : et, [Bn, ot] = h(
+    () => a.map((e) => e.id || e.key)
+  ), Z = L((e) => {
+    if (!e || e.length === 0)
+      return e;
+    let t = Array.from(new Set(e));
+    t.length > w && (t = t.slice(0, w));
+    const s = a.map((u) => u.id || u.key).includes(D);
+    return !t.includes(D) && s && (t.length >= w ? t = [...t.slice(0, w - 1), D] : t = [...t, D]), [...t.filter((u) => u !== D), D];
+  }, [a]), [R, se] = h(() => {
+    if (typeof window < "u" && b)
+      try {
+        if (localStorage.getItem(`dataTable_manual_change_${b}:${W}`) === "true") {
+          const s = localStorage.getItem(`dataTable_columns_${b}:${W}`);
+          if (s) {
+            const r = JSON.parse(s);
+            if (Array.isArray(r) && r.length > 0) {
+              A.current = !0;
+              const d = r.filter(
+                (u) => a.some((g) => (g.id || g.key) === u)
+              );
+              if (d.length > 0)
+                return d.slice(0, w);
+            }
+          }
+        }
+      } catch (n) {
+        console.warn("Failed to load saved columns from localStorage:", n);
+      }
+    const t = a.map((n) => n.id || n.key).slice(0, w);
+    return Z(t);
+  }), [ie, Te] = h(!1), [st, zt] = h({ top: 0, left: 0, width: 0 }), [it, Ae] = h(/* @__PURE__ */ new Set()), [at, Oe] = h(/* @__PURE__ */ new Set()), xe = j(null);
+  xe.current === null && (xe.current = [...R]);
+  const [te, Ie] = h(null), [Mt, ve] = h(null), ce = j(null), je = j(null), de = j(null), [lt, Pe] = h(null), [_e, Nt] = h({}), Et = j(null), we = j(null), I = (e) => e.id || e.key, Se = L((e) => {
+    if (typeof e == "number" && Number.isFinite(e))
+      return e;
+    if (typeof e == "string") {
+      const t = e.trim();
+      if (t.endsWith("px")) {
+        const s = parseFloat(t);
+        return Number.isFinite(s) ? s : null;
+      }
+      const n = parseFloat(t);
+      return Number.isFinite(n) && `${n}` === t ? n : null;
+    }
+    return null;
+  }, []), ct = L((e, t) => _e[e] != null ? `${_e[e]}px` : typeof t == "number" ? `${t}px` : t || "auto", [_e]), Fe = L((e) => {
+    if (!we.current)
+      return;
+    const { columnId: t, startX: n, startWidth: s, minWidth: r, maxWidth: d } = we.current, u = e.clientX - n, g = Math.round(s + u), K = Math.min(d, Math.max(r, g));
+    Nt((B) => ({ ...B, [t]: K }));
+  }, []), ge = L(() => {
+    we.current = null, document.body.style.cursor = "", document.body.style.userSelect = "", document.removeEventListener("mousemove", Fe), document.removeEventListener("mouseup", ge);
+  }, [Fe]), Bt = L((e, t, n) => {
+    var ze;
+    e.preventDefault(), e.stopPropagation();
+    const s = t.id || t.key, r = Se(t.minWidth) ?? k, d = Se(t.maxWidth) ?? N, u = Math.min(r, d), g = Math.max(r, d), K = ((ze = e.currentTarget.closest("th")) == null ? void 0 : ze.getBoundingClientRect().width) || 0, B = Se(n), ye = B ?? Math.max(u, Math.round(K) || u), He = Math.min(g, Math.max(u, ye));
+    we.current = { columnId: s, startX: e.clientX, startWidth: He, minWidth: u, maxWidth: g }, document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", Fe), document.addEventListener("mouseup", ge);
+  }, [N, k, Fe, ge, Se]);
+  X(() => () => ge(), [ge]);
+  const Lt = qt(
+    yt(sn),
+    yt(on, {
+      coordinateGetter: rn
+    })
+  ), $t = (e) => {
+    const { active: t, over: n } = e;
+    if (n && t.id !== n.id) {
+      if (t.id === D || n.id === D) {
+        ut("Cannot drop columns on the Action column"), Pe(null);
+        return;
+      }
+      A.current = !0, se((s) => {
+        const r = s.indexOf(t.id), d = s.indexOf(n.id);
+        if (r !== -1 && d !== -1) {
+          const u = Ue(s, r, d), g = Z(u);
+          return Re(g), g;
+        }
+        return s;
+      }), ot((s) => {
+        const r = s.indexOf(t.id), d = s.indexOf(n.id);
+        return Ue(s, r, d);
+      });
+    }
+    Pe(null);
+  }, Wt = (e) => {
+    Pe(e.active.id);
+  }, ke = ae(() => {
+    if (E)
+      return o || [];
+    if (!o || o.length === 0)
+      return [];
+    const e = Be.trim().toLowerCase(), t = Object.entries(q).filter(([, n]) => Ne(n));
+    return o.filter((n) => {
+      for (const [s, r] of t) {
+        const d = n[s];
+        if (d == null)
+          return !1;
+        if (Array.isArray(r)) {
+          const u = String(d);
+          if (!r.some((g) => String(g) === u))
+            return !1;
+          continue;
+        }
+        if (r.type === "range") {
+          const u = vn(d);
+          if (isNaN(u) || r.min !== "" && r.min != null && u < Number(r.min) || r.max !== "" && r.max != null && u > Number(r.max))
+            return !1;
+          continue;
+        }
+        if (r.type === "durationRange") {
+          const u = wn(d);
+          if (isNaN(u) || r.minSec !== "" && r.minSec != null && u < Number(r.minSec) || r.maxSec !== "" && r.maxSec != null && u > Number(r.maxSec))
+            return !1;
+          continue;
+        }
+        if (r.type === "dateRange") {
+          const u = Sn(d);
+          if (!u)
+            return !1;
+          if (r.from) {
+            const g = /* @__PURE__ */ new Date(r.from + "T00:00:00");
+            if (u < g)
+              return !1;
+          }
+          if (r.to) {
+            const g = /* @__PURE__ */ new Date(r.to + "T23:59:59");
+            if (u > g)
+              return !1;
+          }
+          continue;
+        }
+      }
+      return !(e && !Object.values(n).some((r) => r == null ? !1 : String(r).toLowerCase().includes(e)));
+    });
+  }, [o, q, Be, E]), De = ae(() => O || !me ? ke : [...ke].sort((e, t) => {
+    const n = e[me], s = t[me];
+    if (n == null)
+      return 1;
+    if (s == null)
+      return -1;
+    if (typeof n == "number" && typeof s == "number")
+      return be === "asc" ? n - s : s - n;
+    const r = String(n).toLowerCase(), d = String(s).toLowerCase();
+    return be === "asc" ? r.localeCompare(d) : d.localeCompare(r);
+  }), [ke, me, be, O]), Ce = ae(() => {
+    if (U)
+      return o || [];
+    {
+      const e = (H - 1) * Q, t = e + Q;
+      return De.slice(e, t);
+    }
+  }, [o, De, H, Q, U]), dt = (e) => {
+    O && M ? (M(e), m ? m(1) : G(1)) : (Ve === e ? tt(et === "asc" ? "desc" : "asc") : (kt(e), tt("asc")), Y(1));
+  }, Tt = (e, t) => {
+    const n = (t || "").split(/\s+/).map((s) => s.trim()).filter(Boolean);
+    $e(e, n);
+  }, ut = (e) => {
+    de.current || (typeof z == "function" && z(e), de.current = setTimeout(() => {
+      de.current = null;
+    }, 3e3));
+  }, Re = L((e) => {
+    if (typeof window < "u" && oe && e.length > 0 && A.current)
+      try {
+        localStorage.setItem(oe, JSON.stringify(e)), le && localStorage.setItem(le, "true");
+      } catch (t) {
+        console.warn("Failed to save columns to localStorage:", t);
+      }
+  }, [oe, le]), At = (e) => {
+    e !== D && (A.current = !0, se((t) => t.includes(e) ? (de.current && (clearTimeout(de.current), de.current = null), t.length === 1 || (Oe((n) => new Set(n).add(e)), setTimeout(() => {
+      se((n) => {
+        const s = n.filter((d) => d !== e), r = Z(s);
+        return Re(r), r;
+      }), Oe((n) => {
+        const s = new Set(n);
+        return s.delete(e), s;
+      });
+    }, 200)), t) : t.length >= w ? (ut("Maximum 9 column selection allowed"), t) : (Ae((n) => new Set(n).add(e)), setTimeout(() => {
+      se((n) => {
+        const s = n.includes(e) ? n : [...n, e], r = Z(s);
+        return Re(r), r;
+      }), Ae((n) => {
+        const s = new Set(n);
+        return s.delete(e), s;
+      });
+    }, 200), t)));
+  }, Ot = (e, t) => {
+    R[t] !== D && Ie(t);
+  }, It = () => {
+    Ie(null), ve(null);
+  }, jt = (e, t) => {
+    e.preventDefault(), te !== null && te !== t && ve(t);
+  }, Pt = () => {
+    ve(null);
+  }, _t = (e, t) => {
+    e.preventDefault(), te !== null && te !== t && R[t] !== D && R[te] !== D && (A.current = !0, se((n) => {
+      const s = Ue(n, te, t), r = Z(s);
+      return Re(r), r;
+    })), Ie(null), ve(null);
+  };
+  X(() => {
+    ot((e) => {
+      const t = R.filter((r) => e.includes(r)), n = R.filter((r) => !e.includes(r)), s = e.filter((r) => !R.includes(r));
+      return [...t, ...n, ...s];
+    });
+  }, [R]), X(() => {
+    if (typeof window < "u" && oe && R.length > 0 && A.current)
+      try {
+        const e = Z(R);
+        localStorage.setItem(oe, JSON.stringify(e)), le && localStorage.setItem(le, "true");
+      } catch (e) {
+        console.warn("Failed to save columns to localStorage:", e);
+      }
+  }, [R, oe, le]), X(() => {
+    if (a.length > 0 && R.length === 0) {
+      if (typeof window < "u" && b)
+        try {
+          if (localStorage.getItem(`dataTable_manual_change_${b}:${W}`) === "true") {
+            const n = localStorage.getItem(`dataTable_columns_${b}:${W}`);
+            if (n) {
+              const s = JSON.parse(n);
+              if (Array.isArray(s) && s.length > 0) {
+                const r = s.filter(
+                  (d) => a.some((u) => (u.id || u.key) === d)
+                );
+                if (r.length > 0) {
+                  A.current = !0, se(r.slice(0, w));
+                  return;
+                }
+              }
+            }
+          }
+        } catch (t) {
+          console.warn("Failed to load saved columns from localStorage:", t);
+        }
+      const e = a.map((t) => t.id || t.key);
+      se(Z(e.slice(0, w)));
+    }
+  }, [a, b, W, Z]);
+  const ue = ae(() => {
+    const e = R.map((t) => a.find((n) => I(n) === t)).filter(Boolean);
+    return Z(e.map(I)).map((t) => a.find((n) => I(n) === t)).filter(Boolean);
+  }, [a, R]);
+  ae(() => ue.some((e) => e.filterable === !0), [ue]), X(() => {
+    if (!ie || !ce.current)
+      return;
+    const e = () => {
+      if (ce.current) {
+        const t = ce.current.getBoundingClientRect();
+        zt({
+          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);
+    };
+  }, [ie]), X(() => {
+    const e = (t) => {
+      ie && ce.current && !ce.current.contains(t.target) && je.current && !je.current.contains(t.target) && Te(!1);
+    };
+    if (ie)
+      return document.addEventListener("mousedown", e), () => {
+        document.removeEventListener("mousedown", e);
+      };
+  }, [ie]), R.length === 1 ? (gt = a.find((e) => (e.id || e.key) === R[0])) != null && gt.label : `${R.length}`;
+  function Ht({ column: e, isHeaderRow: t = !0 }) {
+    const n = I(e), s = n === D, r = ct(n, e.width), [d, u] = h(!1), {
+      attributes: g,
+      listeners: K,
+      setNodeRef: B,
+      transform: ye,
+      transition: He,
+      isDragging: ze
+    } = an({ id: n }), Xt = {
+      transform: ln.Transform.toString(ye),
+      transition: He,
+      opacity: ze ? 0.5 : 1,
+      width: r,
+      minWidth: r
+    };
+    let fe = !1;
+    if (O && S.length > 0) {
+      const F = S[0][0];
+      (F === n || F === "csat_score" && n === "evaluation.csat_score") && (fe = !0);
+    } else
+      fe = me === n;
+    const Ut = be === "asc", Gt = e.filterable === !0;
+    if (!t)
+      return /* @__PURE__ */ i(
+        "th",
+        {
+          style: {
+            width: r,
+            minWidth: r,
+            backgroundColor: "var(--primary-foreground)"
+          },
+          className: "sticky top-[57px] z-10 border-b border-[var(--border-strong)] px-4 py-2 text-left",
+          children: Gt ? /* @__PURE__ */ p("div", { className: "relative", children: [
+            /* @__PURE__ */ i(
+              Filter,
+              {
+                size: 12,
+                className: "absolute left-2 top-1/2 -translate-y-1/2 text-[var(--text-faint)] pointer-events-none"
+              }
+            ),
+            /* @__PURE__ */ i(
+              "input",
+              {
+                type: "text",
+                placeholder: "Filter...",
+                value: q[n] || "",
+                onChange: (F) => {
+                  F.stopPropagation(), Tt(n, 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__ */ i("div", { className: "h-[34px]" })
+        }
+      );
+    const Ke = J === n, Me = Ne(q[n]), Jt = e.sortable !== !1 && (d || fe), Qt = e.filterable !== !1 && !s && (d || Ke || Me);
+    return /* @__PURE__ */ p(
+      "th",
+      {
+        ref: B,
+        onMouseEnter: () => u(!0),
+        onMouseLeave: () => u(!1),
+        style: {
+          ...Xt,
+          padding: "0 12px",
+          height: 36,
+          textAlign: s ? "center" : "left",
+          fontWeight: 500,
+          fontSize: "14px",
+          letterSpacing: "normal",
+          textTransform: "none",
+          color: "#0b0b0b",
+          cursor: e.sortable !== !1 ? "pointer" : "default",
+          width: r,
+          borderRight: "none",
+          userSelect: "none",
+          background: d || Ke ? "#e6e6e6" : "#f2f2f0",
+          borderBottom: "1px solid #e6e6e6",
+          position: "sticky",
+          top: 0,
+          zIndex: 10,
+          fontFamily: "var(--font-sans)",
+          transition: "background 100ms ease"
+        },
+        children: [
+          !s && /* @__PURE__ */ i(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: 1,
+                height: 16,
+                background: "#e6e6e6",
+                pointerEvents: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ p(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "4px",
+                justifyContent: s ? "center" : "flex-start",
+                position: "relative",
+                minHeight: 20
+              },
+              children: [
+                !s && /* @__PURE__ */ i(
+                  "div",
+                  {
+                    ...g,
+                    ...K,
+                    style: { cursor: "grab", color: "rgba(11, 11, 11, 0.36)", display: "inline-flex", alignItems: "center" },
+                    children: /* @__PURE__ */ i(Ge, { size: 14 })
+                  }
+                ),
+                /* @__PURE__ */ i(
+                  "span",
+                  {
+                    onClick: () => e.sortable !== !1 && dt(n),
+                    style: { cursor: e.sortable !== !1 ? "pointer" : "default", flex: 1, lineHeight: "20px" },
+                    children: e.label
+                  }
+                ),
+                Jt && /* @__PURE__ */ i(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (F) => {
+                      F.stopPropagation(), dt(n);
+                    },
+                    title: "Sort",
+                    style: {
+                      background: "transparent",
+                      border: "none",
+                      padding: 4,
+                      borderRadius: 4,
+                      cursor: "pointer",
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: fe ? "#0b0b0b" : "rgba(11, 11, 11, 0.55)"
+                    },
+                    children: fe ? Ut ? /* @__PURE__ */ i(pn, { size: 14, strokeWidth: 1.75 }) : /* @__PURE__ */ i(hn, { size: 14, strokeWidth: 1.75 }) : /* @__PURE__ */ i(mn, { size: 14, strokeWidth: 1.75 })
+                  }
+                ),
+                Qt && /* @__PURE__ */ p(
+                  "button",
+                  {
+                    type: "button",
+                    ref: (F) => {
+                      Ze.current[n] = F;
+                    },
+                    onClick: (F) => {
+                      F.stopPropagation(), Rt(n, F.currentTarget);
+                    },
+                    title: "Filter",
+                    style: {
+                      position: "relative",
+                      background: Ke || Me ? "#D8D8D8" : "transparent",
+                      border: "none",
+                      padding: 4,
+                      borderRadius: 4,
+                      cursor: "pointer",
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: Me ? "#0b0b0b" : "rgba(11, 11, 11, 0.7)"
+                    },
+                    children: [
+                      /* @__PURE__ */ i(gn, { size: 14, strokeWidth: 1.75 }),
+                      Me && /* @__PURE__ */ i(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          style: {
+                            position: "absolute",
+                            top: 0,
+                            right: 0,
+                            width: 6,
+                            height: 6,
+                            borderRadius: "50%",
+                            background: "#0B0B0B"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          !s && /* @__PURE__ */ i(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                right: 0,
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: 1,
+                height: 16,
+                background: "#e6e6e6",
+                pointerEvents: "none"
+              }
+            }
+          ),
+          !s && /* @__PURE__ */ i(
+            "div",
+            {
+              role: "separator",
+              "aria-orientation": "vertical",
+              "aria-label": `Resize ${e.label || n} column`,
+              title: "Drag to resize column",
+              onMouseDown: (F) => Bt(F, e, r),
+              onClick: (F) => F.stopPropagation(),
+              onMouseEnter: (F) => {
+                F.currentTarget.style.background = "rgba(30, 33, 37, 0.18)";
+              },
+              onMouseLeave: (F) => {
+                F.currentTarget.style.background = "transparent";
+              },
+              style: {
+                position: "absolute",
+                top: 0,
+                right: -2,
+                width: 4,
+                height: "100%",
+                cursor: "col-resize",
+                zIndex: 4,
+                background: "transparent"
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  const ft = lt ? a.find((e) => I(e) === lt) : null, pt = ({ col: e, columnId: t, isSelected: n, draggable: s, isAction: r, actualIndex: d }) => {
+    const u = s && te === d, g = s && Mt === d && te !== null && te !== d;
+    n ? at.has(t) : it.has(t);
+    const K = n ? !at.has(t) : it.has(t);
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        draggable: s,
+        onDragStart: s ? (B) => Ot(B, d) : void 0,
+        onDragEnd: s ? It : void 0,
+        onDragOver: s ? (B) => jt(B, d) : void 0,
+        onDragLeave: s ? Pt : void 0,
+        onDrop: s ? (B) => _t(B, d) : void 0,
+        onClick: () => {
+          r || At(t);
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          padding: "2px 0",
+          cursor: r ? "default" : s ? "grab" : "pointer",
+          opacity: u ? 0.5 : 1,
+          background: g ? "#F2F2F0" : "transparent",
+          borderRadius: 6
+        },
+        children: [
+          /* @__PURE__ */ i(
+            "span",
+            {
+              style: {
+                width: 16,
+                height: 16,
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "#989898",
+                visibility: s ? "visible" : "hidden",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ i(Ge, { size: 14, strokeWidth: 1.75 })
+            }
+          ),
+          /* @__PURE__ */ i(
+            "span",
+            {
+              style: {
+                width: 20,
+                height: 20,
+                borderRadius: 4,
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: K ? "#0B0B0B" : "#FFFFFF",
+                border: `1px solid ${K ? "#0B0B0B" : "#676767"}`,
+                flexShrink: 0,
+                marginLeft: 8
+              },
+              children: K && /* @__PURE__ */ i(wt, { size: 14, color: "#FFFFFF", strokeWidth: 3 })
+            }
+          ),
+          /* @__PURE__ */ i(
+            "span",
+            {
+              style: {
+                flex: 1,
+                fontFamily: "var(--font-sans)",
+                fontSize: 14,
+                lineHeight: "20px",
+                color: "#0B0B0B",
+                marginLeft: 8
+              },
+              children: e.label
+            }
+          )
+        ]
+      }
+    );
+  }, Kt = ie ? /* @__PURE__ */ p(
+    "div",
+    {
+      ref: je,
+      style: {
+        position: "fixed",
+        top: `${st.top}px`,
+        left: `${st.left}px`,
+        width: 217,
+        maxHeight: 400,
+        overflow: "auto",
+        zIndex: 49,
+        background: "#FFFFFF",
+        border: "1px solid #E6E6E6",
+        borderRadius: 10,
+        padding: 12,
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        fontFamily: "var(--font-sans)",
+        boxShadow: "0 8px 24px rgba(11, 11, 11, 0.08)"
+      },
+      children: [
+        R.map((e, t) => {
+          const n = a.find((r) => I(r) === e);
+          if (!n)
+            return null;
+          const s = e === D;
+          return /* @__PURE__ */ i(Xe.Fragment, { children: pt({
+            col: n,
+            columnId: e,
+            isSelected: !0,
+            draggable: !s,
+            isAction: s,
+            actualIndex: t
+          }) }, `selected-${e}-${t}`);
+        }),
+        a.filter((e) => !R.includes(I(e))).map((e) => {
+          const t = I(e);
+          return /* @__PURE__ */ i(Xe.Fragment, { children: pt({
+            col: e,
+            columnId: t,
+            isSelected: !1,
+            draggable: !1,
+            isAction: !1,
+            actualIndex: -1
+          }) }, `unselected-${t}`);
+        }),
+        /* @__PURE__ */ i("div", { style: { height: 1, background: "#D9D9D9", margin: "0 -12px" } }),
+        /* @__PURE__ */ p(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              height: 30
+            },
+            children: [
+              /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.preventDefault(), e.stopPropagation();
+                    const t = xe.current ? [...xe.current] : a.map(I).slice(0, w);
+                    if (A.current = !1, se(Z(t)), Ae(/* @__PURE__ */ new Set()), Oe(/* @__PURE__ */ new Set()), typeof window < "u" && oe)
+                      try {
+                        localStorage.removeItem(oe);
+                      } catch {
+                      }
+                  },
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    padding: 0,
+                    cursor: "pointer",
+                    fontFamily: "var(--font-sans)",
+                    fontSize: 14,
+                    fontWeight: 500,
+                    color: "#323232"
+                  },
+                  children: "Reset"
+                }
+              ),
+              /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.preventDefault(), e.stopPropagation(), Te(!1);
+                  },
+                  style: {
+                    background: "#2E3236",
+                    color: "#FFFFFF",
+                    border: "none",
+                    borderRadius: 10,
+                    height: 28,
+                    padding: "0 14px",
+                    fontFamily: "var(--font-sans)",
+                    fontSize: 14,
+                    fontWeight: 600,
+                    cursor: "pointer"
+                  },
+                  children: "Apply"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) : null, ht = J ? a.find((e) => I(e) === J) : null, mt = ht ? /* @__PURE__ */ i(
+    zn,
+    {
+      column: ht,
+      columnId: J,
+      filterType: Ct(J),
+      position: St,
+      popoverRef: Le,
+      distinctValues: We(J),
+      initialValue: q[J],
+      onApply: (e) => {
+        $e(J, e), he(null);
+      },
+      onCancel: () => he(null)
+    },
+    J
+  ) : null;
+  return /* @__PURE__ */ p("div", { className: "w-full", style: { top: "130px", position: "sticky", zIndex: 35, backgroundColor: "var(--primary-foreground)" }, children: [
+    mt && Ye(mt, document.body),
+    a.length > 0 && /* @__PURE__ */ i(
+      "div",
+      {
+        className: "pt-2 pb-1",
+        style: {
+          position: "sticky",
+          zIndex: 35,
+          backgroundColor: "var(--primary-foreground)"
+        },
+        children: /* @__PURE__ */ p(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: 16,
+              flexWrap: "wrap"
+            },
+            children: [
+              T && /* @__PURE__ */ i("div", { style: { marginRight: "auto" }, children: /* @__PURE__ */ i(
+                xn,
+                {
+                  dateRangePicker: T.dateRangePicker,
+                  onWeekToDate: T.onWeekToDate,
+                  exportConfig: T.exportConfig,
+                  filterChipsConfig: T.filterChipsConfig,
+                  trailingActions: T.trailingActions
+                }
+              ) }),
+              /* @__PURE__ */ p("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ p(
+                  "button",
+                  {
+                    ref: ce,
+                    type: "button",
+                    onClick: () => Te(!ie),
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 10,
+                      height: 32,
+                      padding: "0 16px",
+                      background: "#FFFFFF",
+                      border: "1px solid #D9D9D9",
+                      borderRadius: 10,
+                      cursor: "pointer",
+                      fontFamily: "var(--font-sans)",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: "#2E3236",
+                      whiteSpace: "nowrap"
+                    },
+                    children: [
+                      /* @__PURE__ */ i(un, { size: 20, strokeWidth: 1.75 }),
+                      "Columns"
+                    ]
+                  }
+                ),
+                ie && Ye(Kt, document.body)
+              ] }),
+              /* @__PURE__ */ i(
+                "div",
+                {
+                  style: {
+                    background: "#D8D8D8",
+                    width: 260,
+                    height: 32,
+                    borderRadius: 11,
+                    padding: 1,
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  children: /* @__PURE__ */ p(
+                    "div",
+                    {
+                      style: {
+                        background: "#FFFFFF",
+                        flex: 1,
+                        height: 30,
+                        borderRadius: 10,
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 8,
+                        padding: "0 8px"
+                      },
+                      children: [
+                        /* @__PURE__ */ i(vt, { size: 18, color: "#989898", strokeWidth: 1.75 }),
+                        /* @__PURE__ */ i(
+                          "input",
+                          {
+                            type: "text",
+                            placeholder: "Search",
+                            value: Be,
+                            onChange: (e) => {
+                              qe(e.target.value), m ? m(1) : G(1);
+                            },
+                            style: {
+                              flex: 1,
+                              border: "none",
+                              outline: "none",
+                              background: "transparent",
+                              fontFamily: "var(--font-sans)",
+                              fontSize: 14,
+                              color: "#0B0B0B",
+                              minWidth: 0
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    Object.keys(q).length > 0 && /* @__PURE__ */ p(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          flexWrap: "wrap",
+          padding: "8px 0"
+        },
+        children: [
+          Object.entries(q).map(([e, t]) => {
+            const n = a.find((u) => I(u) === e);
+            if (!n || !Ne(t))
+              return null;
+            const s = kn(t), r = Dn(t), d = Cn(t);
+            return /* @__PURE__ */ p(
+              "span",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 8,
+                  height: 28,
+                  padding: "0 12px",
+                  borderRadius: 20,
+                  border: "1px solid #B2B2B0",
+                  background: "#F2F2F0",
+                  fontFamily: "var(--font-sans)",
+                  fontSize: 14,
+                  lineHeight: "20px",
+                  color: "#0B0B0B",
+                  whiteSpace: "nowrap"
+                },
+                children: [
+                  /* @__PURE__ */ p("span", { children: [
+                    /* @__PURE__ */ p("span", { style: { color: "#676767" }, children: [
+                      n.label,
+                      ": "
+                    ] }),
+                    /* @__PURE__ */ i("span", { children: s })
+                  ] }),
+                  r > 0 && /* @__PURE__ */ i(Rn, { count: r, values: d }),
+                  /* @__PURE__ */ i(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => $e(e, []),
+                      "aria-label": `Remove ${n.label} filter`,
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        padding: 0,
+                        cursor: "pointer",
+                        display: "inline-flex",
+                        color: "#676767"
+                      },
+                      children: /* @__PURE__ */ i(fn, { size: 14, strokeWidth: 2 })
+                    }
+                  )
+                ]
+              },
+              `chip-${e}`
+            );
+          }),
+          /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              onClick: Dt,
+              style: {
+                marginLeft: "auto",
+                background: "transparent",
+                border: "none",
+                padding: "0 4px",
+                cursor: "pointer",
+                fontFamily: "var(--font-sans)",
+                fontSize: 14,
+                fontWeight: 500,
+                color: "#323232"
+              },
+              children: "Reset"
+            }
+          )
+        ]
+      }
+    ),
+    a.length > 0 && ue.length > 0 ? /* @__PURE__ */ p(
+      Zt,
+      {
+        sensors: Lt,
+        collisionDetection: Vt,
+        onDragStart: Wt,
+        onDragEnd: $t,
+        children: [
+          /* @__PURE__ */ p("div", { style: {
+            borderRadius: 8,
+            border: "1px solid #E6E6E6",
+            overflow: "hidden",
+            background: "var(--primary-foreground)",
+            position: "relative",
+            top: "0.5rem"
+          }, children: [
+            P && /* @__PURE__ */ i("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__ */ p("div", { style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: "12px"
+            }, children: [
+              /* @__PURE__ */ i("p", { style: {
+                fontSize: "13px",
+                color: "rgba(30, 33, 37, 0.6)",
+                margin: 0
+              }, children: "Loading..." }),
+              /* @__PURE__ */ i(
+                Nn,
+                {
+                  src: "/BrandLoading.gif",
+                  alt: "Loading",
+                  width: 50,
+                  height: 50,
+                  unoptimized: !0,
+                  className: "mt-1"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ i("div", { className: "overflow-x-auto custom-thin-scrollbar-hidden", ref: Et, style: { maxHeight: "500px", overflowY: "auto", position: "relative", zIndex: 1 }, children: /* @__PURE__ */ p("table", { style: {
+              width: "auto",
+              minWidth: "100%",
+              borderCollapse: "collapse",
+              fontSize: "13px",
+              fontFamily: "var(--font-sans)"
+            }, children: [
+              /* @__PURE__ */ i("thead", { children: /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i(
+                en,
+                {
+                  items: R,
+                  strategy: tn,
+                  children: ue.map((e) => /* @__PURE__ */ i(Ht, { column: e, isHeaderRow: !0 }, `header-${I(e)}`))
+                }
+              ) }) }),
+              /* @__PURE__ */ i("tbody", { children: !P && Ce.length === 0 ? /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i(
+                "td",
+                {
+                  colSpan: ue.length,
+                  style: {
+                    padding: "32px",
+                    textAlign: "center",
+                    color: "rgba(30, 33, 37, 0.42)",
+                    fontSize: "12px",
+                    fontFamily: "var(--font-sans)"
+                  },
+                  children: "No results found"
+                }
+              ) }) : !P && Ce.length > 0 ? Ce.map((e, t) => /* @__PURE__ */ i(
+                "tr",
+                {
+                  "data-row-id": e.id || t,
+                  style: {
+                    borderBottom: "1px solid #e6e6e6",
+                    cursor: c ? "pointer" : "default",
+                    transition: "background 0.15s ease"
+                  },
+                  onClick: c ? (n) => {
+                    n.stopPropagation(), c(e, t);
+                  } : void 0,
+                  onMouseEnter: (n) => {
+                    n.currentTarget.style.background = "rgba(231, 212, 162, 0.12)";
+                  },
+                  onMouseLeave: (n) => {
+                    n.currentTarget.style.background = "transparent";
+                  },
+                  children: ue.map((n) => {
+                    const s = I(n), r = ct(s, n.width), d = e[s], u = n.render ? n.render(d, e) : d, g = r && r !== "auto", K = typeof u == "string" && u.trim() !== "", B = g && K, ye = B ? /* @__PURE__ */ i(_, { content: u, children: u }) : u;
+                    return /* @__PURE__ */ i(
+                      "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,
+                          fontFamily: "var(--font-sans)",
+                          ...B && { maxWidth: r || "200px" }
+                        },
+                        children: ye
+                      },
+                      s
+                    );
+                  })
+                },
+                t
+              )) : null })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ i(nn, { children: ft ? /* @__PURE__ */ i("div", { className: "bg-[var(--paper-high)] border border-[var(--border-strong)] rounded px-4 py-2 shadow-lg", children: /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ i(Ge, { size: 14, className: "text-[var(--text-faint)]" }),
+            /* @__PURE__ */ i("span", { className: "text-sm font-semibold text-[var(--text-ink)]", children: ft.label })
+          ] }) }) : null })
+        ]
+      }
+    ) : null,
+    (U ? x > 0 : De.length > 0) && /* @__PURE__ */ i(
+      bn,
+      {
+        page: H,
+        pageSizeOptions: [5, 10, 20, 50, 100],
+        pageSize: Q,
+        totalCount: U ? x : De.length,
+        currentDataLength: Ce.length,
+        onPageChange: Y,
+        onPageSizeChange: (e) => {
+          pe(e), Y(1);
+        },
+        showPageSizeSelector: !0
+      }
+    )
+  ] });
+}
+export {
+  _n as D,
+  xn as a
+};
+//# sourceMappingURL=DataTable2.es.js.map