@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/product/data-table.js

@@ -0,0 +1,2473 @@
+import { jsx as t, Fragment as ee, jsxs as b } from "react/jsx-runtime";
+import * as l from "react";
+import { useReactTable as os, getFacetedMinMaxValues as as, getFacetedUniqueValues as ls, getFacetedRowModel as is, getGroupedRowModel as cs, getExpandedRowModel as ds, getSortedRowModel as us, getPaginationRowModel as fs, getFilteredRowModel as gs, getCoreRowModel as ms, flexRender as be } from "@tanstack/react-table";
+import { useReactTable as To } from "@tanstack/react-table";
+import { useSensors as hs, useSensor as wr, MouseSensor as ps, TouchSensor as vs, DndContext as bs, closestCenter as xs } from "@dnd-kit/core";
+import { SortableContext as ys, horizontalListSortingStrategy as Cs, arrayMove as ws, useSortable as Ss } from "@dnd-kit/sortable";
+import { CSS as Ns } from "@dnd-kit/utilities";
+import { cn as V } from "../../lib/utils.js";
+import { Button as Me } from "../fundamental/button.js";
+import { Input as ft } from "../fundamental/input.js";
+import { AutocompleteSearch as Rs } from "../fundamental/autocomplete-search.js";
+import { Table as Is, TableHeader as Es, TableRow as G, TableHead as ut, TableBody as Ds, TableCell as le } from "../fundamental/table.js";
+import { Select as ks, SelectTrigger as zs, SelectValue as Bs, SelectContent as Ts, SelectItem as Sr } from "../fundamental/select.js";
+import { Checkbox as gt } from "../fundamental/checkbox.js";
+import { Icon as W } from "../fundamental/icon.js";
+import { Badge as xe } from "../fundamental/badge.js";
+import { Popover as Pr, PopoverTrigger as Vr, PopoverContent as Fr } from "../fundamental/popover.js";
+import { Command as $r, CommandInput as jr, CommandList as Ar, CommandEmpty as Lr, CommandGroup as Or, CommandItem as Hr } from "../fundamental/command.js";
+import { Pagination as Ms } from "../fundamental/pagination.js";
+import { Skeleton as Nr } from "../fundamental/skeleton.js";
+import { Spinner as qe } from "../fundamental/spinner.js";
+import { DataTableSettingsMenu as Ps } from "./data-table-settings-menu.js";
+import { TooltipProvider as Vs, Tooltip as Fs, TooltipTrigger as $s, TooltipContent as js } from "../fundamental/tooltip.js";
+function As(c, s) {
+  const [i, a] = l.useState(c);
+  return l.useEffect(() => {
+    const f = setTimeout(() => {
+      a(c);
+    }, s);
+    return () => {
+      clearTimeout(f);
+    };
+  }, [c, s]), i;
+}
+const Te = /* @__PURE__ */ l.memo(function({ children: s, align: i = "left" }) {
+  const a = l.useRef(null), [f, x] = l.useState(!1), [y, h] = l.useState("");
+  return l.useEffect(() => {
+    const p = a.current;
+    if (!p) return;
+    let v;
+    const R = () => {
+      clearTimeout(v), v = setTimeout(() => {
+        if (a.current) {
+          const T = a.current.scrollWidth > a.current.clientWidth, C = a.current.firstElementChild, A = C ? C.scrollWidth > C.clientWidth : !1;
+          x(T || A);
+        }
+      }, 150);
+    };
+    if (a.current) {
+      const T = a.current.scrollWidth > a.current.clientWidth, C = a.current.firstElementChild, A = C ? C.scrollWidth > C.clientWidth : !1;
+      x(T || A);
+    }
+    const D = new ResizeObserver(R);
+    return D.observe(p), () => {
+      clearTimeout(v), D.disconnect();
+    };
+  }, [s]), l.useEffect(() => {
+    a.current && h(a.current.textContent || "");
+  }, [s]), f ? /* @__PURE__ */ b(Fs, { children: [
+    /* @__PURE__ */ t($s, { asChild: !0, children: /* @__PURE__ */ t(
+      "div",
+      {
+        ref: a,
+        className: V("min-w-0 overflow-hidden truncate [&>*]:truncate", i === "right" && "text-right"),
+        children: s
+      }
+    ) }),
+    /* @__PURE__ */ t(js, { side: "top", className: "max-w-xs", children: y })
+  ] }) : /* @__PURE__ */ t(
+    "div",
+    {
+      ref: a,
+      className: V("min-w-0 overflow-hidden truncate [&>*]:truncate", i === "right" && "text-right"),
+      children: s
+    }
+  );
+}), Rr = (c, s, i, a) => {
+  const f = c.getValue(s), x = f != null ? String(f) : "", y = i.toLowerCase();
+  return x.toLowerCase().includes(y) ? !0 : x.toLowerCase().split(" ").some((p) => p.startsWith(y));
+}, Ls = (c, s, i) => {
+  if (!i || i.length === 0) return !0;
+  const a = c.getValue(s);
+  return i.includes(a);
+}, Eo = (c, s, i, a) => {
+  if (!i || i.trim() === "") return !0;
+  const f = String(i).toLowerCase(), x = (h) => {
+    const p = h.getAllCells().map((v) => v.column.id);
+    for (const v of p) {
+      const R = h.getValue(v);
+      if (R != null && String(R).toLowerCase().includes(f))
+        return !0;
+    }
+    return !1;
+  };
+  c.getParentRow?.()?.getParentRow?.() || c.getParentRow?.();
+  const y = x(c);
+  return a && y && a({ itemRank: 1 }), y;
+};
+function Os(c, s) {
+  for (const i of c) {
+    const a = typeof s == "function" ? s(i.original) : i.original?.[s];
+    if (a != null) {
+      if (typeof a == "number") return "number";
+      if (a instanceof Date) return "date";
+      if (typeof a == "string") {
+        const f = Date.parse(a);
+        return isNaN(f) ? "string" : "date";
+      }
+      return "unknown";
+    }
+  }
+  return "unknown";
+}
+function Ir(c) {
+  if (c.length === 0) return "";
+  const s = Math.min(...c), i = Math.max(...c);
+  return s === i ? String(s) : `${s} – ${i}`;
+}
+function Hs(c) {
+  return c.length === 0 ? "" : `Avg: ${(c.reduce((a, f) => a + f, 0) / c.length).toFixed(2)}`;
+}
+function Ws(c) {
+  return c.length === 0 ? "" : `Total: ${c.reduce((i, a) => i + a, 0)}`;
+}
+function Er(c) {
+  return `${c} ${c === 1 ? "item" : "items"}`;
+}
+function Dr(c, s) {
+  if (c.length === 0) return "";
+  const a = new Set(c).size, f = a === 1 || s.endsWith("s") ? s : s.endsWith("y") ? s.slice(0, -1) + "ies" : s + "s";
+  return `${a} ${f.toLowerCase()}`;
+}
+function Gs(c) {
+  if (c.length === 0) return "";
+  const s = /* @__PURE__ */ new Map();
+  c.forEach((f) => s.set(f, (s.get(f) || 0) + 1));
+  let i = 0, a = "";
+  return s.forEach((f, x) => {
+    f > i && (i = f, a = x);
+  }), `${a} (${i})`;
+}
+function kr(c) {
+  if (c.length === 0) return "";
+  const i = c.map((y) => y instanceof Date ? y : new Date(y)).filter((y) => !isNaN(y.getTime()));
+  if (i.length === 0) return "";
+  const a = new Date(Math.min(...i.map((y) => y.getTime()))), f = new Date(Math.max(...i.map((y) => y.getTime()))), x = (y) => y.toISOString().split("T")[0];
+  return a.getTime() === f.getTime() ? x(a) : `${x(a)} – ${x(f)}`;
+}
+function zr(c, s, i) {
+  const a = c.columnDef;
+  if (c.id === i || a?.meta?.renderInGroupedRows || a?.meta?.aggregation === !1) return null;
+  if (typeof a?.meta?.aggregation == "function") {
+    const R = "accessorKey" in a ? a.accessorKey : void 0;
+    return a.meta.aggregation(s, R);
+  }
+  const f = "accessorKey" in a ? a.accessorKey : void 0, x = "accessorFn" in a ? a.accessorFn : void 0, y = f || x;
+  if (!y) return null;
+  const h = s.map((R) => typeof y == "function" ? y(R.original, R.index) : R.original?.[y]).filter((R) => R != null);
+  if (h.length === 0) return null;
+  const p = a?.meta?.aggregation;
+  if (p && typeof p == "string")
+    switch (p) {
+      case "range":
+        return Ir(h);
+      case "average":
+        return Hs(h);
+      case "sum":
+        return Ws(h);
+      case "count":
+        return Er(h.length);
+      case "uniqueCount":
+        return Dr(
+          h.map(String),
+          a?.meta?.label || String(c.id)
+        );
+      case "mostCommon":
+        return Gs(h.map(String));
+      case "dateRange":
+        return kr(h);
+      default:
+        return null;
+    }
+  switch (Os(s, y)) {
+    case "number":
+      return Ir(h);
+    case "string":
+      return Dr(
+        h.map(String),
+        a?.meta?.label || String(c.id)
+      );
+    case "date":
+      return kr(h);
+    default:
+      return Er(h.length);
+  }
+}
+function Br({ columns: c, rows: s, showRowBorder: i = !0, showCellBorder: a = !0, skipHeader: f = !1, enableResponsiveWrapper: x = !0 }) {
+  const y = x ? "h-4 w-full max-w-full" : "h-4 w-[120px]", h = x ? "h-4 w-full max-w-full" : "h-4 w-[100px]";
+  return /* @__PURE__ */ b(ee, { children: [
+    !f && /* @__PURE__ */ t(G, { showBorder: i, children: Array.from({ length: c }).map((p, v) => /* @__PURE__ */ t(ut, { showBorder: a, className: "overflow-hidden", children: /* @__PURE__ */ t(Nr, { className: y }) }, v)) }),
+    Array.from({ length: s }).map((p, v) => /* @__PURE__ */ t(G, { showBorder: i, children: Array.from({ length: c }).map((R, D) => /* @__PURE__ */ t(
+      le,
+      {
+        showBorder: a,
+        showRowBorder: i,
+        className: "text-body-sm overflow-hidden",
+        children: /* @__PURE__ */ t(Nr, { className: h })
+      },
+      D
+    )) }, v))
+  ] });
+}
+const _s = /* @__PURE__ */ l.memo(function({
+  title: s = "No data",
+  description: i = "No items to display",
+  action: a,
+  customContent: f
+}) {
+  return f ? /* @__PURE__ */ t(ee, { children: f }) : /* @__PURE__ */ b("div", { className: "flex flex-col items-center justify-center py-[var(--space-2xl)] text-center", children: [
+    /* @__PURE__ */ t("p", { className: "text-body-medium-md text-[var(--color-text-primary)]", children: s }),
+    i && /* @__PURE__ */ t("p", { className: "text-body-sm text-[var(--color-text-secondary)] mt-[var(--space-xs)]", children: i }),
+    a && /* @__PURE__ */ t(
+      Me,
+      {
+        variant: "primary",
+        size: "s",
+        className: "mt-[var(--space-m)]",
+        onClick: a.onClick,
+        children: a.label
+      }
+    )
+  ] });
+}), qs = /* @__PURE__ */ l.memo(function({
+  title: s = "No results found",
+  description: i = "Try adjusting your search or filters",
+  action: a,
+  customContent: f
+}) {
+  return f ? /* @__PURE__ */ t(ee, { children: f }) : /* @__PURE__ */ b("div", { className: "flex flex-col items-center justify-center py-[var(--space-2xl)] text-center", children: [
+    /* @__PURE__ */ t("p", { className: "text-body-medium-md text-[var(--color-text-primary)]", children: s }),
+    i && /* @__PURE__ */ t("p", { className: "text-body-sm text-[var(--color-text-secondary)] mt-[var(--space-xs)]", children: i }),
+    a && /* @__PURE__ */ t(
+      Me,
+      {
+        variant: "default",
+        size: "s",
+        className: "mt-[var(--space-m)]",
+        onClick: a.onClick,
+        children: a.label
+      }
+    )
+  ] });
+}), Us = /* @__PURE__ */ l.memo(function({
+  error: s,
+  onRetry: i,
+  customContent: a
+}) {
+  return a ? /* @__PURE__ */ t(ee, { children: a }) : /* @__PURE__ */ b("div", { className: "flex flex-col items-center justify-center py-[var(--space-2xl)] text-center", children: [
+    /* @__PURE__ */ t("p", { className: "text-body-medium-md text-[var(--color-text-primary)]", children: "Something went wrong" }),
+    /* @__PURE__ */ t("p", { className: "text-body-sm text-[var(--color-text-secondary)] mt-[var(--space-xs)]", children: s?.message || "An error occurred while loading data" }),
+    i && /* @__PURE__ */ t(
+      Me,
+      {
+        variant: "default",
+        size: "s",
+        className: "mt-[var(--space-m)]",
+        onClick: i,
+        children: "Try again"
+      }
+    )
+  ] });
+}), Js = /* @__PURE__ */ l.memo(function() {
+  return /* @__PURE__ */ t("div", { className: "absolute top-0 left-0 right-0 h-[2px] overflow-hidden", children: /* @__PURE__ */ t("div", { className: "h-full w-full bg-[var(--color-background-brand)] animate-pulse" }) });
+}), Ks = /* @__PURE__ */ l.memo(function({
+  table: s,
+  searchKey: i,
+  searchPlaceholder: a = "Search...",
+  enableGlobalSearch: f = !1,
+  globalSearchPlaceholder: x = "Search all columns...",
+  globalFilter: y = "",
+  onGlobalFilterChange: h,
+  enableGlobalFaceting: p = !1,
+  enableGrouping: v = !1,
+  showSettingsMenu: R = !1,
+  enableAutocomplete: D = !1,
+  autocompleteSuggestions: T = [],
+  autocompleteMinCharacters: C = 2
+}) {
+  const A = s.getState().columnFilters.length > 0 || f && y.length > 0;
+  return /* @__PURE__ */ b("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ b("div", { className: "flex flex-1 items-center space-x-2", children: [
+      f && h && /* @__PURE__ */ t(ee, { children: D && T.length > 0 ? /* @__PURE__ */ t(
+        Rs,
+        {
+          value: y,
+          onValueChange: h,
+          suggestions: T,
+          placeholder: x,
+          minCharacters: C,
+          className: "h-8 w-[150px] lg:w-[250px]",
+          onSelect: h
+        }
+      ) : /* @__PURE__ */ t(
+        ft,
+        {
+          placeholder: x,
+          value: y,
+          onChange: (P) => h(P.target.value),
+          className: "h-8 w-[150px] lg:w-[250px]"
+        }
+      ) }),
+      i && !f && /* @__PURE__ */ t(
+        ft,
+        {
+          placeholder: a,
+          value: s.getColumn(i)?.getFilterValue() ?? "",
+          onChange: (P) => s.getColumn(i)?.setFilterValue(P.target.value),
+          className: "h-8 w-[150px] lg:w-[250px]"
+        }
+      ),
+      s.getAllColumns().filter((P) => P.getCanFilter() && P.columnDef.meta?.filterVariant).map((P) => /* @__PURE__ */ t(Qs, { column: P }, P.id)),
+      p && /* @__PURE__ */ t(Xs, { table: s }),
+      A && /* @__PURE__ */ b(
+        Me,
+        {
+          variant: "ghost",
+          onClick: () => {
+            s.resetColumnFilters(), f && h && h("");
+          },
+          className: "h-8 px-2 lg:px-3",
+          children: [
+            "Reset",
+            /* @__PURE__ */ t(W, { name: "x", className: "ml-2 h-4 w-4" })
+          ]
+        }
+      )
+    ] }),
+    R && /* @__PURE__ */ t("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ t(Wr, { table: s, enableGrouping: v }) })
+  ] });
+}), Xs = /* @__PURE__ */ l.memo(function({ table: s }) {
+  const [i, a] = l.useState([]), f = s.getAllColumns().filter(
+    (h) => h.columnDef.meta?.filterOptions && h.getCanFilter()
+  ), x = l.useMemo(() => {
+    const h = /* @__PURE__ */ new Map();
+    return f.forEach((p) => {
+      const v = p.getFacetedUniqueValues(), R = p.columnDef.meta?.filterOptions || [], D = p.columnDef.meta?.label || p.columnDef.header;
+      v.forEach((T, C) => {
+        const A = R.find((P) => P.value === C);
+        if (A && T > 0) {
+          const P = `${D}:${C}`;
+          h.set(P, {
+            count: T,
+            column: D,
+            label: A.label
+          });
+        }
+      });
+    }), Array.from(h.entries()).map(([p, v]) => ({
+      key: p,
+      value: p.split(":")[1],
+      ...v
+    })).sort((p, v) => v.count - p.count);
+  }, [f]), y = (h) => {
+    const p = i.includes(h) ? i.filter((v) => v !== h) : [...i, h];
+    a(p), f.forEach((v) => {
+      const R = v.columnDef.meta?.filterOptions || [], D = p.filter(
+        (T) => R.some((C) => C.value === T)
+      );
+      D.length > 0 ? v.columnDef.meta?.filterVariant === "multiselect" ? v.setFilterValue(D) : v.columnDef.meta?.filterVariant === "select" && v.setFilterValue(D[0]) : v.setFilterValue(void 0);
+    });
+  };
+  return x.length === 0 ? null : /* @__PURE__ */ b(Pr, { children: [
+    /* @__PURE__ */ t(Vr, { asChild: !0, children: /* @__PURE__ */ b(Me, { variant: "ghost", size: "s", className: "h-8 border-dashed", children: [
+      /* @__PURE__ */ t(W, { name: "filter", className: "mr-2 h-4 w-4" }),
+      "Global Faceting",
+      i.length > 0 && /* @__PURE__ */ b(ee, { children: [
+        /* @__PURE__ */ t("div", { className: "mx-2 h-4 w-px bg-[var(--color-border-primary)]" }),
+        /* @__PURE__ */ b(xe, { className: "rounded-s px-1 font-normal", children: [
+          i.length,
+          " selected"
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ t(Fr, { className: "w-[300px] p-0", align: "start", children: /* @__PURE__ */ b($r, { children: [
+      /* @__PURE__ */ t(jr, { placeholder: "Search values across all columns..." }),
+      /* @__PURE__ */ b(Ar, { children: [
+        /* @__PURE__ */ t(Lr, { children: "No results found" }),
+        /* @__PURE__ */ t(Or, { children: x.map((h) => {
+          const p = i.includes(h.value);
+          return /* @__PURE__ */ t(
+            Hr,
+            {
+              onSelect: () => y(h.value),
+              children: /* @__PURE__ */ b("div", { className: "flex items-center justify-between flex-1", children: [
+                /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ t(gt, { checked: p }),
+                  /* @__PURE__ */ b("div", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ t("span", { className: "text-body-sm", children: h.label }),
+                    /* @__PURE__ */ b("span", { className: "text-caption-sm text-[var(--color-text-secondary)]", children: [
+                      "in ",
+                      h.column
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ t(xe, { className: "ml-auto text-caption-sm px-1 py-0", children: h.count })
+              ] })
+            },
+            h.key
+          );
+        }) })
+      ] })
+    ] }) })
+  ] });
+}), Qs = /* @__PURE__ */ l.memo(function({ column: s }) {
+  const { filterVariant: i, filterOptions: a, label: f, placeholder: x } = s.columnDef.meta || {}, y = s.getFilterValue(), h = s.getFacetedUniqueValues();
+  if (i === "select" && a)
+    return /* @__PURE__ */ b(
+      ks,
+      {
+        value: y || "all",
+        onValueChange: (p) => s.setFilterValue(p === "all" ? "" : p),
+        children: [
+          /* @__PURE__ */ t(zs, { className: "h-8 w-[150px]", children: /* @__PURE__ */ t(Bs, { placeholder: x || `Filter ${f}` }) }),
+          /* @__PURE__ */ b(Ts, { children: [
+            /* @__PURE__ */ b(Sr, { value: "all", children: [
+              "All ",
+              f
+            ] }),
+            a.map((p) => {
+              const v = h.get(p.value) || 0;
+              return /* @__PURE__ */ t(Sr, { value: p.value, children: /* @__PURE__ */ b("div", { className: "flex items-center justify-between w-full gap-2", children: [
+                /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
+                  p.icon && /* @__PURE__ */ t(p.icon, { className: "h-4 w-4" }),
+                  p.label
+                ] }),
+                v > 0 && /* @__PURE__ */ t(xe, { className: "ml-auto text-caption-sm px-1 py-0", children: v })
+              ] }) }, p.value);
+            })
+          ] })
+        ]
+      }
+    );
+  if (i === "multiselect" && a) {
+    const p = y || [];
+    return /* @__PURE__ */ b(Pr, { children: [
+      /* @__PURE__ */ t(Vr, { asChild: !0, children: /* @__PURE__ */ b(Me, { variant: "ghost", size: "s", className: "h-8 border-dashed", children: [
+        /* @__PURE__ */ t(W, { name: "plus-circle", className: "mr-2 h-4 w-4" }),
+        f,
+        p.length > 0 && /* @__PURE__ */ b(ee, { children: [
+          /* @__PURE__ */ t("div", { className: "mx-2 h-4 w-px bg-[var(--color-border-primary)]" }),
+          /* @__PURE__ */ t(xe, { className: "rounded-s px-1 font-normal lg:hidden", children: p.length }),
+          /* @__PURE__ */ t("div", { className: "hidden space-x-1 lg:flex", children: p.length > 2 ? /* @__PURE__ */ b(xe, { className: "rounded-s px-1 font-normal", children: [
+            p.length,
+            " selected"
+          ] }) : a.filter((v) => p.includes(v.value)).map((v) => /* @__PURE__ */ t(xe, { className: "rounded-s px-1 font-normal", children: v.label }, v.value)) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ t(Fr, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ b($r, { children: [
+        /* @__PURE__ */ t(jr, { placeholder: x || `Search ${f}...` }),
+        /* @__PURE__ */ b(Ar, { children: [
+          /* @__PURE__ */ t(Lr, { children: "No results found" }),
+          /* @__PURE__ */ t(Or, { children: a.map((v) => {
+            const R = p.includes(v.value), D = h.get(v.value) || 0;
+            return /* @__PURE__ */ t(
+              Hr,
+              {
+                onSelect: () => {
+                  const T = R ? p.filter((C) => C !== v.value) : [...p, v.value];
+                  s.setFilterValue(T.length ? T : void 0);
+                },
+                children: /* @__PURE__ */ b("div", { className: "flex items-center justify-between flex-1", children: [
+                  /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ t(gt, { checked: R }),
+                    v.icon && /* @__PURE__ */ t(v.icon, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ t("span", { children: v.label })
+                  ] }),
+                  D > 0 && /* @__PURE__ */ t(xe, { className: "ml-auto text-caption-sm px-1 py-0", children: D })
+                ] })
+              },
+              v.value
+            );
+          }) })
+        ] })
+      ] }) })
+    ] });
+  }
+  return i === "number" ? /* @__PURE__ */ t(
+    ft,
+    {
+      placeholder: x || `Filter ${f}...`,
+      value: y || "",
+      onChange: (p) => s.setFilterValue(p.target.value),
+      className: "h-8 w-[150px]",
+      type: "number"
+    }
+  ) : /* @__PURE__ */ t(
+    ft,
+    {
+      placeholder: x || `Filter ${f}...`,
+      value: y || "",
+      onChange: (p) => s.setFilterValue(p.target.value),
+      className: "h-8 w-[150px]"
+    }
+  );
+}), Ys = /* @__PURE__ */ l.memo(function({ header: s, enableColumnOrdering: i, children: a }) {
+  const {
+    attributes: f,
+    listeners: x,
+    setNodeRef: y,
+    transform: h,
+    transition: p,
+    isDragging: v
+  } = Ss({
+    id: s.id,
+    disabled: !i
+  }), R = {
+    transform: Ns.Translate.toString(h),
+    // Only translate, no scale
+    transition: p,
+    opacity: v ? 0.5 : 1
+  };
+  return i ? /* @__PURE__ */ b(
+    "div",
+    {
+      ref: y,
+      style: R,
+      className: V(
+        "relative flex items-center",
+        v && "z-50"
+      ),
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex-1", children: a }),
+        i && /* @__PURE__ */ t(
+          "div",
+          {
+            className: "ml-2 p-1 !cursor-grab active:!cursor-grabbing hover:bg-[var(--color-background-neutral-subtlest-hovered)] rounded-s transition-colors",
+            ...f,
+            ...x,
+            children: /* @__PURE__ */ t(
+              W,
+              {
+                name: "grip-vertical",
+                className: "h-3 w-3 text-[var(--color-text-tertiary)]"
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ t(ee, { children: a });
+}), Wr = /* @__PURE__ */ l.memo(function({ table: s, enableGrouping: i = !1 }) {
+  const a = s.getAllColumns().filter((N) => N.getCanSort()).map((N) => ({
+    id: N.id,
+    label: N.columnDef.meta?.label || N.columnDef.header || N.id
+  })), f = s.getAllColumns().filter((N) => N.getCanGroup?.() || N.columnDef.enableGrouping).map((N) => ({
+    id: N.id,
+    label: N.columnDef.meta?.label || N.columnDef.header || N.id
+  })), x = s.getAllColumns().filter((N) => typeof N.accessorFn < "u" && N.getCanHide()).map((N) => ({
+    id: N.id,
+    label: N.columnDef.meta?.label || N.columnDef.header || N.id
+  })), y = x.filter((N) => s.getColumn(N.id)?.getIsVisible()).map((N) => N.id), h = s.getState().sorting[0], p = h?.id, v = h?.desc ? "desc" : "asc", D = s.getState().grouping[0] || "";
+  return /* @__PURE__ */ t(
+    Ps,
+    {
+      sortableColumns: a,
+      selectedSortColumn: p,
+      sortDirection: v,
+      onSortChange: (N) => {
+        s.setSorting([{ id: N, desc: v === "desc" }]);
+      },
+      onSortDirectionChange: (N) => {
+        h && s.setSorting([{ id: h.id, desc: N === "desc" }]);
+      },
+      groupableColumns: i ? f : [],
+      selectedGroupColumn: D,
+      onGroupChange: (N) => {
+        !N || N === "none" ? s.setGrouping([]) : s.setGrouping([N]);
+      },
+      columns: x,
+      visibleColumns: y,
+      onColumnVisibilityChange: (N, Ue) => {
+        s.getColumn(N)?.toggleVisibility(Ue);
+      }
+    }
+  );
+}), Do = /* @__PURE__ */ l.memo(function({
+  column: s,
+  title: i,
+  className: a
+}) {
+  const f = s.columnDef.meta?.align || "left", x = s.columnDef.meta?.truncate !== !1, y = s.getIsSorted();
+  return s.getCanSort() ? /* @__PURE__ */ b(
+    "div",
+    {
+      className: V(
+        "flex items-center gap-1",
+        f === "right" && "justify-end",
+        y && "!text-[var(--color-text-brand-bold)]",
+        a
+      ),
+      children: [
+        y && /* @__PURE__ */ t(
+          W,
+          {
+            name: y === "desc" ? "arrow-down-wide-narrow" : "arrow-down-narrow-wide",
+            className: "h-4 w-4 !text-[var(--color-icon-brand-bold)]"
+          }
+        ),
+        x ? /* @__PURE__ */ t(Te, { align: f, children: /* @__PURE__ */ t("span", { children: i }) }) : /* @__PURE__ */ t("span", { children: i })
+      ]
+    }
+  ) : x ? /* @__PURE__ */ t(Te, { align: f, children: /* @__PURE__ */ t("div", { className: V(f === "right" ? "text-right" : "text-left", a), children: i }) }) : /* @__PURE__ */ t("div", { className: V(f === "right" ? "text-right" : "text-left", a), children: i });
+}), Zs = /* @__PURE__ */ l.memo(function({
+  table: s,
+  enableGrouping: i = !1,
+  hideChildrenForSingleItemGroups: a = {},
+  footerLabel: f,
+  onNextPageHover: x,
+  onPreviousPageHover: y,
+  paginationVariant: h = "full",
+  pageSizeOptions: p = [10, 25, 50, 100]
+}) {
+  const v = s.getState().pagination.pageIndex + 1, R = s.getState().pagination.pageSize, D = i && !s.options.manualPagination ? s.getPrePaginationRowModel().rows.filter((P) => P.depth === 0).length : s.getRowCount(), T = s.getFilteredSelectedRowModel().rows.length, C = (P) => {
+    s.setPageIndex(P - 1);
+  }, A = (P) => {
+    s.setPageSize(P);
+  };
+  return /* @__PURE__ */ b("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ t("div", { className: "flex-1 text-body-sm text-[var(--color-text-secondary)]", children: f ? /* @__PURE__ */ b("div", { className: "flex items-center gap-[var(--space-m)]", children: [
+      f,
+      T > 0 && /* @__PURE__ */ b("span", { children: [
+        "· ",
+        T,
+        " of ",
+        D,
+        " row(s) selected"
+      ] })
+    ] }) : T > 0 && /* @__PURE__ */ b("span", { children: [
+      T,
+      " of ",
+      D,
+      " row(s) selected."
+    ] }) }),
+    /* @__PURE__ */ t(
+      Ms,
+      {
+        variant: h,
+        currentPage: v,
+        totalItems: D,
+        pageSize: R,
+        onPageChange: C,
+        onPageSizeChange: A,
+        pageSizeOptions: p,
+        onNextPageHover: x,
+        onPreviousPageHover: y
+      }
+    )
+  ] });
+}), eo = /* @__PURE__ */ l.memo(function({
+  onLoadMore: s,
+  isLoading: i
+}) {
+  const a = l.useRef(null);
+  return l.useEffect(() => {
+    const f = a.current;
+    if (!f || i) return;
+    const x = new IntersectionObserver(
+      (y) => {
+        y[0].isIntersecting && s();
+      },
+      { threshold: 0.1 }
+    );
+    return x.observe(f), () => x.disconnect();
+  }, [s, i]), /* @__PURE__ */ t(
+    "div",
+    {
+      ref: a,
+      className: "flex justify-center py-[var(--space-m)] border-t border-[var(--color-border-primary-subtle)]",
+      children: i && /* @__PURE__ */ t(qe, { size: "s" })
+    }
+  );
+});
+function to(c) {
+  let s = 0;
+  const i = (a, f) => {
+    a.forEach((x) => {
+      x.depth > s && (s = x.depth), x.subRows && x.subRows.length > 0 && i(x.subRows);
+    });
+  };
+  return i(c), s;
+}
+function Tr(c, s) {
+  const { enableGrouping: i, enableExpanding: a, nestedRowStyling: f, expandingRowColors: x, maxDepth: y } = s, h = c.depth, p = c.getIsGrouped?.(), v = c.getIsExpanded(), R = c.subRows && c.subRows.length > 0, D = R ? v ? "expanded" : "collapsed" : "leaf", T = () => {
+    let C = c;
+    for (; C; ) {
+      if (C.getIsExpanded()) return !0;
+      C = C.getParentRow?.();
+    }
+    return !1;
+  };
+  if (f?.colors && f.colors[h] !== void 0) {
+    const C = f.colors[h];
+    if (typeof C == "string")
+      return C;
+    if (typeof C == "object") {
+      if (D === "expanded" && C.expanded)
+        return C.expanded;
+      if (D === "collapsed" && C.collapsed)
+        return C.collapsed;
+      if (D === "leaf" && C.leaf)
+        return C.leaf;
+      if (C.default)
+        return C.default;
+    }
+  }
+  if (a && !p && x) {
+    const C = y - h;
+    if (C === 0 && x.children)
+      return x.children;
+    if (C > 0) {
+      if (v && x.expandedParent)
+        return x.expandedParent;
+      if (!v && x.collapsedParent)
+        return x.collapsedParent;
+    }
+  }
+  return p ? v ? "var(--blue-50)" : "var(--color-background-neutral-subtlest)" : i && h === 1 ? "var(--blue-25)" : a && !p ? h === 0 && (!R || !T()) ? "" : (y - h) % 2 === 0 ? "var(--blue-25)" : "var(--blue-50)" : "";
+}
+function ro(c, s) {
+  if (s) {
+    if (s.heights && s.heights[c] !== void 0)
+      return s.heights[c];
+    if (s.defaultHeight)
+      return s.defaultHeight;
+  }
+}
+function Mr(c, s, i, a, f, x) {
+  const y = c.groupingColumnId, h = f[y] ?? !1, p = x[y] ?? !1, R = h && p && c.subRows.length <= 1 ? null : c.subRows.length > 1 ? /* @__PURE__ */ t(
+    "button",
+    {
+      tabIndex: -1,
+      onClick: c.getToggleExpandedHandler(),
+      className: "flex h-[var(--size-s)] w-[var(--size-s)] cursor-pointer items-center justify-center rounded-s text-[var(--color-text-secondary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+      children: /* @__PURE__ */ t(
+        W,
+        {
+          name: a ? "chevron-down" : "chevron-right",
+          className: "h-3 w-3"
+        }
+      )
+    }
+  ) : (
+    // Spacer to maintain alignment when there's only 1 item
+    /* @__PURE__ */ t("div", { className: "h-[var(--size-s)] w-[var(--size-s)]" })
+  ), D = c.subRows.length > 1 ? /* @__PURE__ */ t(xe, { appearance: "subtle", size: "s", truncate: !1, children: c.subRows.length }) : null;
+  if (i) {
+    const T = s.getAllColumns().find((C) => C.id === i);
+    if (T) {
+      const C = T.columnDef;
+      if (C.aggregatedCell) {
+        const A = c.getAllCells().find((P) => P.column.id === i);
+        return /* @__PURE__ */ b("div", { className: "flex items-center gap-[var(--space-s)] font-medium text-[var(--color-text-primary)]", children: [
+          R,
+          /* @__PURE__ */ b("div", { className: "flex items-center gap-[var(--space-s)]", children: [
+            A ? be(C.aggregatedCell, A.getContext()) : null,
+            D
+          ] })
+        ] });
+      } else {
+        const A = c.subRows[0]?.original?.[i];
+        return /* @__PURE__ */ b("div", { className: "flex items-center gap-[var(--space-s)] font-medium text-[var(--color-text-primary)]", children: [
+          R,
+          /* @__PURE__ */ b("div", { className: "flex items-center gap-[var(--space-s)]", children: [
+            /* @__PURE__ */ t("span", { className: "font-medium", children: String(A) }),
+            D
+          ] })
+        ] });
+      }
+    }
+  }
+  return /* @__PURE__ */ b("div", { className: "flex items-center gap-[var(--space-s)] font-medium text-[var(--color-text-primary)]", children: [
+    R,
+    /* @__PURE__ */ b("div", { className: "flex items-center gap-[var(--space-s)]", children: [
+      /* @__PURE__ */ t("span", { className: "font-medium", children: String(c.getGroupingValue(c.groupingColumnId)) }),
+      D
+    ] })
+  ] });
+}
+function ko({
+  columns: c,
+  data: s,
+  searchKey: i,
+  searchPlaceholder: a,
+  title: f,
+  caption: x,
+  className: y,
+  stickyHeader: h = !1,
+  stickyFirstColumn: p = !1,
+  stickyLeftColumns: v = 0,
+  stickyRightColumns: R = 0,
+  enableResponsiveWrapper: D = !0,
+  showScrollIndicators: T = !1,
+  minTableWidth: C = "900px",
+  isLoading: A = !1,
+  loadingBehavior: P = "replace",
+  loadingRowCount: N = 10,
+  borderStyle: Ue = "both",
+  defaultVerticalAlign: Ie = "middle",
+  enableGlobalSearch: ie = !1,
+  globalSearchPlaceholder: Gr = "Search all columns...",
+  enableAutocomplete: mt = !1,
+  globalSearchColumns: Je,
+  autocompleteMinCharacters: _r = 2,
+  enableGlobalFaceting: qr = !1,
+  enableColumnResizing: te = !1,
+  columnResizeMode: Ur = "onChange",
+  enableColumnResizePersistence: Ke = !1,
+  enablePaginationPersistence: ht = !1,
+  storageKey: Y = "data-table-columns",
+  enableExpanding: _ = !1,
+  getSubRows: Jr,
+  expandingRowColors: O,
+  nestedRowStyling: pt,
+  enableGrouping: z = !1,
+  groupedColumnMode: Kr = !1,
+  enableManualGrouping: Xr = !1,
+  groupDisplayColumn: Xe,
+  hideChildrenForSingleItemGroups: ye = {},
+  hideExpanderForSingleItemGroups: Vt = {},
+  enableRowPinning: Ee = !1,
+  keepPinnedRows: Ft = !0,
+  enableVirtualization: Qr = !1,
+  // virtualContainerHeight = 600,
+  // virtualRowHeight = 40,
+  // virtualOverscan = 10,
+  nestedHeaders: Qe = [],
+  enableNestedHeaders: Yr = !1,
+  enableColumnOrdering: Ye = !1,
+  enableRowSelection: fe = !1,
+  showHeader: Pe = !0,
+  showPagination: vt = !0,
+  paginationVariant: Zr = "full",
+  pageSizeOptions: en = [10, 25, 50, 100],
+  footerLabel: tn,
+  onTableReady: bt,
+  initialState: Ve,
+  // Controlled state props
+  sorting: $t,
+  onSortingChange: rn,
+  columnVisibility: jt,
+  onColumnVisibilityChange: nn,
+  grouping: At,
+  onGroupingChange: sn,
+  columnOrder: Lt,
+  onColumnOrderChange: on,
+  columnSizing: xt,
+  onColumnSizingChange: an,
+  pagination: Ot,
+  onPaginationChange: ln,
+  expanded: Ce,
+  onExpandedChange: yt,
+  renderSectionHeaderRow: Ht,
+  renderSubComponent: J,
+  getRowCanExpand: cn,
+  autoExpandChildren: Wt = !1,
+  // Row click props
+  onRowClick: K,
+  isRowClickable: we,
+  clickableRowClassName: Gt,
+  groupPreservingSearch: Ze = !1,
+  // Active row props
+  activeRowId: Fe,
+  activeRowClassName: _t,
+  getRowId: Ct,
+  onActiveRowChange: qt,
+  // Callback props
+  onRowSelectionChange: wt,
+  onNextPageHover: dn,
+  onPreviousPageHover: un,
+  onRowUpdate: no,
+  // Infinite scroll props
+  onLoadMore: Ut,
+  hasMoreData: fn,
+  isLoadingMore: gn,
+  // Error handling props
+  error: Jt,
+  onRetry: mn,
+  errorComponent: hn,
+  // Empty state props
+  emptyState: pn,
+  emptyStateTitle: vn = "No data",
+  emptyStateDescription: bn = "No items to display",
+  emptyStateAction: xn,
+  // No results state props
+  noResultsState: yn,
+  noResultsTitle: Cn = "No results found",
+  noResultsDescription: wn = "Try adjusting your search or filters",
+  noResultsAction: Sn,
+  // Refetching props
+  isRefetching: Nn = !1,
+  // Server-side mode props
+  manualSorting: Kt = !1,
+  manualFiltering: Xt = !1,
+  manualPagination: et = !1,
+  rowCount: Rn,
+  // Server-side expansion props
+  manualExpanding: Qt = !1,
+  onLoadChildren: tt,
+  expandingRowsLoading: rt,
+  subComponentLoading: nt,
+  onSubComponentLoad: De,
+  // Server-side error handling props
+  expandingRowsError: so,
+  subComponentError: Yt,
+  onExpandError: $e
+}) {
+  const st = D || !!(v && v > 0) || !!(R && R > 0), [In, En] = l.useState([]), [Dn, kn] = l.useState({}), [zn, Bn] = l.useState(Ve?.grouping || []), [Tn, Mn] = l.useState(() => {
+    const e = c.map((r) => r.id || r.accessorKey || `column-${Math.random()}`);
+    return fe ? ["select", ...e] : e;
+  }), [Pn, Vn] = l.useState(xt || Ve?.columnSizing || {}), [Fn, $n] = l.useState(() => {
+    if (ht && Y) {
+      const e = localStorage.getItem(`${Y}-pagination`);
+      if (e)
+        try {
+          const r = JSON.parse(e);
+          if (typeof r.pageIndex == "number" && typeof r.pageSize == "number")
+            return r;
+        } catch (r) {
+          console.warn("Failed to parse saved pagination:", r);
+        }
+    }
+    return Ve?.pagination || { pageIndex: 0, pageSize: 10 };
+  }), [Zt, jn] = l.useState([]), [ke, An] = l.useState({}), [St, er] = l.useState(""), [Ln, tr] = l.useState(Ve?.expanded || {}), [On, Hn] = l.useState(Ve?.rowPinning || { top: [], bottom: [] }), [Wn, ot] = l.useState(""), [X, Nt] = l.useState([-1, 0]), Rt = l.useRef(null), je = l.useRef(/* @__PURE__ */ new Map()), Ae = l.useRef(/* @__PURE__ */ new Map());
+  l.useEffect(() => () => {
+    je.current.forEach((e) => e.abort()), Ae.current.forEach((e) => e.abort());
+  }, []), l.useEffect(() => {
+    wt && wt(ke);
+  }, [ke, wt]), l.useEffect(() => {
+    qt?.(Fe);
+  }, [Fe, qt]);
+  const rr = $t !== void 0, nr = jt !== void 0, sr = At !== void 0, or = Lt !== void 0, ar = xt !== void 0, lr = Ot !== void 0, It = Ce !== void 0, ge = rr ? $t : In, Gn = nr ? jt : Dn, me = sr ? At : zn, Le = or ? Lt : Tn, at = ar ? xt : Pn, re = lr ? Ot : Fn, Q = It ? Ce : Ln, _n = rr ? rn : En, qn = nr ? nn : kn, Un = sr ? sn : Bn, ir = or ? on : Mn, cr = ar ? an : Vn, Jn = lr ? ln : $n, Et = l.useCallback(
+    (e) => {
+      const r = typeof e == "object" && e !== null && !(e instanceof Function) && Object.keys(e).length === 0;
+      if (It && yt) {
+        if (r && (Ce === !0 || typeof Ce == "object" && Ce !== null && Object.keys(Ce).length > 0))
+          return;
+        yt(e);
+      } else
+        tr(r ? (n) => n === !0 || typeof n == "object" && n !== null && Object.keys(n).length > 0 ? n : e : e);
+    },
+    [It, yt, Ce]
+  ), Kn = l.useMemo(() => N !== void 0 && N !== 10 ? N : re.pageSize, [N, re.pageSize]), L = As(St, 300), Xn = l.useMemo(() => {
+    if (!mt || !ie)
+      return [];
+    const e = /* @__PURE__ */ new Set();
+    return s.forEach((r) => {
+      Je && Je.length > 0 ? Je.forEach((n) => {
+        const u = r[n];
+        u != null && String(u).trim() !== "" && e.add(String(u));
+      }) : Object.values(r).forEach((n) => {
+        n != null && String(n).trim() !== "" && e.add(String(n));
+      });
+    }), Array.from(e).sort();
+  }, [s, Je, mt, ie]), dr = l.useCallback((e, r, n) => {
+    if (!e || !r || r.length === 0)
+      return () => !0;
+    const u = e.toLowerCase(), g = /* @__PURE__ */ new Set();
+    return n.forEach((m) => {
+      let S = !1;
+      for (const B in m) {
+        const F = m[B];
+        if (F != null && String(F).toLowerCase().includes(u)) {
+          S = !0;
+          break;
+        }
+      }
+      S && r.forEach((B) => {
+        const F = m[B];
+        F != null && g.add(String(F));
+      });
+    }), (m) => {
+      for (const S of r) {
+        const B = m.getValue(S);
+        if (B != null && g.has(String(B)))
+          return !0;
+      }
+      return !1;
+    };
+  }, []);
+  l.useEffect(() => {
+    if (Ke && Y) {
+      const e = localStorage.getItem(`${Y}-sizing`);
+      if (e)
+        try {
+          cr(JSON.parse(e));
+        } catch (r) {
+          console.warn("Failed to parse saved column sizing:", r);
+        }
+    }
+  }, [Ke, Y]), l.useEffect(() => {
+    Ke && Y && Object.keys(at).length > 0 && localStorage.setItem(`${Y}-sizing`, JSON.stringify(at));
+  }, [at, Ke, Y]), l.useEffect(() => {
+    ht && Y && localStorage.setItem(`${Y}-pagination`, JSON.stringify(re));
+  }, [re, ht, Y]);
+  const E = l.useMemo(() => {
+    switch (Ue) {
+      case "horizontal":
+        return { showRowBorder: !0, showCellBorder: !1 };
+      case "vertical":
+        return { showRowBorder: !1, showCellBorder: !0 };
+      case "both":
+        return { showRowBorder: !0, showCellBorder: !0 };
+      case "none":
+        return { showRowBorder: !1, showCellBorder: !1 };
+      default:
+        return { showRowBorder: !0, showCellBorder: !0 };
+    }
+  }, [Ue]), Dt = l.useCallback((e, r) => {
+    if (!K) return;
+    const n = r.target;
+    if (!(n.tagName === "BUTTON" || n.tagName === "A" || n.tagName === "INPUT" || n.closest("button") || n.closest("a") || n.closest("input")) && !(we && !we(e))) {
+      if (!we && e.getIsGrouped()) {
+        const g = e.groupingColumnId;
+        if (!((ye[g] ?? !1) && e.subRows && e.subRows.length === 1)) return;
+      }
+      K(e, r);
+    }
+  }, [K, we, ye]), Se = l.useCallback((e) => {
+    if (!K) return !1;
+    if (we) return we(e);
+    if (!e.getIsGrouped()) return !0;
+    const n = e.groupingColumnId;
+    return (ye[n] ?? !1) && e.subRows && e.subRows.length === 1;
+  }, [K, we, ye]), ur = (e) => e ? "![box-shadow:inset_3px_0_0_0_var(--color-border-brand-bold),inset_0_-1px_0_0_var(--color-border-primary-medium)]" : "![box-shadow:inset_3px_0_0_0_var(--color-border-brand-bold)]", ze = l.useCallback((e) => {
+    if (!Fe) return !1;
+    const r = Ct ? e.id : e.original?.id !== void 0 ? e.original.id : e.id;
+    return String(r) === String(Fe);
+  }, [Fe, Ct]), Oe = l.useMemo(() => p ? 1 : v || 0, [p, v]), Ne = l.useMemo(() => R || 0, [R]), fr = l.useMemo(() => {
+    const e = /* @__PURE__ */ new Set();
+    return c.forEach((r) => {
+      if (r.cell) {
+        const n = r.id || r.accessorKey;
+        n && e.add(String(n));
+      }
+    }), e;
+  }, [c]), kt = l.useMemo(() => {
+    const e = c.map((r) => {
+      let n = {
+        ...r,
+        // Set default minimum column width when resizing is enabled
+        ...te && !r.minSize ? { minSize: 80 } : {}
+      };
+      return r.enableGrouping || r.meta?.enableGrouping ? {
+        ...n,
+        enableGrouping: !0,
+        getGroupingValue: (u) => {
+          const g = r.accessorKey || r.accessorFn;
+          return typeof g == "string" && u.original ? u.original[g] : typeof g == "function" && u.original ? g(u.original) : u.getValue?.(r.id) || u[g] || "";
+        }
+      } : n;
+    });
+    return fe ? [{
+      id: "select",
+      size: 48,
+      minSize: 48,
+      maxSize: 48,
+      enableResizing: !1,
+      header: ({ table: n }) => /* @__PURE__ */ t(
+        gt,
+        {
+          tabIndex: -1,
+          checked: n.getIsAllPageRowsSelected() || n.getIsSomePageRowsSelected() && "indeterminate",
+          onCheckedChange: (u) => n.toggleAllPageRowsSelected(!!u),
+          "aria-label": "Select all"
+        }
+      ),
+      cell: ({ row: n }) => /* @__PURE__ */ t(
+        gt,
+        {
+          tabIndex: -1,
+          checked: n.getIsSelected(),
+          onCheckedChange: (u) => n.toggleSelected(!!u),
+          "aria-label": "Select row"
+        }
+      ),
+      enableSorting: !1,
+      enableHiding: !1,
+      enableGrouping: !1,
+      meta: {
+        label: "Select"
+      }
+    }, ...e] : e;
+  }, [c, fe]), zt = l.useMemo(() => s, [s]), Qn = l.useMemo(() => !Ze || !L ? Rr : dr(L, me, zt), [Ze, L, me, zt, dr]), w = os({
+    data: zt,
+    columns: kt,
+    getRowId: Ct,
+    filterFns: {
+      fuzzy: Rr,
+      multiSelect: Ls
+    },
+    state: {
+      sorting: ge,
+      columnFilters: Zt,
+      columnVisibility: Gn,
+      rowSelection: ke,
+      globalFilter: L,
+      columnSizing: at,
+      expanded: Q,
+      grouping: me,
+      rowPinning: On,
+      columnOrder: Le,
+      pagination: re
+    },
+    // Server-side mode configuration
+    manualSorting: Kt,
+    manualFiltering: Xt,
+    manualPagination: et,
+    rowCount: Rn,
+    // Required for server-side pagination
+    enableRowSelection: fe,
+    enableColumnPinning: !1,
+    // Disable TanStack Table pinning - using CSS approach
+    enableGlobalFilter: ie,
+    // Enable global filtering
+    globalFilterFn: Qn,
+    // Use group-preserving filter when enabled
+    enableColumnResizing: te,
+    columnResizeMode: Ur,
+    enableExpanding: _,
+    getSubRows: Jr,
+    getRowCanExpand: cn,
+    paginateExpandedRows: !1,
+    // Only paginate top-level rows, not expanded children
+    autoResetPageIndex: !1,
+    // Prevent pagination from resetting on data/filter/grouping changes
+    enableGrouping: z,
+    groupedColumnMode: Kr,
+    manualGrouping: Xr,
+    enableRowPinning: Ee,
+    keepPinnedRows: Ft,
+    onRowSelectionChange: An,
+    onSortingChange: _n,
+    onColumnFiltersChange: jn,
+    onColumnVisibilityChange: qn,
+    onGlobalFilterChange: er,
+    onColumnSizingChange: cr,
+    onExpandedChange: Et,
+    onGroupingChange: Un,
+    onRowPinningChange: Hn,
+    onColumnOrderChange: ir,
+    onPaginationChange: Jn,
+    getCoreRowModel: ms(),
+    // Conditionally include row models based on manual mode
+    getFilteredRowModel: Xt ? void 0 : gs(),
+    getPaginationRowModel: et || Qr ? void 0 : fs(),
+    getSortedRowModel: Kt ? void 0 : us(),
+    getExpandedRowModel: _ ? ds() : void 0,
+    getGroupedRowModel: z ? cs() : void 0,
+    getFacetedRowModel: is(),
+    getFacetedUniqueValues: ls(),
+    getFacetedMinMaxValues: as()
+  }), lt = l.useMemo(
+    () => to(w.getRowModel().rows),
+    [w.getRowModel().rows]
+  ), it = l.useMemo(() => {
+    if (!z) return null;
+    const e = /* @__PURE__ */ new Map();
+    return w.getGroupedRowModel?.()?.rows?.forEach((n) => {
+      n.subRows && n.subRows.length > 0 && e.set(n.id, n.subRows);
+    }), e;
+  }, [z, w]), { flatVisibleRows: ct, rowIdToFlatIndex: gr } = l.useMemo(() => {
+    const e = [], r = /* @__PURE__ */ new Map(), n = (g) => {
+      const m = e.length;
+      e.push(g), r.set(g.id, m), g.getIsExpanded() && (g.subRows && g.subRows.length > 0 ? g.subRows : it?.get(g.id) || []).forEach(n);
+    };
+    return w.getRowModel().rows.filter((g) => J || g.depth === 0).forEach(n), { flatVisibleRows: e, rowIdToFlatIndex: r };
+  }, [w, Q, it, J]), mr = l.useRef(void 0);
+  l.useEffect(() => {
+    if (!z) return;
+    const r = w.getPrePaginationRowModel().rows.filter((g) => g.depth === 0).length, n = re.pageSize, u = Math.max(1, Math.ceil(r / n));
+    mr.current !== u && (mr.current = u, w.setPageCount(u));
+  }, [
+    z,
+    // NOTE: Deliberately NOT including 'table' to avoid re-running on every render
+    // We access table methods inside but only re-run when these stable values change:
+    re.pageSize,
+    me.join(","),
+    // Join for efficient deep comparison
+    w.getPrePaginationRowModel().rows.length
+    // Row count changes
+  ]);
+  const hr = l.useRef({});
+  l.useEffect(() => {
+    if (!Wt) return;
+    const e = w.getState().expanded, r = hr.current, n = { ...e };
+    let u = !1;
+    w.getRowModel().rows.forEach((g) => {
+      const m = g.id, S = e[m] === !0, B = r[m] === !0;
+      S && !B && g.subRows && g.subRows.length > 0 && g.subRows.forEach((F) => {
+        e[F.id] !== !0 && (n[F.id] = !0, u = !0);
+      });
+    }), hr.current = e, u && Et(n);
+  }, [
+    Q,
+    Wt
+    // NOTE: Deliberately NOT including 'table' to avoid re-running on every render
+  ]);
+  const pr = l.useRef({});
+  l.useEffect(() => {
+    if (!tt && !De) return;
+    const e = w.getState().expanded, r = pr.current;
+    Object.keys(r).forEach((n) => {
+      const u = r[n], g = e[n];
+      if (u && !g) {
+        const m = je.current.get(n);
+        m && (m.abort(), je.current.delete(n));
+        const S = Ae.current.get(n);
+        S && (S.abort(), Ae.current.delete(n));
+      }
+    }), Object.keys(e).forEach((n) => {
+      const u = e[n], g = r[n];
+      if (u && !g) {
+        const m = w.getRow(n);
+        if (!m) return;
+        if (tt && Qt) {
+          const S = m.getIsGrouped() || m.subRows && m.subRows.length === 0 && m.getCanExpand(), B = rt?.[n] === !0, F = m.subRows && m.subRows.length > 0;
+          if (S && !B && !F) {
+            const o = new AbortController();
+            je.current.set(n, o), Promise.resolve(tt(m)).catch((M) => {
+              M?.name !== "AbortError" && $e && $e(m, M, "children");
+            }).finally(() => {
+              je.current.delete(n);
+            });
+          }
+        }
+        if (De && J && !m.getIsGrouped() && m.depth === 0 && !(nt?.[n] === !0)) {
+          const B = new AbortController();
+          Ae.current.set(n, B), Promise.resolve(De(m)).catch((F) => {
+            F?.name !== "AbortError" && $e && $e(m, F, "subComponent");
+          }).finally(() => {
+            Ae.current.delete(n);
+          });
+        }
+      }
+    }), pr.current = e;
+  }, [
+    Q,
+    tt,
+    De,
+    Qt,
+    J,
+    rt,
+    nt,
+    $e
+    // NOTE: Deliberately NOT including 'table' to avoid re-running on every render
+  ]), l.useEffect(() => {
+    if (!Ze || !L || !z)
+      return;
+    const e = {};
+    w.getFilteredRowModel().rows.forEach((n) => {
+      n.getIsGrouped() && n.subRows && n.subRows.length > 0 && (e[n.id] = !0);
+    }), Et((n) => {
+      const u = Object.keys(n).sort().join(","), g = Object.keys(e).sort().join(",");
+      return u === g ? n : e;
+    });
+  }, [L, Ze, z]);
+  const vr = l.useRef(me), br = l.useRef(ge);
+  l.useEffect(() => {
+    if (!et) return;
+    const e = JSON.stringify(me) !== JSON.stringify(vr.current), r = JSON.stringify(ge) !== JSON.stringify(br.current);
+    (e || r) && w.setPageIndex(0), vr.current = me, br.current = ge;
+  }, [me, ge, et, w]), l.useEffect(() => {
+    bt && bt(w);
+  }, [w, bt]), l.useEffect(() => {
+    if (ge.length > 0) {
+      const e = ge[0], r = c.find(
+        (g) => g.id === e.id || g.accessorKey === e.id
+      ), n = r?.meta?.label || r?.header || e.id, u = e.desc ? "descending" : "ascending";
+      ot(`Table sorted by ${n}, ${u}`);
+    }
+  }, [ge, c]), l.useEffect(() => {
+    if (L) {
+      const e = w.getFilteredRowModel().rows.length;
+      ot(`${e} result${e !== 1 ? "s" : ""} found for "${L}"`);
+    }
+  }, [L, w]), l.useEffect(() => {
+    const e = Object.keys(ke).filter((r) => ke[r]).length;
+    e > 0 && ot(`${e} row${e !== 1 ? "s" : ""} selected`);
+  }, [ke]), l.useEffect(() => {
+    const [e, r] = X, n = ct.length, u = w.getVisibleLeafColumns();
+    let g = e, m = r;
+    e >= 0 && e >= n && (g = Math.max(n - 1, -1)), r >= u.length && (m = Math.max(u.length - 1, 0)), (g !== e || m !== r) && Nt([g, m]);
+  }, [s.length, w, X, ct.length]), l.useEffect(() => {
+    const e = w.getPageCount();
+    e > 1 && ot(`Page ${re.pageIndex + 1} of ${e}`);
+  }, [re.pageIndex, w]);
+  const He = l.useCallback((e, r) => {
+    if (!r || !e) return e;
+    const n = e.toLowerCase(), u = r.toLowerCase(), g = [];
+    let m = 0, S = n.indexOf(u);
+    for (; S !== -1; )
+      S > m && g.push(e.substring(m, S)), g.push(
+        /* @__PURE__ */ t(
+          "span",
+          {
+            style: {
+              backgroundColor: "#fef3c7",
+              // Light yellow
+              fontWeight: 600,
+              padding: "2px 0"
+            },
+            children: e.substring(S, S + r.length)
+          },
+          `highlight-${m}-${S}`
+        )
+      ), m = S + r.length, S = n.indexOf(u, m);
+    return m < e.length && g.push(e.substring(m)), /* @__PURE__ */ t(ee, { children: g });
+  }, []), he = l.useCallback((e) => {
+    if (e == null) return "";
+    if (typeof e == "string" || typeof e == "number") return String(e);
+    if (Array.isArray(e)) return e.map(he).join("");
+    if (l.isValidElement(e)) {
+      const r = e;
+      if (typeof r.type == "function")
+        try {
+          if (r.type.prototype?.isReactComponent)
+            return he(r.props.children);
+          const u = r.type(r.props);
+          return he(u);
+        } catch {
+          return he(r.props.children);
+        }
+      return he(r.props.children);
+    }
+    return "";
+  }, []), dt = l.useCallback((e, r) => r ? he(e).toLowerCase().includes(r.toLowerCase()) : !1, [he]), ce = l.useCallback((e, r) => {
+    if (!r || e == null) return e;
+    if (typeof e == "string")
+      return He(e, r);
+    if (typeof e == "number")
+      return He(String(e), r);
+    if (Array.isArray(e))
+      return e.map((n, u) => /* @__PURE__ */ t(l.Fragment, { children: ce(n, r) }, u));
+    if (l.isValidElement(e)) {
+      const n = e;
+      if (typeof n.type == "function")
+        try {
+          if (n.type.prototype?.isReactComponent) {
+            const B = n.props.children;
+            return l.cloneElement(n, {}, ce(B, r));
+          }
+          const S = n.type(n.props);
+          return ce(S, r);
+        } catch {
+          const { children: S, ...B } = n.props;
+          return S == null ? n : l.cloneElement(
+            n,
+            B,
+            ce(S, r)
+          );
+        }
+      if (n.props.children === void 0 || n.props.children === null)
+        return n;
+      const { children: u, ...g } = n.props;
+      return l.cloneElement(
+        n,
+        g,
+        ce(u, r)
+      );
+    }
+    return e;
+  }, [He]), Be = l.useCallback((e) => {
+    if (!ie || !L)
+      return be(e.column.columnDef.cell, e.getContext());
+    if (fr.has(e.column.id)) {
+      const u = be(e.column.columnDef.cell, e.getContext());
+      return u == null || !dt(u, L) ? u : ce(u, L);
+    }
+    const n = e.getValue();
+    if (typeof n == "string" || typeof n == "number") {
+      const u = String(n);
+      return He(u, L);
+    }
+    return be(e.column.columnDef.cell, e.getContext());
+  }, [ie, L, He, fr, dt, ce]), xr = l.useCallback((e) => {
+    if (!ie || !L)
+      return be(e.column.columnDef.aggregatedCell, e.getContext());
+    const r = be(e.column.columnDef.aggregatedCell, e.getContext());
+    return r == null || !dt(r, L) ? r : ce(r, L);
+  }, [ie, L, dt, ce, he]), Yn = l.useRef(null), Zn = hs(
+    wr(ps, {
+      activationConstraint: {
+        distance: 8
+      }
+    }),
+    wr(vs, {
+      activationConstraint: {
+        delay: 200,
+        tolerance: 8
+      }
+    })
+  ), [, yr] = l.useState(null), es = (e) => {
+    Ye && yr(e.active.id);
+  }, ts = (e) => {
+    if (!Ye) return;
+    const { active: r, over: n } = e;
+    if (yr(null), r.id !== n?.id && n?.id) {
+      const u = Le.findIndex((m) => m === r.id), g = Le.findIndex((m) => m === n?.id);
+      if (u !== -1 && g !== -1) {
+        const m = ws(Le, u, g);
+        console.log("Column reorder:", {
+          activeId: r.id,
+          overId: n.id,
+          oldIndex: u,
+          newIndex: g,
+          oldOrder: Le,
+          newOrder: m
+        }), ir(m);
+      }
+    }
+  }, rs = l.useCallback((e) => {
+    const [r, n] = X, u = w.getVisibleLeafColumns(), g = ct, m = u.length, S = g.length, B = -1, F = S - 1;
+    let o = r, M = n, $ = !1;
+    switch (e.key) {
+      case "ArrowRight":
+        n < m - 1 && (M = n + 1, $ = !0);
+        break;
+      case "ArrowLeft":
+        n > 0 && (M = n - 1, $ = !0);
+        break;
+      case "ArrowDown":
+        r < F && (o = r + 1, $ = !0);
+        break;
+      case "ArrowUp":
+        r > B && (o = r - 1, $ = !0);
+        break;
+      case "Home":
+        (e.ctrlKey || e.metaKey) && (o = B), M = 0, $ = !0;
+        break;
+      case "End":
+        (e.ctrlKey || e.metaKey) && (o = F), M = m - 1, $ = !0;
+        break;
+      case "PageDown":
+        o = Math.min(r + 10, F), $ = !0;
+        break;
+      case "PageUp":
+        o = Math.max(r - 10, B), $ = !0;
+        break;
+      case "Enter":
+      case " ":
+        if (r === -1) {
+          const d = u[n];
+          d?.id === "select" && fe && e.key === " " ? (w.toggleAllPageRowsSelected(), $ = !0) : d?.getCanSort() && (d.toggleSorting(), $ = !0);
+        } else {
+          const d = g[r];
+          d && ((_ || z) && d.getCanExpand() ? (d.toggleExpanded(), $ = !0) : fe && e.key === " " && (d.toggleSelected(), $ = !0), !$ && e.key === "Enter" && K && Se(d) && (Dt(d, e), $ = !0));
+        }
+        break;
+      case "Escape":
+        document.activeElement instanceof HTMLElement && document.activeElement.blur(), $ = !0;
+        break;
+    }
+    if ($ && (e.preventDefault(), e.stopPropagation(), o !== r || M !== n)) {
+      Nt([o, M]);
+      const d = o === -1 ? `[data-header-col="${M}"]` : `[data-row="${o}"][data-col="${M}"]`, k = Rt.current?.querySelector(d);
+      k && k.focus();
+    }
+  }, [X, w, ct, _, z, fe]), ns = l.useCallback((e) => {
+    Rt.current?.contains(e.relatedTarget) || Nt([-1, 0]);
+  }, []), We = l.useMemo(() => {
+    const e = w.getVisibleFlatColumns(), r = /* @__PURE__ */ new Map();
+    let n = 0;
+    e.forEach((g, m) => {
+      const S = m < Oe, B = m >= e.length - Ne, F = S && m === Oe - 1, o = B && m === e.length - Ne;
+      r.set(g.id, {
+        isLeftSticky: S,
+        isRightSticky: B,
+        leftPosition: n,
+        rightPosition: 0,
+        // Will be calculated below
+        isRightmostLeftSticky: F,
+        isLeftmostRightSticky: o,
+        columnIndex: m
+      }), n += g.getSize();
+    });
+    let u = 0;
+    for (let g = e.length - 1; g >= 0; g--) {
+      const m = e[g], S = r.get(m.id);
+      S && (S.rightPosition = u), u += m.getSize();
+    }
+    return { data: r, allColumns: e };
+  }, [w.getVisibleFlatColumns(), Oe, Ne]), Ge = (e, r = !1, n = !0) => {
+    if (!e || typeof e.getSize != "function")
+      return {};
+    const u = We.data.get(e.id);
+    if (!u || !u.isLeftSticky && !u.isRightSticky)
+      return {};
+    const { isLeftSticky: g, isRightSticky: m, leftPosition: S, rightPosition: B, isRightmostLeftSticky: F, isLeftmostRightSticky: o } = u;
+    if (g) {
+      const M = {
+        position: "sticky",
+        left: `${S}px`,
+        ...r && { backgroundColor: "var(--grey-25)" },
+        width: `${e.getSize()}px`,
+        minWidth: `${e.getSize()}px`,
+        maxWidth: `${e.getSize()}px`
+      };
+      return F && r ? {
+        ...M,
+        backgroundImage: "linear-gradient(to right, var(--grey-25) calc(100% - 3px), var(--color-border-primary-medium) calc(100% - 3px), var(--color-border-primary-medium) 100%)",
+        backgroundColor: "transparent"
+      } : M;
+    }
+    if (m) {
+      const M = {
+        position: "sticky",
+        right: `${B}px`,
+        ...r && { backgroundColor: "var(--grey-25)" },
+        width: `${e.getSize()}px`,
+        minWidth: `${e.getSize()}px`,
+        maxWidth: `${e.getSize()}px`
+      };
+      return o && r ? {
+        ...M,
+        backgroundImage: "linear-gradient(to right, var(--color-border-primary-medium) 0, var(--color-border-primary-medium) 3px, var(--grey-25) 3px)",
+        backgroundColor: "transparent"
+      } : M;
+    }
+    return {};
+  }, ss = (e) => {
+    if (!e || typeof e.getSize != "function")
+      return "";
+    const r = We.data.get(e.id);
+    return r ? r.isRightmostLeftSticky ? "border-r-[3px] border-[var(--color-border-primary-medium)]" : r.isLeftmostRightSticky ? "border-l-[3px] border-[var(--color-border-primary-medium)]" : "" : "";
+  }, Bt = (e) => {
+    if (!e || typeof e.getSize != "function")
+      return !1;
+    const r = We.data.get(e.id);
+    return r ? r.isRightmostLeftSticky || r.isLeftmostRightSticky : !1;
+  }, Tt = (e) => {
+    if (!e || typeof e.getSize != "function" || Ne === 0)
+      return !1;
+    const r = We.data.get(e.id);
+    return r ? r.columnIndex === We.allColumns.length - Ne - 1 : !1;
+  }, Cr = (e, r = !1) => !te || !e.getCanResize() || !!E.showCellBorder ? "" : V(
+    // Right side indicator - hidden for last column
+    !r && [
+      "after:content-[''] after:absolute after:right-px after:top-1/2 after:-translate-y-1/2",
+      "after:w-[2px] after:h-[24px] after:rounded-[2px]",
+      "after:bg-[var(--color-border-primary-medium)]",
+      "after:opacity-0 hover:after:opacity-100",
+      "after:transition-opacity after:pointer-events-none after:z-10"
+    ],
+    // Left side indicator - positioned to align with resize handle (outside column)
+    "before:content-[''] before:absolute before:left-[-3px] before:top-1/2 before:-translate-y-1/2",
+    "before:w-[2px] before:h-[24px] before:rounded-[2px]",
+    "before:bg-[var(--color-border-primary-medium)]",
+    "before:opacity-0 hover:before:opacity-100",
+    "before:transition-opacity before:pointer-events-none before:z-10"
+  );
+  return /* @__PURE__ */ t(Vs, { children: /* @__PURE__ */ t(
+    bs,
+    {
+      sensors: Zn,
+      collisionDetection: xs,
+      onDragStart: es,
+      onDragEnd: ts,
+      children: /* @__PURE__ */ b("div", { className: V(
+        "border border-[var(--color-border-primary-medium)] bg-[var(--color-surface-primary)] overflow-hidden rounded-l",
+        // Remove bottom border when no pagination to avoid double border with last row
+        !vt && "border-b-0",
+        y
+      ), children: [
+        Pe && (f || ie) && /* @__PURE__ */ b("div", { className: "border-b border-[var(--color-border-primary-medium)] bg-[var(--color-surface-primary)] px-[var(--space-l)] py-[var(--space-m)]", children: [
+          f && /* @__PURE__ */ b("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ t("h3", { className: "text-heading-sm font-semibold text-[var(--color-text-primary)]", children: f }),
+            /* @__PURE__ */ t(Wr, { table: w, enableGrouping: z })
+          ] }),
+          /* @__PURE__ */ t(
+            Ks,
+            {
+              table: w,
+              searchKey: i,
+              searchPlaceholder: a,
+              showSettingsMenu: !1,
+              enableGlobalSearch: ie,
+              globalSearchPlaceholder: Gr,
+              globalFilter: St,
+              onGlobalFilterChange: er,
+              enableGlobalFaceting: qr,
+              enableGrouping: z,
+              enableAutocomplete: mt,
+              autocompleteSuggestions: Xn,
+              autocompleteMinCharacters: _r
+            }
+          )
+        ] }),
+        /* @__PURE__ */ b(
+          "div",
+          {
+            ref: Rt,
+            onKeyDown: rs,
+            onFocus: ns,
+            className: V(
+              "relative",
+              st && [
+                "overflow-x-auto",
+                "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-[var(--color-border-primary-subtle)]",
+                "hover:scrollbar-thumb-[var(--color-border-primary)]",
+                // Touch-friendly scrollbar
+                "max-sm:scrollbar-none"
+              ]
+            ),
+            children: [
+              T && /* @__PURE__ */ b(ee, { children: [
+                /* @__PURE__ */ t("div", { className: "absolute top-0 left-0 bottom-0 w-8 bg-gradient-to-r from-[var(--color-surface-primary)] to-transparent z-10 pointer-events-none opacity-0 transition-opacity" }),
+                /* @__PURE__ */ t("div", { className: "absolute top-0 right-0 bottom-0 w-8 bg-gradient-to-l from-[var(--color-surface-primary)] to-transparent z-10 pointer-events-none opacity-0 transition-opacity" })
+              ] }),
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  role: "status",
+                  "aria-live": "polite",
+                  "aria-atomic": "true",
+                  className: "sr-only",
+                  children: Wn
+                }
+              ),
+              /* @__PURE__ */ b(
+                Is,
+                {
+                  ref: Yn,
+                  role: "grid",
+                  "aria-label": x || f,
+                  "aria-rowcount": s.length,
+                  "aria-colcount": w.getVisibleLeafColumns().length,
+                  className: V(
+                    "border-separate border-spacing-0",
+                    // Required for sticky columns to work properly
+                    te && "table-fixed"
+                    // Fixed layout for column resizing
+                  ),
+                  style: {
+                    ...st && { minWidth: C }
+                  },
+                  children: [
+                    /* @__PURE__ */ t("colgroup", { children: w.getVisibleLeafColumns().map((e) => /* @__PURE__ */ t(
+                      "col",
+                      {
+                        style: {
+                          width: e.id === "select" ? "48px" : void 0
+                        }
+                      },
+                      e.id
+                    )) }),
+                    /* @__PURE__ */ t(Es, { className: V(
+                      h && [
+                        "sticky top-0 z-20",
+                        "after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-[var(--color-border-primary-medium)]"
+                      ],
+                      // Remove bottom border from last header row when pagination is enabled to avoid double border
+                      vt && "[&_tr:last-child]:border-b-0"
+                    ), children: A ? /* @__PURE__ */ t(
+                      Br,
+                      {
+                        columns: w.getVisibleLeafColumns().length,
+                        rows: 0,
+                        showRowBorder: E.showRowBorder,
+                        showCellBorder: E.showCellBorder,
+                        enableResponsiveWrapper: st
+                      }
+                    ) : Yr && Qe && Qe.length > 0 ? (
+                      // Nested headers rendering
+                      /* @__PURE__ */ b(ee, { children: [
+                        /* @__PURE__ */ t(G, { showBorder: E.showRowBorder, children: Qe.map((e, r) => {
+                          const n = e.columns.length, u = Ge(e, !0, E.showRowBorder);
+                          return /* @__PURE__ */ t(
+                            ut,
+                            {
+                              colSpan: n,
+                              showBorder: E.showCellBorder,
+                              className: V(
+                                "text-center bg-[var(--color-background-neutral-subtlest)] font-medium border-b border-[var(--color-border-primary-medium)]",
+                                h && "z-20",
+                                !Pe && r === 0 && "rounded-tl-l",
+                                !Pe && r === Qe.length - 1 && "rounded-tr-l",
+                                e.className
+                              ),
+                              style: {
+                                ...u,
+                                ...e.style
+                              },
+                              children: typeof e.header == "string" ? /* @__PURE__ */ t("span", { className: "text-body-strong-sm text-[var(--color-text-primary)]", children: e.header }) : e.header
+                            },
+                            e.id
+                          );
+                        }) }),
+                        /* @__PURE__ */ t(G, { showBorder: E.showRowBorder, children: w.getHeaderGroups()[0]?.headers.map((e, r) => {
+                          const n = Ge(e.column, !0, E.showRowBorder), u = e.column.columnDef.meta?.align || "left", g = r === w.getHeaderGroups()[0].headers.length - 1, m = Bt(e.column);
+                          return /* @__PURE__ */ t(
+                            ut,
+                            {
+                              scope: "col",
+                              "aria-sort": e.column.getCanSort() ? e.column.getIsSorted() ? e.column.getIsSorted() === "desc" ? "descending" : "ascending" : "none" : void 0,
+                              "aria-colindex": r + 1,
+                              "data-header-col": r,
+                              tabIndex: X[0] === -1 && X[1] === r ? 0 : -1,
+                              showBorder: g || m || Tt(e.column) ? !1 : E.showCellBorder,
+                              className: V(
+                                h && "z-20",
+                                (Oe > 0 || Ne > 0) && "z-30",
+                                te && "relative overflow-visible group",
+                                Cr(e.column, g),
+                                // Focus ring for keyboard navigation
+                                "focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--color-border-brand-bold)]"
+                              ),
+                              style: {
+                                ...n,
+                                // For table-fixed layout, all columns need explicit width
+                                ...te && !n.width ? { width: e.column.getSize() } : {}
+                              },
+                              children: /* @__PURE__ */ b("div", { className: V(
+                                u === "right" ? "text-right" : "text-left"
+                              ), children: [
+                                e.isPlaceholder ? null : be(
+                                  e.column.columnDef.header,
+                                  e.getContext()
+                                ),
+                                te && e.column.getCanResize() && /* @__PURE__ */ t(
+                                  "div",
+                                  {
+                                    onMouseDown: e.getResizeHandler(),
+                                    onTouchStart: e.getResizeHandler(),
+                                    className: "absolute right-0 top-0 h-full w-2 cursor-col-resize select-none touch-none -mr-1",
+                                    children: /* @__PURE__ */ t(
+                                      "div",
+                                      {
+                                        className: V(
+                                          "absolute right-1 top-0 h-full w-1",
+                                          "hover:bg-[var(--color-border-primary-medium)] active:bg-[var(--color-border-primary-medium)]",
+                                          e.column.getIsResizing() && "bg-[var(--color-border-primary-medium)]"
+                                        )
+                                      }
+                                    )
+                                  }
+                                )
+                              ] })
+                            },
+                            e.id
+                          );
+                        }) })
+                      ] })
+                    ) : (
+                      // Standard single-level headers
+                      w.getHeaderGroups().map((e) => /* @__PURE__ */ t(
+                        ys,
+                        {
+                          items: e.headers.map((r) => r.id),
+                          strategy: Cs,
+                          children: /* @__PURE__ */ t(G, { showBorder: E.showRowBorder, children: e.headers.map((r, n) => {
+                            const u = Ge(r.column, !0, E.showRowBorder), g = r.column.columnDef.meta?.align || "left", m = n === e.headers.length - 1, S = Bt(r.column);
+                            return /* @__PURE__ */ t(
+                              ut,
+                              {
+                                scope: "col",
+                                "aria-sort": r.column.getCanSort() ? r.column.getIsSorted() ? r.column.getIsSorted() === "desc" ? "descending" : "ascending" : "none" : void 0,
+                                "aria-colindex": n + 1,
+                                "data-header-col": n,
+                                tabIndex: X[0] === -1 && X[1] === n ? 0 : -1,
+                                showBorder: m || S || Tt(r.column) ? !1 : E.showCellBorder,
+                                className: V(
+                                  h && "z-20",
+                                  (Oe > 0 || Ne > 0) && "z-30",
+                                  te && "relative overflow-visible group",
+                                  Ye && "group",
+                                  !Pe && n === 0 && "rounded-tl-l",
+                                  !Pe && n === e.headers.length - 1 && "rounded-tr-l",
+                                  Cr(r.column, m),
+                                  // Focus ring for keyboard navigation
+                                  "focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--color-border-brand-bold)]"
+                                ),
+                                style: {
+                                  ...u,
+                                  // For table-fixed layout, all columns need explicit width
+                                  ...te && !u.width ? { width: r.column.getSize() } : {}
+                                },
+                                children: /* @__PURE__ */ t(Ys, { header: r, enableColumnOrdering: Ye, children: /* @__PURE__ */ b("div", { className: V(
+                                  g === "right" ? "text-right" : "text-left"
+                                ), children: [
+                                  r.isPlaceholder ? null : be(
+                                    r.column.columnDef.header,
+                                    r.getContext()
+                                  ),
+                                  te && r.column.getCanResize() && /* @__PURE__ */ t(
+                                    "div",
+                                    {
+                                      onMouseDown: r.getResizeHandler(),
+                                      onTouchStart: r.getResizeHandler(),
+                                      className: "absolute right-0 top-0 h-full w-2 cursor-col-resize select-none touch-none -mr-1",
+                                      children: /* @__PURE__ */ t(
+                                        "div",
+                                        {
+                                          className: V(
+                                            "absolute right-1 top-0 h-full w-1",
+                                            "hover:bg-[var(--color-border-primary-medium)] active:bg-[var(--color-border-primary-medium)]",
+                                            r.column.getIsResizing() && "bg-[var(--color-border-primary-medium)]"
+                                          )
+                                        }
+                                      )
+                                    }
+                                  )
+                                ] }) })
+                              },
+                              r.id
+                            );
+                          }) })
+                        },
+                        e.id
+                      ))
+                    ) }),
+                    /* @__PURE__ */ b(Ds, { children: [
+                      Nn && !A && s.length > 0 && /* @__PURE__ */ t("tr", { className: "absolute top-0 left-0 right-0 z-50 h-0", children: /* @__PURE__ */ t("td", { colSpan: w.getVisibleLeafColumns().length, className: "p-0", children: /* @__PURE__ */ t(Js, {}) }) }),
+                      Jt ? /* @__PURE__ */ t(G, { showBorder: !1, className: "h-[300px]", children: /* @__PURE__ */ t(
+                        le,
+                        {
+                          colSpan: w.getVisibleLeafColumns().length,
+                          className: "text-center",
+                          showBorder: !1,
+                          showRowBorder: !1,
+                          verticalAlign: "middle",
+                          children: hn || /* @__PURE__ */ t(
+                            Us,
+                            {
+                              error: Jt,
+                              onRetry: mn
+                            }
+                          )
+                        }
+                      ) }) : A && (P === "replace" || s.length === 0) ? /* @__PURE__ */ t(
+                        Br,
+                        {
+                          columns: w.getVisibleLeafColumns().length,
+                          rows: Kn,
+                          showRowBorder: E.showRowBorder,
+                          showCellBorder: E.showCellBorder,
+                          skipHeader: !0,
+                          enableResponsiveWrapper: st
+                        }
+                      ) : (
+                        // DISABLED: Virtualization temporarily disabled to fix React hooks error
+                        // false && enableVirtualization && virtualizer && table.getRowModel().rows?.length ? (
+                        //   // Virtualized rows - DISABLED
+                        // ) :
+                        w.getRowModel().rows?.length ? (
+                          // Manual cross-page pinning: organize rows with pinned rows at top/bottom of every page
+                          (() => {
+                            if (!Ee || !Ft) {
+                              const o = /* @__PURE__ */ new Set(), M = w.getRowModel().rows.filter((d) => J || d.depth === 0), $ = (d, k, H) => {
+                                if (o.has(d.id)) return null;
+                                o.add(d.id);
+                                const q = gr.get(d.id) ?? -1;
+                                return /* @__PURE__ */ b(l.Fragment, { children: [
+                                  /* @__PURE__ */ t(
+                                    G,
+                                    {
+                                      "data-state": d.getIsSelected() && "selected",
+                                      showBorder: E.showRowBorder,
+                                      "aria-rowindex": q + 2,
+                                      "aria-selected": fe ? d.getIsSelected() : void 0,
+                                      "aria-expanded": d.getCanExpand() ? d.getIsExpanded() : void 0,
+                                      className: V(
+                                        "group",
+                                        // Selected row styling
+                                        d.getIsSelected() && "bg-[var(--blue-25)]",
+                                        // Pinned row styling using existing CSS variables
+                                        d.getIsPinned() === "top" && "!bg-[var(--color-background-neutral-selected)] !border-b-2 !border-[var(--color-border-primary-medium)]",
+                                        d.getIsPinned() === "bottom" && "!bg-[var(--color-background-neutral-selected)] !border-t-2 !border-[var(--color-border-primary-medium)]",
+                                        // Nested row background colors (grouped and expanding)
+                                        (() => {
+                                          const j = d.getIsGrouped?.() ? "font-medium" : "", ne = Tr(d, {
+                                            enableGrouping: z,
+                                            enableExpanding: _,
+                                            nestedRowStyling: pt,
+                                            expandingRowColors: O,
+                                            maxDepth: lt
+                                          });
+                                          return V(ne ? `bg-[${ne}]` : "", j);
+                                        })(),
+                                        // Row click styling with smart hover
+                                        K && Se(d) && (Gt || "cursor-pointer hover:[background-image:linear-gradient(rgba(0,0,0,0.02),rgba(0,0,0,0.02))]")
+                                      ),
+                                      style: {
+                                        height: ro(d.depth, pt)
+                                      },
+                                      onClick: K && Se(d) ? (I) => Dt(d, I) : void 0,
+                                      role: "row",
+                                      "aria-label": K && Se(d) ? `View details for row ${d.id}` : void 0,
+                                      "aria-current": ze(d) ? "true" : void 0,
+                                      children: d.getVisibleCells().map((I, j) => {
+                                        const ne = Ge(I.column, !1, E.showRowBorder), U = j === 0, _e = _ && d.getCanExpand() || z && d.getIsGrouped(), de = d.getIsExpanded(), ue = d.depth, Mt = z && d.getIsGrouped();
+                                        let Re = Ht?.(d);
+                                        if (Re == null)
+                                          for (const oe of d.getVisibleCells()) {
+                                            const ae = oe.column.columnDef.sectionHeaderCell;
+                                            if (ae) {
+                                              const Pt = ae(oe.getContext());
+                                              if (Pt != null) {
+                                                Re = Pt;
+                                                break;
+                                              }
+                                            }
+                                          }
+                                        const se = Re != null;
+                                        if (se && !U)
+                                          return null;
+                                        const Z = z && d.depth > 0 && j === 0 && !H;
+                                        return /* @__PURE__ */ t(
+                                          le,
+                                          {
+                                            role: "gridcell",
+                                            "aria-colindex": j + 1,
+                                            "data-row": q,
+                                            "data-col": j,
+                                            tabIndex: X[0] === q && X[1] === j ? 0 : -1,
+                                            showBorder: Bt(I.column) || Tt(I.column) ? !1 : E.showCellBorder,
+                                            showRowBorder: E.showRowBorder,
+                                            verticalAlign: I.column.columnDef.meta?.verticalAlign || Ie,
+                                            colSpan: se ? d.getVisibleCells().length : void 0,
+                                            "data-section-header": se ? !0 : void 0,
+                                            className: V(
+                                              // Active row indicator on first cell
+                                              U && ze(d) && (_t || ur(Z ? !1 : E.showRowBorder)),
+                                              // Add sticky border classes for body cells (skip for section headers)
+                                              !se && ss(I.column),
+                                              // Sticky columns need higher z-index and explicit backgrounds
+                                              Object.keys(ne).length > 0 && [
+                                                "z-10",
+                                                // Match row backgrounds for sticky cells to prevent transparency
+                                                (() => {
+                                                  const oe = Tr(d, {
+                                                    enableGrouping: z,
+                                                    enableExpanding: _,
+                                                    nestedRowStyling: pt,
+                                                    expandingRowColors: O,
+                                                    maxDepth: lt
+                                                  });
+                                                  return oe ? `bg-[${oe}]` : "bg-[var(--color-surface-primary)]";
+                                                })()
+                                              ],
+                                              // Section header background
+                                              se && "bg-[var(--blue-50)]",
+                                              // Remove bottom border from first column child rows (except last), but not when row is active
+                                              Z && !ze(d) && "![box-shadow:none]",
+                                              // Focus ring for keyboard navigation
+                                              "focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--color-border-brand-bold)]"
+                                            ),
+                                            style: {
+                                              ...ne,
+                                              // Add left padding for nested rows
+                                              paddingLeft: U && ue > 0 && !se ? `calc(var(--space-m) + ${ue * 20}px)` : void 0
+                                            },
+                                            children: se ? (
+                                              // Section header row - render custom content
+                                              Re
+                                            ) : Mt ? (
+                                              // Grouped row rendering - only show content in first cell
+                                              U ? Mr(d, w, Xe, de, ye, Vt) : I.column.columnDef.meta?.renderInGroupedRows ? (
+                                                // Render custom cell content for columns with renderInGroupedRows flag
+                                                Be(I)
+                                              ) : I.column.columnDef.aggregatedCell ? (
+                                                // Render custom aggregatedCell if defined
+                                                xr(I)
+                                              ) : (
+                                                // Calculate and show aggregation for other columns in grouped row
+                                                (() => {
+                                                  const oe = zr(
+                                                    I.column,
+                                                    d.subRows,
+                                                    d.groupingColumnId
+                                                  );
+                                                  if (!oe) return /* @__PURE__ */ t("div", {});
+                                                  const ae = I.column.columnDef.meta?.align || "left";
+                                                  return /* @__PURE__ */ t(Te, { align: ae, children: /* @__PURE__ */ t("span", { className: V(
+                                                    "text-[var(--color-text-secondary)] text-body-sm",
+                                                    ae === "right" ? "tabular-nums" : ""
+                                                  ), children: oe }) });
+                                                })()
+                                              )
+                                            ) : (
+                                              // Regular row rendering
+                                              /* @__PURE__ */ b("div", { className: "flex items-center gap-[var(--space-s)]", children: [
+                                                U && _e && /* @__PURE__ */ t(
+                                                  "button",
+                                                  {
+                                                    tabIndex: -1,
+                                                    onClick: d.getToggleExpandedHandler(),
+                                                    className: "flex h-[var(--size-s)] w-[var(--size-s)] cursor-pointer items-center justify-center rounded-s text-[var(--color-text-secondary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+                                                    children: /* @__PURE__ */ t(
+                                                      W,
+                                                      {
+                                                        name: de ? "chevron-down" : "chevron-right",
+                                                        className: "h-3 w-3"
+                                                      }
+                                                    )
+                                                  }
+                                                ),
+                                                U && Ee && !Mt && /* @__PURE__ */ b("div", { className: "flex items-center gap-1", children: [
+                                                  d.getIsPinned() !== "top" && /* @__PURE__ */ t(
+                                                    "button",
+                                                    {
+                                                      tabIndex: -1,
+                                                      onClick: () => d.pin("top"),
+                                                      className: "opacity-0 group-hover:opacity-100 flex h-[var(--size-s)] w-[var(--size-s)] items-center justify-center rounded-s text-[var(--color-text-secondary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+                                                      title: "Pin to top",
+                                                      children: /* @__PURE__ */ t(W, { name: "arrow-up-to-line", className: "h-3 w-3" })
+                                                    }
+                                                  ),
+                                                  d.getIsPinned() !== "bottom" && /* @__PURE__ */ t(
+                                                    "button",
+                                                    {
+                                                      tabIndex: -1,
+                                                      onClick: () => d.pin("bottom"),
+                                                      className: "opacity-0 group-hover:opacity-100 flex h-[var(--size-s)] w-[var(--size-s)] items-center justify-center rounded-s text-[var(--color-text-secondary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+                                                      title: "Pin to bottom",
+                                                      children: /* @__PURE__ */ t(W, { name: "arrow-down-to-line", className: "h-3 w-3" })
+                                                    }
+                                                  ),
+                                                  d.getIsPinned() && /* @__PURE__ */ t(
+                                                    "button",
+                                                    {
+                                                      tabIndex: -1,
+                                                      onClick: () => d.pin(!1),
+                                                      className: "opacity-0 group-hover:opacity-100 flex h-[var(--size-s)] w-[var(--size-s)] items-center justify-center rounded-s text-[var(--color-text-secondary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+                                                      title: "Unpin row",
+                                                      children: /* @__PURE__ */ t(W, { name: "x", className: "h-3 w-3" })
+                                                    }
+                                                  )
+                                                ] }),
+                                                U && !_e && !Ee && (_ || z) && /* @__PURE__ */ t("div", { className: "h-[var(--size-s)] w-[var(--size-s)]" }),
+                                                /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: z && d.depth > 0 && (I.column.id === d.getParentRow()?.groupingColumnId || I.column.id === Xe) ? (
+                                                  // Hide grouped column and groupDisplayColumn in detail rows
+                                                  /* @__PURE__ */ t("div", {})
+                                                ) : I.column.columnDef.meta?.truncate !== !1 ? (
+                                                  // Wrap in TruncatedCell for overflow handling with tooltip
+                                                  /* @__PURE__ */ t(Te, { align: I.column.columnDef.meta?.align, children: Be(I) })
+                                                ) : (
+                                                  // No truncation for this column
+                                                  Be(I)
+                                                ) })
+                                              ] })
+                                            )
+                                          },
+                                          I.id
+                                        );
+                                      })
+                                    }
+                                  ),
+                                  rt?.[d.id] && d.getIsExpanded() && /* @__PURE__ */ t(G, { showBorder: E.showRowBorder, children: /* @__PURE__ */ t(
+                                    le,
+                                    {
+                                      colSpan: d.getVisibleCells().length,
+                                      showBorder: E.showCellBorder,
+                                      showRowBorder: E.showRowBorder,
+                                      verticalAlign: Ie,
+                                      className: "py-[var(--space-m)]",
+                                      children: /* @__PURE__ */ b("div", { className: "flex items-center justify-center gap-[var(--space-s)]", children: [
+                                        /* @__PURE__ */ t(qe, { size: "s" }),
+                                        /* @__PURE__ */ t("span", { className: "text-body-sm text-[var(--color-text-secondary)]", children: "Loading..." })
+                                      ] })
+                                    }
+                                  ) }),
+                                  J && d.getIsExpanded() && d.depth === 0 && /* @__PURE__ */ t(G, { showBorder: E.showRowBorder, children: /* @__PURE__ */ t(
+                                    le,
+                                    {
+                                      colSpan: d.getVisibleCells().length,
+                                      showBorder: E.showCellBorder,
+                                      showRowBorder: E.showRowBorder,
+                                      verticalAlign: Ie,
+                                      className: "p-0",
+                                      "data-section-header": !0,
+                                      children: Yt?.[d.id] ? /* @__PURE__ */ b("div", { className: "flex flex-col items-center justify-center py-[var(--space-l)] gap-[var(--space-s)]", children: [
+                                        /* @__PURE__ */ b("div", { className: "flex items-center gap-[var(--space-s)] text-[var(--color-text-danger)]", children: [
+                                          /* @__PURE__ */ t(W, { name: "alert-circle", className: "h-4 w-4" }),
+                                          /* @__PURE__ */ t("span", { className: "text-body-sm", children: Yt[d.id]?.message || "Failed to load details" })
+                                        ] }),
+                                        De && /* @__PURE__ */ t(
+                                          "button",
+                                          {
+                                            onClick: () => De(d),
+                                            className: "text-body-sm text-[var(--color-text-brand)] hover:underline cursor-pointer",
+                                            children: "Try again"
+                                          }
+                                        )
+                                      ] }) : nt?.[d.id] ? /* @__PURE__ */ b("div", { className: "flex items-center justify-center py-[var(--space-l)]", children: [
+                                        /* @__PURE__ */ t(qe, { size: "s" }),
+                                        /* @__PURE__ */ t("span", { className: "ml-[var(--space-s)] text-body-sm text-[var(--color-text-secondary)]", children: "Loading details..." })
+                                      ] }) : J(d)
+                                    }
+                                  ) }),
+                                  (() => {
+                                    if (J) return null;
+                                    const I = d.subRows && d.subRows.length > 0 ? d.subRows : it?.get(d.id) || [];
+                                    if (I.length === 0) return null;
+                                    let j = d.getIsExpanded();
+                                    return !j && Q === !0 && d.getCanExpand() && (j = !0), !j && typeof Q == "object" && Q !== null && Q[d.id] && (j = !0), j ? I.map(
+                                      (ne, U) => $(ne, U, U === I.length - 1)
+                                    ) : null;
+                                  })()
+                                ] }, d.id);
+                              };
+                              return M.map(
+                                (d, k) => $(d, k, k === M.length - 1)
+                              );
+                            }
+                            const e = w.getCoreRowModel().rows, r = w.getRowModel().rows, n = e.filter((o) => o.getIsPinned() === "top"), u = e.filter((o) => o.getIsPinned() === "bottom"), g = r.filter((o) => !o.getIsPinned()), m = [
+                              ...n,
+                              ...g,
+                              ...u
+                            ], S = /* @__PURE__ */ new Set(), B = m.filter((o) => J || o.depth === 0), F = (o, M, $) => {
+                              if (S.has(o.id)) return null;
+                              S.add(o.id);
+                              const d = gr.get(o.id) ?? -1;
+                              return /* @__PURE__ */ b(l.Fragment, { children: [
+                                /* @__PURE__ */ t(
+                                  G,
+                                  {
+                                    "data-state": o.getIsSelected() && "selected",
+                                    showBorder: E.showRowBorder,
+                                    "aria-rowindex": d + 2,
+                                    className: V(
+                                      "group",
+                                      // Selected row styling
+                                      o.getIsSelected() && "bg-[var(--blue-25)]",
+                                      // Pinned row styling using existing CSS variables
+                                      o.getIsPinned() === "top" && "!bg-[var(--color-background-neutral-selected)] !border-b-2 !border-[var(--color-border-primary-medium)]",
+                                      o.getIsPinned() === "bottom" && "!bg-[var(--color-background-neutral-selected)] !border-t-2 !border-[var(--color-border-primary-medium)]",
+                                      // Grouped row styling - blue-50 when expanded, neutral otherwise
+                                      o.getIsGrouped?.() && o.getIsExpanded() && "bg-[var(--blue-50)] font-medium",
+                                      o.getIsGrouped?.() && !o.getIsExpanded() && "bg-[var(--color-background-neutral-subtlest)] font-medium",
+                                      // Second level (children of grouped rows) - blue-25
+                                      z && o.depth === 1 && "bg-[var(--blue-25)]",
+                                      // Bottom-up alternating colors for expanding rows (only when expanded)
+                                      _ && !o.getIsGrouped?.() && (() => {
+                                        const k = o.subRows && o.subRows.length > 0, H = () => {
+                                          let j = o;
+                                          for (; j; ) {
+                                            if (j.getIsExpanded()) return !0;
+                                            j = j.getParentRow?.();
+                                          }
+                                          return !1;
+                                        };
+                                        if (o.depth === 0 && (!k || !H()))
+                                          return "";
+                                        const q = lt - o.depth, I = q % 2 === 0 ? "bg-[var(--blue-25)]" : "bg-[var(--blue-50)]";
+                                        if (O) {
+                                          if (q === 0 && O.children)
+                                            return `bg-[${O.children}]`;
+                                          if (q > 0 && o.getIsExpanded() && O.expandedParent)
+                                            return `bg-[${O.expandedParent}]`;
+                                          if (q > 0 && !o.getIsExpanded() && O.collapsedParent)
+                                            return `bg-[${O.collapsedParent}]`;
+                                        }
+                                        return I;
+                                      })(),
+                                      // Row click styling with smart hover
+                                      K && Se(o) && (Gt || "cursor-pointer hover:[background-image:linear-gradient(rgba(0,0,0,0.02),rgba(0,0,0,0.02))]")
+                                    ),
+                                    onClick: K && Se(o) ? (k) => Dt(o, k) : void 0,
+                                    role: "row",
+                                    "aria-label": K && Se(o) ? `View details for row ${o.id}` : void 0,
+                                    "aria-current": ze(o) ? "true" : void 0,
+                                    children: o.getVisibleCells().map((k, H) => {
+                                      const q = Ge(k.column, !1, E.showRowBorder), I = H === 0, j = _ && o.getCanExpand() || z && o.getIsGrouped(), ne = o.getIsExpanded(), U = o.depth, _e = z && o.getIsGrouped();
+                                      let de = Ht?.(o);
+                                      if (de == null)
+                                        for (const pe of o.getVisibleCells()) {
+                                          const ve = pe.column.columnDef.sectionHeaderCell;
+                                          if (ve) {
+                                            const Z = ve(pe.getContext());
+                                            if (Z != null) {
+                                              de = Z;
+                                              break;
+                                            }
+                                          }
+                                        }
+                                      const ue = de != null;
+                                      if (ue && !I)
+                                        return null;
+                                      const se = z && o.depth > 0 && H === 0 && !$;
+                                      return /* @__PURE__ */ t(
+                                        le,
+                                        {
+                                          role: "gridcell",
+                                          "aria-colindex": H + 1,
+                                          "data-row": d,
+                                          "data-col": H,
+                                          tabIndex: X[0] === d && X[1] === H ? 0 : -1,
+                                          showBorder: E.showCellBorder,
+                                          showRowBorder: E.showRowBorder,
+                                          verticalAlign: k.column.columnDef.meta?.verticalAlign || Ie,
+                                          colSpan: ue ? o.getVisibleCells().length : void 0,
+                                          className: V(
+                                            // Active row indicator on first cell
+                                            I && ze(o) && (_t || ur(se ? !1 : E.showRowBorder)),
+                                            // Focus ring for keyboard navigation
+                                            "focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--color-border-brand-bold)]",
+                                            // Sticky columns need higher z-index and explicit backgrounds
+                                            Object.keys(q).length > 0 && [
+                                              "z-10",
+                                              // Match row backgrounds for sticky cells to prevent transparency
+                                              // Grouped expanded rows
+                                              o.getIsGrouped?.() && o.getIsExpanded() && "bg-[var(--blue-50)]",
+                                              // Grouped collapsed rows
+                                              o.getIsGrouped?.() && !o.getIsExpanded() && "bg-[var(--color-background-neutral-subtlest)]",
+                                              // Second level rows (children of grouped rows)
+                                              z && o.depth === 1 && "bg-[var(--blue-25)]",
+                                              // Bottom-up alternating colors for expanding rows (only when expanded)
+                                              _ && !o.getIsGrouped?.() && (() => {
+                                                const pe = o.subRows && o.subRows.length > 0, ve = () => {
+                                                  let ae = o;
+                                                  for (; ae; ) {
+                                                    if (ae.getIsExpanded()) return !0;
+                                                    ae = ae.getParentRow?.();
+                                                  }
+                                                  return !1;
+                                                };
+                                                if (o.depth === 0 && (!pe || !ve()))
+                                                  return "";
+                                                const Z = lt - o.depth, oe = Z % 2 === 0 ? "bg-[var(--blue-25)]" : "bg-[var(--blue-50)]";
+                                                if (O) {
+                                                  if (Z === 0 && O.children)
+                                                    return `bg-[${O.children}]`;
+                                                  if (Z > 0 && o.getIsExpanded() && O.expandedParent)
+                                                    return `bg-[${O.expandedParent}]`;
+                                                  if (Z > 0 && !o.getIsExpanded() && O.collapsedParent)
+                                                    return `bg-[${O.collapsedParent}]`;
+                                                }
+                                                return oe;
+                                              })(),
+                                              // Default rows (not grouped, not expanding)
+                                              !o.getIsGrouped?.() && !(z && o.depth === 1) && !_ && "bg-[var(--color-surface-primary)]"
+                                            ],
+                                            // Section header background
+                                            ue && "bg-[var(--blue-50)]",
+                                            // Remove bottom border from first column child rows (except last), but not when row is active
+                                            se && !ze(o) && "![box-shadow:none]"
+                                          ),
+                                          style: {
+                                            ...q,
+                                            width: k.column.getSize(),
+                                            // Section header: fixed height with no padding
+                                            ...ue ? { height: "32px", padding: "0" } : {},
+                                            // Add left padding for nested rows
+                                            paddingLeft: I && U > 0 && !ue ? `calc(var(--space-m) + ${U * 20}px)` : void 0
+                                          },
+                                          children: ue ? (
+                                            // Section header row - render custom content
+                                            de
+                                          ) : _e ? (
+                                            // Grouped row rendering - only show content in first cell
+                                            I ? Mr(o, w, Xe, ne, ye, Vt) : k.column.columnDef.meta?.renderInGroupedRows ? (
+                                              // Render custom cell content for columns with renderInGroupedRows flag
+                                              Be(k)
+                                            ) : k.column.columnDef.aggregatedCell ? (
+                                              // Render custom aggregatedCell if defined
+                                              xr(k)
+                                            ) : (
+                                              // Calculate and show aggregation for other columns in grouped row
+                                              (() => {
+                                                const pe = zr(
+                                                  k.column,
+                                                  o.subRows,
+                                                  o.groupingColumnId
+                                                );
+                                                if (!pe) return /* @__PURE__ */ t("div", {});
+                                                const ve = k.column.columnDef.meta?.align || "left";
+                                                return /* @__PURE__ */ t(Te, { align: ve, children: /* @__PURE__ */ t("span", { className: V(
+                                                  "text-[var(--color-text-secondary)] text-body-sm",
+                                                  ve === "right" ? "tabular-nums" : ""
+                                                ), children: pe }) });
+                                              })()
+                                            )
+                                          ) : (
+                                            // Regular row rendering
+                                            /* @__PURE__ */ b("div", { className: "flex items-center gap-[var(--space-s)]", children: [
+                                              I && j && /* @__PURE__ */ t(
+                                                "button",
+                                                {
+                                                  onClick: o.getToggleExpandedHandler(),
+                                                  className: "flex h-[var(--size-s)] w-[var(--size-s)] cursor-pointer items-center justify-center rounded-s text-[var(--color-text-secondary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+                                                  children: /* @__PURE__ */ t(
+                                                    W,
+                                                    {
+                                                      name: ne ? "chevron-down" : "chevron-right",
+                                                      className: "h-3 w-3"
+                                                    }
+                                                  )
+                                                }
+                                              ),
+                                              I && Ee && !_e && /* @__PURE__ */ b("div", { className: "flex items-center gap-1", children: [
+                                                o.getIsPinned() !== "top" && /* @__PURE__ */ t(
+                                                  "button",
+                                                  {
+                                                    onClick: () => o.pin("top"),
+                                                    className: "opacity-0 group-hover:opacity-100 flex h-[var(--size-s)] w-[var(--size-s)] items-center justify-center rounded-s text-[var(--color-text-secondary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+                                                    title: "Pin to top",
+                                                    children: /* @__PURE__ */ t(W, { name: "arrow-up-to-line", className: "h-3 w-3" })
+                                                  }
+                                                ),
+                                                o.getIsPinned() !== "bottom" && /* @__PURE__ */ t(
+                                                  "button",
+                                                  {
+                                                    onClick: () => o.pin("bottom"),
+                                                    className: "opacity-0 group-hover:opacity-100 flex h-[var(--size-s)] w-[var(--size-s)] items-center justify-center rounded-s text-[var(--color-text-secondary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+                                                    title: "Pin to bottom",
+                                                    children: /* @__PURE__ */ t(W, { name: "arrow-down-to-line", className: "h-3 w-3" })
+                                                  }
+                                                ),
+                                                o.getIsPinned() && /* @__PURE__ */ t(
+                                                  "button",
+                                                  {
+                                                    onClick: () => o.pin(!1),
+                                                    className: "opacity-0 group-hover:opacity-100 flex h-[var(--size-s)] w-[var(--size-s)] items-center justify-center rounded-s text-[var(--color-text-secondary)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:text-[var(--color-text-primary)]",
+                                                    title: "Unpin row",
+                                                    children: /* @__PURE__ */ t(W, { name: "x", className: "h-3 w-3" })
+                                                  }
+                                                )
+                                              ] }),
+                                              I && !j && !Ee && (_ || z) && /* @__PURE__ */ t("div", { className: "h-[var(--size-s)] w-[var(--size-s)]" }),
+                                              /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: z && o.depth > 0 && (k.column.id === o.getParentRow()?.groupingColumnId || k.column.id === Xe) ? (
+                                                // Hide grouped column and groupDisplayColumn in detail rows
+                                                /* @__PURE__ */ t("div", {})
+                                              ) : k.column.columnDef.meta?.truncate !== !1 ? (
+                                                // Wrap in TruncatedCell for overflow handling with tooltip
+                                                /* @__PURE__ */ t(Te, { align: k.column.columnDef.meta?.align, children: Be(k) })
+                                              ) : (
+                                                // No truncation for this column
+                                                Be(k)
+                                              ) })
+                                            ] })
+                                          )
+                                        },
+                                        k.id
+                                      );
+                                    })
+                                  }
+                                ),
+                                rt?.[o.id] && o.getIsExpanded() && /* @__PURE__ */ t(G, { showBorder: E.showRowBorder, children: /* @__PURE__ */ t(
+                                  le,
+                                  {
+                                    colSpan: o.getVisibleCells().length,
+                                    showBorder: E.showCellBorder,
+                                    showRowBorder: E.showRowBorder,
+                                    verticalAlign: Ie,
+                                    className: "py-[var(--space-m)]",
+                                    children: /* @__PURE__ */ b("div", { className: "flex items-center justify-center gap-[var(--space-s)]", children: [
+                                      /* @__PURE__ */ t(qe, { size: "s" }),
+                                      /* @__PURE__ */ t("span", { className: "text-body-sm text-[var(--color-text-secondary)]", children: "Loading..." })
+                                    ] })
+                                  }
+                                ) }),
+                                J && o.getIsExpanded() && o.depth === 0 && /* @__PURE__ */ t(G, { showBorder: E.showRowBorder, children: /* @__PURE__ */ t(
+                                  le,
+                                  {
+                                    colSpan: o.getVisibleCells().length,
+                                    showBorder: E.showCellBorder,
+                                    showRowBorder: E.showRowBorder,
+                                    verticalAlign: Ie,
+                                    className: "p-0",
+                                    "data-section-header": !0,
+                                    children: nt?.[o.id] ? /* @__PURE__ */ b("div", { className: "flex items-center justify-center py-[var(--space-l)]", children: [
+                                      /* @__PURE__ */ t(qe, { size: "s" }),
+                                      /* @__PURE__ */ t("span", { className: "ml-[var(--space-s)] text-body-sm text-[var(--color-text-secondary)]", children: "Loading details..." })
+                                    ] }) : J(o)
+                                  }
+                                ) }),
+                                (() => {
+                                  if (J) return null;
+                                  const k = o.subRows && o.subRows.length > 0 ? o.subRows : it?.get(o.id) || [];
+                                  if (k.length === 0) return null;
+                                  let H = o.getIsExpanded();
+                                  return !H && Q === !0 && o.getCanExpand() && (H = !0), !H && typeof Q == "object" && Q !== null && Q[o.id] && (H = !0), H ? k.map(
+                                    (q, I) => F(q, I, I === k.length - 1)
+                                  ) : null;
+                                })()
+                              ] }, o.id);
+                            };
+                            return B.map(
+                              (o, M) => F(o, M, M === B.length - 1)
+                            );
+                          })()
+                        ) : (
+                          // Empty or no results state
+                          Zt.length > 0 || St !== "" ? /* @__PURE__ */ t(G, { showBorder: !1, className: "h-[300px]", children: /* @__PURE__ */ t(
+                            le,
+                            {
+                              colSpan: kt.length,
+                              className: "text-center",
+                              showBorder: !1,
+                              showRowBorder: !1,
+                              verticalAlign: "middle",
+                              children: yn || /* @__PURE__ */ t(
+                                qs,
+                                {
+                                  title: Cn,
+                                  description: wn,
+                                  action: Sn
+                                }
+                              )
+                            }
+                          ) }) : /* @__PURE__ */ t(G, { showBorder: !1, className: "h-[300px]", children: /* @__PURE__ */ t(
+                            le,
+                            {
+                              colSpan: kt.length,
+                              className: "text-center",
+                              showBorder: !1,
+                              showRowBorder: !1,
+                              verticalAlign: "middle",
+                              children: pn || /* @__PURE__ */ t(
+                                _s,
+                                {
+                                  title: vn,
+                                  description: bn,
+                                  action: xn
+                                }
+                              )
+                            }
+                          ) })
+                        )
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        vt && /* @__PURE__ */ t("div", { className: "bg-[var(--color-surface-primary)] px-[var(--space-l)] py-[var(--space-m)]", children: /* @__PURE__ */ t(
+          Zs,
+          {
+            table: w,
+            enableGrouping: z,
+            hideChildrenForSingleItemGroups: ye,
+            footerLabel: tn,
+            onNextPageHover: dn,
+            onPreviousPageHover: un,
+            paginationVariant: Zr,
+            pageSizeOptions: en
+          }
+        ) }),
+        Ut && fn && /* @__PURE__ */ t(
+          eo,
+          {
+            onLoadMore: () => Ut(re.pageIndex),
+            isLoading: gn
+          }
+        )
+      ] })
+    }
+  ) });
+}
+export {
+  ko as DataTable,
+  Do as DataTableColumnHeader,
+  Qs as DataTableFilter,
+  Zs as DataTablePagination,
+  Br as DataTableSkeleton,
+  Ks as DataTableToolbar,
+  Rr as fuzzyFilter,
+  Eo as groupPreservingGlobalFilter,
+  Ls as multiSelectFilter,
+  To as useReactTable
+};