react-flexi-datatable 1.0.3 → 1.0.6

package/dist/index.js

@@ -1,882 +1,689 @@
-import { useEffect as e, useMemo as t, useRef as n, useState as r } from "react";
-import { Check as i, ChevronDown as a, ChevronLeft as o, ChevronRight as s, ChevronUp as c, ChevronsLeft as ee, ChevronsRight as l, ChevronsUpDown as u, Columns3 as te, Download as ne, Edit3 as re, Eye as ie, EyeOff as ae, GripVertical as oe, Pencil as se, RotateCcw as ce, Search as le, SlidersHorizontal as ue, Trash2 as de, X as fe } from "lucide-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region src/components/DataTable.jsx
-var pe = "border border-slate-200 rounded-lg bg-white", me = {
-	Active: "bg-emerald-50 text-emerald-700",
-	Inactive: "bg-slate-100 text-slate-600",
-	Pending: "bg-amber-50 text-amber-700"
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useState as g, useRef as ue, useEffect as D, useMemo as be } from "react";
+import { Search as Tt, X as Pe, SlidersHorizontal as Mt, Columns3 as Rt, RotateCcw as Lt, GripVertical as pt, Edit3 as Fe, Download as Bt, Trash2 as ut, Check as Ue, ChevronUp as At, ChevronDown as Pt, ChevronsUpDown as Ft, EyeOff as Ut, Eye as Wt, Pencil as Ht, ChevronsLeft as _t, ChevronLeft as qt, ChevronRight as Jt, ChevronsRight as Xt } from "lucide-react";
+const bt = "border border-slate-200 rounded-lg bg-white", Kt = { Active: "bg-emerald-50 text-emerald-700", Inactive: "bg-slate-100 text-slate-600", Pending: "bg-amber-50 text-amber-700" }, me = {
+  default: {
+    header: "bg-slate-50 text-slate-600",
+    footer: "bg-white text-slate-500",
+    toolbar: "bg-white text-slate-900"
+  },
+  dark: {
+    header: "bg-slate-900 text-slate-100",
+    footer: "bg-slate-900 text-slate-300",
+    toolbar: "bg-slate-900 text-slate-100"
+  },
+  indigo: {
+    header: "bg-indigo-900 text-indigo-100",
+    footer: "bg-indigo-50 text-indigo-800",
+    toolbar: "bg-indigo-50/50 text-indigo-900"
+  },
+  emerald: {
+    header: "bg-emerald-900 text-emerald-100",
+    footer: "bg-emerald-50 text-emerald-800",
+    toolbar: "bg-emerald-50/50 text-emerald-900"
+  },
+  slate: {
+    header: "bg-slate-800 text-slate-100",
+    footer: "bg-slate-100 text-slate-700",
+    toolbar: "bg-slate-100 text-slate-800"
+  },
+  blue: {
+    header: "bg-blue-900 text-blue-100",
+    footer: "bg-blue-50 text-blue-800",
+    toolbar: "bg-blue-50/50 text-blue-900"
+  }
 };
-function p({ config: p, data: m = [], onView: h, onEdit: he, onDelete: ge, onBulkEdit: _e }) {
-	let g = `table_cols_${p.id || p.title || "default"}`, [ve, _] = r(m), [v, ye] = r(""), [y, be] = r({}), [b, x] = r({
-		key: null,
-		dir: null
-	}), [xe, S] = r(1), [C, Se] = r(p.pageSize || 10), [w, T] = r(() => {
-		try {
-			let e = localStorage.getItem(`${g}_visible`);
-			if (e) return JSON.parse(e);
-		} catch {}
-		return Object.fromEntries(p.columns.map((e) => [e.key, e.visible !== !1]));
-	}), [E, Ce] = r(() => {
-		try {
-			let e = localStorage.getItem(`${g}_order`);
-			if (e) return JSON.parse(e);
-		} catch {}
-		return p.columns.map((e) => e.key);
-	}), [D, we] = r(() => {
-		try {
-			let e = localStorage.getItem(`${g}_widths`);
-			if (e) return JSON.parse(e);
-		} catch {}
-		return Object.fromEntries(p.columns.map((e) => [e.key, e.width || 160]));
-	}), [Te, Ee] = r(null), [O, k] = r(null), [De, A] = r(null), [j, M] = r([]), [N, P] = r(null), [Oe, ke] = r(!1), [Ae, je] = r(!1), [F, I] = r({
-		row: 0,
-		col: 0
-	}), [Me, Ne] = r(null), [L, R] = r({}), [z, Pe] = r(!1), [Fe, B] = r([]), [V, H] = r({}), [U, W] = r(1), G = n(null), Ie = n(null), Le = n(null), K = n(null);
-	e(() => {
-		p.searchable && K.current && K.current.focus();
-	}, [p.searchable]), e(() => {
-		let e = (e) => {
-			Ie.current && !Ie.current.contains(e.target) && je(!1), Le.current && !Le.current.contains(e.target) && ke(!1);
-		};
-		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, []), e(() => _(m), [m]), e(() => S(1), [
-		v,
-		y,
-		C
-	]), e(() => {
-		try {
-			localStorage.setItem(`${g}_order`, JSON.stringify(E));
-		} catch {}
-	}, [E, g]), e(() => {
-		try {
-			localStorage.setItem(`${g}_visible`, JSON.stringify(w));
-		} catch {}
-	}, [w, g]), e(() => {
-		try {
-			localStorage.setItem(`${g}_widths`, JSON.stringify(D));
-		} catch {}
-	}, [D, g]);
-	let Re = () => {
-		let e = p.columns.map((e) => e.key), t = Object.fromEntries(p.columns.map((e) => [e.key, e.visible !== !1])), n = Object.fromEntries(p.columns.map((e) => [e.key, e.width || 160]));
-		Ce(e), T(t), we(n);
-		try {
-			localStorage.removeItem(`${g}_order`), localStorage.removeItem(`${g}_visible`), localStorage.removeItem(`${g}_widths`);
-		} catch {}
-	}, ze = (e, t) => {
-		e.preventDefault(), e.stopPropagation();
-		let n = e.clientX, r = D[t] || 160, i = (e) => {
-			let i = e.clientX - n, a = Math.max(70, r + i);
-			we((e) => ({
-				...e,
-				[t]: a
-			}));
-		}, a = () => {
-			document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", a), Ee(null);
-		};
-		Ee(t), document.addEventListener("mousemove", i), document.addEventListener("mouseup", a);
-	}, q = t(() => {
-		let e = Object.fromEntries(p.columns.map((e) => [e.key, e]));
-		return E.map((t) => e[t]).filter((e) => e && w[e.key]);
-	}, [
-		p.columns,
-		E,
-		w
-	]), J = t(() => p.columns.filter((e) => e.editable !== !1), [p.columns]), Be = (e) => {
-		if (e.options) return e.options;
-		let t = p.filters?.find((t) => t.key === e.key);
-		return t?.options ? t.options.filter((e) => e.value !== "all").map((e) => e.value) : null;
-	}, Y = p.columnordering !== !1 && p.columnOrdering !== !1, Ve = Y && p.dropcolumn !== !1 && p.dropColumn !== !1, He = (e, t) => {
-		Y && (k(t), e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
-	}, Ue = (e, t) => {
-		e.preventDefault(), Ve && (e.dataTransfer.dropEffect = "move", De !== t && A(t));
-	}, We = (e, t) => {
-		e.preventDefault(), e.stopPropagation();
-		let n = e.dataTransfer.getData("text/plain") || O;
-		n && n !== t && Ce((e) => {
-			let r = [...e], i = r.indexOf(n), a = r.indexOf(t);
-			return i !== -1 && a !== -1 && (r.splice(i, 1), r.splice(a, 0, n)), r;
-		}), k(null), A(null);
-	}, Ge = (e) => {
-		e && (T((t) => Object.values(t).filter(Boolean).length <= 1 ? t : {
-			...t,
-			[e]: !1
-		}), k(null), A(null));
-	}, X = t(() => {
-		let e = [...ve];
-		if (v.trim()) {
-			let t = v.toLowerCase(), n = p.columns.filter((e) => e.searchable !== !1).map((e) => e.key);
-			e = e.filter((e) => n.some((n) => String(e[n] ?? "").toLowerCase().includes(t)));
-		}
-		return Object.entries(y).forEach(([t, n]) => {
-			n && n !== "all" && (e = e.filter((e) => String(e[t]) === String(n)));
-		}), b.key && e.sort((e, t) => {
-			let n = String(e[b.key] ?? "").toLowerCase(), r = String(t[b.key] ?? "").toLowerCase(), i = n.localeCompare(r, void 0, { numeric: !0 });
-			return b.dir === "asc" ? i : -i;
-		}), e;
-	}, [
-		ve,
-		v,
-		y,
-		b,
-		p.columns
-	]), Z = Math.max(1, Math.ceil(X.length / C)), Q = Math.min(xe, Z), $ = X.slice((Q - 1) * C, Q * C), Ke = t(() => j.length > 0 ? j : $.map((e) => e.id), [j, $]), qe = (e) => {
-		if (b.key !== e) return x({
-			key: e,
-			dir: "asc"
-		});
-		if (b.dir === "asc") return x({
-			key: e,
-			dir: "desc"
-		});
-		x({
-			key: null,
-			dir: null
-		});
-	}, Je = (e) => M(e ? $.map((e) => e.id) : []), Ye = (e) => M((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]), Xe = (e) => {
-		Ne(e.id), R({ ...e });
-	}, Ze = () => {
-		Ne(null), R({});
-	}, Qe = () => {
-		_((e) => e.map((e) => e.id === Me ? L : e)), he?.(L), Ne(null), R({});
-	}, $e = () => {
-		let e = {}, t = j.length > 0 ? j : $.map((e) => e.id);
-		ve.forEach((n) => {
-			t.includes(n.id) && (e[n.id] = { ...n });
-		}), H(e), B(J.map((e) => e.key)), Pe(!0);
-	}, et = () => {
-		Pe(!1), H({}), B([]);
-	}, tt = () => {
-		let e = j.length > 0 ? j : $.map((e) => e.id);
-		_((t) => t.map((t) => e.includes(t.id) && V[t.id] || t)), _e?.(e, V), Pe(!1), H({}), B([]);
-	};
-	return e(() => {
-		let e = (e) => {
-			if (!p.keyboardNavigation || !$.length) return;
-			let t = document.activeElement;
-			if (t && (["TEXTAREA"].includes(t.tagName) || t.tagName === "INPUT" && t.type !== "checkbox" || t.tagName === "SELECT")) return;
-			let n = !!(p.actions?.view || p.actions?.edit || p.actions?.delete), r = q.length + +!!p.selectable, i = q.length + +!!p.selectable + +!!n, a = t?.closest("[data-cell]"), o = F.row, s = F.col;
-			if (a) {
-				let e = a.getAttribute("data-cell");
-				if (e) {
-					let t = e.split("-").map(Number);
-					t.length === 2 && !isNaN(t[0]) && !isNaN(t[1]) && (o = t[0], s = t[1]);
-				}
-			}
-			if (e.key === "ArrowDown") {
-				e.preventDefault();
-				let t = Math.min($.length - 1, o + 1);
-				I({
-					row: t,
-					col: s
-				});
-			} else if (e.key === "ArrowUp") {
-				e.preventDefault();
-				let t = Math.max(-1, o - 1);
-				I({
-					row: t,
-					col: s
-				});
-			} else if (e.key === "ArrowRight") {
-				if (e.preventDefault(), n && s === r) {
-					let e = G.current?.querySelector(`[data-cell="${o}-${s}"]`), t = e ? Array.from(e.querySelectorAll("button")) : [];
-					if (U < t.length - 1) {
-						W((e) => e + 1);
-						return;
-					}
-				}
-				let t = Math.min(i - 1, s + 1);
-				I({
-					row: o,
-					col: t
-				});
-			} else if (e.key === "ArrowLeft") {
-				if (e.preventDefault(), n && s === r && U > 0) {
-					W((e) => e - 1);
-					return;
-				}
-				let t = Math.max(0, s - 1);
-				I({
-					row: o,
-					col: t
-				});
-			} else if (e.key === "Enter" || e.key === " ") {
-				if (o === -1) {
-					if (p.selectable && s === 0) e.preventDefault(), Je($.length > 0 && !$.every((e) => j.includes(e.id)));
-					else {
-						let t = p.selectable ? s - 1 : s, n = q[t];
-						n && n.sortable && (e.preventDefault(), qe(n.key));
-					}
-				} else {
-					let i = $[o];
-					t && (t.type === "checkbox" || t.tagName === "BUTTON") ? (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t.click()) : i && (p.selectable && s === 0 ? (e.preventDefault(), Ye(i.id)) : n && s === r ? (e.preventDefault(), Xe(i)) : e.key === "Enter" && (e.preventDefault(), h?.(i)));
-				}
-			}
-		};
-		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [
-		p.keyboardNavigation,
-		$,
-		q,
-		F,
-		U,
-		Ye,
-		Je,
-		qe,
-		h,
-		p.selectable,
-		j
-	]), e(() => {
-		if (!p.keyboardNavigation || !G.current || document.activeElement === K.current) return;
-		let e = G.current.querySelector(`[data-cell="${F.row}-${F.col}"]`);
-		if (e) {
-			let t = Array.from(e.querySelectorAll("input, button, select"));
-			t.length > 0 ? (t[Math.min(U, t.length - 1)] || t[0]).focus() : e.focus();
-		}
-	}, [
-		F,
-		U,
-		p.keyboardNavigation,
-		$
-	]), /* @__PURE__ */ f("div", {
-		className: "space-y-3",
-		children: [
-			/* @__PURE__ */ d("div", {
-				className: `${pe} p-4`,
-				children: /* @__PURE__ */ f("div", {
-					className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between",
-					children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("h2", {
-						className: "text-lg font-semibold",
-						children: p.title
-					}), /* @__PURE__ */ f("p", {
-						className: "text-sm text-slate-500",
-						children: [X.length, " records"]
-					})] }), /* @__PURE__ */ f("div", {
-						className: "flex flex-wrap gap-2",
-						children: [
-							p.searchable && /* @__PURE__ */ f("div", {
-								className: "relative",
-								children: [
-									/* @__PURE__ */ d(le, {
-										size: 16,
-										className: "absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
-									}),
-									/* @__PURE__ */ d("input", {
-										ref: K,
-										autoFocus: !0,
-										value: v,
-										onChange: (e) => ye(e.target.value),
-										placeholder: "Search...",
-										className: "w-56 rounded-lg border border-slate-200 py-2 pl-9 pr-8 text-sm outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20"
-									}),
-									v && /* @__PURE__ */ d("button", {
-										onClick: () => {
-											ye(""), K.current?.focus();
-										},
-										className: "absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600",
-										children: /* @__PURE__ */ d(fe, { size: 15 })
-									})
-								]
-							}),
-							p.filterable && /* @__PURE__ */ f("div", {
-								ref: Ie,
-								className: "relative",
-								children: [/* @__PURE__ */ f("button", {
-									onClick: () => je((e) => !e),
-									className: "flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm",
-									children: [/* @__PURE__ */ d(ue, { size: 16 }), "Filter"]
-								}), Ae && /* @__PURE__ */ f("div", {
-									className: "absolute right-0 z-30 mt-2 w-64 rounded-xl border bg-white p-4 shadow-xl",
-									children: [p.filters?.map((e) => /* @__PURE__ */ f("label", {
-										className: "mb-3 block text-sm",
-										children: [/* @__PURE__ */ d("span", {
-											className: "mb-1 block font-medium",
-											children: e.label
-										}), /* @__PURE__ */ d("select", {
-											value: y[e.key] || "all",
-											onChange: (t) => be((n) => ({
-												...n,
-												[e.key]: t.target.value
-											})),
-											className: "w-full rounded-lg border p-2",
-											children: e.options.map((e) => /* @__PURE__ */ d("option", {
-												value: e.value,
-												children: e.label
-											}, e.value))
-										})]
-									}, e.key)), /* @__PURE__ */ d("button", {
-										onClick: () => be({}),
-										className: "text-sm font-medium text-slate-600",
-										children: "Clear filters"
-									})]
-								})]
-							}),
-							p.columnVisibility && /* @__PURE__ */ f("div", {
-								ref: Le,
-								className: "relative",
-								children: [/* @__PURE__ */ f("button", {
-									onClick: () => ke((e) => !e),
-									className: "flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm",
-									children: [/* @__PURE__ */ d(te, { size: 16 }), "Columns"]
-								}), Oe && /* @__PURE__ */ f("div", {
-									className: "absolute right-0 z-30 mt-2 w-64 rounded-xl border bg-white p-3.5 shadow-xl",
-									children: [
-										/* @__PURE__ */ f("div", {
-											className: "flex items-center justify-between pb-2 mb-2 border-b",
-											children: [/* @__PURE__ */ d("span", {
-												className: "text-xs font-semibold uppercase tracking-wider text-slate-500",
-												children: "Columns & Layout"
-											}), /* @__PURE__ */ f("button", {
-												onClick: Re,
-												className: "flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-800 font-medium",
-												title: "Reset default layout",
-												children: [/* @__PURE__ */ d(ce, { size: 12 }), "Reset"]
-											})]
-										}),
-										/* @__PURE__ */ d("div", {
-											className: "space-y-1 max-h-64 overflow-y-auto",
-											children: E.map((e) => {
-												let t = p.columns.find((t) => t.key === e);
-												if (!t) return null;
-												let n = w[e] !== !1;
-												return /* @__PURE__ */ f("div", {
-													draggable: !0,
-													onDragStart: (e) => He(e, t.key),
-													onDragOver: (e) => Ue(e, t.key),
-													onDrop: (e) => We(e, t.key),
-													className: `flex items-center justify-between p-2 text-sm rounded-lg hover:bg-slate-50 cursor-grab active:cursor-grabbing transition-colors ${O === t.key ? "opacity-30 bg-slate-100" : ""} ${De === t.key && O !== t.key ? "border-l-4 border-l-indigo-600 bg-indigo-50/60" : ""}`,
-													children: [/* @__PURE__ */ f("div", {
-														className: "flex items-center gap-2",
-														children: [/* @__PURE__ */ d("span", {
-															title: "Drag to reorder",
-															className: "text-slate-300 hover:text-slate-500 cursor-grab",
-															children: /* @__PURE__ */ d(oe, { size: 14 })
-														}), /* @__PURE__ */ f("label", {
-															className: "flex items-center gap-2 cursor-pointer select-none",
-															children: [/* @__PURE__ */ d("input", {
-																type: "checkbox",
-																checked: n,
-																onChange: () => T((e) => {
-																	let n = Object.values(e).filter(Boolean).length;
-																	return e[t.key] && n === 1 ? e : {
-																		...e,
-																		[t.key]: !e[t.key]
-																	};
-																}),
-																className: "rounded text-indigo-600 focus:ring-indigo-500"
-															}), /* @__PURE__ */ d("span", {
-																className: n ? "font-medium text-slate-800" : "text-slate-400 line-through",
-																children: t.label
-															})]
-														})]
-													}), /* @__PURE__ */ f("span", {
-														className: "text-xs text-slate-400 font-mono",
-														children: [D[t.key] || 160, "px"]
-													})]
-												}, t.key);
-											})
-										}),
-										/* @__PURE__ */ d("p", {
-											className: "mt-2.5 pt-2 border-t text-[11px] text-slate-400 text-center",
-											children: "Drag handles to reorder | Drag column edge to resize"
-										})
-									]
-								})]
-							}),
-							p.bulkEditable !== !1 && J.length > 0 && /* @__PURE__ */ f("button", {
-								onClick: $e,
-								className: `flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${z ? "border-indigo-500 bg-indigo-600 text-white" : j.length > 0 ? "border-indigo-300 bg-indigo-50 text-indigo-700 hover:bg-indigo-100" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"}`,
-								children: [
-									/* @__PURE__ */ d(re, { size: 16 }),
-									"Bulk Edit",
-									j.length > 0 ? ` (${j.length})` : ""
-								]
-							}),
-							p.exportable && /* @__PURE__ */ f("button", {
-								onClick: () => {
-									let e = q.map((e) => e.label).join(","), t = X.map((e) => q.map((t) => `"${String(e[t.key] ?? "").replaceAll("\"", "\"\"")}"`).join(",")).join("\n"), n = new Blob([e + "\n" + t], { type: "text/csv" }), r = document.createElement("a");
-									r.href = URL.createObjectURL(n), r.download = "table-export.csv", r.click(), URL.revokeObjectURL(r.href);
-								},
-								className: "flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm",
-								children: [/* @__PURE__ */ d(ne, { size: 16 }), "Export"]
-							})
-						]
-					})]
-				})
-			}),
-			Ve && /* @__PURE__ */ d("div", {
-				onDragOver: (e) => {
-					e.preventDefault(), e.dataTransfer.dropEffect = "move";
-				},
-				onDrop: (e) => {
-					e.preventDefault();
-					let t = e.dataTransfer.getData("text/plain") || O;
-					t && Ge(t);
-				},
-				className: `transition-all duration-200 overflow-hidden ${O ? "max-h-24 opacity-100 my-2" : "max-h-0 opacity-0 my-0 pointer-events-none"}`,
-				children: /* @__PURE__ */ f("div", {
-					className: "flex items-center justify-center gap-2 rounded-xl border-2 border-dashed border-rose-400 bg-rose-50 p-3 text-sm font-semibold text-rose-700 shadow-sm",
-					children: [/* @__PURE__ */ d(de, {
-						size: 20,
-						className: "text-rose-600 animate-bounce"
-					}), /* @__PURE__ */ f("span", { children: ["Drop column header here to hide column ", /* @__PURE__ */ d("b", { children: p.columns.find((e) => e.key === O)?.label })] })]
-				})
-			}),
-			z && /* @__PURE__ */ f("div", {
-				className: "flex flex-wrap items-center justify-between gap-3 rounded-xl border border-indigo-200 bg-indigo-50/80 p-3.5 shadow-sm",
-				children: [/* @__PURE__ */ f("div", {
-					className: "flex flex-wrap items-center gap-3",
-					children: [/* @__PURE__ */ f("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ d(re, {
-							size: 18,
-							className: "text-indigo-600"
-						}), /* @__PURE__ */ f("span", {
-							className: "font-semibold text-slate-900 text-sm",
-							children: [
-								"Bulk Edit Mode (",
-								Ke.length,
-								" records):"
-							]
-						})]
-					}), /* @__PURE__ */ f("div", {
-						className: "flex flex-wrap items-center gap-2",
-						children: [/* @__PURE__ */ d("span", {
-							className: "text-xs font-medium text-slate-600",
-							children: "Select columns to edit:"
-						}), J.map((e) => {
-							let t = Fe.includes(e.key);
-							return /* @__PURE__ */ f("button", {
-								type: "button",
-								onClick: () => {
-									B(t ? (t) => t.filter((t) => t !== e.key) : (t) => [...t, e.key]);
-								},
-								className: `flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-medium border transition-all ${t ? "border-indigo-500 bg-indigo-600 text-white shadow-xs" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"}`,
-								children: [/* @__PURE__ */ d("span", {
-									className: `flex h-3.5 w-3.5 items-center justify-center rounded border ${t ? "border-white bg-white text-indigo-600" : "border-slate-300 bg-white"}`,
-									children: t && /* @__PURE__ */ d(i, {
-										size: 10,
-										strokeWidth: 3
-									})
-								}), /* @__PURE__ */ d("span", { children: e.label })]
-							}, e.key);
-						})]
-					})]
-				}), /* @__PURE__ */ f("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ f("button", {
-						onClick: et,
-						className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 transition-colors",
-						children: [/* @__PURE__ */ d(fe, {
-							size: 14,
-							className: "text-rose-500"
-						}), "Cancel"]
-					}), /* @__PURE__ */ f("button", {
-						onClick: tt,
-						className: "flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3.5 py-1.5 text-xs font-medium text-white hover:bg-emerald-700 shadow-sm transition-colors",
-						children: [/* @__PURE__ */ d(i, { size: 14 }), "Save"]
-					})]
-				})]
-			}),
-			/* @__PURE__ */ f("div", {
-				className: `${pe} overflow-hidden`,
-				children: [/* @__PURE__ */ d("div", {
-					className: "overflow-x-auto",
-					children: /* @__PURE__ */ f("table", {
-						ref: G,
-						className: "min-w-full text-sm table-fixed",
-						children: [/* @__PURE__ */ d("thead", {
-							className: "border-b bg-slate-50",
-							children: /* @__PURE__ */ f("tr", { children: [
-								p.selectable && /* @__PURE__ */ d("th", {
-									"data-cell": "-1-0",
-									className: "w-12 px-4 py-3",
-									children: /* @__PURE__ */ d("input", {
-										type: "checkbox",
-										checked: $.length > 0 && $.every((e) => j.includes(e.id)),
-										onChange: (e) => Je(e.target.checked),
-										onFocus: () => I({
-											row: -1,
-											col: 0
-										})
-									})
-								}),
-								q.map((e, t) => {
-									let n = p.selectable ? t + 1 : t, r = O === e.key, i = De === e.key && O !== e.key, o = D[e.key] || e.width || 160;
-									return /* @__PURE__ */ f("th", {
-										"data-cell": `-1-${n}`,
-										style: {
-											width: `${o}px`,
-											minWidth: `${o}px`
-										},
-										draggable: Y,
-										onDragStart: (t) => He(t, e.key),
-										onDragOver: (t) => Ue(t, e.key),
-										onDragLeave: () => A(null),
-										onDrop: (t) => We(t, e.key),
-										onDragEnd: () => {
-											k(null), A(null);
-										},
-										"aria-sort": b.key === e.key ? b.dir : "none",
-										className: `group relative whitespace-nowrap px-4 py-3 text-left font-semibold text-slate-600 ${Y ? "cursor-grab active:cursor-grabbing" : ""} transition-colors select-none ${r ? "opacity-30 bg-slate-100" : ""} ${i ? "border-l-4 border-l-indigo-600 bg-indigo-50/60" : ""}`,
-										children: [/* @__PURE__ */ f("div", {
-											className: "flex items-center justify-between gap-1.5 pr-2",
-											children: [/* @__PURE__ */ f("div", {
-												className: "flex items-center gap-1.5 overflow-hidden",
-												children: [Y && /* @__PURE__ */ d("span", {
-													title: "Drag header to reorder",
-													className: "text-slate-300 group-hover:text-slate-500 cursor-grab shrink-0",
-													children: /* @__PURE__ */ d(oe, { size: 14 })
-												}), /* @__PURE__ */ f("button", {
-													disabled: !e.sortable,
-													onClick: () => e.sortable && qe(e.key),
-													className: `flex items-center gap-1 truncate ${e.sortable ? "hover:text-slate-900" : ""}`,
-													children: [/* @__PURE__ */ d("span", {
-														className: "truncate",
-														children: e.label
-													}), e.sortable && (b.key === e.key ? b.dir === "asc" ? /* @__PURE__ */ d(c, {
-														size: 15,
-														className: "shrink-0"
-													}) : /* @__PURE__ */ d(a, {
-														size: 15,
-														className: "shrink-0"
-													}) : /* @__PURE__ */ d(u, {
-														size: 15,
-														className: "text-slate-400 shrink-0"
-													}))]
-												})]
-											}), /* @__PURE__ */ d("button", {
-												type: "button",
-												title: "Hide column",
-												onClick: (t) => {
-													t.stopPropagation(), Ge(e.key);
-												},
-												className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 text-slate-400 hover:text-rose-600 rounded shrink-0",
-												children: /* @__PURE__ */ d(ae, { size: 13 })
-											})]
-										}), /* @__PURE__ */ d("div", {
-											draggable: !1,
-											onMouseDown: (t) => ze(t, e.key),
-											onDoubleClick: (t) => {
-												t.stopPropagation(), we((t) => ({
-													...t,
-													[e.key]: e.width || 160
-												}));
-											},
-											title: "Drag to resize column width",
-											className: `absolute right-0 top-0 bottom-0 w-2.5 cursor-col-resize group-hover:bg-indigo-300/50 hover:!bg-indigo-500 transition-colors z-10 ${Te === e.key ? "bg-indigo-600 w-1" : ""}`
-										})]
-									}, e.key);
-								}),
-								(p.actions?.view || p.actions?.edit || p.actions?.delete) && /* @__PURE__ */ d("th", {
-									className: "sticky right-0 bg-slate-50 px-4 py-3 text-right font-semibold text-slate-600 w-32",
-									children: "Actions"
-								})
-							] })
-						}), /* @__PURE__ */ f("tbody", { children: [$.map((e, t) => {
-							let n = Me === e.id, r = z && Ke.includes(e.id);
-							return /* @__PURE__ */ f("tr", {
-								className: `border-b last:border-0 ${n || r ? "bg-indigo-50/20" : "hover:bg-slate-50"}`,
-								children: [
-									p.selectable && /* @__PURE__ */ d("td", {
-										"data-cell": `${t}-0`,
-										className: "px-4 py-3",
-										children: /* @__PURE__ */ d("input", {
-											type: "checkbox",
-											checked: j.includes(e.id),
-											onChange: () => Ye(e.id),
-											onFocus: () => I({
-												row: t,
-												col: 0
-											})
-										})
-									}),
-									q.map((i, a) => {
-										let o = p.selectable ? a + 1 : a, s = r && Fe.includes(i.key) && i.editable !== !1, c = Be(i), ee = D[i.key] || i.width || 160, l = e[i.key], u = l == null ? "" : String(l), te = u.length > 25;
-										return /* @__PURE__ */ d("td", {
-											"data-cell": `${t}-${o}`,
-											style: {
-												width: `${ee}px`,
-												minWidth: `${ee}px`
-											},
-											className: "px-4 py-3 truncate",
-											tabIndex: -1,
-											title: te ? u : void 0,
-											children: n && i.editable !== !1 ? c ? /* @__PURE__ */ d("select", {
-												value: L[i.key] ?? "",
-												onChange: (e) => R({
-													...L,
-													[i.key]: e.target.value
-												}),
-												onKeyDown: (e) => {
-													e.key === "Enter" && Qe(), e.key === "Escape" && Ze();
-												},
-												className: "w-full rounded-md border border-indigo-300 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500",
-												children: c.map((e) => {
-													let t = typeof e == "object" ? e.value : e, n = typeof e == "object" ? e.label : e;
-													return /* @__PURE__ */ d("option", {
-														value: t,
-														children: n
-													}, t);
-												})
-											}) : /* @__PURE__ */ d("input", {
-												type: "text",
-												value: L[i.key] ?? "",
-												onChange: (e) => R({
-													...L,
-													[i.key]: e.target.value
-												}),
-												onKeyDown: (e) => {
-													e.key === "Enter" && Qe(), e.key === "Escape" && Ze();
-												},
-												className: "w-full rounded-md border border-indigo-300 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
-											}) : s ? c ? /* @__PURE__ */ d("select", {
-												value: V[e.id]?.[i.key] ?? e[i.key] ?? "",
-												onChange: (t) => H((n) => ({
-													...n,
-													[e.id]: {
-														...n[e.id] || e,
-														[i.key]: t.target.value
-													}
-												})),
-												onKeyDown: (e) => {
-													e.key === "Enter" && tt(), e.key === "Escape" && et();
-												},
-												className: "w-full rounded-md border border-indigo-400 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500",
-												children: c.map((e) => {
-													let t = typeof e == "object" ? e.value : e, n = typeof e == "object" ? e.label : e;
-													return /* @__PURE__ */ d("option", {
-														value: t,
-														children: n
-													}, t);
-												})
-											}) : /* @__PURE__ */ d("input", {
-												type: "text",
-												value: V[e.id]?.[i.key] ?? e[i.key] ?? "",
-												onChange: (t) => H((n) => ({
-													...n,
-													[e.id]: {
-														...n[e.id] || e,
-														[i.key]: t.target.value
-													}
-												})),
-												onKeyDown: (e) => {
-													e.key === "Enter" && tt(), e.key === "Escape" && et();
-												},
-												className: "w-full rounded-md border border-indigo-400 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
-											}) : i.render ? i.render(l, e, t) : i.key === "status" ? /* @__PURE__ */ d("span", {
-												className: `rounded-full px-2.5 py-1 text-xs font-medium ${me[l] || "bg-slate-100 text-slate-600"}`,
-												children: l
-											}) : te ? /* @__PURE__ */ f("span", {
-												title: u,
-												children: [u.slice(0, 25), "..."]
-											}) : u
-										}, i.key);
-									}),
-									(p.actions?.view || p.actions?.edit || p.actions?.delete) && /* @__PURE__ */ d("td", {
-										"data-cell": `${t}-${q.length + +!!p.selectable}`,
-										className: "sticky right-0 bg-white px-4 py-3 w-32",
-										children: n ? /* @__PURE__ */ f("div", {
-											className: "flex justify-end gap-1",
-											children: [/* @__PURE__ */ d("button", {
-												title: "Save",
-												onClick: Qe,
-												className: "rounded-md bg-emerald-100 p-2 text-emerald-700 hover:bg-emerald-200",
-												children: /* @__PURE__ */ d(i, { size: 16 })
-											}), /* @__PURE__ */ d("button", {
-												title: "Cancel",
-												onClick: Ze,
-												className: "rounded-md bg-rose-100 p-2 text-rose-700 hover:bg-rose-200",
-												children: /* @__PURE__ */ d(fe, { size: 16 })
-											})]
-										}) : /* @__PURE__ */ f("div", {
-											className: "flex justify-end gap-1",
-											children: [
-												p.actions.view && /* @__PURE__ */ d("button", {
-													title: "View",
-													onClick: () => h?.(e),
-													onFocus: () => {
-														I({
-															row: t,
-															col: q.length + +!!p.selectable
-														}), W(0);
-													},
-													className: "rounded-md p-2 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400",
-													children: /* @__PURE__ */ d(ie, { size: 16 })
-												}),
-												p.actions.edit && /* @__PURE__ */ d("button", {
-													title: "Edit",
-													onClick: () => Xe(e),
-													onFocus: () => {
-														I({
-															row: t,
-															col: q.length + +!!p.selectable
-														}), W(1);
-													},
-													className: "rounded-md p-2 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400",
-													children: /* @__PURE__ */ d(se, { size: 16 })
-												}),
-												p.actions.delete && /* @__PURE__ */ d("button", {
-													title: "Delete",
-													onClick: () => P(e),
-													onFocus: () => {
-														I({
-															row: t,
-															col: q.length + +!!p.selectable
-														}), W(2);
-													},
-													className: "rounded-md p-2 text-red-600 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-400",
-													children: /* @__PURE__ */ d(de, { size: 16 })
-												})
-											]
-										})
-									})
-								]
-							}, e.id);
-						}), !$.length && /* @__PURE__ */ d("tr", { children: /* @__PURE__ */ f("td", {
-							colSpan: q.length + +!!p.selectable + 1,
-							className: "px-6 py-16 text-center",
-							children: [/* @__PURE__ */ d("div", {
-								className: "font-medium",
-								children: "No records found"
-							}), /* @__PURE__ */ d("div", {
-								className: "mt-1 text-sm text-slate-500",
-								children: "Try changing your search or filters."
-							})]
-						}) })] })]
-					})
-				}), /* @__PURE__ */ f("div", {
-					className: "flex flex-col gap-3 border-t bg-white px-4 py-3 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ f("div", {
-						className: "text-sm text-slate-500",
-						children: [
-							"Showing ",
-							X.length ? (Q - 1) * C + 1 : 0,
-							"–",
-							Math.min(Q * C, X.length),
-							" of ",
-							X.length
-						]
-					}), /* @__PURE__ */ f("div", {
-						className: "flex items-center gap-2",
-						children: [
-							/* @__PURE__ */ d("select", {
-								value: C,
-								onChange: (e) => Se(Number(e.target.value)),
-								className: "rounded-lg border border-slate-200 px-2 py-1.5 text-sm",
-								children: p.pageSizeOptions.map((e) => /* @__PURE__ */ f("option", {
-									value: e,
-									children: [e, "/page"]
-								}, e))
-							}),
-							/* @__PURE__ */ d("button", {
-								disabled: Q === 1,
-								onClick: () => S(1),
-								className: "rounded-md border p-1.5 disabled:opacity-40",
-								children: /* @__PURE__ */ d(ee, { size: 16 })
-							}),
-							/* @__PURE__ */ d("button", {
-								disabled: Q === 1,
-								onClick: () => S((e) => e - 1),
-								className: "rounded-md border p-1.5 disabled:opacity-40",
-								children: /* @__PURE__ */ d(o, { size: 16 })
-							}),
-							/* @__PURE__ */ f("span", {
-								className: "px-2 text-sm",
-								children: [
-									"Page ",
-									Q,
-									" of ",
-									Z
-								]
-							}),
-							/* @__PURE__ */ d("button", {
-								disabled: Q === Z,
-								onClick: () => S((e) => e + 1),
-								className: "rounded-md border p-1.5 disabled:opacity-40",
-								children: /* @__PURE__ */ d(s, { size: 16 })
-							}),
-							/* @__PURE__ */ d("button", {
-								disabled: Q === Z,
-								onClick: () => S(Z),
-								className: "rounded-md border p-1.5 disabled:opacity-40",
-								children: /* @__PURE__ */ d(l, { size: 16 })
-							})
-						]
-					})]
-				})]
-			}),
-			j.length > 0 && !z && /* @__PURE__ */ f("div", {
-				className: "fixed bottom-5 left-1/2 z-40 flex -translate-x-1/2 items-center gap-3 rounded-xl bg-slate-900 px-4 py-2.5 text-sm text-white shadow-xl",
-				children: [
-					/* @__PURE__ */ f("span", {
-						className: "font-medium pl-1",
-						children: [j.length, " selected"]
-					}),
-					p.bulkEditable !== !1 && J.length > 0 && /* @__PURE__ */ f("button", {
-						onClick: $e,
-						className: "flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-500 transition-colors shadow-sm",
-						children: [/* @__PURE__ */ d(re, { size: 14 }), "Bulk Edit"]
-					}),
-					/* @__PURE__ */ d("button", {
-						onClick: () => M([]),
-						className: "text-xs text-slate-400 hover:text-white underline pr-1",
-						children: "Clear"
-					})
-				]
-			}),
-			N && /* @__PURE__ */ d("div", {
-				onClick: (e) => {
-					e.target === e.currentTarget && P(null);
-				},
-				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
-				children: /* @__PURE__ */ f("div", {
-					className: "w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl",
-					children: [
-						/* @__PURE__ */ d("h3", {
-							className: "text-lg font-semibold",
-							children: "Delete record?"
-						}),
-						/* @__PURE__ */ f("p", {
-							className: "mt-2 text-sm text-slate-500",
-							children: [
-								"Are you sure you want to delete ",
-								/* @__PURE__ */ d("b", { children: N.name }),
-								"? This action cannot be undone."
-							]
-						}),
-						/* @__PURE__ */ f("div", {
-							className: "mt-6 flex justify-end gap-2",
-							children: [/* @__PURE__ */ d("button", {
-								onClick: () => P(null),
-								className: "rounded-lg border px-4 py-2 text-sm",
-								children: "Cancel"
-							}), /* @__PURE__ */ d("button", {
-								onClick: () => {
-									_((e) => e.filter((e) => e.id !== N.id)), M((e) => e.filter((e) => e !== N.id)), P(null), ge?.(N);
-								},
-								className: "rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white",
-								children: "Delete"
-							})]
-						})
-					]
-				})
-			})
-		]
-	});
+function Zt({ config: o, data: $ = [], onView: O, onEdit: fe, onDelete: ve, onBulkEdit: we }) {
+  var st, ct, dt, gt, ht;
+  const y = `table_cols_${o.id || o.title || "default"}`, [xe, te] = g($), [L, We] = g(""), [oe, He] = g({}), [k, ye] = g({ key: null, dir: null }), [mt, H] = g(1), [I, ft] = g(o.pageSize || 10), [_, ke] = g(() => {
+    try {
+      const e = localStorage.getItem(`${y}_visible`);
+      if (e) return JSON.parse(e);
+    } catch {
+    }
+    return Object.fromEntries(o.columns.map((e) => [e.key, e.visible !== !1]));
+  }), [q, _e] = g(() => {
+    try {
+      const e = localStorage.getItem(`${y}_order`);
+      if (e) return JSON.parse(e);
+    } catch {
+    }
+    return o.columns.map((e) => e.key);
+  }), [B, Ne] = g(() => {
+    try {
+      const e = localStorage.getItem(`${y}_widths`);
+      if (e) return JSON.parse(e);
+    } catch {
+    }
+    return Object.fromEntries(o.columns.map((e) => [e.key, e.width || 160]));
+  }), [vt, qe] = g(null), [j, re] = g(null), [Ce, J] = g(null), [m, ae] = g([]), [X, ie] = g(null), [wt, Je] = g(!1), [xt, Xe] = g(!1), [A, z] = g({ row: 0, col: 0 }), [Ke, ze] = g(null), [P, K] = g({}), [le, Se] = g(!1), [Ve, V] = g([]), [ne, G] = g({}), [Y, Q] = g(1), se = ue(null), Ee = ue(null), De = ue(null), Z = ue(null);
+  D(() => {
+    o.searchable && Z.current && Z.current.focus();
+  }, [o.searchable]), D(() => {
+    const e = (t) => {
+      Ee.current && !Ee.current.contains(t.target) && Xe(!1), De.current && !De.current.contains(t.target) && Je(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), D(() => te($), [$]), D(() => H(1), [L, oe, I]), D(() => {
+    try {
+      localStorage.setItem(`${y}_order`, JSON.stringify(q));
+    } catch {
+    }
+  }, [q, y]), D(() => {
+    try {
+      localStorage.setItem(`${y}_visible`, JSON.stringify(_));
+    } catch {
+    }
+  }, [_, y]), D(() => {
+    try {
+      localStorage.setItem(`${y}_widths`, JSON.stringify(B));
+    } catch {
+    }
+  }, [B, y]);
+  const yt = () => {
+    const e = o.columns.map((l) => l.key), t = Object.fromEntries(o.columns.map((l) => [l.key, l.visible !== !1])), a = Object.fromEntries(o.columns.map((l) => [l.key, l.width || 160]));
+    _e(e), ke(t), Ne(a);
+    try {
+      localStorage.removeItem(`${y}_order`), localStorage.removeItem(`${y}_visible`), localStorage.removeItem(`${y}_widths`);
+    } catch {
+    }
+  }, kt = (e, t) => {
+    e.preventDefault(), e.stopPropagation();
+    const a = e.clientX, l = B[t] || 160, c = (h) => {
+      const d = h.clientX - a, x = Math.max(70, l + d);
+      Ne((u) => ({ ...u, [t]: x }));
+    }, p = () => {
+      document.removeEventListener("mousemove", c), document.removeEventListener("mouseup", p), qe(null);
+    };
+    qe(t), document.addEventListener("mousemove", c), document.addEventListener("mouseup", p);
+  }, w = be(() => {
+    const e = Object.fromEntries(o.columns.map((t) => [t.key, t]));
+    return q.map((t) => e[t]).filter((t) => t && _[t.key]);
+  }, [o.columns, q, _]), ce = be(
+    () => o.columns.filter((e) => e.editable !== !1),
+    [o.columns]
+  ), Nt = (e) => {
+    var a;
+    if (e.options) return e.options;
+    const t = (a = o.filters) == null ? void 0 : a.find((l) => l.key === e.key);
+    return t != null && t.options ? t.options.filter((l) => l.value !== "all").map((l) => l.value) : null;
+  }, T = o.columnordering !== !1 && o.columnOrdering !== !1, Ge = T && o.dropcolumn !== !1 && o.dropColumn !== !1, de = o.columnwidth !== !1 && o.columnWidth !== !1 && o.resizable !== !1 && o.columnResizing !== !1, v = o.selectable !== !1 && o.checkbox !== !1 && o.checkboxes !== !1 && o.selection !== !1 && (o.selectable || o.checkbox || o.checkboxes || o.selection || !1), je = o.pagination !== !1, Ct = je && !!(o.topPagination || o.toppagination || o.paginationTop), zt = je && o.bottomPagination !== !1, N = o.theme, $e = typeof N == "string" && me[N], Ye = o.headerTheme || (typeof N == "object" ? N.header : null) || ($e ? me[N].header : "bg-slate-50 text-slate-600"), St = o.footerTheme || (typeof N == "object" ? N.footer : null) || ($e ? me[N].footer : "bg-white text-slate-500"), Et = o.toolbarTheme || (typeof N == "object" ? N.toolbar : null) || ($e ? me[N].toolbar : "bg-white"), F = o.tableWidth ?? o.tablewidth ?? o.width, U = o.tableHeight ?? o.tableheight ?? o.height, Dt = F && F !== "auto" && F !== !0 ? typeof F == "number" ? `${F}px` : F : "100%", Qe = !!(o.tabledatavertivallscroll || o.tableDataVerticalScroll || o.verticalScroll), Ze = U && U !== "auto" && U !== !0 ? typeof U == "number" ? `${U}px` : U : Qe ? "320px" : null, jt = o.tabledatavertivallscroll !== !1 && o.tableDataVerticalScroll !== !1 && o.verticalScroll !== !1 && !!(Qe || Ze), $t = o.tabledatahorizontalscroll !== !1 && o.tableDataHorizontalScroll !== !1 && o.horizontalScroll !== !1, et = (e, t) => {
+    T && (re(t), e.dataTransfer.setData("text/plain", t), e.dataTransfer.effectAllowed = "move");
+  }, tt = (e, t) => {
+    e.preventDefault(), Ge && (e.dataTransfer.dropEffect = "move", Ce !== t && J(t));
+  }, ot = (e, t) => {
+    e.preventDefault(), e.stopPropagation();
+    const a = e.dataTransfer.getData("text/plain") || j;
+    a && a !== t && _e((l) => {
+      const c = [...l], p = c.indexOf(a), h = c.indexOf(t);
+      return p !== -1 && h !== -1 && (c.splice(p, 1), c.splice(h, 0, a)), c;
+    }), re(null), J(null);
+  }, rt = (e) => {
+    e && (ke((t) => Object.values(t).filter(Boolean).length <= 1 ? t : { ...t, [e]: !1 }), re(null), J(null));
+  }, M = be(() => {
+    let e = [...xe];
+    if (L.trim()) {
+      const t = L.toLowerCase(), a = o.columns.filter((l) => l.searchable !== !1).map((l) => l.key);
+      e = e.filter((l) => a.some((c) => String(l[c] ?? "").toLowerCase().includes(t)));
+    }
+    return Object.entries(oe).forEach(([t, a]) => {
+      a && a !== "all" && (e = e.filter((l) => String(l[t]) === String(a)));
+    }), k.key && e.sort((t, a) => {
+      const l = String(t[k.key] ?? "").toLowerCase(), c = String(a[k.key] ?? "").toLowerCase(), p = l.localeCompare(c, void 0, { numeric: !0 });
+      return k.dir === "asc" ? p : -p;
+    }), e;
+  }, [xe, L, oe, k, o.columns]), W = Math.max(1, Math.ceil(M.length / I)), S = Math.min(mt, W), f = M.slice((S - 1) * I, S * I), at = be(() => m.length > 0 ? m : f.filter((e) => e && e.id).map((e) => e.id), [m, f]), Oe = (e) => {
+    if (k.key !== e) return ye({ key: e, dir: "asc" });
+    if (k.dir === "asc") return ye({ key: e, dir: "desc" });
+    ye({ key: null, dir: null });
+  }, Ie = (e) => ae(e ? f.filter((t) => t && t.id).map((t) => t.id) : []), Te = (e) => ae((t) => t.includes(e) ? t.filter((a) => a !== e) : [...t, e]), it = (e) => {
+    ze(e.id), K({ ...e });
+  }, Me = () => {
+    ze(null), K({});
+  }, Re = () => {
+    te((e) => e.map((t) => t.id === Ke ? P : t)), fe == null || fe(P), ze(null), K({});
+  }, lt = () => {
+    const e = {}, t = m.length > 0 ? m : f.map((a) => a.id);
+    xe.forEach((a) => {
+      t.includes(a.id) && (e[a.id] = { ...a });
+    }), G(e), V(ce.map((a) => a.key)), Se(!0);
+  }, Le = () => {
+    Se(!1), G({}), V([]);
+  }, Be = () => {
+    const e = m.length > 0 ? m : f.map((t) => t.id);
+    te(
+      (t) => t.map((a) => e.includes(a.id) && ne[a.id] || a)
+    ), we == null || we(e, ne), Se(!1), G({}), V([]);
+  }, Ot = () => {
+    te((e) => e.filter((t) => t.id !== X.id)), ae((e) => e.filter((t) => t !== X.id)), ie(null), ve == null || ve(X);
+  }, It = () => {
+    const e = w.map((c) => c.label).join(","), t = M.map((c) => w.map((p) => `"${String(c[p.key] ?? "").replaceAll('"', '""')}"`).join(",")).join(`
+`), a = new Blob([e + `
+` + t], { type: "text/csv" }), l = document.createElement("a");
+    l.href = URL.createObjectURL(a), l.download = "table-export.csv", l.click(), URL.revokeObjectURL(l.href);
+  };
+  D(() => {
+    const e = (t) => {
+      var ge, R, ee, E;
+      if (!o.keyboardNavigation || !f.length) return;
+      const a = document.activeElement;
+      if (a && (["TEXTAREA"].includes(a.tagName) || a.tagName === "INPUT" && a.type !== "checkbox" || a.tagName === "SELECT")) return;
+      const c = !!((ge = o.actions) != null && ge.view || (R = o.actions) != null && R.edit || (ee = o.actions) != null && ee.delete), p = w.length + (v ? 1 : 0), h = w.length + (v ? 1 : 0) + (c ? 1 : 0), d = a == null ? void 0 : a.closest("[data-cell]");
+      let x = A.row, u = A.col;
+      if (d) {
+        const s = d.getAttribute("data-cell");
+        if (s) {
+          const b = s.split("-").map(Number);
+          b.length === 2 && !isNaN(b[0]) && !isNaN(b[1]) && (x = b[0], u = b[1]);
+        }
+      }
+      if (t.key === "ArrowDown") {
+        t.preventDefault();
+        const s = Math.min(f.length - 1, x + 1);
+        z({ row: s, col: u });
+      } else if (t.key === "ArrowUp") {
+        t.preventDefault();
+        const s = Math.max(-1, x - 1);
+        z({ row: s, col: u });
+      } else if (t.key === "ArrowRight") {
+        if (t.preventDefault(), c && u === p) {
+          const b = (E = se.current) == null ? void 0 : E.querySelector(`[data-cell="${x}-${u}"]`), he = b ? Array.from(b.querySelectorAll("button")) : [];
+          if (Y < he.length - 1) {
+            Q((pe) => pe + 1);
+            return;
+          }
+        }
+        const s = Math.min(h - 1, u + 1);
+        z({ row: x, col: s });
+      } else if (t.key === "ArrowLeft") {
+        if (t.preventDefault(), c && u === p && Y > 0) {
+          Q((b) => b - 1);
+          return;
+        }
+        const s = Math.max(0, u - 1);
+        z({ row: x, col: s });
+      } else if (t.key === "Enter" || t.key === " ")
+        if (x === -1)
+          if (v && u === 0)
+            t.preventDefault(), Ie(f.length > 0 && !f.filter((s) => s && s.id).every((s) => m.includes(s.id)));
+          else {
+            const s = v ? u - 1 : u, b = w[s];
+            b && b.sortable && (t.preventDefault(), Oe(b.key));
+          }
+        else {
+          const s = f[x];
+          s && s.id && (a && (a.type === "checkbox" || a.tagName === "BUTTON") ? (t.key === "Enter" || t.key === " ") && (t.preventDefault(), a.click()) : v && u === 0 ? (t.preventDefault(), Te(s.id)) : c && u === p ? (t.preventDefault(), it(s)) : t.key === "Enter" && (t.preventDefault(), O == null || O(s)));
+        }
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [o.keyboardNavigation, f, w, A, Y, Te, Ie, Oe, O, v, m]), D(() => {
+    if (!o.keyboardNavigation || !se.current || document.activeElement === Z.current) return;
+    const e = se.current.querySelector(`[data-cell="${A.row}-${A.col}"]`);
+    if (e) {
+      const t = Array.from(e.querySelectorAll("input, button, select"));
+      t.length > 0 ? (t[Math.min(Y, t.length - 1)] || t[0]).focus() : e.focus();
+    }
+  }, [A, Y, o.keyboardNavigation, f]);
+  const nt = (e = "bottom") => !je || e === "top" && !Ct || e === "bottom" && !zt ? null : /* @__PURE__ */ i("div", { className: `flex flex-col gap-3 ${e === "top" ? "border-b" : "border-t"} border-slate-200 px-4 py-3 sm:flex-row sm:items-center sm:justify-between ${St}`, children: [
+    /* @__PURE__ */ i("div", { className: "text-sm opacity-85", children: [
+      "Showing ",
+      M.length ? (S - 1) * I + 1 : 0,
+      "–",
+      Math.min(S * I, M.length),
+      " of ",
+      M.length
+    ] }),
+    /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+      o.pageSizeOptions && o.pageSizeOptions.length > 0 && /* @__PURE__ */ r(
+        "select",
+        {
+          value: I,
+          onChange: (a) => ft(Number(a.target.value)),
+          className: "rounded-lg border border-slate-200/80 bg-white/95 text-slate-800 px-2 py-1.5 text-sm outline-none focus:border-indigo-500",
+          children: o.pageSizeOptions.map((a) => /* @__PURE__ */ i("option", { value: a, children: [
+            a,
+            "/page"
+          ] }, a))
+        }
+      ),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          disabled: S === 1,
+          onClick: () => H(1),
+          className: "rounded-md border border-slate-200/80 bg-white/90 p-1.5 text-slate-700 hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-transparent",
+          title: "First page",
+          children: /* @__PURE__ */ r(_t, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          disabled: S === 1,
+          onClick: () => H((a) => Math.max(1, a - 1)),
+          className: "rounded-md border border-slate-200/80 bg-white/90 p-1.5 text-slate-700 hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-transparent",
+          title: "Previous page",
+          children: /* @__PURE__ */ r(qt, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ i("span", { className: "px-2 text-sm opacity-90", children: [
+        "Page ",
+        S,
+        " of ",
+        W
+      ] }),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          disabled: S === W,
+          onClick: () => H((a) => Math.min(W, a + 1)),
+          className: "rounded-md border border-slate-200/80 bg-white/90 p-1.5 text-slate-700 hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-transparent",
+          title: "Next page",
+          children: /* @__PURE__ */ r(Jt, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          disabled: S === W,
+          onClick: () => H(W),
+          className: "rounded-md border border-slate-200/80 bg-white/90 p-1.5 text-slate-700 hover:bg-slate-100 disabled:opacity-40 disabled:hover:bg-transparent",
+          title: "Last page",
+          children: /* @__PURE__ */ r(Xt, { size: 16 })
+        }
+      )
+    ] })
+  ] }, e);
+  return /* @__PURE__ */ i("div", { className: "space-y-3", style: { width: Dt, maxWidth: "100%" }, children: [
+    /* @__PURE__ */ r("div", { className: `${bt} p-4 ${Et}`, children: /* @__PURE__ */ i("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ r("h2", { className: "text-lg font-semibold", children: o.title }),
+        /* @__PURE__ */ i("p", { className: "text-sm text-slate-500", children: [
+          M.length,
+          " records"
+        ] })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-2", children: [
+        !!o.searchable && /* @__PURE__ */ i("div", { className: "relative", children: [
+          /* @__PURE__ */ r(Tt, { size: 16, className: "absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" }),
+          /* @__PURE__ */ r("input", { ref: Z, autoFocus: !0, value: L, onChange: (e) => We(e.target.value), placeholder: "Search...", className: "w-56 rounded-lg border border-slate-200 py-2 pl-9 pr-8 text-sm outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20" }),
+          L && /* @__PURE__ */ r("button", { onClick: () => {
+            var e;
+            We(""), (e = Z.current) == null || e.focus();
+          }, className: "absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600", children: /* @__PURE__ */ r(Pe, { size: 15 }) })
+        ] }),
+        !!(o.filterable !== !1 && o.filters && o.filters.length > 0) && /* @__PURE__ */ i("div", { ref: Ee, className: "relative", children: [
+          /* @__PURE__ */ i("button", { onClick: () => Xe((e) => !e), className: "flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm", children: [
+            /* @__PURE__ */ r(Mt, { size: 16 }),
+            "Filter"
+          ] }),
+          xt && /* @__PURE__ */ i("div", { className: "absolute right-0 z-30 mt-2 w-64 rounded-xl border bg-white p-4 shadow-xl", children: [
+            (st = o.filters) == null ? void 0 : st.map((e) => /* @__PURE__ */ i("label", { className: "mb-3 block text-sm", children: [
+              /* @__PURE__ */ r("span", { className: "mb-1 block font-medium", children: e.label }),
+              /* @__PURE__ */ r("select", { value: oe[e.key] || "all", onChange: (t) => He((a) => ({ ...a, [e.key]: t.target.value })), className: "w-full rounded-lg border p-2", children: e.options.map((t) => /* @__PURE__ */ r("option", { value: t.value, children: t.label }, t.value)) })
+            ] }, e.key)),
+            /* @__PURE__ */ r("button", { onClick: () => He({}), className: "text-sm font-medium text-slate-600", children: "Clear filters" })
+          ] })
+        ] }),
+        !!o.columnVisibility && /* @__PURE__ */ i("div", { ref: De, className: "relative", children: [
+          /* @__PURE__ */ i("button", { onClick: () => Je((e) => !e), className: "flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm", children: [
+            /* @__PURE__ */ r(Rt, { size: 16 }),
+            "Columns"
+          ] }),
+          wt && /* @__PURE__ */ i("div", { className: "absolute right-0 z-30 mt-2 w-64 rounded-xl border bg-white p-3.5 shadow-xl", children: [
+            /* @__PURE__ */ i("div", { className: "flex items-center justify-between pb-2 mb-2 border-b", children: [
+              /* @__PURE__ */ r("span", { className: "text-xs font-semibold uppercase tracking-wider text-slate-500", children: "Columns & Layout" }),
+              /* @__PURE__ */ i("button", { onClick: yt, className: "flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-800 font-medium", title: "Reset default layout", children: [
+                /* @__PURE__ */ r(Lt, { size: 12 }),
+                "Reset"
+              ] })
+            ] }),
+            /* @__PURE__ */ r("div", { className: "space-y-1 max-h-64 overflow-y-auto", children: q.map((e) => {
+              const t = o.columns.find((l) => l.key === e);
+              if (!t) return null;
+              const a = _[e] !== !1;
+              return /* @__PURE__ */ i(
+                "div",
+                {
+                  draggable: !0,
+                  onDragStart: (l) => et(l, t.key),
+                  onDragOver: (l) => tt(l, t.key),
+                  onDrop: (l) => ot(l, t.key),
+                  className: `flex items-center justify-between p-2 text-sm rounded-lg hover:bg-slate-50 cursor-grab active:cursor-grabbing transition-colors ${j === t.key ? "opacity-30 bg-slate-100" : ""} ${Ce === t.key && j !== t.key ? "border-l-4 border-l-indigo-600 bg-indigo-50/60" : ""}`,
+                  children: [
+                    /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ r("span", { title: "Drag to reorder", className: "text-slate-300 hover:text-slate-500 cursor-grab", children: /* @__PURE__ */ r(pt, { size: 14 }) }),
+                      /* @__PURE__ */ i("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+                        /* @__PURE__ */ r("input", { type: "checkbox", checked: a, onChange: () => ke((l) => {
+                          const c = Object.values(l).filter(Boolean).length;
+                          return l[t.key] && c === 1 ? l : { ...l, [t.key]: !l[t.key] };
+                        }), className: "rounded text-indigo-600 focus:ring-indigo-500" }),
+                        /* @__PURE__ */ r("span", { className: a ? "font-medium text-slate-800" : "text-slate-400 line-through", children: t.label })
+                      ] })
+                    ] }),
+                    de && /* @__PURE__ */ i("span", { className: "text-xs text-slate-400 font-mono", children: [
+                      B[t.key] || 160,
+                      "px"
+                    ] })
+                  ]
+                },
+                t.key
+              );
+            }) }),
+            /* @__PURE__ */ r("p", { className: "mt-2.5 pt-2 border-t text-[11px] text-slate-400 text-center", children: T && de ? "Drag handles to reorder | Drag column edge to resize" : T ? "Drag handles to reorder" : de ? "Drag column edge to resize" : "Column layout options" })
+          ] })
+        ] }),
+        o.bulkEditable !== !1 && ce.length > 0 && /* @__PURE__ */ i("button", { onClick: lt, className: `flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors ${le ? "border-indigo-500 bg-indigo-600 text-white" : m.length > 0 ? "border-indigo-300 bg-indigo-50 text-indigo-700 hover:bg-indigo-100" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"}`, children: [
+          /* @__PURE__ */ r(Fe, { size: 16 }),
+          "Bulk Edit",
+          m.length > 0 ? ` (${m.length})` : ""
+        ] }),
+        o.exportable && /* @__PURE__ */ i("button", { onClick: It, className: "flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm", children: [
+          /* @__PURE__ */ r(Bt, { size: 16 }),
+          "Export"
+        ] })
+      ] })
+    ] }) }),
+    Ge && /* @__PURE__ */ r(
+      "div",
+      {
+        onDragOver: (e) => {
+          e.preventDefault(), e.dataTransfer.dropEffect = "move";
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          const t = e.dataTransfer.getData("text/plain") || j;
+          t && rt(t);
+        },
+        className: `transition-all duration-200 overflow-hidden ${j ? "max-h-24 opacity-100 my-2" : "max-h-0 opacity-0 my-0 pointer-events-none"}`,
+        children: /* @__PURE__ */ i("div", { className: "flex items-center justify-center gap-2 rounded-xl border-2 border-dashed border-rose-400 bg-rose-50 p-3 text-sm font-semibold text-rose-700 shadow-sm", children: [
+          /* @__PURE__ */ r(ut, { size: 20, className: "text-rose-600 animate-bounce" }),
+          /* @__PURE__ */ i("span", { children: [
+            "Drop column header here to hide column ",
+            /* @__PURE__ */ r("b", { children: (ct = o.columns.find((e) => e.key === j)) == null ? void 0 : ct.label })
+          ] })
+        ] })
+      }
+    ),
+    le && /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-xl border border-indigo-200 bg-indigo-50/80 p-3.5 shadow-sm", children: [
+      /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ r(Fe, { size: 18, className: "text-indigo-600" }),
+          /* @__PURE__ */ i("span", { className: "font-semibold text-slate-900 text-sm", children: [
+            "Bulk Edit Mode (",
+            at.length,
+            " records):"
+          ] })
+        ] }),
+        /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ r("span", { className: "text-xs font-medium text-slate-600", children: "Select columns to edit:" }),
+          ce.map((e) => {
+            const t = Ve.includes(e.key);
+            return /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  V(t ? (a) => a.filter((l) => l !== e.key) : (a) => [...a, e.key]);
+                },
+                className: `flex items-center gap-1.5 rounded-lg px-2.5 py-1 text-xs font-medium border transition-all ${t ? "border-indigo-500 bg-indigo-600 text-white shadow-xs" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"}`,
+                children: [
+                  /* @__PURE__ */ r("span", { className: `flex h-3.5 w-3.5 items-center justify-center rounded border ${t ? "border-white bg-white text-indigo-600" : "border-slate-300 bg-white"}`, children: t && /* @__PURE__ */ r(Ue, { size: 10, strokeWidth: 3 }) }),
+                  /* @__PURE__ */ r("span", { children: e.label })
+                ]
+              },
+              e.key
+            );
+          })
+        ] })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ i(
+          "button",
+          {
+            onClick: Le,
+            className: "flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 transition-colors",
+            children: [
+              /* @__PURE__ */ r(Pe, { size: 14, className: "text-rose-500" }),
+              "Cancel"
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          "button",
+          {
+            onClick: Be,
+            className: "flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3.5 py-1.5 text-xs font-medium text-white hover:bg-emerald-700 shadow-sm transition-colors",
+            children: [
+              /* @__PURE__ */ r(Ue, { size: 14 }),
+              "Save"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ i("div", { className: `${bt} overflow-hidden`, children: [
+      nt("top"),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          style: {
+            maxHeight: Ze || void 0
+          },
+          className: `${$t ? "overflow-x-auto" : ""} ${jt ? "overflow-y-auto" : ""}`,
+          children: /* @__PURE__ */ i("table", { ref: se, className: "min-w-full text-sm table-fixed", children: [
+            /* @__PURE__ */ r("thead", { className: `sticky top-0 z-20 border-b border-slate-200 ${Ye}`, children: /* @__PURE__ */ i("tr", { children: [
+              v && /* @__PURE__ */ r("th", { "data-cell": "-1-0", className: "w-12 px-4 py-3", children: /* @__PURE__ */ r("input", { type: "checkbox", checked: f.length > 0 && f.every((e) => m.includes(e.id)), onChange: (e) => Ie(e.target.checked), onFocus: () => z({ row: -1, col: 0 }) }) }),
+              w.map((e, t) => {
+                const a = v ? t + 1 : t, l = j === e.key, c = Ce === e.key && j !== e.key, p = B[e.key] || e.width || 160;
+                return /* @__PURE__ */ i(
+                  "th",
+                  {
+                    "data-cell": `-1-${a}`,
+                    style: { width: `${p}px`, minWidth: `${p}px` },
+                    draggable: T,
+                    onDragStart: (h) => et(h, e.key),
+                    onDragOver: (h) => tt(h, e.key),
+                    onDragLeave: () => J(null),
+                    onDrop: (h) => ot(h, e.key),
+                    onDragEnd: () => {
+                      re(null), J(null);
+                    },
+                    "aria-sort": k.key === e.key ? k.dir : "none",
+                    className: `group relative whitespace-nowrap px-4 py-3 text-left font-semibold ${T ? "cursor-grab active:cursor-grabbing" : ""} transition-colors select-none ${l ? "opacity-30 bg-slate-100" : ""} ${c ? "border-l-4 border-l-indigo-600 bg-indigo-50/60" : ""}`,
+                    children: [
+                      /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-1.5 pr-2", children: [
+                        /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5 overflow-hidden", children: [
+                          T && /* @__PURE__ */ r("span", { title: "Drag header to reorder", className: "opacity-60 group-hover:opacity-100 cursor-grab shrink-0", children: /* @__PURE__ */ r(pt, { size: 14 }) }),
+                          /* @__PURE__ */ i("button", { disabled: !e.sortable, onClick: () => e.sortable && Oe(e.key), className: `flex items-center gap-1 truncate ${e.sortable ? "hover:opacity-80" : ""}`, children: [
+                            /* @__PURE__ */ r("span", { className: "truncate", children: e.label }),
+                            e.sortable && (k.key === e.key ? k.dir === "asc" ? /* @__PURE__ */ r(At, { size: 15, className: "shrink-0" }) : /* @__PURE__ */ r(Pt, { size: 15, className: "shrink-0" }) : /* @__PURE__ */ r(Ft, { size: 15, className: "opacity-50 shrink-0" }))
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ r(
+                          "button",
+                          {
+                            type: "button",
+                            title: "Hide column",
+                            onClick: (h) => {
+                              h.stopPropagation(), rt(e.key);
+                            },
+                            className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:text-rose-400 rounded shrink-0",
+                            children: /* @__PURE__ */ r(Ut, { size: 13 })
+                          }
+                        )
+                      ] }),
+                      de && /* @__PURE__ */ r(
+                        "div",
+                        {
+                          draggable: !1,
+                          onMouseDown: (h) => kt(h, e.key),
+                          onDoubleClick: (h) => {
+                            h.stopPropagation(), Ne((d) => ({ ...d, [e.key]: e.width || 160 }));
+                          },
+                          title: "Drag to resize column width",
+                          className: `absolute right-0 top-0 bottom-0 w-2.5 cursor-col-resize group-hover:bg-indigo-300/50 hover:!bg-indigo-500 transition-colors z-10 ${vt === e.key ? "bg-indigo-600 w-1" : ""}`
+                        }
+                      )
+                    ]
+                  },
+                  e.key
+                );
+              }),
+              (((dt = o.actions) == null ? void 0 : dt.view) || ((gt = o.actions) == null ? void 0 : gt.edit) || ((ht = o.actions) == null ? void 0 : ht.delete)) && /* @__PURE__ */ r("th", { className: `sticky right-0 top-0 z-30 px-4 py-3 text-right font-semibold w-32 ${Ye}`, children: "Actions" })
+            ] }) }),
+            /* @__PURE__ */ i("tbody", { children: [
+              f.filter((e) => e && e.id).map((e, t) => {
+                var c, p, h;
+                const a = Ke === e.id, l = le && at.includes(e.id);
+                return /* @__PURE__ */ i("tr", { className: `border-b last:border-0 ${a || l ? "bg-indigo-50/20" : "hover:bg-slate-50"}`, children: [
+                  v && /* @__PURE__ */ r("td", { "data-cell": `${t}-0`, className: "px-4 py-3", children: /* @__PURE__ */ r("input", { type: "checkbox", checked: m.includes(e.id), onChange: () => Te(e.id), onFocus: () => z({ row: t, col: 0 }) }) }),
+                  w.map((d, x) => {
+                    var he, pe;
+                    const u = v ? x + 1 : x, ge = l && Ve.includes(d.key) && d.editable !== !1, R = Nt(d), ee = B[d.key] || d.width || 160, E = e[d.key], s = E != null ? String(E) : "", b = s.length > 25;
+                    return /* @__PURE__ */ r("td", { "data-cell": `${t}-${u}`, style: { width: `${ee}px`, minWidth: `${ee}px` }, className: "px-4 py-3 truncate", tabIndex: -1, title: b ? s : void 0, children: a && d.editable !== !1 ? R ? /* @__PURE__ */ r(
+                      "select",
+                      {
+                        value: P[d.key] ?? "",
+                        onChange: (n) => K({ ...P, [d.key]: n.target.value }),
+                        onKeyDown: (n) => {
+                          n.key === "Enter" && Re(), n.key === "Escape" && Me();
+                        },
+                        className: "w-full rounded-md border border-indigo-300 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500",
+                        children: R.map((n) => {
+                          const C = typeof n == "object" ? n.value : n, Ae = typeof n == "object" ? n.label : n;
+                          return /* @__PURE__ */ r("option", { value: C, children: Ae }, C);
+                        })
+                      }
+                    ) : /* @__PURE__ */ r(
+                      "input",
+                      {
+                        type: "text",
+                        value: P[d.key] ?? "",
+                        onChange: (n) => K({ ...P, [d.key]: n.target.value }),
+                        onKeyDown: (n) => {
+                          n.key === "Enter" && Re(), n.key === "Escape" && Me();
+                        },
+                        className: "w-full rounded-md border border-indigo-300 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
+                      }
+                    ) : ge ? R ? /* @__PURE__ */ r(
+                      "select",
+                      {
+                        value: ((he = ne[e.id]) == null ? void 0 : he[d.key]) ?? e[d.key] ?? "",
+                        onChange: (n) => G((C) => ({
+                          ...C,
+                          [e.id]: {
+                            ...C[e.id] || e,
+                            [d.key]: n.target.value
+                          }
+                        })),
+                        onKeyDown: (n) => {
+                          n.key === "Enter" && Be(), n.key === "Escape" && Le();
+                        },
+                        className: "w-full rounded-md border border-indigo-400 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500",
+                        children: R.map((n) => {
+                          const C = typeof n == "object" ? n.value : n, Ae = typeof n == "object" ? n.label : n;
+                          return /* @__PURE__ */ r("option", { value: C, children: Ae }, C);
+                        })
+                      }
+                    ) : /* @__PURE__ */ r(
+                      "input",
+                      {
+                        type: "text",
+                        value: ((pe = ne[e.id]) == null ? void 0 : pe[d.key]) ?? e[d.key] ?? "",
+                        onChange: (n) => G((C) => ({
+                          ...C,
+                          [e.id]: {
+                            ...C[e.id] || e,
+                            [d.key]: n.target.value
+                          }
+                        })),
+                        onKeyDown: (n) => {
+                          n.key === "Enter" && Be(), n.key === "Escape" && Le();
+                        },
+                        className: "w-full rounded-md border border-indigo-400 bg-white px-2 py-1 text-sm outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500"
+                      }
+                    ) : d.render ? d.render(E, e, t) : d.key === "status" ? /* @__PURE__ */ r("span", { className: `rounded-full px-2.5 py-1 text-xs font-medium ${Kt[E] || "bg-slate-100 text-slate-600"}`, children: E }) : b ? /* @__PURE__ */ i("span", { title: s, children: [
+                      s.slice(0, 25),
+                      "..."
+                    ] }) : s }, d.key);
+                  }),
+                  (((c = o.actions) == null ? void 0 : c.view) || ((p = o.actions) == null ? void 0 : p.edit) || ((h = o.actions) == null ? void 0 : h.delete)) && /* @__PURE__ */ r("td", { "data-cell": `${t}-${w.length + (v ? 1 : 0)}`, className: "sticky right-0 bg-white px-4 py-3 w-32 z-10", children: a ? /* @__PURE__ */ i("div", { className: "flex justify-end gap-1", children: [
+                    /* @__PURE__ */ r("button", { title: "Save", onClick: Re, className: "rounded-md bg-emerald-100 p-2 text-emerald-700 hover:bg-emerald-200", children: /* @__PURE__ */ r(Ue, { size: 16 }) }),
+                    /* @__PURE__ */ r("button", { title: "Cancel", onClick: Me, className: "rounded-md bg-rose-100 p-2 text-rose-700 hover:bg-rose-200", children: /* @__PURE__ */ r(Pe, { size: 16 }) })
+                  ] }) : /* @__PURE__ */ i("div", { className: "flex justify-end gap-1", children: [
+                    o.actions.view && /* @__PURE__ */ r("button", { title: "View", onClick: () => O == null ? void 0 : O(e), onFocus: () => {
+                      z({ row: t, col: w.length + (v ? 1 : 0) }), Q(0);
+                    }, className: "rounded-md p-2 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400", children: /* @__PURE__ */ r(Wt, { size: 16 }) }),
+                    o.actions.edit && /* @__PURE__ */ r("button", { title: "Edit", onClick: () => it(e), onFocus: () => {
+                      z({ row: t, col: w.length + (v ? 1 : 0) }), Q(1);
+                    }, className: "rounded-md p-2 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400", children: /* @__PURE__ */ r(Ht, { size: 16 }) }),
+                    o.actions.delete && /* @__PURE__ */ r("button", { title: "Delete", onClick: () => ie(e), onFocus: () => {
+                      z({ row: t, col: w.length + (v ? 1 : 0) }), Q(2);
+                    }, className: "rounded-md p-2 text-red-600 hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-400", children: /* @__PURE__ */ r(ut, { size: 16 }) })
+                  ] }) })
+                ] }, e.id);
+              }),
+              !f.length && /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ i("td", { colSpan: w.length + (v ? 1 : 0) + 1, className: "px-6 py-16 text-center", children: [
+                /* @__PURE__ */ r("div", { className: "font-medium", children: "No records found" }),
+                /* @__PURE__ */ r("div", { className: "mt-1 text-sm text-slate-500", children: "Try changing your search or filters." })
+              ] }) })
+            ] })
+          ] })
+        }
+      ),
+      nt("bottom")
+    ] }),
+    m.length > 0 && !le && /* @__PURE__ */ i("div", { className: "fixed bottom-5 left-1/2 z-40 flex -translate-x-1/2 items-center gap-3 rounded-xl bg-slate-900 px-4 py-2.5 text-sm text-white shadow-xl", children: [
+      /* @__PURE__ */ i("span", { className: "font-medium pl-1", children: [
+        m.length,
+        " selected"
+      ] }),
+      o.bulkEditable !== !1 && ce.length > 0 && /* @__PURE__ */ i(
+        "button",
+        {
+          onClick: lt,
+          className: "flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-indigo-500 transition-colors shadow-sm",
+          children: [
+            /* @__PURE__ */ r(Fe, { size: 14 }),
+            "Bulk Edit"
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          onClick: () => ae([]),
+          className: "text-xs text-slate-400 hover:text-white underline pr-1",
+          children: "Clear"
+        }
+      )
+    ] }),
+    X && /* @__PURE__ */ r("div", { onClick: (e) => {
+      e.target === e.currentTarget && ie(null);
+    }, className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4", children: /* @__PURE__ */ i("div", { className: "w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl", children: [
+      /* @__PURE__ */ r("h3", { className: "text-lg font-semibold", children: "Delete record?" }),
+      /* @__PURE__ */ i("p", { className: "mt-2 text-sm text-slate-500", children: [
+        "Are you sure you want to delete ",
+        /* @__PURE__ */ r("b", { children: X.name }),
+        "? This action cannot be undone."
+      ] }),
+      /* @__PURE__ */ i("div", { className: "mt-6 flex justify-end gap-2", children: [
+        /* @__PURE__ */ r("button", { onClick: () => ie(null), className: "rounded-lg border px-4 py-2 text-sm", children: "Cancel" }),
+        /* @__PURE__ */ r("button", { onClick: Ot, className: "rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white", children: "Delete" })
+      ] })
+    ] }) })
+  ] });
 }
-//#endregion
-//#region src/index.css?inline
-var m = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-400:oklch(70.4% .191 22.216);--color-red-600:oklch(57.7% .245 27.325);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-700:oklch(55.5% .163 48.998);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-800:oklch(39.8% .195 277.366);--color-rose-50:oklch(96.9% .015 12.422);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-rose-700:oklch(51.4% .222 16.935);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-bounce:bounce 1s infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.visible\\!{visibility:visible!important}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.top-0{top:0}.top-1{top:var(--spacing)}.top-1\\/2{top:50%}.right-0{right:0}.right-2{right:calc(var(--spacing) * 2)}.bottom-0{bottom:0}.bottom-5{bottom:calc(var(--spacing) * 5)}.left-1{left:var(--spacing)}.left-1\\/2{left:50%}.left-3{left:calc(var(--spacing) * 3)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-inline:auto}.my-0{margin-block:0}.my-2{margin-block:calc(var(--spacing) * 2)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.block{display:block}.flex{display:flex}.grid{display:grid}.table{display:table}.h-3{height:calc(var(--spacing) * 3)}.h-3\\.5{height:calc(var(--spacing) * 3.5)}.max-h-0{max-height:0}.max-h-24{max-height:calc(var(--spacing) * 24)}.max-h-64{max-height:calc(var(--spacing) * 64)}.min-h-screen{min-height:100vh}.w-1{width:var(--spacing)}.w-2{width:calc(var(--spacing) * 2)}.w-2\\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\\.5{width:calc(var(--spacing) * 3.5)}.w-12{width:calc(var(--spacing) * 12)}.w-32{width:calc(var(--spacing) * 32)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-full{width:100%}.max-w-7xl{max-width:var(--container-7xl)}.max-w-sm{max-width:var(--container-sm)}.min-w-full{min-width:100%}.shrink-0{flex-shrink:0}.table-fixed{table-layout:fixed}.-translate-x-1{--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.animate-bounce{animation:var(--animate-bounce)}.cursor-col-resize{cursor:col-resize}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:2147483647px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-emerald-200{border-color:var(--color-emerald-200)}.border-indigo-200{border-color:var(--color-indigo-200)}.border-indigo-300{border-color:var(--color-indigo-300)}.border-indigo-400{border-color:var(--color-indigo-400)}.border-indigo-500{border-color:var(--color-indigo-500)}.border-rose-400{border-color:var(--color-rose-400)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-300{border-color:var(--color-slate-300)}.border-white{border-color:var(--color-white)}.border-l-indigo-600{border-left-color:var(--color-indigo-600)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-black{background-color:var(--color-black)}.bg-black\\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\\/40{background-color:color-mix(in oklab, var(--color-black) 40%, transparent)}}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-indigo-50{background-color:var(--color-indigo-50)}.bg-indigo-50\\/20{background-color:#eef2ff33}@supports (color:color-mix(in lab, red, red)){.bg-indigo-50\\/20{background-color:color-mix(in oklab, var(--color-indigo-50) 20%, transparent)}}.bg-indigo-50\\/60{background-color:#eef2ff99}@supports (color:color-mix(in lab, red, red)){.bg-indigo-50\\/60{background-color:color-mix(in oklab, var(--color-indigo-50) 60%, transparent)}}.bg-indigo-50\\/80{background-color:#eef2ffcc}@supports (color:color-mix(in lab, red, red)){.bg-indigo-50\\/80{background-color:color-mix(in oklab, var(--color-indigo-50) 80%, transparent)}}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-red-600{background-color:var(--color-red-600)}.bg-rose-50{background-color:var(--color-rose-50)}.bg-rose-100{background-color:var(--color-rose-100)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-white{background-color:var(--color-white)}.p-0{padding:0}.p-0\\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:var(--spacing)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pr-1{padding-right:var(--spacing)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pl-1{padding-left:var(--spacing)}.pl-9{padding-left:calc(var(--spacing) * 9)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[11px\\]{font-size:11px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-amber-700{color:var(--color-amber-700)}.text-emerald-700{color:var(--color-emerald-700)}.text-indigo-600{color:var(--color-indigo-600)}.text-indigo-700{color:var(--color-indigo-700)}.text-red-600{color:var(--color-red-600)}.text-rose-500{color:var(--color-rose-500)}.text-rose-600{color:var(--color-rose-600)}.text-rose-700{color:var(--color-rose-700)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-30{opacity:.3}.opacity-100{opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\\:bg-indigo-300\\/50:is(:where(.group):hover *){background-color:#a4b3ff80}@supports (color:color-mix(in lab, red, red)){.group-hover\\:bg-indigo-300\\/50:is(:where(.group):hover *){background-color:color-mix(in oklab, var(--color-indigo-300) 50%, transparent)}}.group-hover\\:text-slate-500:is(:where(.group):hover *){color:var(--color-slate-500)}.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}}.last\\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media (hover:hover){.hover\\:border-slate-300:hover{border-color:var(--color-slate-300)}.hover\\:\\!bg-indigo-500:hover{background-color:var(--color-indigo-500)!important}.hover\\:bg-emerald-200:hover{background-color:var(--color-emerald-200)}.hover\\:bg-emerald-700:hover{background-color:var(--color-emerald-700)}.hover\\:bg-indigo-100:hover{background-color:var(--color-indigo-100)}.hover\\:bg-indigo-500:hover{background-color:var(--color-indigo-500)}.hover\\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\\:bg-rose-200:hover{background-color:var(--color-rose-200)}.hover\\:bg-slate-50:hover{background-color:var(--color-slate-50)}.hover\\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\\:text-indigo-800:hover{color:var(--color-indigo-800)}.hover\\:text-rose-600:hover{color:var(--color-rose-600)}.hover\\:text-slate-500:hover{color:var(--color-slate-500)}.hover\\:text-slate-600:hover{color:var(--color-slate-600)}.hover\\:text-slate-900:hover{color:var(--color-slate-900)}.hover\\:text-white:hover{color:var(--color-white)}}.focus\\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color:#625fff33}@supports (color:color-mix(in lab, red, red)){.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color:color-mix(in oklab, var(--color-indigo-500) 20%, transparent)}}.focus\\:ring-red-400:focus{--tw-ring-color:var(--color-red-400)}.focus\\:ring-slate-400:focus{--tw-ring-color:var(--color-slate-400)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\\:cursor-grabbing:active{cursor:grabbing}.disabled\\:opacity-40:disabled{opacity:.4}@media (width>=40rem){.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:justify-between{justify-content:space-between}.sm\\:p-6{padding:calc(var(--spacing) * 6)}}@media (width>=64rem){.lg\\:flex-row{flex-direction:row}.lg\\:items-center{align-items:center}.lg\\:justify-between{justify-content:space-between}.lg\\:p-10{padding:calc(var(--spacing) * 10)}}}*{box-sizing:border-box}body{color:#0f172a;background:#f8fafc;margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-tracking{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@property --tw-duration{syntax:\"*\";inherits:false}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}";
-//#endregion
-//#region src/index.js
+const Vt = '/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-400:oklch(70.4% .191 22.216);--color-red-600:oklch(57.7% .245 27.325);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-700:oklch(55.5% .163 48.998);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-emerald-800:oklch(43.2% .095 166.913);--color-emerald-900:oklch(37.8% .077 168.94);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-rose-50:oklch(96.9% .015 12.422);--color-rose-100:oklch(94.1% .03 12.58);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-500:oklch(64.5% .246 16.439);--color-rose-600:oklch(58.6% .253 17.585);--color-rose-700:oklch(51.4% .222 16.935);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-bounce:bounce 1s infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.top-0{top:0}.top-1\\/2{top:50%}.right-0{right:0}.right-2{right:calc(var(--spacing) * 2)}.bottom-0{bottom:0}.bottom-5{bottom:calc(var(--spacing) * 5)}.left-1\\/2{left:50%}.left-3{left:calc(var(--spacing) * 3)}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.my-0{margin-block:0}.my-2{margin-block:calc(var(--spacing) * 2)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.table{display:table}.h-3\\.5{height:calc(var(--spacing) * 3.5)}.max-h-0{max-height:0}.max-h-24{max-height:calc(var(--spacing) * 24)}.max-h-64{max-height:calc(var(--spacing) * 64)}.min-h-screen{min-height:100vh}.w-1{width:var(--spacing)}.w-2\\.5{width:calc(var(--spacing) * 2.5)}.w-3\\.5{width:calc(var(--spacing) * 3.5)}.w-12{width:calc(var(--spacing) * 12)}.w-32{width:calc(var(--spacing) * 32)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-full{width:100%}.max-w-7xl{max-width:var(--container-7xl)}.max-w-sm{max-width:var(--container-sm)}.min-w-full{min-width:100%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.table-fixed{table-layout:fixed}.-translate-x-1\\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.animate-bounce{animation:var(--animate-bounce)}.cursor-col-resize{cursor:col-resize}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-emerald-200{border-color:var(--color-emerald-200)}.border-indigo-200{border-color:var(--color-indigo-200)}.border-indigo-300{border-color:var(--color-indigo-300)}.border-indigo-400{border-color:var(--color-indigo-400)}.border-indigo-500{border-color:var(--color-indigo-500)}.border-rose-400{border-color:var(--color-rose-400)}.border-slate-200{border-color:var(--color-slate-200)}.border-slate-200\\/80{border-color:#e2e8f0cc}@supports (color:color-mix(in lab,red,red)){.border-slate-200\\/80{border-color:color-mix(in oklab,var(--color-slate-200) 80%,transparent)}}.border-slate-300{border-color:var(--color-slate-300)}.border-white{border-color:var(--color-white)}.border-l-indigo-600{border-left-color:var(--color-indigo-600)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-black\\/40{background-color:#0006}@supports (color:color-mix(in lab,red,red)){.bg-black\\/40{background-color:color-mix(in oklab,var(--color-black) 40%,transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-50\\/50{background-color:#eff6ff80}@supports (color:color-mix(in lab,red,red)){.bg-blue-50\\/50{background-color:color-mix(in oklab,var(--color-blue-50) 50%,transparent)}}.bg-blue-900{background-color:var(--color-blue-900)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-50\\/50{background-color:#ecfdf580}@supports (color:color-mix(in lab,red,red)){.bg-emerald-50\\/50{background-color:color-mix(in oklab,var(--color-emerald-50) 50%,transparent)}}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-emerald-900{background-color:var(--color-emerald-900)}.bg-indigo-50{background-color:var(--color-indigo-50)}.bg-indigo-50\\/20{background-color:#eef2ff33}@supports (color:color-mix(in lab,red,red)){.bg-indigo-50\\/20{background-color:color-mix(in oklab,var(--color-indigo-50) 20%,transparent)}}.bg-indigo-50\\/50{background-color:#eef2ff80}@supports (color:color-mix(in lab,red,red)){.bg-indigo-50\\/50{background-color:color-mix(in oklab,var(--color-indigo-50) 50%,transparent)}}.bg-indigo-50\\/60{background-color:#eef2ff99}@supports (color:color-mix(in lab,red,red)){.bg-indigo-50\\/60{background-color:color-mix(in oklab,var(--color-indigo-50) 60%,transparent)}}.bg-indigo-50\\/80{background-color:#eef2ffcc}@supports (color:color-mix(in lab,red,red)){.bg-indigo-50\\/80{background-color:color-mix(in oklab,var(--color-indigo-50) 80%,transparent)}}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-indigo-900{background-color:var(--color-indigo-900)}.bg-red-600{background-color:var(--color-red-600)}.bg-rose-50{background-color:var(--color-rose-50)}.bg-rose-100{background-color:var(--color-rose-100)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-100{background-color:var(--color-slate-100)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-white{background-color:var(--color-white)}.bg-white\\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab,red,red)){.bg-white\\/90{background-color:color-mix(in oklab,var(--color-white) 90%,transparent)}}.bg-white\\/95{background-color:#fffffff2}@supports (color:color-mix(in lab,red,red)){.bg-white\\/95{background-color:color-mix(in oklab,var(--color-white) 95%,transparent)}}.p-0\\.5{padding:calc(var(--spacing) * .5)}.p-1\\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:var(--spacing)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pr-1{padding-right:var(--spacing)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pl-1{padding-left:var(--spacing)}.pl-9{padding-left:calc(var(--spacing) * 9)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[11px\\]{font-size:11px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-amber-700{color:var(--color-amber-700)}.text-blue-100{color:var(--color-blue-100)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-emerald-100{color:var(--color-emerald-100)}.text-emerald-700{color:var(--color-emerald-700)}.text-emerald-800{color:var(--color-emerald-800)}.text-emerald-900{color:var(--color-emerald-900)}.text-indigo-100{color:var(--color-indigo-100)}.text-indigo-600{color:var(--color-indigo-600)}.text-indigo-700{color:var(--color-indigo-700)}.text-indigo-800{color:var(--color-indigo-800)}.text-indigo-900{color:var(--color-indigo-900)}.text-red-600{color:var(--color-red-600)}.text-rose-500{color:var(--color-rose-500)}.text-rose-600{color:var(--color-rose-600)}.text-rose-700{color:var(--color-rose-700)}.text-slate-100{color:var(--color-slate-100)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.text-slate-600{color:var(--color-slate-600)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-30{opacity:.3}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-85{opacity:.85}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.group-hover\\:bg-indigo-300\\/50:is(:where(.group):hover *){background-color:#a4b3ff80}@supports (color:color-mix(in lab,red,red)){.group-hover\\:bg-indigo-300\\/50:is(:where(.group):hover *){background-color:color-mix(in oklab,var(--color-indigo-300) 50%,transparent)}}.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}}.last\\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media(hover:hover){.hover\\:border-slate-300:hover{border-color:var(--color-slate-300)}.hover\\:\\!bg-indigo-500:hover{background-color:var(--color-indigo-500)!important}.hover\\:bg-emerald-200:hover{background-color:var(--color-emerald-200)}.hover\\:bg-emerald-700:hover{background-color:var(--color-emerald-700)}.hover\\:bg-indigo-100:hover{background-color:var(--color-indigo-100)}.hover\\:bg-indigo-500:hover{background-color:var(--color-indigo-500)}.hover\\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\\:bg-rose-200:hover{background-color:var(--color-rose-200)}.hover\\:bg-slate-50:hover{background-color:var(--color-slate-50)}.hover\\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\\:text-indigo-800:hover{color:var(--color-indigo-800)}.hover\\:text-rose-400:hover{color:var(--color-rose-400)}.hover\\:text-slate-500:hover{color:var(--color-slate-500)}.hover\\:text-slate-600:hover{color:var(--color-slate-600)}.hover\\:text-white:hover{color:var(--color-white)}.hover\\:opacity-80:hover{opacity:.8}}.focus\\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color:#625fff33}@supports (color:color-mix(in lab,red,red)){.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color:color-mix(in oklab, var(--color-indigo-500) 20%, transparent)}}.focus\\:ring-red-400:focus{--tw-ring-color:var(--color-red-400)}.focus\\:ring-slate-400:focus{--tw-ring-color:var(--color-slate-400)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\\:cursor-grabbing:active{cursor:grabbing}.disabled\\:opacity-40:disabled{opacity:.4}@media(hover:hover){.disabled\\:hover\\:bg-transparent:disabled:hover{background-color:#0000}}@media(min-width:40rem){.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:justify-between{justify-content:space-between}.sm\\:p-6{padding:calc(var(--spacing) * 6)}}@media(min-width:64rem){.lg\\:flex-row{flex-direction:row}.lg\\:items-center{align-items:center}.lg\\:justify-between{justify-content:space-between}.lg\\:p-10{padding:calc(var(--spacing) * 10)}}}*{box-sizing:border-box}body{color:#0f172a;background:#f8fafc;margin:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}';
 if (typeof document < "u") {
-	let e = "react-flexi-datatable-styles";
-	if (!document.getElementById(e)) {
-		let t = document.createElement("style");
-		t.id = e, t.textContent = m, document.head.appendChild(t);
-	}
+  const o = "react-flexi-datatable-styles";
+  if (!document.getElementById(o)) {
+    const $ = document.createElement("style");
+    $.id = o, $.textContent = Vt, document.head.appendChild($);
+  }
 }
-var h = p;
-//#endregion
-export { p as DataTable, h as default };
+export {
+  Zt as DataTable,
+  Zt as default
+};