@sheetxl/studio-vanilla 0.8.0-beta.10 → 0.8.0-beta.11

package/browser/esm/D8exjrado9TJrBp-.mjs

@@ -1,1946 +0,0 @@
-/**
-* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.10
-*
-* (C) 2026-present SheetXL Inc. & Michael T. Ford
-* License: The license can be found at https://www.sheetxl.com/license.
-*/
-import { r as e } from "./DLqc11Pf8vaE4Q5B.mjs";
-import { i as t, r as n } from "./C4VT6lNbpaDXCpBb.mjs";
-import { _ as r, b as i, w as a } from "./CMxbiQ5J79M3n1tk.mjs";
-import { r as o } from "./D2aQPiGg0ZoMYzuf.mjs";
-import { D as s, V as c, ft as l, m as u, mt as d, tt as f, z as p } from "./BThOwSja2ra4xejQ.mjs";
-import { t as m } from "./rY-dC3WB558TIbum.mjs";
-import { t as h } from "./DjdkGy-EI1kSo226.mjs";
-import { E as g, M as _, N as v, m as y } from "./CWoPWWRwMgkGPFFP.mjs";
-import { a as b } from "./DZRmBfjn2TgOTu5e.mjs";
-import { R as x, t as S } from "./sxxbiJiCMOW2Eivd.mjs";
-import { n as C, t as w } from "./rkTVQiYG3wd8oPom.mjs";
-import { N as T, Q as E, T as D, a as O, i as k, j as A, t as j } from "./CtZPEkaldpJpoGtW.mjs";
-import { m as M, t as ee, y as N } from "./D2coM-dNrlLpnUu5.mjs";
-import { t as P } from "./-LoBx7J6imeqaxCq.mjs";
-import { A as F, I, S as L, T as R, V as te, _ as z, d as B, o as ne } from "./DvWCBuY0jAL-RmJV.mjs";
-import { t as V } from "./CVxlfyE-gnJM8hOz.mjs";
-import { t as H } from "./DGuynZFJ9tqziqQs.mjs";
-import { t as re } from "./Chr_TXM-48IsK8Va.mjs";
-var U = e(t(), 1), W = e(n(), 1), ie = {
-	Preset: "preset",
-	Custom: "custom"
-}, G = {
-	Start: "start",
-	End: "end"
-}, ae = (0, U.memo)((e) => {
-	let { selectedColor: t, onSelectColor: n, onPreviewColor: r, onClick: i, onKeyDown: a, onMouseOver: o, onMouseLeave: s, onFocus: c, style: l = p.EmptyCssProperties, children: u, alphaWhite: f, alphaGrey: h, darkMode: g, alphaCheckSize: _ = 7, ...v } = e;
-	if (!t) throw Error("a selectedColor is required");
-	let y = (0, U.useCallback)((e) => {
-		i?.(e), e.isDefaultPrevented() || (e.ctrlKey ? r?.(t.toRGBA()) : n?.(t.toRGBA()));
-	}, [
-		n,
-		r,
-		i,
-		t
-	]), b = (0, U.useCallback)((e) => {
-		o?.(e), e.isDefaultPrevented() || r?.(t.toRGBA());
-	}, [
-		r,
-		o,
-		t
-	]), x = (0, U.useCallback)((e) => {
-		s?.(e), e.isDefaultPrevented();
-	}, [r, s]), S = (0, U.useCallback)((e) => {
-		c?.(e), e.isDefaultPrevented() || r?.(t.toRGBA());
-	}, [
-		r,
-		c,
-		t
-	]), C = (0, U.useCallback)((e) => {
-		a?.(e), e.isDefaultPrevented() || e.keyCode === d.Enter && n?.(t.toRGBA());
-	}, [
-		n,
-		a,
-		t
-	]), w = (0, U.useMemo)(() => t.toRGBA().alpha === 1 ? null : (0, W.jsx)(m, {
-		size: _,
-		white: f,
-		grey: h,
-		style: {
-			position: "absolute",
-			width: "calc(100% - 1.5px)",
-			height: "calc(100% - 1.5px)",
-			top: "0.75px",
-			left: "0.75px"
-		}
-	}), [
-		f,
-		h,
-		t
-	]);
-	return (0, W.jsxs)("div", {
-		style: {
-			position: "absolute",
-			height: "100%",
-			width: "100%",
-			top: "0px",
-			left: "0px",
-			cursor: "pointer",
-			outline: "none",
-			...l
-		},
-		tabIndex: 0,
-		...v,
-		onClick: y,
-		onKeyDown: C,
-		onMouseOver: b,
-		onMouseLeave: x,
-		onFocus: S,
-		children: [w, (0, W.jsx)("div", {
-			style: {
-				position: "absolute",
-				top: "0px",
-				left: "0px",
-				height: "100%",
-				width: "100%",
-				background: t.toCSS(g)
-			},
-			children: u
-		})]
-	});
-}), oe = (0, U.memo)((e) => {
-	let { schemeColorLookup: t, selectedColor: n, previewColor: r, colorDef: i, onSelectColorDef: a, onPreviewColorDef: o, propsSwatch: s, defaultButtonSize: c = 24, isLarge: l = !1, compareRGB: u = !1, darkMode: d = !1, ...f } = e, p = new v({
-		val: i.definition.val,
-		adjs: i.definition.adjs
-	}, (e) => t(e)), m = u ? p.toRGBA().toString() : p.toString(), h = n && (u ? n.toRGBA().toString() : n.toString()) === m, g = r && (u ? r.toRGBA().toString() : r.toString()) === m, _ = [];
-	_.push({ [y.AdjustmentType.Inv]: !0 }), _.push({ [y.AdjustmentType.Alpha]: 100 });
-	let b = p.toRGBA().alpha === 0 && s?.alphaGrey ? s.alphaGrey : p.adjust(_).toRGBA(d).toString(), x = (0, U.useCallback)(() => {
-		a?.(i);
-	}, [a, i]), S = (0, U.useCallback)((e) => {
-		o?.(i);
-	}, [o, i]);
-	return (0, W.jsx)(O, {
-		disableInteractive: !0,
-		slotProps: { popper: {
-			style: { pointerEvents: "none" },
-			disablePortal: !0,
-			popperOptions: {
-				strategy: "fixed",
-				modifiers: [{
-					name: "preventOverflow",
-					enabled: !0,
-					options: { boundariesElement: "viewport" }
-				}]
-			}
-		} },
-		title: i.description,
-		placement: "bottom-start",
-		children: (0, W.jsx)("div", {
-			style: {
-				width: c * (l ? 1.2 : 1) + "px",
-				height: c * (l ? 1.2 : 1) + "px",
-				position: "relative",
-				boxSizing: "border-box",
-				cursor: "pointer",
-				outline: "none"
-			},
-			...f,
-			children: (0, W.jsxs)(ae, {
-				selectedColor: p,
-				title: void 0,
-				onSelectColor: x,
-				onPreviewColor: S,
-				alphaCheckSize: l ? 9 : void 0,
-				darkMode: d,
-				...s,
-				children: [(0, W.jsx)("div", { style: {
-					position: "absolute",
-					width: "100%",
-					height: "100%",
-					top: "0px",
-					left: "0px",
-					pointerEvents: "none",
-					borderColor: b,
-					borderWidth: "2px",
-					borderStyle: "solid",
-					boxSizing: "border-box",
-					opacity: h ? "1" : "0"
-				} }), (0, W.jsx)("div", { style: {
-					position: "absolute",
-					width: .33 * c * (l ? 1.2 : 1) + "px",
-					height: .33 * c * (l ? 1.2 : 1) + "px",
-					left: "calc(50% - 0.5px)",
-					top: "calc(50% - 0.5px)",
-					transform: "translate(-50%,-50%)",
-					pointerEvents: "none",
-					background: b,
-					borderRadius: "50%",
-					opacity: g ? "1" : "0"
-				} })]
-			})
-		})
-	});
-}), K = (0, U.memo)((e) => {
-	let t, { title: n, schemeColorLookup: r, colorDefs: i, selectedColor: a, previewColor: o, onSelectColorDef: s, onPreviewColorDef: c, style: l = p.EmptyCssProperties, compareRGB: u = !1, darkMode: d, propsSwatch: f, ...m } = e;
-	if (Array.isArray(i[0])) t = i;
-	else {
-		t = [];
-		for (let e = 0; e < i.length; e++) t.push([i[e]]);
-	}
-	let h = (0, U.useCallback)((e) => {
-		s?.(e);
-	}, [s]), g = (0, U.useCallback)((e) => {
-		c?.(e);
-	}, [c]), _ = (0, U.useMemo)(() => {
-		let e = [];
-		for (let n = 0; n < t.length; n++) {
-			let i = [], s = t[n];
-			for (let e = 0; e < s.length; e++) {
-				let t = s[e];
-				i.push((0, W.jsx)(oe, {
-					schemeColorLookup: r,
-					colorDef: t,
-					selectedColor: a,
-					previewColor: o,
-					onSelectColorDef: h,
-					onPreviewColorDef: g,
-					propsSwatch: f,
-					compareRGB: u,
-					darkMode: d
-				}, n + " " + e));
-			}
-			let c = (0, W.jsx)(w, {
-				className: "button-col",
-				sx: {
-					display: "flex",
-					flexDirection: "column",
-					justifyContent: "space-between",
-					boxShadow: (e) => e.shadows[2],
-					borderRadius: "2px",
-					overflow: "hidden"
-				},
-				children: i
-			}, "" + n);
-			e.push(c);
-		}
-		return e;
-	}, [
-		t,
-		a,
-		o,
-		h,
-		g
-	]), v = (0, U.useMemo)(() => n ? (0, W.jsx)(A, {
-		noWrap: !0,
-		component: "div",
-		sx: {
-			display: "flex",
-			flexShrink: "0",
-			paddingLeft: "6px",
-			paddingBottom: "4px",
-			paddingTop: "0px",
-			userSelect: "none",
-			color: (e) => e.palette.text.secondary
-		},
-		children: n
-	}) : null, [n]);
-	return (0, W.jsxs)(w, {
-		style: { ...l },
-		children: [v, (0, W.jsx)(w, {
-			sx: {
-				display: "flex",
-				flexDirection: "row",
-				gap: "6px",
-				marginBottom: "14px",
-				flexWrap: "wrap",
-				justifyContent: "flex-start"
-			},
-			...m,
-			children: _
-		})]
-	});
-}), se = (e, t) => ({
-	description: e,
-	definition: {
-		val: t,
-		adjs: []
-	}
-}), q = (e, t, n, r, i, a) => {
-	let o = se(e, t);
-	r?.push(o);
-	let s = new v({
-		val: o.definition.val,
-		adjs: o.definition.adjs
-	}, n), c = s.toString();
-	i?.set(c, s);
-	let l = s.toRGBA().toString();
-	a?.set(l, s);
-}, ce = c(a("studio:customColorPanel", () => import("./iC69oOND5T8khIWf.mjs")).load, { renderError: (e) => (0, W.jsx)(z, { error: e }) }), le = (0, U.memo)((0, U.forwardRef)((e, t) => {
-	let { selectedColor: n = null, previewColor: a = e.selectedColor ?? null, recentColors: s, schemeLookup: c, disableAlpha: l = !1, previewDebounceTime: d = 100, initialPanelType: p, defaultButtonSize: m = 24, width: h, onElementLoad: g, onDone: _, onEyeDropStart: y, onEyeDropStop: x, onPreviewColor: E, onPreviewColorImmediate: O, onSelectColor: k, autoColor: j, autoColorLabel: M, autoColorLabelKey: ee, autoColorPosition: N = G.Start, compareRGB: P = !1, darkMode: F = !1, style: I, ...L } = e, R = f(), z = M ?? R(ee ?? i("color.automatic")), B = a || n, V = u(E ?? ((e) => {}), [E]), H = u(O ?? ((e) => {}), [O]), re = u(k ?? ((e, t) => {}), [k]), ae = u(y ?? (() => {}), [y]), se = u(x ?? (() => {}), [x]), [le, ue] = (0, U.useState)(!1), J = C(), Y = (0, U.useMemo)(() => c || v.getDefaultSchemeLookup(), [c]), X = (0, U.useMemo)(() => {
-		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), n = [];
-		q(R("color.scheme.bg1"), "bg1", Y, n, e, t), q(R("color.scheme.tx1"), "tx1", Y, n, e, t), q(R("color.scheme.bg2"), "bg2", Y, n, e, t), q(R("color.scheme.tx2"), "tx2", Y, n, e, t), q(R("color.scheme.accent", { n: 1 }), "accent1", Y, n, e, t), q(R("color.scheme.accent", { n: 2 }), "accent2", Y, n, e, t), q(R("color.scheme.accent", { n: 3 }), "accent3", Y, n, e, t), q(R("color.scheme.accent", { n: 4 }), "accent4", Y, n, e, t), q(R("color.scheme.accent", { n: 5 }), "accent5", Y, n, e, t), q(R("color.scheme.accent", { n: 6 }), "accent6", Y, n, e, t);
-		let r = b.buildPalette(n, Y, e, t), i = [];
-		if (q(R("color.standard.darkRed"), "C00000", Y, i, e, t), q(R("color.standard.red"), "FF0000", Y, i, e, t), q(R("color.standard.orange"), "FFC000", Y, i, e, t), q(R("color.standard.yellow"), "FFFF00", Y, i, e, t), q(R("color.standard.lightGreen"), "92D050", Y, i, e, t), q(R("color.standard.green"), "00B050", Y, i, e, t), q(R("color.standard.lightBlue"), "00B0F0", Y, i, e, t), q(R("color.standard.blue"), "0070C0", Y, i, e, t), q(R("color.standard.darkBlue"), "002060", Y, i, e, t), l ? q(R("color.standard.purpleFruit"), "7030A0", Y, i, e, t) : q(R("color.standard.transparent"), "00000000", Y, i, e, t), j) {
-			let t = j.toString();
-			e.set(t, j);
-		}
-		let a = /* @__PURE__ */ new Map(), o = typeof s == "function" ? s() : s, c = [];
-		for (let e = 0; o && e < o.length; e++) {
-			let t = o[e].toString();
-			a.set(t, o[e]), c.push({
-				description: R("color.recent", { n: e + 1 }),
-				definition: { val: o[e].toString() }
-			});
-		}
-		return {
-			primaryColors: n,
-			modifiedPresets: r,
-			standardColors: i,
-			recentColorsLimited: c,
-			mapAllPresets: e,
-			mapAllPresetsRGB: t,
-			mapRecent: a
-		};
-	}, [
-		Y,
-		s,
-		l,
-		j
-	]);
-	(0, U.useEffect)(() => {
-		g?.();
-	}, []);
-	let [Z, de] = (0, U.useState)(!1), fe = (0, U.useCallback)(() => {
-		de((e) => !e);
-	}, []);
-	(0, U.useEffect)(() => {
-		if (p) de(p === ie.Custom);
-		else if (n) {
-			let e = n.toString(), t = X.mapAllPresets.get(e);
-			t ||= (e = n.toRGBA().toString(), X.mapAllPresetsRGB.get(e));
-			let r = X.mapRecent.get(e);
-			de(!t && !r);
-		}
-	}, [n, p]);
-	let pe = (0, U.useCallback)(r.debounce((e) => {
-		V?.(e);
-	}, d), [V, d]), [me, he] = (0, U.useState)();
-	(0, U.useEffect)(() => {
-		he(a || n);
-	}, [a, n]);
-	let ge = u((e) => {
-		H && (H(e), pe(e));
-	}, [H]), _e = u((e) => {
-		ge(e ? new v({
-			val: e.definition.val,
-			adjs: e.definition.adjs
-		}, Y) : null);
-	}, [Y]), ve = (0, U.useCallback)((e) => {
-		e.ctrlKey && de(!0);
-	}, []), ye = u((e) => {
-		let t = !1;
-		if (e) {
-			let n = e.toString();
-			t = !X.mapAllPresets.has(n);
-		}
-		re?.(e, t);
-	}, [re, X]), be = u((e) => {
-		let t = e ? new v({
-			val: e.definition.val,
-			adjs: e.definition.adjs
-		}, Y) : null;
-		Promise.resolve(_?.()).then(() => {
-			ye(t);
-		});
-	}, [Y, _]), xe = u((e) => {
-		ge(e ? new v(e, Y) : null);
-	}, [Y]), Se = (0, U.useMemo)(() => window.EyeDropper === void 0 ? (0, W.jsx)(W.Fragment, {}) : (0, W.jsx)(T, {
-		"aria-label": R("color.eyeDropper"),
-		size: "small",
-		sx: { color: (e) => e.palette.text.icon ?? e.palette.action.active },
-		onClick: async () => {
-			ue(!0), ae?.(), await new EyeDropper().open().then((e) => {
-				ue(!1), se?.();
-				let t = new v(e.sRGBHex), n = t.toString(), r = X.mapAllPresets.get(n);
-				if (r ||= (n = t.toRGBA().toString(), X.mapAllPresetsRGB.get(n)), !r) {
-					let e = t.toRGBA();
-					X.mapAllPresetsRGB.forEach((t, n) => {
-						let i = t.toRGBA(), a = Math.abs(i.red - e.red) + Math.abs(i.blue - e.blue) + Math.abs(i.green - e.green);
-						a < 3 && a < 255 && (r = t);
-					});
-				}
-				de(!r), ge(r || t);
-			}).catch((e) => {
-				ue(!1), e?.name !== "AbortError" && console.error(e);
-			});
-		},
-		children: (0, W.jsx)(o, { iconKey: "Colorize" })
-	}), [X, F]), Ce = (0, U.useMemo)(() => {
-		if (!Z) return;
-		let e = {
-			opacity: Z ? 1 : "0",
-			position: "absolute",
-			top: "0px",
-			left: "0px",
-			width: "100%",
-			height: "100%",
-			boxSizing: "border-box"
-		};
-		return (0, W.jsx)(U.Suspense, {
-			fallback: (0, W.jsx)("div", {
-				style: e,
-				children: (0, W.jsx)(ne, {})
-			}),
-			children: (0, W.jsx)(ce, {
-				style: e,
-				selectedColor: B ? B.toRGBA().toString() : "transparent",
-				onColorChange: xe,
-				disableAlpha: l
-			})
-		});
-	}, [Z, B]), Q = (0, U.useMemo)(() => ({
-		onClick: ve,
-		alphaGrey: J.palette.text.icon ?? J.palette.action.active
-	}), [ve, J]), we = (0, U.useMemo)(() => {
-		if (!j) return null;
-		let e = {
-			description: z,
-			definition: {
-				val: j.getVal(),
-				adjs: j.getAdjustments()
-			}
-		};
-		return (0, W.jsx)(W.Fragment, { children: (0, W.jsxs)(te, {
-			sx: {
-				display: "flex",
-				color: (e) => e.palette.text.secondary
-			},
-			onMouseOver: () => {
-				_e(null);
-			},
-			onClick: () => {
-				be(null);
-			},
-			children: [(0, W.jsx)(w, {
-				sx: {
-					flex: "none",
-					boxShadow: (e) => e.shadows[2],
-					borderRadius: (e) => e.spacing(.5),
-					overflow: "hidden"
-				},
-				children: (0, W.jsx)(oe, {
-					schemeColorLookup: Y,
-					colorDef: e,
-					selectedColor: n === null ? j : n,
-					previewColor: a === null ? j : a,
-					defaultButtonSize: m,
-					isLarge: !0,
-					darkMode: F,
-					compareRGB: P,
-					propsSwatch: Q
-				})
-			}), (0, W.jsx)(A, {
-				noWrap: !0,
-				component: "div",
-				style: {
-					display: "flex",
-					flex: "1 1 100%",
-					marginLeft: "8px",
-					userSelect: "none"
-				},
-				children: z
-			})]
-		}) });
-	}, [
-		j,
-		z,
-		Y,
-		n,
-		a,
-		F,
-		P,
-		m,
-		Q
-	]);
-	return (0, W.jsxs)(w, {
-		ref: t,
-		sx: {
-			width: h,
-			outline: "none",
-			padding: "10px 10px",
-			overflow: "hidden",
-			boxSizing: "content-box"
-		},
-		style: I,
-		...L,
-		children: [
-			(0, W.jsxs)("div", {
-				style: {
-					position: "relative",
-					display: "flex"
-				},
-				children: [(0, W.jsxs)("div", {
-					style: { opacity: Z ? "0" : 1 },
-					children: [
-						we && N === G.Start ? (0, W.jsxs)(W.Fragment, { children: [we, (0, W.jsx)(S, { style: {
-							marginTop: "2px",
-							marginBottom: "10px"
-						} })] }) : null,
-						(0, W.jsx)(K, {
-							title: R("color.themeColors"),
-							schemeColorLookup: Y,
-							colorDefs: X.primaryColors,
-							selectedColor: n,
-							previewColor: a === void 0 ? n : a,
-							propsSwatch: Q,
-							onPreviewColorDef: _e,
-							onSelectColorDef: be,
-							compareRGB: P,
-							darkMode: F
-						}),
-						(0, W.jsx)(K, {
-							schemeColorLookup: Y,
-							colorDefs: X.modifiedPresets,
-							selectedColor: n,
-							previewColor: a === void 0 ? n : a,
-							propsSwatch: Q,
-							onPreviewColorDef: _e,
-							onSelectColorDef: be,
-							compareRGB: P,
-							darkMode: F
-						}),
-						(0, W.jsx)(S, { style: { marginBottom: "10px" } }),
-						(0, W.jsx)(K, {
-							title: R("color.standardColors"),
-							schemeColorLookup: Y,
-							colorDefs: X.standardColors,
-							selectedColor: n,
-							previewColor: a === void 0 ? n : a,
-							propsSwatch: Q,
-							onPreviewColorDef: _e,
-							onSelectColorDef: be,
-							compareRGB: P,
-							darkMode: F
-						}),
-						(0, W.jsxs)("div", {
-							style: {
-								opacity: X.recentColorsLimited.length === 0 ? "0" : void 0,
-								display: X.recentColorsLimited.length === 0 ? "none" : void 0
-							},
-							children: [(0, W.jsx)(S, { style: { marginBottom: "10px" } }), (0, W.jsx)(K, {
-								title: R("color.recentColors"),
-								schemeColorLookup: Y,
-								colorDefs: X.recentColorsLimited,
-								selectedColor: n,
-								previewColor: a === void 0 ? n : a,
-								propsSwatch: Q,
-								onPreviewColorDef: _e,
-								onSelectColorDef: be,
-								compareRGB: P,
-								darkMode: F
-							})]
-						}),
-						we && N === G.End ? (0, W.jsxs)(W.Fragment, { children: [
-							(0, W.jsx)(S, { sx: {
-								marginTop: "2px",
-								marginBottom: "2px"
-							} }),
-							we,
-							(0, W.jsx)("div", { style: { marginBottom: "2px" } })
-						] }) : null
-					]
-				}), Ce]
-			}),
-			(0, W.jsx)(S, { style: { marginBottom: "10px" } }),
-			(0, W.jsxs)("div", {
-				style: {
-					display: "flex",
-					flexDirection: "row",
-					alignItems: "center",
-					gap: "8px",
-					paddingLeft: "2px",
-					paddingRight: "2px"
-				},
-				children: [
-					Se,
-					(0, W.jsx)("div", { style: { flex: "1 1 0%" } }),
-					(0, W.jsxs)("div", {
-						style: {
-							flex: "0 0 auto",
-							display: "flex",
-							gap: "8px"
-						},
-						children: [(0, W.jsx)(D, {
-							style: { minWidth: "75px" },
-							value: "check",
-							variant: "outlined",
-							size: "small",
-							onClick: () => {
-								fe();
-							},
-							children: (0, W.jsxs)("span", {
-								style: {
-									display: "grid",
-									alignItems: "center"
-								},
-								children: [(0, W.jsx)("span", {
-									style: {
-										gridArea: "1 / 1",
-										visibility: Z ? "hidden" : "visible"
-									},
-									children: R("color.custom")
-								}), (0, W.jsx)("span", {
-									style: {
-										gridArea: "1 / 1",
-										visibility: Z ? "visible" : "hidden"
-									},
-									children: R("color.preset")
-								})]
-							})
-						}), (0, W.jsx)(D, {
-							variant: "contained",
-							size: "small",
-							style: { minWidth: "75px" },
-							onClick: () => {
-								Promise.resolve(_?.()).then(() => {
-									ye(me ?? null);
-								});
-							},
-							children: R("color.done")
-						})]
-					})
-				]
-			})
-		]
-	});
-})), ue = (0, W.jsx)(o, { iconKey: "circle.colored" }), J = (0, U.memo)((0, U.forwardRef)((e, t) => {
-	let { selectedColor: n, quickColor: r, icon: i = ue, tooltip: a, label: s, onPreviewColor: c, onPreviewColorImmediate: l, onSelectColor: f, variant: p = B.Toolbar, propsPanel: m, shouldCloseFloatAll: h = !0, compareRGB: g = !1, darkMode: _ = !1, ...v } = e, y = u(c ?? ((e) => {}), [c]), b = u(l ?? ((e) => {}), [l]), x = u(f ?? ((e, t) => {}), [f]), [S, C] = (0, U.useState)(() => {}), [T, E] = (0, U.useState)(!1), D = r || (T ? S : void 0) || n || m?.autoColor, O = (0, U.useRef)(!1), k = (0, U.useCallback)(() => {
-		E(!1);
-	}, []), A = u(() => {
-		C(n), E(!0);
-	}, [n]), j = u((e) => {
-		O.current || (C(e), y?.(e));
-	}, [y]), M = u((e) => {
-		O.current || (C(e), b?.(e));
-	}, [b]), ee = u((e, t) => {
-		O.current || (C(void 0), x?.(e, t));
-	}, [x]), N = (0, U.useMemo)(() => {
-		let e = typeof i == "function" ? i() : i;
-		typeof e == "string" && (e = (0, W.jsx)(o, { iconKey: e }));
-		let t = (e) => e && e !== "none" ? e : void 0, n = t(D?.toCSS(_)) ?? t(m?.autoColor?.toCSS(_)) ?? "transparent";
-		return (0, W.jsx)(w, {
-			className: "color-wrapper",
-			sx: {
-				lineHeight: "0",
-				color: "inherit",
-				"& .activeColor": { fill: n },
-				"& .style_grey": { fill: (e) => e.palette.text.icon ?? e.palette.action.active }
-			},
-			children: e
-		});
-	}, [
-		D,
-		m?.autoColor,
-		i,
-		_
-	]), P = u((e) => {
-		x?.(r ?? null, !1);
-	}, [x, r]), [F, R] = (0, U.useState)(!1), te = (0, U.useCallback)((e) => {
-		let { closeFloat: t, closeFloatAll: r } = e;
-		return (0, W.jsx)(le, {
-			...m,
-			selectedColor: n,
-			previewColor: S,
-			onDone: h ? r : t,
-			onKeyDown: (e) => {
-				e.which === d.Enter && (h ? r?.() : t?.());
-			},
-			onPreviewColorImmediate: M,
-			onPreviewColor: j,
-			onSelectColor: ee,
-			onEyeDropStart: () => R(!0),
-			onEyeDropStop: () => R(!1),
-			compareRGB: g,
-			darkMode: _
-		});
-	}, [
-		n,
-		S,
-		h,
-		D,
-		m?.autoColor,
-		_
-	]), z = {
-		onQuickClick: r ? P : void 0,
-		createPopupPanel: te,
-		propsPopup: { propsPopper: { resizeOnOverflow: !1 } },
-		onPopupOpen: A,
-		onPopupClose: k,
-		tooltip: a || s || "Color",
-		label: s,
-		icon: N,
-		...v
-	};
-	return p === B.Toolbar ? (0, W.jsx)(L, {
-		ref: t,
-		...z
-	}) : (0, W.jsx)(I, {
-		ref: t,
-		...z
-	});
-})), Y = 82;
-function X(e, t) {
-	if (!t) return "";
-	switch (t.style) {
-		case _.StrokeStyle.None: return e("border.style.none");
-		case _.StrokeStyle.Hair: return e("border.style.hair");
-		case _.StrokeStyle.Dotted: return e("border.style.dotted");
-		case _.StrokeStyle.Dashed: return e("border.style.dashed");
-		case _.StrokeStyle.DashDot: return e("border.style.dashDot");
-		case _.StrokeStyle.DashDotDot: return e("border.style.dashDotDot");
-		case _.StrokeStyle.Double: return e("border.style.double");
-		case _.StrokeStyle.Thin: return e("border.style.thin");
-		case _.StrokeStyle.Medium: return e("border.style.medium");
-		case _.StrokeStyle.MediumDashed: return e("border.style.mediumDashed");
-		case _.StrokeStyle.MediumDashDot: return e("border.style.mediumDashDot");
-		case _.StrokeStyle.MediumDashDotDot: return e("border.style.mediumDashDotDot");
-		case _.StrokeStyle.SlantDashDot: return e("border.style.slantDashDot");
-		case _.StrokeStyle.Thick: return e("border.style.thick");
-		default: return t.description;
-	}
-}
-var Z = (e) => {
-	let { styleColor: t, length: n = Y, width: r = 1, dashArray: i, sx: a, isDouble: o = !1, isAngled: s = !1, darkMode: c = !1, ...l } = e;
-	return (0, W.jsx)(E, {
-		sx: {
-			width: `${n}px`,
-			height: `${r}px`,
-			color: "inherit",
-			overflow: "visible",
-			"& .activeColor": { stroke: (e) => `${t ? t.toRGBA(c).toString() : e.palette.text.icon ?? e.palette.action.active}` },
-			"& .style_grey": { stroke: (e) => e.palette.text.icon ?? e.palette.action.active },
-			...a
-		},
-		height: r,
-		width: n,
-		viewBox: `0 0 ${n} ${r}`,
-		...l,
-		children: (0, W.jsx)(x, {
-			length: n,
-			width: r,
-			dashArray: i,
-			isDouble: o,
-			isAngled: s,
-			className: "activeColor"
-		})
-	});
-}, de = (0, U.memo)((0, U.forwardRef)((e, t) => {
-	let { variant: n, showLabels: r = !1, disabled: i, createPopupPanel: a, styleColor: o, selectedStyle: s, onSelectStyle: c, showNone: l = !0, darkMode: p, sx: m, ...h } = e, g = u(c ?? ((e) => {}), []), v = f(), y = (0, U.useCallback)((e) => {
-		let { popupContainer: t, closeFloat: n, ...a } = e, c = [], u = _.BuiltInDefinitionsArray;
-		for (let e = 0; e < u.length; e++) {
-			let t = u[e];
-			if (t.description === "None" && !l) continue;
-			let a = (0, W.jsx)(Z, {
-				styleColor: o,
-				length: Y,
-				width: t.width,
-				darkMode: p,
-				dashArray: t.pattern,
-				isDouble: t.description.toLowerCase().includes("double"),
-				isAngled: t.description.toLowerCase().includes("slant")
-			}), f = null;
-			f = r ? (0, W.jsxs)(W.Fragment, { children: [(0, W.jsx)(w, {
-				sx: { marginRight: "6px" },
-				children: X(v, t)
-			}), (0, W.jsxs)(w, {
-				sx: {
-					marginLeft: "6px",
-					marginRight: "6px",
-					display: "flex",
-					alignItems: "center",
-					flex: "1 1 100%"
-				},
-				children: [(0, W.jsx)("div", { style: { flex: "1 1 100%" } }), a]
-			})] }) : t.description === "None" ? X(v, t) : a, c.push((0, W.jsx)(F, {
-				className: "border-stroke",
-				tabIndex: 0,
-				sx: {
-					height: "28px",
-					"& svg path.activeColor": { filter: j(4) },
-					paddingLeft: "16px"
-				},
-				propsTooltip: { description: r ? "" : X(v, t) },
-				icon: null,
-				disabled: i,
-				onMouseDown: (e) => e.preventDefault(),
-				onMouseUp: () => {
-					n?.(), g(t.style);
-				},
-				onKeyDown: (e) => {
-					e.which === d.Enter && n?.();
-				},
-				selected: t.style === s,
-				children: f
-			}, e));
-		}
-		return (0, W.jsx)(w, {
-			sx: {
-				display: "flex",
-				flexDirection: "column",
-				paddingTop: "4px",
-				paddingBottom: "4px"
-			},
-			children: c
-		});
-	}, [
-		i,
-		l,
-		o,
-		s,
-		p,
-		v
-	]), b = {
-		disabled: i,
-		icon: (0, U.useMemo)(() => {
-			let e, t = _.BuiltInDefinitions.get(s);
-			return t ? (e = t.description === "None" ? (0, W.jsx)(w, {
-				sx: { minWidth: `${Y}px` },
-				children: X(v, t)
-			}) : (0, W.jsx)(Z, {
-				styleColor: o,
-				length: Y,
-				width: t.width,
-				dashArray: t.pattern,
-				darkMode: p,
-				isDouble: t.description.toLowerCase().includes("double"),
-				isAngled: t.description.toLowerCase().includes("slant")
-			}), (0, W.jsx)(w, {
-				className: "border-stroke",
-				sx: {
-					paddingLeft: "12px",
-					marginLeft: "4px",
-					marginRight: "4px",
-					height: "24px",
-					display: "flex",
-					alignItems: "center",
-					"& svg path.activeColor": { filter: j() }
-				},
-				children: e
-			})) : null;
-		}, [
-			s,
-			o,
-			v
-		]),
-		tooltip: v("border.styleTooltip", { style: X(v, (0, U.useMemo)(() => _.BuiltInDefinitions.get(s), [s])) }),
-		sx: m,
-		createPopupPanel: y,
-		...h
-	};
-	return n === B.Toolbar ? (0, W.jsx)(L, { ...b }) : (0, W.jsx)(I, { ...b });
-}));
-function fe(e, t, n) {
-	return e === g.BuiltInSheetPattern.Solid ? {
-		foreground: n,
-		background: t
-	} : {
-		foreground: t,
-		background: n
-	};
-}
-var pe = (0, U.memo)((e) => {
-	let { patternType: t, foreground: n, background: r, createCell: i, darkMode: a = !1, className: o, style: s, ...c } = e, l = (0, U.useMemo)(() => {
-		let e = fe(t, n, r);
-		return i({ style: { fill: {
-			type: g.Type.Pattern,
-			patternType: t,
-			foreground: e.foreground ?? void 0,
-			background: e.background ?? void 0
-		} } })?.getStyle().getFill().toCSS(a) ?? {};
-	}, [
-		t,
-		n,
-		r,
-		i,
-		a
-	]);
-	return (0, W.jsx)("div", {
-		className: h("sxl-pattern-swatch", o),
-		style: {
-			width: "100%",
-			height: "100%",
-			...l,
-			...s
-		},
-		...c
-	});
-});
-pe.displayName = "PatternSwatch";
-var me = Object.freeze([
-	g.BuiltInSheetPattern.Solid,
-	g.BuiltInSheetPattern.DarkGray,
-	g.BuiltInSheetPattern.MediumGray,
-	g.BuiltInSheetPattern.LightGray,
-	g.BuiltInSheetPattern.Gray125,
-	g.BuiltInSheetPattern.Gray0625,
-	g.BuiltInSheetPattern.DarkHorizontal,
-	g.BuiltInSheetPattern.DarkVertical,
-	g.BuiltInSheetPattern.DarkDown,
-	g.BuiltInSheetPattern.DarkUp,
-	g.BuiltInSheetPattern.DarkGrid,
-	g.BuiltInSheetPattern.DarkTrellis,
-	g.BuiltInSheetPattern.LightHorizontal,
-	g.BuiltInSheetPattern.LightVertical,
-	g.BuiltInSheetPattern.LightDown,
-	g.BuiltInSheetPattern.LightUp,
-	g.BuiltInSheetPattern.LightGrid,
-	g.BuiltInSheetPattern.LightTrellis
-]);
-function he(e, t) {
-	switch (t) {
-		case g.BuiltInSheetPattern.None: return e("fill.pattern.none");
-		case g.BuiltInSheetPattern.Solid: return e("fill.pattern.solid");
-		case g.BuiltInSheetPattern.Gray0625: return e("fill.pattern.gray0625");
-		case g.BuiltInSheetPattern.Gray125: return e("fill.pattern.gray125");
-		case g.BuiltInSheetPattern.LightGray: return e("fill.pattern.lightGray");
-		case g.BuiltInSheetPattern.MediumGray: return e("fill.pattern.mediumGray");
-		case g.BuiltInSheetPattern.DarkGray: return e("fill.pattern.darkGray");
-		case g.BuiltInSheetPattern.LightHorizontal: return e("fill.pattern.lightHorizontal");
-		case g.BuiltInSheetPattern.LightVertical: return e("fill.pattern.lightVertical");
-		case g.BuiltInSheetPattern.LightDown: return e("fill.pattern.lightDown");
-		case g.BuiltInSheetPattern.LightUp: return e("fill.pattern.lightUp");
-		case g.BuiltInSheetPattern.LightGrid: return e("fill.pattern.lightGrid");
-		case g.BuiltInSheetPattern.LightTrellis: return e("fill.pattern.lightTrellis");
-		case g.BuiltInSheetPattern.DarkHorizontal: return e("fill.pattern.darkHorizontal");
-		case g.BuiltInSheetPattern.DarkVertical: return e("fill.pattern.darkVertical");
-		case g.BuiltInSheetPattern.DarkDown: return e("fill.pattern.darkDown");
-		case g.BuiltInSheetPattern.DarkUp: return e("fill.pattern.darkUp");
-		case g.BuiltInSheetPattern.DarkGrid: return e("fill.pattern.darkGrid");
-		case g.BuiltInSheetPattern.DarkTrellis: return e("fill.pattern.darkTrellis");
-		default: return t;
-	}
-}
-var ge = (0, U.memo)((e) => {
-	let { selectedPattern: t, foreground: n, background: r, onSelectPattern: i, createCell: a, darkMode: o = !1, disabled: s, ...c } = e, l = f(), d = u(i ?? ((e) => {}), [i]), p = (0, U.useCallback)((e) => {
-		let { closeFloat: i } = e;
-		return (0, W.jsx)(w, {
-			sx: {
-				display: "grid",
-				gridTemplateColumns: "repeat(6, 34px)",
-				gap: "4px",
-				padding: "8px"
-			},
-			children: me.map((e) => (0, W.jsx)(k, {
-				label: he(l, e),
-				children: (0, W.jsx)(w, {
-					role: "button",
-					tabIndex: 0,
-					"aria-label": he(l, e),
-					"aria-pressed": e === t,
-					onMouseDown: (e) => e.preventDefault(),
-					onMouseUp: () => {
-						i?.(), d(e);
-					},
-					onKeyDown: (t) => {
-						t.key !== "Enter" && t.key !== " " || (t.preventDefault(), i?.(), d(e));
-					},
-					sx: {
-						width: "34px",
-						height: "34px",
-						cursor: "pointer",
-						borderRadius: "2px",
-						outline: (n) => e === t ? `2px solid ${n.palette.primary.main}` : `1px solid ${n.palette.divider}`,
-						outlineOffset: "-1px",
-						"&:hover": { outline: (e) => `2px solid ${e.palette.primary.light}` }
-					},
-					children: (0, W.jsx)(pe, {
-						patternType: e,
-						foreground: n,
-						background: r,
-						createCell: a,
-						darkMode: o
-					})
-				})
-			}, e))
-		});
-	}, [
-		t,
-		n,
-		r,
-		a,
-		o,
-		d,
-		l
-	]);
-	return (0, W.jsx)(L, {
-		disabled: s,
-		tooltip: l("fill.patternTooltip", { pattern: he(l, t) }),
-		createPopupPanel: p,
-		icon: (0, W.jsx)(w, {
-			sx: {
-				width: "48px",
-				height: "20px",
-				borderRadius: "2px",
-				outline: (e) => `1px solid ${e.palette.divider}`,
-				outlineOffset: "-1px",
-				overflow: "hidden"
-			},
-			children: (0, W.jsx)(pe, {
-				patternType: t,
-				foreground: n,
-				background: r,
-				createCell: a,
-				darkMode: o
-			})
-		}),
-		...c
-	});
-});
-ge.displayName = "PatternPopupButton";
-var _e = {
-	resizeOnOverflow: !1,
-	placement: "bottom",
-	offsets: [0, 2],
-	shift: { padding: 8 }
-}, ve = ((e) => {
-	let t = [], n = e.length;
-	for (let r = 0; r < n; r++) {
-		let [i, a] = e[(r + n - 1) % n], [o, s, c] = e[r], [l, u] = e[(r + 1) % n], d = (e, t) => {
-			let n = Math.hypot(e - o, t - s) || 1, r = Math.min(c, n / 2);
-			return [o + (e - o) / n * r, s + (t - s) / n * r];
-		}, [f, p] = d(i, a), [m, h] = d(l, u);
-		t.push(`${r === 0 ? "M" : "L"}${f.toFixed(2)} ${p.toFixed(2)} Q${o} ${s} ${m.toFixed(2)} ${h.toFixed(2)}`);
-	}
-	return t.join(" ") + " Z";
-})([
-	[
-		7,
-		.5,
-		1
-	],
-	[
-		13.5,
-		6,
-		1.5
-	],
-	[
-		13.5,
-		16.5,
-		2
-	],
-	[
-		.5,
-		16.5,
-		2
-	],
-	[
-		.5,
-		6,
-		1.5
-	]
-]), ye = (e) => Math.max(0, Math.min(1, e)), be = (e, t, n) => {
-	try {
-		return (e instanceof v ? e : new v(e, t)).toCSS(n);
-	} catch {
-		return "transparent";
-	}
-}, xe = (e, t, n) => {
-	try {
-		let r = new v(e, n).toRGBA(), i = new v(t, n).toRGBA(), a = (e, t) => Math.round((e + t) / 2).toString(16).padStart(2, "0");
-		return `${a(r.red, i.red)}${a(r.green, i.green)}${a(r.blue, i.blue)}`;
-	} catch {
-		return e;
-	}
-}, Se = (e, t) => e.offset === t.offset && String(e.color) === String(t.color), Ce = (e, t) => e.length === t.length && e.every((e, n) => Se(e, t[n])), Q = (0, U.memo)((e) => {
-	let { percent: t, disabled: n, inputRef: r, onChange: i } = e, a = f(), [o, s] = (0, U.useState)(String(t)), [c, l] = (0, U.useState)(!1);
-	return (0, U.useEffect)(() => {
-		c || s(String(t));
-	}, [t, c]), (0, W.jsx)(P, {
-		type: "number",
-		size: "small",
-		disabled: n,
-		inputRef: r,
-		label: a("fill.gradientPosition"),
-		value: o,
-		onFocus: () => l(!0),
-		onBlur: () => {
-			l(!1), s(String(t));
-		},
-		onChange: (e) => {
-			if (s(e.target.value), e.target.value === "") return;
-			let t = Math.max(0, Math.min(100, parseInt(e.target.value, 10) || 0));
-			i(t);
-		},
-		slotProps: {
-			htmlInput: {
-				min: 0,
-				max: 100,
-				step: 5,
-				style: { textAlign: "right" }
-			},
-			inputLabel: { shrink: !0 },
-			input: { endAdornment: (0, W.jsx)(H, {
-				position: "end",
-				disableTypography: !0,
-				children: "%"
-			}) }
-		},
-		sx: { width: 120 }
-	});
-});
-Q.displayName = "StopPositionField";
-var we = (0, U.memo)((e) => {
-	let { index: t, stop: n, offset: r, schemeLookup: i, recentColors: a, darkMode: c, disabled: l, canRemove: d, rampRef: p, onDrag: m, onMove: g, onPreviewColor: _, onChangeColor: y, onRemove: b, onOpenChange: x } = e, S = f(), T = C(), E = (0, U.useMemo)(() => new v(n.color, i), [n.color, i]), [D, k] = (0, U.useState)(void 0), [A, j] = (0, U.useState)(null), [M, ee] = (0, U.useState)(!1), [N, P] = (0, U.useState)(!1), [F, I] = (0, U.useState)(!1), [L, te] = (0, U.useState)(!1), z = (0, U.useRef)(null), B = (0, U.useRef)(!1), ne = u((e) => {
-		k(e), _(t, e ?? null);
-	}, [t, _]), V = u((e) => {
-		g(t, e / 100);
-	}, [t, g]), H = Math.round(100 * r), re = be(D ?? E, i, c), ie = (0, U.useCallback)((e) => {
-		let { closeFloat: n } = e;
-		return (0, W.jsxs)(w, {
-			className: "sxl-gradient-stop-popup",
-			sx: {
-				display: "flex",
-				flexDirection: "column"
-			},
-			children: [(0, W.jsx)(le, {
-				selectedColor: E,
-				previewColor: D,
-				disableAlpha: !0,
-				schemeLookup: i,
-				recentColors: a,
-				darkMode: c,
-				onDone: n,
-				onPreviewColor: ne,
-				onPreviewColorImmediate: ne,
-				onSelectColor: (e) => {
-					ne(void 0), e && y(t, e);
-				}
-			}), (0, W.jsx)(w, {
-				sx: {
-					display: "flex",
-					alignItems: "center",
-					gap: 1,
-					paddingX: 1,
-					paddingBottom: 1
-				},
-				children: (0, W.jsx)(Q, {
-					percent: H,
-					disabled: l,
-					inputRef: z,
-					onChange: V
-				})
-			})]
-		});
-	}, [
-		E,
-		D,
-		H,
-		t,
-		i,
-		a,
-		c,
-		l,
-		ne,
-		y,
-		V
-	]), G = s({
-		anchor: A,
-		label: "gradient-stop",
-		createPopupPanel: ie,
-		propsPopper: _e,
-		onOpen: () => {
-			ee(!0), x(t, !0), B.current && (B.current = !1, requestAnimationFrame(() => z.current?.focus()));
-		},
-		onClose: () => {
-			ee(!1), x(t, !1), ne(void 0);
-		}
-	}), ae = u((e) => {
-		B.current = e, G.reference.open(0);
-	}, [G]), oe = u(() => {
-		M ? G.reference.close(0) : ae(!1);
-	}, [
-		M,
-		G,
-		ae
-	]), K = (0, U.useRef)(null), se = u((e) => {
-		l || e.button !== 0 || (e.currentTarget.setPointerCapture(e.pointerId), K.current = {
-			pointerId: e.pointerId,
-			startX: e.clientX,
-			startOffset: r,
-			moved: !1,
-			offset: r
-		});
-	}, [l, r]), q = u((e) => {
-		let n = K.current;
-		if (!n || n.pointerId !== e.pointerId) return;
-		let r = e.clientX - n.startX;
-		if (!n.moved) {
-			if (Math.abs(r) < 3) return;
-			n.moved = !0, P(!0), te(!1), G.reference.close(0);
-		}
-		let i = p.current?.getBoundingClientRect().width ?? 0;
-		n.offset = i > 0 ? ye(n.startOffset + r / i) : n.startOffset, m(t, n.offset, !1);
-	}, [
-		t,
-		p,
-		G,
-		m
-	]), ce = u((e) => {
-		let n = K.current;
-		if (n && n.pointerId === e.pointerId) {
-			if (K.current = null, n.moved) return P(!1), m(t, n.offset, !0), void g(t, n.offset);
-			oe();
-		}
-	}, [
-		t,
-		m,
-		g,
-		oe
-	]), ue = u((e) => {
-		let n = K.current;
-		n && n.pointerId === e.pointerId && (K.current = null, n.moved && (P(!1), m(t, n.startOffset, !0)));
-	}, [t, m]), J = u((e) => {
-		if (l) return;
-		let n = e.shiftKey ? .1 : .01;
-		switch (e.key) {
-			case "ArrowLeft":
-				g(t, ye(r - n));
-				break;
-			case "ArrowRight":
-				g(t, ye(r + n));
-				break;
-			case "Home":
-				g(t, 0);
-				break;
-			case "End":
-				g(t, 1);
-				break;
-			case "Delete":
-			case "Backspace":
-				d && b(t);
-				break;
-			case "Enter":
-			case " ":
-				ae(!0);
-				break;
-			case "Escape":
-				if (!M) return;
-				G.reference.close(0);
-				break;
-			default: return;
-		}
-		e.preventDefault();
-	}, [
-		l,
-		t,
-		r,
-		d,
-		M,
-		G,
-		ae,
-		g,
-		b
-	]), Y = M || N || F, X = !l && !N && !M && L, Z = (0, W.jsxs)(w, {
-		className: "sxl-gradient-stop-toolbar",
-		onPointerDown: (e) => {
-			e.stopPropagation();
-		},
-		sx: {
-			display: "flex",
-			alignItems: "center",
-			gap: .25
-		},
-		children: [(0, W.jsx)(R, {
-			tabIndex: -1,
-			propsTooltip: {
-				label: S("fill.gradientStopColor"),
-				simple: !0
-			},
-			icon: (0, W.jsx)(w, {
-				className: "color-wrapper",
-				sx: {
-					lineHeight: 0,
-					"& .activeColor": { fill: re }
-				},
-				children: (0, W.jsx)(o, { iconKey: "circle.colored" })
-			}),
-			onClick: () => {
-				te(!1), oe();
-			}
-		}), (0, W.jsx)(R, {
-			tabIndex: -1,
-			disabled: !d,
-			propsTooltip: {
-				label: S("fill.gradientRemoveStop"),
-				simple: !0
-			},
-			icon: (0, W.jsx)(o, { iconKey: "Close" }),
-			onClick: () => b(t)
-		})]
-	});
-	return (0, W.jsxs)(W.Fragment, { children: [(0, W.jsx)(O, {
-		title: Z,
-		open: X,
-		onOpen: () => te(!0),
-		onClose: () => te(!1),
-		enterDelay: 250,
-		enterNextDelay: 250,
-		leaveDelay: 400,
-		placement: "bottom",
-		disableFocusListener: !0,
-		disableTouchListener: !0,
-		slotProps: { tooltip: { sx: {
-			backgroundColor: (e) => e.palette.background.paper,
-			color: (e) => e.palette.text.primary,
-			border: (e) => `1px solid ${e.palette.divider}`,
-			boxShadow: (e) => e.shadows[3],
-			padding: "2px",
-			marginTop: "4px !important"
-		} } },
-		children: (0, W.jsx)(w, {
-			ref: j,
-			role: "button",
-			tabIndex: l ? -1 : 0,
-			"aria-label": S("fill.gradientStop", { position: H }),
-			"aria-disabled": l || void 0,
-			className: h("sxl-gradient-stop", {
-				"sxl-gradient-stop-open": M,
-				"sxl-gradient-stop-dragging": N
-			}),
-			onPointerDown: se,
-			onPointerMove: q,
-			onPointerUp: ce,
-			onPointerCancel: ue,
-			onFocus: () => I(!0),
-			onBlur: () => I(!1),
-			onKeyDown: J,
-			sx: {
-				position: "absolute",
-				left: 100 * r + "%",
-				top: "calc(100% - 4px)",
-				width: 14,
-				height: 17,
-				transform: "translateX(-50%)",
-				transition: N ? "none" : "left 120ms ease-out",
-				lineHeight: 0,
-				cursor: l ? "default" : N ? "grabbing" : "grab",
-				touchAction: "none",
-				outline: "none",
-				zIndex: +!!N,
-				filter: Y ? `drop-shadow(0 1px 2px ${T.palette.action.active})` : void 0
-			},
-			children: (0, W.jsx)("svg", {
-				width: 14,
-				height: 17,
-				viewBox: "0 0 14 17",
-				"aria-hidden": "true",
-				children: (0, W.jsx)("path", {
-					d: ve,
-					fill: re,
-					stroke: Y ? T.palette.primary.main : T.palette.text.secondary,
-					strokeWidth: Y ? 1.5 : 1,
-					strokeLinejoin: "round"
-				})
-			})
-		})
-	}), G.component] });
-});
-we.displayName = "StopHandle";
-var Te = (0, U.memo)((e) => {
-	let { stops: t, onChange: n, minStops: r = 2, maxStops: i = 8, schemeLookup: a, recentColors: s, darkMode: c = !1, disabled: l = !1, className: d, ...p } = e, m = f(), g = (0, U.useRef)(null), _ = (0, U.useRef)({
-		known: [],
-		next: 1
-	}), v = (0, U.useMemo)(() => {
-		let e = _.current, n = ((e, t, n) => {
-			for (let n of t) if (Ce(e, n.stops)) return n.keys;
-			let r = /* @__PURE__ */ new Set();
-			return e.map((e) => {
-				for (let n of t) {
-					let t = n.stops.findIndex((t, i) => !r.has(n.keys[i]) && Se(t, e));
-					if (t >= 0) return r.add(n.keys[t]), n.keys[t];
-				}
-				return -1;
-			}).map((e) => e >= 0 ? e : n());
-		})(t, e.known, () => e.next++);
-		return e.known[0]?.keys !== n && (e.known = [{
-			stops: t,
-			keys: n
-		}, ...e.known].slice(0, 3)), n;
-	}, [t]), [y, b] = (0, U.useState)(null), [x, S] = (0, U.useState)(null), [C, T] = (0, U.useState)(null);
-	(0, U.useLayoutEffect)(() => {
-		b((e) => {
-			if (!e?.released) return e;
-			let n = v.indexOf(e.key);
-			return n >= 0 && t[n].offset === e.offset ? null : e;
-		});
-	}, [t, v]), (0, U.useLayoutEffect)(() => {
-		if (!y?.released) return;
-		let e = window.setTimeout(() => b((e) => e?.released ? null : e), 1e3);
-		return () => window.clearTimeout(e);
-	}, [y]);
-	let E = !l && t.length < i, D = !l && t.length > r, O = u((e) => {
-		let t = [...e].sort((e, t) => e.stop.offset - t.stop.offset), r = {
-			stops: t.map((e) => e.stop),
-			keys: t.map((e) => e.key)
-		}, i = _.current;
-		i.known = [r, ...i.known].slice(0, 3), n(r.stops.slice());
-	}, [n]), k = u(() => t.map((e, t) => ({
-		stop: e,
-		key: v[t]
-	})), [t, v]), A = u((e, t, n) => {
-		b({
-			key: v[e],
-			offset: t,
-			released: n
-		});
-	}, [v]), j = u((e, t) => {
-		O(k().map((n, r) => r === e ? {
-			...n,
-			stop: {
-				...n.stop,
-				offset: t
-			}
-		} : n));
-	}, [k, O]), M = u((e, t) => {
-		S(t ? {
-			key: v[e],
-			color: t
-		} : null);
-	}, [v]), ee = u((e, t) => {
-		let n = v[e];
-		T((e) => t ? n : e === n ? null : e);
-	}, [v]), N = u((e, t) => {
-		O(k().map((n, r) => r === e ? {
-			...n,
-			stop: {
-				...n.stop,
-				color: t.toString()
-			}
-		} : n));
-	}, [k, O]), P = u((e) => {
-		t.length <= r || O(k().filter((t, n) => n !== e));
-	}, [
-		t,
-		r,
-		k,
-		O
-	]), F = u((e) => {
-		if (t.length >= i) return;
-		let n = [...t].sort((e, t) => e.offset - t.offset), r = e;
-		if (r === void 0) {
-			let e = -1;
-			for (let t = 0; t + 1 < n.length; t++) {
-				let i = n[t + 1].offset - n[t].offset;
-				i > e && (e = i, r = (n[t].offset + n[t + 1].offset) / 2);
-			}
-			r === void 0 && (r = 1);
-		}
-		let o = [...n].reverse().find((e) => e.offset <= r) ?? n[0], s = n.find((e) => e.offset >= r) ?? n[n.length - 1];
-		O([...k(), {
-			stop: {
-				offset: r,
-				color: xe(o.color, s.color, a)
-			},
-			key: _.current.next++
-		}]);
-	}, [
-		t,
-		i,
-		a,
-		k,
-		O
-	]), I = u((e) => {
-		if (!E || e.button !== 0 || C !== null || e.target.closest(".sxl-gradient-stop")) return;
-		let t = e.currentTarget.getBoundingClientRect();
-		t.width <= 0 || F(ye((e.clientX - t.left) / t.width));
-	}, [
-		E,
-		C,
-		F
-	]), L = (0, U.useMemo)(() => {
-		let e = t.map((e, t) => ({
-			offset: y?.key === v[t] ? y.offset : e.offset,
-			css: be(x?.key === v[t] ? x.color : e.color, a, c)
-		}));
-		return e.sort((e, t) => e.offset - t.offset), `linear-gradient(90deg, ${e.map((e) => `${e.css} ${(100 * e.offset).toFixed(2)}%`).join(", ")})`;
-	}, [
-		t,
-		v,
-		y,
-		x,
-		a,
-		c
-	]);
-	return (0, W.jsxs)(w, {
-		className: h("sxl-gradient-stops", d),
-		sx: {
-			display: "flex",
-			alignItems: "flex-start",
-			gap: .5,
-			minWidth: 0
-		},
-		...p,
-		children: [(0, W.jsx)(w, {
-			sx: {
-				flex: 1,
-				minWidth: 0,
-				paddingX: "7px",
-				paddingBottom: "15px"
-			},
-			children: (0, W.jsx)(w, {
-				ref: g,
-				className: "sxl-gradient-stops-ramp",
-				onPointerDown: I,
-				sx: {
-					position: "relative",
-					height: 18,
-					borderRadius: 1,
-					border: (e) => `1px solid ${e.palette.divider}`,
-					backgroundImage: L,
-					backgroundRepeat: "no-repeat",
-					cursor: E ? "copy" : "default",
-					opacity: l ? .5 : 1
-				},
-				children: t.map((e, t) => (0, W.jsx)(we, {
-					index: t,
-					stop: e,
-					offset: y?.key === v[t] ? y.offset : e.offset,
-					schemeLookup: a,
-					recentColors: s,
-					darkMode: c,
-					disabled: l,
-					canRemove: D,
-					rampRef: g,
-					onDrag: A,
-					onMove: j,
-					onPreviewColor: M,
-					onChangeColor: N,
-					onRemove: P,
-					onOpenChange: ee
-				}, v[t]))
-			})
-		}), (0, W.jsx)(R, {
-			disabled: !E,
-			propsTooltip: {
-				label: m("fill.gradientAddStop"),
-				simple: !0
-			},
-			icon: (0, W.jsx)(o, { iconKey: "Add" }),
-			onClick: () => F(),
-			sx: { marginTop: "-3px" }
-		})]
-	});
-});
-Te.displayName = "GradientStopsBar";
-var Ee = (0, U.memo)((e) => {
-	let { value: t, onChange: n, minStops: r, maxStops: i, schemeLookup: a, recentColors: o, darkMode: s = !1, disabled: c = !1, className: l, ...d } = e, p = f(), m = u((e) => {
-		n({
-			...t,
-			...e
-		});
-	}, [t, n]), _ = t.gradientType === g.GradientType.Linear;
-	return (0, W.jsxs)(w, {
-		className: h("sxl-gradient-editor", l),
-		sx: {
-			display: "flex",
-			flexDirection: "column",
-			gap: 1.25,
-			minWidth: 0
-		},
-		...d,
-		children: [(0, W.jsxs)(w, {
-			sx: {
-				display: "flex",
-				flexWrap: "wrap",
-				gap: 1,
-				alignItems: "center"
-			},
-			children: [(0, W.jsxs)(N, {
-				size: "small",
-				sx: {
-					minWidth: 132,
-					flex: "1 1 132px"
-				},
-				children: [(0, W.jsx)(M, {
-					shrink: !0,
-					children: p("fill.gradientStyle")
-				}), (0, W.jsxs)(ee, {
-					label: p("fill.gradientStyle"),
-					notched: !0,
-					disabled: c,
-					value: t.gradientType,
-					onChange: (e) => m({ gradientType: e.target.value }),
-					children: [(0, W.jsx)(V, {
-						value: g.GradientType.Linear,
-						children: p("fill.gradientLinear")
-					}), (0, W.jsx)(V, {
-						value: g.GradientType.Path,
-						children: p("fill.gradientRadial")
-					})]
-				})]
-			}), (0, W.jsx)(P, {
-				label: p("fill.gradientAngle"),
-				type: "number",
-				size: "small",
-				disabled: c || !_,
-				value: t.angle,
-				onChange: (e) => {
-					let t = parseInt(e.target.value, 10) || 0;
-					m({ angle: (t % 360 + 360) % 360 });
-				},
-				slotProps: {
-					htmlInput: {
-						min: 0,
-						max: 359,
-						step: 15
-					},
-					inputLabel: { shrink: !0 }
-				},
-				sx: { width: 104 }
-			})]
-		}), (0, W.jsxs)(w, {
-			sx: {
-				display: "flex",
-				flexDirection: "column",
-				gap: .5,
-				minWidth: 0
-			},
-			children: [(0, W.jsx)(A, {
-				variant: "caption",
-				component: "div",
-				sx: { color: "text.secondary" },
-				children: p("fill.gradientStops")
-			}), (0, W.jsx)(Te, {
-				stops: t.stops,
-				onChange: (e) => m({ stops: e }),
-				minStops: r,
-				maxStops: i,
-				schemeLookup: a,
-				recentColors: o,
-				darkMode: s,
-				disabled: c
-			})]
-		})]
-	});
-});
-Ee.displayName = "GradientEditor";
-var De = (e) => {
-	let t = e.getStops();
-	return {
-		gradientType: e.getGradientType(),
-		angle: e.getAngle() ?? 0,
-		stops: t.length >= 2 ? t.map((e) => ({
-			offset: e.getOffset(),
-			color: e.getColor().toString()
-		})) : [...Oe.stops]
-	};
-}, Oe = Object.freeze({
-	gradientType: g.GradientType.Linear,
-	angle: 90,
-	stops: [{
-		offset: 0,
-		color: "ffffff"
-	}, {
-		offset: 1,
-		color: "4472c4"
-	}]
-}), ke = (e, t, n) => () => {
-	t === e && n();
-}, Ae = (0, U.memo)((e) => {
-	let { label: t, value: n, min: r, max: i, step: a = 1, decimals: o = !1, width: s, disabled: c, onChange: l } = e, u = (0, U.useRef)(null), d = (e) => Math.max(r, Math.min(i, e)), f = (e) => {
-		let t = o ? parseFloat(e) : parseInt(e, 10);
-		return Number.isNaN(t) ? null : d(t);
-	};
-	return (0, W.jsx)(re, {
-		label: t,
-		value: String(n),
-		disabled: c,
-		hideAdornment: !0,
-		helperText: null,
-		propsInput: {
-			type: "number",
-			min: r,
-			max: i,
-			step: a
-		},
-		sx: {
-			width: s,
-			minWidth: 0,
-			"& input": { textAlign: "right" }
-		},
-		onChangeInput: (e) => {
-			let t = f(e);
-			t !== null && (u.current = t, l(t));
-		},
-		onDone: (e) => {
-			let t = f(e) ?? d(0), n = u.current;
-			u.current = null, n !== t && l(t);
-		}
-	});
-});
-Ae.displayName = "FormatNumberField";
-var je = {
-	display: "flex",
-	flexDirection: "column",
-	gap: 1.5,
-	minWidth: 0
-}, $ = (0, U.memo)((e) => {
-	let { label: t, children: n, sx: r, ...i } = e;
-	return (0, W.jsxs)(w, {
-		sx: {
-			display: "flex",
-			flexDirection: "column",
-			gap: .75,
-			minWidth: 0,
-			...r
-		},
-		...i,
-		children: [t ? (0, W.jsx)(A, {
-			variant: "caption",
-			component: "div",
-			sx: {
-				color: "text.secondary",
-				lineHeight: 1.4
-			},
-			children: t
-		}) : null, n]
-	});
-});
-$.displayName = "FormatSection";
-var Me = (0, U.memo)((e) => {
-	let { children: t, sx: n, ...r } = e;
-	return (0, W.jsx)(w, {
-		sx: {
-			display: "flex",
-			flexWrap: "wrap",
-			alignItems: "center",
-			gap: 1,
-			minWidth: 0,
-			...n
-		},
-		...r,
-		children: t
-	});
-});
-Me.displayName = "FormatRow";
-var Ne = (0, U.memo)((e) => {
-	let { children: t, sx: n, ...r } = e;
-	return (0, W.jsx)(w, {
-		sx: {
-			display: "flex",
-			alignItems: "center",
-			gap: .25,
-			flexWrap: "wrap",
-			minWidth: 0,
-			...n
-		},
-		...r,
-		children: t
-	});
-});
-Ne.displayName = "FormatButtonGroup";
-var Pe = g.BuiltInSheetPattern.Gray125, Fe = new v(y.Named.Transparent), Ie = (e) => ({
-	fill: e.style.getFill(),
-	styles: e.styles,
-	schemeLookup: e.schemeLookup,
-	darkMode: e.darkMode,
-	disabled: e.disabled,
-	createCell: e.createCell,
-	applyFill: (t, n) => e.applyStyle({ fill: t }, n)
-}), Le = (0, U.memo)((e) => {
-	let { selection: t, disabled: n, maxGradientStops: r, className: a, ...o } = e, s = f(), { fill: c, applyFill: d, createCell: p, schemeLookup: m, styles: _, darkMode: b } = t, x = n || t.disabled, S = u((e, t) => {
-		d(e.fill, t);
-	}, [d]), C = c.getType(), T = C === g.Type.None ? g.Type.Solid : C, E = C === g.Type.Pattern ? c : null, D = E?.getPatternType() ?? Pe, O = E ? fe(D, E.getForeground(), E.getBackground()) : null, k = (0, U.useMemo)(() => new v(y.Scheme.Tx1, m), [m]), A = O?.foreground ?? k, j = O?.background ?? new v(y.Named.Transparent, m), P = C === g.Type.Solid ? c.getColor() : null, F = u(() => _.recentColors(), [_]), [I] = l(["formatFillColor"]), L = I?.getContext(), R = L?.quickColor ?? null, te = u((e, t) => {
-		e && t && _.addRecentColor(e), L?.onColorSelect?.(e), e ? S({ fill: {
-			type: g.Type.Solid,
-			color: e.toString()
-		} }, i("op.setFillColor")) : S({ fill: { type: g.Type.None } }, i("op.setFillNone"));
-	}, [
-		S,
-		_,
-		L
-	]), z = u((e) => {
-		let t = e.patternType ?? D, n = fe(t, e.foreground ?? A.toString(), e.background ?? j.toString());
-		S({ fill: {
-			type: g.Type.Pattern,
-			patternType: t,
-			foreground: n.foreground,
-			background: n.background
-		} }, i("op.setFillPattern"));
-	}, [
-		S,
-		D,
-		A,
-		j
-	]), B = u((e) => {
-		S({ fill: {
-			type: g.Type.Gradient,
-			gradientType: e.gradientType,
-			angle: e.angle,
-			stops: e.stops.map((e) => ({
-				offset: e.offset,
-				color: e.color
-			}))
-		} }, i("op.setFillGradient"));
-	}, [S]), ne = u((e) => {
-		if (e !== T) switch (e) {
-			case g.Type.Solid:
-				S({ fill: {
-					type: g.Type.Solid,
-					color: (R ?? c.getColor())?.toString() ?? "ffffff"
-				} }, i("op.setFillSolid"));
-				break;
-			case g.Type.Pattern:
-				z({});
-				break;
-			case g.Type.Gradient: B(Oe);
-		}
-	}, [
-		T,
-		c,
-		R,
-		S,
-		z,
-		B
-	]), H = u(() => {
-		switch (C) {
-			case g.Type.Pattern:
-				z({});
-				break;
-			case g.Type.Gradient:
-				B(De(c));
-				break;
-			case g.Type.Solid:
-				S({ fill: {
-					type: g.Type.Solid,
-					color: c.getColor().toString()
-				} }, i("op.setFillColor"));
-				break;
-			default: S({ fill: { type: g.Type.None } }, i("op.setFillNone"));
-		}
-	}, [
-		C,
-		c,
-		S,
-		z,
-		B
-	]);
-	return (0, W.jsxs)(w, {
-		className: h("sxl-format-fill-panel", a),
-		sx: je,
-		...o,
-		children: [
-			(0, W.jsx)($, { children: (0, W.jsxs)(N, {
-				size: "small",
-				fullWidth: !0,
-				children: [(0, W.jsx)(M, {
-					shrink: !0,
-					children: s("fill.type")
-				}), (0, W.jsxs)(ee, {
-					label: s("fill.type"),
-					notched: !0,
-					disabled: x,
-					value: T,
-					onChange: (e) => ne(e.target.value),
-					children: [
-						(0, W.jsx)(V, {
-							value: g.Type.Solid,
-							onClick: ke(T, g.Type.Solid, H),
-							children: s("fill.typeSolid")
-						}),
-						(0, W.jsx)(V, {
-							value: g.Type.Pattern,
-							onClick: ke(T, g.Type.Pattern, H),
-							children: s("fill.typePattern")
-						}),
-						(0, W.jsx)(V, {
-							value: g.Type.Gradient,
-							onClick: ke(T, g.Type.Gradient, H),
-							children: s("fill.typeGradient")
-						}),
-						C === g.Type.Image ? (0, W.jsx)(V, {
-							value: g.Type.Image,
-							disabled: !0,
-							children: s("fill.typeImage")
-						}) : null
-					]
-				})]
-			}) }),
-			T === g.Type.Solid ? (0, W.jsx)($, {
-				label: s("fill.backgroundColor"),
-				children: (0, W.jsx)(Me, { children: (0, W.jsx)(J, {
-					icon: "fill.colored",
-					disabled: x,
-					darkMode: b,
-					compareRGB: !0,
-					selectedColor: P,
-					onSelectColor: te,
-					propsPanel: {
-						disableAlpha: !0,
-						autoColor: Fe,
-						autoColorLabelKey: i("color.noFill"),
-						autoColorPosition: G.End,
-						schemeLookup: m,
-						recentColors: F
-					}
-				}) })
-			}) : null,
-			C === g.Type.Pattern ? (0, W.jsxs)(W.Fragment, { children: [
-				(0, W.jsx)($, {
-					label: s("fill.patternStyle"),
-					children: (0, W.jsx)(Me, { children: (0, W.jsx)(ge, {
-						disabled: x,
-						darkMode: b,
-						selectedPattern: D,
-						foreground: A.toString(),
-						background: j.toString(),
-						createCell: p,
-						onSelectPattern: (e) => z({ patternType: e })
-					}) })
-				}),
-				(0, W.jsx)($, {
-					label: s("fill.patternForeground"),
-					children: (0, W.jsx)(Me, { children: (0, W.jsx)(J, {
-						disabled: x,
-						darkMode: b,
-						selectedColor: A,
-						onSelectColor: (e) => {
-							z({ foreground: (e ?? k).toString() });
-						},
-						propsPanel: {
-							disableAlpha: !0,
-							autoColor: k,
-							schemeLookup: m,
-							recentColors: F
-						}
-					}) })
-				}),
-				(0, W.jsx)($, {
-					label: s("fill.patternBackground"),
-					children: (0, W.jsx)(Me, { children: (0, W.jsx)(J, {
-						disabled: x,
-						darkMode: b,
-						selectedColor: j,
-						onSelectColor: (e) => {
-							z({ background: (e ?? Fe).toString() });
-						},
-						propsPanel: {
-							disableAlpha: !0,
-							autoColor: Fe,
-							autoColorLabelKey: i("color.noFill"),
-							schemeLookup: m,
-							recentColors: F
-						}
-					}) })
-				})
-			] }) : null,
-			C === g.Type.Gradient ? (0, W.jsx)($, { children: (0, W.jsx)(Ee, {
-				disabled: x,
-				maxStops: r,
-				darkMode: b,
-				schemeLookup: m,
-				recentColors: F,
-				value: De(c),
-				onChange: B
-			}) }) : null
-		]
-	});
-});
-Le.displayName = "FillPanel";
-export { fe as C, Me as E, oe as S, pe as T, K as _, je as a, Te as b, Oe as c, Ie as d, Le as f, ie as g, me as h, G as i, $ as l, de as m, ke as n, Ee as o, J as p, Ae as r, De as s, Ne as t, ge as u, se as v, he as w, le as x, Z as y };