@box-kite/react 2.2.6 → 2.2.8

package/components/dataGrid.mjs

@@ -1,37 +1,39 @@
 "use client";
-import { d as e, i as t, s as n } from "../platform.mjs";
+import { l as e, o as t, p as n } from "../platform.mjs";
 import { n as r } from "../effects.mjs";
-import i from "../box.mjs";
-import { a, n as o, o as s, r as c, t as l } from "../behavior.mjs";
-import { t as u } from "../identity.mjs";
-import { Path as d, Svg as f } from "./svg.mjs";
-import p from "./button.mjs";
-import m from "./visuallyHidden.mjs";
-import h from "./flex.mjs";
-import g from "./checkbox.mjs";
-import _ from "./overlay.mjs";
-import v from "./presence.mjs";
-import y from "./textbox.mjs";
-import { n as b } from "../scrolling.mjs";
-import x from "./grid.mjs";
-import S from "./dropdown.mjs";
-import { Span as C } from "./semantics.mjs";
-import w from "./popover.mjs";
-import T from "./switch.mjs";
-import ee, { Fragment as te, createContext as ne, forwardRef as E, memo as D, useCallback as O, useContext as k, useEffect as A, useImperativeHandle as j, useLayoutEffect as re, useMemo as M, useRef as N, useState as P, useSyncExternalStore as ie } from "react";
-import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
-import { useSyncExternalStore as ae } from "use-sync-external-store/shim";
+import { t as i } from "../interactions.mjs";
+import a from "../box.mjs";
+import { a as o, n as s, o as c, r as l, t as u } from "../behavior.mjs";
+import { t as d } from "../identity.mjs";
+import { t as f } from "../reporting.mjs";
+import { Path as p, Svg as m } from "./svg.mjs";
+import h from "./button.mjs";
+import g from "./visuallyHidden.mjs";
+import _ from "./flex.mjs";
+import v from "./checkbox.mjs";
+import y from "./overlay.mjs";
+import b from "./presence.mjs";
+import x from "./textbox.mjs";
+import { n as S } from "../scrolling.mjs";
+import C from "./grid.mjs";
+import w from "./dropdown.mjs";
+import { Span as T } from "./semantics.mjs";
+import E from "./popover.mjs";
+import ee from "./switch.mjs";
+import D, { Fragment as te, createContext as O, forwardRef as k, memo as A, useCallback as j, useContext as M, useEffect as N, useImperativeHandle as ne, useLayoutEffect as re, useMemo as ie, useRef as P, useState as F, useSyncExternalStore as ae } from "react";
+import { Fragment as I, jsx as L, jsxs as R } from "react/jsx-runtime";
+import { useSyncExternalStore as oe } from "use-sync-external-store/shim";
 //#region src/components/dataGrid/components/dataGridBottomBarSelection.tsx
-function oe(e) {
+function se(e) {
 	let { grid: t } = e, n = t.selectedRows.size, r = t.isSelectionView;
-	return /* @__PURE__ */ L(h, {
+	return /* @__PURE__ */ R(_, {
 		component: `${t.componentName}.bottomBar.selection`,
 		children: [
-			/* @__PURE__ */ I(i, {
+			/* @__PURE__ */ L(a, {
 				component: `${t.componentName}.bottomBar.info`,
 				children: t.localeText.selectedCount(n, t.hiddenSelectedCount)
 			}),
-			t.canShowSelection && (n > 0 || r) && /* @__PURE__ */ I(p, {
+			t.canShowSelection && (n > 0 || r) && /* @__PURE__ */ L(h, {
 				type: "button",
 				component: `${t.componentName}.bottomBar.action`,
 				variant: { pressed: r },
@@ -39,11 +41,11 @@ function oe(e) {
 				onClick: t.toggleSelectionView,
 				children: t.localeText.showSelected
 			}),
-			n > 0 && /* @__PURE__ */ L(p, {
+			n > 0 && /* @__PURE__ */ R(h, {
 				type: "button",
 				component: `${t.componentName}.bottomBar.action`,
 				onClick: t.clearSelection,
-				children: [/* @__PURE__ */ I(i, {
+				children: [/* @__PURE__ */ L(a, {
 					tag: "span",
 					props: { "aria-hidden": !0 },
 					children: "✕"
@@ -54,74 +56,74 @@ function oe(e) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridPagination.tsx
-function se(e) {
-	let { grid: t } = e, { pagination: n } = t, r = n.state, a = O(() => n.firstPage(), [n]), o = O(() => n.prevPage(), [n]), s = O(() => n.nextPage(), [n]), c = O(() => n.lastPage(), [n]);
+function ce(e) {
+	let { grid: t } = e, { pagination: n } = t, r = n.state, i = j(() => n.firstPage(), [n]), o = j(() => n.prevPage(), [n]), s = j(() => n.nextPage(), [n]), c = j(() => n.lastPage(), [n]);
 	if (!r) return null;
 	let { canGoPrev: l, canGoNext: u, totalPages: d } = n;
-	return /* @__PURE__ */ L(h, {
+	return /* @__PURE__ */ R(_, {
 		component: `${t.componentName}.bottomBar.pagination`,
 		gap: .5,
 		ai: "center",
 		children: [
-			/* @__PURE__ */ I(ce, {
+			/* @__PURE__ */ L(le, {
 				grid: t,
 				pageSize: r.pageSize
 			}),
-			/* @__PURE__ */ I(R, {
+			/* @__PURE__ */ L(de, {
 				componentName: t.componentName,
 				label: t.localeText.firstPage,
-				onClick: a,
+				onClick: i,
 				disabled: !l,
-				children: /* @__PURE__ */ I(pe, {})
+				children: /* @__PURE__ */ L(he, {})
 			}),
-			/* @__PURE__ */ I(R, {
+			/* @__PURE__ */ L(de, {
 				componentName: t.componentName,
 				label: t.localeText.previousPage,
 				onClick: o,
 				disabled: !l,
-				children: /* @__PURE__ */ I(de, {})
+				children: /* @__PURE__ */ L(pe, {})
 			}),
-			/* @__PURE__ */ L(h, {
+			/* @__PURE__ */ R(_, {
 				ai: "center",
 				gap: 1.5,
 				px: 2,
 				userSelect: "none",
-				children: [/* @__PURE__ */ I(le, {
+				children: [/* @__PURE__ */ L(ue, {
 					grid: t,
 					page: r.page,
 					totalPages: d
-				}), /* @__PURE__ */ I(i, {
+				}), /* @__PURE__ */ L(a, {
 					component: `${t.componentName}.bottomBar.pagination.info`,
 					fontSize: 12,
 					opacity: .7,
 					children: t.localeText.pageCount(d)
 				})]
 			}),
-			/* @__PURE__ */ I(R, {
+			/* @__PURE__ */ L(de, {
 				componentName: t.componentName,
 				label: t.localeText.nextPage,
 				onClick: s,
 				disabled: !u,
-				children: /* @__PURE__ */ I(fe, {})
+				children: /* @__PURE__ */ L(me, {})
 			}),
-			/* @__PURE__ */ I(R, {
+			/* @__PURE__ */ L(de, {
 				componentName: t.componentName,
 				label: t.localeText.lastPage,
 				onClick: c,
 				disabled: !u,
-				children: /* @__PURE__ */ I(me, {})
+				children: /* @__PURE__ */ L(ge, {})
 			})
 		]
 	});
 }
-se.displayName = "DataGridPagination";
-function ce({ grid: e, pageSize: t }) {
+ce.displayName = "DataGridPagination";
+function le({ grid: e, pageSize: t }) {
 	let n = e.pagination.pageSizeOptions;
-	return !n || n.length === 0 ? null : /* @__PURE__ */ I(h, {
+	return !n || n.length === 0 ? null : /* @__PURE__ */ L(_, {
 		ai: "center",
 		gap: 1,
 		me: 1,
-		children: /* @__PURE__ */ I(i, {
+		children: /* @__PURE__ */ L(a, {
 			component: `${e.componentName}.bottomBar.pagination.pageSize`,
 			tag: "select",
 			fontSize: 12,
@@ -132,22 +134,22 @@ function ce({ grid: e, pageSize: t }) {
 				value: t,
 				onChange: (t) => e.pagination.changePageSize(Number(t.target.value))
 			},
-			children: n.map((t) => /* @__PURE__ */ I("option", {
+			children: n.map((t) => /* @__PURE__ */ L("option", {
 				value: t,
 				children: e.localeText.pageSizeOption(t)
 			}, t))
 		})
 	});
 }
-function le({ grid: e, page: t, totalPages: n }) {
-	let [r, i] = P(String(t)), [a, o] = P(t);
+function ue({ grid: e, page: t, totalPages: n }) {
+	let [r, i] = F(String(t)), [a, o] = F(t);
 	t !== a && (o(t), i(String(t)));
-	let s = O(() => {
+	let s = j(() => {
 		e.pagination.jumpToPage(r), i(String(e.pagination.page));
-	}, [e, r]), c = O((e) => {
+	}, [e, r]), c = j((e) => {
 		e.key === "Enter" ? s() : e.key === "Escape" && i(String(t));
 	}, [s, t]);
-	return /* @__PURE__ */ I(y, {
+	return /* @__PURE__ */ L(x, {
 		type: "number",
 		variant: "compact",
 		value: r,
@@ -163,9 +165,9 @@ function le({ grid: e, page: t, totalPages: n }) {
 		}
 	});
 }
-function R(e) {
+function de(e) {
 	let { componentName: t, label: n, onClick: r, disabled: i, children: a } = e;
-	return /* @__PURE__ */ I(p, {
+	return /* @__PURE__ */ L(h, {
 		component: `${t}.bottomBar.pagination.button`,
 		props: {
 			"aria-label": n,
@@ -178,15 +180,15 @@ function R(e) {
 		opacity: i ? .3 : .7,
 		hover: i ? void 0 : {
 			opacity: 1,
-			bgColor: "gray-100"
+			bgColor: "base-100"
 		},
-		theme: { dark: { hover: i ? void 0 : { bgColor: "gray-700" } } },
+		theme: { dark: { hover: i ? void 0 : { bgColor: "base-700" } } },
 		transitionDuration: 150,
 		children: a
 	});
 }
-function ue(e) {
-	return /* @__PURE__ */ I(f, {
+function fe(e) {
+	return /* @__PURE__ */ L(m, {
 		viewBox: "0 0 24 24",
 		width: "14",
 		height: "14",
@@ -195,70 +197,70 @@ function ue(e) {
 		strokeWidth: 2,
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		children: /* @__PURE__ */ I(d, { d: e.d })
+		children: /* @__PURE__ */ L(p, { d: e.d })
 	});
 }
-function de() {
-	return /* @__PURE__ */ I(ue, { d: "M15 18l-6-6 6-6" });
-}
-function fe() {
-	return /* @__PURE__ */ I(ue, { d: "M9 18l6-6-6-6" });
-}
 function pe() {
-	return /* @__PURE__ */ I(ue, { d: "M18 18l-6-6 6-6M11 18l-6-6 6-6" });
+	return /* @__PURE__ */ L(fe, { d: "M15 18l-6-6 6-6" });
 }
 function me() {
-	return /* @__PURE__ */ I(ue, { d: "M6 18l6-6-6-6M13 18l6-6-6-6" });
+	return /* @__PURE__ */ L(fe, { d: "M9 18l6-6-6-6" });
+}
+function he() {
+	return /* @__PURE__ */ L(fe, { d: "M18 18l-6-6 6-6M11 18l-6-6 6-6" });
+}
+function ge() {
+	return /* @__PURE__ */ L(fe, { d: "M6 18l6-6-6-6M13 18l6-6-6-6" });
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridBottomBar.tsx
-function he(e) {
+function _e(e) {
 	let { grid: t } = e, { pagination: n, filter: r } = t;
 	if (n.state) {
-		let { totalItems: e, startItem: r, endItem: a } = n;
-		return /* @__PURE__ */ L(h, {
+		let { totalItems: e, startItem: r, endItem: i } = n;
+		return /* @__PURE__ */ R(_, {
 			component: `${t.componentName}.bottomBar`,
 			children: [
-				/* @__PURE__ */ I(i, {
+				/* @__PURE__ */ L(a, {
 					component: `${t.componentName}.bottomBar.info`,
-					children: t.localeText.pageRowRange(r, a, e)
+					children: t.localeText.pageRowRange(r, i, e)
 				}),
-				t.props.def.rowSelection && /* @__PURE__ */ I(oe, { grid: t }),
-				/* @__PURE__ */ I(se, { grid: t })
+				t.props.def.rowSelection && /* @__PURE__ */ L(se, { grid: t }),
+				/* @__PURE__ */ L(ce, { grid: t })
 			]
 		});
 	}
-	let { filtered: a, total: o } = r.filterStats;
-	return /* @__PURE__ */ L(h, {
+	let { filtered: i, total: o } = r.filterStats;
+	return /* @__PURE__ */ R(_, {
 		component: `${t.componentName}.bottomBar`,
 		children: [
-			/* @__PURE__ */ I(i, {
+			/* @__PURE__ */ L(a, {
 				component: `${t.componentName}.bottomBar.info`,
-				children: t.localeText.rowCount(a, o)
+				children: t.localeText.rowCount(i, o)
 			}),
-			r.hasActiveFilters && /* @__PURE__ */ L(p, {
+			r.hasActiveFilters && /* @__PURE__ */ R(h, {
 				type: "button",
 				component: `${t.componentName}.bottomBar.clearFilters`,
 				onClick: r.clearAllFilters,
-				children: [/* @__PURE__ */ I(i, {
+				children: [/* @__PURE__ */ L(a, {
 					tag: "span",
 					props: { "aria-hidden": !0 },
 					children: "✕"
 				}), t.localeText.clearFilters]
 			}),
-			t.props.def.rowSelection && /* @__PURE__ */ I(oe, { grid: t })
+			t.props.def.rowSelection && /* @__PURE__ */ L(se, { grid: t })
 		]
 	});
 }
 //#endregion
 //#region src/components/dataGrid/gridNavigationContext.ts
-var ge = ne(null);
+var ve = O(null);
 function z() {
-	return k(ge);
+	return M(ve);
 }
-var _e = () => () => {};
-function ve(e, t, n) {
-	let r = ie(e?.activeCell.subscribe ?? _e, () => !!e?.activeCell.isActive(t, n), () => !!e?.activeCell.isActive(t, n));
+var ye = () => () => {};
+function be(e, t, n) {
+	let r = ae(e?.activeCell.subscribe ?? ye, () => !!e?.activeCell.isActive(t, n), () => !!e?.activeCell.isActive(t, n));
 	return e ? {
 		...e.cellProps(t, n),
 		tabIndex: r ? 0 : -1
@@ -266,7 +268,7 @@ function ve(e, t, n) {
 }
 //#endregion
 //#region src/components/dataGrid/models/viewportModel.ts
-var ye = class e {
+var xe = class e {
 	grid;
 	static DEFAULT_VISIBLE_ROWS_COUNT = 10;
 	static ROWS_AHEAD = 12;
@@ -319,7 +321,7 @@ var ye = class e {
 			totalHeight: this.totalHeight,
 			viewHeight: void 0
 		};
-		let { rowHeight: i } = this.grid, { ROWS_AHEAD: a, ROWS_BEHIND: o, PARTIAL_ROWS: s } = e, c = n === "down" ? o : a, { offsets: l } = this.grid.rowOffsets.value, u = this.hasDetailRows ? b(l, t) : Math.floor(t / i), d = Math.max(0, u - c), f = this.hasDetailRows ? l[d] ?? 0 : d * i;
+		let { rowHeight: i } = this.grid, { ROWS_AHEAD: a, ROWS_BEHIND: o, PARTIAL_ROWS: s } = e, c = n === "down" ? o : a, { offsets: l } = this.grid.rowOffsets.value, u = this.hasDetailRows ? S(l, t) : Math.floor(t / i), d = Math.max(0, u - c), f = this.hasDetailRows ? l[d] ?? 0 : d * i;
 		return {
 			startIndex: d,
 			take: this.visibleRowsCount + s + o + a,
@@ -328,7 +330,7 @@ var ye = class e {
 			viewHeight: this.viewHeight
 		};
 	}
-}, be = class {
+}, Se = class {
 	row;
 	column;
 	listeners = /* @__PURE__ */ new Set();
@@ -342,23 +344,23 @@ var ye = class e {
 	set(e, t) {
 		(e !== this.row || t !== this.column) && (this.row = e, this.column = t, this.listeners.forEach((e) => e()));
 	}
-}, xe, Se;
-function Ce() {
-	return Se ??= import("../dataGridDateParts.mjs").then((e) => xe = e.default), Se;
+}, Ce, we;
+function Te() {
+	return we ??= import("../dataGridDateParts.mjs").then((e) => Ce = e.default), we;
 }
-function we() {
-	return xe;
+function Ee() {
+	return Ce;
 }
-function Te(e) {
-	let [t, n] = P(void 0);
+function De(e) {
+	let [t, n] = F(void 0);
 	return r(() => {
 		if (!e || t) return;
-		if (xe) {
-			n(() => xe);
+		if (Ce) {
+			n(() => Ce);
 			return;
 		}
 		let r = !0;
-		return Ce().then((e) => r && n(() => e)), () => {
+		return Te().then((e) => r && n(() => e)), () => {
 			r = !1;
 		};
 	}, [e, t]), t;
@@ -368,35 +370,39 @@ function Te(e) {
 function B(e, t) {
 	return JSON.stringify([e, t]);
 }
-var Ee = 1e3;
-function De(e) {
-	return typeof e == "number" ? "number" : typeof e == "boolean" ? "checkbox" : e instanceof Date ? "datetime" : typeof e == "string" ? ke.test(e) ? "date" : Ae.test(e) ? "time" : je.test(e) ? "datetime" : "text" : "text";
+var Oe = 1e3;
+function ke(e) {
+	return typeof e == "number" ? "number" : typeof e == "boolean" ? "checkbox" : e instanceof Date ? "datetime" : typeof e == "string" ? je.test(e) ? "date" : Me.test(e) ? "time" : Ne.test(e) ? "datetime" : "text" : "text";
 }
-var Oe = /* @__PURE__ */ new Set([
+var Ae = /* @__PURE__ */ new Set([
 	"date",
 	"time",
 	"datetime"
-]), ke = /^\d{4}-\d{2}-\d{2}$/, Ae = /^\d{2}:\d{2}(:\d{2}(\.\d+)?)?$/, je = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/;
-function Me(e) {
-	return Oe.has(e);
+]), je = /^\d{4}-\d{2}-\d{2}$/, Me = /^\d{2}:\d{2}(:\d{2}(\.\d+)?)?$/, Ne = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/;
+function Pe(e) {
+	return Ae.has(e);
 }
-function Ne(e, t) {
+function Fe(e, t) {
 	if (e === "text") return t;
 	if (e !== "number" || t.trim() === "") return;
 	let n = Number(t);
 	return Number.isFinite(n) ? n : void 0;
 }
-var Pe = /* @__PURE__ */ new Set([
+var Ie = [
+	"value",
+	"oldValue",
+	"error"
+], Le = /* @__PURE__ */ new Set([
 	"true",
 	"1",
 	"yes"
-]), Fe = /* @__PURE__ */ new Set([
+]), Re = /* @__PURE__ */ new Set([
 	"false",
 	"0",
 	"no",
 	""
 ]);
-function Ie(e, t, n) {
+function ze(e, t, n) {
 	if (e.type === "number") {
 		if (n.trim() === "") return { value: null };
 		let e = Number(n);
@@ -404,17 +410,17 @@ function Ie(e, t, n) {
 	}
 	if (e.type === "checkbox") {
 		let e = n.trim().toLowerCase();
-		return Pe.has(e) ? { value: !0 } : Fe.has(e) ? { value: !1 } : void 0;
+		return Le.has(e) ? { value: !0 } : Re.has(e) ? { value: !1 } : void 0;
 	}
-	if (Me(e.type)) {
+	if (Pe(e.type)) {
 		if (n.trim() === "") return { value: null };
-		let t = we();
+		let t = Ee();
 		if (t) {
 			let r = t.parsePasted(e, n);
 			return r ? { value: r } : void 0;
 		}
 		let r = n.trim();
-		return (e.type === "date" ? ke : e.type === "time" ? Ae : je).test(r) ? { value: r } : void 0;
+		return (e.type === "date" ? je : e.type === "time" ? Me : Ne).test(r) ? { value: r } : void 0;
 	}
 	if (e.type === "select") {
 		let e = t.find((e) => String(e.value) === n);
@@ -422,10 +428,10 @@ function Ie(e, t, n) {
 	}
 	return { value: n };
 }
-function Le(e) {
+function Be(e) {
 	return e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
 }
-var Re = class {
+var Ve = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -450,7 +456,7 @@ var Re = class {
 	}
 	editorFor(e, t) {
 		let { editor: n } = e.def;
-		return typeof n == "object" ? n : n ? { type: n } : { type: De(t) };
+		return typeof n == "object" ? n : n ? { type: n } : { type: ke(t) };
 	}
 	isEditing(e, t) {
 		return this._active?.rowKey === e && this._active.columnKey === t;
@@ -475,7 +481,7 @@ var Re = class {
 		return !!this._active?.pending;
 	}
 	begin(e, t, n, r) {
-		let i = r === void 0 ? void 0 : Ne(this.editorFor(t, n).type, r);
+		let i = r === void 0 ? void 0 : Fe(this.editorFor(t, n).type, r);
 		this.rejected.delete(B(e.key, t.key)), this._active = {
 			row: e,
 			rowKey: e.key,
@@ -484,7 +490,10 @@ var Re = class {
 			token: ++this._token,
 			drafts: 0,
 			pending: !1
-		}, this.grid.notify();
+		}, this.grid.notify(), this.grid.reportInteraction("cellEditStart", n, r === void 0 ? "open" : "typing", {
+			rowKey: e.key,
+			columnKey: t.key
+		}, ["value"]);
 	}
 	beginAt(e, t, n) {
 		let r = this.grid.flatRows.value[e], i = this.grid.columns.value.visibleLeafs[t];
@@ -534,10 +543,19 @@ var Re = class {
 					...this._active,
 					pending: !1,
 					error: typeof n == "string" ? n : this.invalidValue
-				}, this.grid.notify();
+				}, this.grid.notify(), this.grid.reportInteraction("cellEditReject", t.value, "invalid", {
+					rowKey: t.rowKey,
+					columnKey: t.columnKey,
+					oldValue: t.oldValue,
+					error: this._active.error
+				}, Ie);
 				return;
 			}
-			this.values.set(B(t.rowKey, t.columnKey), t.value), this._edits = [...this._edits, t], this._active = void 0, this.grid.notify(), this.grid.props.onCellEditsChange?.(this._edits, { reason: "edit" });
+			this.values.set(B(t.rowKey, t.columnKey), t.value), this._edits = [...this._edits, t], this._active = void 0, this.grid.notify(), this.grid.props.onCellEditsChange?.(this._edits, { reason: "edit" }), this.grid.reportInteraction("cellEdit", t.value, "edit", {
+				rowKey: t.rowKey,
+				columnKey: t.columnKey,
+				oldValue: t.oldValue
+			}, Ie);
 		}
 	}
 	valueOf(e, t, n) {
@@ -561,7 +579,7 @@ var Re = class {
 					c++;
 					continue;
 				}
-				let f = this.valueOf(l.key, u.key, l.data[u.key]), p = Ie(this.editorFor(u, f), this.optionsFor(u, l), d), m = {
+				let f = this.valueOf(l.key, u.key, l.data[u.key]), p = ze(this.editorFor(u, f), this.optionsFor(u, l), d), m = {
 					rowKey: l.key,
 					columnKey: u.key,
 					row: l.data,
@@ -594,16 +612,34 @@ var Re = class {
 				return;
 			}
 			Object.is(e.value, e.oldValue) || (this.values.set(B(e.rowKey, e.columnKey), e.value), a.push(e));
-		}), a.length > 0 && (this._edits = [...this._edits, ...a]), this.grid.notify(), a.length > 0 && this.grid.props.onCellEditsChange?.(this._edits, { reason: "paste" }), this.grid.props.onPaste?.({
-			range: this.grid.range.rangeOf(t),
+		}), a.length > 0 && (this._edits = [...this._edits, ...a]), this.grid.notify(), a.length > 0 && this.grid.props.onCellEditsChange?.(this._edits, { reason: "paste" });
+		let s = this.grid.range.rangeOf(t);
+		this.grid.props.onPaste?.({
+			range: s,
 			applied: a,
 			rejected: o,
 			skipped: i
 		});
+		let c = a.map(({ rowKey: e, columnKey: t, value: n, oldValue: r }) => ({
+			rowKey: e,
+			columnKey: t,
+			value: n,
+			oldValue: r
+		})), { startRow: l, endRow: u, columns: d } = s;
+		this.grid.reportInteraction("paste", a.length, "paste", {
+			range: {
+				startRow: l,
+				endRow: u,
+				columns: d
+			},
+			rejected: o.length,
+			skipped: i,
+			cells: c
+		}, ["cells"]);
 	}
 	nextEditable(e, t, n = !1) {
-		let r = this.grid.flatRows.value, i = this.grid.columns.value.visibleLeafs, a = n ? -1 : 1, o = e * i.length + t + a, s = Math.min(r.length * i.length - 1, o + Ee);
-		for (let e = o; e >= Math.max(0, o - Ee) && e <= s; e += a) {
+		let r = this.grid.flatRows.value, i = this.grid.columns.value.visibleLeafs, a = n ? -1 : 1, o = e * i.length + t + a, s = Math.min(r.length * i.length - 1, o + Oe);
+		for (let e = o; e >= Math.max(0, o - Oe) && e <= s; e += a) {
 			let t = Math.floor(e / i.length), n = e % i.length, a = r[t], o = i[n];
 			if (!(!o || a?.kind !== "row" || !this.isEditable(a, o))) return {
 				row: t,
@@ -676,7 +712,12 @@ var Re = class {
 		this.grid.edits.commit();
 	};
 	cancelEdit = () => {
-		this.grid.edits.cancel();
+		if (!this.grid.edits.isOpen) return;
+		let { draft: e } = this.grid.edits;
+		this.grid.edits.cancel(), this.grid.reportInteraction("cellEditCancel", e, "cancel", {
+			rowKey: this.row.key,
+			columnKey: this.column.key
+		}, ["value"]);
 	};
 }, H = class e {
 	grid;
@@ -777,42 +818,42 @@ function W(e) {
 }
 //#endregion
 //#region src/components/dataGrid/useGridNavigation.ts
-var ze = "[role=\"gridcell\"],[role=\"columnheader\"]", Be = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]", Ve = 2, He = [];
-function Ue(e) {
-	let { grid: t, scrollerRef: n, scroll: i, onScrollTo: a } = e, o = t.headerRows.value, c = t.filter.hasFilterableColumns, u = o.length + +!!c, d = t.viewport.isEmpty ? He : t.flatRows.value, f = t.columns.value.visibleLeafs.length, p = t.aggregation.hasFooter && !t.viewport.isEmpty ? 1 : 0, m = u + d.length + p, h = O((e) => {
+var He = "[role=\"gridcell\"],[role=\"columnheader\"]", Ue = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]", We = 2, Ge = [];
+function Ke(e) {
+	let { grid: t, scrollerRef: n, scroll: i, onScrollTo: a } = e, o = t.headerRows.value, s = t.filter.hasFilterableColumns, l = o.length + +!!s, d = t.viewport.isEmpty ? Ge : t.flatRows.value, f = t.columns.value.visibleLeafs.length, p = t.aggregation.hasFooter && !t.viewport.isEmpty ? 1 : 0, m = l + d.length + p, h = j((e) => {
 		if (e < o.length) return o[e]?.length ?? 0;
-		if (e < u || e >= u + d.length) return f;
-		let t = d[e - u];
+		if (e < l || e >= l + d.length) return f;
+		let t = d[e - l];
 		return t ? t.cellCount : 0;
 	}, [
 		d,
 		f,
-		u,
+		l,
 		o
-	]), g = O((e, t) => e < o.length ? (o[e]?.[t]?.headerCell.columnIndex ?? t + 1) - 1 : e < u ? t : d[e - u]?.columnOf(t) ?? t, [
+	]), g = j((e, t) => e < o.length ? (o[e]?.[t]?.headerCell.columnIndex ?? t + 1) - 1 : e < l ? t : d[e - l]?.columnOf(t) ?? t, [
 		d,
-		u,
+		l,
 		o
-	]), _ = N(!1), v = O((e, r) => {
-		let { viewport: o } = t, s = e - u, c = n.current;
+	]), _ = P(!1), v = j((e, r) => {
+		let { viewport: o } = t, s = e - l, c = n.current;
 		if (o.showAll || !c || s >= d.length) return;
 		if (s < 0) {
-			r >= u && (c.scrollTop = 0, a(0));
+			r >= l && (c.scrollTop = 0, a(0));
 			return;
 		}
-		let { startIndex: l, take: f } = o.window(i.top, i.direction);
-		if (s >= l + Ve && s < l + f - Ve) return;
+		let { startIndex: u, take: f } = o.window(i.top, i.direction);
+		if (s >= u + We && s < u + f - We) return;
 		let p = o.rowTop(s);
 		c.scrollTop = p, a(p);
 	}, [
 		d.length,
 		t,
-		u,
+		l,
 		a,
 		i,
 		n
-	]), y = N(0), b = O((e, n, r) => {
-		let i = e - u;
+	]), y = P(0), b = j((e, n, r) => {
+		let i = e - l;
 		if (i < 0 || i >= d.length) {
 			t.range.clear();
 			return;
@@ -826,8 +867,8 @@ function Ue(e) {
 		d.length,
 		g,
 		t,
-		u
-	]), x = l({
+		l
+	]), x = u({
 		count: m,
 		columns: h,
 		columnIndexOf: g,
@@ -840,23 +881,23 @@ function Ue(e) {
 	r(() => {
 		_.current && (_.current = !1, S()?.focus());
 	});
-	let C = O((e, n, r) => {
+	let C = j((e, n, r) => {
 		if (!t.tree.enabled || e.key !== "ArrowRight" && e.key !== "ArrowLeft") return !1;
-		let i = d[n - u];
+		let i = d[n - l];
 		if (!W(i) || t.columns.value.visibleLeafs[r]?.key !== t.tree.columnKey) return !1;
 		if (e.key === (t.isRtl ? "ArrowLeft" : "ArrowRight")) return !i.hasChildren || i.treeExpanded ? !1 : (i.toggleTree(), !0);
 		if (i.hasChildren && i.treeExpanded) return i.toggleTree(), !0;
-		for (let e = n - 1; e >= u; e--) {
-			let t = d[e - u];
+		for (let e = n - 1; e >= l; e--) {
+			let t = d[e - l];
 			if (!(!W(t) || t.level >= i.level)) return x.setActiveCell(e, r, { reason: "keyboard" }), !0;
 		}
 		return !1;
 	}, [
 		d,
 		t,
-		u,
+		l,
 		x
-	]), w = O((e) => {
+	]), w = j((e) => {
 		let { activeIndex: t, activeColumn: n } = x, r = e ? -1 : 1, i = n + r;
 		if (i >= 0 && i < h(t)) return x.setActiveCell(t, i, { reason: "keyboard" }), !0;
 		let a = t + r;
@@ -865,29 +906,29 @@ function Ue(e) {
 		h,
 		x,
 		m
-	]), T = O((e, n) => {
+	]), T = j((e, n) => {
 		if (!t.props.def.rowSelection) return !1;
-		if (e < u) return e >= o.length || !t.columns.value.visibleLeafs[n]?.isRowSelection ? !1 : (t.toggleSelectAllRows(), !0);
-		let r = t.flatRows.value[e - u];
+		if (e < l) return e >= o.length || !t.columns.value.visibleLeafs[n]?.isRowSelection ? !1 : (t.toggleSelectAllRows(), !0);
+		let r = t.flatRows.value[e - l];
 		return r instanceof U && (r.toggleSelection(), !0);
 	}, [
 		t,
-		u,
+		l,
 		o.length
-	]), ee = O((e, t, n) => {
-		let r = Array.from(e.querySelectorAll(Be));
+	]), E = j((e, t, n) => {
+		let r = Array.from(e.querySelectorAll(Ue));
 		if (r.length < 2) return !1;
 		let i = r.indexOf(t);
 		return i !== -1 && (r[(i + (n ? -1 : 1) + r.length) % r.length].focus(), !0);
-	}, []), te = x.onKeyDown, ne = O((e) => {
-		let n = e.target, r = n.closest?.(ze);
+	}, []), ee = x.onKeyDown, D = j((e) => {
+		let n = e.target, r = n.closest?.(He);
 		if (r) {
 			if (n !== r) {
 				if (e.key === "Escape" && !r.querySelector("[aria-expanded=\"true\"]")) {
 					e.preventDefault(), r.focus();
 					return;
 				}
-				e.key === "Tab" && ee(r, n, e.shiftKey) && e.preventDefault();
+				e.key === "Tab" && E(r, n, e.shiftKey) && e.preventDefault();
 				return;
 			}
 			if (e.key === "Tab" && t.props.def.tabNavigation === "cells") {
@@ -904,17 +945,17 @@ function Ue(e) {
 					e.preventDefault(), n.sortColumn();
 					return;
 				}
-				if (t.edits.beginAt(x.activeIndex - u, x.activeColumn)) {
+				if (t.edits.beginAt(x.activeIndex - l, x.activeColumn)) {
 					e.preventDefault();
 					return;
 				}
-				let i = r.querySelector(Be);
+				let i = r.querySelector(Ue);
 				if (i) {
 					e.preventDefault(), i.focus();
 					return;
 				}
 			}
-			if (t.edits.enabled && Le(e) && t.edits.beginAt(x.activeIndex - u, x.activeColumn, e.key)) {
+			if (t.edits.enabled && Be(e) && t.edits.beginAt(x.activeIndex - l, x.activeColumn, e.key)) {
 				e.preventDefault();
 				return;
 			}
@@ -922,26 +963,26 @@ function Ue(e) {
 				e.preventDefault();
 				return;
 			}
-			te(e);
+			ee(e);
 		}
 	}, [
 		t,
-		u,
+		l,
 		o,
 		x.activeColumn,
 		x.activeIndex,
-		te,
-		w,
 		ee,
+		w,
+		E,
 		T,
 		C
-	]), { setActiveCell: E, activeIndex: D, activeColumn: k } = x, A = s(x.cellProps), [j] = P(() => new be(D, k));
-	r(() => j.set(D, k), [
-		j,
+	]), { setActiveCell: te, activeIndex: O, activeColumn: k } = x, A = c(x.cellProps), [M] = F(() => new Se(O, k));
+	r(() => M.set(O, k), [
+		M,
 		k,
-		D
+		O
 	]);
-	let re = O((e, t) => {
+	let N = j((e, t) => {
 		let { ref: n, onFocus: r } = A.current(e, t);
 		return {
 			ref: n,
@@ -949,27 +990,27 @@ function Ue(e) {
 		};
 	}, [A]);
 	return {
-		navigation: M(() => ({
+		navigation: ie(() => ({
 			rowCount: m,
 			columnCount: f,
-			headerRowCount: u,
-			cellProps: re,
-			activeCell: j,
-			setActiveCell: E
+			headerRowCount: l,
+			cellProps: N,
+			activeCell: M,
+			setActiveCell: te
 		}), [
-			j,
-			re,
+			M,
+			N,
 			f,
-			u,
+			l,
 			m,
-			E
+			te
 		]),
-		onKeyDown: ne
+		onKeyDown: D
 	};
 }
 //#endregion
 //#region src/utils/array/arrayUtils.ts
-var We;
+var qe;
 (function(e) {
 	function t(e, t, n = 0) {
 		return e.slice(n, n + t);
@@ -1016,11 +1057,11 @@ var We;
 		}));
 	}
 	e.groupBy = s;
-})(We ||= {});
-var G = We, Ge = "row-number-cell", Ke = "row-selection-cell", K = "grouping-cell", qe = "row-detail-cell", Je = Symbol("memo.unset"), Ye = class {
+})(qe ||= {});
+var G = qe, Je = "row-number-cell", Ye = "row-selection-cell", K = "grouping-cell", Xe = "row-detail-cell", Ze = Symbol("memo.unset"), Qe = class {
 	action;
 	deps;
-	cache = Je;
+	cache = Ze;
 	dependents = /* @__PURE__ */ new Set();
 	wired = !1;
 	constructor(e, t) {
@@ -1033,46 +1074,46 @@ var G = We, Ge = "row-number-cell", Ke = "row-selection-cell", K = "grouping-cel
 		}
 	}
 	get value() {
-		return this.wire(), this.cache === Je && (this.cache = this.action()), this.cache;
+		return this.wire(), this.cache === Ze && (this.cache = this.action()), this.cache;
 	}
 	clear() {
-		if (this.wire(), this.cache !== Je) {
-			this.cache = Je;
+		if (this.wire(), this.cache !== Ze) {
+			this.cache = Ze;
 			for (let e of this.dependents) e.clear();
 		}
 	}
 };
 function q(e, t = () => []) {
-	return new Ye(e, t);
+	return new Qe(e, t);
 }
 //#endregion
 //#region src/components/dataGrid/models/aggregationModel.ts
-function Xe(e) {
+function $e(e) {
 	return e.filter((e) => typeof e == "number" && !Number.isNaN(e));
 }
-var Ze = (e) => e.reduce((e, t) => e + t, 0), Qe = (e, t) => e.reduce((e, n) => (t ? n < e : n > e) ? n : e), $e = {
+var et = (e) => e.reduce((e, t) => e + t, 0), tt = (e, t) => e.reduce((e, n) => (t ? n < e : n > e) ? n : e), nt = {
 	sum: (e) => {
-		let t = Xe(e);
-		return t.length ? Ze(t) : null;
+		let t = $e(e);
+		return t.length ? et(t) : null;
 	},
 	avg: (e) => {
-		let t = Xe(e);
-		return t.length ? Math.round(Ze(t) / t.length * 100) / 100 : null;
+		let t = $e(e);
+		return t.length ? Math.round(et(t) / t.length * 100) / 100 : null;
 	},
 	min: (e) => {
-		let t = Xe(e);
-		return t.length ? Qe(t, !0) : null;
+		let t = $e(e);
+		return t.length ? tt(t, !0) : null;
 	},
 	max: (e) => {
-		let t = Xe(e);
-		return t.length ? Qe(t, !1) : null;
+		let t = $e(e);
+		return t.length ? tt(t, !1) : null;
 	},
 	count: (e, t) => t.length
 };
-function et(e, t, n) {
-	return typeof e == "function" ? e(t, n) : $e[e]?.(t, n) ?? null;
+function rt(e, t, n) {
+	return typeof e == "function" ? e(t, n) : nt[e]?.(t, n) ?? null;
 }
-var tt = class {
+var it = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -1093,8 +1134,8 @@ var tt = class {
 	get footerLabelColumn() {
 		return this.grid.columns.value.visibleLeafs.find((e) => (e.isData || e.isGrouping) && !e.aggregate);
 	}
-	footerCells = q(() => this.grid.columns.value.visibleLeafs.map((e) => new nt(this.grid, e, this.grid.filteredData, "footer")), () => [this.grid.rows]);
-}, nt = class {
+	footerCells = q(() => this.grid.columns.value.visibleLeafs.map((e) => new at(this.grid, e, this.grid.filteredData, "footer")), () => [this.grid.rows]);
+}, at = class {
 	grid;
 	column;
 	rows;
@@ -1109,7 +1150,7 @@ var tt = class {
 	}
 	_value = q(() => {
 		let e = this.column.aggregate;
-		return e ? et(e, this.values, this.rows) : null;
+		return e ? rt(e, this.values, this.rows) : null;
 	});
 	get value() {
 		let e = this.given?.();
@@ -1124,7 +1165,7 @@ var tt = class {
 	get isLast() {
 		return !1;
 	}
-}, rt = class {
+}, ot = class {
 	grid;
 	row;
 	column;
@@ -1146,7 +1187,7 @@ var tt = class {
 	get cellKind() {
 		return this.column.isGrouping ? "grouping" : this.column.isRowSelection ? this.row.selectable ? "selection" : "spacer" : this.row.spans(this.column) ? "hidden" : this.column.aggregate ? "aggregate" : "spacer";
 	}
-	_aggregate = q(() => this.column.aggregate ? new nt(this.grid, this.column, this.row.allRows.map((e) => e.data), "group", () => this.row.aggregateValue(this.column)) : null);
+	_aggregate = q(() => this.column.aggregate ? new at(this.grid, this.column, this.row.allRows.map((e) => e.data), "group", () => this.row.aggregateValue(this.column)) : null);
 	get aggregate() {
 		return this._aggregate.value;
 	}
@@ -1165,7 +1206,7 @@ var tt = class {
 	get hasGroupingBorder() {
 		return this.row.groupingColumn.pin === "START";
 	}
-}, it = class {
+}, st = class {
 	grid;
 	groupColumn;
 	rows;
@@ -1199,7 +1240,7 @@ var tt = class {
 		let e = this.grid.columns.value.visibleLeafs;
 		return this._cells?.leafs !== e && (this._cells = {
 			leafs: e,
-			cells: e.map((e) => new rt(this.grid, this, e))
+			cells: e.map((e) => new ot(this.grid, this, e))
 		}), this._cells;
 	}
 	get renderedCells() {
@@ -1257,13 +1298,13 @@ var tt = class {
 };
 //#endregion
 //#region src/components/dataGrid/components/dataGridDetailRow.tsx
-function at(e) {
-	let { row: t, index: n } = e, { grid: a, parentRow: o } = t, s = a.props.def.rowDetail, c = z(), l = (c?.headerRowCount ?? 0) + n, { ref: u, tabIndex: d, onFocus: f } = ve(c, l, 0), p = t.isAutoHeight, m = N(null);
+function ct(e) {
+	let { row: t, index: n } = e, { grid: i, parentRow: o } = t, s = i.props.def.rowDetail, c = z(), l = (c?.headerRowCount ?? 0) + n, { ref: u, tabIndex: d, onFocus: f } = be(c, l, 0), p = t.isAutoHeight, m = P(null);
 	return r(() => {
-		a.takeDetailReveal(o.key) && m.current?.scrollIntoView?.({ block: "nearest" });
-	}), /* @__PURE__ */ I(h, {
+		i.takeDetailReveal(o.key) && m.current?.scrollIntoView?.({ block: "nearest" });
+	}), /* @__PURE__ */ L(_, {
 		ref: m,
-		component: `${a.componentName}.body.detailRow`,
+		component: `${i.componentName}.body.detailRow`,
 		transition: "none",
 		props: {
 			role: "row",
@@ -1273,9 +1314,9 @@ function at(e) {
 			gridColumn: "1 / -1",
 			height: p ? "auto" : `${t.height}px`
 		},
-		children: /* @__PURE__ */ I(i, {
+		children: /* @__PURE__ */ L(a, {
 			ref: u,
-			component: `${a.componentName}.body.detailRow.content`,
+			component: `${i.componentName}.body.detailRow.content`,
 			position: "sticky",
 			insetStart: 0,
 			overflowX: "auto",
@@ -1288,20 +1329,20 @@ function at(e) {
 				tabIndex: d,
 				onFocus: f
 			},
-			style: { width: `var(${a.viewportWidthVarName})` },
+			style: { width: `var(${i.viewportWidthVarName})` },
 			children: s.content(o.data)
 		})
 	});
 }
-at.displayName = "DataGridDetailRow";
-var ot = D(at);
+ct.displayName = "DataGridDetailRow";
+var lt = A(ct);
 //#endregion
 //#region src/components/dataGrid/components/dataGridAggregateValue.tsx
-function st(e) {
+function ut(e) {
 	let { cell: t } = e, { column: n } = t;
-	if (n.AggregateCell) return /* @__PURE__ */ I(n.AggregateCell, { cell: t });
+	if (n.AggregateCell) return /* @__PURE__ */ L(n.AggregateCell, { cell: t });
 	let r = t.scope === "footer" ? "footer.cell" : "body.groupRow.aggregate";
-	return /* @__PURE__ */ I(i, {
+	return /* @__PURE__ */ L(a, {
 		component: `${n.grid.componentName}.${r}`,
 		px: 3,
 		textOverflow: "ellipsis",
@@ -1310,12 +1351,12 @@ function st(e) {
 		children: t.value
 	});
 }
-st.displayName = "DataGridAggregateValue";
+ut.displayName = "DataGridAggregateValue";
 //#endregion
 //#region src/components/dataGrid/components/dataGridCell.tsx
-var ct = "button,a[href],input,select,textarea";
-function J(e) {
-	let { children: t, cell: r, row: i, columnIndex: a, ariaColIndex: o, ariaColSpan: s, style: c, ...l } = e, { column: u } = r, d = z(), { ref: f, tabIndex: p, onFocus: m } = ve(d, i, a), { range: g } = u.grid, _ = r instanceof V ? i - (d?.headerRowCount ?? 0) : -1, v = _ >= 0 && g.isCurrent(_, a), y = _ >= 0 && g.isSelected(_, a);
+var dt = "button,a[href],input,select,textarea";
+function J(t) {
+	let { children: n, cell: r, row: i, columnIndex: a, ariaColIndex: o, ariaColSpan: s, style: c, ...l } = t, { column: u } = r, d = z(), { ref: f, tabIndex: p, onFocus: m } = be(d, i, a), { range: h } = u.grid, g = r instanceof V ? i - (d?.headerRowCount ?? 0) : -1, v = g >= 0 && h.isCurrent(g, a), y = g >= 0 && h.isSelected(g, a);
 	u.hasAlign && (l.jc = u.align);
 	let b = r.isExpanded ? {
 		...u.cellVariant.value,
@@ -1337,14 +1378,14 @@ function J(e) {
 		...b,
 		isInvalid: !0
 	});
-	let S = r instanceof V ? (e) => {
-		e.target.closest(ct) || (n(e.currentTarget), r.beginEdit());
-	} : void 0, C = g.enabled && _ >= 0, w = C ? (e) => {
-		e.button === 0 && e.pointerType !== "touch" && (e.target.closest(ct) || g.press(_, a, e.shiftKey));
-	} : void 0, T = C && g.isDragging ? (e) => {
-		g.dragTo(_, a), e.currentTarget.focus();
+	let S = r instanceof V ? (t) => {
+		t.target.closest(dt) || (e(t.currentTarget), r.beginEdit());
+	} : void 0, C = h.enabled && g >= 0, w = C ? (e) => {
+		e.button === 0 && e.pointerType !== "touch" && (e.target.closest(dt) || h.press(g, a, e.shiftKey));
+	} : void 0, T = C && h.isDragging ? (e) => {
+		h.dragTo(g, a), e.currentTarget.focus();
 	} : void 0;
-	return /* @__PURE__ */ I(h, {
+	return /* @__PURE__ */ L(_, {
 		ref: f,
 		component: `${u.grid.componentName}.body.cell`,
 		props: {
@@ -1365,31 +1406,31 @@ function J(e) {
 			...c
 		},
 		...l,
-		children: t
+		children: n
 	});
 }
 J.displayName = "DataGridCell";
 //#endregion
 //#region src/components/dataGrid/components/dataGridFooter.tsx
-function lt(e) {
+function ft(e) {
 	let { grid: t } = e, { aggregation: n } = t, r = z();
 	if (!n.hasFooter) return null;
-	let a = (r?.rowCount ?? 1) - 1, { footerLabelColumn: o, footerLabel: s } = n;
-	return /* @__PURE__ */ I(x, {
+	let i = (r?.rowCount ?? 1) - 1, { footerLabelColumn: o, footerLabel: s } = n;
+	return /* @__PURE__ */ L(C, {
 		component: `${t.componentName}.footer`,
 		props: { role: "rowgroup" },
 		style: { gridTemplateColumns: t.gridTemplateColumns.value },
-		children: /* @__PURE__ */ I(i, {
+		children: /* @__PURE__ */ L(a, {
 			display: "contents",
 			props: {
 				role: "row",
-				"aria-rowindex": a + 1
+				"aria-rowindex": i + 1
 			},
-			children: n.footerCells.value.map((e, n) => /* @__PURE__ */ I(J, {
+			children: n.footerCells.value.map((e, n) => /* @__PURE__ */ L(J, {
 				cell: e,
-				row: a,
+				row: i,
 				columnIndex: n,
-				children: e.column.aggregate ? /* @__PURE__ */ I(st, { cell: e }) : e.column === o ? /* @__PURE__ */ I(i, {
+				children: e.column.aggregate ? /* @__PURE__ */ L(ut, { cell: e }) : e.column === o ? /* @__PURE__ */ L(a, {
 					component: `${t.componentName}.footer.label`,
 					px: 3,
 					textWrap: "nowrap",
@@ -1399,16 +1440,16 @@ function lt(e) {
 		})
 	});
 }
-lt.displayName = "DataGridFooter";
+ft.displayName = "DataGridFooter";
 //#endregion
 //#region src/icons/expandIcon.tsx
 function Y(e) {
-	return /* @__PURE__ */ I(f, {
+	return /* @__PURE__ */ L(m, {
 		viewBox: "4 2 16 18",
 		width: "1rem",
 		fill: "currentColor",
 		...e,
-		children: /* @__PURE__ */ I(d, {
+		children: /* @__PURE__ */ L(p, {
 			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" }
@@ -1417,32 +1458,32 @@ function Y(e) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridCellPlaceholder.tsx
-var ut = [
+var pt = [
 	"3/5",
 	"2/5",
 	"4/5",
 	"1/2",
 	"7/12"
 ];
-function dt(e) {
-	let { cell: t, columnIndex: n } = e, r = ut[(t.row.rowIndex + n) % ut.length];
-	return /* @__PURE__ */ I(h, {
+function mt(e) {
+	let { cell: t, columnIndex: n } = e, r = pt[(t.row.rowIndex + n) % pt.length];
+	return /* @__PURE__ */ L(_, {
 		component: `${t.grid.componentName}.body.cell.placeholder`,
 		ai: "center",
 		px: 3,
 		props: { "aria-hidden": !0 },
-		children: /* @__PURE__ */ I(i, {
+		children: /* @__PURE__ */ L(a, {
 			component: `${t.grid.componentName}.body.cell.placeholder.bar`,
 			width: r
 		})
 	});
 }
-dt.displayName = "DataGridCellPlaceholder";
+mt.displayName = "DataGridCellPlaceholder";
 //#endregion
 //#region src/components/dataGrid/components/dataGridGroupRow.tsx
-function ft(e) {
-	let { row: t, index: n } = e, { selected: r, indeterminate: a, expanded: o, placeholder: s } = t, c = (z()?.headerRowCount ?? 0) + n, l = O(() => t.toggleSelectAll(), [t]);
-	return /* @__PURE__ */ I(h, {
+function ht(e) {
+	let { row: t, index: n } = e, { selected: r, indeterminate: i, expanded: o, placeholder: s } = t, c = (z()?.headerRowCount ?? 0) + n, l = j(() => t.toggleSelectAll(), [t]);
+	return /* @__PURE__ */ L(_, {
 		component: `${t.grid.componentName}.body.groupRow`,
 		className: "grid-row",
 		selected: t.grid.props.def.rowSelection ? r : void 0,
@@ -1455,7 +1496,7 @@ function ft(e) {
 		},
 		children: t.renderedCells.map(({ cell: e, columnIndex: n }, u) => {
 			switch (e.cellKind) {
-				case "grouping": return /* @__PURE__ */ I(J, {
+				case "grouping": return /* @__PURE__ */ L(J, {
 					cell: e,
 					row: c,
 					columnIndex: u,
@@ -1469,13 +1510,13 @@ function ft(e) {
 					gridColumn: e.gridColumnSpan,
 					ps: e.depthPadding,
 					overflow: "auto",
-					children: s ? /* @__PURE__ */ I(dt, {
+					children: s ? /* @__PURE__ */ L(mt, {
 						cell: e,
 						columnIndex: u
-					}) : /* @__PURE__ */ I(i, {
+					}) : /* @__PURE__ */ L(a, {
 						textWrap: "nowrap",
 						px: 3,
-						children: /* @__PURE__ */ L(p, {
+						children: /* @__PURE__ */ R(h, {
 							component: `${t.grid.componentName}.body.groupRow.expandButton`,
 							onClick: () => t.toggleRow(),
 							cursor: "pointer",
@@ -1486,7 +1527,7 @@ function ft(e) {
 								tabIndex: -1,
 								"aria-expanded": o
 							},
-							children: [/* @__PURE__ */ I(Y, {
+							children: [/* @__PURE__ */ L(Y, {
 								fill: "currentColor",
 								width: "14px",
 								height: "14px",
@@ -1495,16 +1536,16 @@ function ft(e) {
 						})
 					})
 				}, e.column.key);
-				case "selection": return /* @__PURE__ */ I(J, {
+				case "selection": return /* @__PURE__ */ L(J, {
 					cell: e,
 					row: c,
 					columnIndex: u,
 					ariaColIndex: n + 1,
-					children: /* @__PURE__ */ I(g, {
+					children: /* @__PURE__ */ L(v, {
 						variant: "datagrid",
 						m: 1,
 						checked: r,
-						indeterminate: a,
+						indeterminate: i,
 						onChange: l,
 						props: {
 							tabIndex: -1,
@@ -1512,14 +1553,14 @@ function ft(e) {
 						}
 					})
 				}, e.column.key);
-				case "aggregate": return /* @__PURE__ */ I(J, {
+				case "aggregate": return /* @__PURE__ */ L(J, {
 					cell: e,
 					row: c,
 					columnIndex: u,
 					ariaColIndex: n + 1,
-					children: e.aggregate && /* @__PURE__ */ I(st, { cell: e.aggregate })
+					children: e.aggregate && /* @__PURE__ */ L(ut, { cell: e.aggregate })
 				}, e.column.key);
-				case "spacer": return /* @__PURE__ */ I(J, {
+				case "spacer": return /* @__PURE__ */ L(J, {
 					cell: e,
 					row: c,
 					columnIndex: u,
@@ -1532,21 +1573,21 @@ function ft(e) {
 		})
 	});
 }
-ft.displayName = "DataGridGroupRow";
-var pt = D(ft), mt = "input:not([type=\"hidden\"]),select,textarea,button,[role=\"spinbutton\"]";
-function ht(e) {
+ht.displayName = "DataGridGroupRow";
+var gt = A(ht), _t = "input:not([type=\"hidden\"]),select,textarea,button,[role=\"spinbutton\"]";
+function vt(e) {
 	let { options: t } = e.editor;
 	return typeof t == "function" ? t(e.row.data) : t ?? [];
 }
-function gt(e) {
-	let { cell: t, row: n, columnIndex: i } = e, { grid: a } = t, o = z(), s = N(null), c = u("datagrid-cell-error"), { error: l, pending: d } = t;
+function yt(e) {
+	let { cell: t, row: n, columnIndex: i } = e, { grid: a } = t, o = z(), s = P(null), c = d("datagrid-cell-error"), { error: l, pending: u } = t;
 	r(() => {
-		let e = s.current?.querySelector(mt);
+		let e = s.current?.querySelector(_t);
 		e?.focus(), e instanceof HTMLInputElement && e.type !== "checkbox" && e.select();
 	}, []);
-	let f = O(() => {
+	let f = j(() => {
 		s.current?.closest("[role=\"gridcell\"]")?.focus();
-	}, []), p = O((e) => {
+	}, []), p = j((e) => {
 		if (!o) return;
 		let t = a.edits.nextEditable(n - o.headerRowCount, i, e.shiftKey);
 		t && (e.preventDefault(), o.setActiveCell(t.row + o.headerRowCount, t.column, { reason: "programmatic" }), a.edits.beginAt(t.row, t.column));
@@ -1555,7 +1596,7 @@ function gt(e) {
 		a,
 		o,
 		n
-	]), m = O((e) => {
+	]), m = j((e) => {
 		if (e.key === "Escape") {
 			if (s.current?.querySelector("[aria-expanded=\"true\"]")) return;
 			e.preventDefault(), e.stopPropagation(), t.cancelEdit(), f();
@@ -1576,23 +1617,23 @@ function gt(e) {
 		t,
 		f,
 		p
-	]), g = O(() => {
+	]), h = j(() => {
 		!t.editing || t.pending || t.commitEdit();
 	}, [t]);
-	return /* @__PURE__ */ L(h, {
+	return /* @__PURE__ */ R(_, {
 		ref: s,
 		component: `${a.componentName}.body.cell.editor`,
-		variant: { isPending: d },
+		variant: { isPending: u },
 		props: { onKeyDown: m },
 		width: "fit",
 		height: "fit",
 		ai: "center",
-		children: [/* @__PURE__ */ I(_t, {
+		children: [/* @__PURE__ */ L(bt, {
 			cell: t,
 			errorId: l ? c : void 0,
-			onBlur: g,
+			onBlur: h,
 			onCommitted: f
-		}), l && /* @__PURE__ */ I(_, {
+		}), l && /* @__PURE__ */ L(y, {
 			anchor: s,
 			side: "bottom",
 			align: "start",
@@ -1605,24 +1646,24 @@ function gt(e) {
 		})]
 	});
 }
-function _t(e) {
-	let { cell: t, errorId: n, onBlur: r, onCommitted: i } = e, { EditCell: a } = t.column.def, { type: o, placeholder: s, step: c, min: l, max: u } = t.editor, d = t.column.header ?? t.column.key, f = {
+function bt(e) {
+	let { cell: t, errorId: n, onBlur: r, onCommitted: i } = e, { EditCell: a } = t.column.def, { type: o, placeholder: s, step: c, min: l, max: u } = t.editor, d = t.column.header ?? t.column.key, p = {
 		"aria-label": t.grid.localeText.editCell(String(d)),
 		"aria-invalid": n ? !0 : void 0,
 		"aria-describedby": n
-	}, p = Te(Me(o));
-	if (a) return /* @__PURE__ */ I(a, { cell: t });
-	if (o === "checkbox") return /* @__PURE__ */ I(g, {
+	}, m = De(Pe(o));
+	if (a) return /* @__PURE__ */ L(a, { cell: t });
+	if (o === "checkbox") return /* @__PURE__ */ L(v, {
 		checked: !!t.draft,
 		onChange: (e) => {
 			t.setDraft(e.target.checked), t.commitEdit(), i();
 		},
 		props: {
-			...f,
+			...p,
 			onBlur: r
 		}
 	});
-	if (o === "select") return /* @__PURE__ */ I(S, {
+	if (o === "select") return /* @__PURE__ */ L(f, { children: /* @__PURE__ */ L(w, {
 		value: t.draft,
 		defaultOpen: !0,
 		width: "fit",
@@ -1633,21 +1674,21 @@ function _t(e) {
 		onValueChange: (e) => {
 			t.setDraft(e ?? null), t.commitEdit(), i();
 		},
-		props: f,
-		children: ht(t).map((e) => /* @__PURE__ */ I(S.Item, {
+		props: p,
+		children: vt(t).map((e) => /* @__PURE__ */ L(w.Item, {
 			value: e.value,
 			children: e.label ?? String(e.value)
 		}, String(e.value)))
-	});
-	if (Me(o)) return p ? /* @__PURE__ */ I(p.DateEditor, {
+	}) });
+	if (Pe(o)) return m ? /* @__PURE__ */ L(m.DateEditor, {
 		cell: t,
-		label: f["aria-label"],
+		label: p["aria-label"],
 		errorId: n,
 		onBlur: r
 	}) : null;
-	let m = o === "number";
-	return /* @__PURE__ */ I(y, {
-		type: m ? "number" : "text",
+	let h = o === "number";
+	return /* @__PURE__ */ L(x, {
+		type: h ? "number" : "text",
 		value: t.draft === null || t.draft === void 0 ? "" : String(t.draft),
 		placeholder: s,
 		step: c,
@@ -1658,94 +1699,94 @@ function _t(e) {
 		focus: { outline: 0 },
 		onChange: (e) => {
 			let n = e.target.value;
-			t.setDraft(m ? n === "" ? null : Number(n) : n);
+			t.setDraft(h ? n === "" ? null : Number(n) : n);
 		},
 		props: {
-			...f,
+			...p,
 			min: l,
 			max: u,
 			onBlur: r
 		}
 	});
 }
-gt.displayName = "DataGridCellEditor";
+yt.displayName = "DataGridCellEditor";
 //#endregion
 //#region src/components/dataGrid/components/dataGridBooleanValue.tsx
-function vt(e) {
+function xt(e) {
 	let { value: t, text: n } = e;
-	return /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I(f, {
+	return /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L(m, {
 		viewBox: "0 0 16 16",
 		width: "1rem",
 		height: "1rem",
 		css: { verticalAlign: "middle" },
-		color: t ? void 0 : "gray-400",
+		color: t ? void 0 : "base-400",
 		props: { fill: "none" },
-		children: /* @__PURE__ */ I(d, {
+		children: /* @__PURE__ */ L(p, {
 			d: t ? "m3.5 8.5 3 3 6-7" : "m5 5 6 6m0-6-6 6",
 			stroke: "currentColor",
 			strokeWidth: 1.75,
 			strokeLinecap: "round",
 			strokeLinejoin: "round"
 		})
-	}), /* @__PURE__ */ I(m, {
+	}), /* @__PURE__ */ L(g, {
 		tag: "span",
 		children: t ? n.booleanTrue : n.booleanFalse
 	})] });
 }
-vt.displayName = "DataGridBooleanValue";
+xt.displayName = "DataGridBooleanValue";
 //#endregion
 //#region src/components/dataGrid/components/dataGridDateValue.tsx
-function yt(e, t) {
+function St(e, t) {
 	if (e.def.dateFormat) return e.def.dateFormat;
 	let { editor: n } = e.def, r = typeof n == "object" ? n.type : n;
-	return r && Me(r) ? r : t instanceof Date ? "datetime" : null;
+	return r && Pe(r) ? r : t instanceof Date ? "datetime" : null;
 }
-function bt(e) {
-	let { value: t, format: n } = e, r = Te(!0);
-	return r ? /* @__PURE__ */ I(r.DateValue, {
+function Ct(e) {
+	let { value: t, format: n } = e, r = De(!0);
+	return r ? /* @__PURE__ */ L(r.DateValue, {
 		value: t,
 		format: n
-	}) : /* @__PURE__ */ I(F, { children: t instanceof Date ? t.toISOString() : t == null ? "" : String(t) });
+	}) : /* @__PURE__ */ L(I, { children: t instanceof Date ? t.toISOString() : t == null ? "" : String(t) });
 }
-bt.displayName = "DataGridDateValue";
+Ct.displayName = "DataGridDateValue";
 //#endregion
 //#region src/components/dataGrid/components/dataGridCellText.tsx
-function xt(e) {
-	let { cell: t } = e, { value: n } = t, r = yt(t.column, n);
-	return /* @__PURE__ */ I(h, {
+function wt(e) {
+	let { cell: t } = e, { value: n } = t, r = St(t.column, n);
+	return /* @__PURE__ */ L(_, {
 		component: `${t.grid.componentName}.body.cell.text`,
 		height: "fit",
 		width: "fit",
 		overflow: "auto",
 		ai: "center",
 		jc: t.column.align,
-		children: /* @__PURE__ */ I(i, {
+		children: /* @__PURE__ */ L(a, {
 			px: 3,
 			textOverflow: "ellipsis",
 			overflow: "hidden",
 			textWrap: "nowrap",
-			children: typeof n == "boolean" ? /* @__PURE__ */ I(vt, {
+			children: typeof n == "boolean" ? /* @__PURE__ */ L(xt, {
 				value: n,
 				text: t.grid.localeText
-			}) : r ? /* @__PURE__ */ I(bt, {
+			}) : r ? /* @__PURE__ */ L(Ct, {
 				value: n,
 				format: r
 			}) : n
 		})
 	});
 }
-xt.displayName = "DataGridCellText";
+wt.displayName = "DataGridCellText";
 //#endregion
 //#region src/components/dataGrid/components/dataGridCellTree.tsx
-function St(e) {
-	let { cell: t, row: n, children: r } = e, { hasChildren: a, treeExpanded: o, level: s } = n, c = n.grid.componentName, l = O((e) => {
+function Tt(e) {
+	let { cell: t, row: n, children: r } = e, { hasChildren: i, treeExpanded: o, level: s } = n, c = n.grid.componentName, l = j((e) => {
 		e.stopPropagation(), n.toggleTree();
 	}, [n]), u = t.value == null || t.value === "" ? t.grid.localeText.unnamedRow(n.rowIndex + 1) : String(t.value);
-	return /* @__PURE__ */ L(h, {
+	return /* @__PURE__ */ R(_, {
 		component: `${c}.body.cell.tree`,
 		ai: "center",
 		ps: s * n.grid.tree.indent,
-		children: [a ? /* @__PURE__ */ I(p, {
+		children: [i ? /* @__PURE__ */ L(h, {
 			component: `${c}.body.cell.tree.toggle`,
 			variant: { isExpanded: o },
 			type: "button",
@@ -1758,13 +1799,13 @@ function St(e) {
 				tabIndex: -1,
 				"aria-label": (o ? t.grid.localeText.collapseTreeRow : t.grid.localeText.expandTreeRow)(u)
 			},
-			children: /* @__PURE__ */ I(Y, {
+			children: /* @__PURE__ */ L(Y, {
 				fill: "currentColor",
 				width: "14px",
 				height: "14px",
 				rotate: o ? 0 : -90
 			})
-		}) : /* @__PURE__ */ I(i, { component: `${c}.body.cell.tree.spacer` }), /* @__PURE__ */ I(i, {
+		}) : /* @__PURE__ */ L(a, { component: `${c}.body.cell.tree.spacer` }), /* @__PURE__ */ L(a, {
 			textOverflow: "ellipsis",
 			overflow: "hidden",
 			textWrap: "nowrap",
@@ -1773,29 +1814,29 @@ function St(e) {
 		})]
 	});
 }
-St.displayName = "DataGridCellTree";
+Tt.displayName = "DataGridCellTree";
 //#endregion
 //#region src/components/dataGrid/components/dataGridRow.tsx
-function Ct(e) {
-	let { row: t, index: n } = e, { selected: r, expandOnRowClick: i } = t, a = (z()?.headerRowCount ?? 0) + n, o = W(t) ? t : void 0, s = o && t.grid.tree.columnKey, c = O(() => {
+function Et(e) {
+	let { row: t, index: n } = e, { selected: r, expandOnRowClick: i } = t, a = (z()?.headerRowCount ?? 0) + n, o = W(t) ? t : void 0, s = o && t.grid.tree.columnKey, c = j(() => {
 		t.toggleDetail();
 	}, [t]), l = (e, n) => {
-		if (e.editing) return /* @__PURE__ */ I(gt, {
+		if (e.editing) return /* @__PURE__ */ L(yt, {
 			cell: e,
 			row: a,
 			columnIndex: n
 		});
-		let r = t.placeholder && !e.column.isRowNumber ? /* @__PURE__ */ I(dt, {
+		let r = t.placeholder && !e.column.isRowNumber ? /* @__PURE__ */ L(mt, {
 			cell: e,
 			columnIndex: n
-		}) : e.column.Cell ? /* @__PURE__ */ I(e.column.Cell, { cell: e }) : /* @__PURE__ */ I(xt, { cell: e });
-		return !o || e.column.key !== s ? r : /* @__PURE__ */ I(St, {
+		}) : e.column.Cell ? /* @__PURE__ */ L(e.column.Cell, { cell: e }) : /* @__PURE__ */ L(wt, { cell: e });
+		return !o || e.column.key !== s ? r : /* @__PURE__ */ L(Tt, {
 			cell: e,
 			row: o,
 			children: r
 		});
 	};
-	return /* @__PURE__ */ I(h, {
+	return /* @__PURE__ */ L(_, {
 		component: `${t.grid.componentName}.body.row`,
 		className: "grid-row",
 		selected: t.grid.props.def.rowSelection ? r : void 0,
@@ -1811,7 +1852,7 @@ function Ct(e) {
 			onClick: i ? c : void 0
 		},
 		cursor: i ? "pointer" : void 0,
-		children: t.cells.map((e, t) => /* @__PURE__ */ I(J, {
+		children: t.cells.map((e, t) => /* @__PURE__ */ L(J, {
 			cell: e,
 			row: a,
 			columnIndex: t,
@@ -1819,37 +1860,37 @@ function Ct(e) {
 		}, e.column.key))
 	});
 }
-Ct.displayName = "DataGridRow";
-var wt = D(Ct);
+Et.displayName = "DataGridRow";
+var Dt = A(Et);
 //#endregion
 //#region src/components/dataGrid/components/dataGridBody.tsx
-function Tt(e, t, n) {
-	return e instanceof H ? /* @__PURE__ */ I(ot, {
+function Ot(e, t, n) {
+	return e instanceof H ? /* @__PURE__ */ L(lt, {
 		row: e,
 		index: t,
 		version: n
-	}, e.key) : e instanceof it ? /* @__PURE__ */ I(pt, {
+	}, e.key) : e instanceof st ? /* @__PURE__ */ L(gt, {
 		row: e,
 		index: t,
 		version: n
-	}, e.key) : /* @__PURE__ */ I(wt, {
+	}, e.key) : /* @__PURE__ */ L(Dt, {
 		row: e,
 		index: t,
 		version: n
 	}, e.key);
 }
-function Et(e) {
-	let { grid: t, scroll: n } = e, { viewport: r } = t, { startIndex: a, take: o, translateY: s, totalHeight: c, viewHeight: l } = r.window(n.top, n.direction), u = r.showAll, d = r.isEmpty, f = t.flatRows.value, p = t.getSnapshot(), m = M(() => d ? null : G.take(f, o, a).map((e, n) => Tt(e, a + n, t.rowVersion(e, a + n))), [
+function kt(e) {
+	let { grid: t, scroll: n } = e, { viewport: r } = t, { startIndex: i, take: o, translateY: s, totalHeight: c, viewHeight: l } = r.window(n.top, n.direction), u = r.showAll, d = r.isEmpty, f = t.flatRows.value, p = t.getSnapshot(), m = ie(() => d ? null : G.take(f, o, i).map((e, n) => Ot(e, i + n, t.rowVersion(e, i + n))), [
 		f,
 		t,
 		d,
 		o,
-		a,
+		i,
 		p
 	]);
 	if (d) {
 		let { noDataComponent: e } = t.props.def, n = t.props.loading ? t.localeText.loadingRows : t.localeText.noRows;
-		return /* @__PURE__ */ I(h, {
+		return /* @__PURE__ */ L(_, {
 			component: `${t.componentName}.body.empty`,
 			jc: "center",
 			ai: "center",
@@ -1858,14 +1899,14 @@ function Et(e) {
 			insetStart: 0,
 			props: { role: "row" },
 			style: { height: r.emptyHeight },
-			children: /* @__PURE__ */ I(i, {
+			children: /* @__PURE__ */ L(a, {
 				display: "contents",
 				props: { role: "gridcell" },
 				children: e ?? n
 			})
 		});
 	}
-	return u ? /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I(x, {
+	return u ? /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L(C, {
 		component: `${t.componentName}.body`,
 		width: "max-content",
 		minWidth: "fit",
@@ -1874,13 +1915,13 @@ function Et(e) {
 		props: { role: "rowgroup" },
 		style: { gridTemplateColumns: t.gridTemplateColumns.value },
 		children: m
-	}), /* @__PURE__ */ I(lt, { grid: t })] }) : /* @__PURE__ */ L(i, {
+	}), /* @__PURE__ */ L(ft, { grid: t })] }) : /* @__PURE__ */ R(a, {
 		props: { role: "presentation" },
 		style: { height: l },
-		children: [/* @__PURE__ */ I(i, {
+		children: [/* @__PURE__ */ L(a, {
 			props: { role: "presentation" },
 			style: { height: `${c}px` },
-			children: /* @__PURE__ */ I(x, {
+			children: /* @__PURE__ */ L(C, {
 				component: `${t.componentName}.body`,
 				width: "max-content",
 				minWidth: "fit",
@@ -1894,15 +1935,15 @@ function Et(e) {
 				},
 				children: m
 			})
-		}), /* @__PURE__ */ I(lt, { grid: t })]
+		}), /* @__PURE__ */ L(ft, { grid: t })]
 	});
 }
-Et.displayName = "DataGridBody";
+kt.displayName = "DataGridBody";
 //#endregion
 //#region src/components/dataGrid/components/dataGridEmptyColumns.tsx
-function Dt(e) {
+function At(e) {
 	let { grid: t } = e;
-	return /* @__PURE__ */ I(h, {
+	return /* @__PURE__ */ L(_, {
 		component: `${t.componentName}.emptyColumns`,
 		d: "column",
 		ai: "center",
@@ -1910,49 +1951,49 @@ function Dt(e) {
 		gap: 4,
 		py: 16,
 		px: 6,
-		bgColor: "gray-50",
+		bgColor: "base-50",
 		borderRadius: 4,
-		theme: { dark: { bgColor: "gray-900" } },
-		children: /* @__PURE__ */ L(h, {
+		theme: { dark: { bgColor: "base-900" } },
+		children: /* @__PURE__ */ R(_, {
 			d: "column",
 			ai: "center",
 			gap: 3,
-			children: [/* @__PURE__ */ I(i, {
+			children: [/* @__PURE__ */ L(a, {
 				width: 16,
 				height: 16,
 				borderRadius: 999,
-				bgColor: "gray-200",
-				theme: { dark: { bgColor: "gray-700" } },
+				bgColor: "base-200",
+				theme: { dark: { bgColor: "base-700" } },
 				display: "flex",
 				ai: "center",
 				jc: "center",
-				children: /* @__PURE__ */ I(f, {
+				children: /* @__PURE__ */ L(m, {
 					viewBox: "0 0 24 24",
 					width: "40",
 					fill: "currentColor",
-					color: "gray-400",
-					theme: { dark: { color: "gray-500" } },
-					children: /* @__PURE__ */ I(d, {
+					color: "base-400",
+					theme: { dark: { color: "base-500" } },
+					children: /* @__PURE__ */ L(p, {
 						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__ */ L(h, {
+			}), /* @__PURE__ */ R(_, {
 				d: "column",
 				ai: "center",
 				gap: 1,
-				children: [/* @__PURE__ */ I(i, {
+				children: [/* @__PURE__ */ L(a, {
 					fontSize: 18,
 					fontWeight: 600,
-					color: "gray-900",
-					theme: { dark: { color: "gray-50" } },
+					color: "base-900",
+					theme: { dark: { color: "base-50" } },
 					children: t.localeText.noColumnsTitle
-				}), /* @__PURE__ */ I(i, {
+				}), /* @__PURE__ */ L(a, {
 					fontSize: 14,
-					color: "gray-500",
+					color: "base-500",
 					textAlign: "center",
-					theme: { dark: { color: "gray-400" } },
+					theme: { dark: { color: "base-400" } },
 					children: t.localeText.noColumnsDescription
 				})]
 			})]
@@ -1961,7 +2002,7 @@ function Dt(e) {
 }
 //#endregion
 //#region src/utils/dataGrid/headerCellUtils.ts
-var Ot;
+var jt;
 (function(e) {
 	let t = e.CELL_SELECTOR = "[role=\"columnheader\"][aria-sort]", n = ".resizer", r = `button, input, a, [role="menu"], [role="separator"], ${n}`;
 	function i(e, t) {
@@ -2036,8 +2077,8 @@ var Ot;
 		} : e;
 	}
 	e.pause = u;
-})(Ot ||= {});
-var X = Ot, kt;
+})(jt ||= {});
+var X = jt, Mt;
 (function(e) {
 	function t(e, t) {
 		return (t?.type === "text" ? t.value : "") === (e.trim() ? e : "");
@@ -2064,31 +2105,31 @@ var X = Ot, kt;
 		return t.valueTo === void 0 ? isNaN(r) : t.valueTo === r;
 	}
 	e.numberMatches = r;
-})(kt ||= {});
-var Z = kt, At = 300;
-function jt(e, t, n) {
-	let i = N(/* @__PURE__ */ new Map()), o = O(() => {
+})(Mt ||= {});
+var Z = Mt, Nt = 300;
+function Pt(e, t, n) {
+	let i = P(/* @__PURE__ */ new Map()), a = j(() => {
 		for (let e of i.current.values()) clearTimeout(e);
 		i.current.clear();
-	}, []), s = O((e, t) => {
+	}, []), s = j((e, t) => {
 		clearTimeout(i.current.get(e)), i.current.set(e, setTimeout(() => {
 			i.current.delete(e), t();
-		}, At));
+		}, Nt));
 	}, []);
-	A(() => o, [o]);
-	let c = a(() => {
-		t(e) || (o(), n(e));
+	N(() => a, [a]);
+	let c = o(() => {
+		t(e) || (a(), n(e));
 	});
 	return r(c, [e, c]), {
 		debounce: s,
-		cancel: o
+		cancel: a
 	};
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridColumnFilter.tsx
-function Mt(e) {
+function Ft(e) {
 	let { label: t, onClear: n } = e;
-	return /* @__PURE__ */ I(p, {
+	return /* @__PURE__ */ L(h, {
 		clean: !0,
 		type: "button",
 		position: "absolute",
@@ -2103,24 +2144,24 @@ function Mt(e) {
 			tabIndex: -1,
 			"aria-label": t
 		},
-		children: /* @__PURE__ */ I(i, {
+		children: /* @__PURE__ */ L(a, {
 			fontSize: 10,
-			color: "gray-400",
-			hover: { color: "gray-600" },
+			color: "base-400",
+			hover: { color: "base-600" },
 			children: "✕"
 		})
 	});
 }
-function Nt({ column: e }) {
-	let { currentFilter: t } = e, { componentName: n } = e.grid, r = String(e.header ?? e.key), i = e.grid.localeText, [a, o] = P(t?.type === "text" ? t.value : ""), { debounce: s, cancel: c } = jt(t, (e) => Z.textMatches(a, e), (e) => o(e?.type === "text" ? e.value : "")), l = O((t) => {
+function It({ column: e }) {
+	let { currentFilter: t } = e, { componentName: n } = e.grid, r = String(e.header ?? e.key), i = e.grid.localeText, [a, o] = F(t?.type === "text" ? t.value : ""), { debounce: s, cancel: c } = Pt(t, (e) => Z.textMatches(a, e), (e) => o(e?.type === "text" ? e.value : "")), l = j((t) => {
 		let n = t.target.value;
 		o(n), s("value", () => e.setTextFilter(n));
-	}, [e, s]), u = O(() => {
+	}, [e, s]), u = j(() => {
 		c(), o(""), e.clearFilter();
 	}, [e, c]);
-	return /* @__PURE__ */ L(h, {
+	return /* @__PURE__ */ R(_, {
 		component: `${n}.filter.cell.input`,
-		children: [/* @__PURE__ */ I(y, {
+		children: [/* @__PURE__ */ L(x, {
 			width: "fit",
 			variant: "compact",
 			placeholder: e.filterConfig?.placeholder ?? i.filterPlaceholder,
@@ -2133,19 +2174,19 @@ function Nt({ column: e }) {
 				tabIndex: -1,
 				"aria-label": i.filterColumn(r)
 			}
-		}), a && /* @__PURE__ */ I(Mt, {
+		}), a && /* @__PURE__ */ L(Ft, {
 			label: i.clearFilter(r),
 			onClear: u
 		})]
 	});
 }
-function Pt({ column: e }) {
-	let { currentFilter: t } = e, { componentName: n } = e.grid, r = String(e.header ?? e.key), i = e.grid.localeText, [a, o] = P(() => Z.numberDraft(t)), s = N(a), c = O((e) => {
+function Lt({ column: e }) {
+	let { currentFilter: t } = e, { componentName: n } = e.grid, r = String(e.header ?? e.key), i = e.grid.localeText, [a, o] = F(() => Z.numberDraft(t)), s = P(a), c = j((e) => {
 		s.current = e, o(e);
-	}, []), { debounce: l, cancel: u } = jt(t, (e) => Z.numberMatches(a, e), (e) => c(Z.numberDraft(e))), { operator: d, value: f, valueTo: p } = a, m = e.filterConfig, g = O(() => {
+	}, []), { debounce: l, cancel: u } = Pt(t, (e) => Z.numberMatches(a, e), (e) => c(Z.numberDraft(e))), { operator: d, value: p, valueTo: m } = a, h = e.filterConfig, g = j(() => {
 		let { operator: t, value: n, valueTo: r } = s.current;
 		e.setNumberFilter(t, n, r);
-	}, [e]), _ = O((e, t) => {
+	}, [e]), v = j((e, t) => {
 		c({
 			...s.current,
 			...e
@@ -2155,21 +2196,21 @@ function Pt({ column: e }) {
 		g,
 		l,
 		u
-	]), v = O((e) => _({ value: e.target.value }, !0), [_]), b = O((e) => _({ valueTo: e.target.value }, !0), [_]), x = O((e) => _({ operator: e }, !1), [_]), C = O(() => {
+	]), y = j((e) => v({ value: e.target.value }, !0), [v]), b = j((e) => v({ valueTo: e.target.value }, !0), [v]), S = j((e) => v({ operator: e }, !1), [v]), C = j(() => {
 		u(), c(Z.numberDraft(void 0)), e.clearFilter();
 	}, [
 		e,
 		u,
 		c
 	]);
-	return /* @__PURE__ */ L(h, {
+	return /* @__PURE__ */ R(_, {
 		component: `${n}.filter.cell.input`,
 		ai: d === "between" ? "start" : "center",
 		gap: 1,
-		children: [/* @__PURE__ */ L(S, {
+		children: [/* @__PURE__ */ L(f, { children: /* @__PURE__ */ R(w, {
 			value: d,
 			variant: "compact",
-			onChange: (e) => e && x(e),
+			onChange: (e) => e && S(e),
 			minWidth: 6,
 			hideIcon: !0,
 			b: 0,
@@ -2180,51 +2221,51 @@ function Pt({ column: e }) {
 				"aria-label": i.filterComparison(r)
 			},
 			children: [
-				/* @__PURE__ */ I(S.Item, {
+				/* @__PURE__ */ L(w.Item, {
 					value: "eq",
 					children: "="
 				}),
-				/* @__PURE__ */ I(S.Item, {
+				/* @__PURE__ */ L(w.Item, {
 					value: "ne",
 					children: "≠"
 				}),
-				/* @__PURE__ */ I(S.Item, {
+				/* @__PURE__ */ L(w.Item, {
 					value: "gt",
 					children: ">"
 				}),
-				/* @__PURE__ */ I(S.Item, {
+				/* @__PURE__ */ L(w.Item, {
 					value: "gte",
 					children: "≥"
 				}),
-				/* @__PURE__ */ I(S.Item, {
+				/* @__PURE__ */ L(w.Item, {
 					value: "lt",
 					children: "<"
 				}),
-				/* @__PURE__ */ I(S.Item, {
+				/* @__PURE__ */ L(w.Item, {
 					value: "lte",
 					children: "≤"
 				}),
-				/* @__PURE__ */ I(S.Item, {
+				/* @__PURE__ */ L(w.Item, {
 					value: "between",
 					children: "↔"
 				})
 			]
-		}), d === "between" ? /* @__PURE__ */ L(h, {
+		}) }), d === "between" ? /* @__PURE__ */ R(_, {
 			d: "column",
 			gap: 1,
 			flex1: !0,
-			children: [/* @__PURE__ */ L(h, {
+			children: [/* @__PURE__ */ R(_, {
 				ai: "center",
 				position: "relative",
 				flex1: !0,
-				children: [/* @__PURE__ */ I(y, {
+				children: [/* @__PURE__ */ L(x, {
 					type: "number",
 					variant: "compact",
-					placeholder: m?.placeholder ?? i.filterFromPlaceholder,
-					value: f,
-					onChange: v,
+					placeholder: h?.placeholder ?? i.filterFromPlaceholder,
+					value: p,
+					onChange: y,
 					width: "fit",
-					step: m?.step,
+					step: h?.step,
 					b: 0,
 					bgColor: "transparent",
 					focus: { outline: 0 },
@@ -2232,21 +2273,21 @@ function Pt({ column: e }) {
 						tabIndex: -1,
 						"aria-label": i.filterFrom(r)
 					}
-				}), (f !== "" || p !== "") && /* @__PURE__ */ I(Mt, {
+				}), (p !== "" || m !== "") && /* @__PURE__ */ L(Ft, {
 					label: i.clearFilter(r),
 					onClear: C
 				})]
-			}), /* @__PURE__ */ I(h, {
+			}), /* @__PURE__ */ L(_, {
 				ai: "center",
 				flex1: !0,
-				children: /* @__PURE__ */ I(y, {
+				children: /* @__PURE__ */ L(x, {
 					type: "number",
 					variant: "compact",
 					placeholder: i.filterToPlaceholder,
-					value: p,
+					value: m,
 					onChange: b,
 					width: "fit",
-					step: m?.step,
+					step: h?.step,
 					b: 0,
 					bgColor: "transparent",
 					focus: { outline: 0 },
@@ -2256,18 +2297,18 @@ function Pt({ column: e }) {
 					}
 				})
 			})]
-		}) : /* @__PURE__ */ L(h, {
+		}) : /* @__PURE__ */ R(_, {
 			ai: "center",
 			position: "relative",
 			flex1: !0,
-			children: [/* @__PURE__ */ I(y, {
+			children: [/* @__PURE__ */ L(x, {
 				type: "number",
 				variant: "compact",
-				placeholder: m?.placeholder ?? i.filterValuePlaceholder,
-				value: f,
-				onChange: v,
+				placeholder: h?.placeholder ?? i.filterValuePlaceholder,
+				value: p,
+				onChange: y,
 				width: "fit",
-				step: m?.step,
+				step: h?.step,
 				b: 0,
 				bgColor: "transparent",
 				focus: { outline: 0 },
@@ -2275,28 +2316,28 @@ function Pt({ column: e }) {
 					tabIndex: -1,
 					"aria-label": i.filterColumn(r)
 				}
-			}), f !== "" && /* @__PURE__ */ I(Mt, {
+			}), p !== "" && /* @__PURE__ */ L(Ft, {
 				label: i.clearFilter(r),
 				onClear: C
 			})]
 		})]
 	});
 }
-function Ft({ column: e }) {
-	let t = Te(!0);
-	return t ? /* @__PURE__ */ I(t.DateFilter, { column: e }) : null;
+function Rt({ column: e }) {
+	let t = De(!0);
+	return t ? /* @__PURE__ */ L(t.DateFilter, { column: e }) : null;
 }
-function It({ column: e }) {
-	let { currentFilter: t } = e, { componentName: n } = e.grid, r = String(e.header ?? e.key), a = e.grid.localeText, o = t?.type === "multiselect" ? t.values : [], s = e.filterOptions, c = O((t, n) => {
+function zt({ column: e }) {
+	let { currentFilter: t } = e, { componentName: n } = e.grid, r = String(e.header ?? e.key), i = e.grid.localeText, o = t?.type === "multiselect" ? t.values : [], s = e.filterOptions, c = j((t, n) => {
 		e.setMultiselectFilter(n);
 	}, [e]);
-	return /* @__PURE__ */ I(h, {
+	return /* @__PURE__ */ L(_, {
 		component: `${n}.filter.cell.input`,
-		children: /* @__PURE__ */ L(S, {
+		children: /* @__PURE__ */ L(f, { children: /* @__PURE__ */ R(w, {
 			multiple: !0,
 			showCheckbox: !0,
 			isSearchable: !0,
-			searchPlaceholder: a.filterSelectSearchPlaceholder,
+			searchPlaceholder: i.filterSelectSearchPlaceholder,
 			value: o,
 			width: "fit",
 			minWidth: 0,
@@ -2307,43 +2348,43 @@ function It({ column: e }) {
 			focus: { outline: 0 },
 			props: {
 				tabIndex: -1,
-				"aria-label": a.filterColumn(r)
+				"aria-label": i.filterColumn(r)
 			},
 			children: [
-				/* @__PURE__ */ I(S.Display, { children: (t) => t.length === 0 ? /* @__PURE__ */ I(i, {
+				/* @__PURE__ */ L(w.Display, { children: (t) => t.length === 0 ? /* @__PURE__ */ L(a, {
 					tag: "span",
-					color: "gray-400",
-					children: e.filterConfig?.placeholder ?? a.filterSelectPlaceholder
+					color: "base-400",
+					children: e.filterConfig?.placeholder ?? i.filterSelectPlaceholder
 				}) : t.length === 1 ? s.find((e) => e.value === t[0])?.label ?? String(t[0]) : `${t.length} selected` }),
-				/* @__PURE__ */ I(S.Unselect, { children: a.filterSelectClear }),
-				/* @__PURE__ */ I(S.SelectAll, { children: a.filterSelectAll }),
-				s.map((e) => /* @__PURE__ */ I(S.Item, {
+				/* @__PURE__ */ L(w.Unselect, { children: i.filterSelectClear }),
+				/* @__PURE__ */ L(w.SelectAll, { children: i.filterSelectAll }),
+				s.map((e) => /* @__PURE__ */ L(w.Item, {
 					value: e.value,
 					ai: "center",
 					gap: 2,
 					children: e.label
 				}, String(e.value)))
 			]
-		})
+		}) })
 	});
 }
-function Lt(e) {
+function Bt(e) {
 	let { column: t } = e, n = t.filterConfig;
 	if (!n) return null;
 	switch (n.type) {
-		case "number": return /* @__PURE__ */ I(Pt, { column: t });
-		case "multiselect": return /* @__PURE__ */ I(It, { column: t });
-		case "date": return /* @__PURE__ */ I(Ft, { column: t });
-		default: return /* @__PURE__ */ I(Nt, { column: t });
+		case "number": return /* @__PURE__ */ L(Lt, { column: t });
+		case "multiselect": return /* @__PURE__ */ L(zt, { column: t });
+		case "date": return /* @__PURE__ */ L(Rt, { column: t });
+		default: return /* @__PURE__ */ L(It, { column: t });
 	}
 }
-Lt.displayName = "DataGridColumnFilter";
+Bt.displayName = "DataGridColumnFilter";
 //#endregion
 //#region src/components/dataGrid/components/dataGridFilterCell.tsx
-function Rt(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: f, isLastStartPinned: p, isFirstEndPinned: m, isLastEndPinned: g } = t.pinFlags.value, { ref: _, tabIndex: v, onFocus: y } = ve(z(), r, i), b = t.isGrouping || t.isRowNumber || t.isRowSelection;
-	return /* @__PURE__ */ I(h, {
-		ref: _,
+function Vt(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: f, isLastStartPinned: p, isFirstEndPinned: m, isLastEndPinned: h } = t.pinFlags.value, { ref: g, tabIndex: v, onFocus: y } = be(z(), r, i), b = t.isGrouping || t.isRowNumber || t.isRowSelection;
+	return /* @__PURE__ */ L(_, {
+		ref: g,
 		component: `${n.componentName}.filter.cell`,
 		props: {
 			role: "gridcell",
@@ -2356,7 +2397,7 @@ function Rt(e) {
 			isFirstStartPinned: f,
 			isLastStartPinned: p,
 			isFirstEndPinned: m,
-			isLastEndPinned: g
+			isLastEndPinned: h
 		},
 		px: 2,
 		style: {
@@ -2364,23 +2405,23 @@ function Rt(e) {
 			insetInlineStart: l ? `var(${o})` : void 0,
 			insetInlineEnd: u ? `var(${s})` : void 0
 		},
-		children: !b && c && /* @__PURE__ */ I(Lt, { column: t })
+		children: !b && c && /* @__PURE__ */ L(Bt, { column: t })
 	});
 }
-Rt.displayName = "DataGridFilterCell";
+Vt.displayName = "DataGridFilterCell";
 //#endregion
 //#region src/components/dataGrid/components/dataGridFilterRow.tsx
-function zt(e) {
+function Ht(e) {
 	let { grid: t } = e;
 	if (!t.filter.hasFilterableColumns) return null;
 	let n = t.headerRows.value.length;
-	return /* @__PURE__ */ I(i, {
+	return /* @__PURE__ */ L(a, {
 		display: "contents",
 		props: {
 			role: "row",
 			"aria-rowindex": n + 1
 		},
-		children: t.columns.value.visibleLeafs.map((e, r) => /* @__PURE__ */ I(Rt, {
+		children: t.columns.value.visibleLeafs.map((e, r) => /* @__PURE__ */ L(Vt, {
 			column: e,
 			grid: t,
 			row: n,
@@ -2388,25 +2429,25 @@ function zt(e) {
 		}, e.uniqueKey))
 	});
 }
-zt.displayName = "DataGridFilterRow";
+Ht.displayName = "DataGridFilterRow";
 //#endregion
 //#region src/icons/sortIcon.tsx
-function Bt(e) {
-	return /* @__PURE__ */ I(f, {
+function Ut(e) {
+	return /* @__PURE__ */ L(m, {
 		viewBox: "0 0 24 24",
 		width: "1.5rem",
 		...e,
-		children: /* @__PURE__ */ I(d, { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })
+		children: /* @__PURE__ */ L(p, { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })
 	});
 }
 //#endregion
 //#region src/icons/dotsIcon.tsx
-function Vt(e) {
-	return /* @__PURE__ */ I(f, {
+function Wt(e) {
+	return /* @__PURE__ */ L(m, {
 		viewBox: "0 0 16 16",
 		width: "18",
 		...e,
-		children: /* @__PURE__ */ I(d, {
+		children: /* @__PURE__ */ L(p, {
 			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"
 		})
@@ -2414,126 +2455,126 @@ function Vt(e) {
 }
 //#endregion
 //#region src/icons/groupingIcon.tsx
-function Ht(e) {
-	return /* @__PURE__ */ I(f, {
+function Gt(e) {
+	return /* @__PURE__ */ L(m, {
 		viewBox: "0 0 24 24",
 		width: "1.5rem",
 		...e,
-		children: /* @__PURE__ */ I(d, { d: "M3 5h8v2H3V5zm0 6h8v2H3v-2zm0 6h8v2H3v-2zm12-12h6v6h-6V5zm1 1v4h4V6h-4zm-1 7h6v6h-6v-6zm1 1v4h4v-4h-4z" })
+		children: /* @__PURE__ */ L(p, { 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 Ut(e) {
-	return /* @__PURE__ */ I(f, {
+function Kt(e) {
+	return /* @__PURE__ */ L(m, {
 		viewBox: "0 0 1024 1024",
 		width: "1.5rem",
 		...e,
-		children: /* @__PURE__ */ I(d, { 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" })
+		children: /* @__PURE__ */ L(p, { 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 Wt(e) {
+function qt(e) {
 	let { side: t, left: n, right: r } = e;
-	return /* @__PURE__ */ L(F, { children: [/* @__PURE__ */ I(C, {
+	return /* @__PURE__ */ R(I, { children: [/* @__PURE__ */ L(T, {
 		rtl: { display: "none" },
 		children: t === "start" ? n : r
-	}), /* @__PURE__ */ I(C, {
+	}), /* @__PURE__ */ L(T, {
 		ltr: { display: "none" },
 		children: t === "start" ? r : n
 	})] });
 }
-function Gt(e) {
-	let { column: t } = e, { grid: n, isEndAligned: a, header: s, key: d } = t, f = t.headerCell, m = String(s ?? d), g = n.localeText, y = u("datagrid-column-menu"), [b, x] = P(!1), S = N(null), w = N(null), T = N(!1), ee = a ? 3 : void 0, ne = a ? void 0 : 3, E = M(() => {
-		let e = (e) => /* @__PURE__ */ I(C, {
+function Jt(e) {
+	let { column: t } = e, { grid: n, isEndAligned: i, header: o, key: c } = t, f = t.headerCell, p = String(o ?? c), m = n.localeText, g = d("datagrid-column-menu"), [v, x] = F(!1), S = P(null), C = P(null), w = P(!1), E = i ? 3 : void 0, ee = i ? void 0 : 3, D = ie(() => {
+		let e = (e) => /* @__PURE__ */ L(T, {
 			component: `${n.componentName}.header.cell.contextMenu.tooltip.item.icon`,
 			children: e
-		}), r = (t) => e(/* @__PURE__ */ I(Bt, {
+		}), r = (t) => e(/* @__PURE__ */ L(Ut, {
 			width: "100%",
 			fill: "currentColor",
 			rotate: t
-		})), a = (t, n) => e(/* @__PURE__ */ I(Ut, {
+		})), i = (t, n) => e(/* @__PURE__ */ L(Kt, {
 			width: "100%",
 			fill: "currentColor",
 			rotate: t,
 			rtl: { rotate: n }
-		})), o = e(/* @__PURE__ */ I(Ht, {
+		})), o = e(/* @__PURE__ */ L(Gt, {
 			width: "100%",
 			fill: "currentColor"
-		})), s = /* @__PURE__ */ I(i, { width: 4 });
+		})), s = /* @__PURE__ */ L(a, { width: 4 });
 		return [
 			[
 				f.canSortAsc && {
 					key: "sort-asc",
 					icon: r(),
-					label: g.sortAscending,
-					text: g.sortAscending,
+					label: m.sortAscending,
+					text: m.sortAscending,
 					run: () => t.sortColumn("ASC")
 				},
 				f.canSortDesc && {
 					key: "sort-desc",
 					icon: r(180),
-					label: g.sortDescending,
-					text: g.sortDescending,
+					label: m.sortDescending,
+					text: m.sortDescending,
 					run: () => t.sortColumn("DESC")
 				},
 				f.canClearSort && {
 					key: "sort-clear",
 					icon: s,
-					label: g.clearSort,
-					text: g.clearSort,
+					label: m.clearSort,
+					text: m.clearSort,
 					run: () => t.sortColumn(void 0)
 				}
 			],
 			[
 				f.canPinStart && {
 					key: "pin-start",
-					icon: a(0, -90),
-					label: /* @__PURE__ */ I(Wt, {
+					icon: i(0, -90),
+					label: /* @__PURE__ */ L(qt, {
 						side: "start",
-						left: g.pinLeft,
-						right: g.pinRight
+						left: m.pinLeft,
+						right: m.pinRight
 					}),
-					text: g.pinLeft,
+					text: m.pinLeft,
 					run: () => t.pinColumn("START")
 				},
 				f.canPinEnd && {
 					key: "pin-end",
-					icon: a(-90, 0),
-					label: /* @__PURE__ */ I(Wt, {
+					icon: i(-90, 0),
+					label: /* @__PURE__ */ L(qt, {
 						side: "end",
-						left: g.pinLeft,
-						right: g.pinRight
+						left: m.pinLeft,
+						right: m.pinRight
 					}),
-					text: g.pinRight,
+					text: m.pinRight,
 					run: () => t.pinColumn("END")
 				},
 				f.canUnpin && {
 					key: "unpin",
 					icon: s,
-					label: g.unpin,
-					text: g.unpin,
+					label: m.unpin,
+					text: m.unpin,
 					run: () => t.pinColumn()
 				}
 			],
 			[f.canGroupBy && {
 				key: "group",
 				icon: o,
-				label: /* @__PURE__ */ I(i, {
+				label: /* @__PURE__ */ L(a, {
 					textWrap: "nowrap",
-					children: g.groupBy(m)
+					children: m.groupBy(p)
 				}),
-				text: g.groupBy(m),
+				text: m.groupBy(p),
 				run: t.toggleGrouping
 			}, f.canUnGroupAll && {
 				key: "ungroup",
 				icon: o,
-				label: /* @__PURE__ */ I(i, {
+				label: /* @__PURE__ */ L(a, {
 					textWrap: "nowrap",
-					children: g.ungroupAll
+					children: m.ungroupAll
 				}),
-				text: g.ungroupAll,
+				text: m.ungroupAll,
 				run: n.unGroupAll
 			}]
 		].map((e) => e.filter((e) => e !== !1)).filter((e) => e.length > 0).flatMap((e, t) => e.map((e, n) => ({
@@ -2542,93 +2583,93 @@ function Gt(e) {
 		})));
 	}, [
 		t,
-		m,
+		p,
 		n,
 		f,
-		g
-	]), D = O((e = !0) => {
-		T.current = !1, x(!1), e && S.current?.focus();
-	}, []), k = l({
-		count: E.length,
-		textOf: (e) => E[e]?.text ?? "",
+		m
+	]), O = j((e = !0) => {
+		w.current = !1, x(!1), e && S.current?.focus();
+	}, []), k = u({
+		count: D.length,
+		textOf: (e) => D[e]?.text ?? "",
 		onSelect: (e) => {
-			E[e]?.run(), D();
+			D[e]?.run(), O();
 		}
 	});
-	c({
-		enabled: b,
-		inside: [S, w],
-		onDismiss: () => D()
-	}), o({
-		enabled: b,
+	l({
+		enabled: v,
+		inside: [S, C],
+		onDismiss: () => O()
+	}), s({
+		enabled: v,
 		returnTo: S
 	});
-	let A = k.setActiveIndex, j = k.activeItem, re = O(() => {
-		A(0, { reason: "programmatic" }), T.current = !0, x(!0);
+	let A = k.setActiveIndex, M = k.activeItem, N = j(() => {
+		A(0, { reason: "programmatic" }), w.current = !0, x(!0);
 	}, [A]);
 	return r(() => {
-		if (!T.current) return;
-		let e = j();
-		e && (T.current = !1, e.focus());
-	}), /* @__PURE__ */ L(h, {
+		if (!w.current) return;
+		let e = M();
+		e && (w.current = !1, e.focus());
+	}), /* @__PURE__ */ R(_, {
 		position: "absolute",
-		insetStart: ee,
-		insetEnd: ne,
+		insetStart: E,
+		insetEnd: ee,
 		top: "1/2",
 		translateY: -3,
 		ai: "center",
-		children: [/* @__PURE__ */ I(p, {
+		children: [/* @__PURE__ */ L(h, {
 			ref: S,
 			component: `${n.componentName}.header.cell.contextMenu`,
-			onClick: () => b ? D(!1) : re(),
+			onClick: () => v ? O(!1) : N(),
 			variant: f.contextMenuButtonVariant,
 			type: "button",
 			props: {
 				tabIndex: -1,
-				"aria-label": g.columnOptions(m),
+				"aria-label": m.columnOptions(p),
 				"aria-haspopup": "menu",
-				"aria-expanded": b,
-				"aria-controls": b ? y : void 0
+				"aria-expanded": v,
+				"aria-controls": v ? g : void 0
 			},
-			children: /* @__PURE__ */ I(C, {
+			children: /* @__PURE__ */ L(T, {
 				component: `${n.componentName}.header.cell.contextMenu.icon`,
-				children: /* @__PURE__ */ I(Vt, { fill: "currentColor" })
+				children: /* @__PURE__ */ L(Wt, { fill: "currentColor" })
 			})
-		}), /* @__PURE__ */ I(v, {
-			present: b,
-			children: (e) => /* @__PURE__ */ I(_, {
+		}), /* @__PURE__ */ L(b, {
+			present: v,
+			children: (e) => /* @__PURE__ */ L(y, {
 				component: `${n.componentName}.header.cell.contextMenu.tooltip`,
 				variant: { closed: !e.present },
-				ref: w,
+				ref: C,
 				contentRef: e.ref,
 				anchor: S,
 				side: "bottom",
 				align: "end",
 				matchWidth: !1,
-				id: y,
+				id: g,
 				props: {
 					role: "menu",
-					"aria-label": g.columnOptions(m),
+					"aria-label": m.columnOptions(p),
 					onKeyDown: k.onKeyDown,
 					...e.props
 				},
-				children: E.map((e, t) => {
-					let { ref: r, tabIndex: a, onFocus: o } = k.itemProps(t);
-					return /* @__PURE__ */ L(te, { children: [e.startsSection && /* @__PURE__ */ I(i, {
+				children: D.map((e, t) => {
+					let { ref: r, tabIndex: i, onFocus: o } = k.itemProps(t);
+					return /* @__PURE__ */ R(te, { children: [e.startsSection && /* @__PURE__ */ L(a, {
 						bb: 1,
 						my: 2,
-						borderColor: "gray-300",
+						borderColor: "base-300",
 						component: `${n.componentName}.header.cell.contextMenu.tooltip.item.separator`
-					}), /* @__PURE__ */ L(p, {
+					}), /* @__PURE__ */ R(h, {
 						component: `${n.componentName}.header.cell.contextMenu.tooltip.item`,
 						ref: r,
 						type: "button",
 						onClick: (t) => {
-							t.stopPropagation(), e.run(), D();
+							t.stopPropagation(), e.run(), O();
 						},
 						props: {
 							role: "menuitem",
-							tabIndex: a,
+							tabIndex: i,
 							onFocus: o
 						},
 						children: [e.icon, e.label]
@@ -2638,27 +2679,27 @@ function Gt(e) {
 		})]
 	});
 }
-Gt.displayName = "DataGridHeaderCellContextMenu";
+Jt.displayName = "DataGridHeaderCellContextMenu";
 //#endregion
 //#region src/components/dataGrid/components/dataGridHeaderCellResizer.tsx
-var Kt = (e) => "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, qt = 16, Jt = 150;
-function Yt(e) {
-	let { column: t, controls: n } = e, r = t.grid.resizerStyle, a = t.headerCell, o = O((e) => {
+var Yt = (e) => "touches" in e ? e.touches[0]?.pageX ?? 0 : e.pageX, Xt = 16, Zt = 150;
+function Qt(e) {
+	let { column: t, controls: n } = e, r = t.grid.resizerStyle, i = t.headerCell, o = j((e) => {
 		let { grid: n } = t;
-		e.type === "mousedown" && e.preventDefault(), t.beginResize(Kt(e.nativeEvent));
-		let r = new AbortController(), { signal: i } = r, a = 0, o = Kt(e.nativeEvent), s = () => {
+		e.type === "mousedown" && e.preventDefault(), t.beginResize(Yt(e.nativeEvent));
+		let r = new AbortController(), { signal: i } = r, a = 0, o = Yt(e.nativeEvent), s = () => {
 			t.applyResize(o), n.paintSizes();
 		}, c = n.resizeMode === "instant" ? (e) => {
-			o = Kt(e), s();
+			o = Yt(e), s();
 		} : (e) => {
-			o = Kt(e), a ||= requestAnimationFrame(() => {
+			o = Yt(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 = N(void 0), c = N(0), l = O(() => {
+	}, [t]), s = P(void 0), c = P(0), l = j(() => {
 		let { grid: e } = t;
 		if (e.resizeMode === "instant") {
 			e.paintSizes();
@@ -2667,36 +2708,36 @@ function Yt(e) {
 		c.current ||= requestAnimationFrame(() => {
 			c.current = 0, e.paintSizes();
 		});
-	}, [t]), u = O(() => {
+	}, [t]), u = j(() => {
 		s.current !== void 0 && (clearTimeout(s.current), s.current = void 0, c.current &&= (cancelAnimationFrame(c.current), 0), t.endResize());
 	}, [t]);
-	A(() => () => {
+	N(() => () => {
 		clearTimeout(s.current), c.current && cancelAnimationFrame(c.current);
 	}, []);
-	let d = O((e) => {
+	let d = j((e) => {
 		switch (e.key) {
 			case "ArrowRight":
-				t.moveResizer(qt);
+				t.moveResizer(Xt);
 				break;
 			case "ArrowLeft":
 				t.moveResizer(-16);
 				break;
 			case "Home":
-				t.resizeWidthTo(a.minWidth);
+				t.resizeWidthTo(i.minWidth);
 				break;
 			case "End":
-				t.resizeWidthTo(a.maxWidth);
+				t.resizeWidthTo(i.maxWidth);
 				break;
 			default: return;
 		}
-		e.preventDefault(), l(), clearTimeout(s.current), s.current = setTimeout(u, Jt);
+		e.preventDefault(), l(), clearTimeout(s.current), s.current = setTimeout(u, Zt);
 	}, [
 		t,
 		u,
-		a,
+		i,
 		l
-	]), { isAtGridEnd: f } = a;
-	return /* @__PURE__ */ I(h, {
+	]), { isAtGridEnd: f } = i;
+	return /* @__PURE__ */ L(_, {
 		height: "fit",
 		ai: "center",
 		position: "absolute",
@@ -2704,7 +2745,7 @@ function Yt(e) {
 		insetStart: t.pin === "END" ? -.75 : void 0,
 		zIndex: 1,
 		py: 3,
-		children: /* @__PURE__ */ I(i, {
+		children: /* @__PURE__ */ L(a, {
 			cursor: "col-resize",
 			px: f ? void 0 : .75,
 			ps: f ? 1.5 : void 0,
@@ -2715,19 +2756,19 @@ function Yt(e) {
 				onMouseDown: o,
 				onTouchStart: o
 			},
-			children: /* @__PURE__ */ I(i, {
+			children: /* @__PURE__ */ L(a, {
 				component: `${t.grid.componentName}.header.cell.resizer`,
 				opacity: r === "visible" ? void 0 : 0,
 				group: r === "hover" ? { "header-cell/hover": { opacity: 1 } } : void 0,
 				props: {
 					role: "separator",
-					"aria-label": a.resizerLabel,
+					"aria-label": i.resizerLabel,
 					"aria-controls": n,
 					"aria-orientation": "vertical",
-					"aria-valuenow": a.width,
-					"aria-valuemin": a.minWidth,
-					"aria-valuemax": a.maxWidth,
-					"aria-valuetext": t.grid.localeText.columnWidth(a.width),
+					"aria-valuenow": i.width,
+					"aria-valuemin": i.minWidth,
+					"aria-valuemax": i.maxWidth,
+					"aria-valuetext": t.grid.localeText.columnWidth(i.width),
 					tabIndex: -1,
 					onKeyDown: d,
 					onKeyUp: u
@@ -2736,28 +2777,28 @@ function Yt(e) {
 		})
 	});
 }
-Yt.displayName = "DataGridHeaderCellResizer";
+Qt.displayName = "DataGridHeaderCellResizer";
 //#endregion
 //#region src/components/dataGrid/components/dataGridHeaderCell.tsx
-function Xt(e) {
-	let { column: t, row: n, columnIndex: r } = e, { grid: a } = t, { isStartPinned: o, isEndPinned: s } = t.pinFlags.value, c = t.headerCell, { isSortable: l, showResizer: d, showContextMenu: f, paddingStart: p, paddingEnd: _ } = c, { ref: v, tabIndex: y, onFocus: b } = ve(z(), n, r), x = u("datagrid-columnheader"), S = N(null), C = O(() => {
-		a.toggleSelectAllRows();
-	}, [a]), w = t.isRowSelection ? /* @__PURE__ */ I(g, {
+function $t(e) {
+	let { column: t, row: n, columnIndex: r } = e, { grid: i } = t, { isStartPinned: o, isEndPinned: s } = t.pinFlags.value, c = t.headerCell, { isSortable: l, showResizer: u, showContextMenu: f, paddingStart: p, paddingEnd: m } = c, { ref: h, tabIndex: y, onFocus: b } = be(z(), n, r), x = d("datagrid-columnheader"), S = P(null), C = j(() => {
+		i.toggleSelectAllRows();
+	}, [i]), w = t.isRowSelection ? /* @__PURE__ */ L(v, {
 		variant: "datagrid",
 		m: 1,
-		indeterminate: a.someRowsSelected && !a.allRowsSelected,
-		checked: a.allRowsSelected,
+		indeterminate: i.someRowsSelected && !i.allRowsSelected,
+		checked: i.allRowsSelected,
 		onChange: C,
 		props: {
 			tabIndex: -1,
-			"aria-label": a.localeText.selectAllRows
+			"aria-label": i.localeText.selectAllRows
 		}
-	}) : c.hiddenLabel ? /* @__PURE__ */ I(m, {
+	}) : c.hiddenLabel ? /* @__PURE__ */ L(g, {
 		tag: "span",
 		children: c.hiddenLabel
 	}) : c.label;
-	return /* @__PURE__ */ I(h, {
-		ref: v,
+	return /* @__PURE__ */ L(_, {
+		ref: h,
 		id: x,
 		props: {
 			role: "columnheader",
@@ -2773,7 +2814,7 @@ function Xt(e) {
 			} : void 0
 		},
 		className: "header-cell",
-		component: `${a.componentName}.header.cell`,
+		component: `${i.componentName}.header.cell`,
 		variant: c.variant,
 		gridRow: t.gridRows,
 		gridColumn: c.gridColumn,
@@ -2782,29 +2823,29 @@ function Xt(e) {
 			insetInlineStart: o ? `var(${t.inlineStartVarName})` : void 0,
 			insetInlineEnd: s ? `var(${t.inlineEndVarName})` : void 0
 		},
-		children: /* @__PURE__ */ L(F, { children: [
-			/* @__PURE__ */ I(h, {
+		children: /* @__PURE__ */ R(I, { children: [
+			/* @__PURE__ */ L(_, {
 				width: "fit",
 				height: "fit",
 				jc: t.align,
-				children: /* @__PURE__ */ L(h, {
+				children: /* @__PURE__ */ R(_, {
 					overflow: "hidden",
 					position: t.isLeaf ? void 0 : "sticky",
 					ai: "center",
 					transition: "none",
 					ps: p,
-					pe: _,
-					style: { insetInlineStart: t.pin ? void 0 : `var(${a.inlineStartEdgeVarName})` },
+					pe: m,
+					style: { insetInlineStart: t.pin ? void 0 : `var(${i.inlineStartEdgeVarName})` },
 					children: [
-						/* @__PURE__ */ I(i, {
+						/* @__PURE__ */ L(a, {
 							overflow: "hidden",
 							textOverflow: "ellipsis",
 							textWrap: "nowrap",
 							children: w
 						}),
-						c.isSorted && /* @__PURE__ */ I(i, {
+						c.isSorted && /* @__PURE__ */ L(a, {
 							ps: (t.inlineWidth ?? 0) < 58 ? 0 : 2,
-							children: /* @__PURE__ */ I(Bt, {
+							children: /* @__PURE__ */ L(Ut, {
 								width: "16px",
 								rotate: c.sortDirection === "ASC" ? 0 : 180,
 								transition: "transform",
@@ -2814,37 +2855,37 @@ function Xt(e) {
 								fill: "currentColor"
 							})
 						}),
-						f && /* @__PURE__ */ I(i, { minWidth: t.isEndAligned ? 4 : 10 })
+						f && /* @__PURE__ */ L(a, { minWidth: t.isEndAligned ? 4 : 10 })
 					]
 				})
 			}),
-			d && /* @__PURE__ */ I(Yt, {
+			u && /* @__PURE__ */ L(Qt, {
 				column: t,
 				controls: x
 			}),
-			f && /* @__PURE__ */ I(Gt, { column: t })
+			f && /* @__PURE__ */ L(Jt, { column: t })
 		] })
 	});
 }
-Xt.displayName = "DataGridHeaderCell";
+$t.displayName = "DataGridHeaderCell";
 //#endregion
 //#region src/components/dataGrid/components/dataGridHeader.tsx
-function Zt(e) {
-	let { grid: t } = e, n = N(null), [r, a] = P(X.INITIAL), o = t.headerHover === "sliding", s = (e) => {
+function en(e) {
+	let { grid: t } = e, n = P(null), [r, i] = F(X.INITIAL), o = t.headerHover === "sliding", s = (e) => {
 		let t = n.current;
 		if (!o || !t || e.pointerType === "touch") return;
-		if (X.isOnResizer(e.target)) return a((e) => X.pause(e));
-		let r = X.cellAt(t, e.target), i = r && X.bounds(t, r);
-		a((e) => X.hover(e, i));
-	}, c = () => a((e) => X.hover(e, void 0)), l = r.visible || r.paused;
-	A(() => {
+		if (X.isOnResizer(e.target)) return i((e) => X.pause(e));
+		let r = X.cellAt(t, e.target), a = r && X.bounds(t, r);
+		i((e) => X.hover(e, a));
+	}, c = () => i((e) => X.hover(e, void 0)), l = r.visible || r.paused;
+	N(() => {
 		if (l) return document.addEventListener("scroll", c, {
 			capture: !0,
 			passive: !0
 		}), () => document.removeEventListener("scroll", c, { capture: !0 });
 	}, [l]);
 	let { bounds: u } = r;
-	return /* @__PURE__ */ L(x, {
+	return /* @__PURE__ */ R(C, {
 		ref: n,
 		component: `${t.componentName}.header`,
 		props: {
@@ -2854,20 +2895,20 @@ function Zt(e) {
 		},
 		style: { gridTemplateColumns: t.gridTemplateColumns.value },
 		children: [
-			t.headerRows.value.map((e, t) => /* @__PURE__ */ I(i, {
+			t.headerRows.value.map((e, t) => /* @__PURE__ */ L(a, {
 				display: "contents",
 				props: {
 					role: "row",
 					"aria-rowindex": t + 1
 				},
-				children: e.map((e, n) => /* @__PURE__ */ I(Xt, {
+				children: e.map((e, n) => /* @__PURE__ */ L($t, {
 					column: e,
 					row: t,
 					columnIndex: n
 				}, e.uniqueKey))
 			}, t)),
-			/* @__PURE__ */ I(zt, { grid: t }),
-			o && u && /* @__PURE__ */ I(i, {
+			/* @__PURE__ */ L(Ht, { grid: t }),
+			o && u && /* @__PURE__ */ L(a, {
 				tag: "span",
 				component: `${t.componentName}.header.hover`,
 				variant: {
@@ -2886,65 +2927,65 @@ function Zt(e) {
 		]
 	});
 }
-Zt.displayName = "DataGridHeader";
-var Qt = D(Zt);
+en.displayName = "DataGridHeader";
+var tn = A(en);
 //#endregion
 //#region src/components/dataGrid/components/dataGridLoader.tsx
-function $t(e) {
+function nn(e) {
 	let { grid: t } = e;
-	return /* @__PURE__ */ I(i, {
+	return /* @__PURE__ */ L(a, {
 		component: `${t.componentName}.loader`,
 		props: { "aria-hidden": !0 },
-		children: /* @__PURE__ */ I(i, {
+		children: /* @__PURE__ */ L(a, {
 			component: `${t.componentName}.loader.track`,
 			style: { height: 3 },
-			children: /* @__PURE__ */ I(i, {
+			children: /* @__PURE__ */ L(a, {
 				component: `${t.componentName}.loader.track.bar`,
 				width: "2/5"
 			})
 		})
 	});
 }
-$t.displayName = "DataGridLoader";
+nn.displayName = "DataGridLoader";
 //#endregion
 //#region src/components/dataGrid/components/dataGridContent.tsx
-function en(e) {
-	let { grid: t } = e, n = N(null), [a, o] = P({
+function rn(e) {
+	let { grid: t } = e, n = P(null), [i, o] = F({
 		top: 0,
 		direction: "down"
-	}), s = N(null), c = O((e) => {
+	}), s = P(null), c = j((e) => {
 		o((t) => e === t.top ? t : {
 			top: e,
-			direction: ye.directionOf(t.top, e, t.direction)
+			direction: xe.directionOf(t.top, e, t.direction)
 		});
-	}, []), l = O((e) => {
+	}, []), l = j((e) => {
 		s.current !== null && cancelAnimationFrame(s.current), s.current = requestAnimationFrame(() => {
 			c(e.target.scrollTop), s.current = null;
 		});
-	}, [c]), { navigation: u, onKeyDown: d } = Ue({
+	}, [c]), { navigation: u, onKeyDown: d } = Ke({
 		grid: t,
 		scrollerRef: n,
-		scroll: a,
+		scroll: i,
 		onScrollTo: c
 	}), { source: f } = t, { queryVersion: p } = f;
 	r(() => {
 		f.enabled && n.current && (n.current.scrollTop = 0);
-	}, [f, p]), A(() => {
+	}, [f, p]), N(() => {
 		if (!f.enabled) return;
-		let { startIndex: e, take: r } = t.viewport.window(n.current?.scrollTop ?? 0, a.direction);
+		let { startIndex: e, take: r } = t.viewport.window(n.current?.scrollTop ?? 0, i.direction);
 		f.request(e, e + r);
 	}, [
 		t,
 		f,
 		p,
-		a,
+		i,
 		t.totalRowCount,
 		t.page,
 		t.pageSize,
 		t.expansionVersion
 	]);
 	let { range: m } = t, { isDragging: h } = m;
-	return A(() => {
+	return N(() => {
 		if (h) return window.addEventListener("pointerup", m.endDrag), window.addEventListener("pointercancel", m.endDrag), () => {
 			window.removeEventListener("pointerup", m.endDrag), window.removeEventListener("pointercancel", m.endDrag);
 		};
@@ -2955,9 +2996,9 @@ function en(e) {
 			t.setContainerWidth(e.clientWidth), t.paintSizes();
 		});
 		return r.observe(e), () => r.disconnect();
-	}, [t]), t.hasVisibleColumns ? /* @__PURE__ */ I(ge.Provider, {
+	}, [t]), t.hasVisibleColumns ? /* @__PURE__ */ L(ve.Provider, {
 		value: u,
-		children: /* @__PURE__ */ L(i, {
+		children: /* @__PURE__ */ R(a, {
 			ref: n,
 			component: `${t.componentName}.content`,
 			overflowX: "auto",
@@ -2975,33 +3016,33 @@ function en(e) {
 				onPaste: m.onPaste
 			},
 			children: [
-				/* @__PURE__ */ I(Qt, {
+				/* @__PURE__ */ L(tn, {
 					grid: t,
 					version: t.headerVersion
 				}),
-				(t.props.loading || f.isLoading) && /* @__PURE__ */ I($t, { grid: t }),
-				/* @__PURE__ */ I(Et, {
+				(t.props.loading || f.isLoading) && /* @__PURE__ */ L(nn, { grid: t }),
+				/* @__PURE__ */ L(kt, {
 					grid: t,
-					scroll: a
+					scroll: i
 				})
 			]
 		})
-	}) : /* @__PURE__ */ I(Dt, { grid: t });
+	}) : /* @__PURE__ */ L(At, { grid: t });
 }
-en.displayName = "DataGridContent";
+rn.displayName = "DataGridContent";
 //#endregion
 //#region src/components/dataGrid/components/dataGridDataSourceError.tsx
-function tn(e) {
+function an(e) {
 	let { grid: t } = e, { error: n } = t.source;
 	if (n === void 0) return null;
 	let r = n instanceof Error && n.message ? n.message : t.localeText.loadError;
-	return /* @__PURE__ */ L(h, {
+	return /* @__PURE__ */ R(_, {
 		component: `${t.componentName}.error`,
 		props: { role: "alert" },
-		children: [/* @__PURE__ */ I(i, {
+		children: [/* @__PURE__ */ L(a, {
 			component: `${t.componentName}.error.message`,
 			children: r
-		}), /* @__PURE__ */ I(p, {
+		}), /* @__PURE__ */ L(h, {
 			component: `${t.componentName}.error.retry`,
 			type: "button",
 			onClick: t.source.retry,
@@ -3009,87 +3050,87 @@ function tn(e) {
 		})]
 	});
 }
-tn.displayName = "DataGridDataSourceError";
+an.displayName = "DataGridDataSourceError";
 //#endregion
 //#region src/components/dataGrid/components/dataGridColumnGroups.tsx
-function nn(e) {
+function on(e) {
 	let { grid: t } = e;
-	return t.groupColumns.size === 0 ? null : /* @__PURE__ */ L(h, {
+	return t.groupColumns.size === 0 ? null : /* @__PURE__ */ R(_, {
 		component: `${t.componentName}.topBar.columnGroups`,
-		children: [/* @__PURE__ */ I(C, {
+		children: [/* @__PURE__ */ L(T, {
 			component: `${t.componentName}.topBar.columnGroups.icon`,
-			children: /* @__PURE__ */ I(Ht, {
+			children: /* @__PURE__ */ L(Gt, {
 				width: "100%",
 				fill: "currentColor"
 			})
-		}), t.groupedColumns.map((e) => /* @__PURE__ */ L(ee.Fragment, { children: [/* @__PURE__ */ I(Y, {
+		}), t.groupedColumns.map((e) => /* @__PURE__ */ R(D.Fragment, { children: [/* @__PURE__ */ L(Y, {
 			fill: "currentColor",
 			width: "14px",
 			height: "14px",
 			rotate: -90
-		}), /* @__PURE__ */ L(h, {
+		}), /* @__PURE__ */ R(_, {
 			component: `${t.componentName}.topBar.columnGroups.item`,
-			children: [e.header ?? e.key, /* @__PURE__ */ I(p, {
+			children: [e.header ?? e.key, /* @__PURE__ */ L(h, {
 				component: `${t.componentName}.topBar.columnGroups.item.icon`,
 				onClick: () => t.toggleGrouping(e.key),
 				props: { "aria-label": t.localeText.stopGrouping(String(e.header ?? e.key)) },
-				children: /* @__PURE__ */ I(i, {
+				children: /* @__PURE__ */ L(a, {
 					fontSize: 10,
-					color: "gray-400",
-					hover: { color: "gray-600" },
+					color: "base-400",
+					hover: { color: "base-600" },
 					children: "✕"
 				})
 			})]
 		})] }, e.key))]
 	});
 }
-nn.displayName = "DataGridColumnGroups";
+on.displayName = "DataGridColumnGroups";
 //#endregion
 //#region src/icons/searchIcon.tsx
-function rn(e) {
-	return /* @__PURE__ */ I(f, {
+function sn(e) {
+	return /* @__PURE__ */ L(m, {
 		viewBox: "0 0 488.4 488.4",
 		width: "1.5rem",
 		...e,
-		children: /* @__PURE__ */ I(d, { 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" })
+		children: /* @__PURE__ */ L(p, { 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/dataGridColumnsPanel.tsx
-var an = 6;
-function on(e) {
-	let { grid: t } = e, { columnVisibility: n, localeText: r, componentName: a } = t, { visibleCount: o, total: s, hasHidden: c } = n, [l, u] = P(!1), [m, h] = P(""), g = O((e) => {
-		u(e), e || h("");
+var cn = 6;
+function ln(e) {
+	let { grid: t } = e, { columnVisibility: n, localeText: r, componentName: i } = t, { visibleCount: o, total: s, hasHidden: c } = n, [l, u] = F(!1), [d, g] = F(""), _ = j((e) => {
+		u(e), e || g("");
 	}, []);
-	return /* @__PURE__ */ I(w, {
+	return /* @__PURE__ */ L(f, { children: /* @__PURE__ */ L(E, {
 		label: r.columnsMenu,
 		side: "bottom",
 		align: "end",
 		open: l,
-		onOpenChange: g,
+		onOpenChange: _,
 		autoFocus: !1,
 		p: 0,
 		overflow: "visible",
-		trigger: (e) => /* @__PURE__ */ L(p, {
+		trigger: (e) => /* @__PURE__ */ R(h, {
 			...e,
-			component: `${a}.topBar.columnVisibility`,
+			component: `${i}.topBar.columnVisibility`,
 			props: {
 				...e.props,
 				"aria-label": c ? r.columnsMenuLabel(o, s) : void 0
 			},
 			children: [
-				/* @__PURE__ */ I(f, {
+				/* @__PURE__ */ L(m, {
 					viewBox: "0 0 20 20",
 					width: 16,
 					height: 16,
 					fill: "none",
 					stroke: "currentColor",
 					strokeWidth: 1.6,
-					children: /* @__PURE__ */ I(d, { d: "M4.5 3.5h11a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1ZM8 3.5v13M12 3.5v13" })
+					children: /* @__PURE__ */ L(p, { d: "M4.5 3.5h11a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-11a1 1 0 0 1 1-1ZM8 3.5v13M12 3.5v13" })
 				}),
 				r.columnsMenu,
-				c && /* @__PURE__ */ L(i, {
-					component: `${a}.topBar.columnVisibility.badge`,
+				c && /* @__PURE__ */ R(a, {
+					component: `${i}.topBar.columnVisibility.badge`,
 					tag: "span",
 					variant: { empty: o === 0 },
 					props: { "aria-hidden": !0 },
@@ -3101,21 +3142,21 @@ function on(e) {
 				})
 			]
 		}),
-		children: /* @__PURE__ */ I(sn, {
+		children: /* @__PURE__ */ L(un, {
 			grid: t,
 			open: l,
-			query: m,
-			onQueryChange: h
+			query: d,
+			onQueryChange: g
 		})
-	});
+	}) });
 }
-on.displayName = "DataGridColumnsPanel";
-function sn({ grid: e, open: t, query: n, onQueryChange: r }) {
-	let { columnVisibility: a, localeText: o, componentName: s } = e, c = `${s}.topBar.columnVisibility`, l = N(null), u = N(null), d = a.total > an, f = a.search(n), m = a.sections(f), g = f.every((e) => e.visible), _ = f.every((e) => !e.visible);
-	A(() => {
+ln.displayName = "DataGridColumnsPanel";
+function un({ grid: e, open: t, query: n, onQueryChange: r }) {
+	let { columnVisibility: i, localeText: o, componentName: s } = e, c = `${s}.topBar.columnVisibility`, l = P(null), u = P(null), d = i.total > cn, f = i.search(n), p = i.sections(f), m = f.every((e) => e.visible), g = f.every((e) => !e.visible);
+	N(() => {
 		t && (u.current ?? l.current?.querySelector("input"))?.focus();
 	}, [t]);
-	let v = O((e) => {
+	let v = j((e) => {
 		if (![
 			"ArrowDown",
 			"ArrowUp",
@@ -3132,20 +3173,20 @@ function sn({ grid: e, open: t, query: n, onQueryChange: r }) {
 		}[e.key];
 		e.preventDefault(), i?.focus();
 	}, []);
-	return /* @__PURE__ */ L(h, {
+	return /* @__PURE__ */ R(_, {
 		ref: l,
 		component: `${c}.panel`,
 		props: { onKeyDown: v },
 		children: [
-			d && /* @__PURE__ */ L(h, {
+			d && /* @__PURE__ */ R(_, {
 				component: `${c}.search`,
-				children: [/* @__PURE__ */ I(h, {
+				children: [/* @__PURE__ */ L(_, {
 					component: `${c}.searchIcon`,
-					children: /* @__PURE__ */ I(rn, {
+					children: /* @__PURE__ */ L(sn, {
 						fill: "currentColor",
 						width: "14px"
 					})
-				}), /* @__PURE__ */ I(y, {
+				}), /* @__PURE__ */ L(x, {
 					ref: u,
 					component: `${c}.searchInput`,
 					value: n,
@@ -3158,40 +3199,40 @@ function sn({ grid: e, open: t, query: n, onQueryChange: r }) {
 					}
 				})]
 			}),
-			/* @__PURE__ */ L(h, {
+			/* @__PURE__ */ R(_, {
 				component: `${c}.toolbar`,
-				children: [/* @__PURE__ */ I(i, {
+				children: [/* @__PURE__ */ L(a, {
 					component: `${c}.count`,
-					children: o.columnsMenuShown(a.visibleCount, a.total)
-				}), /* @__PURE__ */ L(h, {
+					children: o.columnsMenuShown(i.visibleCount, i.total)
+				}), /* @__PURE__ */ R(_, {
 					gap: 1,
-					children: [/* @__PURE__ */ I(p, {
+					children: [/* @__PURE__ */ L(h, {
 						component: `${c}.action`,
-						disabled: g,
-						onClick: () => a.setAll(!0, f),
+						disabled: m,
+						onClick: () => i.setAll(!0, f),
 						children: o.columnsMenuShowAll
-					}), /* @__PURE__ */ I(p, {
+					}), /* @__PURE__ */ L(h, {
 						component: `${c}.action`,
-						disabled: _,
-						onClick: () => a.setAll(!1, f),
+						disabled: g,
+						onClick: () => i.setAll(!1, f),
 						children: o.columnsMenuHideAll
 					})]
 				})]
 			}),
-			/* @__PURE__ */ L(h, {
+			/* @__PURE__ */ R(_, {
 				component: `${c}.list`,
-				children: [m.map((e, t) => /* @__PURE__ */ L(h, {
+				children: [p.map((e, t) => /* @__PURE__ */ R(_, {
 					component: `${c}.section`,
 					variant: { divided: t > 0 && !e.group },
 					props: e.group ? {
 						role: "group",
 						"aria-label": e.group
 					} : void 0,
-					children: [e.group && /* @__PURE__ */ I(i, {
+					children: [e.group && /* @__PURE__ */ L(a, {
 						component: `${c}.group`,
 						props: { "aria-hidden": !0 },
 						children: e.group
-					}), e.entries.map((e) => /* @__PURE__ */ I(T, {
+					}), e.entries.map((e) => /* @__PURE__ */ L(ee, {
 						checked: e.visible,
 						onChange: () => e.column.toggleVisibility(),
 						label: e.label,
@@ -3200,7 +3241,7 @@ function sn({ grid: e, open: t, query: n, onQueryChange: r }) {
 							display: "flex"
 						}
 					}, e.id))]
-				}, `${e.group ?? ""}-${t}`)), f.length === 0 && /* @__PURE__ */ I(i, {
+				}, `${e.group ?? ""}-${t}`)), f.length === 0 && /* @__PURE__ */ L(a, {
 					component: `${c}.empty`,
 					props: { role: "status" },
 					children: o.columnsMenuNoMatch(n.trim())
@@ -3211,18 +3252,18 @@ function sn({ grid: e, open: t, query: n, onQueryChange: r }) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridExport.tsx
-function cn(e) {
-	let { grid: t } = e, n = t.exportConfig, r = O(() => void t.exportCsv(n).catch(() => void 0), [t, n]), i = O(() => void t.exportXlsx(n).catch(() => void 0), [t, n]);
-	return n ? /* @__PURE__ */ L(h, {
+function dn(e) {
+	let { grid: t } = e, n = t.exportConfig, r = j(() => void t.exportCsv(n).then(() => t.reportInteraction("export", "csv", "toolbar"), () => void 0), [t, n]), i = j(() => void t.exportXlsx(n).then(() => t.reportInteraction("export", "xlsx", "toolbar"), () => void 0), [t, n]);
+	return n ? /* @__PURE__ */ R(_, {
 		component: `${t.componentName}.topBar.export`,
 		ai: "center",
 		gap: 2,
-		children: [n.csv !== !1 && /* @__PURE__ */ I(ln, {
+		children: [n.csv !== !1 && /* @__PURE__ */ L(fn, {
 			componentName: t.componentName,
 			onClick: r,
 			label: t.localeText.exportCsvLabel,
 			children: t.localeText.exportCsv
-		}), n.xlsx !== !1 && /* @__PURE__ */ I(ln, {
+		}), n.xlsx !== !1 && /* @__PURE__ */ L(fn, {
 			componentName: t.componentName,
 			onClick: i,
 			label: t.localeText.exportExcelLabel,
@@ -3230,25 +3271,25 @@ function cn(e) {
 		})]
 	}) : null;
 }
-cn.displayName = "DataGridExport";
-function ln(e) {
+dn.displayName = "DataGridExport";
+function fn(e) {
 	let { componentName: t, onClick: n, label: r, children: i } = e;
-	return /* @__PURE__ */ L(p, {
+	return /* @__PURE__ */ R(h, {
 		component: `${t}.topBar.export.button`,
 		onClick: n,
 		props: { "aria-label": r },
-		children: [/* @__PURE__ */ L(f, {
+		children: [/* @__PURE__ */ R(m, {
 			viewBox: "0 0 20 20",
 			width: 16,
 			height: 16,
 			fill: "none",
 			stroke: "currentColor",
 			strokeWidth: 1.6,
-			children: [/* @__PURE__ */ I(d, {
+			children: [/* @__PURE__ */ L(p, {
 				d: "M10 3v9m0 0 3.5-3.5M10 12 6.5 8.5",
 				strokeLinecap: "round",
 				strokeLinejoin: "round"
-			}), /* @__PURE__ */ I(d, {
+			}), /* @__PURE__ */ L(p, {
 				d: "M3.5 13.5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2",
 				strokeLinecap: "round"
 			})]
@@ -3257,38 +3298,38 @@ function ln(e) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridGlobalFilter.tsx
-function un(e) {
-	let { grid: t } = e, [n, r] = P(t.globalFilterValue), { debounce: a, cancel: o } = jt(t.globalFilterValue, (e) => e === n, r), s = O((e) => {
+function pn(e) {
+	let { grid: t } = e, [n, r] = F(t.globalFilterValue), { debounce: i, cancel: o } = Pt(t.globalFilterValue, (e) => e === n, r), s = j((e) => {
 		let n = e.target.value;
-		r(n), a("value", () => t.filter.setGlobalFilter(n));
-	}, [t, a]), c = O(() => {
+		r(n), i("value", () => t.filter.setGlobalFilter(n));
+	}, [t, i]), c = j(() => {
 		o(), r(""), t.filter.setGlobalFilter("");
 	}, [t, o]), { filtered: l, total: u } = t.filter.filterStats, d = !t.props.def.bottomBar && t.filter.hasActiveFilters && l !== u;
-	return /* @__PURE__ */ L(h, {
+	return /* @__PURE__ */ R(_, {
 		component: `${t.componentName}.topBar.globalFilter`,
-		children: [d && /* @__PURE__ */ L(i, {
+		children: [d && /* @__PURE__ */ R(a, {
 			component: `${t.componentName}.topBar.globalFilter.stats`,
 			children: [
 				l,
 				"/",
 				u
 			]
-		}), /* @__PURE__ */ L(h, {
+		}), /* @__PURE__ */ R(_, {
 			position: "relative",
 			ai: "center",
 			children: [
-				/* @__PURE__ */ I(h, {
+				/* @__PURE__ */ L(_, {
 					position: "absolute",
 					insetStart: 3,
 					pointerEvents: "none",
-					color: "gray-400",
-					theme: { dark: { color: "gray-500" } },
-					children: /* @__PURE__ */ I(rn, {
+					color: "base-400",
+					theme: { dark: { color: "base-500" } },
+					children: /* @__PURE__ */ L(sn, {
 						fill: "currentColor",
 						width: "14px"
 					})
 				}),
-				/* @__PURE__ */ I(y, {
+				/* @__PURE__ */ L(x, {
 					placeholder: t.localeText.searchPlaceholder,
 					variant: "compact",
 					value: n,
@@ -3296,19 +3337,19 @@ function un(e) {
 					ps: 8,
 					pe: n ? 8 : 3
 				}),
-				n && /* @__PURE__ */ I(i, {
+				n && /* @__PURE__ */ L(a, {
 					position: "absolute",
 					insetEnd: 2,
 					cursor: "pointer",
 					p: 1,
-					color: "gray-400",
-					hover: { color: "gray-600" },
+					color: "base-400",
+					hover: { color: "base-600" },
 					theme: { dark: {
-						color: "gray-500",
-						hover: { color: "gray-300" }
+						color: "base-500",
+						hover: { color: "base-300" }
 					} },
 					props: { onClick: c },
-					children: /* @__PURE__ */ I(i, {
+					children: /* @__PURE__ */ L(a, {
 						fontSize: 12,
 						fontWeight: 600,
 						children: "✕"
@@ -3320,52 +3361,52 @@ function un(e) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridTopBar.tsx
-function dn(e) {
-	let { grid: t } = e, { title: n, topBarContent: r, globalFilter: a } = t.props.def;
-	return /* @__PURE__ */ L(h, {
+function mn(e) {
+	let { grid: t } = e, { title: n, topBarContent: r, globalFilter: i } = t.props.def;
+	return /* @__PURE__ */ R(_, {
 		component: `${t.componentName}.topBar`,
 		position: "relative",
 		d: "column",
 		gap: 3,
-		children: [/* @__PURE__ */ L(h, {
+		children: [/* @__PURE__ */ R(_, {
 			ai: "center",
 			jc: "space-between",
 			gap: 4,
 			flexWrap: "wrap",
 			width: "fit",
-			children: [/* @__PURE__ */ L(h, {
+			children: [/* @__PURE__ */ R(_, {
 				ai: "center",
 				gap: 3,
 				flexWrap: "wrap",
 				minWidth: 0,
-				children: [n && /* @__PURE__ */ I(i, {
+				children: [n && /* @__PURE__ */ L(a, {
 					id: t.titleId,
 					fontWeight: 600,
 					fontSize: 16,
-					color: "gray-800",
-					theme: { dark: { color: "gray-100" } },
+					color: "base-800",
+					theme: { dark: { color: "base-100" } },
 					children: n
-				}), /* @__PURE__ */ I(nn, { grid: t })]
-			}), /* @__PURE__ */ L(h, {
+				}), /* @__PURE__ */ L(on, { grid: t })]
+			}), /* @__PURE__ */ R(_, {
 				ai: "center",
 				gap: 3,
 				flexWrap: "wrap",
 				children: [
-					a && /* @__PURE__ */ I(un, { grid: t }),
-					/* @__PURE__ */ I(on, { grid: t }),
-					/* @__PURE__ */ I(cn, { grid: t })
+					i && /* @__PURE__ */ L(pn, { grid: t }),
+					/* @__PURE__ */ L(ln, { grid: t }),
+					/* @__PURE__ */ L(dn, { grid: t })
 				]
 			})]
-		}), r && /* @__PURE__ */ I(i, {
+		}), r && /* @__PURE__ */ L(a, {
 			width: "fit",
 			children: r
 		})]
 	});
 }
-dn.displayName = "DataGridTopBar";
+mn.displayName = "DataGridTopBar";
 //#endregion
 //#region src/utils/string/fuzzySearch.ts
-function fn(e, t) {
+function hn(e, t) {
 	if (!e) return {
 		score: 1,
 		matches: []
@@ -3378,16 +3419,16 @@ function fn(e, t) {
 		matches: o
 	});
 }
-function pn(e, t) {
-	return fn(e, t) !== null;
+function gn(e, t) {
+	return hn(e, t) !== null;
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridCellRowDetail.tsx
-function mn(e) {
-	let { cell: t } = e, n = t.isExpanded, r = O((e) => {
+function _n(e) {
+	let { cell: t } = e, n = t.isExpanded, r = j((e) => {
 		e.stopPropagation(), t.toggleDetail();
 	}, [t]);
-	return /* @__PURE__ */ I(p, {
+	return /* @__PURE__ */ L(h, {
 		component: `${t.grid.componentName}.body.cell.rowDetail`,
 		variant: { isExpanded: n },
 		type: "button",
@@ -3403,7 +3444,7 @@ function mn(e) {
 			"aria-label": (n ? t.grid.localeText.collapseRowDetail : t.grid.localeText.expandRowDetail)(t.row.rowIndex + 1),
 			"aria-expanded": n
 		},
-		children: /* @__PURE__ */ I(Y, {
+		children: /* @__PURE__ */ L(Y, {
 			fill: "currentColor",
 			width: "14px",
 			height: "14px",
@@ -3411,14 +3452,14 @@ function mn(e) {
 		})
 	});
 }
-mn.displayName = "DataGridCellRowDetail";
+_n.displayName = "DataGridCellRowDetail";
 //#endregion
 //#region src/components/dataGrid/components/dataGridCellRowSelection.tsx
-function hn(e) {
-	let { cell: t } = e, n = O(() => {
+function vn(e) {
+	let { cell: t } = e, n = j(() => {
 		t.toggleSelection();
 	}, [t]);
-	return /* @__PURE__ */ I(g, {
+	return /* @__PURE__ */ L(v, {
 		variant: "datagrid",
 		checked: t.selected,
 		indeterminate: t.indeterminate,
@@ -3429,15 +3470,15 @@ function hn(e) {
 		}
 	});
 }
-hn.displayName = "DataGridCellRowSelection";
+vn.displayName = "DataGridCellRowSelection";
 //#endregion
 //#region src/components/dataGrid/contracts/dataGridContract.ts
-function gn(e) {
+function yn(e) {
 	if (e) return e === "LEFT" ? "START" : e === "RIGHT" ? "END" : e;
 }
 //#endregion
 //#region src/components/dataGrid/models/headerCellModel.ts
-var _n = 1e3, vn = class {
+var bn = 1e3, xn = class {
 	column;
 	constructor(e) {
 		this.column = e;
@@ -3514,7 +3555,7 @@ var _n = 1e3, vn = class {
 		return Math.max(1, this.column.leafs.length) * this.grid.MIN_COLUMN_WIDTH_PX;
 	}
 	get maxWidth() {
-		return Math.max(this.grid.containerWidth || _n, this.width, this.minWidth);
+		return Math.max(this.grid.containerWidth || bn, this.width, this.minWidth);
 	}
 	get paddingStart() {
 		if (!this.column.isRowSelection) return this.column.isEndAligned ? 10 : 3;
@@ -3535,6 +3576,7 @@ var _n = 1e3, vn = class {
 			isPillBeforeResizer: this.hasHoverPill && this.showResizer && this.column.pin !== "END",
 			isPillAfterResizer: this.hasHoverPill && this.showResizer && this.column.pin === "END",
 			isRowNumber: this.column.isRowNumber,
+			isGroup: !this.column.isLeaf,
 			isFirstLeaf: this.column.isFirstLeaf,
 			isLastLeaf: this.column.isLastLeaf
 		};
@@ -3599,15 +3641,15 @@ var _n = 1e3, vn = class {
 			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 = gn(t.pin);
+			this._inlineWidth = e ?? this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = yn(t.pin);
 		}
 	}
 	columns = [];
 	get kind() {
 		switch (this.key) {
-			case Ge: return "rowNumber";
-			case Ke: return "rowSelection";
-			case qe: return "rowDetail";
+			case Je: return "rowNumber";
+			case Ye: return "rowSelection";
+			case Xe: return "rowDetail";
 			case K: return "grouping";
 			default: return "data";
 		}
@@ -3663,7 +3705,7 @@ var _n = 1e3, vn = class {
 			insetInlineEnd: t ? `var(${this.inlineEndVarName})` : void 0
 		};
 	}, () => [this.pinFlags]);
-	_headerCell = q(() => new vn(this));
+	_headerCell = q(() => new xn(this));
 	get headerCell() {
 		return this._headerCell.value;
 	}
@@ -3913,7 +3955,7 @@ var _n = 1e3, vn = class {
 		this.applyResize(e), this.grid.notify();
 	};
 	endResize = () => {
-		this.grid.notify();
+		this.grid.notify(), this.grid.reportInteraction("columnResize", this.leafs.reduce((e, t) => e + (t.inlineWidth ?? t.baseWidth), 0), "resize", { columnKey: this.key });
 	};
 	moveResizer = (e) => {
 		this.beginResize(0), this.applyResize(e);
@@ -3923,8 +3965,12 @@ var _n = 1e3, vn = class {
 		this.moveResizer((e - t) * this.resizeSign);
 	};
 	pinColumn = (e) => {
-		this.isLeaf ? this._pin = gn(e) : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
+		let t = this.pin;
+		this.setPin(e), this.pin !== t && this.grid.reportInteraction("columnPinChange", this.pin, this.pin ? "pin" : "unpin", { columnKey: this.key });
 	};
+	setPin(e) {
+		this.isLeaf ? this._pin = yn(e) : this.columns.forEach((t) => t.setPin(e)), this.grid.pinColumn(this.uniqueKey, e);
+	}
 	toggleGrouping = () => {
 		this.grid.toggleGrouping(this.key);
 	};
@@ -3938,7 +3984,7 @@ var _n = 1e3, vn = class {
 	toggleVisibility = () => {
 		this.grid.toggleColumnVisibility(this.key);
 	};
-}, yn = class {
+}, Sn = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -3991,26 +4037,25 @@ var _n = 1e3, vn = class {
 		});
 	};
 	setAll = (e, t = this.entries) => {
-		t.forEach((t) => {
-			t.visible !== e && t.column.toggleVisibility();
-		});
+		let n = t.filter((t) => t.visible !== e);
+		n.length !== 0 && (this.grid.quietly(() => n.forEach((e) => e.column.toggleVisibility())), this.grid.reportInteraction("columnVisibilityChange", e, e ? "show-all" : "hide-all", { columnKeys: n.map((e) => e.column.key) }));
 	};
 };
 //#endregion
 //#region src/utils/array/lazyList.ts
-function bn(e, t) {
+function Cn(e, t) {
 	return new Proxy([], {
 		get(n, r, i) {
 			if (r === "length") return e;
-			let a = xn(r, e);
+			let a = wn(r, e);
 			return a === void 0 ? Reflect.get(n, r, i) : t(a);
 		},
 		has(t, n) {
-			return xn(n, e) !== void 0 || Reflect.has(t, n);
+			return wn(n, e) !== void 0 || Reflect.has(t, n);
 		},
 		getOwnPropertyDescriptor(n, r) {
-			return xn(r, e) === void 0 ? Reflect.getOwnPropertyDescriptor(n, r) : {
-				value: t(xn(r, e)),
+			return wn(r, e) === void 0 ? Reflect.getOwnPropertyDescriptor(n, r) : {
+				value: t(wn(r, e)),
 				writable: !0,
 				enumerable: !0,
 				configurable: !0
@@ -4018,7 +4063,7 @@ function bn(e, t) {
 		}
 	});
 }
-function xn(e, t) {
+function wn(e, t) {
 	if (typeof e != "string") return;
 	let n = Number(e);
 	return Number.isInteger(n) && n >= 0 && n < t ? n : void 0;
@@ -4149,7 +4194,7 @@ var $ = class e {
 			}), this.source.changed());
 		});
 	}
-}, Sn = class extends it {
+}, Tn = class extends st {
 	level;
 	constructor(e, t, n, r) {
 		super(e, n, [], r, ""), this.level = t;
@@ -4171,7 +4216,7 @@ var $ = class e {
 		return [...this.level.groupKeys, this.groupValue];
 	}
 	get key() {
-		return this.placeholder ? `${this.level.placeholderKey}-group-${this.rowIndex}` : Cn(this.groupKeys);
+		return this.placeholder ? `${this.level.placeholderKey}-group-${this.rowIndex}` : En(this.groupKeys);
 	}
 	get depth() {
 		return this.level.depth;
@@ -4207,21 +4252,21 @@ var $ = class e {
 		this.placeholder || this.grid.toggleGroupRow(this.key);
 	}
 };
-function Cn(e) {
+function En(e) {
 	return `rb-group:${$.keyOf(e)}`;
 }
 //#endregion
 //#region src/components/dataGrid/models/sourceRowModel.ts
-var wn = {}, Tn = class extends U {
+var Dn = {}, On = class extends U {
 	sourceLevel;
 	constructor(e, t, n) {
-		super(e, wn, n), this.sourceLevel = t;
+		super(e, Dn, n), this.sourceLevel = t;
 	}
 	get row() {
 		return this.sourceLevel.rowAt(this.rowIndex);
 	}
 	get data() {
-		return this.row ?? wn;
+		return this.row ?? Dn;
 	}
 	get placeholder() {
 		return this.row === void 0;
@@ -4239,7 +4284,7 @@ var wn = {}, Tn = class extends U {
 	get selected() {
 		return !this.placeholder && super.selected;
 	}
-}, En = class extends Tn {
+}, kn = class extends On {
 	isTreeRow = !0;
 	get level() {
 		return this.sourceLevel.depth;
@@ -4259,7 +4304,7 @@ var wn = {}, Tn = class extends U {
 	toggleTree = () => {
 		this.hasChildren && this.grid.tree.toggle(this.key, this.level);
 	};
-}, Dn = 100, On = 40, kn = class {
+}, An = 100, jn = 40, Mn = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -4285,11 +4330,11 @@ var wn = {}, Tn = class extends U {
 	}
 	get blockSize() {
 		let e = this.config?.blockSize;
-		return e && e > 0 ? Math.floor(e) : this.grid.isPaginated ? this.grid.pageSize : Dn;
+		return e && e > 0 ? Math.floor(e) : this.grid.isPaginated ? this.grid.pageSize : An;
 	}
 	get maxBlocks() {
 		let e = this.config?.maxBlocks;
-		return e && e > 0 ? Math.floor(e) : On;
+		return e && e > 0 ? Math.floor(e) : jn;
 	}
 	get queryVersion() {
 		return this._query;
@@ -4344,7 +4389,7 @@ var wn = {}, Tn = class extends U {
 		return e.loadedBlocks().forEach(({ index: a, rows: o }) => {
 			o.forEach((o, s) => {
 				let c = [...e.path, o[r]];
-				if (!t.has(Cn(c))) return;
+				if (!t.has(En(c))) return;
 				let l = a * n + s;
 				i.push({
 					rowIndex: l,
@@ -4398,20 +4443,20 @@ var wn = {}, Tn = class extends U {
 	listLength = -1;
 	rowList() {
 		let { start: e } = this.visibleRange();
-		return this.listLength = this.visibleLength(), bn(this.listLength, (t) => this.rowModelAt(e + t));
+		return this.listLength = this.visibleLength(), Cn(this.listLength, (t) => this.rowModelAt(e + t));
 	}
 	flatRowList(e) {
 		let t = this.detailPositions();
-		return t.length === 0 ? e : bn(e.length + t.length, (n) => {
-			let r = jn(t, n);
+		return t.length === 0 ? e : Cn(e.length + t.length, (n) => {
+			let r = Pn(t, n);
 			return t[r] === n ? new H(this.grid, e[n - r - 1]) : e[n - r];
 		});
 	}
 	rowOffsets(e) {
 		let { rowHeight: t } = this.grid, n = this.detailPositions(), r = [0];
 		return n.forEach((t, n) => r.push(r[n] + e[t].heightForOffset)), {
-			offsets: bn(e.length, (e) => {
-				let i = jn(n, e);
+			offsets: Cn(e.length, (e) => {
+				let i = Pn(n, e);
 				return (e - i) * t + r[i];
 			}),
 			totalHeight: (e.length - n.length) * t + r[n.length]
@@ -4440,7 +4485,7 @@ var wn = {}, Tn = class extends U {
 			let i = this.levels.get(r);
 			!i || i.isGroupLevel || i.loadedBlocks().forEach(({ index: r, rows: i }) => {
 				i.forEach((i, a) => {
-					let o = An(n, r * t + a);
+					let o = Nn(n, r * t + a);
 					o !== void 0 && e(o, i);
 				});
 			});
@@ -4448,11 +4493,11 @@ var wn = {}, Tn = class extends U {
 	}
 	rowModelAt(e) {
 		let t = this.segmentAt(e);
-		if (!t) return new Tn(this.grid, this.root, e);
+		if (!t) return new On(this.grid, this.root, e);
 		let { level: n } = t, r = t.levelStart + (e - t.start), i = this.models.get(n.key);
 		i || this.models.set(n.key, i = /* @__PURE__ */ new Map());
 		let a = i.get(r);
-		return a || (a = n.isGroupLevel ? new Sn(this.grid, n, this.groupColumnAt(n.depth), r) : this.isTree ? new En(this.grid, n, r) : new Tn(this.grid, n, r), i.set(r, a)), a;
+		return a || (a = n.isGroupLevel ? new Tn(this.grid, n, this.groupColumnAt(n.depth), r) : this.isTree ? new kn(this.grid, n, r) : new On(this.grid, n, r), i.set(r, a)), a;
 	}
 	groupColumnAt(e) {
 		return G.findOrThrow(this.grid.columns.value.leafs, (t) => t.key === this.groupBy[e]);
@@ -4504,7 +4549,7 @@ var wn = {}, Tn = class extends U {
 		let e = !1;
 		this.levels.forEach((t) => {
 			t.failedBlocks().length !== 0 && (t.retry(), e = !0);
-		}), e && this.changed();
+		}), e && (this.changed(), this.grid.reportInteraction("retry", void 0, "retry"));
 	};
 	invalidate() {
 		if (!this.enabled) return;
@@ -4541,10 +4586,10 @@ var wn = {}, Tn = class extends U {
 		this._segments = void 0, this._byLevel = void 0, this.listLength !== this.visibleLength() && this.grid.rows.clear(), this.grid.flatRows.clear(), this.grid.notify();
 	}
 };
-function An(e, t) {
+function Nn(e, t) {
 	for (let n of e) if (t >= n.levelStart && t < n.levelStart + n.length) return n.start + (t - n.levelStart);
 }
-function jn(e, t) {
+function Pn(e, t) {
 	let n = 0, r = e.length;
 	for (; n < r;) {
 		let i = n + r >>> 1;
@@ -4554,7 +4599,7 @@ function jn(e, t) {
 }
 //#endregion
 //#region src/components/dataGrid/models/exportModel.ts
-var Mn = 7, Nn = class {
+var Fn = 7, In = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -4568,7 +4613,7 @@ var Mn = 7, Nn = class {
 	}
 	width(e) {
 		let t = e.inlineWidth ?? this.grid.DEFAULT_COLUMN_WIDTH_PX;
-		return Math.min(80, Math.max(6, Math.round(t / Mn * 10) / 10));
+		return Math.min(80, Math.max(6, Math.round(t / Fn * 10) / 10));
 	}
 	value(e, t) {
 		let { exportValue: n } = e.def, r = n ? n(t) : t[e.key];
@@ -4576,7 +4621,7 @@ var Mn = 7, Nn = class {
 	}
 	aggregateOf(e, t) {
 		let n = e.aggregate;
-		return n ? et(n, t.map((t) => this.value(e, t)), t) : null;
+		return n ? rt(n, t.map((t) => this.value(e, t)), t) : null;
 	}
 	table(e = {}) {
 		let t = this.columns(e.columns), n = e.groups ?? !0, r = [], i = (e, a, o) => {
@@ -4640,7 +4685,7 @@ var Mn = 7, Nn = class {
 		let { title: t } = this.grid.props.def, n = typeof t == "string" && t.trim() ? t.trim() : this.grid.localeText.exportFileName;
 		return e.fileName?.trim() || n;
 	}
-}, Pn = class {
+}, Ln = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -4662,7 +4707,7 @@ var Mn = 7, Nn = class {
 	}
 	setGlobalFilter = (e) => this.grid.setGlobalFilter(e);
 	clearAllFilters = () => this.grid.clearAllFilters();
-}, Fn = class {
+}, Rn = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -4758,14 +4803,14 @@ var Mn = 7, Nn = class {
 		this._limit = {
 			query: this.query,
 			count: this.count + this.batch
-		}, this.grid.notify();
+		}, this.grid.notify(), this.grid.reportInteraction("showMore", this._limit.count, "more", { batch: this.batch });
 	};
 	_selecting = !1;
 	get selecting() {
 		return !!this.grid.props.def.rowSelection && this._selecting;
 	}
 	setSelecting = (e) => {
-		this._selecting !== e && (this._selecting = e, this.grid.notify());
+		this._selecting !== e && (this._selecting = e, this.grid.notify(), this.grid.reportInteraction("selectModeChange", e, e ? "enter" : "exit"));
 	};
 	checkboxId(e) {
 		return `${this.grid.identifier}-pick-${encodeURIComponent(String(e))}`;
@@ -4775,7 +4820,7 @@ var Mn = 7, Nn = class {
 		return this._sheet;
 	}
 	openSheet = (e) => {
-		this._sheet !== e && (this._sheet = e, this.grid.notify());
+		this._sheet !== e && (this._sheet = e, this.grid.notify(), this.grid.reportInteraction("sheetChange", e, e ? "open" : "close"));
 	};
 	get sortableColumns() {
 		return this.grid.columns.value.visibleLeafs.filter((e) => e.isData && e.sortable);
@@ -4801,23 +4846,23 @@ var Mn = 7, Nn = class {
 	describe(e, t) {
 		switch (t.type) {
 			case "text": return `“${t.value}”`;
-			case "number": return t.operator === "between" ? `${t.value}–${t.valueTo ?? ""}` : `${Ln[t.operator]} ${t.value}`;
+			case "number": return t.operator === "between" ? `${t.value}–${t.valueTo ?? ""}` : `${Bn[t.operator]} ${t.value}`;
 			case "multiselect": {
 				let n = e.filterOptions, r = t.values.map((e) => e === null ? this.grid.localeText.filterEmptyValue : n.find((t) => t.value === e)?.label ?? String(e)), i = r.slice(0, 2).join(", ");
 				return r.length > 2 ? `${i} +${r.length - 2}` : i;
 			}
-			case "date": return t.operator === "between" ? we()?.describeDay(t.value, t.valueTo ?? t.value) ?? `${t.value}–${t.valueTo ?? ""}` : `${Rn[t.operator]} ${we()?.describeDay(t.value) ?? t.value}`;
+			case "date": return t.operator === "between" ? Ee()?.describeDay(t.value, t.valueTo ?? t.value) ?? `${t.value}–${t.valueTo ?? ""}` : `${Vn[t.operator]} ${Ee()?.describeDay(t.value) ?? t.value}`;
 		}
 	}
 	_record = null;
 	get record() {
 		if (!this._record) return;
 		let e = this.grid.flatRows.value, { index: t, key: n } = this._record;
-		if (zn(e[t]) && e[t].key === n) return e[t];
+		if (Hn(e[t]) && e[t].key === n) return e[t];
 		let r = -1;
-		for (let t = 0; t < Math.min(e.length, In) && r === -1; t++) {
+		for (let t = 0; t < Math.min(e.length, zn) && r === -1; t++) {
 			let i = e[t];
-			zn(i) && i.key === n && (r = t);
+			Hn(i) && i.key === n && (r = t);
 		}
 		if (r !== -1) return this._record = {
 			index: r,
@@ -4831,17 +4876,17 @@ var Mn = 7, Nn = class {
 		this._record = {
 			index: t,
 			key: e.key
-		}, this.grid.notify();
+		}, this.grid.notify(), this.grid.reportInteraction("recordChange", e.key, "open", { index: t });
 	};
 	closeRecord = () => {
-		this._record && (this._record = null, this.grid.notify());
+		this._record && (this._record = null, this.grid.notify(), this.grid.reportInteraction("recordChange", null, "close"));
 	};
 	neighbour(e) {
 		if (!this.record || !this._record) return -1;
 		let t = this.grid.flatRows.value;
 		for (let n = this._record.index + e; n >= 0 && n < t.length; n += e) {
 			let e = t[n];
-			if (zn(e) && !e.placeholder) return n;
+			if (Hn(e) && !e.placeholder) return n;
 		}
 		return -1;
 	}
@@ -4856,7 +4901,7 @@ var Mn = 7, Nn = class {
 		t !== -1 && (this._record = {
 			index: t,
 			key: this.grid.flatRows.value[t].key
-		}, this._limit && t >= this._limit.count && (this._limit = {
+		}, this.grid.reportInteraction("recordChange", this._record.key, e === 1 ? "next" : "previous", { index: t }), this._limit && t >= this._limit.count && (this._limit = {
 			query: this.query,
 			count: t + 1
 		}), this.grid.notify());
@@ -4868,30 +4913,30 @@ var Mn = 7, Nn = class {
 			total: this.grid.totalRowCount
 		};
 		let e = this.grid.flatRows.value, t = 0, n = 0;
-		for (let r = 0; r < e.length; r++) zn(e[r]) && (n++, r <= this._record.index && t++);
+		for (let r = 0; r < e.length; r++) Hn(e[r]) && (n++, r <= this._record.index && t++);
 		return {
 			position: t,
 			total: n
 		};
 	}
-}, In = 1e4, Ln = {
+}, zn = 1e4, Bn = {
 	eq: "=",
 	ne: "≠",
 	gt: ">",
 	gte: "≥",
 	lt: "<",
 	lte: "≤"
-}, Rn = {
+}, Vn = {
 	on: "=",
 	before: "<",
 	after: ">"
 };
-function zn(e) {
+function Hn(e) {
 	return !!e && e.kind === "row";
 }
 //#endregion
 //#region src/components/dataGrid/models/localeText.ts
-var Bn = {
+var Un = {
 	searchPlaceholder: "Search...",
 	columnsMenu: "Columns",
 	columnsMenuLabel: (e, t) => `Columns, ${e} of ${t} shown`,
@@ -4988,7 +5033,7 @@ var Bn = {
 	selectedRows: (e) => `${e} selected`,
 	selectAll: "Select all",
 	selectionAnnouncement: (e, t) => e === 0 ? "No rows selected" : `${e} of ${t} rows selected`
-}, Vn = class {
+}, Wn = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -5044,16 +5089,16 @@ var Bn = {
 		let t = parseInt(e, 10);
 		isNaN(t) || this.grid.changePage(Math.max(1, Math.min(t, this.totalPages)));
 	};
-}, Hn = /["\t\r\n]/;
-function Un(e) {
+}, Gn = /["\t\r\n]/;
+function Kn(e) {
 	if (e == null) return "";
 	let t = e instanceof Date ? e.toISOString() : String(e);
-	return Hn.test(t) ? `"${t.split("\"").join("\"\"")}"` : t;
+	return Gn.test(t) ? `"${t.split("\"").join("\"\"")}"` : t;
 }
-function Wn(e) {
-	return e.map((e) => e.map(Un).join("	")).join("\r\n");
+function qn(e) {
+	return e.map((e) => e.map(Kn).join("	")).join("\r\n");
 }
-function Gn(e) {
+function Jn(e) {
 	let t = [], n = [], r = "", i = !1;
 	for (let a = 0; a < e.length; a++) {
 		let o = e[a];
@@ -5061,10 +5106,10 @@ function Gn(e) {
 	}
 	return (r !== "" || n.length > 0) && (n.push(r), t.push(n)), t;
 }
-function Kn(e, t) {
+function Yn(e, t) {
 	return e?.row === t?.row && e?.column === t?.column;
 }
-var qn = class {
+var Xn = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -5110,7 +5155,7 @@ var qn = class {
 			row: e,
 			column: t
 		}, i = n && this._anchor ? this._anchor : r;
-		Kn(this._focus, r) && Kn(this._anchor, i) || (this._anchor = i, this._focus = r, this.grid.notifyRows(), this.emit(n ? "extend" : "select"));
+		Yn(this._focus, r) && Yn(this._anchor, i) || (this._anchor = i, this._focus = r, this.grid.notifyRows(), this.emit(n ? "extend" : "select"));
 	}
 	syncCurrent(e, t) {
 		this.isCurrent(e, t) || this.setCurrent(e, t);
@@ -5125,7 +5170,7 @@ var qn = class {
 		this._dragging && this.setCurrent(e, t, !0);
 	}
 	endDrag = () => {
-		this._dragging && (this._dragging = !1, this.grid.notifyRows());
+		this._dragging && (this._dragging = !1, this.grid.notifyRows(), this.reportBlock());
 	};
 	columnsOf(e = this.bounds) {
 		return e ? this.grid.columns.value.visibleLeafs.slice(e.startColumn, e.endColumn + 1) : [];
@@ -5155,13 +5200,24 @@ var qn = class {
 		let e = this.bounds;
 		return e && this.rangeOf(e);
 	}
+	get block() {
+		let e = this.bounds;
+		return e && {
+			startRow: e.startRow,
+			endRow: e.endRow,
+			columns: this.columnsOf(e).map((e) => e.key)
+		};
+	}
 	emit(e) {
-		this.grid.props.onRangeChange?.(this.range, { reason: e });
+		this.grid.props.onRangeChange?.(this.range, { reason: e }), e === "extend" && !this._dragging && this.reportBlock();
+	}
+	reportBlock() {
+		this.enabled && this._anchor && !Yn(this._anchor, this._focus) && this.grid.reportInteraction("rangeChange", this.block, "extend");
 	}
 	onCopy = (e) => {
 		if (!this._focus || !e.clipboardData) return;
 		let t = e.currentTarget.ownerDocument.defaultView?.getSelection();
-		t && !t.isCollapsed || (e.clipboardData.setData("text/plain", Wn(this.values())), e.preventDefault());
+		t && !t.isCollapsed || (e.clipboardData.setData("text/plain", qn(this.values())), e.preventDefault(), this.grid.reportInteraction("copy", this.block, "copy"));
 	};
 	pasteBounds(e, t) {
 		let n = this.bounds;
@@ -5178,10 +5234,10 @@ var qn = class {
 		if (!this._focus || !e.clipboardData || this.grid.edits.isOpen || !this.grid.edits.enabled) return;
 		let t = e.clipboardData.getData("text/plain");
 		if (!t) return;
-		let n = Gn(t), r = n.reduce((e, t) => Math.max(e, t.length), 0), i = this.pasteBounds(n.length, r);
+		let n = Jn(t), r = n.reduce((e, t) => Math.max(e, t.length), 0), i = this.pasteBounds(n.length, r);
 		i && (e.preventDefault(), this.grid.edits.paste(i, (e, t) => n[e % n.length][t % r] ?? ""));
 	};
-}, Jn = class extends U {
+}, Zn = class extends U {
 	node;
 	level;
 	position;
@@ -5232,10 +5288,10 @@ var qn = class {
 };
 //#endregion
 //#region src/components/dataGrid/models/treeModel.ts
-function Yn(e) {
+function Qn(e) {
 	return JSON.stringify(e);
 }
-var Xn = class {
+var $n = class {
 	grid;
 	constructor(e) {
 		this.grid = e;
@@ -5289,9 +5345,9 @@ var Xn = class {
 				data: e,
 				children: []
 			};
-			n.set(Yn(r), i);
+			n.set(Qn(r), i);
 			let a;
-			for (let e = r.length - 1; e > 0 && !a; e--) a = n.get(Yn(r.slice(0, e)));
+			for (let e = r.length - 1; e > 0 && !a; e--) a = n.get(Qn(r.slice(0, e)));
 			(a ? a.children : t).push(i);
 		}), t;
 	}
@@ -5337,7 +5393,7 @@ var Xn = class {
 	}
 	rowList() {
 		let e = 0, t = (n, r, i) => n.map((a, o) => {
-			let s = new Jn(this.grid, a, e++, r, o, n.length, i);
+			let s = new Zn(this.grid, a, e++, r, o, n.length, i);
 			return s.treeExpanded && (s.children = t(a.children, r + 1, s)), s;
 		});
 		return t(this.nodes.value, 0);
@@ -5377,10 +5433,12 @@ var Xn = class {
 	}
 	toggle = (e, t) => {
 		let n = !this.isExpanded(e, t);
-		n ? (this._opened.add(e), this._closed.delete(e)) : (this._closed.add(e), this._opened.delete(e)), this.grid.treeExpansionChanged(), this.grid.props.onExpandedTreeKeysChange?.(this.expandedKeys(), { reason: n ? "expand" : "collapse" }), this.grid.notify();
+		n ? (this._opened.add(e), this._closed.delete(e)) : (this._closed.add(e), this._opened.delete(e)), this.grid.treeExpansionChanged();
+		let r = this.expandedKeys();
+		this.grid.fire("expandedTreeKeysChange", r, n ? "expand" : "collapse", { details: { rowKey: e } }), this.grid.notify();
 	};
-}, Zn = {};
-function Qn(e) {
+}, er = {};
+function tr(e) {
 	if (typeof e == "string" && /^\d{4}-\d{2}-\d{2}$/.test(e)) return e;
 	if (!(e instanceof Date) && typeof e != "string" && typeof e != "number") return null;
 	let t = e instanceof Date ? e : new Date(e);
@@ -5388,7 +5446,7 @@ function Qn(e) {
 	let n = (e) => String(e).padStart(2, "0");
 	return `${String(t.getFullYear()).padStart(4, "0")}-${n(t.getMonth() + 1)}-${n(t.getDate())}`;
 }
-var $n = class t {
+var nr = class e {
 	props;
 	constructor(e, t) {
 		this.props = e, t && this.listeners.add(t);
@@ -5419,9 +5477,9 @@ var $n = class t {
 	get headerVersion() {
 		return `${this._epoch}:${this._selectionVersion}`;
 	}
-	setProps(e) {
+	setProps(t) {
 		let n = this.props;
-		n !== e && (t.drawnPropsChanged(n, e) && this._epoch++, this.props = e, n.def !== e.def && this.sourceColumns.clear(), (n.data !== e.data || n.def !== e.def || n.globalFilterValue !== e.globalFilterValue || n.columnFilters !== e.columnFilters || n.filters !== e.filters || n.expandedRowKeys !== e.expandedRowKeys || n.expandedTreeKeys !== e.expandedTreeKeys || n.page !== e.page || n.pageSize !== e.pageSize) && this.rows.clear(), (n.globalFilterValue !== e.globalFilterValue || n.columnFilters !== e.columnFilters || n.filters !== e.filters) && this.leaveSelectionView(), (n.data !== e.data || n.def !== e.def || n.globalFilterValue !== e.globalFilterValue || n.columnFilters !== e.columnFilters || n.filters !== e.filters) && this.tree.nodes.clear());
+		n !== t && (e.drawnPropsChanged(n, t) && this._epoch++, this.props = t, n.def !== t.def && this.sourceColumns.clear(), (n.data !== t.data || n.def !== t.def || n.globalFilterValue !== t.globalFilterValue || n.columnFilters !== t.columnFilters || n.filters !== t.filters || n.expandedRowKeys !== t.expandedRowKeys || n.expandedTreeKeys !== t.expandedTreeKeys || n.page !== t.page || n.pageSize !== t.pageSize) && this.rows.clear(), (n.globalFilterValue !== t.globalFilterValue || n.columnFilters !== t.columnFilters || n.filters !== t.filters) && this.leaveSelectionView(), (n.data !== t.data || n.def !== t.def || n.globalFilterValue !== t.globalFilterValue || n.columnFilters !== t.columnFilters || n.filters !== t.filters) && this.tree.nodes.clear());
 	}
 	get data() {
 		return this.props.data ?? [];
@@ -5456,7 +5514,7 @@ var $n = class t {
 		let e = this.props.def.localeText, t = this._localeText;
 		if (t && t.from === e) return t.text;
 		let n = {
-			...Bn,
+			...Un,
 			...e
 		};
 		return this._localeText = {
@@ -5469,17 +5527,17 @@ var $n = class t {
 		if (this.groupColumns.size > 0 && t.push(new Q({ key: K }, this)), t.push(...e.columns.map((e) => new Q(e, this))), e.rowSelection) {
 			let n = typeof e.rowSelection == "object" && e.rowSelection.pinned ? "START" : void 0;
 			t.unshift(new Q({
-				key: Ke,
+				key: Ye,
 				pin: n,
 				width: 50,
 				align: "center",
-				Cell: hn
+				Cell: vn
 			}, 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 Q({
-				key: Ge,
+				key: Je,
 				pin: n,
 				width: r,
 				align: "end"
@@ -5488,12 +5546,12 @@ var $n = class t {
 		if (e.rowDetail) {
 			let n = e.rowDetail.pinned ? "START" : void 0, r = e.rowDetail.expandColumnWidth ?? 50, i = e.rowDetail.expandColumnHeader ?? "";
 			t.unshift(new Q({
-				key: qe,
+				key: Xe,
 				header: i,
 				pin: n,
 				width: r,
 				align: "center",
-				Cell: mn
+				Cell: _n
 			}, this));
 		}
 		return t;
@@ -5512,10 +5570,10 @@ var $n = class t {
 			leafs: i,
 			visibleLeafs: a,
 			userVisibleLeafs: a.filter((e) => ![
-				Ge,
-				Ke,
+				Je,
+				Ye,
 				K,
-				qe
+				Xe
 			].includes(e.key)),
 			maxDeath: G.maxBy(r, (e) => e.death) + 1
 		};
@@ -5552,7 +5610,7 @@ var $n = class t {
 		let t = this.globalFilterValue.trim();
 		return !t || this.globalFilterColumns.value.some((n) => {
 			let r = e[n];
-			return r != null && pn(t, String(r));
+			return r != null && gn(t, String(r));
 		});
 	}
 	matchesColumnFilters(e) {
@@ -5564,7 +5622,7 @@ var $n = class t {
 	}
 	matchesFilter(e, t) {
 		switch (t.type) {
-			case "text": return !t.value.trim() || e != null && pn(t.value, String(e));
+			case "text": return !t.value.trim() || e != null && gn(t.value, String(e));
 			case "number": {
 				if (e == null) return !1;
 				let n = typeof e == "number" ? e : parseFloat(String(e));
@@ -5582,7 +5640,7 @@ var $n = class t {
 			}
 			case "date": {
 				if (!t.value) return !0;
-				let n = Qn(e);
+				let n = tr(e);
 				if (!n) return !1;
 				switch (t.operator) {
 					case "on": return n === t.value;
@@ -5604,6 +5662,30 @@ var $n = class t {
 		}
 		return this.hasRowFilters ? this.data.filter((e) => this.rowMatchesFilters(e)) : this.data;
 	}
+	reportInteraction(e, t, n, r, a) {
+		this._batching || i({
+			component: "datagrid",
+			type: e,
+			reason: n,
+			value: t,
+			details: r,
+			content: a,
+			target: this._sizingElement ?? void 0
+		});
+	}
+	fire(e, t, n, r = {}) {
+		let i = this.props[`on${e.charAt(0).toUpperCase()}${e.slice(1)}`];
+		i?.(t, { reason: n }), r && this.reportInteraction(e, t, n, r.details, r.content);
+	}
+	_batching = !1;
+	quietly(e) {
+		this._batching = !0;
+		try {
+			e();
+		} finally {
+			this._batching = !1;
+		}
+	}
 	fireServerStateChange(e, t) {
 		this.props.onServerStateChange?.({
 			page: t?.page ?? this.page,
@@ -5615,34 +5697,41 @@ var $n = class t {
 		}, { reason: e });
 	}
 	firePaginationChange(e, t, n) {
-		this.props.onPaginationChange?.({
+		this.fire("paginationChange", {
 			page: e,
 			pageSize: t
-		}, { reason: n }), this.props.onPageChange?.(e, t);
+		}, n, (n === "page" || n === "page-size") && {}), this.props.onPageChange?.(e, t);
 	}
 	resetToFirstPage(e) {
 		return !this.isPaginated || this.page === 1 ? this.page : (this._page = 1, this.firePaginationChange(1, this.pageSize, e), 1);
 	}
 	setGlobalFilter = (e) => {
-		let t = e === "" ? "clear" : "filter";
-		this._globalFilterValue = e, this.leaveSelectionView(), this.props.onGlobalFilterChange?.(e, { reason: t });
-		let n = this.resetToFirstPage(t);
+		let t = e === "" ? "clear" : "filter", n = e !== this.globalFilterValue;
+		this._globalFilterValue = e, this.leaveSelectionView(), this.fire("globalFilterChange", e, t, n && { content: ["value"] });
+		let r = this.resetToFirstPage(t);
 		this.fireServerStateChange(t, {
 			globalFilterValue: e,
-			page: n
+			page: r
 		}), this.source.invalidate(), this.tree.nodes.clear(), this.rows.clear(), this.notify();
 	};
 	setColumnFilter = (e, t) => {
-		let n = { ...this.columnFilters }, r = t === void 0 ? "clear" : "filter";
-		t === void 0 ? delete n[e] : n[e] = t, this._columnFilters = n, this.leaveSelectionView(), this.props.onColumnFiltersChange?.(n, { reason: r });
-		let i = this.resetToFirstPage(r);
+		let n = { ...this.columnFilters }, r = t === void 0 ? "clear" : "filter", i = t !== void 0 || e in n;
+		t === void 0 ? delete n[e] : n[e] = t, this._columnFilters = n, this.leaveSelectionView(), this.fire("columnFiltersChange", n, r, i && {
+			details: {
+				columnKey: e,
+				filter: t
+			},
+			content: ["value", "filter"]
+		});
+		let a = this.resetToFirstPage(r);
 		this.fireServerStateChange(r, {
 			columnFilters: n,
-			page: i
+			page: a
 		}), this.source.invalidate(), this.tree.nodes.clear(), this.rows.clear(), this.notify();
 	};
 	clearColumnFilters = () => {
-		this._columnFilters = {}, this.leaveSelectionView(), this.props.onColumnFiltersChange?.({}, { reason: "clear" }), this.fireServerStateChange("clear", { columnFilters: {} }), this.source.invalidate(), this.tree.nodes.clear(), this.rows.clear(), this.notify();
+		let e = Object.keys(this.columnFilters).length > 0;
+		this._columnFilters = {}, this.leaveSelectionView(), this.fire("columnFiltersChange", {}, "clear", e && {}), this.fireServerStateChange("clear", { columnFilters: {} }), this.source.invalidate(), this.tree.nodes.clear(), this.rows.clear(), this.notify();
 	};
 	clearAllFilters = () => {
 		this.setGlobalFilter(""), this.clearColumnFilters();
@@ -5685,7 +5774,7 @@ var $n = class t {
 				return this._sortColumn === "grouping-cell" && (e = G.sortBy(e, (e) => e[i], this._sortDirection)), G.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 U(this, e, r + 1 + t));
-					let o = new it(this, a, i, r, e.key);
+					let o = new st(this, a, i, r, e.key);
 					return r += 1, o.expanded && (r += i.length), o;
 				});
 			};
@@ -5735,7 +5824,7 @@ var $n = class t {
 		e && Object.entries(this.sizes.value).forEach(([t, n]) => e.style.setProperty(t, n));
 	};
 	get isRtl() {
-		return e(this._sizingElement);
+		return n(this._sizingElement);
 	}
 	setContainerWidth = (e) => {
 		this._containerWidth !== e && (this._containerWidth = e, this.flexWidths.clear(), this.notify());
@@ -5773,7 +5862,7 @@ var $n = class t {
 		let t = new Set(this.expandedDetailRows);
 		t.has(e) ? t.delete(e) : t.add(e);
 		let n = t.has(e);
-		this._revealDetailKey = n && this.props.def.rowDetail?.scrollIntoView !== !1 ? e : null, this._expandedDetailRows = t, this.props.onExpandedRowKeysChange?.(Array.from(t), { reason: n ? "expand" : "collapse" }), this.rows.clear(), this.notify();
+		this._revealDetailKey = n && this.props.def.rowDetail?.scrollIntoView !== !1 ? e : null, this._expandedDetailRows = t, this.fire("expandedRowKeysChange", Array.from(t), n ? "expand" : "collapse", { details: { rowKey: e } }), this.rows.clear(), this.notify();
 	};
 	_page = 1;
 	_pageSize;
@@ -5826,23 +5915,23 @@ var $n = class t {
 			totalHeight: t
 		};
 	}, () => [this.flatRows]);
-	viewport = new ye(this);
-	columnVisibility = new yn(this);
-	filter = new Pn(this);
-	pagination = new Vn(this);
-	aggregation = new tt(this);
-	exporter = new Nn(this);
-	source = new kn(this);
-	tree = new Xn(this);
-	edits = new Re(this);
-	range = new qn(this);
-	list = new Fn(this);
+	viewport = new xe(this);
+	columnVisibility = new Sn(this);
+	filter = new Ln(this);
+	pagination = new Wn(this);
+	aggregation = new it(this);
+	exporter = new In(this);
+	source = new Mn(this);
+	tree = new $n(this);
+	edits = new Ve(this);
+	range = new Xn(this);
+	list = new Rn(this);
 	refresh = () => {
 		this.edits.clearEdits(), this.source.invalidate();
 	};
 	get exportConfig() {
 		let e = this.props.def.export;
-		if (e) return typeof e == "object" ? e : Zn;
+		if (e) return typeof e == "object" ? e : er;
 	}
 	exportCsv = async (e = {}) => {
 		let { downloadCsv: t } = await import("../gridExport.mjs");
@@ -5895,7 +5984,7 @@ var $n = class t {
 		return !!this.props.def.rowSelection && !this.source.enabled && !this.isPaginated && !this.tree.isEager;
 	}
 	toggleSelectionView = () => {
-		this._selectionView = this._selectionView ? null : new Set(this.selectedRows), this.rows.clear(), this.notify();
+		this._selectionView = this._selectionView ? null : new Set(this.selectedRows), this.reportInteraction("selectionViewChange", this._selectionView !== null, this._selectionView ? "show" : "hide"), this.rows.clear(), this.notify();
 	};
 	leaveSelectionView() {
 		this._selectionView = null;
@@ -5936,7 +6025,7 @@ var $n = class t {
 			columnKey: this._sortColumn,
 			direction: this._sortDirection
 		} : void 0;
-		this.props.onSortingChange?.(n, { reason: n ? "sort" : "clear" }), this.props.onSortChange?.(this._sortColumn, this._sortDirection);
+		this.fire("sortingChange", n, n ? "sort" : "clear", { details: { columnKey: e } }), this.props.onSortChange?.(this._sortColumn, this._sortDirection);
 		let r = this.resetToFirstPage("sort");
 		this.fireServerStateChange("sort", {
 			sortColumn: this._sortColumn,
@@ -5945,15 +6034,15 @@ var $n = class t {
 		}), this.source.invalidate(), this.tree.nodes.clear(), this.rows.clear(), this.notify();
 	};
 	pinColumn = (e, t) => {
-		let n = gn(t), r = G.findOrThrow(this.columns.value.flat, (t) => t.uniqueKey === e);
+		let n = yn(t), r = G.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.collapseGroups(), this.sourceColumns.clear(), this.notify();
+		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.reportInteraction("groupingChange", Array.from(this.groupColumns), this.groupColumns.has(e) ? "group" : "ungroup", { columnKey: e }), this.collapseGroups(), 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.collapseGroups(), this.sourceColumns.clear(), this.notify();
+		this.groupColumns = /* @__PURE__ */ new Set(), this.hiddenColumns = new Set(Array.from(this.hiddenColumns).filter((t) => !e.has(t))), this.reportInteraction("groupingChange", [], "clear"), this.collapseGroups(), this.sourceColumns.clear(), this.notify();
 	};
 	collapseGroups() {
 		this.expandedGroupRow = /* @__PURE__ */ new Set(), this._collapsedGroupRow = /* @__PURE__ */ new Set(), this.source.expansionChanged(), this.source.invalidate();
@@ -5970,7 +6059,7 @@ var $n = class t {
 	}
 	_collapsedGroupRow = /* @__PURE__ */ new Set();
 	toggleGroupRow = (e, t = this.expandedGroupRow.has(e)) => {
-		this._expansion++, this.expandedGroupRow = new Set(this.expandedGroupRow), this._collapsedGroupRow = new Set(this._collapsedGroupRow), t ? (this.expandedGroupRow.delete(e), this._collapsedGroupRow.add(e)) : (this.expandedGroupRow.add(e), this._collapsedGroupRow.delete(e)), this.source.expansionChanged(), this.rows.clear(), this.notify();
+		this._expansion++, this.expandedGroupRow = new Set(this.expandedGroupRow), this._collapsedGroupRow = new Set(this._collapsedGroupRow), t ? (this.expandedGroupRow.delete(e), this._collapsedGroupRow.add(e)) : (this.expandedGroupRow.add(e), this._collapsedGroupRow.delete(e)), this.reportInteraction("groupExpandedChange", !t, t ? "collapse" : "expand", { groupRowKey: e }), this.source.expansionChanged(), this.rows.clear(), this.notify();
 	};
 	treeExpansionChanged() {
 		this._expansion++, this.source.expansionChanged(), this.rows.clear();
@@ -5995,7 +6084,10 @@ var $n = class t {
 	selectionChanged(e, t, n) {
 		this._selectionVersion++, this.flatRows.clear(), this.notifyRows();
 		let r = Array.from(this.selectedRows);
-		this.props.onSelectedRowKeysChange?.(r, { reason: n }), this.props.onSelectionChange?.({
+		this.fire("selectedRowKeysChange", r, n, { details: {
+			action: t,
+			affectedRowKeys: e
+		} }), this.props.onSelectionChange?.({
 			action: t,
 			affectedRowKeys: e,
 			selectedRowKeys: r,
@@ -6003,7 +6095,7 @@ var $n = class t {
 		});
 	}
 	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();
+		this.hiddenColumns = new Set(this.hiddenColumns), this.hiddenColumns.has(e) ? this.hiddenColumns.delete(e) : this.hiddenColumns.add(e), this.reportInteraction("columnVisibilityChange", !this.hiddenColumns.has(e), this.hiddenColumns.has(e) ? "hide" : "show", { columnKey: e }), this.columns.clear(), this.notify();
 	};
 	setWidth = (e, t) => {
 		this.columnWidths.set(e, t);
@@ -6034,73 +6126,73 @@ var $n = class t {
 };
 //#endregion
 //#region src/components/dataGrid/useGrid.ts
-function er(e) {
-	let [t] = P(() => new $n(e)), n = u("datagrid");
-	return t.setProps(e), t.setIdentifier(n), ae(t.subscribe, t.getSnapshot, t.getSnapshot), t;
+function rr(e) {
+	let [t] = F(() => new nr(e)), n = d("datagrid");
+	return t.setProps(e), t.setIdentifier(n), oe(t.subscribe, t.getSnapshot, t.getSnapshot), t;
 }
 //#endregion
 //#region src/components/dataGrid/useListLayout.ts
-var tr, nr;
-function rr() {
-	return nr ??= import("../dataGridList.mjs").then((e) => tr = e.default), nr;
+var ir, ar;
+function or() {
+	return ar ??= import("../dataGridList.mjs").then((e) => ir = e.default), ar;
 }
-t("(max-width: 36rem)")?.matches && rr();
-function ir(e) {
-	let [t, n] = P(() => tr);
-	return A(() => {
+t("(max-width: 36rem)")?.matches && or();
+function sr(e) {
+	let [t, n] = F(() => ir);
+	return N(() => {
 		if (!e || t) return;
 		let r = !0;
-		return rr().then((e) => r && n(() => e)), () => {
+		return or().then((e) => r && n(() => e)), () => {
 			r = !1;
 		};
 	}, [e, t]), t;
 }
 //#endregion
 //#region src/components/dataGrid.tsx
-function ar(e, t) {
-	let n = er(e), a = N(null);
-	j(t, () => ({
+function cr(e, t) {
+	let n = rr(e), i = P(null);
+	ne(t, () => ({
 		get element() {
-			return a.current;
+			return i.current;
 		},
 		exportCsv: n.exportCsv,
 		exportXlsx: n.exportXlsx,
 		refresh: n.refresh,
 		clearEdits: n.edits.clearEdits
 	}), [n]);
-	let { component: o, data: s, def: c, loading: l, filters: u, globalFilterValue: d, columnFilters: f, expandedRowKeys: p, expandedTreeKeys: h, page: g, pageSize: _, onSelectedRowKeysChange: v, onSelectionChange: y, onGlobalFilterChange: b, onColumnFiltersChange: x, onExpandedRowKeysChange: S, onExpandedTreeKeysChange: C, onCellEditsChange: w, onPaginationChange: T, onPageChange: ee, onPageSizeChange: te, onSortingChange: ne, onSortChange: E, onServerStateChange: D, style: O, ...k } = e;
+	let { component: o, data: s, def: c, loading: l, filters: u, globalFilterValue: d, columnFilters: f, expandedRowKeys: p, expandedTreeKeys: m, page: h, pageSize: _, onSelectedRowKeysChange: v, onSelectionChange: y, onGlobalFilterChange: b, onColumnFiltersChange: x, onExpandedRowKeysChange: S, onExpandedTreeKeysChange: C, onCellEditsChange: w, onPaginationChange: T, onPageChange: E, onPageSizeChange: ee, onSortingChange: D, onSortChange: te, onServerStateChange: O, style: k, ...A } = e;
 	re(() => {
-		let e = a.current;
+		let e = i.current;
 		if (e) return n.setSizingElement(e), () => n.setSizingElement(null);
 	}, [n]), r(() => {
-		let e = a.current;
+		let e = i.current;
 		if (!e) return;
 		n.list.setWidth(e.clientWidth);
 		let t = new ResizeObserver(() => n.list.setWidth(e.clientWidth));
 		return t.observe(e), () => t.disconnect();
 	}, [n]);
-	let A = n.list.active, M = ir(A);
-	return /* @__PURE__ */ L(i, {
-		ref: a,
+	let j = n.list.active, M = sr(j);
+	return /* @__PURE__ */ R(a, {
+		ref: i,
 		component: n.componentName,
-		variant: { list: !!M && A },
-		...k,
+		variant: { list: !!M && j },
+		...A,
 		style: {
 			...n.sizes.value,
-			...O
+			...k
 		},
-		children: [M && A ? /* @__PURE__ */ I(M, { grid: n }) : /* @__PURE__ */ L(F, { children: [
-			n.props.def.topBar && /* @__PURE__ */ I(dn, { grid: n }),
-			/* @__PURE__ */ I(tn, { grid: n }),
-			/* @__PURE__ */ I(en, { grid: n }),
-			n.props.def.bottomBar && /* @__PURE__ */ I(he, { grid: n })
-		] }), /* @__PURE__ */ I(m, {
+		children: [M && j ? /* @__PURE__ */ L(M, { grid: n }) : /* @__PURE__ */ R(I, { children: [
+			n.props.def.topBar && /* @__PURE__ */ L(mn, { grid: n }),
+			/* @__PURE__ */ L(an, { grid: n }),
+			/* @__PURE__ */ L(rn, { grid: n }),
+			n.props.def.bottomBar && /* @__PURE__ */ L(_e, { grid: n })
+		] }), /* @__PURE__ */ L(g, {
 			props: { role: "status" },
 			children: n.selectionAnnouncement
 		})]
 	});
 }
-var or = E(ar);
-ar.displayName = "DataGrid";
+var lr = k(cr);
+cr.displayName = "DataGrid";
 //#endregion
-export { Bn as DATA_GRID_LOCALE_TEXT, $t as a, Z as c, gt as d, or as default, Y as f, tn as i, bt as l, Te as m, on as n, Bt as o, W as p, rn as r, jt as s, cn as t, yt as u };
+export { Un as DATA_GRID_LOCALE_TEXT, nn as a, Z as c, yt as d, lr as default, Y as f, an as i, Ct as l, De as m, ln as n, Ut as o, W as p, sn as r, Pt as s, dn as t, St as u };