@box-kite/react 2.2.5 → 2.2.7

package/dataGridList.mjs

@@ -1,111 +1,64 @@
 import e from "./box.mjs";
 import { Path as t, Svg as n } from "./components/svg.mjs";
 import r from "./components/button.mjs";
-import i from "./components/flex.mjs";
-import a from "./components/checkbox.mjs";
-import o from "./components/visuallyHidden.mjs";
+import i from "./components/visuallyHidden.mjs";
+import a from "./components/flex.mjs";
+import o from "./components/checkbox.mjs";
 import s from "./components/textbox.mjs";
 import { H3 as c, Span as l } from "./components/semantics.mjs";
-import { a as u, c as d, d as f, i as p, l as m, n as h, o as g, r as _, s as v, t as y, u as b } from "./components/dataGrid.mjs";
-import x from "./components/dialog.mjs";
-import S from "./components/list.mjs";
-import C from "./components/radioButton.mjs";
+import { a as u, c as d, d as f, f as p, i as m, l as h, m as g, n as _, o as v, p as y, r as b, s as x, t as S, u as C } from "./components/dataGrid.mjs";
+import w from "./components/dialog.mjs";
+import T from "./components/list.mjs";
+import E from "./components/radioButton.mjs";
 import ee from "./components/skeleton.mjs";
-import { memo as w, useCallback as T, useEffect as E, useRef as D, useState as O } from "react";
-import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { t as D } from "./dataGridListLayout.mjs";
+import { memo as O, useCallback as k, useEffect as A, useRef as j, useState as M } from "react";
+import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
 //#region src/components/dataGrid/components/dataGridListAggregate.tsx
-function M(e) {
+function I(e) {
 	let { cell: t } = e, { AggregateCell: n } = t.column;
-	return n ? /* @__PURE__ */ A(n, { cell: t }) : /* @__PURE__ */ A(k, { children: t.value ?? "—" });
+	return n ? /* @__PURE__ */ P(n, { cell: t }) : /* @__PURE__ */ P(N, { children: t.value ?? "—" });
 }
-M.displayName = "DataGridListAggregate";
-//#endregion
-//#region src/components/dataGrid/components/dataGridListLayout.ts
-var N;
-(function(e) {
-	e.ICON_BUTTON = {
-		display: "inline-flex",
-		ai: "center",
-		jc: "center",
-		width: 11,
-		height: 11,
-		flexShrink: 0,
-		borderRadius: 999,
-		cursor: "pointer"
-	}, e.PILL = {
-		display: "inline-flex",
-		ai: "center",
-		gap: 1.5,
-		flexShrink: 0,
-		height: 10,
-		px: 3.5,
-		borderRadius: 999,
-		fontSize: 14,
-		fontWeight: 500,
-		textWrap: "nowrap",
-		cursor: "pointer"
-	}, e.TRUNCATE = {
-		textOverflow: "ellipsis",
-		overflow: "hidden",
-		textWrap: "nowrap"
-	}, e.INPUT = {
-		width: "fit",
-		height: 11,
-		px: 3,
-		borderRadius: 2,
-		fontSize: 16
-	}, e.LABEL = {
-		fontSize: 12,
-		lineHeight: 16
-	}, e.SHEET_BUTTON = {
-		height: 12,
-		px: 4,
-		borderRadius: 3,
-		fontSize: 16,
-		fontWeight: 500,
-		cursor: "pointer"
-	};
-})(N ||= {});
-var P = N;
+I.displayName = "DataGridListAggregate";
 //#endregion
 //#region src/components/dataGrid/components/dataGridListFooter.tsx
-function F(t) {
-	let { grid: n, shown: a } = t, { list: o, pagination: s, aggregation: c } = n, l = n.componentName, u = n.localeText, d = s.state, f = c.hasFooter ? c.footerCells.value.filter((e) => e.column.aggregate) : [];
-	return /* @__PURE__ */ j(k, { children: [f.length > 0 && /* @__PURE__ */ j(e, {
+function L(t) {
+	let { grid: n, shown: i } = t, { list: o, pagination: s, aggregation: c } = n, l = n.componentName, u = n.localeText, d = s.state, f = c.hasFooter ? c.footerCells.value.filter((e) => e.column.aggregate) : [];
+	return /* @__PURE__ */ F(N, { children: [f.length > 0 && /* @__PURE__ */ F(e, {
 		bgColor: "currentColor/3",
 		px: 4,
 		py: 3,
-		children: [/* @__PURE__ */ A(e, {
+		children: [/* @__PURE__ */ P(e, {
 			fontWeight: 600,
 			fontSize: 14,
 			mb: 1,
 			children: c.footerLabel
-		}), /* @__PURE__ */ A(e, {
+		}), /* @__PURE__ */ P(e, {
 			tag: "dl",
 			display: "grid",
 			gridTemplateColumns: 2,
 			columnGap: 4,
 			rowGap: 2,
 			m: 0,
-			children: f.map((t) => /* @__PURE__ */ j(e, {
+			children: f.map((t) => /* @__PURE__ */ F(e, {
 				minWidth: 0,
-				children: [/* @__PURE__ */ A(e, {
+				children: [/* @__PURE__ */ P(e, {
 					tag: "dt",
 					component: "list.muted",
 					fontSize: 12,
 					lineHeight: 16,
 					children: t.column.header ?? String(t.column.key)
-				}), /* @__PURE__ */ A(e, {
+				}), /* @__PURE__ */ P(e, {
 					tag: "dd",
 					m: 0,
 					fontSize: 14,
 					lineHeight: 20,
 					fontWeight: 600,
-					children: /* @__PURE__ */ A(M, { cell: t })
+					children: /* @__PURE__ */ P(I, { cell: t })
 				})]
 			}, t.column.key))
 		})]
-	}), d ? /* @__PURE__ */ A(i, {
+	}), d ? /* @__PURE__ */ P(a, {
 		component: "list.muted",
 		d: "column",
 		gap: 2,
@@ -114,40 +67,40 @@ function F(t) {
 		py: 4,
 		fontSize: 13,
 		css: { fontVariantNumeric: "tabular-nums" },
-		children: /* @__PURE__ */ j(i, {
+		children: /* @__PURE__ */ F(a, {
 			ai: "center",
 			jc: "space-between",
 			gap: 3,
 			width: "fit",
 			children: [
-				/* @__PURE__ */ A(r, {
+				/* @__PURE__ */ P(r, {
 					type: "button",
 					component: `${l}.list.button`,
-					...P.ICON_BUTTON,
+					...D.ICON_BUTTON,
 					borderRadius: 3,
 					disabled: !s.canGoPrev,
 					onClick: s.prevPage,
 					props: { "aria-label": u.previousPage },
-					children: /* @__PURE__ */ A(b, {
+					children: /* @__PURE__ */ P(p, {
 						width: "18px",
 						height: "18px",
 						rotate: 90,
 						rtl: { rotate: -90 }
 					})
 				}),
-				/* @__PURE__ */ A(e, {
+				/* @__PURE__ */ P(e, {
 					textAlign: "center",
 					children: u.pageRowRange(s.startItem, s.endItem, s.totalItems)
 				}),
-				/* @__PURE__ */ A(r, {
+				/* @__PURE__ */ P(r, {
 					type: "button",
 					component: `${l}.list.button`,
-					...P.ICON_BUTTON,
+					...D.ICON_BUTTON,
 					borderRadius: 3,
 					disabled: !s.canGoNext,
 					onClick: s.nextPage,
 					props: { "aria-label": u.nextPage },
-					children: /* @__PURE__ */ A(b, {
+					children: /* @__PURE__ */ P(p, {
 						width: "18px",
 						height: "18px",
 						rotate: -90,
@@ -156,7 +109,7 @@ function F(t) {
 				})
 			]
 		})
-	}) : (o.hasMore || a !== void 0) && /* @__PURE__ */ j(i, {
+	}) : (o.hasMore || i !== void 0) && /* @__PURE__ */ F(a, {
 		component: "list.muted",
 		d: "column",
 		gap: 2,
@@ -165,7 +118,7 @@ function F(t) {
 		py: 4,
 		fontSize: 13,
 		css: { fontVariantNumeric: "tabular-nums" },
-		children: [o.hasMore && /* @__PURE__ */ A(r, {
+		children: [o.hasMore && /* @__PURE__ */ P(r, {
 			type: "button",
 			component: `${l}.list.button`,
 			width: "fit",
@@ -173,64 +126,64 @@ function F(t) {
 			borderRadius: 3,
 			fontSize: 15,
 			fontWeight: 500,
-			color: "indigo-600",
+			color: "accent-600",
 			cursor: "pointer",
-			theme: { dark: { color: "indigo-300" } },
+			theme: { dark: { color: "accent-300" } },
 			onClick: o.showMore,
 			children: u.showMore(o.nextBatch)
-		}), a !== void 0 && /* @__PURE__ */ A(e, { children: u.shownCount(a, n.source.enabled ? n.totalRowCount : n.filterStats.filtered) })]
+		}), i !== void 0 && /* @__PURE__ */ P(e, { children: u.shownCount(i, n.source.enabled ? n.totalRowCount : n.filterStats.filtered) })]
 	})] });
 }
-F.displayName = "DataGridListFooter";
+L.displayName = "DataGridListFooter";
 //#endregion
 //#region src/components/dataGrid/components/dataGridListGroup.tsx
-function I(e) {
+function R(e) {
 	let { row: t } = e, { grid: n } = t, r = t.cells.flatMap((e) => e.aggregate ? [e.aggregate] : []), i = t.placeholder ? "" : String(t.groupValue);
-	return /* @__PURE__ */ j(S.Item, {
+	return /* @__PURE__ */ F(T.Item, {
 		size: "sm",
 		bgColor: "currentColor/3",
 		ps: 4 + Math.min(t.depth, 3) * 4,
 		props: { "aria-busy": t.placeholder || void 0 },
 		children: [
-			n.list.selecting && t.selectable && /* @__PURE__ */ A(S.Actions, { children: /* @__PURE__ */ A(a, {
+			n.list.selecting && t.selectable && /* @__PURE__ */ P(T.Actions, { children: /* @__PURE__ */ P(o, {
 				variant: "datagrid",
 				checked: t.selected,
 				indeterminate: t.indeterminate,
 				onChange: t.toggleSelectAll,
 				props: { "aria-label": n.localeText.selectGroupRows(i) }
 			}) }),
-			/* @__PURE__ */ A(b, {
+			/* @__PURE__ */ P(p, {
 				width: "16px",
 				height: "16px",
 				flexShrink: 0,
 				rotate: t.expanded ? 0 : -90,
 				rtl: { rotate: t.expanded ? 0 : 90 }
 			}),
-			/* @__PURE__ */ j(S.Content, { children: [/* @__PURE__ */ A(S.Title, {
+			/* @__PURE__ */ F(T.Content, { children: [/* @__PURE__ */ P(T.Title, {
 				lines: 1,
 				fontSize: 14,
 				fontWeight: 600,
-				children: /* @__PURE__ */ A(S.Action, {
+				children: /* @__PURE__ */ P(T.Action, {
 					onClick: () => t.toggleRow(),
 					props: { "aria-expanded": t.expanded },
 					children: i
 				})
-			}), r.length > 0 && /* @__PURE__ */ A(S.Row, {
+			}), r.length > 0 && /* @__PURE__ */ P(T.Row, {
 				secondary: !0,
 				wrap: !0,
 				columnGap: 4,
 				fontSize: 13,
 				css: { fontVariantNumeric: "tabular-nums" },
-				children: r.map((e) => /* @__PURE__ */ j(l, {
+				children: r.map((e) => /* @__PURE__ */ F(l, {
 					display: "inline-flex",
 					gap: 1,
-					children: [/* @__PURE__ */ A(l, { children: e.column.header ?? String(e.column.key) }), /* @__PURE__ */ A(l, {
+					children: [/* @__PURE__ */ P(l, { children: e.column.header ?? String(e.column.key) }), /* @__PURE__ */ P(l, {
 						fontWeight: 600,
-						children: /* @__PURE__ */ A(M, { cell: e })
+						children: /* @__PURE__ */ P(I, { cell: e })
 					})]
 				}, e.column.key))
 			})] }),
-			/* @__PURE__ */ A(S.Meta, {
+			/* @__PURE__ */ P(T.Meta, {
 				px: 2,
 				borderRadius: 999,
 				fontSize: 12,
@@ -243,149 +196,154 @@ function I(e) {
 		]
 	});
 }
-I.displayName = "DataGridListGroup";
-var L = w(I);
+R.displayName = "DataGridListGroup";
+var te = O(R);
 //#endregion
 //#region src/components/dataGrid/components/dataGridListValue.tsx
-function R(e) {
+function z(e) {
 	let { row: t, column: n } = e, r = t.cells.find((e) => e.column === n);
 	if (!r) return null;
-	if (n.Cell) return /* @__PURE__ */ A(n.Cell, { cell: r });
+	if (n.Cell) return /* @__PURE__ */ P(n.Cell, { cell: r });
 	let { value: i } = r;
-	return /* @__PURE__ */ A(k, { children: i == null || i === "" ? "—" : String(i) });
+	if (typeof i == "boolean") return /* @__PURE__ */ P(N, { children: i ? r.grid.localeText.booleanTrue : r.grid.localeText.booleanFalse });
+	let a = C(n, i);
+	return a && i != null && i !== "" ? /* @__PURE__ */ P(h, {
+		value: i,
+		format: a
+	}) : /* @__PURE__ */ P(N, { children: i == null || i === "" ? "—" : String(i) });
 }
-R.displayName = "DataGridListValue";
+z.displayName = "DataGridListValue";
 //#endregion
 //#region src/components/dataGrid/components/dataGridListItem.tsx
-function z(t) {
-	let { row: n, index: i, position: o, setSize: s } = t, { grid: c } = n, { list: u } = c, { title: d, kicker: p, subtitle: m, end: h, fields: g } = u.layout.value, { selecting: _ } = u, v = u.recordViewEnabled && !n.placeholder, y = f(n) ? n : void 0, x = c.props.def.rowDetail, C = c.localeText, w = {
-		"aria-posinset": o,
+function B(t) {
+	let { row: n, index: i, position: a, setSize: s } = t, { grid: c } = n, { list: u } = c, { title: d, kicker: f, subtitle: m, end: h, fields: g } = u.layout.value, { selecting: _ } = u, v = u.recordViewEnabled && !n.placeholder, b = y(n) ? n : void 0, x = c.props.def.rowDetail, S = c.localeText, C = {
+		"aria-posinset": a,
 		"aria-setsize": s
 	};
-	if (n.placeholder) return /* @__PURE__ */ A(S.Item, {
+	if (n.placeholder) return /* @__PURE__ */ P(T.Item, {
 		props: {
-			...w,
+			...C,
 			"aria-busy": !0
 		},
-		children: /* @__PURE__ */ A(ee, {
+		children: /* @__PURE__ */ P(ee, {
 			lines: 2,
 			flex1: !0
 		})
 	});
-	let T = d ? /* @__PURE__ */ A(R, {
+	let w = d ? /* @__PURE__ */ P(z, {
 		row: n,
 		column: d
-	}) : C.unnamedRow(n.rowIndex + 1), E = d ? String(n.cells.find((e) => e.column === d)?.value ?? "") : "", D = u.checkboxId(n.key);
-	return /* @__PURE__ */ j(S.Item, {
+	}) : S.unnamedRow(n.rowIndex + 1), E = d ? String(n.cells.find((e) => e.column === d)?.value ?? "") : "", O = u.checkboxId(n.key);
+	return /* @__PURE__ */ F(T.Item, {
 		ai: "start",
 		selected: !!c.props.def.rowSelection && n.selected,
 		chevron: v && !_,
-		ps: y ? 4 + Math.min(y.level, 3) * 4 : void 0,
+		ps: b ? 4 + Math.min(b.level, 3) * 4 : void 0,
 		props: {
-			...w,
+			...C,
 			"data-list-key": String(n.key)
 		},
-		children: [_ && /* @__PURE__ */ A(S.Actions, {
+		children: [_ && /* @__PURE__ */ P(T.Actions, {
 			width: 6,
 			jc: "center",
 			alignSelf: "center",
-			children: /* @__PURE__ */ A(a, {
-				id: D,
+			children: /* @__PURE__ */ P(o, {
+				id: O,
 				variant: "datagrid",
 				checked: n.selected,
 				indeterminate: n.indeterminate,
 				onChange: n.toggleSelection
 			})
-		}), /* @__PURE__ */ j(S.Content, { children: [
-			p && /* @__PURE__ */ A(S.Overline, {
+		}), /* @__PURE__ */ F(T.Content, { children: [
+			f && /* @__PURE__ */ P(T.Overline, {
 				lines: 1,
-				children: /* @__PURE__ */ A(R, {
+				children: /* @__PURE__ */ P(z, {
 					row: n,
-					column: p
+					column: f
 				})
 			}),
-			/* @__PURE__ */ j(S.Row, {
+			/* @__PURE__ */ F(T.Row, {
 				ai: "start",
 				gap: 3,
-				children: [/* @__PURE__ */ j(S.Row, {
+				children: [/* @__PURE__ */ F(T.Row, {
 					jc: "start",
 					ai: "center",
 					gap: 1,
 					flex1: !0,
-					children: [y?.hasChildren && /* @__PURE__ */ A(S.Actions, {
+					children: [b?.hasChildren && /* @__PURE__ */ P(T.Actions, {
 						ms: -2,
-						children: /* @__PURE__ */ A(r, {
+						children: /* @__PURE__ */ P(r, {
 							type: "button",
 							component: `${c.componentName}.list.toggle`,
-							...P.ICON_BUTTON,
+							...D.ICON_BUTTON,
 							width: 8,
 							height: 8,
-							onClick: y.toggleTree,
+							onClick: b.toggleTree,
 							props: {
-								"aria-expanded": y.treeExpanded,
-								"aria-label": (y.treeExpanded ? C.collapseTreeRow : C.expandTreeRow)(E || C.unnamedRow(n.rowIndex + 1))
+								"aria-expanded": b.treeExpanded,
+								"aria-label": (b.treeExpanded ? S.collapseTreeRow : S.expandTreeRow)(E || S.unnamedRow(n.rowIndex + 1))
 							},
-							children: /* @__PURE__ */ A(b, {
+							children: /* @__PURE__ */ P(p, {
 								width: "16px",
 								height: "16px",
-								rotate: y.treeExpanded ? 0 : -90,
-								rtl: { rotate: y.treeExpanded ? 0 : 90 }
+								rotate: b.treeExpanded ? 0 : -90,
+								rtl: { rotate: b.treeExpanded ? 0 : 90 }
 							})
 						})
-					}), /* @__PURE__ */ A(S.Title, {
+					}), /* @__PURE__ */ P(T.Title, {
 						lines: 1,
 						flex1: !0,
 						fontWeight: 600,
-						children: _ ? /* @__PURE__ */ A(S.Action, {
-							props: { htmlFor: D },
-							children: T
-						}) : v ? /* @__PURE__ */ A(S.Action, {
+						children: _ ? /* @__PURE__ */ P(T.Action, {
+							props: { htmlFor: O },
+							children: w
+						}) : v ? /* @__PURE__ */ P(T.Action, {
 							props: { "aria-haspopup": "dialog" },
 							onClick: () => u.openRecord(n, i),
-							children: T
-						}) : T
+							children: w
+						}) : w
 					})]
-				}), h && /* @__PURE__ */ j(S.End, {
+				}), h && /* @__PURE__ */ F(T.End, {
 					fontSize: 16,
 					fontWeight: 600,
 					lineHeight: 22,
-					...P.TRUNCATE,
-					children: [/* @__PURE__ */ A(R, {
+					...D.TRUNCATE,
+					children: [/* @__PURE__ */ P(z, {
 						row: n,
 						column: h
-					}), /* @__PURE__ */ A(S.Meta, {
+					}), /* @__PURE__ */ P(T.Meta, {
 						fontWeight: 400,
-						...P.LABEL,
+						...D.LABEL,
 						children: h.header ?? String(h.key)
 					})]
 				})]
 			}),
-			m.length > 0 && /* @__PURE__ */ A(S.Description, {
+			m.length > 0 && /* @__PURE__ */ P(T.Description, {
 				lines: 1,
-				children: m.map((e, t) => /* @__PURE__ */ j(l, { children: [t > 0 && " · ", /* @__PURE__ */ A(R, {
+				children: m.map((e, t) => /* @__PURE__ */ F(l, { children: [t > 0 && " · ", /* @__PURE__ */ P(z, {
 					row: n,
 					column: e
 				})] }, e.key))
 			}),
-			g.length > 0 && /* @__PURE__ */ A(S.Fields, {
+			g.length > 0 && /* @__PURE__ */ P(T.Fields, {
 				mt: 2,
 				css: { gridTemplateColumns: "repeat(2, minmax(0, 1fr))" },
-				children: g.map((t) => /* @__PURE__ */ A(S.Field, {
+				children: g.map((t) => /* @__PURE__ */ P(T.Field, {
 					label: t.header ?? String(t.key),
-					children: /* @__PURE__ */ A(e, {
-						...P.TRUNCATE,
-						children: /* @__PURE__ */ A(R, {
+					children: /* @__PURE__ */ P(e, {
+						...D.TRUNCATE,
+						children: /* @__PURE__ */ P(z, {
 							row: n,
 							column: t
 						})
 					})
 				}, t.key))
 			}),
-			x && /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A(S.Actions, {
+			x && /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P(T.Actions, {
 				alignSelf: "start",
 				mt: 1,
 				ms: -2,
-				children: /* @__PURE__ */ j(r, {
+				children: /* @__PURE__ */ F(r, {
 					type: "button",
 					component: `${c.componentName}.list.toggle`,
 					display: "inline-flex",
@@ -399,17 +357,17 @@ function z(t) {
 					cursor: "pointer",
 					onClick: n.toggleDetail,
 					props: { "aria-expanded": n.expanded },
-					children: [/* @__PURE__ */ A(b, {
+					children: [/* @__PURE__ */ P(p, {
 						width: "14px",
 						height: "14px",
 						rotate: n.expanded ? 0 : -90,
 						rtl: { rotate: n.expanded ? 0 : 90 }
-					}), C.details]
+					}), S.details]
 				})
-			}), n.expanded && /* @__PURE__ */ A(S.Actions, {
+			}), n.expanded && /* @__PURE__ */ P(T.Actions, {
 				display: "block",
 				mt: 2,
-				children: /* @__PURE__ */ A(e, {
+				children: /* @__PURE__ */ P(e, {
 					component: `${c.componentName}.list.detail`,
 					p: 3,
 					borderRadius: 2,
@@ -420,19 +378,19 @@ function z(t) {
 		] })]
 	});
 }
-z.displayName = "DataGridListItem";
-var B = w(z);
+B.displayName = "DataGridListItem";
+var ne = O(B);
 //#endregion
 //#region src/icons/closeIcon.tsx
 function V(e) {
-	return /* @__PURE__ */ A(n, {
+	return /* @__PURE__ */ P(n, {
 		viewBox: "0 0 24 24",
 		width: "1.25rem",
 		fill: "none",
 		stroke: "currentColor",
 		strokeWidth: 2,
 		...e,
-		children: /* @__PURE__ */ A(t, {
+		children: /* @__PURE__ */ P(t, {
 			d: "M6 6l12 12M18 6L6 18",
 			strokeLinecap: "round"
 		})
@@ -440,9 +398,9 @@ function V(e) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridListSheet.tsx
-var H = 80;
-function U(t) {
-	let { grid: n, open: a, onOpen: o, onClose: s, title: c, trigger: l, actions: u, footer: d, tall: f, bodyProps: p, bodyRef: m, onKeyDown: h, children: g } = t, _ = n.componentName, v = `${_}.list.sheet.line`, y = D(null), b = T((e) => {
+var re = 80;
+function H(t) {
+	let { grid: n, open: i, onOpen: o, onClose: s, title: c, trigger: l, actions: u, footer: d, tall: f, bodyProps: p, bodyRef: m, onKeyDown: h, children: g } = t, _ = n.componentName, v = `${_}.list.sheet.line`, y = j(null), b = k((e) => {
 		let t = e.currentTarget.closest("dialog");
 		e.button !== 0 || !t || e.target.closest("button") || (y.current = {
 			id: e.pointerId,
@@ -450,47 +408,47 @@ function U(t) {
 			dy: 0,
 			dialog: t
 		}, e.currentTarget.setPointerCapture(e.pointerId));
-	}, []), S = T((e) => {
+	}, []), x = k((e) => {
 		let t = y.current;
 		if (!t || t.id !== e.pointerId) return;
 		let { dialog: n } = t;
 		t.dy = Math.max(0, e.clientY - t.y), n.style.transition = "none", n.style.translate = `0 ${t.dy}px`;
-	}, []), C = T(() => {
+	}, []), S = k(() => {
 		let e = y.current;
 		if (y.current = null, !e) return;
 		let { dialog: t } = e;
-		t.style.transition = "", t.style.translate = "", e.dy > H && s();
+		t.style.transition = "", t.style.translate = "", e.dy > re && s();
 	}, [s]);
-	return /* @__PURE__ */ j(x, {
+	return /* @__PURE__ */ F(w, {
 		component: `${_}.list.sheet`,
 		display: "flex",
 		d: "column",
 		css: f ? { minHeight: "min(32rem, calc(100dvh - 2rem))" } : void 0,
-		open: a,
+		open: i,
 		onOpenChange: (e) => e ? o?.() : s(),
 		trigger: l,
 		props: { onKeyDown: h },
 		children: [
-			/* @__PURE__ */ j(i, {
+			/* @__PURE__ */ F(a, {
 				d: "column",
 				flexShrink: 0,
 				css: { touchAction: "none" },
 				props: {
 					onPointerDown: b,
-					onPointerMove: S,
-					onPointerUp: C,
-					onPointerCancel: C
+					onPointerMove: x,
+					onPointerUp: S,
+					onPointerCancel: S
 				},
-				children: [/* @__PURE__ */ A(e, {
+				children: [/* @__PURE__ */ P(e, {
 					width: 9,
 					height: 1.25,
 					mt: 2,
 					mx: "auto",
 					borderRadius: 999,
-					bgColor: "gray-300",
-					theme: { dark: { bgColor: "gray-600" } },
+					bgColor: "base-300",
+					theme: { dark: { bgColor: "base-600" } },
 					props: { "aria-hidden": !0 }
-				}), /* @__PURE__ */ j(i, {
+				}), /* @__PURE__ */ F(a, {
 					component: `${v}`,
 					ai: "center",
 					gap: 2,
@@ -499,29 +457,29 @@ function U(t) {
 					py: 2,
 					bb: 1,
 					children: [
-						/* @__PURE__ */ A(x.Title, {
+						/* @__PURE__ */ P(w.Title, {
 							flex1: !0,
 							minWidth: 0,
 							m: 0,
 							fontSize: 17,
 							fontWeight: 600,
 							lineHeight: 24,
-							...P.TRUNCATE,
+							...D.TRUNCATE,
 							children: c
 						}),
 						u,
-						/* @__PURE__ */ A(r, {
+						/* @__PURE__ */ P(r, {
 							type: "button",
 							component: `${_}.list.sheet.button`,
-							...P.ICON_BUTTON,
+							...D.ICON_BUTTON,
 							onClick: s,
 							props: { "aria-label": n.localeText.close },
-							children: /* @__PURE__ */ A(V, {})
+							children: /* @__PURE__ */ P(V, {})
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ A(e, {
+			/* @__PURE__ */ P(e, {
 				ref: m,
 				flex1: !0,
 				overflowY: "auto",
@@ -534,7 +492,7 @@ function U(t) {
 				props: p,
 				children: g
 			}),
-			d && /* @__PURE__ */ A(i, {
+			d && /* @__PURE__ */ P(a, {
 				component: v,
 				gap: 3,
 				flexShrink: 0,
@@ -547,25 +505,25 @@ function U(t) {
 		]
 	});
 }
-U.displayName = "DataGridListSheet";
+H.displayName = "DataGridListSheet";
 //#endregion
 //#region src/components/dataGrid/components/dataGridListRecord.tsx
-var W = 60;
-function G({ cell: t, index: n }) {
-	let { grid: a, column: o } = t, s = a.componentName, c = String(o.header ?? o.key), { editing: l } = t, u = D(null), d = D(!1);
-	return E(() => {
+var ie = 60;
+function ae({ cell: t, index: n }) {
+	let { grid: i, column: o } = t, s = i.componentName, c = String(o.header ?? o.key), { editing: l } = t, u = j(null), d = j(!1);
+	return A(() => {
 		d.current && !l && u.current?.focus(), d.current = l;
-	}, [l]), /* @__PURE__ */ j(e, {
+	}, [l]), /* @__PURE__ */ F(e, {
 		component: `${s}.list.sheet.line`,
 		py: 3,
 		bb: 1,
-		children: [/* @__PURE__ */ A(e, {
+		children: [/* @__PURE__ */ P(e, {
 			tag: "dt",
 			component: "list.muted",
 			fontSize: 13,
 			lineHeight: 18,
 			children: c
-		}), /* @__PURE__ */ j(e, {
+		}), /* @__PURE__ */ F(e, {
 			tag: "dd",
 			display: "flex",
 			ai: "center",
@@ -577,99 +535,99 @@ function G({ cell: t, index: n }) {
 				fontVariantNumeric: "tabular-nums",
 				overflowWrap: "anywhere"
 			},
-			children: [l ? /* @__PURE__ */ A(i, {
+			children: [l ? /* @__PURE__ */ P(a, {
 				component: `${s}.list.sheet.input`,
-				...P.INPUT,
+				...D.INPUT,
 				flex1: !0,
 				ai: "center",
 				px: 1,
-				children: /* @__PURE__ */ A(m, {
+				children: /* @__PURE__ */ P(f, {
 					cell: t,
 					row: -1,
 					columnIndex: n
 				})
-			}) : /* @__PURE__ */ A(e, {
+			}) : /* @__PURE__ */ P(e, {
 				flex1: !0,
 				minWidth: 0,
-				children: /* @__PURE__ */ A(R, {
+				children: /* @__PURE__ */ P(z, {
 					row: t.row,
 					column: o
 				})
-			}), t.editable && !l && /* @__PURE__ */ A(r, {
+			}), t.editable && !l && /* @__PURE__ */ P(r, {
 				ref: u,
 				type: "button",
 				component: `${s}.list.sheet.button`,
-				...P.SHEET_BUTTON,
+				...D.SHEET_BUTTON,
 				height: 10,
 				onClick: () => t.beginEdit(),
-				props: { "aria-label": a.localeText.editCell(c) },
-				children: a.localeText.edit
+				props: { "aria-label": i.localeText.editCell(c) },
+				children: i.localeText.edit
 			})]
 		})]
 	});
 }
-function K(t) {
-	let { grid: n } = t, { list: o } = n, s = n.componentName, l = n.localeText, u = o.record, d = o.recordPosition, { title: f } = o.layout.value, p = D(null), m = D(null), h = u?.key;
-	E(() => {
-		m.current?.scrollTo?.({ top: 0 });
-	}, [h]);
-	let g = T(() => {
-		let e = o.record?.key;
-		n.edits.cancel(), o.closeRecord(), requestAnimationFrame(() => {
+function U(t) {
+	let { grid: n } = t, { list: i } = n, s = n.componentName, l = n.localeText, u = i.record, d = i.recordPosition, { title: f } = i.layout.value, m = j(null), h = j(null), g = u?.key;
+	A(() => {
+		h.current?.scrollTo?.({ top: 0 });
+	}, [g]);
+	let _ = k(() => {
+		let e = i.record?.key;
+		n.edits.cancel(), i.closeRecord(), requestAnimationFrame(() => {
 			let t = n.sizingElement?.querySelectorAll("[data-list-key]") ?? [];
 			Array.from(t).find((t) => t.dataset.listKey === String(e))?.querySelector("[data-list-action]")?.focus();
 		});
-	}, [n, o]), _ = T((e) => {
-		n.edits.isOpen && n.edits.commit(), n.edits.isOpen || o.stepRecord(e);
-	}, [n, o]), v = (e) => {
-		p.current = e.pointerType === "touch" ? {
+	}, [n, i]), v = k((e) => {
+		n.edits.isOpen && n.edits.commit(), n.edits.isOpen || i.stepRecord(e);
+	}, [n, i]), y = (e) => {
+		m.current = e.pointerType === "touch" ? {
 			x: e.clientX,
 			y: e.clientY
 		} : null;
-	}, y = (e) => {
-		let t = p.current;
-		if (p.current = null, !t) return;
+	}, b = (e) => {
+		let t = m.current;
+		if (m.current = null, !t) return;
 		let r = e.clientX - t.x, i = e.clientY - t.y;
-		Math.abs(r) < W || Math.abs(r) < Math.abs(i) * 1.5 || _(r < 0 === n.isRtl ? -1 : 1);
+		Math.abs(r) < ie || Math.abs(r) < Math.abs(i) * 1.5 || v(r < 0 === n.isRtl ? -1 : 1);
 	}, x = (e) => {
 		if (e.target.closest("input,select,textarea,[role=\"combobox\"]")) return;
 		let t = n.isRtl ? "ArrowLeft" : "ArrowRight", r = n.isRtl ? "ArrowRight" : "ArrowLeft";
-		(e.key === t || e.key === r) && (e.preventDefault(), _(e.key === t ? 1 : -1));
-	}, S = u && d && /* @__PURE__ */ j(i, {
+		(e.key === t || e.key === r) && (e.preventDefault(), v(e.key === t ? 1 : -1));
+	}, S = u && d && /* @__PURE__ */ F(a, {
 		ai: "center",
 		gap: .5,
 		flexShrink: 0,
 		children: [
-			/* @__PURE__ */ A(r, {
+			/* @__PURE__ */ P(r, {
 				type: "button",
 				component: `${s}.list.sheet.button`,
-				...P.ICON_BUTTON,
-				disabled: !o.hasPreviousRecord,
-				onClick: () => _(-1),
+				...D.ICON_BUTTON,
+				disabled: !i.hasPreviousRecord,
+				onClick: () => v(-1),
 				props: { "aria-label": l.previousRow },
-				children: /* @__PURE__ */ A(b, {
+				children: /* @__PURE__ */ P(p, {
 					width: "18px",
 					height: "18px",
 					rotate: 90,
 					rtl: { rotate: -90 }
 				})
 			}),
-			/* @__PURE__ */ A(e, {
+			/* @__PURE__ */ P(e, {
 				fontSize: 13,
-				color: "gray-500",
+				color: "base-500",
 				textWrap: "nowrap",
 				css: { fontVariantNumeric: "tabular-nums" },
 				props: { "aria-live": "polite" },
 				children: l.recordPosition(d.position, d.total)
 			}),
-			/* @__PURE__ */ A(r, {
+			/* @__PURE__ */ P(r, {
 				type: "button",
 				component: `${s}.list.sheet.button`,
-				...P.ICON_BUTTON,
-				disabled: !o.hasNextRecord,
-				onClick: () => _(1),
+				...D.ICON_BUTTON,
+				disabled: !i.hasNextRecord,
+				onClick: () => v(1),
 				props: { "aria-label": l.nextRow },
-				children: /* @__PURE__ */ A(b, {
+				children: /* @__PURE__ */ P(p, {
 					width: "18px",
 					height: "18px",
 					rotate: -90,
@@ -678,26 +636,26 @@ function K(t) {
 			})
 		]
 	}), C = n.props.def.rowDetail;
-	return /* @__PURE__ */ A(U, {
+	return /* @__PURE__ */ P(H, {
 		grid: n,
 		open: !!u,
-		onClose: g,
+		onClose: _,
 		tall: !0,
-		title: u && f ? /* @__PURE__ */ A(R, {
+		title: u && f ? /* @__PURE__ */ P(z, {
 			row: u,
 			column: f
 		}) : "",
 		actions: S,
 		onKeyDown: x,
-		bodyRef: m,
+		bodyRef: h,
 		bodyProps: {
-			onPointerDown: v,
-			onPointerUp: y
+			onPointerDown: y,
+			onPointerUp: b
 		},
-		children: u && /* @__PURE__ */ j(k, { children: [
-			n.props.def.rowSelection && /* @__PURE__ */ A(e, {
+		children: u && /* @__PURE__ */ F(N, { children: [
+			n.props.def.rowSelection && /* @__PURE__ */ P(e, {
 				py: 3,
-				children: /* @__PURE__ */ A(a, {
+				children: /* @__PURE__ */ P(o, {
 					variant: "datagrid",
 					checked: u.selected,
 					onChange: u.toggleSelection,
@@ -710,22 +668,22 @@ function K(t) {
 					}
 				})
 			}),
-			/* @__PURE__ */ A(e, {
+			/* @__PURE__ */ P(e, {
 				tag: "dl",
 				m: 0,
-				children: o.recordColumns.map((e) => {
+				children: i.recordColumns.map((e) => {
 					let t = u.cells.findIndex((t) => t.column === e);
-					return t === -1 ? null : /* @__PURE__ */ A(G, {
+					return t === -1 ? null : /* @__PURE__ */ P(ae, {
 						cell: u.cells[t],
 						index: t
 					}, e.key);
 				})
 			}),
-			C && /* @__PURE__ */ j(i, {
+			C && /* @__PURE__ */ F(a, {
 				d: "column",
 				gap: 2,
 				py: 3,
-				children: [/* @__PURE__ */ A(c, {
+				children: [/* @__PURE__ */ P(c, {
 					m: 0,
 					fontSize: 14,
 					fontWeight: 600,
@@ -735,13 +693,13 @@ function K(t) {
 		] })
 	});
 }
-K.displayName = "DataGridListRecord";
+U.displayName = "DataGridListRecord";
 //#endregion
 //#region src/components/dataGrid/components/dataGridListSelectionBar.tsx
-function q(t) {
-	let { grid: n } = t, a = n.componentName, o = n.localeText, s = n.selectedRows.size;
-	return !n.props.def.rowSelection || s === 0 ? null : /* @__PURE__ */ j(i, {
-		component: `${a}.list.selectionBar`,
+function W(t) {
+	let { grid: n } = t, i = n.componentName, o = n.localeText, s = n.selectedRows.size;
+	return !n.props.def.rowSelection || s === 0 ? null : /* @__PURE__ */ F(a, {
+		component: `${i}.list.selectionBar`,
 		position: "sticky",
 		bottom: 0,
 		zIndex: 2,
@@ -752,14 +710,14 @@ function q(t) {
 		fontSize: 14,
 		fontWeight: 500,
 		children: [
-			/* @__PURE__ */ A(e, {
+			/* @__PURE__ */ P(e, {
 				flex1: !0,
 				minWidth: 0,
 				textWrap: "nowrap",
 				css: { fontVariantNumeric: "tabular-nums" },
 				children: o.selectedRows(s)
 			}),
-			!n.allRowsSelected && /* @__PURE__ */ A(r, {
+			!n.allRowsSelected && /* @__PURE__ */ P(r, {
 				type: "button",
 				minHeight: 10,
 				px: 3,
@@ -772,7 +730,7 @@ function q(t) {
 				onClick: n.toggleSelectAllRows,
 				children: o.selectAll
 			}),
-			/* @__PURE__ */ A(r, {
+			/* @__PURE__ */ P(r, {
 				type: "button",
 				minHeight: 10,
 				px: 3,
@@ -788,18 +746,18 @@ function q(t) {
 		]
 	});
 }
-q.displayName = "DataGridListSelectionBar";
+W.displayName = "DataGridListSelectionBar";
 //#endregion
 //#region src/icons/filterIcon.tsx
-function J(e) {
-	return /* @__PURE__ */ A(n, {
+function G(e) {
+	return /* @__PURE__ */ P(n, {
 		viewBox: "0 0 24 24",
 		width: "1rem",
 		fill: "none",
 		stroke: "currentColor",
 		strokeWidth: 2,
 		...e,
-		children: /* @__PURE__ */ A(t, {
+		children: /* @__PURE__ */ P(t, {
 			d: "M4 6h16M7 12h10M10 18h4",
 			strokeLinecap: "round"
 		})
@@ -807,7 +765,7 @@ function J(e) {
 }
 //#endregion
 //#region src/components/dataGrid/components/dataGridListFilter.tsx
-var te = 8, ne = [
+var K = 8, q = [
 	{
 		value: "eq",
 		label: "="
@@ -837,11 +795,11 @@ var te = 8, ne = [
 		label: "↔"
 	}
 ];
-function re({ column: e }) {
-	let { currentFilter: t } = e, n = e.grid.componentName, r = e.grid.localeText, [i, a] = O(t?.type === "text" ? t.value : ""), { debounce: o } = v(t, (e) => d.textMatches(i, e), (e) => a(e?.type === "text" ? e.value : ""));
-	return /* @__PURE__ */ A(s, {
+function oe({ column: e }) {
+	let { currentFilter: t } = e, n = e.grid.componentName, r = e.grid.localeText, [i, a] = M(t?.type === "text" ? t.value : ""), { debounce: o } = x(t, (e) => d.textMatches(i, e), (e) => a(e?.type === "text" ? e.value : ""));
+	return /* @__PURE__ */ P(s, {
 		component: `${n}.list.sheet.input`,
-		...P.INPUT,
+		...D.INPUT,
 		type: "search",
 		value: i,
 		placeholder: e.filterConfig?.placeholder ?? r.filterPlaceholder,
@@ -852,19 +810,19 @@ function re({ column: e }) {
 		props: { "aria-label": r.filterColumn(String(e.header ?? e.key)) }
 	});
 }
-function ie({ column: t }) {
-	let { currentFilter: n } = t, r = t.grid.componentName, a = t.grid.localeText, o = String(t.header ?? t.key), c = t.filterConfig, [l, u] = O(() => d.numberDraft(n)), f = D(l), p = T((e) => {
+function se({ column: t }) {
+	let { currentFilter: n } = t, r = t.grid.componentName, i = t.grid.localeText, o = String(t.header ?? t.key), c = t.filterConfig, [l, u] = M(() => d.numberDraft(n)), f = j(l), p = k((e) => {
 		f.current = e, u(e);
-	}, []), { debounce: m, cancel: h } = v(n, (e) => d.numberMatches(l, e), (e) => p(d.numberDraft(e))), g = (e, n) => {
+	}, []), { debounce: m, cancel: h } = x(n, (e) => d.numberMatches(l, e), (e) => p(d.numberDraft(e))), g = (e, n) => {
 		p({
 			...f.current,
 			...e
 		});
 		let r = () => t.setNumberFilter(f.current.operator, f.current.value, f.current.valueTo);
 		n ? m("value", r) : (h(), r());
-	}, _ = (e, t, n, i) => /* @__PURE__ */ A(s, {
+	}, _ = (e, t, n, i) => /* @__PURE__ */ P(s, {
 		component: `${r}.list.sheet.input`,
-		...P.INPUT,
+		...D.INPUT,
 		type: "number",
 		value: e,
 		step: c?.step,
@@ -877,39 +835,43 @@ function ie({ column: t }) {
 			max: c?.max
 		}
 	});
-	return /* @__PURE__ */ j(i, {
+	return /* @__PURE__ */ F(a, {
 		gap: 2,
 		ai: "center",
 		children: [
-			/* @__PURE__ */ A(e, {
+			/* @__PURE__ */ P(e, {
 				tag: "select",
 				component: `${r}.list.sheet.input`,
-				...P.INPUT,
+				...D.INPUT,
 				width: 18,
 				flexShrink: 0,
 				props: {
 					value: l.operator,
-					"aria-label": a.filterComparison(o),
+					"aria-label": i.filterComparison(o),
 					onChange: (e) => g({ operator: e.target.value }, !1)
 				},
-				children: ne.map((e) => /* @__PURE__ */ A("option", {
+				children: q.map((e) => /* @__PURE__ */ P("option", {
 					value: e.value,
 					children: e.label
 				}, e.value))
 			}),
-			_(l.value, l.operator === "between" ? a.filterFrom(o) : a.filterColumn(o), l.operator === "between" ? a.filterFromPlaceholder : c?.placeholder ?? a.filterValuePlaceholder, "value"),
-			l.operator === "between" && _(l.valueTo, a.filterTo(o), a.filterToPlaceholder, "valueTo")
+			_(l.value, l.operator === "between" ? i.filterFrom(o) : i.filterColumn(o), l.operator === "between" ? i.filterFromPlaceholder : c?.placeholder ?? i.filterValuePlaceholder, "value"),
+			l.operator === "between" && _(l.valueTo, i.filterTo(o), i.filterToPlaceholder, "valueTo")
 		]
 	});
 }
-function ae({ column: e }) {
-	let { currentFilter: t } = e, n = e.grid.componentName, o = e.grid.localeText, c = t?.type === "multiselect" ? t.values : [], l = e.filterOptions, [u, d] = O(""), f = (t) => {
+function ce({ column: e }) {
+	let t = g(!0);
+	return t ? /* @__PURE__ */ P(t.ListDateFilter, { column: e }) : null;
+}
+function J({ column: e }) {
+	let { currentFilter: t } = e, n = e.grid.componentName, i = e.grid.localeText, c = t?.type === "multiselect" ? t.values : [], l = e.filterOptions, [u, d] = M(""), f = (t) => {
 		e.setMultiselectFilter(c.includes(t) ? c.filter((e) => e !== t) : [...c, t]);
 	};
-	if (l.length <= te) return /* @__PURE__ */ A(i, {
+	if (l.length <= K) return /* @__PURE__ */ P(a, {
 		flexWrap: "wrap",
 		gap: 2,
-		children: l.map((e) => /* @__PURE__ */ A(r, {
+		children: l.map((e) => /* @__PURE__ */ P(r, {
 			type: "button",
 			component: `${n}.list.sheet.chip`,
 			display: "inline-flex",
@@ -925,22 +887,22 @@ function ae({ column: e }) {
 		}, String(e.value)))
 	});
 	let p = u.trim().toLocaleLowerCase(), m = p ? l.filter((e) => e.label.toLocaleLowerCase().includes(p)) : l;
-	return /* @__PURE__ */ j(i, {
+	return /* @__PURE__ */ F(a, {
 		d: "column",
 		gap: 2,
-		children: [/* @__PURE__ */ A(s, {
+		children: [/* @__PURE__ */ P(s, {
 			component: `${n}.list.sheet.input`,
-			...P.INPUT,
+			...D.INPUT,
 			type: "search",
 			value: u,
-			placeholder: o.filterSelectSearchPlaceholder,
+			placeholder: i.filterSelectSearchPlaceholder,
 			onChange: (e) => d(e.target.value),
-			props: { "aria-label": o.filterColumn(String(e.header ?? e.key)) }
-		}), /* @__PURE__ */ A(i, {
+			props: { "aria-label": i.filterColumn(String(e.header ?? e.key)) }
+		}), /* @__PURE__ */ P(a, {
 			d: "column",
 			maxHeight: 64,
 			overflowY: "auto",
-			children: m.map((e) => /* @__PURE__ */ A(a, {
+			children: m.map((e) => /* @__PURE__ */ P(o, {
 				checked: c.includes(e.value),
 				onChange: () => f(e.value),
 				label: e.label,
@@ -961,27 +923,28 @@ function Y(e) {
 	let { column: t } = e;
 	switch (t.filterConfig?.type) {
 		case void 0: return null;
-		case "number": return /* @__PURE__ */ A(ie, { column: t });
-		case "multiselect": return /* @__PURE__ */ A(ae, { column: t });
-		default: return /* @__PURE__ */ A(re, { column: t });
+		case "number": return /* @__PURE__ */ P(se, { column: t });
+		case "multiselect": return /* @__PURE__ */ P(J, { column: t });
+		case "date": return /* @__PURE__ */ P(ce, { column: t });
+		default: return /* @__PURE__ */ P(oe, { column: t });
 	}
 }
 Y.displayName = "DataGridListFilter";
 //#endregion
 //#region src/components/dataGrid/components/dataGridListFilterSheet.tsx
 function X(t) {
-	let { grid: n } = t, { list: a } = n, o = n.componentName, s = n.localeText, l = a.activeFilters.length, u = a.filterableColumns;
-	return u.length === 0 ? null : /* @__PURE__ */ A(U, {
+	let { grid: n } = t, { list: i } = n, o = n.componentName, s = n.localeText, l = i.activeFilters.length, u = i.filterableColumns;
+	return u.length === 0 ? null : /* @__PURE__ */ P(H, {
 		grid: n,
-		open: a.sheet === "filter",
-		onOpen: () => a.openSheet("filter"),
-		onClose: () => a.openSheet(null),
+		open: i.sheet === "filter",
+		onOpen: () => i.openSheet("filter"),
+		onClose: () => i.openSheet(null),
 		title: s.filters,
-		trigger: ({ ref: t, props: { onClick: n, ...i } }) => /* @__PURE__ */ j(r, {
+		trigger: ({ ref: t, props: { onClick: n, ...i } }) => /* @__PURE__ */ F(r, {
 			type: "button",
 			component: `${o}.list.toolbar.button`,
 			variant: { active: l > 0 },
-			...P.PILL,
+			...D.PILL,
 			ref: t,
 			onClick: n,
 			props: {
@@ -989,15 +952,15 @@ function X(t) {
 				"aria-label": s.filtersLabel(l)
 			},
 			children: [
-				/* @__PURE__ */ A(J, {}),
+				/* @__PURE__ */ P(G, {}),
 				s.filters,
-				l > 0 && /* @__PURE__ */ A(e, {
+				l > 0 && /* @__PURE__ */ P(e, {
 					tag: "span",
 					minWidth: 5,
 					height: 5,
 					px: 1.5,
 					borderRadius: 999,
-					bgColor: "indigo-600",
+					bgColor: "accent-600",
 					color: "white",
 					fontSize: 12,
 					fontWeight: 600,
@@ -1008,33 +971,33 @@ function X(t) {
 				})
 			]
 		}),
-		footer: /* @__PURE__ */ j(k, { children: [l > 0 && /* @__PURE__ */ A(r, {
+		footer: /* @__PURE__ */ F(N, { children: [l > 0 && /* @__PURE__ */ P(r, {
 			type: "button",
 			component: `${o}.list.sheet.button`,
-			...P.SHEET_BUTTON,
+			...D.SHEET_BUTTON,
 			onClick: n.clearColumnFilters,
 			children: s.clearFilters
-		}), /* @__PURE__ */ A(r, {
+		}), /* @__PURE__ */ P(r, {
 			type: "button",
 			component: `${o}.list.sheet.primary`,
-			...P.SHEET_BUTTON,
+			...D.SHEET_BUTTON,
 			flex1: !0,
 			fontWeight: 600,
-			onClick: () => a.openSheet(null),
+			onClick: () => i.openSheet(null),
 			children: s.showRows(n.filterStats.filtered)
 		})] }),
-		children: u.map((e) => /* @__PURE__ */ j(i, {
+		children: u.map((e) => /* @__PURE__ */ F(a, {
 			component: `${o}.list.sheet.line`,
 			d: "column",
 			gap: 2,
 			py: 3,
 			bb: 1,
-			children: [/* @__PURE__ */ A(c, {
+			children: [/* @__PURE__ */ P(c, {
 				m: 0,
 				fontSize: 14,
 				fontWeight: 600,
 				children: e.header ?? String(e.key)
-			}), /* @__PURE__ */ A(Y, { column: e })]
+			}), /* @__PURE__ */ P(Y, { column: e })]
 		}, e.key))
 	});
 }
@@ -1042,8 +1005,8 @@ X.displayName = "DataGridListFilterSheet";
 //#endregion
 //#region src/components/dataGrid/components/dataGridListSortSheet.tsx
 function Z(e) {
-	let { grid: t } = e, { list: n } = t, a = t.componentName, o = t.localeText, s = n.sortedColumn, c = t.sortDirection === "DESC", l = `${t.identifier}-sort`, u = {
-		component: `${a}.list.sheet.line`,
+	let { grid: t } = e, { list: n } = t, i = t.componentName, o = t.localeText, s = n.sortedColumn, c = t.sortDirection === "DESC", l = `${t.identifier}-sort`, u = {
+		component: `${i}.list.sheet.line`,
 		display: "flex",
 		ai: "center",
 		gap: 3,
@@ -1052,57 +1015,57 @@ function Z(e) {
 		cursor: "pointer",
 		bb: 1
 	};
-	return /* @__PURE__ */ j(U, {
+	return /* @__PURE__ */ F(H, {
 		grid: t,
 		open: n.sheet === "sort",
 		onClose: () => n.openSheet(null),
 		title: o.sortBy,
 		onOpen: () => n.openSheet("sort"),
-		trigger: ({ ref: e, props: { onClick: t, ...n } }) => /* @__PURE__ */ j(r, {
+		trigger: ({ ref: e, props: { onClick: t, ...n } }) => /* @__PURE__ */ F(r, {
 			type: "button",
-			component: `${a}.list.toolbar.button`,
+			component: `${i}.list.toolbar.button`,
 			variant: { active: !!s },
-			...P.PILL,
+			...D.PILL,
 			ref: e,
 			onClick: t,
 			props: n,
-			children: [/* @__PURE__ */ A(g, {
+			children: [/* @__PURE__ */ P(v, {
 				width: "16px",
 				height: "16px",
 				fill: "currentColor",
 				rotate: c ? 180 : 0
 			}), s ? o.sortedBy(String(s.header ?? s.key), c) : o.sortBy]
 		}),
-		footer: /* @__PURE__ */ j(k, { children: [s && /* @__PURE__ */ A(r, {
+		footer: /* @__PURE__ */ F(N, { children: [s && /* @__PURE__ */ P(r, {
 			type: "button",
-			component: `${a}.list.sheet.button`,
-			...P.SHEET_BUTTON,
+			component: `${i}.list.sheet.button`,
+			...D.SHEET_BUTTON,
 			onClick: () => t.setSortColumn(s.key, void 0),
 			children: o.clearSort
-		}), /* @__PURE__ */ A(r, {
+		}), /* @__PURE__ */ P(r, {
 			type: "button",
-			component: `${a}.list.sheet.primary`,
-			...P.SHEET_BUTTON,
+			component: `${i}.list.sheet.primary`,
+			...D.SHEET_BUTTON,
 			flex1: !0,
 			fontWeight: 600,
 			onClick: () => n.openSheet(null),
 			children: o.close
 		})] }),
-		children: [/* @__PURE__ */ A(i, {
+		children: [/* @__PURE__ */ P(a, {
 			tag: "fieldset",
 			d: "column",
 			b: 0,
 			m: 0,
 			p: 0,
 			props: { "aria-label": o.sortBy },
-			children: n.sortableColumns.map((e) => /* @__PURE__ */ A(C, {
+			children: n.sortableColumns.map((e) => /* @__PURE__ */ P(E, {
 				name: l,
 				checked: s === e,
 				onChange: () => t.setSortColumn(e.key, c && s ? "DESC" : "ASC"),
 				label: e.header ?? String(e.key),
 				labelProps: u
 			}, e.key))
-		}), s && /* @__PURE__ */ A(i, {
+		}), s && /* @__PURE__ */ P(a, {
 			tag: "fieldset",
 			d: "column",
 			b: 0,
@@ -1110,7 +1073,7 @@ function Z(e) {
 			p: 0,
 			pt: 4,
 			props: { "aria-label": `${o.sortBy}: ${s.header ?? s.key}` },
-			children: ["ASC", "DESC"].map((e) => /* @__PURE__ */ A(C, {
+			children: ["ASC", "DESC"].map((e) => /* @__PURE__ */ P(E, {
 				name: `${l}-direction`,
 				checked: t.sortDirection === e,
 				onChange: () => t.setSortColumn(s.key, e),
@@ -1123,24 +1086,24 @@ function Z(e) {
 Z.displayName = "DataGridListSortSheet";
 //#endregion
 //#region src/components/dataGrid/components/dataGridListToolbar.tsx
-function oe({ grid: e }) {
-	let t = e.componentName, [n, a] = O(e.globalFilterValue), { debounce: o, cancel: c } = v(e.globalFilterValue, (e) => e === n, a);
-	return /* @__PURE__ */ j(i, {
+function le({ grid: e }) {
+	let t = e.componentName, [n, i] = M(e.globalFilterValue), { debounce: o, cancel: c } = x(e.globalFilterValue, (e) => e === n, i);
+	return /* @__PURE__ */ F(a, {
 		position: "relative",
 		ai: "center",
 		children: [
-			/* @__PURE__ */ A(i, {
+			/* @__PURE__ */ P(a, {
 				position: "absolute",
 				insetStart: 3.5,
 				pointerEvents: "none",
-				color: "gray-500",
+				color: "base-500",
 				props: { "aria-hidden": !0 },
-				children: /* @__PURE__ */ A(_, {
+				children: /* @__PURE__ */ P(b, {
 					fill: "currentColor",
 					width: "16px"
 				})
 			}),
-			/* @__PURE__ */ A(s, {
+			/* @__PURE__ */ P(s, {
 				component: `${t}.list.toolbar.search`,
 				width: "fit",
 				height: 11,
@@ -1154,14 +1117,14 @@ function oe({ grid: e }) {
 				placeholder: e.localeText.searchPlaceholder,
 				onChange: (t) => {
 					let n = t.target.value;
-					a(n), o("value", () => e.filter.setGlobalFilter(n));
+					i(n), o("value", () => e.filter.setGlobalFilter(n));
 				},
 				props: {
 					"aria-label": e.localeText.searchPlaceholder,
 					enterKeyHint: "search"
 				}
 			}),
-			n && /* @__PURE__ */ A(r, {
+			n && /* @__PURE__ */ P(r, {
 				type: "button",
 				component: `${t}.list.sheet.button`,
 				display: "inline-flex",
@@ -1174,17 +1137,17 @@ function oe({ grid: e }) {
 				position: "absolute",
 				insetEnd: 2,
 				onClick: () => {
-					c(), a(""), e.filter.setGlobalFilter("");
+					c(), i(""), e.filter.setGlobalFilter("");
 				},
 				props: { "aria-label": e.localeText.clearSearch },
-				children: /* @__PURE__ */ A(V, { width: "16px" })
+				children: /* @__PURE__ */ P(V, { width: "16px" })
 			})
 		]
 	});
 }
 function Q(t) {
-	let { grid: n } = t, { list: a } = n, { def: s } = n.props, c = n.componentName, l = n.localeText, { filtered: u, total: d } = n.filterStats, f = a.activeFilters, p = a.sortableColumns.length > 0;
-	return /* @__PURE__ */ j(i, {
+	let { grid: n } = t, { list: o } = n, { def: s } = n.props, c = n.componentName, l = n.localeText, { filtered: u, total: d } = n.filterStats, f = o.activeFilters, p = o.sortableColumns.length > 0;
+	return /* @__PURE__ */ F(a, {
 		component: `${c}.list.toolbar`,
 		d: "column",
 		gap: 3,
@@ -1192,61 +1155,61 @@ function Q(t) {
 		pt: 4,
 		pb: 3,
 		children: [
-			/* @__PURE__ */ j(i, {
+			/* @__PURE__ */ F(a, {
 				ai: "center",
 				gap: 3,
 				flexWrap: "wrap",
-				children: [/* @__PURE__ */ j(i, {
+				children: [/* @__PURE__ */ F(a, {
 					d: "column",
 					flex1: !0,
 					minWidth: 0,
-					children: [s.title && /* @__PURE__ */ A(e, {
+					children: [s.title && /* @__PURE__ */ P(e, {
 						id: n.titleId,
 						fontSize: 17,
 						fontWeight: 600,
 						lineHeight: 24,
 						children: s.title
-					}), /* @__PURE__ */ A(e, {
+					}), /* @__PURE__ */ P(e, {
 						component: `${c}.list.toolbar.count`,
 						fontSize: 13,
 						css: { fontVariantNumeric: "tabular-nums" },
 						children: l.rowCount(u, d)
 					})]
-				}), s.topBar && /* @__PURE__ */ j(i, {
+				}), s.topBar && /* @__PURE__ */ F(a, {
 					ai: "center",
 					gap: 2,
 					flexWrap: "wrap",
-					children: [/* @__PURE__ */ A(h, { grid: n }), /* @__PURE__ */ A(y, { grid: n })]
+					children: [/* @__PURE__ */ P(_, { grid: n }), /* @__PURE__ */ P(S, { grid: n })]
 				})]
 			}),
-			s.globalFilter && /* @__PURE__ */ A(oe, { grid: n }),
-			/* @__PURE__ */ j(i, {
+			s.globalFilter && /* @__PURE__ */ P(le, { grid: n }),
+			/* @__PURE__ */ F(a, {
 				gap: 2,
 				overflowX: "auto",
 				scrollbarWidth: "none",
 				mx: -4,
 				px: 4,
 				children: [
-					p && /* @__PURE__ */ A(Z, { grid: n }),
-					/* @__PURE__ */ A(X, { grid: n }),
-					s.rowSelection && /* @__PURE__ */ A(r, {
+					p && /* @__PURE__ */ P(Z, { grid: n }),
+					/* @__PURE__ */ P(X, { grid: n }),
+					s.rowSelection && /* @__PURE__ */ P(r, {
 						type: "button",
 						component: `${c}.list.toolbar.button`,
-						...P.PILL,
-						variant: { active: a.selecting },
-						onClick: () => a.setSelecting(!a.selecting),
-						props: { "aria-pressed": a.selecting },
+						...D.PILL,
+						variant: { active: o.selecting },
+						onClick: () => o.setSelecting(!o.selecting),
+						props: { "aria-pressed": o.selecting },
 						children: l.selectRows
 					})
 				]
 			}),
-			f.length > 0 && /* @__PURE__ */ A(i, {
+			f.length > 0 && /* @__PURE__ */ P(a, {
 				gap: 2,
 				overflowX: "auto",
 				scrollbarWidth: "none",
 				mx: -4,
 				px: 4,
-				children: f.map((t) => /* @__PURE__ */ j(e, {
+				children: f.map((t) => /* @__PURE__ */ F(e, {
 					tag: "span",
 					component: `${c}.list.toolbar.chip`,
 					display: "inline-flex",
@@ -1260,16 +1223,16 @@ function Q(t) {
 					fontSize: 13,
 					textWrap: "nowrap",
 					children: [
-						/* @__PURE__ */ j(e, {
+						/* @__PURE__ */ F(e, {
 							tag: "span",
 							fontWeight: 500,
 							children: [t.label, ":"]
 						}),
-						/* @__PURE__ */ A(e, {
+						/* @__PURE__ */ P(e, {
 							tag: "span",
 							children: t.value
 						}),
-						/* @__PURE__ */ A(r, {
+						/* @__PURE__ */ P(r, {
 							type: "button",
 							component: `${c}.list.sheet.button`,
 							display: "inline-flex",
@@ -1281,13 +1244,13 @@ function Q(t) {
 							cursor: "pointer",
 							onClick: () => t.column.clearFilter(),
 							props: { "aria-label": l.clearFilter(t.label) },
-							children: /* @__PURE__ */ A(V, { width: "14px" })
+							children: /* @__PURE__ */ P(V, { width: "14px" })
 						})
 					]
 				}, t.column.key))
 			}),
-			s.topBarContent && /* @__PURE__ */ A(e, { children: s.topBarContent }),
-			/* @__PURE__ */ A(o, {
+			s.topBarContent && /* @__PURE__ */ P(e, { children: s.topBarContent }),
+			/* @__PURE__ */ P(i, {
 				props: { role: "status" },
 				children: n.hasActiveFilters ? l.rowCount(u, d) : ""
 			})
@@ -1298,38 +1261,38 @@ Q.displayName = "DataGridListToolbar";
 //#endregion
 //#region src/components/dataGrid/components/dataGridList.tsx
 function $(t) {
-	let { grid: n } = t, { list: r, source: a } = n, o = n.componentName, s = r.visibleItems, c = n.props.loading || a.isLoading, l = n.groupColumns.size === 0 && !n.tree.enabled, d = a.enabled ? n.totalRowCount : n.filterStats.filtered, { queryVersion: f } = a;
-	return E(() => {
-		a.enabled && a.request(0, Math.max(s.length, 1));
+	let { grid: n } = t, { list: r, source: i } = n, o = n.componentName, s = r.visibleItems, c = n.props.loading || i.isLoading, l = n.groupColumns.size === 0 && !n.tree.enabled, d = i.enabled ? n.totalRowCount : n.filterStats.filtered, { queryVersion: f } = i;
+	return A(() => {
+		i.enabled && i.request(0, Math.max(s.length, 1));
 	}, [
-		a,
+		i,
 		f,
 		s.length,
 		n.page,
 		n.pageSize,
 		n.expansionVersion
-	]), /* @__PURE__ */ j(i, {
+	]), /* @__PURE__ */ F(a, {
 		component: `${o}.list`,
 		d: "column",
 		children: [
-			/* @__PURE__ */ A(Q, { grid: n }),
-			/* @__PURE__ */ A(p, { grid: n }),
-			c && /* @__PURE__ */ A(u, { grid: n }),
-			s.length === 0 ? /* @__PURE__ */ A(e, {
+			/* @__PURE__ */ P(Q, { grid: n }),
+			/* @__PURE__ */ P(m, { grid: n }),
+			c && /* @__PURE__ */ P(u, { grid: n }),
+			s.length === 0 ? /* @__PURE__ */ P(e, {
 				component: "list.muted",
 				px: 4,
 				py: 10,
 				textAlign: "center",
 				children: n.props.def.noDataComponent ?? (c ? n.localeText.loadingRows : n.localeText.noRows)
-			}) : /* @__PURE__ */ A(S, {
+			}) : /* @__PURE__ */ P(T, {
 				props: {
 					"aria-labelledby": n.props.def.title ? n.titleId : void 0,
 					"aria-busy": c || void 0
 				},
-				children: s.map(({ row: e, index: t }, r) => e.kind === "group" ? /* @__PURE__ */ A(L, {
+				children: s.map(({ row: e, index: t }, r) => e.kind === "group" ? /* @__PURE__ */ P(te, {
 					row: e,
 					version: n.rowVersion(e, t)
-				}, e.key) : /* @__PURE__ */ A(B, {
+				}, e.key) : /* @__PURE__ */ P(ne, {
 					row: e,
 					index: t,
 					position: l ? r + 1 : void 0,
@@ -1337,12 +1300,12 @@ function $(t) {
 					version: n.rowVersion(e, t)
 				}, e.key))
 			}),
-			/* @__PURE__ */ A(F, {
+			/* @__PURE__ */ P(L, {
 				grid: n,
 				shown: l ? s.length : void 0
 			}),
-			/* @__PURE__ */ A(q, { grid: n }),
-			/* @__PURE__ */ A(K, { grid: n })
+			/* @__PURE__ */ P(W, { grid: n }),
+			/* @__PURE__ */ P(U, { grid: n })
 		]
 	});
 }