@box-kite/react 0.0.1 → 1.0.0

package/components/dataGrid.mjs

@@ -0,0 +1,3178 @@
+"use client";
+import { n as e, o as t } from "../platform.mjs";
+import { n } from "../effects.mjs";
+import r from "../box.mjs";
+import { i, n as a, r as o, t as s } from "../behavior.mjs";
+import { Path as c, Svg as l } from "./svg.mjs";
+import u from "./baseSvg.mjs";
+import d from "./button.mjs";
+import f from "./flex.mjs";
+import p from "./checkbox.mjs";
+import m from "./textbox.mjs";
+import h from "./grid.mjs";
+import g from "./overlay.mjs";
+import _ from "./presence.mjs";
+import v from "./dropdown.mjs";
+import y from "./visuallyHidden.mjs";
+import { Span as b } from "./semantics.mjs";
+import x, { Fragment as S, createContext as C, useCallback as w, useContext as T, useEffect as E, useLayoutEffect as D, useMemo as O, useRef as k, useState as A } from "react";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+import { useSyncExternalStore as ee } from "use-sync-external-store/shim";
+//#region src/components/dataGrid/components/dataGridPagination.tsx
+function P(e) {
+	let { grid: t } = e, { pagination: n } = t, i = n.state, a = w(() => n.firstPage(), [n]), o = w(() => n.prevPage(), [n]), s = w(() => n.nextPage(), [n]), c = w(() => n.lastPage(), [n]);
+	if (!i) return null;
+	let { canGoPrev: l, canGoNext: u, totalPages: d } = n;
+	return /* @__PURE__ */ N(f, {
+		component: `${t.componentName}.bottomBar.pagination`,
+		gap: .5,
+		ai: "center",
+		children: [
+			/* @__PURE__ */ M(te, {
+				grid: t,
+				pageSize: i.pageSize
+			}),
+			/* @__PURE__ */ M(F, {
+				componentName: t.componentName,
+				onClick: a,
+				disabled: !l,
+				children: /* @__PURE__ */ M(re, {})
+			}),
+			/* @__PURE__ */ M(F, {
+				componentName: t.componentName,
+				onClick: o,
+				disabled: !l,
+				children: /* @__PURE__ */ M(L, {})
+			}),
+			/* @__PURE__ */ N(f, {
+				ai: "center",
+				gap: 1.5,
+				px: 2,
+				userSelect: "none",
+				children: [/* @__PURE__ */ M(ne, {
+					grid: t,
+					page: i.page,
+					totalPages: d
+				}), /* @__PURE__ */ N(r, {
+					component: `${t.componentName}.bottomBar.pagination.info`,
+					fontSize: 12,
+					opacity: .7,
+					children: ["of ", d]
+				})]
+			}),
+			/* @__PURE__ */ M(F, {
+				componentName: t.componentName,
+				onClick: s,
+				disabled: !u,
+				children: /* @__PURE__ */ M(R, {})
+			}),
+			/* @__PURE__ */ M(F, {
+				componentName: t.componentName,
+				onClick: c,
+				disabled: !u,
+				children: /* @__PURE__ */ M(ie, {})
+			})
+		]
+	});
+}
+P.displayName = "DataGridPagination";
+function te({ grid: e, pageSize: t }) {
+	let n = e.pagination.pageSizeOptions;
+	return !n || n.length === 0 ? null : /* @__PURE__ */ M(f, {
+		ai: "center",
+		gap: 1,
+		me: 1,
+		children: /* @__PURE__ */ M(r, {
+			component: `${e.componentName}.bottomBar.pagination.pageSize`,
+			tag: "select",
+			fontSize: 12,
+			borderRadius: 4,
+			cursor: "pointer",
+			props: {
+				value: t,
+				onChange: (t) => e.pagination.changePageSize(Number(t.target.value))
+			},
+			children: n.map((e) => /* @__PURE__ */ N("option", {
+				value: e,
+				children: [e, " / page"]
+			}, e))
+		})
+	});
+}
+function ne({ grid: e, page: t, totalPages: n }) {
+	let [r, i] = A(String(t)), [a, o] = A(t);
+	t !== a && (o(t), i(String(t)));
+	let s = w(() => {
+		e.pagination.jumpToPage(r), i(String(e.pagination.page));
+	}, [e, r]), c = w((e) => {
+		e.key === "Enter" ? s() : e.key === "Escape" && i(String(t));
+	}, [s, t]);
+	return /* @__PURE__ */ M(m, {
+		type: "number",
+		variant: "compact",
+		value: r,
+		onChange: (e) => i(e.target.value),
+		textAlign: "center",
+		fontSize: 12,
+		props: {
+			onKeyDown: c,
+			onBlur: s,
+			min: 1,
+			max: n
+		}
+	});
+}
+function F(e) {
+	let { componentName: t, onClick: n, disabled: r, children: i } = e;
+	return /* @__PURE__ */ M(d, {
+		component: `${t}.bottomBar.pagination.button`,
+		clean: !0,
+		onClick: n,
+		cursor: r ? "default" : "pointer",
+		p: 1,
+		borderRadius: 4,
+		opacity: r ? .3 : .7,
+		hover: r ? void 0 : {
+			opacity: 1,
+			bgColor: "gray-100"
+		},
+		theme: { dark: { hover: r ? void 0 : { bgColor: "gray-700" } } },
+		transitionDuration: 150,
+		children: i
+	});
+}
+function I(e) {
+	return /* @__PURE__ */ M(l, {
+		viewBox: "0 0 24 24",
+		width: "14",
+		height: "14",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ M(c, { d: e.d })
+	});
+}
+function L() {
+	return /* @__PURE__ */ M(I, { d: "M15 18l-6-6 6-6" });
+}
+function R() {
+	return /* @__PURE__ */ M(I, { d: "M9 18l6-6-6-6" });
+}
+function re() {
+	return /* @__PURE__ */ M(I, { d: "M18 18l-6-6 6-6M11 18l-6-6 6-6" });
+}
+function ie() {
+	return /* @__PURE__ */ M(I, { d: "M6 18l6-6-6-6M13 18l6-6-6-6" });
+}
+//#endregion
+//#region src/components/dataGrid/components/dataGridBottomBar.tsx
+function ae(e) {
+	let { grid: t } = e, { pagination: n, filter: i } = t;
+	if (n.state) {
+		let { totalItems: e, startItem: i, endItem: a } = n;
+		return /* @__PURE__ */ N(f, {
+			component: `${t.componentName}.bottomBar`,
+			children: [
+				/* @__PURE__ */ N(r, {
+					component: `${t.componentName}.bottomBar.info`,
+					children: ["Rows: ", e > 0 ? `${i}–${a} of ${e}` : "0"]
+				}),
+				t.props.def.rowSelection && /* @__PURE__ */ N(r, {
+					component: `${t.componentName}.bottomBar.info`,
+					children: ["Selected: ", t.selectedRows.size]
+				}),
+				/* @__PURE__ */ M(P, { grid: t })
+			]
+		});
+	}
+	let { filtered: a, total: o } = i.filterStats;
+	return /* @__PURE__ */ N(f, {
+		component: `${t.componentName}.bottomBar`,
+		children: [
+			/* @__PURE__ */ N(r, {
+				component: `${t.componentName}.bottomBar.info`,
+				children: ["Rows: ", a === o ? o : `${a} / ${o}`]
+			}),
+			t.props.def.rowSelection && /* @__PURE__ */ N(r, {
+				component: `${t.componentName}.bottomBar.info`,
+				children: ["Selected: ", t.selectedRows.size]
+			}),
+			i.hasActiveFilters && /* @__PURE__ */ M(r, {
+				component: `${t.componentName}.bottomBar.clearFilters`,
+				color: "blue-600",
+				cursor: "pointer",
+				hover: { textDecoration: "underline" },
+				props: { onClick: i.clearAllFilters },
+				children: "Clear filters"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/dataGrid/gridNavigationContext.ts
+var oe = C(null);
+function z() {
+	return T(oe);
+}
+//#endregion
+//#region src/components/dataGrid/useGridNavigation.ts
+var se = "[role=\"gridcell\"],[role=\"columnheader\"]", ce = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])", le = 2, ue = [];
+function de(e) {
+	let { grid: t, scrollerRef: r, scrollTop: i, onScrollTo: a } = e, o = t.headerRows.value, c = t.filter.hasFilterableColumns, l = o.length + +!!c, u = t.viewport.isEmpty ? ue : t.flatRows.value, d = t.columns.value.visibleLeafs.length, f = l + u.length, p = w((e) => {
+		if (e < o.length) return o[e]?.length ?? 0;
+		if (e < l) return d;
+		let t = u[e - l];
+		return t ? t.cellCount : 0;
+	}, [
+		u,
+		d,
+		l,
+		o
+	]), m = w((e, t) => e < o.length ? (o[e]?.[t]?.headerCell.columnIndex ?? t + 1) - 1 : e < l ? t : u[e - l]?.columnOf(t) ?? t, [
+		u,
+		l,
+		o
+	]), h = k(!1), g = w((e, n) => {
+		let { viewport: o } = t, s = e - l, c = r.current;
+		if (o.showAll || !c) return;
+		if (s < 0) {
+			n >= l && (c.scrollTop = 0, a(0));
+			return;
+		}
+		let { startIndex: u, take: d } = o.window(i);
+		if (s >= u + le && s < u + d - le) return;
+		let f = o.rowTop(s);
+		c.scrollTop = f, a(f);
+	}, [
+		t,
+		l,
+		a,
+		i,
+		r
+	]), _ = k(0), v = s({
+		count: f,
+		columns: p,
+		columnIndexOf: m,
+		pageSize: t.viewport.pageRows,
+		onActiveCellChange: (e, t) => {
+			let n = _.current;
+			_.current = e.row, t.reason === "keyboard" && (g(e.row, n), h.current = !0);
+		}
+	}), y = v.activeItem;
+	n(() => {
+		h.current && (h.current = !1, y()?.focus());
+	});
+	let b = v.onKeyDown, x = w((e) => {
+		let t = e.target, n = t.closest?.(se);
+		if (n) {
+			if (t !== n) {
+				e.key === "Escape" && !n.querySelector("[aria-expanded=\"true\"]") && (e.preventDefault(), n.focus());
+				return;
+			}
+			if (e.key === "Enter" || e.key === " " || e.key === "F2") {
+				let t = o[v.activeIndex]?.[v.activeColumn];
+				if (e.key !== "F2" && t?.headerCell.isSortable) {
+					e.preventDefault(), t.sortColumn();
+					return;
+				}
+				let r = n.querySelector(ce);
+				if (r) {
+					e.preventDefault(), r.focus();
+					return;
+				}
+			}
+			b(e);
+		}
+	}, [
+		o,
+		v.activeColumn,
+		v.activeIndex,
+		b
+	]);
+	return {
+		rowCount: f,
+		columnCount: d,
+		headerRowCount: l,
+		cellProps: v.cellProps,
+		onKeyDown: x
+	};
+}
+//#endregion
+//#region src/utils/array/arrayUtils.ts
+var fe;
+(function(e) {
+	function t(e, t, n = 0) {
+		return e.slice(n, n + t);
+	}
+	e.take = t;
+	function n(e, t, n = 0) {
+		return e.reduce((e, n, r) => e + t(n, r), n);
+	}
+	e.sumBy = n;
+	function r(e, t, n) {
+		return [...e].sort((e, r) => {
+			let i = t(e), a = t(r);
+			return i < a ? n === "DESC" ? 1 : -1 : i > a ? n === "DESC" ? -1 : 1 : 0;
+		});
+	}
+	e.sortBy = r;
+	function i(e, t) {
+		return Math.max(...e.map(t));
+	}
+	e.maxBy = i;
+	function a(e, t) {
+		let n = e.find(t);
+		if (n === void 0) throw Error("No items satisfy the provided condition.");
+		return n;
+	}
+	e.findOrThrow = a;
+	function o(e, t) {
+		return e.reduce((e, n) => {
+			let r = t(n);
+			if (!r) return e;
+			let [i, a] = r;
+			return e[i] = a, e;
+		}, {});
+	}
+	e.toRecord = o;
+	function s(e, t) {
+		let n = e.reduce((e, n, r) => {
+			let i = t(n, r);
+			return e.has(i) === !1 && e.set(i, []), e.get(i)?.push(n), e;
+		}, /* @__PURE__ */ new Map());
+		return Array.from(n, ([e, t]) => ({
+			key: e,
+			values: t
+		}));
+	}
+	e.groupBy = s;
+})(fe ||= {});
+var B = fe, V = class e {
+	grid;
+	parentRow;
+	constructor(e, t) {
+		this.grid = e, this.parentRow = t;
+	}
+	kind = "detail";
+	get key() {
+		return `detail-${this.parentRow.key}`;
+	}
+	get isAutoHeight() {
+		return this.height === "auto";
+	}
+	static AUTO_HEIGHT_ESTIMATE = 200;
+	get height() {
+		let e = this.grid.props.def.rowDetail;
+		return !e || e.height === void 0 || e.height === "auto" ? "auto" : typeof e.height == "function" ? e.height(this.parentRow.data) : e.height;
+	}
+	get heightForOffset() {
+		let t = this.height;
+		return t === "auto" ? e.AUTO_HEIGHT_ESTIMATE : t;
+	}
+	count = 0;
+	cellCount = 1;
+	columnOf() {
+		return 0;
+	}
+	get flatRows() {
+		return [this];
+	}
+	get allRows() {
+		return [];
+	}
+}, H = Symbol("memo.unset"), pe = class {
+	action;
+	deps;
+	cache = H;
+	dependents = /* @__PURE__ */ new Set();
+	wired = !1;
+	constructor(e, t) {
+		this.action = e, this.deps = t;
+	}
+	wire() {
+		if (!this.wired) {
+			this.wired = !0;
+			for (let e of this.deps()) e.dependents.add(this);
+		}
+	}
+	get value() {
+		return this.wire(), this.cache === H && (this.cache = this.action()), this.cache;
+	}
+	clear() {
+		if (this.wire(), this.cache !== H) {
+			this.cache = H;
+			for (let e of this.dependents) e.clear();
+		}
+	}
+};
+function U(e, t = () => []) {
+	return new pe(e, t);
+}
+//#endregion
+//#region src/utils/string/fuzzySearch.ts
+function me(e, t) {
+	if (!e) return {
+		score: 1,
+		matches: []
+	};
+	if (!t) return null;
+	let n = e.toLowerCase(), r = t.toLowerCase(), i = 0, a = 0, o = [], s = -1, c = 0, l = 0;
+	for (; i < n.length && a < r.length;) n[i] === r[a] ? (s === -1 && (s = a), i++, l++, c += l, (a === 0 || /\s|_|-/.test(t[a - 1])) && (c += 5), e[i - 1] === t[a] && (c += 1)) : (s !== -1 && (o.push([s, a]), s = -1), l = 0), a++;
+	return s !== -1 && o.push([s, a]), i < n.length ? null : (c /= t.length, {
+		score: c,
+		matches: o
+	});
+}
+function he(e, t) {
+	return me(e, t) !== null;
+}
+//#endregion
+//#region src/icons/expandIcon.tsx
+function W(e) {
+	return /* @__PURE__ */ M(l, {
+		viewBox: "4 2 16 18",
+		width: "1rem",
+		fill: "currentColor",
+		...e,
+		children: /* @__PURE__ */ M(c, {
+			fillRule: "evenodd",
+			d: "M12.707 14.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L12 12.586l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5Z",
+			props: { clipRule: "evenodd" }
+		})
+	});
+}
+//#endregion
+//#region src/components/dataGrid/components/dataGridCellRowDetail.tsx
+function ge(e) {
+	let { cell: t } = e, n = t.isExpanded, r = w((e) => {
+		e.stopPropagation(), t.toggleDetail();
+	}, [t]);
+	return /* @__PURE__ */ M(d, {
+		component: `${t.grid.componentName}.body.cell.rowDetail`,
+		variant: { isExpanded: n },
+		clean: !0,
+		type: "button",
+		onClick: r,
+		cursor: "pointer",
+		display: "flex",
+		ai: "center",
+		jc: "center",
+		width: "fit",
+		height: "fit",
+		props: {
+			"aria-label": `${n ? "Collapse" : "Expand"} details for row ${t.row.rowIndex + 1}`,
+			"aria-expanded": n
+		},
+		children: /* @__PURE__ */ M(W, {
+			fill: "currentColor",
+			width: "14px",
+			height: "14px",
+			rotate: n ? 0 : -90
+		})
+	});
+}
+ge.displayName = "DataGridCellRowDetail";
+//#endregion
+//#region src/components/dataGrid/components/dataGridCellRowSelection.tsx
+function _e(e) {
+	let { cell: t } = e, n = w(() => {
+		t.toggleSelection();
+	}, [t]);
+	return /* @__PURE__ */ M(p, {
+		variant: "datagrid",
+		checked: t.selected,
+		onChange: n,
+		props: { "aria-label": `Select row ${t.row.rowIndex + 1}` }
+	});
+}
+_e.displayName = "DataGridCellRowSelection";
+//#endregion
+//#region src/components/dataGrid/contracts/dataGridContract.ts
+function G(e) {
+	if (e) return e === "LEFT" ? "START" : e === "RIGHT" ? "END" : e;
+}
+//#endregion
+//#region src/components/dataGrid/models/headerCellModel.ts
+var ve = 1e3, ye = class {
+	column;
+	constructor(e) {
+		this.column = e;
+	}
+	get grid() {
+		return this.column.grid;
+	}
+	get label() {
+		let e = this.column;
+		if (e.isRowNumber || e.isRowSelection) return null;
+		if (e.isGrouping) {
+			if (this.grid.groupColumns.size === 1) {
+				let e = this.grid.groupColumns.values().next().value, t = B.findOrThrow(this.grid.columns.value.leafs, (t) => t.key === e);
+				return t.header ?? t.key;
+			}
+			return "Group";
+		}
+		return e.header ?? e.key;
+	}
+	get hiddenLabel() {
+		if (this.column.isRowNumber) return "Row number";
+		if (this.column.isRowDetail) return "Row details";
+	}
+	get isSortable() {
+		let e = this.column;
+		return e.isLeaf && !e.isRowNumber && !e.isRowSelection && !e.isRowDetail && e.sortable;
+	}
+	get isSorted() {
+		return this.column.key === this.grid.sortColumn;
+	}
+	get sortDirection() {
+		return this.grid.sortDirection;
+	}
+	get showResizer() {
+		let e = this.column;
+		return !e.isRowNumber && !e.isRowSelection && !e.isRowDetail && e.resizable;
+	}
+	get showContextMenu() {
+		let e = this.column;
+		return !e.isRowNumber && !e.isRowSelection && !e.isRowDetail && e.showContextMenu;
+	}
+	get gridColumn() {
+		return this.column.isLeaf ? 1 : this.column.leafs.length;
+	}
+	get columnIndex() {
+		let e = this.column.leafs[0] ?? this.column;
+		return this.grid.columns.value.visibleLeafs.indexOf(e) + 1;
+	}
+	get columnSpan() {
+		let e = this.column.leafs.length;
+		return e > 1 ? e : void 0;
+	}
+	get rowSpan() {
+		let e = this.column.gridRows;
+		return e > 1 ? e : void 0;
+	}
+	get ariaSort() {
+		if (this.isSortable) return !this.isSorted || !this.sortDirection ? "none" : this.sortDirection === "ASC" ? "ascending" : "descending";
+	}
+	get resizerLabel() {
+		return `Resize ${this.label ?? this.column.key}`;
+	}
+	get width() {
+		return this.column.inlineWidth ?? this.column.baseWidth;
+	}
+	get minWidth() {
+		return Math.max(1, this.column.leafs.length) * this.grid.MIN_COLUMN_WIDTH_PX;
+	}
+	get maxWidth() {
+		return Math.max(this.grid.containerWidth || ve, this.width, this.minWidth);
+	}
+	get paddingStart() {
+		if (!this.column.isRowSelection) return this.column.isEndAligned ? 10 : 3;
+	}
+	get paddingEnd() {
+		if (!this.column.isRowSelection) return this.column.align === "center" ? 3 : void 0;
+	}
+	get variant() {
+		let { isPinned: e, isFirstStartPinned: t, isLastStartPinned: n, isFirstEndPinned: r, isLastEndPinned: i } = this.column.pinFlags.value;
+		return {
+			isPinned: e,
+			isFirstStartPinned: t,
+			isLastStartPinned: n,
+			isFirstEndPinned: r,
+			isLastEndPinned: i,
+			isSortable: this.isSortable,
+			isRowNumber: this.column.isRowNumber,
+			isFirstLeaf: this.column.isFirstLeaf,
+			isLastLeaf: this.column.isLastLeaf
+		};
+	}
+	get contextMenuButtonVariant() {
+		let { isPinned: e, isFirstStartPinned: t, isLastStartPinned: n, isFirstEndPinned: r, isLastEndPinned: i } = this.column.pinFlags.value;
+		return {
+			isPinned: e,
+			isFirstStartPinned: t,
+			isLastStartPinned: n,
+			isFirstEndPinned: r,
+			isLastEndPinned: i,
+			isSortable: this.isSortable,
+			isRowNumber: this.column.isRowNumber
+		};
+	}
+	get sections() {
+		return this.column.contextMenuSections;
+	}
+	get canSortAsc() {
+		let { key: e } = this.column;
+		return this.sections.sort && this.column.isLeaf && this.column.sortable && (this.grid.sortColumn !== e || this.grid.sortDirection === "DESC");
+	}
+	get canSortDesc() {
+		let { key: e } = this.column;
+		return this.sections.sort && this.column.isLeaf && this.column.sortable && (this.grid.sortColumn !== e || this.grid.sortDirection === "ASC");
+	}
+	get canClearSort() {
+		return this.sections.sort && this.column.isLeaf && this.column.sortable && this.grid.sortColumn === this.column.key;
+	}
+	get canPinStart() {
+		return this.sections.pin && this.column.pin !== "START";
+	}
+	get canPinEnd() {
+		return this.sections.pin && this.column.pin !== "END";
+	}
+	get canUnpin() {
+		return this.sections.pin && !!this.column.pin;
+	}
+	get canGroupBy() {
+		return this.sections.group && this.column.isLeaf && !this.column.isGrouping;
+	}
+	get canUnGroupAll() {
+		return this.sections.group && this.column.isLeaf && this.column.isGrouping;
+	}
+	get hasSortSection() {
+		return this.canSortAsc || this.canSortDesc || this.canClearSort;
+	}
+	get hasPinSection() {
+		return this.canPinStart || this.canPinEnd || this.canUnpin;
+	}
+	get hasGroupSection() {
+		return this.canGroupBy || this.canUnGroupAll;
+	}
+}, K = class e {
+	def;
+	grid;
+	parent;
+	constructor(t, n, r) {
+		if (this.def = t, this.grid = n, this.parent = r, this.columns = t.columns?.map((r) => new e(t.pin ? {
+			...r,
+			pin: t.pin
+		} : r, n, this)) ?? [], this.isLeaf) {
+			let e = this.grid.columnWidths.get(this.key);
+			this._inlineWidth = e ?? this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = G(t.pin);
+		}
+	}
+	columns = [];
+	get kind() {
+		switch (this.key) {
+			case q: return "rowNumber";
+			case J: return "rowSelection";
+			case X: return "rowDetail";
+			case Y: return "grouping";
+			default: return "data";
+		}
+	}
+	get isRowNumber() {
+		return this.kind === "rowNumber";
+	}
+	get isRowSelection() {
+		return this.kind === "rowSelection";
+	}
+	get isRowDetail() {
+		return this.kind === "rowDetail";
+	}
+	get isGrouping() {
+		return this.kind === "grouping";
+	}
+	get isData() {
+		return this.kind === "data";
+	}
+	pinFlags = U(() => {
+		let e = this.pin === "START", t = this.pin === "END";
+		return {
+			isStartPinned: e,
+			isEndPinned: t,
+			isPinned: e || t,
+			isFirstStartPinned: e && this.startOffset === 0,
+			isLastStartPinned: e && this.isEdge,
+			isFirstEndPinned: t && this.isEdge,
+			isLastEndPinned: t && this.endOffset === 0
+		};
+	}, () => [this.grid.columns]);
+	cellVariant = U(() => {
+		let { isPinned: e, isFirstStartPinned: t, isLastStartPinned: n, isFirstEndPinned: r, isLastEndPinned: i } = this.pinFlags.value;
+		return {
+			isPinned: e,
+			isFirstStartPinned: t,
+			isLastStartPinned: n,
+			isFirstEndPinned: r,
+			isLastEndPinned: i,
+			isRowSelection: this.isRowSelection,
+			isRowNumber: this.isRowNumber,
+			isFirstLeaf: this.isFirstLeaf,
+			isLastLeaf: this.isLastLeaf,
+			isRowDetail: this.isRowDetail
+		};
+	}, () => [this.pinFlags]);
+	cellStyleVars = U(() => {
+		let { isStartPinned: e, isEndPinned: t } = this.pinFlags.value;
+		return {
+			width: `var(${this.widthVarName})`,
+			height: `var(${this.grid.rowHeightVarName})`,
+			insetInlineStart: e ? `var(${this.inlineStartVarName})` : void 0,
+			insetInlineEnd: t ? `var(${this.inlineEndVarName})` : void 0
+		};
+	}, () => [this.pinFlags]);
+	_headerCell = U(() => new ye(this));
+	get headerCell() {
+		return this._headerCell.value;
+	}
+	get visibleColumns() {
+		return this.columns.filter((e) => e.isVisible);
+	}
+	get isFirstLeaf() {
+		let { leafs: e } = this;
+		return e.length > 0 && e.at(0) === this;
+	}
+	get isLastLeaf() {
+		let { leafs: e } = this;
+		return e.length > 0 && e.at(-1) === this;
+	}
+	get key() {
+		return this.def.key;
+	}
+	get header() {
+		return this.def.header;
+	}
+	get align() {
+		return this.def.align;
+	}
+	get isEndAligned() {
+		return this.align === "end" || this.align === "right";
+	}
+	get hasAlign() {
+		return "align" in this.def;
+	}
+	get isLeaf() {
+		return this.columns.length === 0;
+	}
+	get Cell() {
+		return this.def.Cell;
+	}
+	get filterable() {
+		return this.def.filterable;
+	}
+	get filterConfig() {
+		let { filterable: e } = this.def;
+		if (e) return typeof e == "object" ? e : { type: "text" };
+	}
+	get currentFilter() {
+		return this.grid.columnFilters[this.key];
+	}
+	get filterOptions() {
+		let e = this.filterConfig;
+		return e?.type === "multiselect" && e.options ? e.options : this.grid.getColumnUniqueValues(this.key).map((e) => ({
+			label: e === null ? "(empty)" : String(e),
+			value: e
+		}));
+	}
+	setTextFilter(e) {
+		this.grid.setColumnFilter(this.key, e.trim() ? {
+			type: "text",
+			value: e
+		} : void 0);
+	}
+	setNumberFilter(e, t, n) {
+		let r = typeof t == "number" ? t : parseFloat(t);
+		if (isNaN(r) || t === "") {
+			this.grid.setColumnFilter(this.key, void 0);
+			return;
+		}
+		let i = {
+			type: "number",
+			operator: e,
+			value: r
+		};
+		if (e === "between" && n !== void 0 && n !== "") {
+			let e = typeof n == "number" ? n : parseFloat(String(n));
+			isNaN(e) || (i.valueTo = e);
+		}
+		this.grid.setColumnFilter(this.key, i);
+	}
+	setMultiselectFilter(e) {
+		this.grid.setColumnFilter(this.key, e.length === 0 ? void 0 : {
+			type: "multiselect",
+			values: e
+		});
+	}
+	clearFilter() {
+		this.grid.setColumnFilter(this.key, void 0);
+	}
+	get sortable() {
+		return this.def.sortable === void 0 ? this.grid.props.def.sortable !== !1 : this.def.sortable;
+	}
+	get resizable() {
+		return this.def.resizable === void 0 ? this.grid.props.def.resizable !== !1 : this.def.resizable;
+	}
+	get contextMenu() {
+		return this.def.contextMenu === void 0 ? this.grid.props.def.contextMenu ?? !0 : this.def.contextMenu;
+	}
+	get showContextMenu() {
+		let e = this.contextMenu;
+		return typeof e == "boolean" ? e : e.sort !== !1 || e.pin !== !1 || e.group !== !1;
+	}
+	get contextMenuSections() {
+		let e = this.contextMenu;
+		return typeof e == "boolean" ? {
+			sort: e,
+			pin: e,
+			group: e
+		} : {
+			sort: e.sort !== !1,
+			pin: e.pin !== !1,
+			group: e.group !== !1
+		};
+	}
+	get isFlexible() {
+		return this.def.flexible !== !1;
+	}
+	get baseWidth() {
+		return this._inlineWidth ?? this.grid.DEFAULT_COLUMN_WIDTH_PX;
+	}
+	_pin;
+	get pin() {
+		if (this.isLeaf) return this._pin;
+		let e = [...new Set(this.columns.flatMap((e) => e.pin))];
+		if (e.length === 1) return e[0];
+	}
+	get uniqueKey() {
+		return `${this.key}${this.pin ?? ""}`;
+	}
+	getPinnedColumn(t) {
+		if (this.hasPin(t)) {
+			if (this.isLeaf) return this;
+			let n = new e({
+				...this.def,
+				pin: t
+			}, this.grid, this.parent);
+			return n.columns = this.columns.filter((e) => e.hasPin(t)).map((e) => {
+				let r = e.getPinnedColumn(t);
+				return r.parent = n, r;
+			}).filter((e) => !!e), n;
+		}
+	}
+	hasPin(e) {
+		return this.isLeaf ? this._pin === e : this.columns.some((t) => t.hasPin(e));
+	}
+	get death() {
+		return this.parent ? this.parent.death + 1 : 0;
+	}
+	get flatColumns() {
+		let e = [this];
+		return e.push(...this.columns.flatMap((e) => e.flatColumns)), e;
+	}
+	_inlineWidth;
+	get inlineWidth() {
+		if (this.isLeaf) return this.grid.getFlexWidth(this.key) ?? this._inlineWidth;
+		let e = this.visibleColumns.map((e) => e.inlineWidth).filter((e) => typeof e == "number");
+		if (e.length !== 0) return B.sumBy(e, (e) => e);
+	}
+	get startOffset() {
+		let e = 0;
+		if (this.parent) {
+			let { visibleColumns: t, startOffset: n } = this.parent, r = t.findIndex((e) => e === this);
+			e += B.sumBy(t, (e, t) => t < r ? e.inlineWidth ?? 0 : 0), e += n;
+		} else {
+			let t = this.grid.columns.value.start.filter((e) => e.isVisible), n = t.findIndex((e) => e === this);
+			e += B.sumBy(t, (e, t) => t < n ? e.inlineWidth ?? 0 : 0);
+		}
+		return e;
+	}
+	get endOffset() {
+		let e = 0;
+		if (this.parent) {
+			let { visibleColumns: t } = this.parent, n = t.reverse(), r = n.findIndex((e) => e === this);
+			e += B.sumBy(n, (e, t) => t < r ? e.inlineWidth ?? 0 : 0), e += this.parent.endOffset;
+		} else {
+			let t = this.grid.columns.value.end.filter((e) => e.isVisible).reverse(), n = t.findIndex((e) => e === this);
+			e += B.sumBy(t, (e, t) => t < n ? e.inlineWidth ?? 0 : 0);
+		}
+		return e;
+	}
+	get isEdge() {
+		if (!this.pin) return !1;
+		if (this.parent) {
+			let { visibleColumns: e } = this.parent;
+			return (this.pin === "START" ? e.at(-1) : e.at(0)) === this && this.parent.isEdge;
+		}
+		return (this.pin === "START" ? this.grid.columns.value.start.filter((e) => e.isVisible).at(-1) : this.grid.columns.value.end.filter((e) => e.isVisible).at(0)) === this;
+	}
+	get isVisible() {
+		return this.isLeaf ? !this.grid.hiddenColumns.has(this.key) : this.leafs.some((e) => e.isVisible);
+	}
+	get leafs() {
+		return this.isLeaf ? [this] : this.visibleColumns.flatMap((e) => e.leafs);
+	}
+	get groupColumnWidthVarName() {
+		return `--${this.uniqueKey}-group-width`;
+	}
+	get widthVarName() {
+		return `--${this.uniqueKey}-width`;
+	}
+	get inlineStartVarName() {
+		return `--${this.uniqueKey}-inline-start`;
+	}
+	get inlineEndVarName() {
+		return `--${this.uniqueKey}-inline-end`;
+	}
+	get gridRows() {
+		return this.isLeaf ? this.grid.columns.value.maxDeath - this.death : 1;
+	}
+	_resizeStartX = 0;
+	_resizeSizes = {};
+	_resizeTotalWidth = 0;
+	beginResize = (e) => {
+		let { MIN_COLUMN_WIDTH_PX: t } = this.grid;
+		this._resizeStartX = e, this._resizeSizes = B.toRecord(this.leafs, (e) => [e.key, e.inlineWidth ?? e.baseWidth]), this._resizeTotalWidth = B.sumBy(this.leafs, (e) => this._resizeSizes[e.key]) - this.leafs.length * t;
+	};
+	get resizeSign() {
+		return this.pin === "END" === this.grid.isRtl ? 1 : -1;
+	}
+	applyResize = (e) => {
+		let { MIN_COLUMN_WIDTH_PX: t } = this.grid, n = (e - this._resizeStartX) * this.resizeSign;
+		this.leafs.forEach((e) => {
+			let r = this._resizeSizes[e.key], i = this._resizeTotalWidth > 0 ? (r - t) / this._resizeTotalWidth * n : n / this.leafs.length, a = Math.round(r + i);
+			e.setWidth(a < t ? t : a);
+		}), this.grid.flexWidths.clear();
+	};
+	resizeTo = (e) => {
+		this.applyResize(e), this.grid.notify();
+	};
+	endResize = () => {
+		this.grid.notify();
+	};
+	moveResizer = (e) => {
+		this.beginResize(0), this.applyResize(e);
+	};
+	resizeWidthTo = (e) => {
+		let t = this.inlineWidth ?? this.baseWidth;
+		this.moveResizer((e - t) * this.resizeSign);
+	};
+	pinColumn = (e) => {
+		this.isLeaf ? this._pin = G(e) : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
+	};
+	toggleGrouping = () => {
+		this.grid.toggleGrouping(this.key);
+	};
+	sortColumn = (...e) => {
+		this.grid.setSortColumn(this.key, ...e);
+	};
+	setWidth = (e) => {
+		if (!this.isLeaf) throw Error("Cannot set width for a parent column.");
+		this._inlineWidth !== e && (this._inlineWidth = e, this.grid.setWidth(this.key, e));
+	};
+	toggleVisibility = () => {
+		this.grid.toggleColumnVisibility(this.key);
+	};
+}, be = class {
+	grid;
+	constructor(e) {
+		this.grid = e;
+	}
+	get entries() {
+		return this.grid.columns.value.leafs.filter((e) => e.isData).map((e) => ({
+			id: String(e.key),
+			label: String(e.header ?? e.key),
+			column: e,
+			visible: e.isVisible
+		}));
+	}
+	get selectedIds() {
+		return this.entries.filter((e) => e.visible).map((e) => e.id);
+	}
+	get total() {
+		return this.entries.length;
+	}
+	get hiddenCount() {
+		return this.entries.reduce((e, t) => t.visible ? e : e + 1, 0);
+	}
+	get hasHidden() {
+		return this.hiddenCount > 0;
+	}
+	setVisibility = (e) => {
+		let t = new Set(e);
+		this.entries.forEach((e) => {
+			let n = t.has(e.id);
+			e.visible !== n && e.column.toggleVisibility();
+		});
+	};
+}, xe = class {
+	grid;
+	constructor(e) {
+		this.grid = e;
+	}
+	get globalFilterValue() {
+		return this.grid.globalFilterValue;
+	}
+	get columnFilters() {
+		return this.grid.columnFilters;
+	}
+	get hasActiveFilters() {
+		return this.grid.hasActiveFilters;
+	}
+	get filterStats() {
+		return this.grid.filterStats;
+	}
+	get hasFilterableColumns() {
+		return this.grid.columns.value.visibleLeafs.some((e) => !!e.filterable);
+	}
+	setGlobalFilter = (e) => this.grid.setGlobalFilter(e);
+	clearAllFilters = () => this.grid.clearAllFilters();
+}, Se = class {
+	grid;
+	constructor(e) {
+		this.grid = e;
+	}
+	get isPaginated() {
+		return this.grid.isPaginated;
+	}
+	get state() {
+		return this.grid.paginationState;
+	}
+	get pageSizeOptions() {
+		return this.grid.pageSizeOptions;
+	}
+	get page() {
+		return this.grid.page;
+	}
+	get pageSize() {
+		return this.grid.pageSize;
+	}
+	get totalPages() {
+		return this.state?.totalPages ?? 1;
+	}
+	get totalItems() {
+		return this.state?.totalItems ?? 0;
+	}
+	get canGoPrev() {
+		return this.page > 1;
+	}
+	get canGoNext() {
+		return this.page < this.totalPages;
+	}
+	get startItem() {
+		return (this.page - 1) * this.pageSize + 1;
+	}
+	get endItem() {
+		return Math.min(this.startItem + this.pageSize - 1, this.totalItems);
+	}
+	changePage = (e) => this.grid.changePage(e);
+	changePageSize = (e) => this.grid.changePageSize(e);
+	firstPage = () => {
+		this.canGoPrev && this.grid.changePage(1);
+	};
+	prevPage = () => {
+		this.canGoPrev && this.grid.changePage(this.page - 1);
+	};
+	nextPage = () => {
+		this.canGoNext && this.grid.changePage(this.page + 1);
+	};
+	lastPage = () => {
+		this.canGoNext && this.grid.changePage(this.totalPages);
+	};
+	jumpToPage = (e) => {
+		let t = parseInt(e, 10);
+		isNaN(t) || this.grid.changePage(Math.max(1, Math.min(t, this.totalPages)));
+	};
+}, Ce = class {
+	grid;
+	row;
+	column;
+	constructor(e, t, n) {
+		this.grid = e, this.row = t, this.column = n;
+	}
+	get value() {
+		return this.column.isRowNumber ? this.row.rowIndex + 1 : this.row.data[this.column.key];
+	}
+	get isExpanded() {
+		return this.row.expanded;
+	}
+	get selected() {
+		return this.row.selected;
+	}
+	get isFirst() {
+		return this.row.cells[0] === this;
+	}
+	get isLast() {
+		let e = this.row.cells;
+		return e[e.length - 1] === this;
+	}
+	toggleDetail = () => {
+		this.grid.toggleDetailRow(this.row.key);
+	};
+	toggleSelection = () => {
+		this.grid.toggleRowSelection(this.row.key);
+	};
+}, we = class {
+	grid;
+	data;
+	rowIndex;
+	constructor(e, t, n) {
+		this.grid = e, this.data = t, this.rowIndex = n;
+	}
+	_key;
+	get key() {
+		return this._key ??= this.grid.getRowKey(this.data);
+	}
+	parentRow;
+	count = 1;
+	kind = "row";
+	get expandOnRowClick() {
+		return this.grid.props.def.rowDetail?.expandOnRowClick ?? !1;
+	}
+	toggleDetail = () => {
+		this.grid.toggleDetailRow(this.key);
+	};
+	_cells = U(() => this.grid.columns.value.visibleLeafs.map((e) => new Ce(this.grid, this, e)));
+	get cells() {
+		return this._cells.value;
+	}
+	get cellCount() {
+		return this.cells.length;
+	}
+	columnOf(e) {
+		return e;
+	}
+	get selected() {
+		return this.grid.selectedRows.has(this.key);
+	}
+	get expanded() {
+		return this.grid.expandedDetailRows.has(this.key);
+	}
+	get flatRows() {
+		return this.grid.props.def.rowDetail && this.expanded ? [this, new V(this.grid, this)] : [this];
+	}
+	get allRows() {
+		return this;
+	}
+}, Te = class e {
+	grid;
+	static DEFAULT_VISIBLE_ROWS_COUNT = 10;
+	static ROWS_TO_PRELOAD = 20;
+	constructor(e) {
+		this.grid = e;
+	}
+	get showAll() {
+		return this.grid.props.def.visibleRowsCount === "all";
+	}
+	get hasDetailRows() {
+		return !!this.grid.props.def.rowDetail;
+	}
+	get isEmpty() {
+		return this.grid.props.data.length === 0;
+	}
+	get visibleRowsCount() {
+		if (this.showAll) return this.grid.flatRows.value.length;
+		let t = this.grid.props.def.visibleRowsCount;
+		return typeof t == "number" ? t : e.DEFAULT_VISIBLE_ROWS_COUNT;
+	}
+	get pageRows() {
+		let t = this.grid.props.def.visibleRowsCount;
+		return typeof t == "number" ? t : e.DEFAULT_VISIBLE_ROWS_COUNT;
+	}
+	get viewHeight() {
+		if (this.showAll) return;
+		let { rowHeight: e } = this.grid;
+		return e * this.visibleRowsCount + e / 5;
+	}
+	get totalHeight() {
+		return this.hasDetailRows ? this.grid.rowOffsets.value.totalHeight : this.grid.flatRows.value.length * this.grid.rowHeight;
+	}
+	get emptyHeight() {
+		return this.viewHeight ?? this.grid.rowHeight * e.DEFAULT_VISIBLE_ROWS_COUNT;
+	}
+	rowTop(e) {
+		return this.hasDetailRows ? this.grid.rowOffsets.value.offsets[e] ?? 0 : e * this.grid.rowHeight;
+	}
+	findStartIndex(e, t) {
+		let n = 0, r = e.length - 1;
+		for (; n < r;) {
+			let i = n + r + 1 >>> 1;
+			e[i] <= t ? n = i : r = i - 1;
+		}
+		return n;
+	}
+	window(t) {
+		let n = this.grid.flatRows.value.length;
+		if (this.showAll) return {
+			startIndex: 0,
+			take: n,
+			translateY: 0,
+			totalHeight: this.totalHeight,
+			viewHeight: void 0
+		};
+		let { rowHeight: r } = this.grid, i = e.ROWS_TO_PRELOAD, { offsets: a } = this.grid.rowOffsets.value, o = this.hasDetailRows ? Math.max(0, this.findStartIndex(a, t) - i) : Math.max(0, Math.floor(t / r) - i), s = this.hasDetailRows ? a[o] ?? 0 : o * r;
+		return {
+			startIndex: o,
+			take: this.visibleRowsCount + i * 2,
+			translateY: s,
+			totalHeight: this.totalHeight,
+			viewHeight: this.viewHeight
+		};
+	}
+}, q = "row-number-cell", J = "row-selection-cell", Y = "grouping-cell", X = "row-detail-cell", Ee = class {
+	props;
+	constructor(e, t) {
+		this.props = e, t && this.listeners.add(t);
+	}
+	_version = 0;
+	listeners = /* @__PURE__ */ new Set();
+	subscribe = (e) => (this.listeners.add(e), () => this.listeners.delete(e));
+	getSnapshot = () => this._version;
+	notify = () => {
+		this._version++, this.listeners.forEach((e) => e());
+	};
+	setProps(e) {
+		let t = this.props;
+		t !== e && (this.props = e, t.def !== e.def && this.sourceColumns.clear(), (t.data !== e.data || t.def !== e.def || t.globalFilterValue !== e.globalFilterValue || t.columnFilters !== e.columnFilters || t.filters !== e.filters || t.expandedRowKeys !== e.expandedRowKeys || t.page !== e.page || t.pageSize !== e.pageSize) && this.rows.clear());
+	}
+	get componentName() {
+		return this.props.component || "datagrid";
+	}
+	_identifier = "datagrid";
+	get identifier() {
+		return this._identifier;
+	}
+	setIdentifier(e) {
+		this._identifier = e;
+	}
+	get titleId() {
+		return `${this._identifier}-title`;
+	}
+	get resizerStyle() {
+		return this.props.def.resizerStyle ?? "visible";
+	}
+	get resizeMode() {
+		return this.props.def.resizeMode ?? "smooth";
+	}
+	sourceColumns = U(() => {
+		let { def: e } = this.props, t = [];
+		if (this.groupColumns.size > 0 && t.push(new K({ key: Y }, this)), t.push(...e.columns.map((e) => new K(e, this))), e.rowSelection) {
+			let n = typeof e.rowSelection == "object" && e.rowSelection.pinned ? "START" : void 0;
+			t.unshift(new K({
+				key: J,
+				pin: n,
+				width: 50,
+				align: "center",
+				Cell: _e
+			}, this));
+		}
+		if (e.showRowNumber) {
+			let n, r = 70;
+			typeof e.showRowNumber == "object" && (e.showRowNumber.pinned && (n = "START"), r = e.showRowNumber.width ?? 70), t.unshift(new K({
+				key: q,
+				pin: n,
+				width: r,
+				align: "end"
+			}, this));
+		}
+		if (e.rowDetail) {
+			let n = e.rowDetail.pinned ? "START" : void 0, r = e.rowDetail.expandColumnWidth ?? 50, i = e.rowDetail.expandColumnHeader ?? "";
+			t.unshift(new K({
+				key: X,
+				header: i,
+				pin: n,
+				width: r,
+				align: "center",
+				Cell: ge
+			}, this));
+		}
+		return t;
+	});
+	columns = U(() => {
+		let e = this.sourceColumns.value.map((e) => e.getPinnedColumn("START")).filter((e) => !!e), t = this.sourceColumns.value.map((e) => e.getPinnedColumn()).filter((e) => !!e), n = this.sourceColumns.value.map((e) => e.getPinnedColumn("END")).filter((e) => !!e), r = [
+			...e,
+			...t,
+			...n
+		].flatMap((e) => e.flatColumns), i = r.filter((e) => e.isLeaf), a = r.filter((e) => e.isLeaf && e.isVisible);
+		return {
+			start: e,
+			middle: t,
+			end: n,
+			flat: r,
+			leafs: i,
+			visibleLeafs: a,
+			userVisibleLeafs: a.filter((e) => ![
+				q,
+				J,
+				Y,
+				X
+			].includes(e.key)),
+			maxDeath: B.maxBy(r, (e) => e.death) + 1
+		};
+	}, () => [this.sourceColumns]);
+	headerRows = U(() => B.sortBy(B.groupBy(this.columns.value.flat, (e) => e.death), (e) => e.key).map((e) => {
+		let t = B.toRecord(B.groupBy(e.values, (e) => e.pin ?? "NO_PIN"), (e) => [e.key, e.values]);
+		return [
+			...t.START?.filter((e) => e.isVisible) ?? [],
+			...t.NO_PIN?.filter((e) => e.isVisible) ?? [],
+			...t.END?.filter((e) => e.isVisible) ?? []
+		];
+	}), () => [this.columns]);
+	gridTemplateColumns = U(() => {
+		let { visibleLeafs: e } = this.columns.value, t = B.sumBy(e, (e) => +(e.pin === "END")), n = e.length - t;
+		return `${n > 0 ? `repeat(${n}, max-content)` : ""} ${t > 0 ? `repeat(${t}, max-content)` : ""}`.trim();
+	}, () => [this.columns]);
+	_globalFilterValue = "";
+	get globalFilterValue() {
+		return this.props.globalFilterValue ?? this._globalFilterValue;
+	}
+	_columnFilters = {};
+	get columnFilters() {
+		return this.props.columnFilters ?? this._columnFilters;
+	}
+	applyGlobalFilter(e) {
+		let t = this.globalFilterValue.trim();
+		if (!t) return e;
+		let { globalFilterKeys: n } = this.props.def, r = n ?? this.columns.value.leafs.filter((e) => e.key !== "row-number-cell" && e.key !== "row-selection-cell" && e.key !== "grouping-cell" && e.key !== "row-detail-cell").map((e) => e.key);
+		return e.filter((e) => r.some((n) => {
+			let r = e[n];
+			return r != null && he(t, String(r));
+		}));
+	}
+	applyColumnFilters(e) {
+		let t = this.columnFilters, n = Object.keys(t);
+		return n.length === 0 ? e : e.filter((e) => n.every((n) => {
+			let r = t[n];
+			if (!r) return !0;
+			let i = e[n];
+			return this.matchesFilter(i, r);
+		}));
+	}
+	matchesFilter(e, t) {
+		switch (t.type) {
+			case "text": return !t.value.trim() || e != null && he(t.value, String(e));
+			case "number": {
+				if (e == null) return !1;
+				let n = typeof e == "number" ? e : parseFloat(String(e));
+				if (isNaN(n)) return !1;
+				switch (t.operator) {
+					case "eq": return n === t.value;
+					case "ne": return n !== t.value;
+					case "gt": return n > t.value;
+					case "gte": return n >= t.value;
+					case "lt": return n < t.value;
+					case "lte": return n <= t.value;
+					case "between": return t.valueTo === void 0 ? n >= t.value : n >= t.value && n <= t.valueTo;
+					default: return !0;
+				}
+			}
+			case "multiselect": return t.values.length === 0 || t.values.includes(e);
+			default: return !0;
+		}
+	}
+	applyExternalFilters(e) {
+		let t = this.props.filters;
+		return !t || t.length === 0 ? e : e.filter((e) => t.every((t) => t(e)));
+	}
+	get filteredData() {
+		if (this.isPaginated) return this.props.data;
+		let e = this.props.data;
+		return e = this.applyExternalFilters(e), this.props.def.globalFilter && (e = this.applyGlobalFilter(e)), e = this.applyColumnFilters(e), e;
+	}
+	fireServerStateChange(e) {
+		this.props.onServerStateChange?.({
+			page: e?.page ?? this.page,
+			pageSize: e?.pageSize ?? this.pageSize,
+			sortColumn: "sortColumn" in (e ?? {}) ? e.sortColumn : this._sortColumn,
+			sortDirection: "sortDirection" in (e ?? {}) ? e.sortDirection : this._sortDirection,
+			columnFilters: e?.columnFilters ?? this.columnFilters,
+			globalFilterValue: e?.globalFilterValue ?? this.globalFilterValue
+		});
+	}
+	setGlobalFilter = (e) => {
+		this.props.onGlobalFilterChange ? this.props.onGlobalFilterChange(e) : this._globalFilterValue = e;
+		let t = this.isPaginated && this.page !== 1 ? 1 : this.page;
+		t !== this.page && (this.props.onPageChange ? this.props.onPageChange(1, this.pageSize) : this._page = 1), this.fireServerStateChange({
+			globalFilterValue: e,
+			page: t
+		}), this.rows.clear(), this.notify();
+	};
+	setColumnFilter = (e, t) => {
+		let n = { ...this.columnFilters };
+		t === void 0 ? delete n[e] : n[e] = t, this.props.onColumnFiltersChange ? this.props.onColumnFiltersChange(n) : this._columnFilters = n;
+		let r = this.isPaginated && this.page !== 1 ? 1 : this.page;
+		r !== this.page && (this.props.onPageChange ? this.props.onPageChange(1, this.pageSize) : this._page = 1), this.fireServerStateChange({
+			columnFilters: n,
+			page: r
+		}), this.rows.clear(), this.notify();
+	};
+	clearColumnFilters = () => {
+		this.props.onColumnFiltersChange ? this.props.onColumnFiltersChange({}) : this._columnFilters = {}, this.fireServerStateChange({ columnFilters: {} }), this.rows.clear(), this.notify();
+	};
+	clearAllFilters = () => {
+		this.setGlobalFilter(""), this.clearColumnFilters();
+	};
+	getColumnUniqueValues = (e) => {
+		let t = /* @__PURE__ */ new Set();
+		return this.props.data.forEach((n) => {
+			let r = n[e];
+			r !== void 0 && t.add(r);
+		}), Array.from(t).sort((e, t) => e === null ? 1 : t === null ? -1 : typeof e == "string" && typeof t == "string" ? e.localeCompare(t) : typeof e == "number" && typeof t == "number" ? e - t : String(e).localeCompare(String(t)));
+	};
+	get hasActiveFilters() {
+		return this.globalFilterValue.trim() !== "" || Object.keys(this.columnFilters).length > 0;
+	}
+	get filterStats() {
+		if (this.isPaginated) {
+			let e = this.props.def.pagination.totalCount;
+			return {
+				filtered: e,
+				total: e
+			};
+		}
+		return {
+			filtered: this.filteredData.length,
+			total: this.props.data.length
+		};
+	}
+	rows = U(() => {
+		let e = this.filteredData;
+		if (this._sortColumn && !this.isPaginated && (e = B.sortBy(e, (e) => e[this._sortColumn], this._sortDirection)), this.groupColumns.size > 0) {
+			let t = (e, n, r) => {
+				let i = n.values().next().value;
+				n.delete(i);
+				let a = B.findOrThrow(this.columns.value.leafs, (e) => e.key === i);
+				return this._sortColumn === "grouping-cell" && (e = B.sortBy(e, (e) => e[i], this._sortDirection)), B.groupBy(e, (e) => e[i]).map((e) => {
+					let i;
+					i = n.size > 0 ? t(e.values, new Set(n), r + 1) : e.values.map((e, t) => new we(this, e, r + 1 + t));
+					let o = new Oe(this, a, i, r, e.key);
+					return r += 1, o.expanded && (r += i.length), o;
+				});
+			};
+			return t(e, new Set(this.groupColumns), 0);
+		}
+		return e.map((e, t) => new we(this, e, t));
+	}, () => [this.columns]);
+	flatRows = U(() => this.rows.value.flatMap((e) => e.flatRows), () => [this.rows]);
+	get rowHeight() {
+		return this.props.def.rowHeight ?? this.DEFAULT_ROW_HEIGHT_PX;
+	}
+	sizes = U(() => {
+		let e = this.columns.value.flat.reduce((e, t) => {
+			let { inlineWidth: n } = t;
+			return typeof n == "number" && (e[t.widthVarName] = `${t.inlineWidth}px`), t.pin === "START" && (e[t.inlineStartVarName] = `${t.startOffset}px`), t.pin === "END" && (e[t.inlineEndVarName] = `${t.endOffset}px`), e;
+		}, {});
+		e[this.rowHeightVarName] = `${this.rowHeight}px`, e[this.inlineStartEdgeVarName] = `${this.inlineStartEdge}px`, this._containerWidth > 0 && (e[this.viewportWidthVarName] = `${this._containerWidth}px`);
+		let { visibleLeafs: t } = this.columns.value, n = t.find((e) => e.key === Y);
+		if (n) {
+			let r = B.sumBy(t, (e) => e.pin === n.pin && e.key !== "row-number-cell" && e.key !== "row-selection-cell" && e.key !== "row-detail-cell" ? e.inlineWidth ?? 0 : 0);
+			e[n.groupColumnWidthVarName] = `${r}px`;
+		}
+		return this.groupColumns.forEach((n) => {
+			let r = B.findOrThrow(this.columns.value.leafs, (e) => e.key === n);
+			e[r.groupColumnWidthVarName] = `${B.sumBy(t, (e) => e.pin === r.pin ? e.inlineWidth ?? 0 : 0)}px`;
+		}), e;
+	}, () => [this.columns, this.flexWidths]);
+	_containerWidth = 0;
+	get containerWidth() {
+		return this._containerWidth;
+	}
+	_sizingElement = null;
+	get sizingElement() {
+		return this._sizingElement;
+	}
+	setSizingElement = (e) => {
+		this._sizingElement = e;
+	};
+	get isRtl() {
+		return t(this._sizingElement);
+	}
+	setContainerWidth = (e) => {
+		this._containerWidth !== e && (this._containerWidth = e, this.flexWidths.clear(), this.notify());
+	};
+	flexWidths = U(() => {
+		let e = this._containerWidth;
+		if (e <= 0) return {};
+		let t = this.columns.value.visibleLeafs, n = (e) => !e.isFlexible || this.columnWidths.has(e.key), r = B.sumBy(t.filter(n), (e) => e.baseWidth), i = t.filter((e) => !n(e)), a = B.sumBy(i, (e) => e.baseWidth), o = e - r;
+		if (o <= a) return B.toRecord(i, (e) => [e.key, e.baseWidth]);
+		let s = {}, c = 0;
+		return i.forEach((e, t) => {
+			if (t === i.length - 1) s[e.key] = o - c;
+			else {
+				let t = Math.floor(e.baseWidth / a * o);
+				s[e.key] = t, c += t;
+			}
+		}), s;
+	}, () => [this.columns]);
+	getFlexWidth(e) {
+		return this.flexWidths.value[e];
+	}
+	DEFAULT_ROW_HEIGHT_PX = 48;
+	MIN_COLUMN_WIDTH_PX = 48;
+	DEFAULT_COLUMN_WIDTH_PX = 200;
+	expandedGroupRow = /* @__PURE__ */ new Set();
+	_expandedDetailRows = /* @__PURE__ */ new Set();
+	get expandedDetailRows() {
+		return this.props.expandedRowKeys ? new Set(this.props.expandedRowKeys) : this._expandedDetailRows;
+	}
+	toggleDetailRow = (e) => {
+		let t = new Set(this.expandedDetailRows);
+		t.has(e) ? t.delete(e) : t.add(e), this.props.onExpandedRowKeysChange ? this.props.onExpandedRowKeysChange(Array.from(t)) : this._expandedDetailRows = t, this.rows.clear(), this.notify();
+	};
+	_page = 1;
+	_pageSize;
+	get page() {
+		return this.props.page ?? this._page;
+	}
+	get pageSize() {
+		if (this.props.pageSize !== void 0) return this.props.pageSize;
+		if (this._pageSize !== void 0) return this._pageSize;
+		let e = this.props.def.pagination;
+		if (e?.pageSize) return e.pageSize;
+		let t = this.props.def.visibleRowsCount;
+		return typeof t == "number" ? t : 10;
+	}
+	get pageSizeOptions() {
+		return this.props.def.pagination?.pageSizeOptions;
+	}
+	get isPaginated() {
+		return !!this.props.def.pagination;
+	}
+	get paginationState() {
+		let e = this.props.def.pagination;
+		if (!e) return;
+		let t = e.totalCount, n = this.pageSize;
+		return {
+			page: this.page,
+			pageSize: n,
+			totalItems: t,
+			totalPages: Math.max(1, Math.ceil(t / n))
+		};
+	}
+	changePage = (e) => {
+		let t = this.paginationState;
+		if (!t) return;
+		let n = Math.max(1, Math.min(e, t.totalPages));
+		n !== this.page && (this.props.onPageChange ? this.props.onPageChange(n, t.pageSize) : this._page = n, this.fireServerStateChange({ page: n }), this.rows.clear(), this.notify());
+	};
+	changePageSize = (e) => {
+		e !== this.pageSize && (this.props.onPageSizeChange ? this.props.onPageSizeChange(e) : this._pageSize = e, this.props.onPageChange ? this.props.onPageChange(1, e) : this._page = 1, this.fireServerStateChange({
+			page: 1,
+			pageSize: e
+		}), this.rows.clear(), this.notify());
+	};
+	rowOffsets = U(() => {
+		let e = [], t = 0;
+		for (let n of this.flatRows.value) e.push(t), t += n instanceof V ? n.heightForOffset : this.rowHeight;
+		return {
+			offsets: e,
+			totalHeight: t
+		};
+	}, () => [this.flatRows]);
+	viewport = new Te(this);
+	columnVisibility = new be(this);
+	filter = new xe(this);
+	pagination = new Se(this);
+	get hasVisibleColumns() {
+		return this.columns.value.userVisibleLeafs.length > 0;
+	}
+	get isEmpty() {
+		return this.props.data.length === 0;
+	}
+	get allRowsSelected() {
+		return this.selectedRows.size === this.props.data.length;
+	}
+	get someRowsSelected() {
+		return this.selectedRows.size > 0;
+	}
+	_selectionAnnounced = !1;
+	get selectionAnnouncement() {
+		if (!this._selectionAnnounced) return "";
+		let e = this.selectedRows.size;
+		return e === 0 ? "No rows selected" : `${e} of ${this.props.data.length} rows selected`;
+	}
+	get groupedColumns() {
+		return Array.from(this.groupColumns, (e) => B.findOrThrow(this.columns.value.leafs, (t) => t.key === e));
+	}
+	selectedRows = /* @__PURE__ */ new Set();
+	get inlineStartEdge() {
+		return B.sumBy(this.columns.value.start, (e) => e.inlineWidth ?? 0);
+	}
+	get inlineEndEdge() {
+		return B.sumBy(this.columns.value.end, (e) => e.inlineWidth ?? 0);
+	}
+	inlineStartEdgeVarName = "--inline-start-edge";
+	rowHeightVarName = "--row-height";
+	viewportWidthVarName = "--viewport-width";
+	_idMap = /* @__PURE__ */ new WeakMap();
+	_autoId = 0;
+	_idFactory = typeof crypto < "u" && typeof crypto.randomUUID == "function" ? () => crypto.randomUUID() : () => `auto-row-${this._autoId++}`;
+	getRowKey(e) {
+		let { rowKey: t } = this.props.def;
+		return t ? typeof t == "function" ? t(e) : e[t] : (this._idMap.has(e) || this._idMap.set(e, this._idFactory()), this._idMap.get(e));
+	}
+	setSortColumn = (e, ...t) => {
+		if (t.length > 0) [this._sortDirection] = t, this._sortColumn = this._sortDirection ? e : void 0;
+		else {
+			let { _sortColumn: t, _sortDirection: n } = this;
+			this._sortColumn = t === e && n === "DESC" ? void 0 : e, this._sortDirection = t === e && n === "ASC" ? "DESC" : "ASC";
+		}
+		this.props.onSortChange?.(this._sortColumn, this._sortDirection);
+		let n = this.isPaginated && this.page !== 1 ? 1 : this.page;
+		n !== this.page && (this.props.onPageChange ? this.props.onPageChange(1, this.pageSize) : this._page = 1), this.fireServerStateChange({
+			sortColumn: this._sortColumn,
+			sortDirection: this._sortDirection,
+			page: n
+		}), this.rows.clear(), this.notify();
+	};
+	pinColumn = (e, t) => {
+		let n = G(t), r = B.findOrThrow(this.columns.value.flat, (t) => t.uniqueKey === e);
+		r.pin !== n && r.pinColumn(n), this.columns.clear(), this.notify();
+	};
+	toggleGrouping = (e) => {
+		this.groupColumns = new Set(this.groupColumns), this.hiddenColumns = new Set(this.hiddenColumns), this.groupColumns.has(e) ? (this.groupColumns.delete(e), this.hiddenColumns.delete(e)) : (this.groupColumns.add(e), this.hiddenColumns.add(e)), this.sourceColumns.clear(), this.notify();
+	};
+	unGroupAll = () => {
+		let e = new Set(this.groupColumns);
+		this.groupColumns = /* @__PURE__ */ new Set(), this.hiddenColumns = new Set(Array.from(this.hiddenColumns).filter((t) => !e.has(t))), this.sourceColumns.clear(), this.notify();
+	};
+	toggleGroupRow = (e) => {
+		this.expandedGroupRow = new Set(this.expandedGroupRow), this.expandedGroupRow.has(e) ? this.expandedGroupRow.delete(e) : this.expandedGroupRow.add(e), this.rows.clear(), this.notify();
+	};
+	toggleRowSelection = (e) => {
+		this.toggleRowsSelection([e]);
+	};
+	toggleRowsSelection = (e) => {
+		this.selectedRows = new Set(this.selectedRows), this._selectionAnnounced = !0;
+		let t = e.every((e) => this.selectedRows.has(e));
+		t ? e.forEach((e) => this.selectedRows.delete(e)) : e.forEach((e) => this.selectedRows.add(e)), this.flatRows.clear(), this.notify(), this.props.onSelectionChange?.({
+			action: t ? "deselect" : "select",
+			affectedRowKeys: e,
+			selectedRowKeys: Array.from(this.selectedRows),
+			isAllSelected: this.selectedRows.size === this.props.data.length
+		});
+	};
+	toggleSelectAllRows = () => {
+		this.toggleRowsSelection(this.props.data.map((e) => this.getRowKey(e)));
+	};
+	toggleColumnVisibility = (e) => {
+		this.hiddenColumns = new Set(this.hiddenColumns), this.hiddenColumns.has(e) ? this.hiddenColumns.delete(e) : this.hiddenColumns.add(e), this.columns.clear(), this.notify();
+	};
+	setWidth = (e, t) => {
+		this.columnWidths.set(e, t);
+	};
+	groupColumns = /* @__PURE__ */ new Set();
+	hiddenColumns = /* @__PURE__ */ new Set();
+	columnWidths = /* @__PURE__ */ new Map();
+	_sortColumn;
+	get sortColumn() {
+		return this._sortColumn;
+	}
+	_sortDirection = "ASC";
+	get sortDirection() {
+		return this._sortDirection;
+	}
+}, De = class {
+	grid;
+	row;
+	column;
+	constructor(e, t, n) {
+		this.grid = e, this.row = t, this.column = n;
+	}
+	get value() {
+		return this.column.isRowNumber ? this.row.rowIndex + 1 : this.column.isGrouping ? `${this.row.groupValue} (${this.row.count})` : null;
+	}
+	get isExpanded() {
+		return !1;
+	}
+	get isFirst() {
+		return !1;
+	}
+	get isLast() {
+		return !1;
+	}
+	get cellKind() {
+		if (this.column.isGrouping) return "grouping";
+		if (this.column.isRowSelection) return "selection";
+		let { groupingColumn: e } = this.row;
+		return this.column.pin !== e.pin || this.column.isRowNumber || this.column.isRowDetail ? "spacer" : "hidden";
+	}
+	get depthPadding() {
+		return 4 * this.row.depth;
+	}
+	get gridColumnSpan() {
+		return this.row.groupingColumnGridColumn;
+	}
+	get widthVar() {
+		return `var(${this.column.groupColumnWidthVarName})`;
+	}
+	get isEndPinned() {
+		return this.column.pin === "END";
+	}
+	get hasGroupingBorder() {
+		return this.row.groupingColumn.pin === "START";
+	}
+}, Oe = class {
+	grid;
+	groupColumn;
+	rows;
+	rowIndex;
+	groupValue;
+	constructor(e, t, n, r, i) {
+		this.grid = e, this.groupColumn = t, this.rows = n, this.rowIndex = r, this.groupValue = i, n.forEach((e) => e.parentRow = this);
+	}
+	get key() {
+		return `${this.parentRow?.key ?? ""}${this.groupColumn.key}${this.groupValue}`;
+	}
+	parentRow;
+	_cells = U(() => this.grid.columns.value.visibleLeafs.map((e) => new De(this.grid, this, e)));
+	get cells() {
+		return this._cells.value;
+	}
+	_renderedCells = U(() => {
+		let e = [];
+		return this.cells.forEach((t, n) => {
+			t.cellKind !== "hidden" && e.push({
+				cell: t,
+				columnIndex: n
+			});
+		}), e;
+	});
+	get renderedCells() {
+		return this._renderedCells.value;
+	}
+	get cellCount() {
+		return this.renderedCells.length;
+	}
+	columnOf(e) {
+		return this.renderedCells[e]?.columnIndex ?? e;
+	}
+	get selected() {
+		return this.allRows.every((e) => e.selected);
+	}
+	get indeterminate() {
+		return !this.selected && this.allRows.some((e) => e.selected);
+	}
+	get expanded() {
+		return this.grid.expandedGroupRow.has(this.key);
+	}
+	get depth() {
+		return this.parentRow ? this.parentRow.depth + 1 : 0;
+	}
+	get count() {
+		return B.sumBy(this.rows, (e) => e.count, 0);
+	}
+	get flatRows() {
+		return this.expanded ? [this, ...this.rows.flatMap((e) => e.flatRows)] : [this];
+	}
+	get allRows() {
+		return this.rows.flatMap((e) => e.allRows);
+	}
+	get groupingColumn() {
+		return B.findOrThrow(this.grid.columns.value.leafs, (e) => e.key === Y);
+	}
+	get groupingColumnGridColumn() {
+		let { visibleLeafs: e } = this.grid.columns.value, { groupingColumn: t } = this;
+		return B.sumBy(e, (e) => +(e.pin === t.pin && e.key !== "row-selection-cell" && e.key !== "row-number-cell" && e.key !== "row-detail-cell"));
+	}
+	kind = "group";
+	toggleRow() {
+		this.grid.toggleGroupRow(this.key);
+	}
+	toggleSelectAll = () => {
+		this.grid.toggleRowsSelection(this.allRows.map((e) => e.key));
+	};
+};
+//#endregion
+//#region src/components/dataGrid/components/dataGridDetailRow.tsx
+function ke(e) {
+	let { row: t, index: n } = e, { grid: i, parentRow: a } = t, o = i.props.def.rowDetail, s = z(), c = (s?.headerRowCount ?? 0) + n, { ref: l, tabIndex: u, onFocus: d } = s?.cellProps(c, 0) ?? {}, p = t.isAutoHeight;
+	return /* @__PURE__ */ M(f, {
+		component: `${i.componentName}.body.detailRow`,
+		props: {
+			role: "row",
+			"aria-rowindex": c + 1
+		},
+		style: {
+			gridColumn: "1 / -1",
+			height: p ? "auto" : `${t.height}px`
+		},
+		children: /* @__PURE__ */ M(r, {
+			ref: l,
+			component: `${i.componentName}.body.detailRow.content`,
+			position: "sticky",
+			insetStart: 0,
+			overflowX: "auto",
+			overflowY: "hidden",
+			props: {
+				role: "gridcell",
+				"aria-colindex": 1,
+				"aria-colspan": s?.columnCount,
+				tabIndex: u,
+				onFocus: d
+			},
+			style: { width: `var(${i.viewportWidthVarName})` },
+			children: o.content(a.data)
+		})
+	});
+}
+ke.displayName = "DataGridDetailRow";
+//#endregion
+//#region src/components/dataGrid/components/dataGridCell.tsx
+function Z(e) {
+	let { children: t, cell: n, row: r, columnIndex: i, ariaColIndex: a, ariaColSpan: o, style: s, ...c } = e, { column: l } = n, { ref: u, tabIndex: d, onFocus: p } = z()?.cellProps(r, i) ?? {};
+	l.hasAlign && (c.jc = l.align);
+	let m = n.isExpanded ? {
+		...l.cellVariant.value,
+		isExpanded: !0,
+		isExpandedFirstLeaf: n.isFirst,
+		isExpandedLastLeaf: n.isLast
+	} : l.cellVariant.value;
+	return /* @__PURE__ */ M(f, {
+		ref: u,
+		component: `${l.grid.componentName}.body.cell`,
+		props: {
+			role: "gridcell",
+			"aria-colindex": a ?? i + 1,
+			"aria-colspan": o,
+			tabIndex: d,
+			onFocus: p
+		},
+		variant: m,
+		style: {
+			...l.cellStyleVars.value,
+			...s
+		},
+		...c,
+		children: t
+	});
+}
+Z.displayName = "DataGridCell";
+//#endregion
+//#region src/components/dataGrid/components/dataGridGroupRow.tsx
+function Ae(e) {
+	let { row: t, index: n } = e, { selected: i, indeterminate: a, expanded: o } = t, s = (z()?.headerRowCount ?? 0) + n, c = w(() => t.toggleSelectAll(), [t]);
+	return /* @__PURE__ */ M(f, {
+		component: `${t.grid.componentName}.body.groupRow`,
+		className: "grid-row",
+		selected: t.grid.props.def.rowSelection ? i : void 0,
+		display: "contents",
+		props: {
+			role: "row",
+			"aria-rowindex": s + 1,
+			"aria-expanded": o
+		},
+		children: t.renderedCells.map(({ cell: e, columnIndex: n }, l) => {
+			switch (e.cellKind) {
+				case "grouping": return /* @__PURE__ */ M(Z, {
+					cell: e,
+					row: s,
+					columnIndex: l,
+					ariaColIndex: n + 1,
+					ariaColSpan: e.gridColumnSpan,
+					style: {
+						width: e.widthVar,
+						insetInlineEnd: e.isEndPinned ? "0" : void 0
+					},
+					be: e.hasGroupingBorder ? 1 : void 0,
+					gridColumn: e.gridColumnSpan,
+					ps: e.depthPadding,
+					overflow: "auto",
+					children: /* @__PURE__ */ M(r, {
+						textWrap: "nowrap",
+						px: 3,
+						children: /* @__PURE__ */ N(d, {
+							component: `${t.grid.componentName}.body.groupRow.expandButton`,
+							clean: !0,
+							onClick: () => t.toggleRow(),
+							cursor: "pointer",
+							display: "flex",
+							gap: 1,
+							ai: "center",
+							props: { "aria-expanded": o },
+							children: [/* @__PURE__ */ M(W, {
+								fill: "currentColor",
+								width: "14px",
+								height: "14px",
+								rotate: o ? 0 : -90
+							}), e.value]
+						})
+					})
+				}, e.column.key);
+				case "selection": return /* @__PURE__ */ M(Z, {
+					cell: e,
+					row: s,
+					columnIndex: l,
+					ariaColIndex: n + 1,
+					children: /* @__PURE__ */ M(p, {
+						variant: "datagrid",
+						m: 1,
+						checked: i,
+						indeterminate: a,
+						onChange: c,
+						props: { "aria-label": `Select all rows in ${t.groupValue}` }
+					})
+				}, e.column.key);
+				case "spacer": return /* @__PURE__ */ M(Z, {
+					cell: e,
+					row: s,
+					columnIndex: l,
+					ariaColIndex: n + 1,
+					px: e.column.isRowNumber ? 3 : void 0,
+					children: e.value
+				}, e.column.key);
+				default: return null;
+			}
+		})
+	});
+}
+Ae.displayName = "DataGridGroupRow";
+//#endregion
+//#region src/components/dataGrid/components/dataGridCellText.tsx
+function je(e) {
+	let { cell: t } = e;
+	return /* @__PURE__ */ M(f, {
+		component: `${t.grid.componentName}.body.cell.text`,
+		height: "fit",
+		width: "fit",
+		overflow: "auto",
+		ai: "center",
+		jc: t.column.align,
+		children: /* @__PURE__ */ M(r, {
+			px: 3,
+			textOverflow: "ellipsis",
+			overflow: "hidden",
+			textWrap: "nowrap",
+			children: t.value
+		})
+	});
+}
+je.displayName = "DataGridCellText";
+//#endregion
+//#region src/components/dataGrid/components/dataGridRow.tsx
+function Me(e) {
+	let { row: t, index: n } = e, { selected: r, expandOnRowClick: i } = t, a = (z()?.headerRowCount ?? 0) + n, o = w(() => {
+		t.toggleDetail();
+	}, [t]);
+	return /* @__PURE__ */ M(f, {
+		component: `${t.grid.componentName}.body.row`,
+		className: "grid-row",
+		selected: t.grid.props.def.rowSelection ? r : void 0,
+		display: "contents",
+		props: {
+			role: "row",
+			"aria-rowindex": a + 1,
+			onClick: i ? o : void 0
+		},
+		cursor: i ? "pointer" : void 0,
+		children: t.cells.map((e, t) => /* @__PURE__ */ M(Z, {
+			cell: e,
+			row: a,
+			columnIndex: t,
+			children: e.column.Cell ? /* @__PURE__ */ M(e.column.Cell, { cell: e }) : /* @__PURE__ */ M(je, { cell: e })
+		}, e.column.key))
+	});
+}
+Me.displayName = "DataGridRow";
+//#endregion
+//#region src/components/dataGrid/components/dataGridBody.tsx
+function Ne(e, t) {
+	return e instanceof V ? /* @__PURE__ */ M(ke, {
+		row: e,
+		index: t
+	}, e.key) : e instanceof Oe ? /* @__PURE__ */ M(Ae, {
+		row: e,
+		index: t
+	}, e.key) : /* @__PURE__ */ M(Me, {
+		row: e,
+		index: t
+	}, e.key);
+}
+function Pe(e) {
+	let { grid: t, scrollTop: n } = e, { viewport: i } = t, { startIndex: a, take: o, translateY: s, totalHeight: c, viewHeight: l } = i.window(n), u = i.showAll, d = i.isEmpty, p = t.flatRows.value, m = O(() => d ? null : B.take(p, o, a).map((e, t) => Ne(e, a + t)), [
+		p,
+		d,
+		o,
+		a
+	]);
+	if (d) {
+		let { noDataComponent: e } = t.props.def, n = t.props.loading ? "loading..." : "empty";
+		return /* @__PURE__ */ M(f, {
+			component: `${t.componentName}.body.empty`,
+			jc: "center",
+			ai: "center",
+			width: "fit",
+			position: "sticky",
+			insetStart: 0,
+			props: { role: "row" },
+			style: { height: i.emptyHeight },
+			children: /* @__PURE__ */ M(r, {
+				display: "contents",
+				props: { role: "gridcell" },
+				children: e ?? n
+			})
+		});
+	}
+	return u ? /* @__PURE__ */ M(h, {
+		component: `${t.componentName}.body`,
+		width: "max-content",
+		minWidth: "fit",
+		transition: "none",
+		props: { role: "rowgroup" },
+		style: { gridTemplateColumns: t.gridTemplateColumns.value },
+		children: m
+	}) : /* @__PURE__ */ M(r, {
+		props: { role: "presentation" },
+		style: { height: l },
+		children: /* @__PURE__ */ M(r, {
+			props: { role: "presentation" },
+			style: { height: `${c}px` },
+			children: /* @__PURE__ */ M(h, {
+				component: `${t.componentName}.body`,
+				width: "max-content",
+				minWidth: "fit",
+				transition: "none",
+				props: { role: "rowgroup" },
+				style: {
+					transform: `translate3d(0, ${s}px, 0)`,
+					willChange: "transform",
+					gridTemplateColumns: t.gridTemplateColumns.value
+				},
+				children: m
+			})
+		})
+	});
+}
+Pe.displayName = "DataGridBody";
+//#endregion
+//#region src/components/dataGrid/components/dataGridEmptyColumns.tsx
+function Fe(e) {
+	let { grid: t } = e;
+	return /* @__PURE__ */ M(f, {
+		component: `${t.componentName}.emptyColumns`,
+		d: "column",
+		ai: "center",
+		jc: "center",
+		gap: 4,
+		py: 16,
+		px: 6,
+		bgColor: "gray-50",
+		borderRadius: 4,
+		theme: { dark: { bgColor: "gray-900" } },
+		children: /* @__PURE__ */ N(f, {
+			d: "column",
+			ai: "center",
+			gap: 3,
+			children: [/* @__PURE__ */ M(r, {
+				width: 16,
+				height: 16,
+				borderRadius: 999,
+				bgColor: "gray-200",
+				theme: { dark: { bgColor: "gray-700" } },
+				display: "flex",
+				ai: "center",
+				jc: "center",
+				children: /* @__PURE__ */ M(l, {
+					viewBox: "0 0 24 24",
+					width: "40",
+					fill: "currentColor",
+					color: "gray-400",
+					theme: { dark: { color: "gray-500" } },
+					children: /* @__PURE__ */ M(c, {
+						fillRule: "evenodd",
+						props: { clipRule: "evenodd" },
+						d: "M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm3-1a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V6a1 1 0 00-1-1H6zm2 3a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h4a1 1 0 110 2H9a1 1 0 01-1-1z"
+					})
+				})
+			}), /* @__PURE__ */ N(f, {
+				d: "column",
+				ai: "center",
+				gap: 1,
+				children: [/* @__PURE__ */ M(r, {
+					fontSize: 18,
+					fontWeight: 600,
+					color: "gray-900",
+					theme: { dark: { color: "gray-50" } },
+					children: "No Columns Selected"
+				}), /* @__PURE__ */ M(r, {
+					fontSize: 14,
+					color: "gray-500",
+					textAlign: "center",
+					theme: { dark: { color: "gray-400" } },
+					children: "Select at least one column from the columns menu to display data"
+				})]
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/dataGrid/components/dataGridColumnFilter.tsx
+function Ie(e) {
+	let { columnName: t, onClear: n } = e;
+	return /* @__PURE__ */ M(d, {
+		clean: !0,
+		type: "button",
+		position: "absolute",
+		insetEnd: 2,
+		top: "1/2",
+		translateY: "-1/2",
+		cursor: "pointer",
+		display: "flex",
+		ai: "center",
+		onClick: n,
+		props: { "aria-label": `Clear the ${t} filter` },
+		children: /* @__PURE__ */ M(r, {
+			fontSize: 10,
+			color: "gray-400",
+			hover: { color: "gray-600" },
+			children: "✕"
+		})
+	});
+}
+function Le({ column: e }) {
+	let { currentFilter: t } = e, { componentName: n } = e.grid, r = e.header ?? e.key, i = t?.type === "text" ? t.value : "", [a, o] = A(i), s = k(null);
+	E(() => () => {
+		s.current && clearTimeout(s.current);
+	}, []);
+	let c = w((t) => {
+		let n = t.target.value;
+		o(n), s.current && clearTimeout(s.current), s.current = setTimeout(() => {
+			e.setTextFilter(n), s.current = null;
+		}, 300);
+	}, [e]), l = w(() => {
+		o(""), e.clearFilter();
+	}, [e]);
+	return /* @__PURE__ */ N(f, {
+		component: `${n}.filter.cell.input`,
+		children: [/* @__PURE__ */ M(m, {
+			width: "fit",
+			variant: "compact",
+			placeholder: e.filterConfig?.placeholder ?? "Filter...",
+			value: a,
+			onChange: c,
+			b: 0,
+			bgColor: "transparent",
+			focus: { outline: 0 },
+			props: { "aria-label": `Filter ${r}` }
+		}), a && /* @__PURE__ */ M(Ie, {
+			columnName: r,
+			onClear: l
+		})]
+	});
+}
+function Re({ column: e }) {
+	let { currentFilter: t } = e, { componentName: n } = e.grid, r = e.header ?? e.key, i = t?.type === "number" ? t.value : "", a = t?.type === "number" ? t.operator : "eq", o = t?.type === "number" ? t.valueTo : "", [s, c] = A(i), [l, u] = A(a), [d, p] = A(o ?? ""), h = k(null), g = k(null);
+	E(() => () => {
+		h.current && clearTimeout(h.current), g.current && clearTimeout(g.current);
+	}, []);
+	let _ = e.filterConfig, y = w((t) => {
+		let n = t.target.value;
+		c(n), h.current && clearTimeout(h.current), h.current = setTimeout(() => {
+			e.setNumberFilter(l, n, d), h.current = null;
+		}, 300);
+	}, [
+		e,
+		l,
+		d
+	]), b = w((t) => {
+		u(t), e.setNumberFilter(t, s, d);
+	}, [
+		e,
+		s,
+		d
+	]), x = w((t) => {
+		let n = t.target.value;
+		p(n), g.current && clearTimeout(g.current), g.current = setTimeout(() => {
+			e.setNumberFilter(l, s, n), g.current = null;
+		}, 300);
+	}, [
+		e,
+		l,
+		s
+	]), S = w(() => {
+		c(""), p(""), u("eq"), e.clearFilter();
+	}, [e]);
+	return /* @__PURE__ */ N(f, {
+		component: `${n}.filter.cell.input`,
+		ai: l === "between" ? "start" : "center",
+		gap: 1,
+		children: [/* @__PURE__ */ N(v, {
+			value: l,
+			variant: "compact",
+			onChange: (e) => e && b(e),
+			minWidth: 6,
+			hideIcon: !0,
+			b: 0,
+			bgColor: "transparent",
+			focus: { outline: 0 },
+			props: { "aria-label": `Comparison for ${r}` },
+			children: [
+				/* @__PURE__ */ M(v.Item, {
+					value: "eq",
+					children: "="
+				}),
+				/* @__PURE__ */ M(v.Item, {
+					value: "ne",
+					children: "≠"
+				}),
+				/* @__PURE__ */ M(v.Item, {
+					value: "gt",
+					children: ">"
+				}),
+				/* @__PURE__ */ M(v.Item, {
+					value: "gte",
+					children: "≥"
+				}),
+				/* @__PURE__ */ M(v.Item, {
+					value: "lt",
+					children: "<"
+				}),
+				/* @__PURE__ */ M(v.Item, {
+					value: "lte",
+					children: "≤"
+				}),
+				/* @__PURE__ */ M(v.Item, {
+					value: "between",
+					children: "↔"
+				})
+			]
+		}), l === "between" ? /* @__PURE__ */ N(f, {
+			d: "column",
+			gap: 1,
+			flex1: !0,
+			children: [/* @__PURE__ */ N(f, {
+				ai: "center",
+				position: "relative",
+				flex1: !0,
+				children: [/* @__PURE__ */ M(m, {
+					type: "number",
+					variant: "compact",
+					placeholder: _?.placeholder ?? "From",
+					value: s,
+					onChange: y,
+					width: "fit",
+					step: _?.step,
+					b: 0,
+					bgColor: "transparent",
+					focus: { outline: 0 },
+					props: { "aria-label": `Filter ${r} from` }
+				}), (s !== "" || d !== "") && /* @__PURE__ */ M(Ie, {
+					columnName: r,
+					onClear: S
+				})]
+			}), /* @__PURE__ */ M(f, {
+				ai: "center",
+				flex1: !0,
+				children: /* @__PURE__ */ M(m, {
+					type: "number",
+					variant: "compact",
+					placeholder: "To",
+					value: d,
+					onChange: x,
+					width: "fit",
+					step: _?.step,
+					b: 0,
+					bgColor: "transparent",
+					focus: { outline: 0 },
+					props: { "aria-label": `Filter ${r} to` }
+				})
+			})]
+		}) : /* @__PURE__ */ N(f, {
+			ai: "center",
+			position: "relative",
+			flex1: !0,
+			children: [/* @__PURE__ */ M(m, {
+				type: "number",
+				variant: "compact",
+				placeholder: _?.placeholder ?? "Value",
+				value: s,
+				onChange: y,
+				width: "fit",
+				step: _?.step,
+				b: 0,
+				bgColor: "transparent",
+				focus: { outline: 0 },
+				props: { "aria-label": `Filter ${r}` }
+			}), s !== "" && /* @__PURE__ */ M(Ie, {
+				columnName: r,
+				onClear: S
+			})]
+		})]
+	});
+}
+function ze({ column: e }) {
+	let { currentFilter: t } = e, { componentName: n } = e.grid, i = e.header ?? e.key, a = t?.type === "multiselect" ? t.values : [], o = e.filterOptions, s = w((t, n) => {
+		e.setMultiselectFilter(n);
+	}, [e]);
+	return /* @__PURE__ */ M(f, {
+		component: `${n}.filter.cell.input`,
+		children: /* @__PURE__ */ N(v, {
+			multiple: !0,
+			showCheckbox: !0,
+			isSearchable: !0,
+			searchPlaceholder: "Search...",
+			value: a,
+			width: "fit",
+			minWidth: 0,
+			bgColor: "transparent",
+			onChange: s,
+			variant: "compact",
+			b: 0,
+			focus: { outline: 0 },
+			props: { "aria-label": `Filter ${i}` },
+			children: [
+				/* @__PURE__ */ M(v.Display, { children: (t) => t.length === 0 ? /* @__PURE__ */ M(r, {
+					tag: "span",
+					color: "gray-400",
+					children: e.filterConfig?.placeholder ?? "Select..."
+				}) : t.length === 1 ? o.find((e) => e.value === t[0])?.label ?? String(t[0]) : `${t.length} selected` }),
+				/* @__PURE__ */ M(v.Unselect, { children: "Clear" }),
+				/* @__PURE__ */ M(v.SelectAll, { children: "Select All" }),
+				o.map((e) => /* @__PURE__ */ M(v.Item, {
+					value: e.value,
+					ai: "center",
+					gap: 2,
+					children: e.label
+				}, String(e.value)))
+			]
+		})
+	});
+}
+function Be(e) {
+	let { column: t } = e, n = t.filterConfig;
+	if (!n) return null;
+	switch (n.type) {
+		case "number": return /* @__PURE__ */ M(Re, { column: t });
+		case "multiselect": return /* @__PURE__ */ M(ze, { column: t });
+		default: return /* @__PURE__ */ M(Le, { column: t });
+	}
+}
+Be.displayName = "DataGridColumnFilter";
+//#endregion
+//#region src/components/dataGrid/components/dataGridFilterCell.tsx
+function Ve(e) {
+	let { column: t, grid: n, row: r, columnIndex: i } = e, { widthVarName: a, inlineStartVarName: o, inlineEndVarName: s, filterable: c } = t, { isStartPinned: l, isEndPinned: u, isPinned: d, isFirstStartPinned: p, isLastStartPinned: m, isFirstEndPinned: h, isLastEndPinned: g } = t.pinFlags.value, { ref: _, tabIndex: v, onFocus: y } = z()?.cellProps(r, i) ?? {}, b = t.isGrouping || t.isRowNumber || t.isRowSelection;
+	return /* @__PURE__ */ M(f, {
+		ref: _,
+		component: `${n.componentName}.filter.cell`,
+		props: {
+			role: "gridcell",
+			"aria-colindex": i + 1,
+			tabIndex: v,
+			onFocus: y
+		},
+		variant: {
+			isPinned: d,
+			isFirstStartPinned: p,
+			isLastStartPinned: m,
+			isFirstEndPinned: h,
+			isLastEndPinned: g
+		},
+		px: 2,
+		style: {
+			width: `var(${a})`,
+			insetInlineStart: l ? `var(${o})` : void 0,
+			insetInlineEnd: u ? `var(${s})` : void 0
+		},
+		children: !b && c && /* @__PURE__ */ M(Be, { column: t })
+	});
+}
+Ve.displayName = "DataGridFilterCell";
+//#endregion
+//#region src/components/dataGrid/components/dataGridFilterRow.tsx
+function He(e) {
+	let { grid: t } = e;
+	if (!t.filter.hasFilterableColumns) return null;
+	let n = t.headerRows.value.length;
+	return /* @__PURE__ */ M(r, {
+		display: "contents",
+		props: {
+			role: "row",
+			"aria-rowindex": n + 1
+		},
+		children: t.columns.value.visibleLeafs.map((e, r) => /* @__PURE__ */ M(Ve, {
+			column: e,
+			grid: t,
+			row: n,
+			columnIndex: r
+		}, e.uniqueKey))
+	});
+}
+He.displayName = "DataGridFilterRow";
+//#endregion
+//#region src/icons/sortIcon.tsx
+function Ue(e) {
+	return /* @__PURE__ */ M(l, {
+		viewBox: "0 0 24 24",
+		width: "1.5rem",
+		...e,
+		children: /* @__PURE__ */ M(c, { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })
+	});
+}
+//#endregion
+//#region src/icons/dotsIcon.tsx
+function We(e) {
+	return /* @__PURE__ */ M(l, {
+		viewBox: "0 0 16 16",
+		width: "18",
+		...e,
+		children: /* @__PURE__ */ M(c, {
+			strokeWidth: 4,
+			d: "M7.936 12.128a.936.936 0 1 1 0 1.872.936.936 0 0 1 0-1.872ZM7.936 7.052a.936.936 0 1 1 0 1.873.936.936 0 0 1 0-1.873ZM7.936 1.977a.936.936 0 1 1 0 1.872.936.936 0 0 1 0-1.872Z"
+		})
+	});
+}
+//#endregion
+//#region src/icons/groupingIcon.tsx
+function Ge(e) {
+	return /* @__PURE__ */ M(l, {
+		viewBox: "0 0 24 24",
+		width: "1.5rem",
+		...e,
+		children: /* @__PURE__ */ M(c, { d: "M3 5h8v2H3V5zm0 6h8v2H3v-2zm0 6h8v2H3v-2zm12-12h6v6h-6V5zm1 1v4h4V6h-4zm-1 7h6v6h-6v-6zm1 1v4h4v-4h-4z" })
+	});
+}
+//#endregion
+//#region src/icons/pinIcon.tsx
+function Ke(e) {
+	return /* @__PURE__ */ M(l, {
+		viewBox: "0 0 1024 1024",
+		width: "1.5rem",
+		...e,
+		children: /* @__PURE__ */ M(c, { d: "M31.997 1023.957a31.699 31.699 0 0 1-22.611-9.386C3.328 1008.556 0 1000.493 0 991.96s3.328-16.596 9.386-22.611L328.25 650.484l-152.52-152.52a95.907 95.907 0 0 1-25.087-92.152 95.31 95.31 0 0 1 44.327-58.62l.896-.512a353.464 353.464 0 0 1 176.156-47.398c20.137 0 40.36 1.749 60.283 5.205L597.71 44.54A95.224 95.224 0 0 1 678.685.085c25.64 0 49.745 9.983 67.877 28.073l249.195 249.195a95.224 95.224 0 0 1 25.897 88.74 95.139 95.139 0 0 1-42.152 60.154L719.513 591.695a352.227 352.227 0 0 1-42.663 237.292A95.395 95.395 0 0 1 594 876.514a95.523 95.523 0 0 1-67.963-28.2L373.43 695.706 54.61 1014.614a31.912 31.912 0 0 1-22.612 9.343zm340.025-660.68c-50.64 0-100.685 13.566-144.798 39.207a31.57 31.57 0 0 0-14.676 19.497 31.699 31.699 0 0 0 8.362 30.675L571.344 803.09c6.059 6.059 14.122 9.386 22.697 9.386a31.699 31.699 0 0 0 27.56-15.785 287.421 287.421 0 0 0 31.06-212.676 31.997 31.997 0 0 1 13.907-34.471l278.59-177.266a31.57 31.57 0 0 0 14.037-20.051 31.699 31.699 0 0 0-8.618-29.566l-249.28-249.28a31.912 31.912 0 0 0-49.618 5.418l-177.308 278.59a31.827 31.827 0 0 1-34.472 13.908 293.778 293.778 0 0 0-67.877-8.02z" })
+	});
+}
+//#endregion
+//#region src/components/dataGrid/components/dataGridHeaderCellContextMenu.tsx
+function qe(e) {
+	let t = e.side === "start" ? "Left" : "Right", n = e.side === "start" ? "Right" : "Left";
+	return /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ N(b, {
+		rtl: { display: "none" },
+		children: ["Pin ", t]
+	}), /* @__PURE__ */ N(b, {
+		ltr: { display: "none" },
+		children: ["Pin ", n]
+	})] });
+}
+function Je(t) {
+	let { column: c } = t, { grid: l, isEndAligned: u, header: p, key: m } = c, h = c.headerCell, v = p ?? m, y = a("datagrid-column-menu"), [x, C] = A(!1), T = k(null), E = k(null), D = k(!1), [j, ee] = A({
+		top: 0,
+		left: 0
+	}), P = O(() => e() && j.left > window.innerWidth / 2, [j.left]), te = u ? 2 : void 0, ne = u ? void 0 : c.pin === "END" ? 2.5 : 4, F = O(() => {
+		let e = (e) => /* @__PURE__ */ M(b, {
+			component: `${l.componentName}.header.cell.contextMenu.tooltip.item.icon`,
+			children: e
+		}), t = (t) => e(/* @__PURE__ */ M(Ue, {
+			width: "100%",
+			fill: "currentColor",
+			rotate: t
+		})), n = (t, n) => e(/* @__PURE__ */ M(Ke, {
+			width: "100%",
+			fill: "currentColor",
+			rotate: t,
+			rtl: { rotate: n }
+		})), i = e(/* @__PURE__ */ M(Ge, {
+			width: "100%",
+			fill: "currentColor"
+		})), a = /* @__PURE__ */ M(r, { width: 4 });
+		return [
+			[
+				h.canSortAsc && {
+					key: "sort-asc",
+					icon: t(),
+					label: "Sort Ascending",
+					text: "Sort Ascending",
+					run: () => c.sortColumn("ASC")
+				},
+				h.canSortDesc && {
+					key: "sort-desc",
+					icon: t(180),
+					label: "Sort Descending",
+					text: "Sort Descending",
+					run: () => c.sortColumn("DESC")
+				},
+				h.canClearSort && {
+					key: "sort-clear",
+					icon: a,
+					label: "Clear Sort",
+					text: "Clear Sort",
+					run: () => c.sortColumn(void 0)
+				}
+			],
+			[
+				h.canPinStart && {
+					key: "pin-start",
+					icon: n(0, -90),
+					label: /* @__PURE__ */ M(qe, { side: "start" }),
+					text: "Pin Left",
+					run: () => c.pinColumn("START")
+				},
+				h.canPinEnd && {
+					key: "pin-end",
+					icon: n(-90, 0),
+					label: /* @__PURE__ */ M(qe, { side: "end" }),
+					text: "Pin Right",
+					run: () => c.pinColumn("END")
+				},
+				h.canUnpin && {
+					key: "unpin",
+					icon: a,
+					label: "Unpin",
+					text: "Unpin",
+					run: () => c.pinColumn()
+				}
+			],
+			[h.canGroupBy && {
+				key: "group",
+				icon: i,
+				label: /* @__PURE__ */ N(r, {
+					textWrap: "nowrap",
+					children: ["Group by ", v]
+				}),
+				text: `Group by ${v}`,
+				run: c.toggleGrouping
+			}, h.canUnGroupAll && {
+				key: "ungroup",
+				icon: i,
+				label: /* @__PURE__ */ M(r, {
+					textWrap: "nowrap",
+					children: "Un-Group All"
+				}),
+				text: "Un-Group All",
+				run: l.unGroupAll
+			}]
+		].map((e) => e.filter((e) => e !== !1)).filter((e) => e.length > 0).flatMap((e, t) => e.map((e, n) => ({
+			...e,
+			startsSection: t > 0 && n === 0
+		})));
+	}, [
+		c,
+		v,
+		l,
+		h
+	]), I = w((e = !0) => {
+		D.current = !1, C(!1), e && T.current?.focus();
+	}, []), L = s({
+		count: F.length,
+		textOf: (e) => F[e]?.text ?? "",
+		onSelect: (e) => {
+			F[e]?.run(), I();
+		}
+	});
+	i({
+		enabled: x,
+		inside: [T, E],
+		onDismiss: () => I()
+	}), o({
+		enabled: x,
+		returnTo: T
+	});
+	let R = L.setActiveIndex, re = L.activeItem, ie = w(() => {
+		R(0, { reason: "programmatic" }), D.current = !0, C(!0);
+	}, [R]);
+	return n(() => {
+		if (!D.current) return;
+		let e = re();
+		e && (D.current = !1, e.focus());
+	}), /* @__PURE__ */ M(f, {
+		position: "absolute",
+		insetStart: te,
+		insetEnd: ne,
+		top: "1/2",
+		translateY: -3,
+		ai: "center",
+		children: /* @__PURE__ */ N(d, {
+			ref: T,
+			component: `${l.componentName}.header.cell.contextMenu`,
+			onClick: () => x ? I(!1) : ie(),
+			variant: h.contextMenuButtonVariant,
+			type: "button",
+			props: {
+				"aria-label": `Column options for ${v}`,
+				"aria-haspopup": "menu",
+				"aria-expanded": x,
+				"aria-controls": x ? y : void 0
+			},
+			children: [/* @__PURE__ */ M(b, {
+				component: `${l.componentName}.header.cell.contextMenu.icon`,
+				children: /* @__PURE__ */ M(We, { fill: "currentColor" })
+			}), /* @__PURE__ */ M(_, {
+				present: x,
+				children: (e) => /* @__PURE__ */ M(g, {
+					component: `${l.componentName}.header.cell.contextMenu.tooltip`,
+					variant: { closed: !e.present },
+					onPositionChange: ee,
+					ref: E,
+					contentRef: e.ref,
+					adjustTranslateX: P ? "-100%" : "-21px",
+					adjustTranslateY: "16px",
+					id: y,
+					props: {
+						role: "menu",
+						"aria-label": `Column options for ${v}`,
+						onKeyDown: L.onKeyDown,
+						...e.props
+					},
+					children: F.map((e, t) => {
+						let { ref: n, tabIndex: i, onFocus: a } = L.itemProps(t);
+						return /* @__PURE__ */ N(S, { children: [e.startsSection && /* @__PURE__ */ M(r, {
+							bb: 1,
+							my: 2,
+							borderColor: "gray-300",
+							component: `${l.componentName}.header.cell.contextMenu.tooltip.item.separator`
+						}), /* @__PURE__ */ N(d, {
+							component: `${l.componentName}.header.cell.contextMenu.tooltip.item`,
+							ref: n,
+							type: "button",
+							onClick: (t) => {
+								t.stopPropagation(), e.run(), I();
+							},
+							props: {
+								role: "menuitem",
+								tabIndex: i,
+								onFocus: a
+							},
+							children: [e.icon, e.label]
+						})] }, e.key);
+					})
+				})
+			})]
+		})
+	});
+}
+Je.displayName = "DataGridHeaderCellContextMenu";
+//#endregion
+//#region src/components/dataGrid/components/dataGridHeaderCellResizer.tsx
+var Q = (e) => "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, Ye = 16, Xe = 150;
+function $(e) {
+	let t = e.sizingElement;
+	t && Object.entries(e.sizes.value).forEach(([e, n]) => t.style.setProperty(e, n));
+}
+function Ze(e) {
+	let { column: t, controls: n } = e, i = t.grid.resizerStyle, a = t.headerCell, o = w((e) => {
+		let { grid: n } = t;
+		e.type === "mousedown" && e.preventDefault(), t.beginResize(Q(e.nativeEvent));
+		let r = new AbortController(), { signal: i } = r, a = 0, o = Q(e.nativeEvent), s = () => {
+			t.applyResize(o), $(n);
+		}, c = n.resizeMode === "instant" ? (e) => {
+			o = Q(e), s();
+		} : (e) => {
+			o = Q(e), a ||= requestAnimationFrame(() => {
+				a = 0, s();
+			});
+		}, l = () => {
+			r.abort(), a && cancelAnimationFrame(a), s(), t.endResize();
+		};
+		window.addEventListener("mousemove", c, { signal: i }), window.addEventListener("touchmove", c, { signal: i }), window.addEventListener("mouseup", l, { signal: i }), window.addEventListener("touchend", l, { signal: i });
+	}, [t]), s = k(void 0), c = k(0), l = w(() => {
+		let { grid: e } = t;
+		if (e.resizeMode === "instant") {
+			$(e);
+			return;
+		}
+		c.current ||= requestAnimationFrame(() => {
+			c.current = 0, $(e);
+		});
+	}, [t]), u = w(() => {
+		s.current !== void 0 && (clearTimeout(s.current), s.current = void 0, c.current &&= (cancelAnimationFrame(c.current), 0), t.endResize());
+	}, [t]);
+	E(() => () => {
+		clearTimeout(s.current), c.current && cancelAnimationFrame(c.current);
+	}, []);
+	let d = w((e) => {
+		switch (e.key) {
+			case "ArrowRight":
+				t.moveResizer(Ye);
+				break;
+			case "ArrowLeft":
+				t.moveResizer(-16);
+				break;
+			case "Home":
+				t.resizeWidthTo(a.minWidth);
+				break;
+			case "End":
+				t.resizeWidthTo(a.maxWidth);
+				break;
+			default: return;
+		}
+		e.preventDefault(), l(), clearTimeout(s.current), s.current = setTimeout(u, Xe);
+	}, [
+		t,
+		u,
+		a,
+		l
+	]);
+	return /* @__PURE__ */ M(f, {
+		height: "fit",
+		ai: "center",
+		position: "absolute",
+		insetEnd: t.pin === "END" ? void 0 : 0,
+		insetStart: t.pin === "END" ? 0 : void 0,
+		py: 3,
+		children: /* @__PURE__ */ M(r, {
+			cursor: "col-resize",
+			px: .75,
+			mt: -6,
+			className: "resizer",
+			height: "fit",
+			props: {
+				onMouseDown: o,
+				onTouchStart: o
+			},
+			children: /* @__PURE__ */ M(r, {
+				component: `${t.grid.componentName}.header.cell.resizer`,
+				opacity: i === "visible" ? void 0 : 0,
+				group: i === "hover" ? { "header-cell/hover": { opacity: 1 } } : void 0,
+				props: {
+					role: "separator",
+					"aria-label": a.resizerLabel,
+					"aria-controls": n,
+					"aria-orientation": "vertical",
+					"aria-valuenow": a.width,
+					"aria-valuemin": a.minWidth,
+					"aria-valuemax": a.maxWidth,
+					"aria-valuetext": `${a.width} pixels`,
+					tabIndex: 0,
+					onKeyDown: d,
+					onKeyUp: u
+				}
+			})
+		})
+	});
+}
+Ze.displayName = "DataGridHeaderCellResizer";
+//#endregion
+//#region src/components/dataGrid/components/dataGridHeaderCell.tsx
+function Qe(e) {
+	let { column: t, row: n, columnIndex: i } = e, { grid: o } = t, { isStartPinned: s, isEndPinned: c } = t.pinFlags.value, l = t.headerCell, { isSortable: u, showResizer: d, showContextMenu: m, paddingStart: h, paddingEnd: g } = l, { ref: _, tabIndex: v, onFocus: b } = z()?.cellProps(n, i) ?? {}, x = a("datagrid-columnheader"), S = w(() => {
+		o.toggleSelectAllRows();
+	}, [o]), C = t.isRowSelection ? /* @__PURE__ */ M(p, {
+		variant: "datagrid",
+		m: 1,
+		indeterminate: o.someRowsSelected && !o.allRowsSelected,
+		checked: o.allRowsSelected,
+		onChange: S,
+		props: { "aria-label": "Select all rows" }
+	}) : l.hiddenLabel ? /* @__PURE__ */ M(y, {
+		tag: "span",
+		children: l.hiddenLabel
+	}) : l.label;
+	return /* @__PURE__ */ M(f, {
+		ref: _,
+		id: x,
+		props: {
+			role: "columnheader",
+			"aria-colindex": l.columnIndex,
+			"aria-colspan": l.columnSpan,
+			"aria-rowspan": l.rowSpan,
+			"aria-sort": l.ariaSort,
+			tabIndex: v,
+			onFocus: b
+		},
+		className: "header-cell",
+		component: `${o.componentName}.header.cell`,
+		variant: l.variant,
+		gridRow: t.gridRows,
+		gridColumn: l.gridColumn,
+		style: {
+			width: `var(${t.widthVarName})`,
+			insetInlineStart: s ? `var(${t.inlineStartVarName})` : void 0,
+			insetInlineEnd: c ? `var(${t.inlineEndVarName})` : void 0
+		},
+		children: /* @__PURE__ */ N(j, { children: [
+			/* @__PURE__ */ M(f, {
+				width: "fit",
+				height: "fit",
+				jc: t.align,
+				props: { onClick: u ? () => t.sortColumn() : void 0 },
+				children: /* @__PURE__ */ N(f, {
+					overflow: "hidden",
+					position: t.isLeaf ? void 0 : "sticky",
+					ai: "center",
+					transition: "none",
+					ps: h,
+					pe: g,
+					style: { insetInlineStart: t.pin ? void 0 : `var(${o.inlineStartEdgeVarName})` },
+					children: [
+						/* @__PURE__ */ M(r, {
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							textWrap: "nowrap",
+							children: C
+						}),
+						l.isSorted && /* @__PURE__ */ M(r, {
+							ps: (t.inlineWidth ?? 0) < 58 ? 0 : 2,
+							children: /* @__PURE__ */ M(Ue, {
+								width: "16px",
+								rotate: l.sortDirection === "ASC" ? 0 : 180,
+								fill: "currentColor"
+							})
+						}),
+						m && /* @__PURE__ */ M(r, { minWidth: t.isEndAligned ? 4 : 10 })
+					]
+				})
+			}),
+			d && /* @__PURE__ */ M(Ze, {
+				column: t,
+				controls: x
+			}),
+			m && /* @__PURE__ */ M(Je, { column: t })
+		] })
+	});
+}
+Qe.displayName = "DataGridHeaderCell";
+//#endregion
+//#region src/components/dataGrid/components/dataGridHeader.tsx
+function $e(e) {
+	let { grid: t } = e;
+	return /* @__PURE__ */ N(h, {
+		component: `${t.componentName}.header`,
+		props: { role: "rowgroup" },
+		style: { gridTemplateColumns: t.gridTemplateColumns.value },
+		children: [t.headerRows.value.map((e, t) => /* @__PURE__ */ M(r, {
+			display: "contents",
+			props: {
+				role: "row",
+				"aria-rowindex": t + 1
+			},
+			children: e.map((e, n) => /* @__PURE__ */ M(Qe, {
+				column: e,
+				row: t,
+				columnIndex: n
+			}, e.uniqueKey))
+		}, t)), /* @__PURE__ */ M(He, { grid: t })]
+	});
+}
+$e.displayName = "DataGridHeader";
+//#endregion
+//#region src/components/dataGrid/components/dataGridLoader.tsx
+function et(e) {
+	let { grid: t } = e;
+	return /* @__PURE__ */ M(r, {
+		component: `${t.componentName}.loader`,
+		props: { "aria-hidden": !0 },
+		children: /* @__PURE__ */ M(r, {
+			component: `${t.componentName}.loader.track`,
+			style: { height: 3 },
+			children: /* @__PURE__ */ M(r, {
+				component: `${t.componentName}.loader.track.bar`,
+				width: "2/5"
+			})
+		})
+	});
+}
+et.displayName = "DataGridLoader";
+//#endregion
+//#region src/components/dataGrid/components/dataGridContent.tsx
+function tt(e) {
+	let { grid: t } = e, n = k(null), [i, a] = A(0), o = k(null), s = w((e) => {
+		o.current !== null && cancelAnimationFrame(o.current), o.current = requestAnimationFrame(() => {
+			a(e.target.scrollTop), o.current = null;
+		});
+	}, []), c = de({
+		grid: t,
+		scrollerRef: n,
+		scrollTop: i,
+		onScrollTo: a
+	});
+	return t.hasVisibleColumns ? /* @__PURE__ */ M(oe.Provider, {
+		value: c,
+		children: /* @__PURE__ */ N(r, {
+			ref: n,
+			component: `${t.componentName}.content`,
+			overflowX: "scroll",
+			style: { willChange: "scroll-position" },
+			props: {
+				role: "grid",
+				"aria-rowcount": c.rowCount,
+				"aria-colcount": c.columnCount,
+				"aria-multiselectable": t.props.def.rowSelection ? !0 : void 0,
+				"aria-labelledby": t.props.def.title ? t.titleId : void 0,
+				"aria-busy": t.props.loading ? !0 : void 0,
+				onScroll: s,
+				onKeyDown: c.onKeyDown
+			},
+			children: [
+				/* @__PURE__ */ M($e, { grid: t }),
+				t.props.loading && /* @__PURE__ */ M(et, { grid: t }),
+				/* @__PURE__ */ M(Pe, {
+					grid: t,
+					scrollTop: i
+				})
+			]
+		})
+	}) : /* @__PURE__ */ M(Fe, { grid: t });
+}
+tt.displayName = "DataGridContent";
+//#endregion
+//#region src/components/dataGrid/components/dataGridColumnGroups.tsx
+function nt(e) {
+	let { grid: t } = e;
+	return t.groupColumns.size === 0 ? null : /* @__PURE__ */ N(f, {
+		component: `${t.componentName}.topBar.columnGroups`,
+		children: [/* @__PURE__ */ M(b, {
+			component: `${t.componentName}.topBar.columnGroups.icon`,
+			children: /* @__PURE__ */ M(Ge, {
+				width: "100%",
+				fill: "currentColor"
+			})
+		}), t.groupedColumns.map((e) => /* @__PURE__ */ N(x.Fragment, { children: [/* @__PURE__ */ M(W, {
+			fill: "currentColor",
+			width: "14px",
+			height: "14px",
+			rotate: -90
+		}), /* @__PURE__ */ N(f, {
+			component: `${t.componentName}.topBar.columnGroups.item`,
+			children: [e.header ?? e.key, /* @__PURE__ */ M(d, {
+				component: `${t.componentName}.topBar.columnGroups.item.icon`,
+				onClick: () => t.toggleGrouping(e.key),
+				props: { "aria-label": `Stop grouping by ${e.header ?? e.key}` },
+				children: /* @__PURE__ */ M(r, {
+					fontSize: 10,
+					color: "gray-400",
+					hover: { color: "gray-600" },
+					children: "✕"
+				})
+			})]
+		})] }, e.key))]
+	});
+}
+nt.displayName = "DataGridColumnGroups";
+//#endregion
+//#region src/icons/searchIcon.tsx
+function rt(e) {
+	return /* @__PURE__ */ M(l, {
+		viewBox: "0 0 488.4 488.4",
+		width: "1.5rem",
+		...e,
+		children: /* @__PURE__ */ M(c, { d: "M0 203.25c0 112.1 91.2 203.2 203.2 203.2 51.6 0 98.8-19.4 134.7-51.2l129.5 129.5c2.4 2.4 5.5 3.6 8.7 3.6s6.3-1.2 8.7-3.6c4.8-4.8 4.8-12.5 0-17.3l-129.6-129.5c31.8-35.9 51.2-83 51.2-134.7C406.4 91.15 315.2.05 203.2.05S0 91.15 0 203.25zm381.9 0c0 98.5-80.2 178.7-178.7 178.7s-178.7-80.2-178.7-178.7 80.2-178.7 178.7-178.7 178.7 80.1 178.7 178.7z" })
+	});
+}
+//#endregion
+//#region src/components/dataGrid/components/dataGridGlobalFilter.tsx
+function it(e) {
+	let { grid: t } = e, [n, i] = A(t.globalFilterValue), a = k(null);
+	E(() => () => {
+		a.current && clearTimeout(a.current);
+	}, []);
+	let o = w((e) => {
+		let n = e.target.value;
+		i(n), a.current && clearTimeout(a.current), a.current = setTimeout(() => {
+			t.filter.setGlobalFilter(n), a.current = null;
+		}, 300);
+	}, [t]), s = w(() => {
+		i(""), t.filter.setGlobalFilter("");
+	}, [t]), { filtered: c, total: l } = t.filter.filterStats, u = t.filter.hasActiveFilters && c !== l;
+	return /* @__PURE__ */ N(f, {
+		component: `${t.componentName}.topBar.globalFilter`,
+		children: [u && /* @__PURE__ */ N(r, {
+			component: `${t.componentName}.topBar.globalFilter.stats`,
+			children: [
+				c,
+				"/",
+				l
+			]
+		}), /* @__PURE__ */ N(f, {
+			position: "relative",
+			ai: "center",
+			children: [
+				/* @__PURE__ */ M(f, {
+					position: "absolute",
+					insetStart: 3,
+					pointerEvents: "none",
+					color: "gray-400",
+					theme: { dark: { color: "gray-500" } },
+					children: /* @__PURE__ */ M(rt, {
+						fill: "currentColor",
+						width: "14px"
+					})
+				}),
+				/* @__PURE__ */ M(m, {
+					placeholder: "Search...",
+					variant: "compact",
+					value: n,
+					onChange: o,
+					ps: 8,
+					pe: n ? 8 : 3
+				}),
+				n && /* @__PURE__ */ M(r, {
+					position: "absolute",
+					insetEnd: 2,
+					cursor: "pointer",
+					p: 1,
+					color: "gray-400",
+					hover: { color: "gray-600" },
+					theme: { dark: {
+						color: "gray-500",
+						hover: { color: "gray-300" }
+					} },
+					props: { onClick: s },
+					children: /* @__PURE__ */ M(r, {
+						fontSize: 12,
+						fontWeight: 600,
+						children: "✕"
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/dataGrid/components/dataGridTopBarContextMenu.tsx
+function at(e) {
+	let { grid: t } = e, { columnVisibility: n } = t, { entries: i, selectedIds: a, total: o, hasHidden: s } = n;
+	return /* @__PURE__ */ N(v, {
+		component: `${t.componentName}.topBar.columnVisibility`,
+		multiple: !0,
+		showCheckbox: !0,
+		hideIcon: !0,
+		variant: "compact",
+		value: a,
+		onChange: (e, t) => {
+			n.setVisibility(t);
+		},
+		isSearchable: i.length > 6,
+		searchPlaceholder: "Search columns...",
+		display: "inline-flex",
+		props: { "aria-label": "Columns" },
+		children: [
+			/* @__PURE__ */ M(v.Display, { children: (e) => {
+				let n = e.length === 0;
+				return /* @__PURE__ */ N(f, {
+					ai: "center",
+					gap: 2,
+					children: [/* @__PURE__ */ N(u, {
+						viewBox: "0 0 20 20",
+						width: "18",
+						height: "18",
+						children: [
+							/* @__PURE__ */ M("rect", {
+								x: "2",
+								y: "3",
+								width: "4",
+								height: "14",
+								rx: "1",
+								fill: "currentColor",
+								opacity: .9
+							}),
+							/* @__PURE__ */ M("rect", {
+								x: "8",
+								y: "3",
+								width: "4",
+								height: "14",
+								rx: "1",
+								fill: "currentColor",
+								opacity: .6
+							}),
+							/* @__PURE__ */ M("rect", {
+								x: "14",
+								y: "3",
+								width: "4",
+								height: "14",
+								rx: "1",
+								fill: "currentColor",
+								opacity: .3
+							})
+						]
+					}), s && /* @__PURE__ */ N(r, {
+						component: `${t.componentName}.topBar.columnVisibility.badge`,
+						tag: "span",
+						fontSize: 11,
+						lineHeight: 16,
+						fontWeight: 500,
+						px: 2,
+						py: .5,
+						borderRadius: 1,
+						bgColor: n ? "red-100" : "amber-100",
+						color: n ? "red-700" : "amber-700",
+						theme: { dark: {
+							bgColor: n ? "red-900" : "amber-900",
+							color: n ? "red-300" : "amber-300"
+						} },
+						children: [
+							e.length,
+							"/",
+							o
+						]
+					})]
+				});
+			} }),
+			/* @__PURE__ */ M(v.SelectAll, { children: "Show All" }),
+			/* @__PURE__ */ M(v.Unselect, { children: "Hide All" }),
+			i.map((e) => /* @__PURE__ */ M(v.Item, {
+				value: e.id,
+				textWrap: "nowrap",
+				children: e.label
+			}, e.id))
+		]
+	});
+}
+at.displayName = "DataGridTopBarContextMenu";
+//#endregion
+//#region src/components/dataGrid/components/dataGridTopBar.tsx
+function ot(e) {
+	let { grid: t } = e, { title: n, topBarContent: i, globalFilter: a } = t.props.def;
+	return /* @__PURE__ */ N(f, {
+		component: `${t.componentName}.topBar`,
+		position: "relative",
+		d: "column",
+		gap: 3,
+		children: [/* @__PURE__ */ N(f, {
+			ai: "center",
+			jc: "space-between",
+			gap: 4,
+			flexWrap: "wrap",
+			width: "fit",
+			children: [/* @__PURE__ */ N(f, {
+				ai: "center",
+				gap: 3,
+				flexWrap: "wrap",
+				minWidth: 0,
+				children: [
+					/* @__PURE__ */ M(at, { grid: t }),
+					n && /* @__PURE__ */ M(r, {
+						id: t.titleId,
+						fontWeight: 600,
+						fontSize: 16,
+						color: "gray-800",
+						theme: { dark: { color: "gray-100" } },
+						children: n
+					}),
+					/* @__PURE__ */ M(nt, { grid: t })
+				]
+			}), a && /* @__PURE__ */ M(it, { grid: t })]
+		}), i && /* @__PURE__ */ M(r, {
+			width: "fit",
+			children: i
+		})]
+	});
+}
+ot.displayName = "DataGridTopBar";
+//#endregion
+//#region src/components/dataGrid/useGrid.ts
+function st(e) {
+	let [t] = A(() => new Ee(e)), n = a("datagrid");
+	return t.setProps(e), t.setIdentifier(n), ee(t.subscribe, t.getSnapshot, t.getSnapshot), t;
+}
+//#endregion
+//#region src/components/dataGrid.tsx
+function ct(e) {
+	let t = st(e), n = k(null);
+	return D(() => {
+		let e = n.current;
+		if (!e) return;
+		t.setSizingElement(e);
+		let r = new ResizeObserver((e) => {
+			let n = e[0]?.contentRect.width ?? 0;
+			t.setContainerWidth(n);
+		});
+		return r.observe(e), () => {
+			r.disconnect(), t.setSizingElement(null);
+		};
+	}, [t]), /* @__PURE__ */ N(r, {
+		ref: n,
+		component: t.componentName,
+		style: t.sizes.value,
+		children: [
+			t.props.def.topBar && /* @__PURE__ */ M(ot, { grid: t }),
+			/* @__PURE__ */ M(tt, { grid: t }),
+			t.props.def.bottomBar && /* @__PURE__ */ M(ae, { grid: t }),
+			/* @__PURE__ */ M(y, {
+				props: { role: "status" },
+				children: t.selectionAnnouncement
+			})
+		]
+	});
+}
+ct.displayName = "DataGrid";
+//#endregion
+export { ct as default };