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

package/cdn/assets/DHugYwX4_ZyqGn-C.js

@@ -1,1947 +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 { t as e } from "./CIyaijfp6itgRpFM.js";
-import { t } from "./BeQ95CzwR65il0CK.js";
-import { _ as n, b as r, w as i } from "./CMxbiQ5J79M3n1tk.js";
-import { E as a, M as o, N as s, m as c } from "./BoFx07POTorOb5g-.js";
-import { a as l } from "./DOHh3pUXxMM09UY5.js";
-import { r as u } from "./hg8WYI0Yy4WPPPoP.js";
-import { D as d, V as f, ft as p, m, mt as h, tt as g, z as _ } from "./Cw7AJWd0S2sjRmr6.js";
-import { n as v, t as y } from "./mK8HcIZyXkOTvL6E.js";
-import { N as b, Q as x, T as S, a as C, i as w, j as T, t as E } from "./CbTN0q6XnYGJqyEp.js";
-import { m as D, t as O, y as ee } from "./VCiu_neIjCTg2NUa.js";
-import { t as k } from "./CTvPIYWTcjwlJeEA.js";
-import { A, I as j, S as M, T as N, V as P, _ as F, d as I, o as te } from "./D_pMOq6FdH4RSBLc.js";
-import { t as L } from "./BzbP4jaN13wC9aSi.js";
-import { Ft as R, L as z } from "./B27vTQlxbHhSQJx8.js";
-import { t as B } from "./B3NWCYKXucbHhOix.js";
-import { t as V } from "./DjdkGy-EI1kSo226.js";
-import { t as ne } from "./CU5cKipVT1X8Xz7F.js";
-import { t as H } from "./Cfg4Dtndwurxv9LM.js";
-import { r as re } from "./DCnWyVXikb_8Dat3.js";
-var U = re(e(), 1), W = t(), 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 = _.EmptyCssProperties, children: u, alphaWhite: d, alphaGrey: f, darkMode: p, alphaCheckSize: m = 7, ...g } = e;
-	if (!t) throw Error("a selectedColor is required");
-	let v = (0, U.useCallback)((e) => {
-		i?.(e), e.isDefaultPrevented() || (e.ctrlKey ? r?.(t.toRGBA()) : n?.(t.toRGBA()));
-	}, [
-		n,
-		r,
-		i,
-		t
-	]), y = (0, U.useCallback)((e) => {
-		o?.(e), e.isDefaultPrevented() || r?.(t.toRGBA());
-	}, [
-		r,
-		o,
-		t
-	]), b = (0, U.useCallback)((e) => {
-		s?.(e), e.isDefaultPrevented();
-	}, [r, s]), x = (0, U.useCallback)((e) => {
-		c?.(e), e.isDefaultPrevented() || r?.(t.toRGBA());
-	}, [
-		r,
-		c,
-		t
-	]), S = (0, U.useCallback)((e) => {
-		a?.(e), e.isDefaultPrevented() || e.keyCode === h.Enter && n?.(t.toRGBA());
-	}, [
-		n,
-		a,
-		t
-	]), C = (0, U.useMemo)(() => t.toRGBA().alpha === 1 ? null : (0, W.jsx)(H, {
-		size: m,
-		white: d,
-		grey: f,
-		style: {
-			position: "absolute",
-			width: "calc(100% - 1.5px)",
-			height: "calc(100% - 1.5px)",
-			top: "0.75px",
-			left: "0.75px"
-		}
-	}), [
-		d,
-		f,
-		t
-	]);
-	return (0, W.jsxs)("div", {
-		style: {
-			position: "absolute",
-			height: "100%",
-			width: "100%",
-			top: "0px",
-			left: "0px",
-			cursor: "pointer",
-			outline: "none",
-			...l
-		},
-		tabIndex: 0,
-		...g,
-		onClick: v,
-		onKeyDown: S,
-		onMouseOver: y,
-		onMouseLeave: b,
-		onFocus: x,
-		children: [C, (0, W.jsx)("div", {
-			style: {
-				position: "absolute",
-				top: "0px",
-				left: "0px",
-				height: "100%",
-				width: "100%",
-				background: t.toCSS(p)
-			},
-			children: u
-		})]
-	});
-}), oe = (0, U.memo)((e) => {
-	let { schemeColorLookup: t, selectedColor: n, previewColor: r, colorDef: i, onSelectColorDef: a, onPreviewColorDef: o, propsSwatch: l, defaultButtonSize: u = 24, isLarge: d = !1, compareRGB: f = !1, darkMode: p = !1, ...m } = e, h = new s({
-		val: i.definition.val,
-		adjs: i.definition.adjs
-	}, (e) => t(e)), g = f ? h.toRGBA().toString() : h.toString(), _ = n && (f ? n.toRGBA().toString() : n.toString()) === g, v = r && (f ? r.toRGBA().toString() : r.toString()) === g, y = [];
-	y.push({ [c.AdjustmentType.Inv]: !0 }), y.push({ [c.AdjustmentType.Alpha]: 100 });
-	let b = h.toRGBA().alpha === 0 && l?.alphaGrey ? l.alphaGrey : h.adjust(y).toRGBA(p).toString(), x = (0, U.useCallback)(() => {
-		a?.(i);
-	}, [a, i]), S = (0, U.useCallback)((e) => {
-		o?.(i);
-	}, [o, i]);
-	return (0, W.jsx)(C, {
-		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: u * (d ? 1.2 : 1) + "px",
-				height: u * (d ? 1.2 : 1) + "px",
-				position: "relative",
-				boxSizing: "border-box",
-				cursor: "pointer",
-				outline: "none"
-			},
-			...m,
-			children: (0, W.jsxs)(ae, {
-				selectedColor: h,
-				title: void 0,
-				onSelectColor: x,
-				onPreviewColor: S,
-				alphaCheckSize: d ? 9 : void 0,
-				darkMode: p,
-				...l,
-				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: _ ? "1" : "0"
-				} }), (0, W.jsx)("div", { style: {
-					position: "absolute",
-					width: .33 * u * (d ? 1.2 : 1) + "px",
-					height: .33 * u * (d ? 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: v ? "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 = _.EmptyCssProperties, compareRGB: u = !1, darkMode: d, propsSwatch: f, ...p } = e;
-	if (Array.isArray(i[0])) t = i;
-	else {
-		t = [];
-		for (let e = 0; e < i.length; e++) t.push([i[e]]);
-	}
-	let m = (0, U.useCallback)((e) => {
-		s?.(e);
-	}, [s]), h = (0, U.useCallback)((e) => {
-		c?.(e);
-	}, [c]), g = (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: m,
-					onPreviewColorDef: h,
-					propsSwatch: f,
-					compareRGB: u,
-					darkMode: d
-				}, n + " " + e));
-			}
-			let c = (0, W.jsx)(y, {
-				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,
-		m,
-		h
-	]), v = (0, U.useMemo)(() => n ? (0, W.jsx)(T, {
-		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)(y, {
-		style: { ...l },
-		children: [v, (0, W.jsx)(y, {
-			sx: {
-				display: "flex",
-				flexDirection: "row",
-				gap: "6px",
-				marginBottom: "14px",
-				flexWrap: "wrap",
-				justifyContent: "flex-start"
-			},
-			...p,
-			children: g
-		})]
-	});
-}), 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 c = new s({
-		val: o.definition.val,
-		adjs: o.definition.adjs
-	}, n), l = c.toString();
-	i?.set(l, c);
-	let u = c.toRGBA().toString();
-	a?.set(u, c);
-}, ce = f(i("studio:customColorPanel", () => import("./Bgbi7BFR3rN5qj51.js")).load, { renderError: (e) => (0, W.jsx)(F, { error: e }) }), le = (0, U.memo)((0, U.forwardRef)((e, t) => {
-	let { selectedColor: i = null, previewColor: a = e.selectedColor ?? null, recentColors: o, schemeLookup: c, disableAlpha: d = !1, previewDebounceTime: f = 100, initialPanelType: p, defaultButtonSize: h = 24, width: _, onElementLoad: x, onDone: C, onEyeDropStart: w, onEyeDropStop: E, onPreviewColor: D, onPreviewColorImmediate: O, onSelectColor: ee, autoColor: k, autoColorLabel: A, autoColorLabelKey: j, autoColorPosition: M = G.Start, compareRGB: N = !1, darkMode: F = !1, style: I, ...L } = e, z = g(), B = A ?? z(j ?? r("color.automatic")), V = a || i, ne = m(D ?? ((e) => {}), [D]), H = m(O ?? ((e) => {}), [O]), re = m(ee ?? ((e, t) => {}), [ee]), ae = m(w ?? (() => {}), [w]), se = m(E ?? (() => {}), [E]), [le, ue] = (0, U.useState)(!1), J = v(), Y = (0, U.useMemo)(() => c || s.getDefaultSchemeLookup(), [c]), X = (0, U.useMemo)(() => {
-		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), n = [];
-		q(z("color.scheme.bg1"), "bg1", Y, n, e, t), q(z("color.scheme.tx1"), "tx1", Y, n, e, t), q(z("color.scheme.bg2"), "bg2", Y, n, e, t), q(z("color.scheme.tx2"), "tx2", Y, n, e, t), q(z("color.scheme.accent", { n: 1 }), "accent1", Y, n, e, t), q(z("color.scheme.accent", { n: 2 }), "accent2", Y, n, e, t), q(z("color.scheme.accent", { n: 3 }), "accent3", Y, n, e, t), q(z("color.scheme.accent", { n: 4 }), "accent4", Y, n, e, t), q(z("color.scheme.accent", { n: 5 }), "accent5", Y, n, e, t), q(z("color.scheme.accent", { n: 6 }), "accent6", Y, n, e, t);
-		let r = l.buildPalette(n, Y, e, t), i = [];
-		if (q(z("color.standard.darkRed"), "C00000", Y, i, e, t), q(z("color.standard.red"), "FF0000", Y, i, e, t), q(z("color.standard.orange"), "FFC000", Y, i, e, t), q(z("color.standard.yellow"), "FFFF00", Y, i, e, t), q(z("color.standard.lightGreen"), "92D050", Y, i, e, t), q(z("color.standard.green"), "00B050", Y, i, e, t), q(z("color.standard.lightBlue"), "00B0F0", Y, i, e, t), q(z("color.standard.blue"), "0070C0", Y, i, e, t), q(z("color.standard.darkBlue"), "002060", Y, i, e, t), d ? q(z("color.standard.purpleFruit"), "7030A0", Y, i, e, t) : q(z("color.standard.transparent"), "00000000", Y, i, e, t), k) {
-			let t = k.toString();
-			e.set(t, k);
-		}
-		let a = /* @__PURE__ */ new Map(), s = typeof o == "function" ? o() : o, c = [];
-		for (let e = 0; s && e < s.length; e++) {
-			let t = s[e].toString();
-			a.set(t, s[e]), c.push({
-				description: z("color.recent", { n: e + 1 }),
-				definition: { val: s[e].toString() }
-			});
-		}
-		return {
-			primaryColors: n,
-			modifiedPresets: r,
-			standardColors: i,
-			recentColorsLimited: c,
-			mapAllPresets: e,
-			mapAllPresetsRGB: t,
-			mapRecent: a
-		};
-	}, [
-		Y,
-		o,
-		d,
-		k
-	]);
-	(0, U.useEffect)(() => {
-		x?.();
-	}, []);
-	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 (i) {
-			let e = i.toString(), t = X.mapAllPresets.get(e);
-			t ||= (e = i.toRGBA().toString(), X.mapAllPresetsRGB.get(e));
-			let n = X.mapRecent.get(e);
-			de(!t && !n);
-		}
-	}, [i, p]);
-	let pe = (0, U.useCallback)(n.debounce((e) => {
-		ne?.(e);
-	}, f), [ne, f]), [me, he] = (0, U.useState)();
-	(0, U.useEffect)(() => {
-		he(a || i);
-	}, [a, i]);
-	let ge = m((e) => {
-		H && (H(e), pe(e));
-	}, [H]), _e = m((e) => {
-		ge(e ? new s({
-			val: e.definition.val,
-			adjs: e.definition.adjs
-		}, Y) : null);
-	}, [Y]), ve = (0, U.useCallback)((e) => {
-		e.ctrlKey && de(!0);
-	}, []), ye = m((e) => {
-		let t = !1;
-		if (e) {
-			let n = e.toString();
-			t = !X.mapAllPresets.has(n);
-		}
-		re?.(e, t);
-	}, [re, X]), be = m((e) => {
-		let t = e ? new s({
-			val: e.definition.val,
-			adjs: e.definition.adjs
-		}, Y) : null;
-		Promise.resolve(C?.()).then(() => {
-			ye(t);
-		});
-	}, [Y, C]), xe = m((e) => {
-		ge(e ? new s(e, Y) : null);
-	}, [Y]), Se = (0, U.useMemo)(() => window.EyeDropper === void 0 ? (0, W.jsx)(W.Fragment, {}) : (0, W.jsx)(b, {
-		"aria-label": z("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 s(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)(u, { 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)(te, {})
-			}),
-			children: (0, W.jsx)(ce, {
-				style: e,
-				selectedColor: V ? V.toRGBA().toString() : "transparent",
-				onColorChange: xe,
-				disableAlpha: d
-			})
-		});
-	}, [Z, V]), Q = (0, U.useMemo)(() => ({
-		onClick: ve,
-		alphaGrey: J.palette.text.icon ?? J.palette.action.active
-	}), [ve, J]), we = (0, U.useMemo)(() => {
-		if (!k) return null;
-		let e = {
-			description: B,
-			definition: {
-				val: k.getVal(),
-				adjs: k.getAdjustments()
-			}
-		};
-		return (0, W.jsx)(W.Fragment, { children: (0, W.jsxs)(P, {
-			sx: {
-				display: "flex",
-				color: (e) => e.palette.text.secondary
-			},
-			onMouseOver: () => {
-				_e(null);
-			},
-			onClick: () => {
-				be(null);
-			},
-			children: [(0, W.jsx)(y, {
-				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: i === null ? k : i,
-					previewColor: a === null ? k : a,
-					defaultButtonSize: h,
-					isLarge: !0,
-					darkMode: F,
-					compareRGB: N,
-					propsSwatch: Q
-				})
-			}), (0, W.jsx)(T, {
-				noWrap: !0,
-				component: "div",
-				style: {
-					display: "flex",
-					flex: "1 1 100%",
-					marginLeft: "8px",
-					userSelect: "none"
-				},
-				children: B
-			})]
-		}) });
-	}, [
-		k,
-		B,
-		Y,
-		i,
-		a,
-		F,
-		N,
-		h,
-		Q
-	]);
-	return (0, W.jsxs)(y, {
-		ref: t,
-		sx: {
-			width: _,
-			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 && M === G.Start ? (0, W.jsxs)(W.Fragment, { children: [we, (0, W.jsx)(R, { style: {
-							marginTop: "2px",
-							marginBottom: "10px"
-						} })] }) : null,
-						(0, W.jsx)(K, {
-							title: z("color.themeColors"),
-							schemeColorLookup: Y,
-							colorDefs: X.primaryColors,
-							selectedColor: i,
-							previewColor: a === void 0 ? i : a,
-							propsSwatch: Q,
-							onPreviewColorDef: _e,
-							onSelectColorDef: be,
-							compareRGB: N,
-							darkMode: F
-						}),
-						(0, W.jsx)(K, {
-							schemeColorLookup: Y,
-							colorDefs: X.modifiedPresets,
-							selectedColor: i,
-							previewColor: a === void 0 ? i : a,
-							propsSwatch: Q,
-							onPreviewColorDef: _e,
-							onSelectColorDef: be,
-							compareRGB: N,
-							darkMode: F
-						}),
-						(0, W.jsx)(R, { style: { marginBottom: "10px" } }),
-						(0, W.jsx)(K, {
-							title: z("color.standardColors"),
-							schemeColorLookup: Y,
-							colorDefs: X.standardColors,
-							selectedColor: i,
-							previewColor: a === void 0 ? i : a,
-							propsSwatch: Q,
-							onPreviewColorDef: _e,
-							onSelectColorDef: be,
-							compareRGB: N,
-							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)(R, { style: { marginBottom: "10px" } }), (0, W.jsx)(K, {
-								title: z("color.recentColors"),
-								schemeColorLookup: Y,
-								colorDefs: X.recentColorsLimited,
-								selectedColor: i,
-								previewColor: a === void 0 ? i : a,
-								propsSwatch: Q,
-								onPreviewColorDef: _e,
-								onSelectColorDef: be,
-								compareRGB: N,
-								darkMode: F
-							})]
-						}),
-						we && M === G.End ? (0, W.jsxs)(W.Fragment, { children: [
-							(0, W.jsx)(R, { sx: {
-								marginTop: "2px",
-								marginBottom: "2px"
-							} }),
-							we,
-							(0, W.jsx)("div", { style: { marginBottom: "2px" } })
-						] }) : null
-					]
-				}), Ce]
-			}),
-			(0, W.jsx)(R, { 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)(S, {
-							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: z("color.custom")
-								}), (0, W.jsx)("span", {
-									style: {
-										gridArea: "1 / 1",
-										visibility: Z ? "visible" : "hidden"
-									},
-									children: z("color.preset")
-								})]
-							})
-						}), (0, W.jsx)(S, {
-							variant: "contained",
-							size: "small",
-							style: { minWidth: "75px" },
-							onClick: () => {
-								Promise.resolve(C?.()).then(() => {
-									ye(me ?? null);
-								});
-							},
-							children: z("color.done")
-						})]
-					})
-				]
-			})
-		]
-	});
-})), ue = (0, W.jsx)(u, { iconKey: "circle.colored" }), J = (0, U.memo)((0, U.forwardRef)((e, t) => {
-	let { selectedColor: n, quickColor: r, icon: i = ue, tooltip: a, label: o, onPreviewColor: s, onPreviewColorImmediate: c, onSelectColor: l, variant: d = I.Toolbar, propsPanel: f, shouldCloseFloatAll: p = !0, compareRGB: g = !1, darkMode: _ = !1, ...v } = e, b = m(s ?? ((e) => {}), [s]), x = m(c ?? ((e) => {}), [c]), S = m(l ?? ((e, t) => {}), [l]), [C, w] = (0, U.useState)(() => {}), [T, E] = (0, U.useState)(!1), D = r || (T ? C : void 0) || n || f?.autoColor, O = (0, U.useRef)(!1), ee = (0, U.useCallback)(() => {
-		E(!1);
-	}, []), k = m(() => {
-		w(n), E(!0);
-	}, [n]), A = m((e) => {
-		O.current || (w(e), b?.(e));
-	}, [b]), N = m((e) => {
-		O.current || (w(e), x?.(e));
-	}, [x]), P = m((e, t) => {
-		O.current || (w(void 0), S?.(e, t));
-	}, [S]), F = (0, U.useMemo)(() => {
-		let e = typeof i == "function" ? i() : i;
-		typeof e == "string" && (e = (0, W.jsx)(u, { iconKey: e }));
-		let t = (e) => e && e !== "none" ? e : void 0, n = t(D?.toCSS(_)) ?? t(f?.autoColor?.toCSS(_)) ?? "transparent";
-		return (0, W.jsx)(y, {
-			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,
-		f?.autoColor,
-		i,
-		_
-	]), te = m((e) => {
-		S?.(r ?? null, !1);
-	}, [S, r]), [L, R] = (0, U.useState)(!1), z = (0, U.useCallback)((e) => {
-		let { closeFloat: t, closeFloatAll: r } = e;
-		return (0, W.jsx)(le, {
-			...f,
-			selectedColor: n,
-			previewColor: C,
-			onDone: p ? r : t,
-			onKeyDown: (e) => {
-				e.which === h.Enter && (p ? r?.() : t?.());
-			},
-			onPreviewColorImmediate: N,
-			onPreviewColor: A,
-			onSelectColor: P,
-			onEyeDropStart: () => R(!0),
-			onEyeDropStop: () => R(!1),
-			compareRGB: g,
-			darkMode: _
-		});
-	}, [
-		n,
-		C,
-		p,
-		D,
-		f?.autoColor,
-		_
-	]), B = {
-		onQuickClick: r ? te : void 0,
-		createPopupPanel: z,
-		propsPopup: { propsPopper: { resizeOnOverflow: !1 } },
-		onPopupOpen: k,
-		onPopupClose: ee,
-		tooltip: a || o || "Color",
-		label: o,
-		icon: F,
-		...v
-	};
-	return d === I.Toolbar ? (0, W.jsx)(M, {
-		ref: t,
-		...B
-	}) : (0, W.jsx)(j, {
-		ref: t,
-		...B
-	});
-})), Y = 82;
-function X(e, t) {
-	if (!t) return "";
-	switch (t.style) {
-		case o.StrokeStyle.None: return e("border.style.none");
-		case o.StrokeStyle.Hair: return e("border.style.hair");
-		case o.StrokeStyle.Dotted: return e("border.style.dotted");
-		case o.StrokeStyle.Dashed: return e("border.style.dashed");
-		case o.StrokeStyle.DashDot: return e("border.style.dashDot");
-		case o.StrokeStyle.DashDotDot: return e("border.style.dashDotDot");
-		case o.StrokeStyle.Double: return e("border.style.double");
-		case o.StrokeStyle.Thin: return e("border.style.thin");
-		case o.StrokeStyle.Medium: return e("border.style.medium");
-		case o.StrokeStyle.MediumDashed: return e("border.style.mediumDashed");
-		case o.StrokeStyle.MediumDashDot: return e("border.style.mediumDashDot");
-		case o.StrokeStyle.MediumDashDotDot: return e("border.style.mediumDashDotDot");
-		case o.StrokeStyle.SlantDashDot: return e("border.style.slantDashDot");
-		case o.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)(x, {
-		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)(z, {
-			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: s, selectedStyle: c, onSelectStyle: l, showNone: u = !0, darkMode: d, sx: f, ...p } = e, _ = m(l ?? ((e) => {}), []), v = g(), b = (0, U.useCallback)((e) => {
-		let { popupContainer: t, closeFloat: n, ...a } = e, l = [], f = o.BuiltInDefinitionsArray;
-		for (let e = 0; e < f.length; e++) {
-			let t = f[e];
-			if (t.description === "None" && !u) continue;
-			let a = (0, W.jsx)(Z, {
-				styleColor: s,
-				length: Y,
-				width: t.width,
-				darkMode: d,
-				dashArray: t.pattern,
-				isDouble: t.description.toLowerCase().includes("double"),
-				isAngled: t.description.toLowerCase().includes("slant")
-			}), o = null;
-			o = r ? (0, W.jsxs)(W.Fragment, { children: [(0, W.jsx)(y, {
-				sx: { marginRight: "6px" },
-				children: X(v, t)
-			}), (0, W.jsxs)(y, {
-				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, l.push((0, W.jsx)(A, {
-				className: "border-stroke",
-				tabIndex: 0,
-				sx: {
-					height: "28px",
-					"& svg path.activeColor": { filter: E(4) },
-					paddingLeft: "16px"
-				},
-				propsTooltip: { description: r ? "" : X(v, t) },
-				icon: null,
-				disabled: i,
-				onMouseDown: (e) => e.preventDefault(),
-				onMouseUp: () => {
-					n?.(), _(t.style);
-				},
-				onKeyDown: (e) => {
-					e.which === h.Enter && n?.();
-				},
-				selected: t.style === c,
-				children: o
-			}, e));
-		}
-		return (0, W.jsx)(y, {
-			sx: {
-				display: "flex",
-				flexDirection: "column",
-				paddingTop: "4px",
-				paddingBottom: "4px"
-			},
-			children: l
-		});
-	}, [
-		i,
-		u,
-		s,
-		c,
-		d,
-		v
-	]), x = {
-		disabled: i,
-		icon: (0, U.useMemo)(() => {
-			let e, t = o.BuiltInDefinitions.get(c);
-			return t ? (e = t.description === "None" ? (0, W.jsx)(y, {
-				sx: { minWidth: `${Y}px` },
-				children: X(v, t)
-			}) : (0, W.jsx)(Z, {
-				styleColor: s,
-				length: Y,
-				width: t.width,
-				dashArray: t.pattern,
-				darkMode: d,
-				isDouble: t.description.toLowerCase().includes("double"),
-				isAngled: t.description.toLowerCase().includes("slant")
-			}), (0, W.jsx)(y, {
-				className: "border-stroke",
-				sx: {
-					paddingLeft: "12px",
-					marginLeft: "4px",
-					marginRight: "4px",
-					height: "24px",
-					display: "flex",
-					alignItems: "center",
-					"& svg path.activeColor": { filter: E() }
-				},
-				children: e
-			})) : null;
-		}, [
-			c,
-			s,
-			v
-		]),
-		tooltip: v("border.styleTooltip", { style: X(v, (0, U.useMemo)(() => o.BuiltInDefinitions.get(c), [c])) }),
-		sx: f,
-		createPopupPanel: b,
-		...p
-	};
-	return n === I.Toolbar ? (0, W.jsx)(M, { ...x }) : (0, W.jsx)(j, { ...x });
-}));
-function fe(e, t, n) {
-	return e === a.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: o = !1, className: s, style: c, ...l } = e, u = (0, U.useMemo)(() => {
-		let e = fe(t, n, r);
-		return i({ style: { fill: {
-			type: a.Type.Pattern,
-			patternType: t,
-			foreground: e.foreground ?? void 0,
-			background: e.background ?? void 0
-		} } })?.getStyle().getFill().toCSS(o) ?? {};
-	}, [
-		t,
-		n,
-		r,
-		i,
-		o
-	]);
-	return (0, W.jsx)("div", {
-		className: V("sxl-pattern-swatch", s),
-		style: {
-			width: "100%",
-			height: "100%",
-			...u,
-			...c
-		},
-		...l
-	});
-});
-pe.displayName = "PatternSwatch";
-var me = Object.freeze([
-	a.BuiltInSheetPattern.Solid,
-	a.BuiltInSheetPattern.DarkGray,
-	a.BuiltInSheetPattern.MediumGray,
-	a.BuiltInSheetPattern.LightGray,
-	a.BuiltInSheetPattern.Gray125,
-	a.BuiltInSheetPattern.Gray0625,
-	a.BuiltInSheetPattern.DarkHorizontal,
-	a.BuiltInSheetPattern.DarkVertical,
-	a.BuiltInSheetPattern.DarkDown,
-	a.BuiltInSheetPattern.DarkUp,
-	a.BuiltInSheetPattern.DarkGrid,
-	a.BuiltInSheetPattern.DarkTrellis,
-	a.BuiltInSheetPattern.LightHorizontal,
-	a.BuiltInSheetPattern.LightVertical,
-	a.BuiltInSheetPattern.LightDown,
-	a.BuiltInSheetPattern.LightUp,
-	a.BuiltInSheetPattern.LightGrid,
-	a.BuiltInSheetPattern.LightTrellis
-]);
-function he(e, t) {
-	switch (t) {
-		case a.BuiltInSheetPattern.None: return e("fill.pattern.none");
-		case a.BuiltInSheetPattern.Solid: return e("fill.pattern.solid");
-		case a.BuiltInSheetPattern.Gray0625: return e("fill.pattern.gray0625");
-		case a.BuiltInSheetPattern.Gray125: return e("fill.pattern.gray125");
-		case a.BuiltInSheetPattern.LightGray: return e("fill.pattern.lightGray");
-		case a.BuiltInSheetPattern.MediumGray: return e("fill.pattern.mediumGray");
-		case a.BuiltInSheetPattern.DarkGray: return e("fill.pattern.darkGray");
-		case a.BuiltInSheetPattern.LightHorizontal: return e("fill.pattern.lightHorizontal");
-		case a.BuiltInSheetPattern.LightVertical: return e("fill.pattern.lightVertical");
-		case a.BuiltInSheetPattern.LightDown: return e("fill.pattern.lightDown");
-		case a.BuiltInSheetPattern.LightUp: return e("fill.pattern.lightUp");
-		case a.BuiltInSheetPattern.LightGrid: return e("fill.pattern.lightGrid");
-		case a.BuiltInSheetPattern.LightTrellis: return e("fill.pattern.lightTrellis");
-		case a.BuiltInSheetPattern.DarkHorizontal: return e("fill.pattern.darkHorizontal");
-		case a.BuiltInSheetPattern.DarkVertical: return e("fill.pattern.darkVertical");
-		case a.BuiltInSheetPattern.DarkDown: return e("fill.pattern.darkDown");
-		case a.BuiltInSheetPattern.DarkUp: return e("fill.pattern.darkUp");
-		case a.BuiltInSheetPattern.DarkGrid: return e("fill.pattern.darkGrid");
-		case a.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 = g(), u = m(i ?? ((e) => {}), [i]), d = (0, U.useCallback)((e) => {
-		let { closeFloat: i } = e;
-		return (0, W.jsx)(y, {
-			sx: {
-				display: "grid",
-				gridTemplateColumns: "repeat(6, 34px)",
-				gap: "4px",
-				padding: "8px"
-			},
-			children: me.map((e) => (0, W.jsx)(w, {
-				label: he(l, e),
-				children: (0, W.jsx)(y, {
-					role: "button",
-					tabIndex: 0,
-					"aria-label": he(l, e),
-					"aria-pressed": e === t,
-					onMouseDown: (e) => e.preventDefault(),
-					onMouseUp: () => {
-						i?.(), u(e);
-					},
-					onKeyDown: (t) => {
-						t.key !== "Enter" && t.key !== " " || (t.preventDefault(), i?.(), u(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,
-		u,
-		l
-	]);
-	return (0, W.jsx)(M, {
-		disabled: s,
-		tooltip: l("fill.patternTooltip", { pattern: he(l, t) }),
-		createPopupPanel: d,
-		icon: (0, W.jsx)(y, {
-			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 s ? e : new s(e, t)).toCSS(n);
-	} catch {
-		return "transparent";
-	}
-}, xe = (e, t, n) => {
-	try {
-		let r = new s(e, n).toRGBA(), i = new s(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 = g(), [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)(k, {
-		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)(B, {
-				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: o, disabled: c, canRemove: l, rampRef: f, onDrag: p, onMove: h, onPreviewColor: _, onChangeColor: b, onRemove: x, onOpenChange: S } = e, w = g(), T = v(), E = (0, U.useMemo)(() => new s(n.color, i), [n.color, i]), [D, O] = (0, U.useState)(void 0), [ee, k] = (0, U.useState)(null), [A, j] = (0, U.useState)(!1), [M, P] = (0, U.useState)(!1), [F, I] = (0, U.useState)(!1), [te, L] = (0, U.useState)(!1), R = (0, U.useRef)(null), z = (0, U.useRef)(!1), B = m((e) => {
-		O(e), _(t, e ?? null);
-	}, [t, _]), ne = m((e) => {
-		h(t, e / 100);
-	}, [t, h]), H = Math.round(100 * r), re = be(D ?? E, i, o), ie = (0, U.useCallback)((e) => {
-		let { closeFloat: n } = e;
-		return (0, W.jsxs)(y, {
-			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: o,
-				onDone: n,
-				onPreviewColor: B,
-				onPreviewColorImmediate: B,
-				onSelectColor: (e) => {
-					B(void 0), e && b(t, e);
-				}
-			}), (0, W.jsx)(y, {
-				sx: {
-					display: "flex",
-					alignItems: "center",
-					gap: 1,
-					paddingX: 1,
-					paddingBottom: 1
-				},
-				children: (0, W.jsx)(Q, {
-					percent: H,
-					disabled: c,
-					inputRef: R,
-					onChange: ne
-				})
-			})]
-		});
-	}, [
-		E,
-		D,
-		H,
-		t,
-		i,
-		a,
-		o,
-		c,
-		B,
-		b,
-		ne
-	]), G = d({
-		anchor: ee,
-		label: "gradient-stop",
-		createPopupPanel: ie,
-		propsPopper: _e,
-		onOpen: () => {
-			j(!0), S(t, !0), z.current && (z.current = !1, requestAnimationFrame(() => R.current?.focus()));
-		},
-		onClose: () => {
-			j(!1), S(t, !1), B(void 0);
-		}
-	}), ae = m((e) => {
-		z.current = e, G.reference.open(0);
-	}, [G]), oe = m(() => {
-		A ? G.reference.close(0) : ae(!1);
-	}, [
-		A,
-		G,
-		ae
-	]), K = (0, U.useRef)(null), se = m((e) => {
-		c || e.button !== 0 || (e.currentTarget.setPointerCapture(e.pointerId), K.current = {
-			pointerId: e.pointerId,
-			startX: e.clientX,
-			startOffset: r,
-			moved: !1,
-			offset: r
-		});
-	}, [c, r]), q = m((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), L(!1), G.reference.close(0);
-		}
-		let i = f.current?.getBoundingClientRect().width ?? 0;
-		n.offset = i > 0 ? ye(n.startOffset + r / i) : n.startOffset, p(t, n.offset, !1);
-	}, [
-		t,
-		f,
-		G,
-		p
-	]), ce = m((e) => {
-		let n = K.current;
-		if (n && n.pointerId === e.pointerId) {
-			if (K.current = null, n.moved) return P(!1), p(t, n.offset, !0), void h(t, n.offset);
-			oe();
-		}
-	}, [
-		t,
-		p,
-		h,
-		oe
-	]), ue = m((e) => {
-		let n = K.current;
-		n && n.pointerId === e.pointerId && (K.current = null, n.moved && (P(!1), p(t, n.startOffset, !0)));
-	}, [t, p]), J = m((e) => {
-		if (c) return;
-		let n = e.shiftKey ? .1 : .01;
-		switch (e.key) {
-			case "ArrowLeft":
-				h(t, ye(r - n));
-				break;
-			case "ArrowRight":
-				h(t, ye(r + n));
-				break;
-			case "Home":
-				h(t, 0);
-				break;
-			case "End":
-				h(t, 1);
-				break;
-			case "Delete":
-			case "Backspace":
-				l && x(t);
-				break;
-			case "Enter":
-			case " ":
-				ae(!0);
-				break;
-			case "Escape":
-				if (!A) return;
-				G.reference.close(0);
-				break;
-			default: return;
-		}
-		e.preventDefault();
-	}, [
-		c,
-		t,
-		r,
-		l,
-		A,
-		G,
-		ae,
-		h,
-		x
-	]), Y = A || M || F, X = !c && !M && !A && te, Z = (0, W.jsxs)(y, {
-		className: "sxl-gradient-stop-toolbar",
-		onPointerDown: (e) => {
-			e.stopPropagation();
-		},
-		sx: {
-			display: "flex",
-			alignItems: "center",
-			gap: .25
-		},
-		children: [(0, W.jsx)(N, {
-			tabIndex: -1,
-			propsTooltip: {
-				label: w("fill.gradientStopColor"),
-				simple: !0
-			},
-			icon: (0, W.jsx)(y, {
-				className: "color-wrapper",
-				sx: {
-					lineHeight: 0,
-					"& .activeColor": { fill: re }
-				},
-				children: (0, W.jsx)(u, { iconKey: "circle.colored" })
-			}),
-			onClick: () => {
-				L(!1), oe();
-			}
-		}), (0, W.jsx)(N, {
-			tabIndex: -1,
-			disabled: !l,
-			propsTooltip: {
-				label: w("fill.gradientRemoveStop"),
-				simple: !0
-			},
-			icon: (0, W.jsx)(u, { iconKey: "Close" }),
-			onClick: () => x(t)
-		})]
-	});
-	return (0, W.jsxs)(W.Fragment, { children: [(0, W.jsx)(C, {
-		title: Z,
-		open: X,
-		onOpen: () => L(!0),
-		onClose: () => L(!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)(y, {
-			ref: k,
-			role: "button",
-			tabIndex: c ? -1 : 0,
-			"aria-label": w("fill.gradientStop", { position: H }),
-			"aria-disabled": c || void 0,
-			className: V("sxl-gradient-stop", {
-				"sxl-gradient-stop-open": A,
-				"sxl-gradient-stop-dragging": M
-			}),
-			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: M ? "none" : "left 120ms ease-out",
-				lineHeight: 0,
-				cursor: c ? "default" : M ? "grabbing" : "grab",
-				touchAction: "none",
-				outline: "none",
-				zIndex: +!!M,
-				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: o, darkMode: s = !1, disabled: c = !1, className: l, ...d } = e, f = g(), p = (0, U.useRef)(null), h = (0, U.useRef)({
-		known: [],
-		next: 1
-	}), _ = (0, U.useMemo)(() => {
-		let e = h.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]), [v, b] = (0, U.useState)(null), [x, S] = (0, U.useState)(null), [C, w] = (0, U.useState)(null);
-	(0, U.useLayoutEffect)(() => {
-		b((e) => {
-			if (!e?.released) return e;
-			let n = _.indexOf(e.key);
-			return n >= 0 && t[n].offset === e.offset ? null : e;
-		});
-	}, [t, _]), (0, U.useLayoutEffect)(() => {
-		if (!v?.released) return;
-		let e = window.setTimeout(() => b((e) => e?.released ? null : e), 1e3);
-		return () => window.clearTimeout(e);
-	}, [v]);
-	let T = !c && t.length < i, E = !c && t.length > r, D = m((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 = h.current;
-		i.known = [r, ...i.known].slice(0, 3), n(r.stops.slice());
-	}, [n]), O = m(() => t.map((e, t) => ({
-		stop: e,
-		key: _[t]
-	})), [t, _]), ee = m((e, t, n) => {
-		b({
-			key: _[e],
-			offset: t,
-			released: n
-		});
-	}, [_]), k = m((e, t) => {
-		D(O().map((n, r) => r === e ? {
-			...n,
-			stop: {
-				...n.stop,
-				offset: t
-			}
-		} : n));
-	}, [O, D]), A = m((e, t) => {
-		S(t ? {
-			key: _[e],
-			color: t
-		} : null);
-	}, [_]), j = m((e, t) => {
-		let n = _[e];
-		w((e) => t ? n : e === n ? null : e);
-	}, [_]), M = m((e, t) => {
-		D(O().map((n, r) => r === e ? {
-			...n,
-			stop: {
-				...n.stop,
-				color: t.toString()
-			}
-		} : n));
-	}, [O, D]), P = m((e) => {
-		t.length <= r || D(O().filter((t, n) => n !== e));
-	}, [
-		t,
-		r,
-		O,
-		D
-	]), F = m((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];
-		D([...O(), {
-			stop: {
-				offset: r,
-				color: xe(o.color, s.color, a)
-			},
-			key: h.current.next++
-		}]);
-	}, [
-		t,
-		i,
-		a,
-		O,
-		D
-	]), I = m((e) => {
-		if (!T || 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));
-	}, [
-		T,
-		C,
-		F
-	]), te = (0, U.useMemo)(() => {
-		let e = t.map((e, t) => ({
-			offset: v?.key === _[t] ? v.offset : e.offset,
-			css: be(x?.key === _[t] ? x.color : e.color, a, s)
-		}));
-		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,
-		x,
-		a,
-		s
-	]);
-	return (0, W.jsxs)(y, {
-		className: V("sxl-gradient-stops", l),
-		sx: {
-			display: "flex",
-			alignItems: "flex-start",
-			gap: .5,
-			minWidth: 0
-		},
-		...d,
-		children: [(0, W.jsx)(y, {
-			sx: {
-				flex: 1,
-				minWidth: 0,
-				paddingX: "7px",
-				paddingBottom: "15px"
-			},
-			children: (0, W.jsx)(y, {
-				ref: p,
-				className: "sxl-gradient-stops-ramp",
-				onPointerDown: I,
-				sx: {
-					position: "relative",
-					height: 18,
-					borderRadius: 1,
-					border: (e) => `1px solid ${e.palette.divider}`,
-					backgroundImage: te,
-					backgroundRepeat: "no-repeat",
-					cursor: T ? "copy" : "default",
-					opacity: c ? .5 : 1
-				},
-				children: t.map((e, t) => (0, W.jsx)(we, {
-					index: t,
-					stop: e,
-					offset: v?.key === _[t] ? v.offset : e.offset,
-					schemeLookup: a,
-					recentColors: o,
-					darkMode: s,
-					disabled: c,
-					canRemove: E,
-					rampRef: p,
-					onDrag: ee,
-					onMove: k,
-					onPreviewColor: A,
-					onChangeColor: M,
-					onRemove: P,
-					onOpenChange: j
-				}, _[t]))
-			})
-		}), (0, W.jsx)(N, {
-			disabled: !T,
-			propsTooltip: {
-				label: f("fill.gradientAddStop"),
-				simple: !0
-			},
-			icon: (0, W.jsx)(u, { 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: o, recentColors: s, darkMode: c = !1, disabled: l = !1, className: u, ...d } = e, f = g(), p = m((e) => {
-		n({
-			...t,
-			...e
-		});
-	}, [t, n]), h = t.gradientType === a.GradientType.Linear;
-	return (0, W.jsxs)(y, {
-		className: V("sxl-gradient-editor", u),
-		sx: {
-			display: "flex",
-			flexDirection: "column",
-			gap: 1.25,
-			minWidth: 0
-		},
-		...d,
-		children: [(0, W.jsxs)(y, {
-			sx: {
-				display: "flex",
-				flexWrap: "wrap",
-				gap: 1,
-				alignItems: "center"
-			},
-			children: [(0, W.jsxs)(ee, {
-				size: "small",
-				sx: {
-					minWidth: 132,
-					flex: "1 1 132px"
-				},
-				children: [(0, W.jsx)(D, {
-					shrink: !0,
-					children: f("fill.gradientStyle")
-				}), (0, W.jsxs)(O, {
-					label: f("fill.gradientStyle"),
-					notched: !0,
-					disabled: l,
-					value: t.gradientType,
-					onChange: (e) => p({ gradientType: e.target.value }),
-					children: [(0, W.jsx)(L, {
-						value: a.GradientType.Linear,
-						children: f("fill.gradientLinear")
-					}), (0, W.jsx)(L, {
-						value: a.GradientType.Path,
-						children: f("fill.gradientRadial")
-					})]
-				})]
-			}), (0, W.jsx)(k, {
-				label: f("fill.gradientAngle"),
-				type: "number",
-				size: "small",
-				disabled: l || !h,
-				value: t.angle,
-				onChange: (e) => {
-					let t = parseInt(e.target.value, 10) || 0;
-					p({ angle: (t % 360 + 360) % 360 });
-				},
-				slotProps: {
-					htmlInput: {
-						min: 0,
-						max: 359,
-						step: 15
-					},
-					inputLabel: { shrink: !0 }
-				},
-				sx: { width: 104 }
-			})]
-		}), (0, W.jsxs)(y, {
-			sx: {
-				display: "flex",
-				flexDirection: "column",
-				gap: .5,
-				minWidth: 0
-			},
-			children: [(0, W.jsx)(T, {
-				variant: "caption",
-				component: "div",
-				sx: { color: "text.secondary" },
-				children: f("fill.gradientStops")
-			}), (0, W.jsx)(Te, {
-				stops: t.stops,
-				onChange: (e) => p({ stops: e }),
-				minStops: r,
-				maxStops: i,
-				schemeLookup: o,
-				recentColors: s,
-				darkMode: c,
-				disabled: l
-			})]
-		})]
-	});
-});
-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: a.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)(ne, {
-		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)(y, {
-		sx: {
-			display: "flex",
-			flexDirection: "column",
-			gap: .75,
-			minWidth: 0,
-			...r
-		},
-		...i,
-		children: [t ? (0, W.jsx)(T, {
-			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)(y, {
-		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)(y, {
-		sx: {
-			display: "flex",
-			alignItems: "center",
-			gap: .25,
-			flexWrap: "wrap",
-			minWidth: 0,
-			...n
-		},
-		...r,
-		children: t
-	});
-});
-Ne.displayName = "FormatButtonGroup";
-var Pe = a.BuiltInSheetPattern.Gray125, Fe = new s(c.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: i, className: o, ...l } = e, u = g(), { fill: d, applyFill: f, createCell: h, schemeLookup: _, styles: v, darkMode: b } = t, x = n || t.disabled, S = m((e, t) => {
-		f(e.fill, t);
-	}, [f]), C = d.getType(), w = C === a.Type.None ? a.Type.Solid : C, T = C === a.Type.Pattern ? d : null, E = T?.getPatternType() ?? Pe, k = T ? fe(E, T.getForeground(), T.getBackground()) : null, A = (0, U.useMemo)(() => new s(c.Scheme.Tx1, _), [_]), j = k?.foreground ?? A, M = k?.background ?? new s(c.Named.Transparent, _), N = C === a.Type.Solid ? d.getColor() : null, P = m(() => v.recentColors(), [v]), [F] = p(["formatFillColor"]), I = F?.getContext(), te = I?.quickColor ?? null, R = m((e, t) => {
-		e && t && v.addRecentColor(e), I?.onColorSelect?.(e), e ? S({ fill: {
-			type: a.Type.Solid,
-			color: e.toString()
-		} }, r("op.setFillColor")) : S({ fill: { type: a.Type.None } }, r("op.setFillNone"));
-	}, [
-		S,
-		v,
-		I
-	]), z = m((e) => {
-		let t = e.patternType ?? E, n = fe(t, e.foreground ?? j.toString(), e.background ?? M.toString());
-		S({ fill: {
-			type: a.Type.Pattern,
-			patternType: t,
-			foreground: n.foreground,
-			background: n.background
-		} }, r("op.setFillPattern"));
-	}, [
-		S,
-		E,
-		j,
-		M
-	]), B = m((e) => {
-		S({ fill: {
-			type: a.Type.Gradient,
-			gradientType: e.gradientType,
-			angle: e.angle,
-			stops: e.stops.map((e) => ({
-				offset: e.offset,
-				color: e.color
-			}))
-		} }, r("op.setFillGradient"));
-	}, [S]), ne = m((e) => {
-		if (e !== w) switch (e) {
-			case a.Type.Solid:
-				S({ fill: {
-					type: a.Type.Solid,
-					color: (te ?? d.getColor())?.toString() ?? "ffffff"
-				} }, r("op.setFillSolid"));
-				break;
-			case a.Type.Pattern:
-				z({});
-				break;
-			case a.Type.Gradient: B(Oe);
-		}
-	}, [
-		w,
-		d,
-		te,
-		S,
-		z,
-		B
-	]), H = m(() => {
-		switch (C) {
-			case a.Type.Pattern:
-				z({});
-				break;
-			case a.Type.Gradient:
-				B(De(d));
-				break;
-			case a.Type.Solid:
-				S({ fill: {
-					type: a.Type.Solid,
-					color: d.getColor().toString()
-				} }, r("op.setFillColor"));
-				break;
-			default: S({ fill: { type: a.Type.None } }, r("op.setFillNone"));
-		}
-	}, [
-		C,
-		d,
-		S,
-		z,
-		B
-	]);
-	return (0, W.jsxs)(y, {
-		className: V("sxl-format-fill-panel", o),
-		sx: je,
-		...l,
-		children: [
-			(0, W.jsx)($, { children: (0, W.jsxs)(ee, {
-				size: "small",
-				fullWidth: !0,
-				children: [(0, W.jsx)(D, {
-					shrink: !0,
-					children: u("fill.type")
-				}), (0, W.jsxs)(O, {
-					label: u("fill.type"),
-					notched: !0,
-					disabled: x,
-					value: w,
-					onChange: (e) => ne(e.target.value),
-					children: [
-						(0, W.jsx)(L, {
-							value: a.Type.Solid,
-							onClick: ke(w, a.Type.Solid, H),
-							children: u("fill.typeSolid")
-						}),
-						(0, W.jsx)(L, {
-							value: a.Type.Pattern,
-							onClick: ke(w, a.Type.Pattern, H),
-							children: u("fill.typePattern")
-						}),
-						(0, W.jsx)(L, {
-							value: a.Type.Gradient,
-							onClick: ke(w, a.Type.Gradient, H),
-							children: u("fill.typeGradient")
-						}),
-						C === a.Type.Image ? (0, W.jsx)(L, {
-							value: a.Type.Image,
-							disabled: !0,
-							children: u("fill.typeImage")
-						}) : null
-					]
-				})]
-			}) }),
-			w === a.Type.Solid ? (0, W.jsx)($, {
-				label: u("fill.backgroundColor"),
-				children: (0, W.jsx)(Me, { children: (0, W.jsx)(J, {
-					icon: "fill.colored",
-					disabled: x,
-					darkMode: b,
-					compareRGB: !0,
-					selectedColor: N,
-					onSelectColor: R,
-					propsPanel: {
-						disableAlpha: !0,
-						autoColor: Fe,
-						autoColorLabelKey: r("color.noFill"),
-						autoColorPosition: G.End,
-						schemeLookup: _,
-						recentColors: P
-					}
-				}) })
-			}) : null,
-			C === a.Type.Pattern ? (0, W.jsxs)(W.Fragment, { children: [
-				(0, W.jsx)($, {
-					label: u("fill.patternStyle"),
-					children: (0, W.jsx)(Me, { children: (0, W.jsx)(ge, {
-						disabled: x,
-						darkMode: b,
-						selectedPattern: E,
-						foreground: j.toString(),
-						background: M.toString(),
-						createCell: h,
-						onSelectPattern: (e) => z({ patternType: e })
-					}) })
-				}),
-				(0, W.jsx)($, {
-					label: u("fill.patternForeground"),
-					children: (0, W.jsx)(Me, { children: (0, W.jsx)(J, {
-						disabled: x,
-						darkMode: b,
-						selectedColor: j,
-						onSelectColor: (e) => {
-							z({ foreground: (e ?? A).toString() });
-						},
-						propsPanel: {
-							disableAlpha: !0,
-							autoColor: A,
-							schemeLookup: _,
-							recentColors: P
-						}
-					}) })
-				}),
-				(0, W.jsx)($, {
-					label: u("fill.patternBackground"),
-					children: (0, W.jsx)(Me, { children: (0, W.jsx)(J, {
-						disabled: x,
-						darkMode: b,
-						selectedColor: M,
-						onSelectColor: (e) => {
-							z({ background: (e ?? Fe).toString() });
-						},
-						propsPanel: {
-							disableAlpha: !0,
-							autoColor: Fe,
-							autoColorLabelKey: r("color.noFill"),
-							schemeLookup: _,
-							recentColors: P
-						}
-					}) })
-				})
-			] }) : null,
-			C === a.Type.Gradient ? (0, W.jsx)($, { children: (0, W.jsx)(Ee, {
-				disabled: x,
-				maxStops: i,
-				darkMode: b,
-				schemeLookup: _,
-				recentColors: P,
-				value: De(d),
-				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 };