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

package/browser/esm/index.mjs

@@ -1,6 +1,6 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.grid-surface,.touch-input{--sxl-handle-size:11px;--sxl-handle-ring:2px;--sxl-handle-hit:11px;--sxl-handle-color:var(--sxl-color-primary,#217346);--sxl-handle-halo:0px}.touch-input{--sxl-handle-size:14px;--sxl-handle-hit:36px;--sxl-handle-halo:1.5px}._grid-stage_rzp9d_1{width:100%;height:100%;position:absolute;top:0;left:0}._grid-stage_rzp9d_1>*{pointer-events:none;position:absolute;inset:0}._grid-stage_rzp9d_1>*>*{pointer-events:auto}._sheetxl-grid_5yo0n_7{box-sizing:border-box;user-select:none;contain:strict;width:100%;height:100%;position:relative}._sheetxl-grid_5yo0n_7 *{box-sizing:border-box!important}._sheetxl-grid_5yo0n_7 :focus{outline:none}._sheetxl-grid_5yo0n_7>*{contain:size layout style}._virtual-div_16eab_1{position:absolute}._tiles_v3ek7_7{will-change:transform}._tiles_v3ek7_7 .tile{white-space:pre;position:absolute}._tiles_v3ek7_7 .tile>*{contain:strict;position:absolute}._tiles_v3ek7_7 [data-cell-interactive]{pointer-events:auto}._gridlines_v3ek7_32,._gridlines_v3ek7_32 *{pointer-events:none;position:absolute;overflow:visible}.cell{letter-spacing:-.25px;padding:2px 4px;font-family:Calibri;line-height:1.2}._field_q34pi_8{box-sizing:border-box;background:light-dark(#fff,#2b2b2b);border:1px solid light-dark(#c4c4c4,#5a5a5a);border-radius:4px;flex:none;align-items:center;width:100%;min-width:0;display:flex;position:relative}._field_q34pi_8:focus-within{border-color:var(--sxl-color-primary,#0078d7)}._search_q34pi_28{box-sizing:border-box;width:auto;min-width:0;font:inherit;color:inherit;background:0 0;border:none;outline:none;flex:auto;margin:0;padding:3px 4px}._search_q34pi_28::placeholder{opacity:.6}._icon_q34pi_47{opacity:.6;pointer-events:none;flex:none;width:14px;height:14px;margin-left:6px}._clear_q34pi_56{width:20px;height:20px;color:inherit;opacity:.6;cursor:pointer;background:0 0;border:none;border-radius:2px;flex:none;justify-content:center;align-items:center;margin-right:2px;padding:0;display:inline-flex}._clear_q34pi_56 svg{width:12px;height:12px}._clear_q34pi_56:hover{opacity:1;background:light-dark(#0000000f,#ffffff1a)}._row_q34pi_84{align-items:center;gap:6px;min-width:0;display:flex}._row_q34pi_84 ._field_q34pi_8{flex:auto;width:auto}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.sxl-grid-surface,.sxl-touch-input{--sxl-handle-size:11px;--sxl-handle-ring:2px;--sxl-handle-hit:11px;--sxl-handle-color:var(--sxl-color-primary,#217346);--sxl-handle-halo:0px}.sxl-touch-input{--sxl-handle-size:14px;--sxl-handle-hit:36px;--sxl-handle-halo:1.5px}._grid-stage_rzp9d_1{width:100%;height:100%;position:absolute;top:0;left:0}._grid-stage_rzp9d_1>*{pointer-events:none;position:absolute;inset:0}._grid-stage_rzp9d_1>*>*{pointer-events:auto}._sheetxl-grid_9syr3_7{box-sizing:border-box;user-select:none;contain:strict;width:100%;height:100%;position:relative}._sheetxl-grid_9syr3_7 *{box-sizing:border-box!important}._sheetxl-grid_9syr3_7 :focus{outline:none}._sheetxl-grid_9syr3_7>*{contain:size layout style}._virtual-div_16eab_1{position:absolute}._tiles_1hj43_7{will-change:transform}._tiles_1hj43_7 .sxl-tile{white-space:pre;position:absolute}._tiles_1hj43_7 .sxl-tile>*{contain:strict;position:absolute}._tiles_1hj43_7 [data-cell-interactive]{pointer-events:auto}._gridlines_1hj43_32,._gridlines_1hj43_32 *{pointer-events:none;position:absolute;overflow:visible}.sxl-cell{letter-spacing:-.25px;padding:2px 4px;font-family:Calibri;line-height:1.2}._field_q34pi_8{box-sizing:border-box;background:light-dark(#fff,#2b2b2b);border:1px solid light-dark(#c4c4c4,#5a5a5a);border-radius:4px;flex:none;align-items:center;width:100%;min-width:0;display:flex;position:relative}._field_q34pi_8:focus-within{border-color:var(--sxl-color-primary,#0078d7)}._search_q34pi_28{box-sizing:border-box;width:auto;min-width:0;font:inherit;color:inherit;background:0 0;border:none;outline:none;flex:auto;margin:0;padding:3px 4px}._search_q34pi_28::placeholder{opacity:.6}._icon_q34pi_47{opacity:.6;pointer-events:none;flex:none;width:14px;height:14px;margin-left:6px}._clear_q34pi_56{width:20px;height:20px;color:inherit;opacity:.6;cursor:pointer;background:0 0;border:none;border-radius:2px;flex:none;justify-content:center;align-items:center;margin-right:2px;padding:0;display:inline-flex}._clear_q34pi_56 svg{width:12px;height:12px}._clear_q34pi_56:hover{opacity:1;background:light-dark(#0000000f,#ffffff1a)}._row_q34pi_84{align-items:center;gap:6px;min-width:0;display:flex}._row_q34pi_84 ._field_q34pi_8{flex:auto;width:auto}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
 /**
-* @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
@@ -453,7 +453,7 @@ var Y = (e, t, n) => Math.min(n, Math.max(t, e)), _e = (e, t, n) => {
 		registerLayer: v
 	}), []);
 	return l(() => v({ getElement: () => G.current }), [v]), y("div", {
-		className: J(n, "stage", xe),
+		className: J(n, "sxl-stage", xe),
 		ref: G,
 		tabIndex: 0,
 		...c,
@@ -804,7 +804,7 @@ var Z = Object.freeze([]), De = (e, t) => {
 		value: i,
 		children: t
 	});
-}, Ue = { "sheetxl-grid": "_sheetxl-grid_5yo0n_7" }, We = o(i((e, n) => {
+}, Ue = { "sheetxl-grid": "_sheetxl-grid_9syr3_7" }, We = o(i((e, n) => {
 	let { rowCount: i = 1, columnCount: o = 1, viewport: c, metrics: u, getRangeFromCell: d = U.cellToRange, hiddenRowsAt: g, hiddenColumnsAt: _, freezeLeft: x = 0, freezeTop: S = 0, propsFreezeLeft: C, propsFreezeTop: w, onFirstRender: T, children: E, wrapPane: D, onFocus: O, onBlur: A, className: j, style: M, ...N } = e, F = P(O, [O]), I = P(A, [A]), z = P(T, [T]), [B, ee] = h(H.Center), [V, te] = p((e) => e + 1, 0), W = f(() => new k({}), []), G = c ?? W, [re, ie] = h(() => {
 		let e = G.getClient();
 		return {
@@ -964,7 +964,7 @@ var Z = Object.freeze([]), De = (e, t) => {
 				ref: (e) => {
 					e ? (o.refStage = e, X()) : o.refStage = null;
 				},
-				className: `stage stage-${r}`,
+				className: `sxl-stage sxl-stage-${r}`,
 				onFocus: (e) => {
 					ee(r), F(e);
 				},
@@ -1272,7 +1272,7 @@ var Z = Object.freeze([]), De = (e, t) => {
 	let lt = R();
 	return y("div", {
 		ref: rt,
-		className: J(j, "grid-surface", Ue["sheetxl-grid"], { "touch-input": lt === "touch" }),
+		className: J(j, "sxl-grid-surface", Ue["sheetxl-grid"], { "sxl-touch-input": lt === "touch" }),
 		style: {
 			overflow: "hidden",
 			...M
@@ -1890,7 +1890,7 @@ var pt = !1, mt = (e, t, n, r) => ({
 		let e = x.getElement()?.getBoundingClientRect(), t = h.x - (e?.left ?? 0), n = h.y - (e?.top ?? 0);
 		N = y("div", {
 			ref: j,
-			className: "sticky-layer",
+			className: "sxl-sticky-layer",
 			style: {
 				position: "absolute",
 				left: 0,
@@ -2337,7 +2337,7 @@ var Xt = {
 			if (w === "none") return t;
 			let n = w === "focus";
 			return y("div", {
-				className: "range-float-frame",
+				className: "sxl-range-float-frame",
 				style: tn,
 				onPointerDownCapture: n ? () => {
 					G.current = !0;
@@ -2379,7 +2379,7 @@ var ln = (e, t) => Array.isArray(e) ? e.includes(t) : e === t, un = (e) => {
 		p(null);
 	}, []);
 	return y(ct, {
-		className: J(a, "range-float"),
+		className: J(a, "sxl-range-float"),
 		onPointerMove: u ? m : void 0,
 		onPointerLeave: u ? g : void 0,
 		children: y(cn, {
@@ -2396,7 +2396,7 @@ var dn = (e) => {
 	return y(un, {
 		...o,
 		activateOn: "hover",
-		className: J(n, "range-tooltip"),
+		className: J(n, "sxl-range-tooltip"),
 		style: r,
 		interactive: i ? "pointer" : "none",
 		zIndex: ke,
@@ -2568,7 +2568,7 @@ var fn = (e) => 1 - (1 - e) * (1 - e), pn = () => typeof window < "u" && typeof
 	}, [O]);
 	let k = tt(), A = m(null), j = m(() => {});
 	if (j.current = () => {
-		let e = A.current?.closest(".gesture-tip");
+		let e = A.current?.closest(".sxl-gesture-tip");
 		if (!e) return;
 		let t = s && k ? s.frame(vn(k)) : null;
 		if (!t) return void (e.style.translate = "");
@@ -2583,7 +2583,7 @@ var fn = (e) => 1 - (1 - e) * (1 - e), pn = () => typeof window < "u" && typeof
 		ref: A,
 		style: Cn,
 		children: p
-	}) : p, N = J(f, "gesture-tip"), P = () => D(!0), F = T && o?.duration ? {
+	}) : p, N = J(f, "sxl-gesture-tip"), P = () => D(!0), F = T && o?.duration ? {
 		...Sn,
 		transition: `transform ${o.duration}ms ${o.easing ?? "ease-in-out"}`
 	} : Sn;
@@ -2830,7 +2830,7 @@ var Bn = () => () => {}, Vn = () => 0, Hn = o((e) => {
 	let v = _ ?? p.current;
 	return y(ct, {
 		...r,
-		className: J(t, "range-tooltips"),
+		className: J(t, "sxl-range-tooltips"),
 		onPointerMove: i ? d : void 0,
 		onPointerLeave: i ? f : void 0,
 		children: i ? y(cn, {
@@ -2957,12 +2957,12 @@ var Kn = o((e) => {
 			}
 		};
 		return [
-			["insert-bar", l.toClipBounds(t, -f)],
-			["insert-bar-cap-start", h(r.start) ? r.start : null],
-			["insert-bar-cap-end", h(r.end) ? r.end : null]
+			["sxl-insert-bar", l.toClipBounds(t, -f)],
+			["sxl-insert-bar-cap-start", h(r.start) ? r.start : null],
+			["sxl-insert-bar-cap-end", h(r.end) ? r.end : null]
 		];
 	})(e).map(([t, i]) => i && y(ft, {
-		className: J(t, e ? "row" : "column"),
+		className: J(t, e ? "sxl-axis-row" : "sxl-axis-column"),
 		bounds: i,
 		style: {
 			pointerEvents: "none",
@@ -3197,7 +3197,7 @@ var rr = (e) => {
 		top: 0,
 		transform: H
 	}, U = {
-		className: J("drag-handle", S),
+		className: J("sxl-drag-handle", S),
 		ref: j,
 		onPointerDown: (e) => {
 			F(e) ? p(e) : I(e);
@@ -3384,7 +3384,7 @@ var sr = () => {
 	return b(v, { children: [
 		y(ft, r === "entire" ? {
 			ref: x,
-			className: J("drag-grip", h),
+			className: J("sxl-drag-grip", h),
 			...F ? { bounds: F } : { range: t },
 			style: {
 				cursor: A,
@@ -3394,7 +3394,7 @@ var sr = () => {
 			...M
 		} : {
 			ref: x,
-			className: J("drag-grip", h),
+			className: J("sxl-drag-grip", h),
 			range: t,
 			clipInsets: -N / 2,
 			style: {
@@ -3454,12 +3454,12 @@ var vr = (e, t, n, r) => {
 	if (!t) return null;
 	let w = x ?? t, T = x ? null : d ?? null;
 	return b(v, { children: [y(Gn, {
-		className: "resizer-outline",
+		className: "sxl-resizer-outline",
 		range: w,
 		glide: T,
 		...p
 	}), n.map((e) => y(or, {
-		className: `resize-handle ${e}`,
+		className: `sxl-resize-handle sxl-${e}`,
 		range: w,
 		glide: T,
 		anchor: e,
@@ -3565,7 +3565,7 @@ var Sr = (e, t, n, r) => {
 	let N = x ? wr(t, x) : null;
 	return b(v, { children: [
 		y(or, {
-			className: "fill-handle",
+			className: "sxl-fill-handle",
 			range: t,
 			anchor: j,
 			clampToView: M,
@@ -3591,12 +3591,12 @@ var Sr = (e, t, n, r) => {
 			}
 		}),
 		x && y(Gn, {
-			className: "fill-preview",
+			className: "sxl-fill-preview",
 			range: x,
 			...h
 		}),
 		N && y(Gn, {
-			className: "fill-vacated",
+			className: "sxl-fill-vacated",
 			range: N,
 			fill: "rgba(128, 128, 128, 0.28)"
 		})
@@ -3614,7 +3614,7 @@ var Er = "data-cell-interactive", Dr = Object.freeze({ [Er]: "" }), Or = (e) =>
 }, Ar = o((e) => {
 	let { value: t, zoom: n, bounds: r, cell: i, range: a, children: o, className: s, ...c } = e;
 	return y("div", {
-		className: J(s, "cell"),
+		className: J(s, "sxl-cell"),
 		...c,
 		children: t
 	});
@@ -3757,8 +3757,8 @@ var Er = "data-cell-interactive", Dr = Object.freeze({ [Er]: "" }), Or = (e) =>
 		ranges: i
 	}), i;
 }, Rr = (e, t) => `${e}:${t}`, zr = {
-	tiles: "_tiles_v3ek7_7",
-	gridlines: "_gridlines_v3ek7_32"
+	tiles: "_tiles_1hj43_7",
+	gridlines: "_gridlines_1hj43_32"
 }, Br = o((e) => {
 	let { renderCell: t, cacheToken: n, getVisibleCells: r, hiddenCellAt: i, suppressCell: a, className: o, style: s } = e, c = Q(), d = c.getAnchor(), p = u(), g = f(() => `sxl-cl-${p.replace(/[^a-zA-Z0-9_-]/g, "")}`, [p]), _ = m({
 		token: void 0,
@@ -3829,7 +3829,7 @@ var Er = "data-cell-interactive", Dr = Object.freeze({ [Er]: "" }), Or = (e) =>
 					}));
 				}
 				if (l = y("div", {
-					className: "tile",
+					className: "sxl-tile",
 					style: { transform: `translate(${m}px, ${h}px)` },
 					children: g
 				}, `pane:${d}:tile:${e}:${n}`), r && (a.set(i, l), a.size > Kr)) {
@@ -3877,7 +3877,7 @@ var Er = "data-cell-interactive", Dr = Object.freeze({ [Er]: "" }), Or = (e) =>
 	let L = T.getDevicePixelRatio(), R = Math.round((E - C) * L) / L, z = Math.round((D - w) * L) / L;
 	return b(v, { children: [y(ft, {
 		fill: !0,
-		className: J("tiles", zr.tiles, g, o),
+		className: J("sxl-tiles", zr.tiles, g, o),
 		style: {
 			pointerEvents: "none",
 			...s,
@@ -3896,7 +3896,7 @@ Br.displayName = "CellTileDiv";
 var Vr = o((e) => {
 	let { renderCell: t, cacheToken: n, getVisibleCells: r, hiddenCellAt: i, suppressCell: a, className: o, style: s, ...c } = e;
 	return y(ct, {
-		className: J(o, "cells"),
+		className: J(o, "sxl-cells"),
 		...c,
 		children: y(Br, {
 			renderCell: t,
@@ -3993,7 +3993,7 @@ var Hr = 8, Ur = 1 << 19, Wr = 150, Gr = 1, Kr = 512, qr = !1, Jr = (e, t, n, r)
 	if (!n) return null;
 	let a = e.getPaneBounds(), o = Math.ceil(a.width), s = Math.ceil(a.height), c = String($r / T.getDevicePixelRatio());
 	return y("svg", {
-		className: J(t ? "horizontal" : "vertical"),
+		className: J(t ? "sxl-horizontal" : "sxl-vertical"),
 		width: `${o}`,
 		height: `${s}`,
 		viewBox: `0 0 ${o} ${s}`,
@@ -4022,10 +4022,10 @@ var Hr = 8, Ur = 1 << 19, Wr = 150, Gr = 1, Kr = 512, qr = !1, Jr = (e, t, n, r)
 	]);
 	return h || g ? y(ct, {
 		...d,
-		className: J(l, "gridlines"),
+		className: J(l, "sxl-gridlines"),
 		children: b(ft, {
 			fill: !0,
-			className: J("gridlines-box", zr.gridlines),
+			className: J("sxl-gridlines-box", zr.gridlines),
 			style: {
 				pointerEvents: "none",
 				...u
@@ -4564,7 +4564,7 @@ var bi = {
 		transition: !1,
 		themeFrom: "anchor",
 		zIndex: V("grid"),
-		className: "touch-input",
+		className: "sxl-touch-input",
 		style: {
 			width: 0,
 			height: 0,
@@ -4573,7 +4573,7 @@ var bi = {
 		},
 		children: y("div", {
 			ref: s,
-			className: "touch-select-grip",
+			className: "sxl-touch-select-grip",
 			style: {
 				position: "absolute",
 				left: 0,
@@ -5043,7 +5043,7 @@ var bi = {
 		duration: Re.transitionDuration ?? 0,
 		easing: Re.transitionEasing
 	} : Je = Oe), e.useLayoutEffect(() => {
-		let e = de.current?.closest(".gesture-tip");
+		let e = de.current?.closest(".sxl-gesture-tip");
 		if (!e) return;
 		let { width: t, height: n } = e.getBoundingClientRect();
 		fe.current = {
@@ -5075,17 +5075,17 @@ var bi = {
 				Te.map((t, n) => y(e.Fragment, { children: Fi(Pe, t) }, `other-${n}`)),
 				Fi(Pe, X, ne ? we : void 0),
 				y(Gn, {
-					className: "anchor",
+					className: "sxl-anchor",
 					range: we,
 					...Fe
 				})
 			] } : { children: [Fi(Pe, X, ne ? we : void 0, "range", Ne), u && y(Gn, {
-				className: "anchor",
+				className: "sxl-anchor",
 				range: we,
 				...u
 			})] }),
 			!be && x && y(_r, {
-				className: "move-grip",
+				className: "sxl-move-grip",
 				range: X,
 				grip: "edges",
 				dragCursor: D,
@@ -5097,7 +5097,7 @@ var bi = {
 						...Re,
 						color: (n.refused ? Le : void 0) ?? Re.color
 					}) : Pe.border && y(Gn, {
-						className: "move-ghost",
+						className: "sxl-move-ghost",
 						range: n.to,
 						glide: Oe,
 						...Pe.border,
@@ -5195,20 +5195,20 @@ var bi = {
 Pi.displayName = "SelectionLayer";
 var Fi = (e, t, n, r = "range", i = null) => b(v, { children: [
 	e.fill && y(Gn, {
-		className: `${r} fill`,
+		className: `sxl-${r} sxl-${r}-fill`,
 		glide: i,
 		range: t,
 		hole: n,
 		...e.fill
 	}),
 	e.inner && y(Gn, {
-		className: `${r} inner`,
+		className: `sxl-${r} sxl-${r}-inner`,
 		glide: i,
 		range: t,
 		...e.inner
 	}),
 	e.border && y(Gn, {
-		className: `${r} border`,
+		className: `sxl-${r} sxl-${r}-border`,
 		glide: i,
 		range: t,
 		...e.border
@@ -5283,7 +5283,7 @@ var Fi = (e, t, n, r = "range", i = null) => b(v, { children: [
 		children: [
 			(!a || k) && y(ft, {
 				fill: !0,
-				className: J(g, "ranges-picker-draw"),
+				className: J(g, "sxl-ranges-picker-draw"),
 				style: { touchAction: "none" },
 				onPointerDown: (e) => {
 					e.stopPropagation(), d && e.preventDefault(), R.onPointerDown(e);
@@ -5748,7 +5748,7 @@ function $i(e) {
 	}, A = typeof i == "function" ? (S ? i(S) : void 0) ?? "transparent" : i;
 	return y(ct, { children: C ? y(ft, {
 		...d,
-		className: J(c, "editor"),
+		className: J(c, "sxl-editor"),
 		bounds: C,
 		alignWidth: o,
 		keepMounted: !0,
@@ -5758,7 +5758,7 @@ function $i(e) {
 			overflow: "hidden",
 			background: A,
 			borderColor: a,
-			boxShadow: O ? "rgba(60,64,67,.35) 2px 2px 6px 3px" : "none",
+			boxShadow: O ? "2px 2px 6px 2px var(--sxl-color-shadow, rgba(0, 0, 0, 0.12))" : "none",
 			opacity: +!!O,
 			pointerEvents: O ? "auto" : "none"
 		},
@@ -5783,7 +5783,7 @@ function ea(e) {
 		r && t.startEdit(r, { mode: "edit" });
 	}, [n, t]);
 	return y(ct, {
-		className: "editor-start",
+		className: "sxl-editor-start",
 		onKeyDown: r,
 		onDoubleClick: i
 	});
@@ -5830,7 +5830,7 @@ function ta(e) {
 	});
 }
 Qi.displayName = "DefaultEditorInput", ta.displayName = "EditorDiv";
-var na = "header-divider", ra = "ew-resize", ia = "ns-resize", aa = "var(--sxl-color-base-100, #f5f5f5)", oa = "var(--sxl-color-primary, rgb(33, 115, 70))", sa = (e, t, n, r) => ({
+var na = "sxl-header-divider", ra = "ew-resize", ia = "ns-resize", aa = "var(--sxl-color-base-100, #f5f5f5)", oa = "var(--sxl-color-primary, rgb(33, 115, 70))", sa = (e, t, n, r) => ({
 	position: "absolute",
 	boxSizing: "border-box",
 	left: e ? t - n / 2 : "50%",
@@ -5843,7 +5843,7 @@ var na = "header-divider", ra = "ew-resize", ia = "ns-resize", aa = "var(--sxl-c
 	alignItems: "center",
 	justifyContent: "center"
 }), ca = (e, t) => y("div", {
-	className: "header-divider-handle",
+	className: "sxl-header-divider-handle",
 	style: {
 		...sa(e, t, 6, 16),
 		pointerEvents: "none",
@@ -5853,7 +5853,7 @@ var na = "header-divider", ra = "ew-resize", ia = "ns-resize", aa = "var(--sxl-c
 }), la = o((e) => {
 	let { isColumn: t, lineOffset: n, onUnhide: r } = e, [i, a] = h(!1), o = i ? aa : oa;
 	return y("div", {
-		className: "header-divider-unhide",
+		className: "sxl-header-divider-unhide",
 		role: "button",
 		style: {
 			...sa(t, n, 20, 12),
@@ -5898,7 +5898,7 @@ var ua = o(i((e, t) => {
 	c && (z = -2), l && (z = 2), l && (F = F / 2 + z, L = 2 * z);
 	let B = j || z !== 0 ? `linear-gradient(${M}, ${M})` : `linear-gradient(${E ? 180 : 90}deg, ${N}, ${M} 55%, ${M} 100%)`;
 	return b("div", {
-		className: J(na, { disabled: o }, i, `index-${r}`),
+		className: J(na, { "sxl-disabled": o }, i, `sxl-index-${r}`),
 		ref: t,
 		onPointerDown: P ? void 0 : m,
 		onDoubleClick: P ? void 0 : () => g?.(),
@@ -6143,11 +6143,11 @@ var pa = (e, t) => {
 		onActiveChange: c
 	});
 	if (!p) return null;
-	let x = f ? u ? l.getPaneBounds().width : l.getPaneBounds().height : 0, S = f ? x - 3 : 0, C = f ? x : +!!m, w = f || m ? 0 : 1, T = f || m ? 2 : 3, E = (u ? l.getPaneBounds().height : l.getPaneBounds().width) - w, D = m || r && !n ? "var(--sxl-color-primary, rgb(33, 115, 70))" : "var(--sxl-color-neutral, grey)";
+	let x = f ? u ? l.getPaneBounds().width : l.getPaneBounds().height : 0, S = f ? x - 3 : 0, C = f ? x : +!!m, w = f || m ? 0 : 1, T = f || m ? 2 : 3, E = (u ? l.getPaneBounds().height : l.getPaneBounds().width) - w, D = m || r && !n ? "var(--sxl-color-primary, rgb(33, 115, 70))" : "var(--sxl-color-base-border, grey)";
 	return b(v, { children: [
 		_,
 		y("div", {
-			className: "header-freeze-grip",
+			className: "sxl-header-freeze-grip",
 			...g,
 			style: {
 				position: "absolute",
@@ -6161,7 +6161,7 @@ var pa = (e, t) => {
 			}
 		}),
 		y(se, {
-			className: "header-freeze-bar",
+			className: "sxl-header-freeze-bar",
 			linePoints: u ? [
 				0,
 				0,
@@ -6206,7 +6206,7 @@ var _a = o((e) => {
 	if (!d || n) return m;
 	let h = l ? c.getPaneBounds().width : c.getPaneBounds().height;
 	return b(v, { children: [m, y("div", {
-		className: "grid-freeze-grip",
+		className: "sxl-grid-freeze-grip",
 		...p,
 		style: {
 			position: "absolute",
@@ -6434,7 +6434,7 @@ var Da = parseInt(_.split(".")[0], 10) >= 19 ? function(e) {
 	});
 	return y("div", {
 		ref: R,
-		className: J("list-surface", _),
+		className: J("sxl-list-surface", _),
 		style: {
 			position: "relative",
 			overflow: "hidden",
@@ -6510,7 +6510,7 @@ var Da = parseInt(_.split(".")[0], 10) >= 19 ? function(e) {
 	}, [r]), b = f(() => o ? { onKeyDown: o } : void 0, [o]);
 	return y(ja, {
 		ref: _,
-		className: J("list", p),
+		className: J("sxl-list", p),
 		style: m,
 		itemCount: n,
 		itemHeight: i,
@@ -6634,7 +6634,7 @@ var Da = parseInt(_.split(".")[0], 10) >= 19 ? function(e) {
 	]);
 	return b("div", {
 		ref: z,
-		className: J("checkbox-list", T),
+		className: J("sxl-checkbox-list", T),
 		style: {
 			display: "flex",
 			flexDirection: "column",
@@ -6648,7 +6648,7 @@ var Da = parseInt(_.split(".")[0], 10) >= 19 ? function(e) {
 			"aria-label": h,
 			title: h,
 			...g,
-			className: J("select-all", g?.className),
+			className: J("sxl-select-all", g?.className),
 			style: {
 				display: "flex",
 				alignItems: "center",
@@ -6792,7 +6792,7 @@ var Da = parseInt(_.split(".")[0], 10) >= 19 ? function(e) {
 	}), [k, A]);
 	return y(ja, {
 		ref: M,
-		className: J("pick-list", g),
+		className: J("sxl-pick-list", g),
 		role: "listbox",
 		style: {
 			maxHeight: o * a,
@@ -6844,7 +6844,7 @@ var Da = parseInt(_.split(".")[0], 10) >= 19 ? function(e) {
 		i,
 		u
 	]), m = b("div", {
-		className: J(Ra, "list-search-field", d),
+		className: J(Ra, "sxl-list-search-field", d),
 		children: [
 			o ?? y(Wa, { className: Ba }),
 			y("input", {
@@ -6853,7 +6853,7 @@ var Da = parseInt(_.split(".")[0], 10) >= 19 ? function(e) {
 				role: "searchbox",
 				autoComplete: "off",
 				spellCheck: !1,
-				className: J(za, "list-search"),
+				className: J(za, "sxl-list-search"),
 				value: n,
 				onChange: (e) => r(e.target.value),
 				onKeyDown: p,
@@ -6861,7 +6861,7 @@ var Da = parseInt(_.split(".")[0], 10) >= 19 ? function(e) {
 			}),
 			n ? y("button", {
 				type: "button",
-				className: J(Va, "list-search-clear"),
+				className: J(Va, "sxl-list-search-clear"),
 				"aria-label": a,
 				title: a,
 				tabIndex: -1,
@@ -6882,7 +6882,7 @@ var Da = parseInt(_.split(".")[0], 10) >= 19 ? function(e) {
 		]
 	});
 	return c == null && l == null ? m : b("div", {
-		className: J(Ha, "list-search-row"),
+		className: J(Ha, "sxl-list-search-row"),
 		children: [
 			c,
 			m,