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

package/browser/esm/D8exjrado9TJrBp-.mjs

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