@sheetxl/studio-vanilla 0.7.28-beta.4 → 0.8.0-beta.10

package/cdn/assets/DHugYwX4_ZyqGn-C.js

@@ -0,0 +1,1947 @@
+/**
+* @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 };