@sheetxl/grid-react 0.8.0-beta.20 → 0.8.0-beta.22

package/node/esm/index.mjs

@@ -1,12 +1,12 @@
 /**
-* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.8.0-beta.20
+* @license @sheetxl/grid-react - Grid React - Advanced grid component for React - v0.8.0-beta.22
 *
 * (C) 2026-present SheetXL Inc. & Michael T. Ford
 * License: SheetXL EULA — https://www.sheetxl.com/eula
 */
 import e, { cloneElement as t, createContext as n, createElement as r, forwardRef as o, isValidElement as l, memo as i, useCallback as s, useContext as a, useEffect as c, useId as d, useLayoutEffect as u, useMemo as g, useReducer as h, useRef as f, useState as p, useSyncExternalStore as m } from "react";
 import { Fragment as w, jsx as x, jsxs as v } from "react/jsx-runtime";
-import { FloatPanelSurface as y, FloatPopper as b, KeyCodes as S, KeyModifiers as E, ReactUtils as C, RenderSlot as I, SERIES_COUNT as R, ScrollPane as P, Viewport as M, buildThemeCSS as D, defaultTheme as k, themeVars as T, useBoundSyncExternalStore as O, useCallbackRef as z, useFloatPopupOpen as L, useFullscreenPortal as A, useImperativeElement as F, useInputModality as $, useMeasure as N, useOptionalBoundSyncExternalStore as _, useSynchronizedPointerHandler as B, zIndexVar as V } from "@sheetxl/utils-react";
+import { FloatPanelSurface as y, FloatPopper as b, KeyCodes as S, KeyModifiers as E, ReactUtils as C, RenderSlot as I, SERIES_COUNT as R, ScrollPane as P, Viewport as M, buildThemeCSS as D, defaultTheme as k, themeVars as T, useBoundSyncExternalStore as O, useCallbackRef as z, useFloatPopupOpen as L, useFullscreenPortal as A, useImperativeElement as $, useInputModality as F, useMeasure as N, useOptionalBoundSyncExternalStore as _, useSynchronizedPointerHandler as B, zIndexVar as V } from "@sheetxl/utils-react";
 import { AnchorLocation as H, CommonUtils as K, CoordUtils as W, DOMUtils as U, Direction as j, RangeAxis as G, SelectionTraversalUtils as q } from "@sheetxl/utils";
 import X, { clsx as Y } from "clsx";
 import { createPortal as Z } from "react-dom";
@@ -114,7 +114,7 @@ var Q = (e, t) => {
 		if (E) return E.subscribe(() => z.current());
 	}, [E]), !R || !D) return null;
 	const L = l ? o : o / P;
-	let A, F;
+	let A, $;
 	if (d) {
 		const e = {
 			dashGap: 2,
@@ -128,10 +128,10 @@ var Q = (e, t) => {
 			strokeDashoffset: `${t}px`,
 			animation: `${se} ${e.speed * t}ms linear infinite`,
 			willChange: "stroke-dashoffset"
-		}, F = e.gapColor;
+		}, $ = e.gapColor;
 	}
-	let $ = null;
-	n && ($ = x("path", {
+	let F = null;
+	n && (F = x("path", {
 		ref: k,
 		d: D.fill,
 		style: {
@@ -144,13 +144,13 @@ var Q = (e, t) => {
 	let N = null;
 	if (r && o) {
 		const e = D.outline;
-		N = v(w, { children: [F && x("path", {
+		N = v(w, { children: [$ && x("path", {
 			ref: O,
 			fill: "none",
 			vectorEffect: "non-scaling-stroke",
 			strokeWidth: L,
 			d: e,
-			style: { stroke: F }
+			style: { stroke: $ }
 		}, "stroke-under"), x("path", {
 			fill: "none",
 			strokeDasharray: g,
@@ -181,7 +181,7 @@ var Q = (e, t) => {
 			...b
 		},
 		...S,
-		children: [$, N]
+		children: [F, N]
 	});
 });
 oe.displayName = "RectangleSVG";
@@ -416,7 +416,7 @@ var le = (e, t, n, r) => {
 		R("mouseleave", e, u.current);
 	}, []), A = z((e) => {
 		R("mousemove", e, u.current);
-	}, []), $ = z((e) => {
+	}, []), F = z((e) => {
 		R("mouseout", e, u.current);
 	}, []), N = z((e) => {
 		R("mouseover", e, u.current);
@@ -440,14 +440,14 @@ var le = (e, t, n, r) => {
 		(t.nodeType === Node.ELEMENT_NODE ? t : t.parentElement)?.closest("input, textarea, [contenteditable]:not([contenteditable=\"false\"])") || e.preventDefault();
 	}, [l]), G = z((e) => {
 		R("contextmenu", e, u.current);
-	}, []), q = F(t, () => ({
+	}, []), q = $(t, () => ({
 		isStage: () => !0,
 		addReactEventListener: E,
 		registerResponder: p,
 		registerLayer: v
 	}), []);
 	return c(() => v({ getElement: () => q.current }), [v]), x("div", {
-		className: X(n, "stage", we),
+		className: X(n, "sxl-stage", we),
 		ref: q,
 		tabIndex: 0,
 		...a,
@@ -459,7 +459,7 @@ var le = (e, t, n, r) => {
 		onMouseEnter: O,
 		onMouseLeave: L,
 		onMouseMove: A,
-		onMouseOut: $,
+		onMouseOut: F,
 		onMouseOver: N,
 		onMouseUp: _,
 		onDoubleClick: B,
@@ -770,9 +770,9 @@ var Ce = Object.freeze([]), Ie = (e, t) => {
 	maxVirtualBounds: 0,
 	scrollOffset: 0,
 	freezeOffset: 0
-}]), Fe = n(null), $e = ({ pane: e, viewport: t, children: n }) => {
+}]), $e = n(null), Fe = ({ pane: e, viewport: t, children: n }) => {
 	const r = _(t, (e) => e.getSnapshot()), o = g(() => ({ pane: e }), [e, r]);
-	return x(Fe.Provider, {
+	return x($e.Provider, {
 		value: o,
 		children: n
 	});
@@ -801,7 +801,7 @@ var Ce = Object.freeze([]), Ie = (e, t) => {
 		value: o,
 		children: t
 	});
-}, Ve = { "sheetxl-grid": "_sheetxl-grid_5yo0n_7" }, He = i(o((e, n) => {
+}, Ve = { "sheetxl-grid": "_sheetxl-grid_9syr3_7" }, He = i(o((e, n) => {
 	const { rowCount: o = 1, columnCount: i = 1, viewport: a, metrics: d, getRangeFromCell: u = W.cellToRange, hiddenRowsAt: m, hiddenColumnsAt: y, freezeLeft: b = 0, freezeTop: S = 0, propsFreezeLeft: E, propsFreezeTop: C, onFirstRender: I, children: R, wrapPane: P, onFocus: D, onBlur: k, className: T, style: O, ...L } = e, A = z(D, [D]), N = z(k, [k]), _ = z(I, [I]), [B, V] = p(H.Center), [K, j] = h((e) => e + 1, 0), G = g(() => new M({}), []), q = a ?? G, [Y, Z] = p(() => {
 		const e = q.getClient();
 		return {
@@ -967,7 +967,7 @@ var Ce = Object.freeze([]), Ie = (e, t) => {
 				ref: (e) => {
 					e ? (i.refStage = e, ve()) : i.refStage = null;
 				},
-				className: `stage stage-${r}`,
+				className: `sxl-stage sxl-stage-${r}`,
 				onFocus: (e) => {
 					V(r), A(e);
 				},
@@ -996,7 +996,7 @@ var Ce = Object.freeze([]), Ie = (e, t) => {
 			getRangeFromCell: u,
 			invalidate: le,
 			totalRange: t,
-			getSurfacePointFromPointer: (e, t) => Fe(e, t),
+			getSurfacePointFromPointer: (e, t) => $e(e, t),
 			scrollTo: (e) => tt(e),
 			scrollCellCoordsIntoView: (e, t, n) => et(e, t, n),
 			getAllPanes: () => e
@@ -1036,7 +1036,7 @@ var Ce = Object.freeze([]), Ie = (e, t) => {
 			we.current = [];
 		}
 	}, [Ce]);
-	const Fe = s((e, t) => {
+	const $e = s((e, t) => {
 		const n = nt.current?.getBoundingClientRect();
 		return n ? {
 			x: e - n.x,
@@ -1047,7 +1047,7 @@ var Ce = Object.freeze([]), Ie = (e, t) => {
 		};
 	}, []), Ne = z((e, t) => {
 		if (1 === Object.keys(Ce).length) return ue(Ce);
-		const n = Fe(e, t);
+		const n = $e(e, t);
 		if (!n) return ue(Ce);
 		const { x: r, y: o } = n;
 		let l = null;
@@ -1152,7 +1152,7 @@ var Ce = Object.freeze([]), Ie = (e, t) => {
 	]), tt = z((e) => {
 		const t = e?.left ?? e?.[0], n = e?.top ?? e?.[1], r = q.getTarget(), o = t ?? r.left, l = n ?? r.top, i = "smooth" === e?.behavior;
 		q.setTarget(o, l, i);
-	}, []), nt = F(n, () => ({
+	}, []), nt = $(n, () => ({
 		focus: ze,
 		invalidate: le,
 		scrollTo: tt,
@@ -1178,7 +1178,7 @@ var Ce = Object.freeze([]), Ie = (e, t) => {
 		})(t);
 		return n ? x(De.Provider, {
 			value: !1,
-			children: x($e, {
+			children: x(Fe, {
 				pane: e,
 				viewport: q,
 				children: P ? P(e, n) : n
@@ -1247,7 +1247,7 @@ var Ce = Object.freeze([]), Ie = (e, t) => {
 				height: o.height,
 				clip: m ? `rect(${g}px, ${f}px, ${p}px, ${h}px)` : void 0
 			};
-			return x($e, {
+			return x(Fe, {
 				pane: n,
 				viewport: q,
 				children: e.elemStage ? t(e.elemStage, { style: w }, ot?.[r]) : null
@@ -1276,10 +1276,10 @@ var Ce = Object.freeze([]), Ie = (e, t) => {
 	c(() => {
 		!st.current && at && Pe && (st.current = !0, _?.(nt.current));
 	}, [at, Pe]);
-	const ct = $();
+	const ct = F();
 	return x("div", {
 		ref: nt,
-		className: X(T, "grid-surface", Ve["sheetxl-grid"], { "touch-input": "touch" === ct }),
+		className: X(T, "sxl-grid-surface", Ve["sheetxl-grid"], { "sxl-touch-input": "touch" === ct }),
 		style: {
 			overflow: "hidden",
 			...O
@@ -1316,12 +1316,12 @@ var Ke = Object.freeze({
 	H.Center
 ];
 function Qe() {
-	const e = a(Fe);
+	const e = a($e);
 	if (!e) throw new Error("useGridPane must be used within a GridPaneProvider");
 	return e.pane;
 }
 function et() {
-	return a(Fe)?.pane ?? null;
+	return a($e)?.pane ?? null;
 }
 var tt = (e) => `k:${e}`;
 function nt(e, t) {
@@ -1767,10 +1767,10 @@ var ht = !1, ft = (e, t, n, r) => ({
 	}, R = E.res.value, P = S.res.value, M = (e) => Math.max(E.res.vLo, Math.min(E.res.vHi, e)), D = (e) => Math.max(S.res.vLo, Math.min(S.res.vHi, e)), k = M(R), T = D(P), O = {
 		x: k,
 		y: T
-	}, z = M(E.res.lo), L = D(S.res.lo), A = ft(z, L, M(E.res.hi) - z, D(S.res.hi) - L), F = k - R, $ = T - P, N = Math.abs($) >= Math.abs(F) ? $ < 0 ? "b" : $ > 0 ? "t" : F < 0 ? "r" : F > 0 ? "l" : null : F < 0 ? "r" : F > 0 ? "l" : $ < 0 ? "b" : $ > 0 ? "t" : null, _ = F || $ ? {
-		dx: F,
-		dy: $,
-		distance: Math.hypot(F, $),
+	}, z = M(E.res.lo), L = D(S.res.lo), A = ft(z, L, M(E.res.hi) - z, D(S.res.hi) - L), $ = k - R, F = T - P, N = Math.abs(F) >= Math.abs($) ? F < 0 ? "b" : F > 0 ? "t" : $ < 0 ? "r" : $ > 0 ? "l" : null : $ < 0 ? "r" : $ > 0 ? "l" : F < 0 ? "b" : F > 0 ? "t" : null, _ = $ || F ? {
+		dx: $,
+		dy: F,
+		distance: Math.hypot($, F),
 		direction: N ?? "t"
 	} : null;
 	return C || "hide" !== l ? {
@@ -1908,7 +1908,7 @@ var ht = !1, ft = (e, t, n, r) => ({
 		const e = b.getElement()?.getBoundingClientRect(), t = p.x - (e?.left ?? 0), n = p.y - (e?.top ?? 0);
 		z = x("div", {
 			ref: T,
-			className: "sticky-layer",
+			className: "sxl-sticky-layer",
 			style: {
 				position: "absolute",
 				left: 0,
@@ -1947,10 +1947,10 @@ var ht = !1, ft = (e, t, n, r) => ({
 	return "t" === t || "b" === t ? r = l : o = l, `translate(${r}, ${o})`;
 };
 zt.displayName = "StickyAnchor";
-var Ft = (e) => {
+var $t = (e) => {
 	const { side: t, align: n = "center" } = e;
 	return ("t" === t ? "top" : "b" === t ? "bottom" : "l" === t ? "left" : "right") + ("start" === n ? "-start" : "end" === n ? "-end" : "");
-}, $t = { padding: 4 }, Nt = (e) => {
+}, Ft = { padding: 4 }, Nt = (e) => {
 	const { state: t, offset: n, alignOffset: r, open: o, container: l, className: i, style: s, zIndex: a, themeFrom: c, renderOffscreen: d, children: g, onMount: h, onOpening: p, onOpen: m, onClosing: v, onClose: y } = e, S = f(null);
 	u(() => {
 		S.current?.instance()?.update();
@@ -1963,13 +1963,13 @@ var Ft = (e) => {
 		ref: S,
 		open: o,
 		anchorEl: t.reference,
-		placement: Ft(t.placement),
+		placement: $t(t.placement),
 		offsets: {
 			mainAxis: n,
 			alignmentAxis: r
 		},
 		boundary: t.getBoundaryRect,
-		shift: $t,
+		shift: Ft,
 		strategy: "fixed",
 		resizeOnOverflow: !1,
 		transition: !1,
@@ -2256,7 +2256,7 @@ var Yt = {
 	const t = e.getCoords();
 	return t ? `${t.rowIndex},${t.colIndex}` : null;
 }, an = (t) => {
-	const { hovered: n, selection: r, probe: o, name: l, target: i, dismiss: s, placement: d, offset: u = 6, alignOffset: g = 0, openDelay: h, closeDelay: m, group: w, hold: v = !1, whenOff: y = "hide", whenPartial: b, boundary: S, zIndex: E, interactive: C = "pointer", onDismiss: I, children: R, style: P } = t, M = Qe(), D = a(Me), k = void 0 !== n, T = !!r, O = void 0 !== i, L = `range-float:${l ?? D}`, { open: A, setTarget: F, tipProps: $, close: N } = Qt({
+	const { hovered: n, selection: r, probe: o, name: l, target: i, dismiss: s, placement: d, offset: u = 6, alignOffset: g = 0, openDelay: h, closeDelay: m, group: w, hold: v = !1, whenOff: y = "hide", whenPartial: b, boundary: S, zIndex: E, interactive: C = "pointer", onDismiss: I, children: R, style: P } = t, M = Qe(), D = a(Me), k = void 0 !== n, T = !!r, O = void 0 !== i, L = `range-float:${l ?? D}`, { open: A, setTarget: $, tipProps: F, close: N } = Qt({
 		openDelay: h,
 		closeDelay: m,
 		name: L,
@@ -2281,8 +2281,8 @@ var Yt = {
 	]);
 	const W = k ? B.aimed : null;
 	c(() => {
-		F(W);
-	}, [W, F]);
+		$(W);
+	}, [W, $]);
 	const [U, j] = p(null), G = f(null), q = f(!1);
 	c(() => {
 		s && (N(), j(null), V(rn));
@@ -2330,9 +2330,9 @@ var Yt = {
 		G.current && clearTimeout(G.current);
 	}, []), !te) return null;
 	const oe = "none" === C ? {
-		...$,
+		...F,
 		style: en
-	} : $;
+	} : F;
 	return x(_t, {
 		anchor: { range: te.range },
 		placement: te.placement ?? d,
@@ -2357,7 +2357,7 @@ var Yt = {
 			if ("none" === C) return t;
 			const n = "focus" === C;
 			return x("div", {
-				className: "range-float-frame",
+				className: "sxl-range-float-frame",
 				style: tn,
 				onPointerDownCapture: n ? () => {
 					q.current = !0;
@@ -2399,7 +2399,7 @@ var cn = (e, t) => Array.isArray(e) ? e.includes(t) : e === t, dn = (e) => {
 		h(null);
 	}, []);
 	return x(st, {
-		className: X(l, "range-float"),
+		className: X(l, "sxl-range-float"),
 		onPointerMove: d ? f : void 0,
 		onPointerLeave: d ? m : void 0,
 		children: x(an, {
@@ -2416,7 +2416,7 @@ var un = (e) => {
 	return x(dn, {
 		...i,
 		activateOn: "hover",
-		className: X(n, "range-tooltip"),
+		className: X(n, "sxl-range-tooltip"),
 		style: r,
 		interactive: o ? "pointer" : "none",
 		zIndex: Pe,
@@ -2588,7 +2588,7 @@ var gn = (e) => 1 - (1 - e) * (1 - e), hn = () => "undefined" != typeof window &
 	}, [M]);
 	const D = et(), k = f(null), T = f(() => {});
 	if (T.current = () => {
-		const e = k.current?.closest(".gesture-tip");
+		const e = k.current?.closest(".sxl-gesture-tip");
 		if (!e) return;
 		const t = s && D ? s.frame(xn(D)) : null;
 		if (!t) return void (e.style.translate = "");
@@ -2603,7 +2603,7 @@ var gn = (e) => 1 - (1 - e) * (1 - e), hn = () => "undefined" != typeof window &
 		ref: k,
 		style: En,
 		children: h
-	}) : h, z = X(g, "gesture-tip"), L = () => P(!0), A = R && i?.duration ? {
+	}) : h, z = X(g, "sxl-gesture-tip"), L = () => P(!0), A = R && i?.duration ? {
 		...Sn,
 		transition: `transform ${i.duration}ms ${i.easing ?? "ease-in-out"}`
 	} : Sn;
@@ -2808,7 +2808,7 @@ var zn = (e) => (e.rowEnd - e.rowStart + 1) * (e.colEnd - e.colStart + 1), Ln =
 		}),
 		version: () => r
 	};
-}, An = n(null), Fn = !1, $n = () => a(An), Nn = (e) => {
+}, An = n(null), $n = !1, Fn = () => a(An), Nn = (e) => {
 	const { isolate: t, children: n } = e, r = a(An), o = f(null), l = t || !r;
 	l && null === o.current && (o.current = Ln());
 	const i = l ? o.current : r;
@@ -2829,7 +2829,7 @@ var _n = (e) => {
 	]), u(() => {
 		o && t.set(r, e);
 	}), u(() => {
-		null !== t || Fn || (Fn = !0, console.warn("<RangeTooltip> outside any grid. Declare it among a grid's children, or under a <RangeTooltipProvider> that encloses the grid. This warning fires once."));
+		null !== t || $n || ($n = !0, console.warn("<RangeTooltip> outside any grid. Declare it among a grid's children, or under a <RangeTooltipProvider> that encloses the grid. This warning fires once."));
 	}, [t]), null;
 };
 _n.displayName = "RangeTooltip";
@@ -2852,7 +2852,7 @@ var Bn = () => () => {}, Vn = () => 0, Hn = i((e) => {
 	const v = w ?? h.current;
 	return x(st, {
 		...r,
-		className: X(t, "range-tooltips"),
+		className: X(t, "sxl-range-tooltips"),
 		onPointerMove: o ? u : void 0,
 		onPointerLeave: o ? g : void 0,
 		children: o ? x(an, {
@@ -2979,12 +2979,12 @@ var jn = i((e) => {
 			}
 		};
 		return [
-			["insert-bar", c.toClipBounds(t, -g)],
-			["insert-bar-cap-start", p(r.start) ? r.start : null],
-			["insert-bar-cap-end", p(r.end) ? r.end : null]
+			["sxl-insert-bar", c.toClipBounds(t, -g)],
+			["sxl-insert-bar-cap-start", p(r.start) ? r.start : null],
+			["sxl-insert-bar-cap-end", p(r.end) ? r.end : null]
 		];
 	})(e).map(([t, o]) => o && x(gt, {
-		className: Y(t, e ? "row" : "column"),
+		className: Y(t, e ? "sxl-axis-row" : "sxl-axis-column"),
 		bounds: o,
 		style: {
 			pointerEvents: "none",
@@ -3185,13 +3185,13 @@ var rr = (e) => {
 	}), u(() => {
 		if (v) return v.subscribe(() => O.current());
 	}, [v]);
-	const [z, L] = p(!1), A = lr(!!h), { start: F, cancel: $, dragMode: N } = or((e, t) => {
+	const [z, L] = p(!1), A = lr(!!h), { start: $, cancel: F, dragMode: N } = or((e, t) => {
 		const n = 2 === t.button && !0 === M;
 		if (0 !== t.button && !n) return null;
 		t.stopPropagation(), R && t.preventDefault();
 		const r = n ? sr() : null, o = e;
 		let l = e;
-		return a?.(o, t, $), {
+		return a?.(o, t, F), {
 			dragMode: "handle",
 			drag: (e, n) => {
 				l = e, c?.(o, e, n ?? t);
@@ -3226,10 +3226,10 @@ var rr = (e) => {
 		top: 0,
 		transform: K
 	}, U = {
-		className: X("drag-handle", S),
+		className: X("sxl-drag-handle", S),
 		ref: T,
 		onPointerDown: (e) => {
-			A(e) ? h(e) : F(e);
+			A(e) ? h(e) : $(e);
 		},
 		onDoubleClick: h ? (e) => e.stopPropagation() : void 0,
 		onPointerEnter: () => {
@@ -3421,7 +3421,7 @@ var sr = () => {
 	return v(w, { children: [
 		x(gt, "entire" === r ? {
 			ref: b,
-			className: X("drag-grip", p),
+			className: X("sxl-drag-grip", p),
 			...A ? { bounds: A } : { range: t },
 			style: {
 				cursor: k,
@@ -3431,7 +3431,7 @@ var sr = () => {
 			...O
 		} : {
 			ref: b,
-			className: X("drag-grip", p),
+			className: X("sxl-drag-grip", p),
 			range: t,
 			clipInsets: -z / 2,
 			style: {
@@ -3491,12 +3491,12 @@ var xr = (e, t, n, r) => {
 	if (!t) return null;
 	const C = b ?? t, I = b ? null : u ?? null;
 	return v(w, { children: [x(Un, {
-		className: "resizer-outline",
+		className: "sxl-resizer-outline",
 		range: C,
 		glide: I,
 		...h
 	}), n.map((e) => x(ir, {
-		className: `resize-handle ${e}`,
+		className: `sxl-resize-handle sxl-${e}`,
 		range: C,
 		glide: I,
 		anchor: e,
@@ -3602,7 +3602,7 @@ var Sr = (e, t, n, r) => {
 	const z = b ? Cr(t, b) : null;
 	return v(w, { children: [
 		x(ir, {
-			className: "fill-handle",
+			className: "sxl-fill-handle",
 			range: t,
 			anchor: T,
 			clampToView: O,
@@ -3628,12 +3628,12 @@ var Sr = (e, t, n, r) => {
 			}
 		}),
 		b && x(Un, {
-			className: "fill-preview",
+			className: "sxl-fill-preview",
 			range: b,
 			...p
 		}),
 		z && x(Un, {
-			className: "fill-vacated",
+			className: "sxl-fill-vacated",
 			range: z,
 			fill: "rgba(128, 128, 128, 0.28)"
 		})
@@ -3651,7 +3651,7 @@ var Rr = "data-cell-interactive", Pr = Object.freeze({ [Rr]: "" }), Mr = (e) =>
 }, kr = i((e) => {
 	const { value: t, zoom: n, bounds: r, cell: o, range: l, children: i, className: s, ...a } = e;
 	return x("div", {
-		className: X(s, "cell"),
+		className: X(s, "sxl-cell"),
 		...a,
 		children: t
 	});
@@ -3756,8 +3756,8 @@ var Rr = "data-cell-interactive", Pr = Object.freeze({ [Rr]: "" }), Mr = (e) =>
 }, Ar = Object.freeze({
 	rangesH: [],
 	rangesV: []
-}), Fr = /* @__PURE__ */ new WeakMap(), $r = (e, t = {}) => {
-	const n = e.getVisibleRange(), r = Fr.get(e);
+}), $r = /* @__PURE__ */ new WeakMap(), Fr = (e, t = {}) => {
+	const n = e.getVisibleRange(), r = $r.get(e);
 	if (r && r.rowStart === n.rowStart && r.colStart === n.colStart && r.rowEnd === n.rowEnd && r.colEnd === n.colEnd && r.cacheToken === t.cacheToken && r.getVisibleCells === t.getVisibleCells) return r.ranges;
 	const o = ((e, t = {}) => {
 		const { getVisibleCells: n } = t, r = e.getVisibleRange(), o = [], l = [], i = /* @__PURE__ */ new Set(), s = (e) => {
@@ -3787,7 +3787,7 @@ var Rr = "data-cell-interactive", Pr = Object.freeze({ [Rr]: "" }), Mr = (e) =>
 			rangesV: l
 		};
 	})(e, t);
-	return Fr.set(e, {
+	return $r.set(e, {
 		rowStart: n.rowStart,
 		colStart: n.colStart,
 		rowEnd: n.rowEnd,
@@ -3797,8 +3797,8 @@ var Rr = "data-cell-interactive", Pr = Object.freeze({ [Rr]: "" }), Mr = (e) =>
 		ranges: o
 	}), o;
 }, Nr = (e, t) => `${e}:${t}`, _r = {
-	tiles: "_tiles_v3ek7_7",
-	gridlines: "_gridlines_v3ek7_32"
+	tiles: "_tiles_1hj43_7",
+	gridlines: "_gridlines_1hj43_32"
 }, Br = i((e) => {
 	const { renderCell: t, cacheToken: n, getVisibleCells: r, hiddenCellAt: o, suppressCell: l, className: i, style: s } = e, a = Qe(), u = a.getAnchor(), h = d(), m = g(() => `sxl-cl-${h.replace(/[^a-zA-Z0-9_-]/g, "")}`, [h]), y = f({
 		token: void 0,
@@ -3872,7 +3872,7 @@ var Rr = "data-cell-interactive", Pr = Object.freeze({ [Rr]: "" }), Mr = (e) =>
 					}));
 				}
 				if (c = x("div", {
-					className: "tile",
+					className: "sxl-tile",
 					style: { transform: `translate(${f}px, ${p}px)` },
 					children: m
 				}, `pane:${u}:tile:${e}:${n}`), r && (l.set(o, c), l.size > jr)) {
@@ -3903,24 +3903,24 @@ var Rr = "data-cell-interactive", Pr = Object.freeze({ [Rr]: "" }), Mr = (e) =>
 		u,
 		R,
 		P
-	]), [L, A] = p(!1), F = f({
+	]), [L, A] = p(!1), $ = f({
 		left: E,
 		top: I,
 		timer: null
 	});
 	c(() => {
-		const e = F.current;
+		const e = $.current;
 		e.left === E && e.top === I || (e.left = E, e.top = I, A(!0), e.timer && clearTimeout(e.timer), e.timer = setTimeout(() => {
 			e.timer = null, A(!1);
 		}, Wr));
 	}, [E, I]), c(() => () => {
-		const e = F.current.timer;
+		const e = $.current.timer;
 		e && clearTimeout(e);
 	}, []);
-	const $ = C.getDevicePixelRatio(), N = Math.round((R - E) * $) / $, _ = Math.round((P - I) * $) / $;
+	const F = C.getDevicePixelRatio(), N = Math.round((R - E) * F) / F, _ = Math.round((P - I) * F) / F;
 	return v(w, { children: [x(gt, {
 		fill: !0,
-		className: X("tiles", _r.tiles, m, i),
+		className: X("sxl-tiles", _r.tiles, m, i),
 		style: {
 			pointerEvents: "none",
 			...s,
@@ -3939,7 +3939,7 @@ Br.displayName = "CellTileDiv";
 var Vr = i((e) => {
 	const { renderCell: t, cacheToken: n, getVisibleCells: r, hiddenCellAt: o, suppressCell: l, className: i, style: s, ...a } = e;
 	return x(st, {
-		className: X(i, "cells"),
+		className: X(i, "sxl-cells"),
 		...a,
 		children: x(Br, {
 			renderCell: t,
@@ -4042,7 +4042,7 @@ var Hr = 8, Kr = 1 << 19, Wr = 150, Ur = 1, jr = 512, Gr = !1, qr = (e, t, n, r)
 	if (!n) return null;
 	const l = e.getPaneBounds(), i = Math.ceil(l.width), s = Math.ceil(l.height), a = String(Qr / C.getDevicePixelRatio());
 	return x("svg", {
-		className: X(t ? "horizontal" : "vertical"),
+		className: X(t ? "sxl-horizontal" : "sxl-vertical"),
 		width: `${i}`,
 		height: `${s}`,
 		viewBox: `0 0 ${i} ${s}`,
@@ -4057,7 +4057,7 @@ var Hr = 8, Kr = 1 << 19, Wr = 150, Ur = 1, jr = 512, Gr = !1, qr = (e, t, n, r)
 		})
 	});
 }, Jr = i((e) => {
-	const { showGridLines: t = !0, gridLineColor: n = "var(--sxl-color-base-300, rgb(224, 224, 224))", propsRows: r, propsColumns: o, getVisibleCells: l, hiddenCellAt: i, cacheToken: s, bufferRange: a, className: c, style: d, ...u } = e, h = Qe(), f = t, p = !0 === t || !0 === f?.horizontal, m = !0 === t || !0 === f?.vertical, { rangesH: w, rangesV: y } = $r(h, {
+	const { showGridLines: t = !0, gridLineColor: n = "var(--sxl-color-base-300, rgb(224, 224, 224))", propsRows: r, propsColumns: o, getVisibleCells: l, hiddenCellAt: i, cacheToken: s, bufferRange: a, className: c, style: d, ...u } = e, h = Qe(), f = t, p = !0 === t || !0 === f?.horizontal, m = !0 === t || !0 === f?.vertical, { rangesH: w, rangesV: y } = Fr(h, {
 		getVisibleCells: l,
 		cacheToken: s
 	}), b = C.getDevicePixelRatio(), { top: S, left: E } = h.getScrollTopLeft(), I = h.getPaneBounds(), R = h.getVisibleRange(), P = h.getColumnSize(R.colEnd), M = h.getRowSize(R.rowEnd), D = Math.min(I.width, P ? P.offset + P.size : I.width), k = Math.min(I.height, M ? M.offset + M.size : I.height), T = 0 === w.length ? `${S}|${D}|${b}` : `${S}|${E}|${D}|${b}|${Yr(w)}`, O = 0 === y.length ? `${E}|${k}|${b}` : `${E}|${S}|${k}|${b}|${Yr(y)}`, z = g(() => p ? qr(h, !0, w) : null, [
@@ -4071,10 +4071,10 @@ var Hr = 8, Kr = 1 << 19, Wr = 150, Ur = 1, jr = 512, Gr = !1, qr = (e, t, n, r)
 	]);
 	return p || m ? x(st, {
 		...u,
-		className: X(c, "gridlines"),
+		className: X(c, "sxl-gridlines"),
 		children: v(gt, {
 			fill: !0,
-			className: X("gridlines-box", _r.gridlines),
+			className: X("sxl-gridlines-box", _r.gridlines),
 			style: {
 				pointerEvents: "none",
 				...d
@@ -4615,7 +4615,7 @@ var bo = {
 		transition: !1,
 		themeFrom: "anchor",
 		zIndex: V("grid"),
-		className: "touch-input",
+		className: "sxl-touch-input",
 		style: {
 			width: 0,
 			height: 0,
@@ -4624,7 +4624,7 @@ var bo = {
 		},
 		children: x("div", {
 			ref: s,
-			className: "touch-select-grip",
+			className: "sxl-touch-select-grip",
 			style: {
 				position: "absolute",
 				left: 0,
@@ -4728,7 +4728,7 @@ var Do = {
 		colAt: r
 	};
 }, Ao = e.forwardRef((t, n) => {
-	const { selection: r, getContentBounds: o, getRegionBounds: l, scrollIntoView: i, singleStyle: s, multiStyle: a, multiAnchorStyle: c, singleAnchorStyle: d, removePreviewStyle: u, insertBarStyle: g, isDropRefused: h, snapMoveDestination: f, moveSourceStyle: p, singleLayer: m, multiLayer: y, enabledMove: b, onMove: S, onMoveStart: C, onMoveUpdate: I, onMoveEnd: R, moveCursor: P, enableFill: M, snapFillDestination: D, onFill: k, onFillStart: T, onFillPreview: z, onFillEnd: L, onFillMenu: A, resolveFillExtent: F, onEdgeDoubleClick: $, onSelectionEnd: N, onDragModeChange: _, externalDrag: B = !1, renderTip: V, tipPlacement: H, disableKeyboard: U, anchorHole: q = !0, animate: X = !1, ...Y } = t, Z = O(r, (e) => e.getSelection()), J = mo(r, { onSelectionEnd: N }), [Q] = nt(wo, null), ee = e.useRef(_);
+	const { selection: r, getContentBounds: o, getRegionBounds: l, scrollIntoView: i, singleStyle: s, multiStyle: a, multiAnchorStyle: c, singleAnchorStyle: d, removePreviewStyle: u, insertBarStyle: g, isDropRefused: h, snapMoveDestination: f, moveSourceStyle: p, singleLayer: m, multiLayer: y, enabledMove: b, onMove: S, onMoveStart: C, onMoveUpdate: I, onMoveEnd: R, moveCursor: P, enableFill: M, snapFillDestination: D, onFill: k, onFillStart: T, onFillPreview: z, onFillEnd: L, onFillMenu: A, resolveFillExtent: $, onEdgeDoubleClick: F, onSelectionEnd: N, onDragModeChange: _, externalDrag: B = !1, renderTip: V, tipPlacement: H, disableKeyboard: U, anchorHole: q = !0, animate: X = !1, ...Y } = t, Z = O(r, (e) => e.getSelection()), J = mo(r, { onSelectionEnd: N }), [Q] = nt(wo, null), ee = e.useRef(_);
 	ee.current = _, e.useEffect(() => {
 		ee.current?.(J.dragMode);
 	}, [J.dragMode]);
@@ -4980,10 +4980,10 @@ var Do = {
 	}, Te = me ? null : Ie, Oe = me ? vo(uo, a) : vo(co, s), ze = {
 		...go,
 		...c
-	}, Le = vo(ho, u), { refusedColor: Ae, ...Fe } = {
+	}, Le = vo(ho, u), { refusedColor: Ae, ...$e } = {
 		...fo,
 		...g
-	}, $e = null === p ? null : vo(po, p), Ne = (e, t) => {
+	}, Fe = null === p ? null : vo(po, p), Ne = (e, t) => {
 		const n = t.mods.shiftKey ? t.insert : null, r = t.mods.ctrlKey || t.mods.metaKey, o = {
 			to: n ? mr(e, n, se.getTotalRange()) : e,
 			copy: r,
@@ -5096,10 +5096,10 @@ var Do = {
 	};
 	let Ue, je = null;
 	"move" === Ve?.kind && (Ve.drop.insert ? Ue = {
-		duration: Fe.transitionDuration ?? 0,
-		easing: Fe.transitionEasing
+		duration: $e.transitionDuration ?? 0,
+		easing: $e.transitionEasing
 	} : je = Re), e.useLayoutEffect(() => {
-		const e = le.current?.closest(".gesture-tip");
+		const e = le.current?.closest(".sxl-gesture-tip");
 		if (!e) return;
 		const { width: t, height: n } = e.getBoundingClientRect();
 		ie.current = {
@@ -5126,22 +5126,22 @@ var Do = {
 			he.handleKey(e) && (e.preventDefault(), e.stopPropagation());
 		},
 		children: [
-			"move" === te?.kind && !te.drop.copy && $e && !W.isEqualRanges(te.to, te.from) && Fo($e, te.from, void 0, "move-source"),
+			"move" === te?.kind && !te.drop.copy && Fe && !W.isEqualRanges(te.to, te.from) && $o(Fe, te.from, void 0, "move-source"),
 			v(w, me ? { children: [
-				Se.map((t, n) => x(e.Fragment, { children: Fo(Oe, t) }, `other-${n}`)),
-				Fo(Oe, ve, q ? be : void 0),
+				Se.map((t, n) => x(e.Fragment, { children: $o(Oe, t) }, `other-${n}`)),
+				$o(Oe, ve, q ? be : void 0),
 				x(Un, {
-					className: "anchor",
+					className: "sxl-anchor",
 					range: be,
 					...ze
 				})
-			] } : { children: [Fo(Oe, ve, q ? be : void 0, "range", Te), d && x(Un, {
-				className: "anchor",
+			] } : { children: [$o(Oe, ve, q ? be : void 0, "range", Te), d && x(Un, {
+				className: "sxl-anchor",
 				range: be,
 				...d
 			})] }),
 			!me && b && x(wr, {
-				className: "move-grip",
+				className: "sxl-move-grip",
 				range: ve,
 				grip: "edges",
 				dragCursor: P,
@@ -5150,10 +5150,10 @@ var Do = {
 					return n.insert ? x(jn, {
 						range: n.to,
 						axis: n.insert,
-						...Fe,
-						color: (n.refused ? Ae : void 0) ?? Fe.color
+						...$e,
+						color: (n.refused ? Ae : void 0) ?? $e.color
 					}) : Oe.border && x(Un, {
-						className: "move-ghost",
+						className: "sxl-move-ghost",
 						range: n.to,
 						glide: Re,
 						...Oe.border,
@@ -5161,7 +5161,7 @@ var Do = {
 						style: { opacity: .6 }
 					});
 				},
-				onEdgeDoubleClick: $,
+				onEdgeDoubleClick: F,
 				onDragStart: (e, t, n, r) => {
 					const o = Ne(e, n);
 					C?.(e, t, o, r), re.current = Lo(null, o.to), oe.current = n.grab, Re?.retarget({ range: o.to }, xn(se), !1), ne({
@@ -5222,12 +5222,12 @@ var Do = {
 				onDragDone: () => {
 					L?.(), ne(null);
 				},
-				onDoubleClick: F ? (e, t) => {
-					const n = F(e);
+				onDoubleClick: $ ? (e, t) => {
+					const n = $(e);
 					n && !W.isEqualRanges(n, e) && (k?.(e, n, t), _e(n));
 				} : void 0
 			}),
-			J.removePreview && Fo(Le, J.removePreview, void 0, "remove-preview"),
+			J.removePreview && $o(Le, J.removePreview, void 0, "remove-preview"),
 			Ge,
 			V && x(Cn, {
 				name: "selection-gesture",
@@ -5249,27 +5249,27 @@ var Do = {
 	var qe;
 });
 Ao.displayName = "SelectionLayer";
-var Fo = (e, t, n, r = "range", o = null) => v(w, { children: [
+var $o = (e, t, n, r = "range", o = null) => v(w, { children: [
 	e.fill && x(Un, {
-		className: `${r} fill`,
+		className: `sxl-${r} sxl-${r}-fill`,
 		glide: o,
 		range: t,
 		hole: n,
 		...e.fill
 	}),
 	e.inner && x(Un, {
-		className: `${r} inner`,
+		className: `sxl-${r} sxl-${r}-inner`,
 		glide: o,
 		range: t,
 		...e.inner
 	}),
 	e.border && x(Un, {
-		className: `${r} border`,
+		className: `sxl-${r} sxl-${r}-border`,
 		glide: o,
 		range: t,
 		...e.border
 	})
-] }), $o = [
+] }), Fo = [
 	"#1a73e8",
 	"#d93025",
 	"#1e8e3e",
@@ -5277,7 +5277,7 @@ var Fo = (e, t, n, r = "range", o = null) => v(w, { children: [
 	"#e37400",
 	"#12a4af",
 	"#d01884"
-], No = Array.from({ length: R }, (e, t) => `var(--sxl-color-series-${t + 1}, ${$o[t]})`), _o = "var(--sxl-color-primary, rgb(0, 120, 215))", Bo = (e, t, n) => ({
+], No = Array.from({ length: R }, (e, t) => `var(--sxl-color-series-${t + 1}, ${Fo[t]})`), _o = "var(--sxl-color-primary, rgb(0, 120, 215))", Bo = (e, t, n) => ({
 	rowStart: Math.max(n.rowStart, Math.min(e.rowIndex, t.rowIndex)),
 	colStart: Math.max(n.colStart, Math.min(e.colIndex, t.colIndex)),
 	rowEnd: Math.min(n.rowEnd, Math.max(e.rowIndex, t.rowIndex)),
@@ -5292,7 +5292,7 @@ var Fo = (e, t, n, r = "range", o = null) => v(w, { children: [
 	}, [T, P]), c(() => () => {
 		z.current?.(!1, null);
 	}, []);
-	const L = P ?? I, A = (e, t) => R((n) => t ? e : n === e ? null : n), F = (e, n) => {
+	const L = P ?? I, A = (e, t) => R((n) => t ? e : n === e ? null : n), $ = (e, n) => {
 		const r = t.getSelection(), o = r.ranges ?? W.EmptyRanges, l = e < o.length ? o.map((t, r) => r === e ? {
 			...t,
 			...n
@@ -5306,7 +5306,7 @@ var Fo = (e, t, n, r = "range", o = null) => v(w, { children: [
 			ranges: l,
 			rangeIndex: e
 		});
-	}, $ = (e) => {
+	}, F = (e) => {
 		const n = t.getSelection();
 		(n.rangeIndex ?? -1) !== e && t.setSelection({
 			...n,
@@ -5320,15 +5320,15 @@ var Fo = (e, t, n, r = "range", o = null) => v(w, { children: [
 				rowIndex: E[n].rowStart,
 				colIndex: E[n].colStart
 			};
-			return k(!0), F(n, Bo(t, e, y.getTotalRange())), {
-				drag: (e) => F(n, Bo(t, e, y.getTotalRange())),
+			return k(!0), $(n, Bo(t, e, y.getTotalRange())), {
+				drag: (e) => $(n, Bo(t, e, y.getTotalRange())),
 				end: () => k(!1),
 				captureEvents: !1
 			};
 		}
 		const r = (!t.ctrlKey && !t.metaKey || !i) && n >= 0 ? n : E.length;
-		return k(!0), F(r, W.cellToRange(e)), {
-			drag: (t) => F(r, Bo(e, t, y.getTotalRange())),
+		return k(!0), $(r, W.cellToRange(e)), {
+			drag: (t) => $(r, Bo(e, t, y.getTotalRange())),
 			end: () => k(!1),
 			captureEvents: !1
 		};
@@ -5339,7 +5339,7 @@ var Fo = (e, t, n, r = "range", o = null) => v(w, { children: [
 		children: [
 			(!l || D) && x(gt, {
 				fill: !0,
-				className: X(m, "ranges-picker-draw"),
+				className: X(m, "sxl-ranges-picker-draw"),
 				style: { touchAction: "none" },
 				onPointerDown: (e) => {
 					e.stopPropagation(), u && e.preventDefault(), N.onPointerDown(e);
@@ -5355,12 +5355,12 @@ var Fo = (e, t, n, r = "range", o = null) => v(w, { children: [
 				preserveFocus: u,
 				onHoverChange: (t) => A(e, t),
 				onDragStateChange: (t) => {
-					t && (b?.retarget({ range: E[e] }, xn(y), !1), $(e)), M(t ? e : null);
+					t && (b?.retarget({ range: E[e] }, xn(y), !1), F(e)), M(t ? e : null);
 				},
 				onDragMove: (t) => {
-					b?.retarget({ range: t }, xn(y), !0), F(e, t);
+					b?.retarget({ range: t }, xn(y), !0), $(e, t);
 				},
-				onDragEnd: (t) => F(e, t)
+				onDragEnd: (t) => $(e, t)
 			}, `move-${e}`)),
 			B.map((e) => {
 				const t = e === C, n = e === L, o = ((e, t, n) => {
@@ -5383,12 +5383,12 @@ var Fo = (e, t, n, r = "range", o = null) => v(w, { children: [
 					renderHandle: d,
 					preserveFocus: u,
 					onHandleHoverChange: (t) => A(e, t),
-					onDragMove: (t) => F(e, t),
+					onDragMove: (t) => $(e, t),
 					onDragStart: () => {
-						$(e), M(e);
+						F(e), M(e);
 					},
 					onDragEnd: (t) => {
-						M(null), F(e, t);
+						M(null), $(e, t);
 					}
 				}, `resize-${e}`);
 			})
@@ -5813,7 +5813,7 @@ function el(e) {
 	}, k = "function" == typeof o ? (S ? o(S) : void 0) ?? "transparent" : o;
 	return x(st, { children: E ? x(gt, {
 		...u,
-		className: X(a, "editor"),
+		className: X(a, "sxl-editor"),
 		bounds: E,
 		alignWidth: i,
 		keepMounted: !0,
@@ -5823,7 +5823,7 @@ function el(e) {
 			overflow: "hidden",
 			background: k,
 			borderColor: l,
-			boxShadow: M ? "rgba(60,64,67,.35) 2px 2px 6px 3px" : "none",
+			boxShadow: M ? "2px 2px 6px 2px var(--sxl-color-shadow, rgba(0, 0, 0, 0.12))" : "none",
 			opacity: M ? 1 : 0,
 			pointerEvents: M ? "auto" : "none"
 		},
@@ -5848,7 +5848,7 @@ function tl(e) {
 		r && t.startEdit(r, { mode: "edit" });
 	}, [n, t]);
 	return x(st, {
-		className: "editor-start",
+		className: "sxl-editor-start",
 		onKeyDown: r,
 		onDoubleClick: o
 	});
@@ -5895,7 +5895,7 @@ function nl(e) {
 	});
 }
 Qo.displayName = "DefaultEditorInput", nl.displayName = "EditorDiv";
-var rl = "header-divider", ol = "ew-resize", ll = "ns-resize", il = "var(--sxl-color-base-100, #f5f5f5)", sl = "var(--sxl-color-primary, rgb(33, 115, 70))", al = (e, t, n, r) => ({
+var rl = "sxl-header-divider", ol = "ew-resize", ll = "ns-resize", il = "var(--sxl-color-base-100, #f5f5f5)", sl = "var(--sxl-color-primary, rgb(33, 115, 70))", al = (e, t, n, r) => ({
 	position: "absolute",
 	boxSizing: "border-box",
 	left: e ? t - n / 2 : "50%",
@@ -5908,7 +5908,7 @@ var rl = "header-divider", ol = "ew-resize", ll = "ns-resize", il = "var(--sxl-c
 	alignItems: "center",
 	justifyContent: "center"
 }), cl = (e, t) => x("div", {
-	className: "header-divider-handle",
+	className: "sxl-header-divider-handle",
 	style: {
 		...al(e, t, 6, 16),
 		pointerEvents: "none",
@@ -5918,7 +5918,7 @@ var rl = "header-divider", ol = "ew-resize", ll = "ns-resize", il = "var(--sxl-c
 }), dl = i((e) => {
 	const { isColumn: t, lineOffset: n, onUnhide: r } = e, [o, l] = p(!1), i = o ? il : sl;
 	return x("div", {
-		className: "header-divider-unhide",
+		className: "sxl-header-divider-unhide",
 		role: "button",
 		style: {
 			...al(t, n, 20, 12),
@@ -5957,15 +5957,15 @@ var rl = "header-divider", ol = "ew-resize", ll = "ns-resize", il = "var(--sxl-c
 });
 dl.displayName = "UnhideButton";
 var ul = i(o((e, t) => {
-	const { axis: n, index: r, className: o, style: l, disabled: i = !1, disabledResize: s = !1, isNextHidden: a, isHidden: c, isSelected: d, isSelectedAll: u, showTouchDivider: g, bounds: h, onPointerDown: f, onAutoFit: m, onUnhide: w, isActive: y = !1, onPointerEnter: b, onPointerLeave: S, pane: E, ...I } = e, R = n === G.Column, [P, M] = p(null), D = P === r, k = 1 / C.getDevicePixelRatio(), T = d || u, O = T ? "color-mix(in srgb, var(--sxl-color-primary, rgb(33, 115, 70)) 35%, var(--sxl-color-base-300, rgb(171, 171, 171)))" : "var(--sxl-color-base-300, rgb(171, 171, 171))", z = "var(--sxl-color-base-100, #f5f5f5)", L = "touch" === $();
+	const { axis: n, index: r, className: o, style: l, disabled: i = !1, disabledResize: s = !1, isNextHidden: a, isHidden: c, isSelected: d, isSelectedAll: u, showTouchDivider: g, bounds: h, onPointerDown: f, onAutoFit: m, onUnhide: w, isActive: y = !1, onPointerEnter: b, onPointerLeave: S, pane: E, ...I } = e, R = n === G.Column, [P, M] = p(null), D = P === r, k = 1 / C.getDevicePixelRatio(), T = d || u, O = T ? "color-mix(in srgb, var(--sxl-color-primary, rgb(33, 115, 70)) 35%, var(--sxl-color-base-300, rgb(171, 171, 171)))" : "var(--sxl-color-base-300, rgb(171, 171, 171))", z = "var(--sxl-color-base-100, #f5f5f5)", L = "touch" === F();
 	let A = R ? 14 : 8;
-	const F = E.getZoom();
-	F < 1 && (A = Math.max(2, A * F * .8));
+	const $ = E.getZoom();
+	$ < 1 && (A = Math.max(2, A * $ * .8));
 	let N = A / 2, _ = 0;
 	a && (_ = -2), c && (_ = 2), c && (A = A / 2 + _, N = 2 * _);
 	const B = T || 0 !== _ ? `linear-gradient(${O}, ${O})` : `linear-gradient(${R ? 180 : 90}deg, ${z}, ${O} 55%, ${O} 100%)`;
 	return v("div", {
-		className: X(rl, { disabled: i }, o, `index-${r}`),
+		className: X(rl, { "sxl-disabled": i }, o, `sxl-index-${r}`),
 		ref: t,
 		onPointerDown: L ? void 0 : f,
 		onDoubleClick: L ? void 0 : () => m?.(),
@@ -6028,11 +6028,11 @@ var ul = i(o((e, t) => {
 		}) : null]
 	});
 })), gl = (e) => x(ul, { ...e }), hl = i(o((e, t) => {
-	const { axis: n, index: r, disabled: o = !1, disabledResize: l = !1, resizeThreshold: i = 1, renderDivider: s = gl, onDividerMouseDown: a, onDividerResizeStart: c, onDividerResize: d, onDividerResizeEnd: u, onDividerMouseUp: g, onDividerAutoFit: h, onDividerUnhide: m, onPointerDown: y, visibleBounds: b, ...S } = e, E = Qe(), I = z(y, [y]), R = z(h, [h]), P = n === G.Column, M = void 0 !== b ? b : fl(E, n), D = f(null), [k, T] = p(null), O = (e, t) => P ? e.clientX - t.clientX : e.clientY - t.clientY, L = E.getMetrics(), F = P ? L.getColOffset(r + 1) : L.getRowOffset(r + 1), $ = C.getDevicePixelRatio(), N = 1 / $, _ = C.snapLineCenter(F, N, $) - N / 2, V = B({
+	const { axis: n, index: r, disabled: o = !1, disabledResize: l = !1, resizeThreshold: i = 1, renderDivider: s = gl, onDividerMouseDown: a, onDividerResizeStart: c, onDividerResize: d, onDividerResizeEnd: u, onDividerMouseUp: g, onDividerAutoFit: h, onDividerUnhide: m, onPointerDown: y, visibleBounds: b, ...S } = e, E = Qe(), I = z(y, [y]), R = z(h, [h]), P = n === G.Column, M = void 0 !== b ? b : fl(E, n), D = f(null), [k, T] = p(null), O = (e, t) => P ? e.clientX - t.clientX : e.clientY - t.clientY, L = E.getMetrics(), $ = P ? L.getColOffset(r + 1) : L.getRowOffset(r + 1), F = C.getDevicePixelRatio(), N = 1 / F, _ = C.snapLineCenter($, N, F) - N / 2, V = B({
 		processTouch: !0,
 		onPointerDown: (e) => {
 			if (I?.(e), !o && !l) {
-				const e = P ? L.getColOffset(r) : L.getRowOffset(r), t = F - e;
+				const e = P ? L.getColOffset(r) : L.getRowOffset(r), t = $ - e;
 				D.current = {
 					isResizing: !1,
 					startSize: t,
@@ -6212,11 +6212,11 @@ var fl = (e, t) => {
 		onActiveChange: a
 	});
 	if (!h) return null;
-	const b = g ? d ? c.getPaneBounds().width : c.getPaneBounds().height : 0, S = g ? b - 3 : 0, E = g ? b : f ? 1 : 0, C = g || f ? 0 : 1, I = g || f ? 2 : 3, R = (d ? c.getPaneBounds().height : c.getPaneBounds().width) - C, P = f || r && !n ? "var(--sxl-color-primary, rgb(33, 115, 70))" : "var(--sxl-color-neutral, grey)";
+	const b = g ? d ? c.getPaneBounds().width : c.getPaneBounds().height : 0, S = g ? b - 3 : 0, E = g ? b : f ? 1 : 0, C = g || f ? 0 : 1, I = g || f ? 2 : 3, R = (d ? c.getPaneBounds().height : c.getPaneBounds().width) - C, P = f || r && !n ? "var(--sxl-color-primary, rgb(33, 115, 70))" : "var(--sxl-color-base-border, grey)";
 	return v(w, { children: [
 		y,
 		x("div", {
-			className: "header-freeze-grip",
+			className: "sxl-header-freeze-grip",
 			...m,
 			style: {
 				position: "absolute",
@@ -6230,7 +6230,7 @@ var fl = (e, t) => {
 			}
 		}),
 		x(re, {
-			className: "header-freeze-bar",
+			className: "sxl-header-freeze-bar",
 			linePoints: d ? [
 				0,
 				0,
@@ -6275,7 +6275,7 @@ var xl = i((e) => {
 	if (!u || n) return f;
 	const p = c ? a.getPaneBounds().width : a.getPaneBounds().height;
 	return v(w, { children: [f, x("div", {
-		className: "grid-freeze-grip",
+		className: "sxl-grid-freeze-grip",
 		...h,
 		style: {
 			position: "absolute",
@@ -6409,7 +6409,7 @@ var vl = (e, t, n) => t === G.Column ? {
 		getColumnWidth: l
 	}), E = i ?? S, [C, I] = h((e) => e + 1, 0), R = g(() => ({}), [C]), P = s((e) => {
 		I();
-	}, []), M = F(t, () => ({ invalidate: P }), [P]), D = g(() => {
+	}, []), M = $(t, () => ({ invalidate: P }), [P]), D = g(() => {
 		const e = [];
 		return !1 !== d && e.push(x(Jr, {
 			showGridLines: d,
@@ -6478,7 +6478,7 @@ var Pl, Ml = {
 		colStart: 0,
 		rowEnd: Math.max(0, n - 1),
 		colEnd: 0
-	}) }), [n]), T = s ?? k, [z, { width: L }] = N(), [A, { width: F }] = N(), $ = F > 0 && L > 0 ? Math.max(0, F - L) : 0, _ = J([A, t]), B = ee({
+	}) }), [n]), T = s ?? k, [z, { width: L }] = N(), [A, { width: $ }] = N(), F = $ > 0 && L > 0 ? Math.max(0, $ - L) : 0, _ = J([A, t]), B = ee({
 		rowCount: n,
 		columnCount: 1,
 		getRowHeight: l,
@@ -6486,7 +6486,7 @@ var Pl, Ml = {
 	});
 	return x("div", {
 		ref: _,
-		className: X("list-surface", w),
+		className: X("sxl-list-surface", w),
 		style: {
 			position: "relative",
 			overflow: "hidden",
@@ -6494,7 +6494,7 @@ var Pl, Ml = {
 			maxWidth: "100%",
 			maxHeight: "100%",
 			...y,
-			...null != i ? { width: i + $ } : null
+			...null != i ? { width: i + F } : null
 		},
 		...S,
 		children: x(P, {
@@ -6541,7 +6541,7 @@ var Pl, Ml = {
 		})
 	});
 }), Tl = o(function(e, t) {
-	const { itemCount: n, renderItem: r, itemHeight: o, selection: l, onKeyDown: i, cacheToken: a, scrollTo: c, autoFocus: d, viewport: u, className: h, style: f, children: p, ...m } = e, w = F(t, () => ({ isList: () => !0 }), []), v = s((e) => {
+	const { itemCount: n, renderItem: r, itemHeight: o, selection: l, onKeyDown: i, cacheToken: a, scrollTo: c, autoFocus: d, viewport: u, className: h, style: f, children: p, ...m } = e, w = $(t, () => ({ isList: () => !0 }), []), v = s((e) => {
 		const { key: t, style: n, range: o, cell: l } = e, i = o?.rowStart ?? l.rowIndex;
 		return x("div", {
 			style: {
@@ -6562,7 +6562,7 @@ var Pl, Ml = {
 	}, [r]), y = g(() => i ? { onKeyDown: i } : void 0, [i]);
 	return x(kl, {
 		ref: w,
-		className: X("list", h),
+		className: X("sxl-list", h),
 		style: f,
 		itemCount: n,
 		itemHeight: o,
@@ -6611,20 +6611,20 @@ var Pl, Ml = {
 		n,
 		r,
 		l
-	]), L = f(null), [, A] = h((e) => e + 1, 0), $ = z(() => 0 === n ? -1 : T.getSelection().cell.rowIndex, [T, n]), N = z((e) => {
+	]), L = f(null), [, A] = h((e) => e + 1, 0), F = z(() => 0 === n ? -1 : T.getSelection().cell.rowIndex, [T, n]), N = z((e) => {
 		if (0 === n) return;
 		const t = Math.min(Math.max(0, T.getSelection().cell.rowIndex + e), n - 1);
 		T.setSelection({ cell: {
 			rowIndex: t,
 			colIndex: 0
 		} }), L.current = { row: t }, A();
-	}, [T, n]), _ = F(t, () => ({
+	}, [T, n]), _ = $(t, () => ({
 		isCheckboxList: () => !0,
-		getHighlightIndex: $,
+		getHighlightIndex: F,
 		moveHighlight: N,
 		toggleHighlighted: O
 	}), [
-		$,
+		F,
 		N,
 		O
 	]), B = s((e) => v("div", {
@@ -6686,7 +6686,7 @@ var Pl, Ml = {
 	]);
 	return v("div", {
 		ref: _,
-		className: X("checkbox-list", I),
+		className: X("sxl-checkbox-list", I),
 		style: {
 			display: "flex",
 			flexDirection: "column",
@@ -6700,7 +6700,7 @@ var Pl, Ml = {
 			"aria-label": p,
 			title: p,
 			...m,
-			className: X("select-all", m?.className),
+			className: X("sxl-select-all", m?.className),
 			style: {
 				display: "flex",
 				alignItems: "center",
@@ -6753,7 +6753,7 @@ var Pl, Ml = {
 	if (n) return n.font = t, n.measureText(e).width;
 	const r = Number.parseFloat((/(\d+(?:\.\d+)?)px/.exec(t) ?? [])[1] ?? "16") || 16;
 	return e.length * r * .55;
-}, Al = (e, t) => t <= 0 ? -1 : Math.min(Math.max(0, e), t - 1), Fl = o(function(e, t) {
+}, Al = (e, t) => t <= 0 ? -1 : Math.min(Math.max(0, e), t - 1), $l = o(function(e, t) {
 	const { items: n, onChoose: r, highlightIndex: o, itemHeight: l = 24, visibleRows: i = 8, contentWidth: a, measureText: c, renderItem: d, autoFocus: u, viewport: p, className: m, style: w, children: v, ...y } = e, b = n.length, E = Al(o ?? 0, b), C = g(() => new to({
 		initial: { cell: {
 			rowIndex: Math.max(0, E),
@@ -6780,7 +6780,7 @@ var Pl, Ml = {
 			rowIndex: t,
 			colIndex: 0
 		} }), I.current = { row: t }, R();
-	}, [C, b]), O = F(t, () => ({
+	}, [C, b]), O = $(t, () => ({
 		isPickList: () => !0,
 		getHighlightIndex: k,
 		moveHighlight: T,
@@ -6806,7 +6806,7 @@ var Pl, Ml = {
 		n,
 		b,
 		L
-	]), $ = s((e) => {
+	]), F = s((e) => {
 		const { key: t, style: r, range: o, cell: l } = e, i = o?.rowStart ?? l.rowIndex, s = n[i];
 		return s ? x("div", {
 			role: "option",
@@ -6844,7 +6844,7 @@ var Pl, Ml = {
 	}), [D, k]);
 	return x(kl, {
 		ref: O,
-		className: X("pick-list", m),
+		className: X("sxl-pick-list", m),
 		role: "listbox",
 		style: {
 			maxHeight: i * l,
@@ -6854,7 +6854,7 @@ var Pl, Ml = {
 		itemHeight: l,
 		contentWidth: A,
 		selection: C,
-		renderCell: $,
+		renderCell: F,
 		propsLayer: N,
 		scrollTo: M,
 		viewport: p,
@@ -6862,7 +6862,7 @@ var Pl, Ml = {
 		cacheToken: n,
 		...y
 	});
-}), $l = "_field_q34pi_8", Nl = "_search_q34pi_28", _l = "_icon_q34pi_47", Bl = "_clear_q34pi_56", Vl = "_row_q34pi_84", Hl = (e, t) => {
+}), Fl = "_field_q34pi_8", Nl = "_search_q34pi_28", _l = "_icon_q34pi_47", Bl = "_clear_q34pi_56", Vl = "_row_q34pi_84", Hl = (e, t) => {
 	const n = t.trim().toLowerCase();
 	return n ? e.filter((e) => e.text.toLowerCase().includes(n)) : e;
 }, Kl = (e) => v("svg", {
@@ -6896,7 +6896,7 @@ var Pl, Ml = {
 		o,
 		d
 	]), f = v("div", {
-		className: X($l, "list-search-field", u),
+		className: X(Fl, "sxl-list-search-field", u),
 		children: [
 			i ?? x(Kl, { className: _l }),
 			x("input", {
@@ -6905,7 +6905,7 @@ var Pl, Ml = {
 				role: "searchbox",
 				autoComplete: "off",
 				spellCheck: !1,
-				className: X(Nl, "list-search"),
+				className: X(Nl, "sxl-list-search"),
 				value: n,
 				onChange: (e) => r(e.target.value),
 				onKeyDown: h,
@@ -6913,7 +6913,7 @@ var Pl, Ml = {
 			}),
 			n ? x("button", {
 				type: "button",
-				className: X(Bl, "list-search-clear"),
+				className: X(Bl, "sxl-list-search-clear"),
 				"aria-label": l,
 				title: l,
 				tabIndex: -1,
@@ -6934,7 +6934,7 @@ var Pl, Ml = {
 		]
 	});
 	return null == a && null == c ? f : v("div", {
-		className: X(Vl, "list-search-row"),
+		className: X(Vl, "sxl-list-search-row"),
 		children: [
 			a,
 			f,
@@ -6973,4 +6973,4 @@ var Pl, Ml = {
 		scope: o
 	});
 };
-export { qn as AUTO_SCROLL_INTERVAL_MS, Rr as CELL_INTERACTIVE_ATTRIBUTE, Pr as CELL_INTERACTIVE_PROPS, Vr as CellLayer, Br as CellTileDiv, zl as CheckboxList, go as DEFAULT_ANCHOR_STYLE, Kn as DEFAULT_HANDLE_STYLE, fo as DEFAULT_INSERT_BAR_STYLE, po as DEFAULT_MOVE_SOURCE_STYLE, uo as DEFAULT_MULTI_STYLE, ho as DEFAULT_REMOVE_PREVIEW_STYLE, co as DEFAULT_SINGLE_STYLE, Wt as DEFAULT_TOOLTIP_TIMING, kr as DefaultCellRenderer, Xo as DefaultEditable, Qo as DefaultEditorInput, ul as DefaultHeaderDivider, to as DefaultSelection, ir as DragHandle, wr as Draggable, Xn as EDGE_AUTO_SCROLL_MARGIN_PX, Wo as EditSession, nl as EditorDiv, el as EditorLayer, tl as EditorStartLayer, Ir as FillHandle, Ul as GRID_SURFACE, Cn as GestureTip, Rl as Grid, Vt as GridFloatPanel, xl as GridFreezeAnchor, He as GridSurface, Jr as GridlineLayer, rl as HEADER_DIVIDER_CLASS, jl as HEADER_SURFACE, hl as HeaderDividerAnchor, wl as HeaderFreezeAnchor, st as Layer, re as LineSVG, Tl as List, Wl as ListSearch, Kl as ListSearchGlyph, kl as ListSurface, Zn as NO_DRAG_MODIFIERS, No as PICKER_COLORS, Fl as PickList, vr as RESIZE_ANCHORS_4, yr as RESIZE_ANCHORS_8, dn as RangeFloatLayer, vn as RangeGlide, jn as RangeInsertBar, On as RangePrompt, Un as RangeRect, br as RangeResizer, _n as RangeTooltip, Hn as RangeTooltipHost, un as RangeTooltipLayer, Nn as RangeTooltipProvider, Ho as RangesPickerLayer, oe as RectangleSVG, eo as SELECTION_CLIP_INSETS, Ao as SelectionLayer, yo as SelectionTouchGrips, te as ShapeBoundsContext, zt as StickyAnchor, _t as StickyPortal, _e as SurfaceStateContext, Be as SurfaceStateProvider, Xt as TooltipProvider, gt as VirtualDiv, an as VirtualRangeFloat, Xl as buildGridThemeCSS, qr as buildGridlinePath, Go as commitArgsFromKey, Q as createAxis, tr as createDragCells, El as createHeaderSelectionPointer, Ln as createRangeTooltipRegistry, Ne as createSurfaceStateStore, Ut as createTooltipGroup, nr as createWindowDragCells, Vo as defaultRangeStyle, Zt as defaultRenderTooltip, Yn as edgeScrollPane, Yo as expandEditorBounds, Hl as filterByText, Dr as getCellInteractiveCoords, fl as getHeaderDividerBounds, ue as getPrimaryPane, wn as glideOffset, Gl as gridThemeVars, bl as headerAnchorCell, yl as headerEntireEnd, vl as headerEntireStart, Sl as headerRange, ql as headerThemeVars, gr as insertAt, mr as insertRange, Mr as isCellInteractiveTarget, Qn as isSameDragModifiers, mn as lerpGlideBounds, xn as paneGlideView, Jn as readDragModifiers, Kt as renderGridFloatPanel, Er as resolveFillDestination, Uo as startEventFromKey, lr as useDoubleClick, rr as useDragCells, qo as useEditorKeymap, ee as useGridMetrics, Qe as useGridPane, et as useGridPaneOptional, Cl as useHeaderSelectionPointer, Qt as useHoverIntent, it as useLayer, jo as usePendingCaret, Wn as useRangeGlide, $n as useRangeTooltipRegistry, mo as useSelectionPointer, ne as useShapeBounds, Tt as useSticky, Ot as useStickyOptional, ot as useSurfaceObject, nt as useSurfaceState, rt as useSurfaceStateSetter, lt as useSurfaceStateValue, qt as useTooltipSurface, or as useWindowDragCells, Cr as vacatedByFill };
+export { qn as AUTO_SCROLL_INTERVAL_MS, Rr as CELL_INTERACTIVE_ATTRIBUTE, Pr as CELL_INTERACTIVE_PROPS, Vr as CellLayer, Br as CellTileDiv, zl as CheckboxList, go as DEFAULT_ANCHOR_STYLE, Kn as DEFAULT_HANDLE_STYLE, fo as DEFAULT_INSERT_BAR_STYLE, po as DEFAULT_MOVE_SOURCE_STYLE, uo as DEFAULT_MULTI_STYLE, ho as DEFAULT_REMOVE_PREVIEW_STYLE, co as DEFAULT_SINGLE_STYLE, Wt as DEFAULT_TOOLTIP_TIMING, kr as DefaultCellRenderer, Xo as DefaultEditable, Qo as DefaultEditorInput, ul as DefaultHeaderDivider, to as DefaultSelection, ir as DragHandle, wr as Draggable, Xn as EDGE_AUTO_SCROLL_MARGIN_PX, Wo as EditSession, nl as EditorDiv, el as EditorLayer, tl as EditorStartLayer, Ir as FillHandle, Ul as GRID_SURFACE, Cn as GestureTip, Rl as Grid, Vt as GridFloatPanel, xl as GridFreezeAnchor, He as GridSurface, Jr as GridlineLayer, rl as HEADER_DIVIDER_CLASS, jl as HEADER_SURFACE, hl as HeaderDividerAnchor, wl as HeaderFreezeAnchor, st as Layer, re as LineSVG, Tl as List, Wl as ListSearch, Kl as ListSearchGlyph, kl as ListSurface, Zn as NO_DRAG_MODIFIERS, No as PICKER_COLORS, $l as PickList, vr as RESIZE_ANCHORS_4, yr as RESIZE_ANCHORS_8, dn as RangeFloatLayer, vn as RangeGlide, jn as RangeInsertBar, On as RangePrompt, Un as RangeRect, br as RangeResizer, _n as RangeTooltip, Hn as RangeTooltipHost, un as RangeTooltipLayer, Nn as RangeTooltipProvider, Ho as RangesPickerLayer, oe as RectangleSVG, eo as SELECTION_CLIP_INSETS, Ao as SelectionLayer, yo as SelectionTouchGrips, te as ShapeBoundsContext, zt as StickyAnchor, _t as StickyPortal, _e as SurfaceStateContext, Be as SurfaceStateProvider, Xt as TooltipProvider, gt as VirtualDiv, an as VirtualRangeFloat, Xl as buildGridThemeCSS, qr as buildGridlinePath, Go as commitArgsFromKey, Q as createAxis, tr as createDragCells, El as createHeaderSelectionPointer, Ln as createRangeTooltipRegistry, Ne as createSurfaceStateStore, Ut as createTooltipGroup, nr as createWindowDragCells, Vo as defaultRangeStyle, Zt as defaultRenderTooltip, Yn as edgeScrollPane, Yo as expandEditorBounds, Hl as filterByText, Dr as getCellInteractiveCoords, fl as getHeaderDividerBounds, ue as getPrimaryPane, wn as glideOffset, Gl as gridThemeVars, bl as headerAnchorCell, yl as headerEntireEnd, vl as headerEntireStart, Sl as headerRange, ql as headerThemeVars, gr as insertAt, mr as insertRange, Mr as isCellInteractiveTarget, Qn as isSameDragModifiers, mn as lerpGlideBounds, xn as paneGlideView, Jn as readDragModifiers, Kt as renderGridFloatPanel, Er as resolveFillDestination, Uo as startEventFromKey, lr as useDoubleClick, rr as useDragCells, qo as useEditorKeymap, ee as useGridMetrics, Qe as useGridPane, et as useGridPaneOptional, Cl as useHeaderSelectionPointer, Qt as useHoverIntent, it as useLayer, jo as usePendingCaret, Wn as useRangeGlide, Fn as useRangeTooltipRegistry, mo as useSelectionPointer, ne as useShapeBounds, Tt as useSticky, Ot as useStickyOptional, ot as useSurfaceObject, nt as useSurfaceState, rt as useSurfaceStateSetter, lt as useSurfaceStateValue, qt as useTooltipSurface, or as useWindowDragCells, Cr as vacatedByFill };