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

package/browser/esm/CX1VWdQjKSXDMfs9.mjs

@@ -0,0 +1,1240 @@
+/**
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.12
+*
+* (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 "./Cf_c9xyOrFxlsKq6.mjs";
+import { i as t, r as n } from "./D29bSsh1Lz8891Rs.mjs";
+import { A as r, D as i, m as a } from "./Cif0315haNLmyMj-.mjs";
+import { r as o } from "./BoYTs2k2yWAKW5LM.mjs";
+import { Ft as s, I as c, Tt as l, U as u, dt as d, mt as f, pt as p, t as m, w as h, z as g } from "./B1mhVM8eRIyuL-VB.mjs";
+import { t as _ } from "./B34vCv1wwb2Fh4ml.mjs";
+import { bt as v, t as y, x as b } from "./Dac2pa3EUXg26xcV.mjs";
+import { B as x } from "./DmdChrGkm5oufbRE.mjs";
+import { g as S } from "./dt7TM5WM9kIfxkSp.mjs";
+import { At as C, C as w, Lt as T, Nt as E, at as D, c as O, et as k, tt as A, u as j, v as M } from "./COPR5sXYEAeM73Ep.mjs";
+import { n as ee, t as N } from "./DAOjpr33PSwrKpc0.mjs";
+import { $ as P, E as te, M as F, P as ne, c as I, f as re, m as ie, o as ae } from "./DJpfJorMrLhI9gOT.mjs";
+import { D as oe, E as L, H as se, L as ce, O as le, S as R, T as z, f as ue, g as B, j as V, l as H, y as U } from "./_9nyq5XWoIo-JhAp.mjs";
+import { t as W } from "./DAAcSj6LxLO-O2io.mjs";
+import { c as de, i as fe, n as pe, o as me, r as he, t as G } from "./BqPEItNoP2iZ2lkz.mjs";
+var K = e(t(), 1), q = e(n(), 1), ge = {
+	Preset: "preset",
+	Custom: "custom"
+}, _e = {
+	Start: "start",
+	End: "end"
+}, ve = (0, K.memo)((e) => {
+	let { selectedColor: t, onSelectColor: n, onPreviewColor: r, onClick: i, onKeyDown: a, onMouseOver: o, onMouseLeave: s, onFocus: c, style: u = f.EmptyCssProperties, children: d, alphaWhite: p, alphaGrey: m, darkMode: h, alphaCheckSize: g = 7, ...v } = e;
+	if (!t) throw Error("a selectedColor is required");
+	let y = (0, K.useCallback)((e) => {
+		i?.(e), e.isDefaultPrevented() || (e.ctrlKey ? r?.(t.toRGBA()) : n?.(t.toRGBA()));
+	}, [
+		n,
+		r,
+		i,
+		t
+	]), b = (0, K.useCallback)((e) => {
+		o?.(e), e.isDefaultPrevented() || r?.(t.toRGBA());
+	}, [
+		r,
+		o,
+		t
+	]), x = (0, K.useCallback)((e) => {
+		s?.(e), e.isDefaultPrevented();
+	}, [r, s]), S = (0, K.useCallback)((e) => {
+		c?.(e), e.isDefaultPrevented() || r?.(t.toRGBA());
+	}, [
+		r,
+		c,
+		t
+	]), C = (0, K.useCallback)((e) => {
+		a?.(e), e.isDefaultPrevented() || e.keyCode === l.Enter && n?.(t.toRGBA());
+	}, [
+		n,
+		a,
+		t
+	]), w = (0, K.useMemo)(() => t.toRGBA().alpha === 1 ? null : (0, q.jsx)(_, {
+		size: g,
+		white: p,
+		grey: m,
+		style: {
+			position: "absolute",
+			width: "calc(100% - 1.5px)",
+			height: "calc(100% - 1.5px)",
+			top: "0.75px",
+			left: "0.75px"
+		}
+	}), [
+		p,
+		m,
+		t
+	]);
+	return (0, q.jsxs)("div", {
+		style: {
+			position: "absolute",
+			height: "100%",
+			width: "100%",
+			top: "0px",
+			left: "0px",
+			cursor: "pointer",
+			outline: "none",
+			...u
+		},
+		tabIndex: 0,
+		...v,
+		onClick: y,
+		onKeyDown: C,
+		onMouseOver: b,
+		onMouseLeave: x,
+		onFocus: S,
+		children: [w, (0, q.jsx)("div", {
+			style: {
+				position: "absolute",
+				top: "0px",
+				left: "0px",
+				height: "100%",
+				width: "100%",
+				background: t.toCSS(h)
+			},
+			children: d
+		})]
+	});
+}), ye = (0, K.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 y({
+		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({ [b.AdjustmentType.Inv]: !0 }), _.push({ [b.AdjustmentType.Alpha]: 100 });
+	let v = p.toRGBA().alpha === 0 && s?.alphaGrey ? s.alphaGrey : p.adjust(_).toRGBA(d).toString(), x = (0, K.useCallback)(() => {
+		a?.(i);
+	}, [a, i]), S = (0, K.useCallback)((e) => {
+		o?.(i);
+	}, [o, i]);
+	return (0, q.jsx)(re, {
+		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, q.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, q.jsxs)(ve, {
+				selectedColor: p,
+				title: void 0,
+				onSelectColor: x,
+				onPreviewColor: S,
+				alphaCheckSize: l ? 9 : void 0,
+				darkMode: d,
+				...s,
+				children: [(0, q.jsx)("div", { style: {
+					position: "absolute",
+					width: "100%",
+					height: "100%",
+					top: "0px",
+					left: "0px",
+					pointerEvents: "none",
+					borderColor: v,
+					borderWidth: "2px",
+					borderStyle: "solid",
+					boxSizing: "border-box",
+					opacity: h ? "1" : "0"
+				} }), (0, q.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: v,
+					borderRadius: "50%",
+					opacity: g ? "1" : "0"
+				} })]
+			})
+		})
+	});
+}), J = (0, K.memo)((e) => {
+	let t, { title: n, schemeColorLookup: r, colorDefs: i, selectedColor: a, previewColor: o, onSelectColorDef: s, onPreviewColorDef: c, style: l = f.EmptyCssProperties, compareRGB: u = !1, darkMode: d, propsSwatch: p, ...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, K.useCallback)((e) => {
+		s?.(e);
+	}, [s]), g = (0, K.useCallback)((e) => {
+		c?.(e);
+	}, [c]), _ = (0, K.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, q.jsx)(ye, {
+					schemeColorLookup: r,
+					colorDef: t,
+					selectedColor: a,
+					previewColor: o,
+					onSelectColorDef: h,
+					onPreviewColorDef: g,
+					propsSwatch: p,
+					compareRGB: u,
+					darkMode: d
+				}, n + " " + e));
+			}
+			let c = (0, q.jsx)(N, {
+				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, K.useMemo)(() => n ? (0, q.jsx)(F, {
+		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, q.jsxs)(N, {
+		style: { ...l },
+		children: [v, (0, q.jsx)(N, {
+			sx: {
+				display: "flex",
+				flexDirection: "row",
+				gap: "6px",
+				marginBottom: "14px",
+				flexWrap: "wrap",
+				justifyContent: "flex-start"
+			},
+			...m,
+			children: _
+		})]
+	});
+}), be = (e, t) => ({
+	description: e,
+	definition: {
+		val: t,
+		adjs: []
+	}
+}), Y = (e, t, n, r, i, a) => {
+	let o = be(e, t);
+	r?.push(o);
+	let s = new y({
+		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);
+}, xe = p(i("studio:customColorPanel", () => import("./n2-EbZF2IGbi-IOd.mjs")).load, { renderError: ({ error: e }) => (0, q.jsx)(B, { error: e }) }), X = (0, K.memo)((0, K.forwardRef)((e, t) => {
+	let { selectedColor: n = null, previewColor: i = e.selectedColor ?? null, recentColors: s, schemeLookup: c, disableAlpha: l = !1, previewDebounceTime: u = 100, initialPanelType: f, defaultButtonSize: p = 24, width: m, onElementLoad: h, onDone: _, onEyeDropStart: v, onEyeDropStop: b, onPreviewColor: x, onPreviewColorImmediate: C, onSelectColor: w, autoColor: T, autoColorLabel: E, autoColorLabelKey: D, autoColorPosition: O = _e.Start, compareRGB: k = !1, darkMode: A = !1, style: j, ...M } = e, P = d(), I = E ?? P(D ?? a("color.automatic")), re = i || n, ie = g(x ?? ((e) => {}), [x]), ae = g(C ?? ((e) => {}), [C]), oe = g(w ?? ((e, t) => {}), [w]), L = g(v ?? (() => {}), [v]), ce = g(b ?? (() => {}), [b]), [le, R] = (0, K.useState)(!1), z = ee(), B = (0, K.useMemo)(() => c || y.getDefaultSchemeLookup(), [c]), V = (0, K.useMemo)(() => {
+		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), n = [];
+		Y(P("color.scheme.bg1"), "bg1", B, n, e, t), Y(P("color.scheme.tx1"), "tx1", B, n, e, t), Y(P("color.scheme.bg2"), "bg2", B, n, e, t), Y(P("color.scheme.tx2"), "tx2", B, n, e, t), Y(P("color.scheme.accent", { n: 1 }), "accent1", B, n, e, t), Y(P("color.scheme.accent", { n: 2 }), "accent2", B, n, e, t), Y(P("color.scheme.accent", { n: 3 }), "accent3", B, n, e, t), Y(P("color.scheme.accent", { n: 4 }), "accent4", B, n, e, t), Y(P("color.scheme.accent", { n: 5 }), "accent5", B, n, e, t), Y(P("color.scheme.accent", { n: 6 }), "accent6", B, n, e, t);
+		let r = S.buildPalette(n, B, e, t), i = [];
+		if (Y(P("color.standard.darkRed"), "C00000", B, i, e, t), Y(P("color.standard.red"), "FF0000", B, i, e, t), Y(P("color.standard.orange"), "FFC000", B, i, e, t), Y(P("color.standard.yellow"), "FFFF00", B, i, e, t), Y(P("color.standard.lightGreen"), "92D050", B, i, e, t), Y(P("color.standard.green"), "00B050", B, i, e, t), Y(P("color.standard.lightBlue"), "00B0F0", B, i, e, t), Y(P("color.standard.blue"), "0070C0", B, i, e, t), Y(P("color.standard.darkBlue"), "002060", B, i, e, t), l ? Y(P("color.standard.purpleFruit"), "7030A0", B, i, e, t) : Y(P("color.standard.transparent"), "00000000", B, i, e, t), T) {
+			let t = T.toString();
+			e.set(t, T);
+		}
+		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: P("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
+		};
+	}, [
+		B,
+		s,
+		l,
+		T
+	]);
+	(0, K.useEffect)(() => {
+		h?.();
+	}, []);
+	let [H, U] = (0, K.useState)(!1), de = (0, K.useCallback)(() => {
+		U((e) => !e);
+	}, []);
+	(0, K.useEffect)(() => {
+		if (f) U(f === ge.Custom);
+		else if (n) {
+			let e = n.toString(), t = V.mapAllPresets.get(e);
+			t ||= (e = n.toRGBA().toString(), V.mapAllPresetsRGB.get(e));
+			let r = V.mapRecent.get(e);
+			U(!t && !r);
+		}
+	}, [n, f]);
+	let fe = (0, K.useCallback)(r.debounce((e) => {
+		ie?.(e);
+	}, u), [ie, u]), [pe, me] = (0, K.useState)();
+	(0, K.useEffect)(() => {
+		me(i || n);
+	}, [i, n]);
+	let he = g((e) => {
+		ae && (ae(e), fe(e));
+	}, [ae]), G = g((e) => {
+		he(e ? new y({
+			val: e.definition.val,
+			adjs: e.definition.adjs
+		}, B) : null);
+	}, [B]), ve = (0, K.useCallback)((e) => {
+		e.ctrlKey && U(!0);
+	}, []), be = g((e) => {
+		let t = !1;
+		if (e) {
+			let n = e.toString();
+			t = !V.mapAllPresets.has(n);
+		}
+		oe?.(e, t);
+	}, [oe, V]), X = g((e) => {
+		let t = e ? new y({
+			val: e.definition.val,
+			adjs: e.definition.adjs
+		}, B) : null;
+		Promise.resolve(_?.()).then(() => {
+			be(t);
+		});
+	}, [B, _]), Se = g((e) => {
+		he(e ? new y(e, B) : null);
+	}, [B]), Ce = (0, K.useMemo)(() => window.EyeDropper === void 0 ? (0, q.jsx)(q.Fragment, {}) : (0, q.jsx)(ne, {
+		"aria-label": P("color.eyeDropper"),
+		size: "small",
+		sx: { color: (e) => e.palette.text.icon ?? e.palette.action.active },
+		onClick: async () => {
+			R(!0), L?.(), await new EyeDropper().open().then((e) => {
+				R(!1), ce?.();
+				let t = new y(e.sRGBHex), n = t.toString(), r = V.mapAllPresets.get(n);
+				if (r ||= (n = t.toRGBA().toString(), V.mapAllPresetsRGB.get(n)), !r) {
+					let e = t.toRGBA();
+					V.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);
+					});
+				}
+				U(!r), he(r || t);
+			}).catch((e) => {
+				R(!1), e?.name !== "AbortError" && console.error(e);
+			});
+		},
+		children: (0, q.jsx)(o, { iconKey: "Colorize" })
+	}), [V, A]), Z = (0, K.useMemo)(() => {
+		if (!H) return;
+		let e = {
+			opacity: H ? 1 : "0",
+			position: "absolute",
+			top: "0px",
+			left: "0px",
+			width: "100%",
+			height: "100%",
+			boxSizing: "border-box"
+		};
+		return (0, q.jsx)(K.Suspense, {
+			fallback: (0, q.jsx)("div", {
+				style: e,
+				children: (0, q.jsx)(ue, {})
+			}),
+			children: (0, q.jsx)(xe, {
+				style: e,
+				selectedColor: re ? re.toRGBA().toString() : "transparent",
+				onColorChange: Se,
+				disableAlpha: l
+			})
+		});
+	}, [H, re]), Q = (0, K.useMemo)(() => ({
+		onClick: ve,
+		alphaGrey: z.palette.text.icon ?? z.palette.action.active
+	}), [ve, z]), $ = (0, K.useMemo)(() => {
+		if (!T) return null;
+		let e = {
+			description: I,
+			definition: {
+				val: T.getVal(),
+				adjs: T.getAdjustments()
+			}
+		};
+		return (0, q.jsx)(q.Fragment, { children: (0, q.jsxs)(se, {
+			sx: {
+				display: "flex",
+				color: (e) => e.palette.text.secondary
+			},
+			onMouseOver: () => {
+				G(null);
+			},
+			onClick: () => {
+				X(null);
+			},
+			children: [(0, q.jsx)(N, {
+				sx: {
+					flex: "none",
+					boxShadow: (e) => e.shadows[2],
+					borderRadius: (e) => e.spacing(.5),
+					overflow: "hidden"
+				},
+				children: (0, q.jsx)(ye, {
+					schemeColorLookup: B,
+					colorDef: e,
+					selectedColor: n === null ? T : n,
+					previewColor: i === null ? T : i,
+					defaultButtonSize: p,
+					isLarge: !0,
+					darkMode: A,
+					compareRGB: k,
+					propsSwatch: Q
+				})
+			}), (0, q.jsx)(F, {
+				noWrap: !0,
+				component: "div",
+				style: {
+					display: "flex",
+					flex: "1 1 100%",
+					marginLeft: "8px",
+					userSelect: "none"
+				},
+				children: I
+			})]
+		}) });
+	}, [
+		T,
+		I,
+		B,
+		n,
+		i,
+		A,
+		k,
+		p,
+		Q
+	]);
+	return (0, q.jsxs)(N, {
+		ref: t,
+		sx: {
+			width: m,
+			outline: "none",
+			padding: "10px 10px",
+			overflow: "hidden",
+			boxSizing: "content-box"
+		},
+		style: j,
+		...M,
+		children: [
+			(0, q.jsxs)("div", {
+				style: {
+					position: "relative",
+					display: "flex"
+				},
+				children: [(0, q.jsxs)("div", {
+					style: { opacity: H ? "0" : 1 },
+					children: [
+						$ && O === _e.Start ? (0, q.jsxs)(q.Fragment, { children: [$, (0, q.jsx)(W, { style: {
+							marginTop: "2px",
+							marginBottom: "10px"
+						} })] }) : null,
+						(0, q.jsx)(J, {
+							title: P("color.themeColors"),
+							schemeColorLookup: B,
+							colorDefs: V.primaryColors,
+							selectedColor: n,
+							previewColor: i === void 0 ? n : i,
+							propsSwatch: Q,
+							onPreviewColorDef: G,
+							onSelectColorDef: X,
+							compareRGB: k,
+							darkMode: A
+						}),
+						(0, q.jsx)(J, {
+							schemeColorLookup: B,
+							colorDefs: V.modifiedPresets,
+							selectedColor: n,
+							previewColor: i === void 0 ? n : i,
+							propsSwatch: Q,
+							onPreviewColorDef: G,
+							onSelectColorDef: X,
+							compareRGB: k,
+							darkMode: A
+						}),
+						(0, q.jsx)(W, { style: { marginBottom: "10px" } }),
+						(0, q.jsx)(J, {
+							title: P("color.standardColors"),
+							schemeColorLookup: B,
+							colorDefs: V.standardColors,
+							selectedColor: n,
+							previewColor: i === void 0 ? n : i,
+							propsSwatch: Q,
+							onPreviewColorDef: G,
+							onSelectColorDef: X,
+							compareRGB: k,
+							darkMode: A
+						}),
+						(0, q.jsxs)("div", {
+							style: {
+								opacity: V.recentColorsLimited.length === 0 ? "0" : void 0,
+								display: V.recentColorsLimited.length === 0 ? "none" : void 0
+							},
+							children: [(0, q.jsx)(W, { style: { marginBottom: "10px" } }), (0, q.jsx)(J, {
+								title: P("color.recentColors"),
+								schemeColorLookup: B,
+								colorDefs: V.recentColorsLimited,
+								selectedColor: n,
+								previewColor: i === void 0 ? n : i,
+								propsSwatch: Q,
+								onPreviewColorDef: G,
+								onSelectColorDef: X,
+								compareRGB: k,
+								darkMode: A
+							})]
+						}),
+						$ && O === _e.End ? (0, q.jsxs)(q.Fragment, { children: [
+							(0, q.jsx)(W, { sx: {
+								marginTop: "2px",
+								marginBottom: "2px"
+							} }),
+							$,
+							(0, q.jsx)("div", { style: { marginBottom: "2px" } })
+						] }) : null
+					]
+				}), Z]
+			}),
+			(0, q.jsx)(W, { style: { marginBottom: "10px" } }),
+			(0, q.jsxs)("div", {
+				style: {
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "center",
+					gap: "8px",
+					paddingLeft: "2px",
+					paddingRight: "2px"
+				},
+				children: [
+					Ce,
+					(0, q.jsx)("div", { style: { flex: "1 1 0%" } }),
+					(0, q.jsxs)("div", {
+						style: {
+							flex: "0 0 auto",
+							display: "flex",
+							gap: "8px"
+						},
+						children: [(0, q.jsx)(te, {
+							style: { minWidth: "75px" },
+							value: "check",
+							variant: "outlined",
+							size: "small",
+							onClick: () => {
+								de();
+							},
+							children: (0, q.jsxs)("span", {
+								style: {
+									display: "grid",
+									alignItems: "center"
+								},
+								children: [(0, q.jsx)("span", {
+									style: {
+										gridArea: "1 / 1",
+										visibility: H ? "hidden" : "visible"
+									},
+									children: P("color.custom")
+								}), (0, q.jsx)("span", {
+									style: {
+										gridArea: "1 / 1",
+										visibility: H ? "visible" : "hidden"
+									},
+									children: P("color.preset")
+								})]
+							})
+						}), (0, q.jsx)(te, {
+							variant: "contained",
+							size: "small",
+							style: { minWidth: "75px" },
+							onClick: () => {
+								Promise.resolve(_?.()).then(() => {
+									be(pe ?? null);
+								});
+							},
+							children: P("color.done")
+						})]
+					})
+				]
+			})
+		]
+	});
+})), Se = (0, q.jsx)(o, { iconKey: "circle.colored" }), Ce = (0, K.memo)((0, K.forwardRef)((e, t) => {
+	let { selectedColor: n, quickColor: r, icon: i = Se, tooltip: a, label: s, onPreviewColor: c, onPreviewColorImmediate: u, onSelectColor: d, variant: f = L.Toolbar, propsPanel: p, shouldCloseFloatAll: m = !0, compareRGB: h = !1, darkMode: _ = !1, ...v } = e, y = g(c ?? ((e) => {}), [c]), b = g(u ?? ((e) => {}), [u]), x = g(d ?? ((e, t) => {}), [d]), [S, C] = (0, K.useState)(() => {}), [w, T] = (0, K.useState)(!1), E = r || (w ? S : void 0) || n || p?.autoColor, D = (0, K.useRef)(!1), O = (0, K.useCallback)(() => {
+		T(!1);
+	}, []), k = g(() => {
+		C(n), T(!0);
+	}, [n]), A = g((e) => {
+		D.current || (C(e), y?.(e));
+	}, [y]), j = g((e) => {
+		D.current || (C(e), b?.(e));
+	}, [b]), M = g((e, t) => {
+		D.current || (C(void 0), x?.(e, t));
+	}, [x]), ee = (0, K.useMemo)(() => {
+		let e = typeof i == "function" ? i() : i;
+		typeof e == "string" && (e = (0, q.jsx)(o, { iconKey: e }));
+		let t = (e) => e && e !== "none" ? e : void 0, n = t(E?.toCSS(_)) ?? t(p?.autoColor?.toCSS(_)) ?? "transparent";
+		return (0, q.jsx)(N, {
+			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
+		});
+	}, [
+		E,
+		p?.autoColor,
+		i,
+		_
+	]), P = g((e) => {
+		x?.(r ?? null, !1);
+	}, [x, r]), [te, F] = (0, K.useState)(!1), ne = (0, K.useCallback)((e) => {
+		let { closeFloat: t, closeFloatAll: r } = e;
+		return (0, q.jsx)(X, {
+			...p,
+			selectedColor: n,
+			previewColor: S,
+			onDone: m ? r : t,
+			onKeyDown: (e) => {
+				e.which === l.Enter && (m ? r?.() : t?.());
+			},
+			onPreviewColorImmediate: j,
+			onPreviewColor: A,
+			onSelectColor: M,
+			onEyeDropStart: () => F(!0),
+			onEyeDropStop: () => F(!1),
+			compareRGB: h,
+			darkMode: _
+		});
+	}, [
+		n,
+		S,
+		m,
+		E,
+		p?.autoColor,
+		_
+	]), I = {
+		onQuickClick: r ? P : void 0,
+		renderPopupPanel: ne,
+		propsPopup: { propsPopper: { resizeOnOverflow: !1 } },
+		onPopupOpen: k,
+		onPopupClose: O,
+		tooltip: a || s || "Color",
+		label: s,
+		icon: ee,
+		...v
+	};
+	return f === L.Toolbar ? (0, q.jsx)(U, {
+		ref: t,
+		...I
+	}) : (0, q.jsx)(R, {
+		ref: t,
+		...I
+	});
+})), Z = 82;
+function Q(e, t) {
+	if (!t) return "";
+	switch (t.style) {
+		case v.StrokeStyle.None: return e("border.style.none");
+		case v.StrokeStyle.Hair: return e("border.style.hair");
+		case v.StrokeStyle.Dotted: return e("border.style.dotted");
+		case v.StrokeStyle.Dashed: return e("border.style.dashed");
+		case v.StrokeStyle.DashDot: return e("border.style.dashDot");
+		case v.StrokeStyle.DashDotDot: return e("border.style.dashDotDot");
+		case v.StrokeStyle.Double: return e("border.style.double");
+		case v.StrokeStyle.Thin: return e("border.style.thin");
+		case v.StrokeStyle.Medium: return e("border.style.medium");
+		case v.StrokeStyle.MediumDashed: return e("border.style.mediumDashed");
+		case v.StrokeStyle.MediumDashDot: return e("border.style.mediumDashDot");
+		case v.StrokeStyle.MediumDashDotDot: return e("border.style.mediumDashDotDot");
+		case v.StrokeStyle.SlantDashDot: return e("border.style.slantDashDot");
+		case v.StrokeStyle.Thick: return e("border.style.thick");
+		default: return t.description;
+	}
+}
+var $ = (e) => {
+	let { styleColor: t, length: n = Z, width: r = 1, dashArray: i, sx: a, isDouble: o = !1, isAngled: s = !1, darkMode: c = !1, ...l } = e;
+	return (0, q.jsx)(P, {
+		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, q.jsx)(C, {
+			length: n,
+			width: r,
+			dashArray: i,
+			isDouble: o,
+			isAngled: s,
+			className: "activeColor"
+		})
+	});
+}, we = (0, K.memo)((0, K.forwardRef)((e, t) => {
+	let { variant: n, showLabels: r = !1, disabled: i, renderPopupPanel: a, styleColor: o, selectedStyle: s, onSelectStyle: c, showNone: u = !0, darkMode: f, sx: p, ...m } = e, h = g(c ?? ((e) => {}), []), _ = d(), y = (0, K.useCallback)((e) => {
+		let { popupContainer: t, closeFloat: n, ...a } = e, c = [], d = v.BuiltInDefinitionsArray;
+		for (let e = 0; e < d.length; e++) {
+			let t = d[e];
+			if (t.description === "None" && !u) continue;
+			let a = (0, q.jsx)($, {
+				styleColor: o,
+				length: Z,
+				width: t.width,
+				darkMode: f,
+				dashArray: t.pattern,
+				isDouble: t.description.toLowerCase().includes("double"),
+				isAngled: t.description.toLowerCase().includes("slant")
+			}), p = null;
+			p = r ? (0, q.jsxs)(q.Fragment, { children: [(0, q.jsx)(N, {
+				sx: { marginRight: "6px" },
+				children: Q(_, t)
+			}), (0, q.jsxs)(N, {
+				sx: {
+					marginLeft: "6px",
+					marginRight: "6px",
+					display: "flex",
+					alignItems: "center",
+					flex: "1 1 100%"
+				},
+				children: [(0, q.jsx)("div", { style: { flex: "1 1 100%" } }), a]
+			})] }) : t.description === "None" ? Q(_, t) : a, c.push((0, q.jsx)(le, {
+				className: "border-stroke",
+				tabIndex: 0,
+				sx: {
+					height: "28px",
+					"& svg path.activeColor": { filter: I(4) },
+					paddingLeft: "16px"
+				},
+				propsTooltip: { description: r ? "" : Q(_, t) },
+				icon: null,
+				disabled: i,
+				onMouseDown: (e) => e.preventDefault(),
+				onMouseUp: () => {
+					n?.(), h(t.style);
+				},
+				onKeyDown: (e) => {
+					e.which === l.Enter && n?.();
+				},
+				selected: t.style === s,
+				children: p
+			}, e));
+		}
+		return (0, q.jsx)(N, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				paddingTop: "4px",
+				paddingBottom: "4px"
+			},
+			children: c
+		});
+	}, [
+		i,
+		u,
+		o,
+		s,
+		f,
+		_
+	]), b = {
+		disabled: i,
+		icon: (0, K.useMemo)(() => {
+			let e, t = v.BuiltInDefinitions.get(s);
+			return t ? (e = t.description === "None" ? (0, q.jsx)(N, {
+				sx: { minWidth: `${Z}px` },
+				children: Q(_, t)
+			}) : (0, q.jsx)($, {
+				styleColor: o,
+				length: Z,
+				width: t.width,
+				dashArray: t.pattern,
+				darkMode: f,
+				isDouble: t.description.toLowerCase().includes("double"),
+				isAngled: t.description.toLowerCase().includes("slant")
+			}), (0, q.jsx)(N, {
+				className: "border-stroke",
+				sx: {
+					paddingLeft: "12px",
+					marginLeft: "4px",
+					marginRight: "4px",
+					height: "24px",
+					display: "flex",
+					alignItems: "center",
+					"& svg path.activeColor": { filter: I() }
+				},
+				children: e
+			})) : null;
+		}, [
+			s,
+			o,
+			_
+		]),
+		tooltip: _("border.styleTooltip", { style: Q(_, (0, K.useMemo)(() => v.BuiltInDefinitions.get(s), [s])) }),
+		sx: p,
+		renderPopupPanel: y,
+		...m
+	};
+	return n === L.Toolbar ? (0, q.jsx)(U, { ...b }) : (0, q.jsx)(R, { ...b });
+})), Te = (e) => {
+	let { border: t, createBorder: n } = e, [r, { width: i, height: a }] = c(), l = s(), u = {}, d = t ? Object.keys(t) : [], f = d.length;
+	for (let e = 0; e < f; e++) {
+		let n = d[e], r = t?.[n];
+		r?.style && r.style !== v.StrokeStyle.None && (u[n] = {
+			style: r.style,
+			color: r.color
+		});
+	}
+	let p = Object.keys(u).length > 0, m = Math.min(i, a), h = m > 0 ? Oe(m, l) : null, g = "";
+	if (h) {
+		let { start: e, span: t, dot: n } = h, r = (e, t) => t === 0 && !!u.top || t === 2 && !!u.horizontal || t === 4 && !!u.bottom || e === 0 && !!u.left || e === 2 && !!u.vertical || e === 4 && !!u.right || e === t && !!u.diagonalDown || e + t === 4 && !!u.diagonalUp, i = n / l, a = i / 2;
+		for (let n = 0; n < 5; n++) for (let o = 0; o < 5; o++) o % 2 != 0 && n % 2 != 0 || r(o, n) || (g += `M ${(e + o * t / 4 + .5) / l - a},${(e + n * t / 4 + .5) / l - a} h ${i} v ${i} h ${-i} Z `);
+	}
+	return (0, q.jsxs)(o, { children: [" ", (0, q.jsx)(N, {
+		ref: r,
+		className: "border-icon",
+		sx: {
+			width: "var(--icon-size, var(--icon-size-md))",
+			height: "var(--icon-size, var(--icon-size-md))",
+			position: "relative",
+			"& .grid > path": {
+				fill: (e) => e.palette.text.secondary,
+				opacity: "0.7"
+			}
+		},
+		children: h ? (0, q.jsxs)(q.Fragment, { children: [(0, q.jsx)("svg", {
+			viewBox: `0 0 ${m} ${m}`,
+			className: "grid",
+			style: {
+				top: "0px",
+				left: "0px",
+				width: `${m}px`,
+				height: `${m}px`,
+				position: "absolute",
+				overflow: "visible"
+			},
+			children: (0, q.jsx)("path", {
+				className: "fill",
+				d: g
+			})
+		}), (0, q.jsx)(N, {
+			className: "border-container",
+			sx: {
+				position: "absolute",
+				top: "0px",
+				left: "0px",
+				width: `${m}px`,
+				height: `${m}px`,
+				"& svg path": { filter: ie }
+			},
+			children: (0, q.jsx)(j, {
+				getBorderAt: (e, t) => {
+					if (!n || !p) return null;
+					let r = {
+						diagonalUp: u.diagonalUp,
+						diagonalDown: u.diagonalDown
+					};
+					return e.rowIndex === 0 ? (r.top = u.top, r.bottom = u.horizontal) : (r.top = u.horizontal, r.bottom = u.bottom), e.colIndex === 0 ? (r.left = u.left, r.right = u.vertical) : (r.left = u.vertical, r.right = u.right), n(r);
+				},
+				getMergeAt: De,
+				width: h.span / l,
+				height: h.span / l,
+				style: {
+					top: h.start / l + "px",
+					left: h.start / l + "px",
+					width: h.span / l + "px",
+					height: h.span / l + "px",
+					position: "absolute"
+				}
+			})
+		})] }) : null
+	})] });
+};
+Te.displayName = "BorderTemplateIcon";
+var Ee = Object.freeze({
+	rowStart: 0,
+	colStart: 0,
+	rowEnd: 1,
+	colEnd: 1
+}), De = () => Ee, Oe = (e, t) => {
+	let n = Math.floor(e * t), r = Math.max(1, Math.round(t));
+	r % 2 == 0 && r++;
+	let i = Math.max(1, (r - 1) / 2), a = 4 * Math.floor((n - 2 * i - 1) / 4);
+	return a < 4 ? null : {
+		start: Math.floor((n - a - 1) / 2),
+		span: a,
+		dot: r
+	};
+}, ke = (0, K.memo)((0, K.forwardRef)((e, t) => {
+	let { autoColor: n, schemeLookup: r, autoStrokeStyle: i = v.StrokeStyle.Thin, disabled: a, darkMode: s = !1, showStylingBefore: c = !0, onSelectBorder: l, onPreviewBorder: f, selectedBorder: p, createBorder: m, ..._ } = e, x = g(l ?? ((e) => {}), [l]), S = g(f ?? ((e) => {}), [f]), C = d(), w = u("borderOptions"), [T, E] = (0, K.useState)(), [D, O] = (0, K.useState)(), k = p || { bottom: {
+		style: i,
+		color: n?.toString() ?? b.Named.Gray
+	} }, A = T ?? k?.bottom?.style ?? i, j = D ?? (k?.bottom?.color ? new y(k?.bottom?.color, r) : void 0) ?? n ?? null, M = g((e) => (0, q.jsx)(Te, {
+		border: e,
+		createBorder: m
+	}), [m]), ee = (0, K.useCallback)((e, t, n) => {
+		let r = null;
+		if (e && e.length > 0) {
+			let i;
+			(t || n) && (i = {
+				style: n,
+				color: t?.toString()
+			}), r = {};
+			let a = e.length;
+			for (let t = 0; t < a; t++) r[e[t]] = i;
+		}
+		return r;
+	}, []), P = (0, K.useCallback)((e) => {
+		x?.(e);
+	}, []), te = (0, K.useCallback)((e) => {
+		S?.(e);
+	}, []), F = (0, K.useCallback)((e) => {
+		let { closeFloatAll: t } = e, i = (e, n, r = "bottom", i = !1) => {
+			let a = ee(e, j ?? null, i ? v.StrokeStyle.None : A ?? null), o = i ? ee([], j ?? null, A ?? null) : a;
+			return (0, q.jsx)(z, {
+				icon: M(o),
+				propsTooltip: {
+					label: n,
+					simple: !0,
+					placement: r
+				},
+				onClick: () => {
+					t?.(), te(a), P(a);
+				}
+			});
+		}, l = (0, q.jsxs)(q.Fragment, { children: [(0, q.jsxs)(N, {
+			sx: {
+				display: "flex",
+				padding: "6px 16px",
+				justifyContent: "center",
+				rowGap: "2px",
+				gap: "2px"
+			},
+			children: [
+				i([
+					v.Edge.Left,
+					v.Edge.Top,
+					v.Edge.Right,
+					v.Edge.Bottom,
+					v.Edge.Horizontal,
+					v.Edge.Vertical
+				], C("border.all"), "top"),
+				i([v.Edge.Horizontal, v.Edge.Vertical], C("border.inner"), "top"),
+				i([v.Edge.Horizontal], C("border.insideHorizontal"), "top"),
+				i([v.Edge.Vertical], C("border.insideVertical"), "top"),
+				i([
+					v.Edge.Left,
+					v.Edge.Top,
+					v.Edge.Right,
+					v.Edge.Bottom
+				], C("border.outside"), "top")
+			]
+		}), (0, q.jsxs)(N, {
+			sx: {
+				display: "flex",
+				padding: "6px 16px",
+				justifyContent: "center",
+				rowGap: "2px",
+				gap: "2px"
+			},
+			children: [
+				i([v.Edge.Left], C("border.left")),
+				i([v.Edge.Top], C("border.top")),
+				i([v.Edge.Right], C("border.right")),
+				i([v.Edge.Bottom], C("border.bottom")),
+				i([
+					v.Edge.Left,
+					v.Edge.Top,
+					v.Edge.Right,
+					v.Edge.Bottom,
+					v.Edge.Horizontal,
+					v.Edge.Vertical,
+					v.Edge.DiagonalUp,
+					v.Edge.DiagonalDown
+				], C("border.none"), "bottom", !0)
+			]
+		})] }), u = (0, q.jsx)(q.Fragment, { children: (0, q.jsxs)(N, {
+			sx: {
+				display: "flex",
+				padding: "6px 16px",
+				flexDirection: "row",
+				gap: "6px"
+			},
+			children: [(0, q.jsx)(Ce, {
+				variant: L.Toolbar,
+				icon: (0, q.jsx)(o, { iconKey: "stroke.colored" }),
+				selectedColor: A === v.StrokeStyle.None ? new y("transparent") : j ?? new y("transparent"),
+				onPreviewColor: (e) => {
+					O(e);
+				},
+				onSelectColor: (e, t) => {
+					O(e);
+				},
+				darkMode: s,
+				tooltip: C("border.colorTooltip"),
+				propsPanel: {
+					disableAlpha: !0,
+					autoColor: n,
+					schemeLookup: r,
+					...h("grid", s ? "dark" : "light")
+				},
+				disabled: a || A === v.StrokeStyle.None,
+				shouldCloseFloatAll: !1
+			}), (0, q.jsx)(we, {
+				selectedStyle: A,
+				onSelectStyle: E,
+				styleColor: j,
+				darkMode: s,
+				variant: L.Toolbar
+			})]
+		}) });
+		return (0, q.jsxs)(N, {
+			...h("grid", s ? "dark" : "light"),
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				paddingTop: "4px",
+				paddingBottom: "4px"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				c ? u : l,
+				(0, q.jsx)(H, { orientation: "horizontal" }),
+				c ? l : u
+			]
+		});
+	}, [
+		A,
+		j,
+		n,
+		A,
+		r,
+		s,
+		C
+	]), ne = (0, K.useMemo)(() => M(k), [k, s]);
+	return (0, q.jsx)(U, {
+		ref: t,
+		renderPopupPanel: F,
+		propsPopup: { propsPopper: { resizeOnOverflow: !1 } },
+		renderTooltip: ({ children: e, disabled: t }) => (0, q.jsx)(ae, {
+			label: w?.getLabel?.(),
+			description: w?.getDescription?.(),
+			disabled: t,
+			children: e
+		}),
+		onQuickClick: () => {
+			x?.(k);
+		},
+		disabled: a,
+		icon: ne,
+		..._
+	});
+})), Ae = {
+	directional: a("conditionalFormat.iconGroup.directional"),
+	shapes: a("conditionalFormat.iconGroup.shapes"),
+	indicators: a("conditionalFormat.iconGroup.indicators"),
+	ratings: a("conditionalFormat.iconGroup.ratings")
+}, je = {
+	bad: a("conditionalFormat.iconTone.bad"),
+	lightBad: a("conditionalFormat.iconTone.lightBad"),
+	neutral: a("conditionalFormat.iconTone.neutral"),
+	good: a("conditionalFormat.iconTone.good"),
+	purple: a("conditionalFormat.iconTone.purple"),
+	gold: a("conditionalFormat.iconTone.gold"),
+	gray: a("conditionalFormat.iconTone.gray"),
+	black: a("conditionalFormat.iconTone.black")
+}, Me = {
+	arrowUp: a("conditionalFormat.iconShape.arrowUp"),
+	arrowUpRight: a("conditionalFormat.iconShape.arrowUpRight"),
+	arrowRight: a("conditionalFormat.iconShape.arrowRight"),
+	arrowDownRight: a("conditionalFormat.iconShape.arrowDownRight"),
+	arrowDown: a("conditionalFormat.iconShape.arrowDown"),
+	triangleUpSharp: a("conditionalFormat.iconShape.triangleUpSharp"),
+	triangleDownSharp: a("conditionalFormat.iconShape.triangleDownSharp"),
+	dash: a("conditionalFormat.iconShape.dash"),
+	circle: a("conditionalFormat.iconShape.circle"),
+	circleRimmed: a("conditionalFormat.iconShape.circleRimmed"),
+	triangleUp: a("conditionalFormat.iconShape.triangleUp"),
+	diamond: a("conditionalFormat.iconShape.diamond"),
+	flag: a("conditionalFormat.iconShape.flag"),
+	check: a("conditionalFormat.iconShape.check"),
+	cross: a("conditionalFormat.iconShape.cross"),
+	exclamation: a("conditionalFormat.iconShape.exclamation"),
+	circleCheck: a("conditionalFormat.iconShape.circleCheck"),
+	circleCross: a("conditionalFormat.iconShape.circleCross"),
+	circleExclamation: a("conditionalFormat.iconShape.circleExclamation"),
+	rating0: a("conditionalFormat.iconShape.rating0"),
+	rating1: a("conditionalFormat.iconShape.rating1"),
+	rating2: a("conditionalFormat.iconShape.rating2"),
+	rating3: a("conditionalFormat.iconShape.rating3"),
+	rating4: a("conditionalFormat.iconShape.rating4"),
+	star0: a("conditionalFormat.iconShape.star0"),
+	star1: a("conditionalFormat.iconShape.star1"),
+	star2: a("conditionalFormat.iconShape.star2"),
+	boxes0: a("conditionalFormat.iconShape.boxes0"),
+	boxes1: a("conditionalFormat.iconShape.boxes1"),
+	boxes2: a("conditionalFormat.iconShape.boxes2"),
+	boxes3: a("conditionalFormat.iconShape.boxes3"),
+	boxes4: a("conditionalFormat.iconShape.boxes4"),
+	quarters0: a("conditionalFormat.iconShape.quarters0"),
+	quarters1: a("conditionalFormat.iconShape.quarters1"),
+	quarters2: a("conditionalFormat.iconShape.quarters2"),
+	quarters3: a("conditionalFormat.iconShape.quarters3"),
+	quarters4: a("conditionalFormat.iconShape.quarters4")
+}, Ne = /^(rating|star|boxes|quarters)\d$/, Pe = a("conditionalFormat.iconName"), Fe = (e, t) => {
+	let { shape: n, tone: r } = O(t), i = Me[n] ? e(Me[n]) : n;
+	return Ne.test(n) ? i : e(Pe, {
+		tone: e(je[r]),
+		shape: i
+	});
+}, Ie = Object.freeze([{
+	labelKey: a("conditionalFormat.gradientFill"),
+	presets: k.filter((e) => e.gradient)
+}, {
+	labelKey: a("conditionalFormat.solidFill"),
+	presets: k.filter((e) => !e.gradient)
+}]), Le = Object.freeze([{
+	labelKey: a("conditionalFormat.threeColor"),
+	presets: E.filter((e) => e.stops.length === 3)
+}, {
+	labelKey: a("conditionalFormat.twoColor"),
+	presets: E.filter((e) => e.stops.length === 2)
+}]), Re = Object.freeze(D.map((e) => ({
+	labelKey: Ae[e.key],
+	columns: 2,
+	presets: e.rows.flatMap(([e, t]) => [T(e), t ? T(t) : null])
+}))), ze = {
+	dataBar: Ie,
+	colorScale: Le,
+	iconSet: Re
+}, Be = (e, t) => e.type === x.ScaleType.DataBar ? fe(e, de(e.color, t)?.toCSS("adaptive") ?? "var(--sxl-color-primary, rgb(33, 115, 70))") : e.type === x.ScaleType.ColorScale ? G(e.stops ?? [], me, t) : [], Ve = (e, t) => e.type === x.ScaleType.IconSet ? (0, q.jsx)(w, {
+	icons: M(e.iconSet),
+	order: "descending",
+	size: 14,
+	gap: 3
+}) : (0, q.jsx)(he, { rows: Be(e, t) }), He = (0, K.memo)((e) => {
+	let { groups: t, onPick: n, disabled: r } = e, i = d(), a = A();
+	return (0, q.jsx)(N, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			padding: "2px 8px 4px"
+		},
+		children: t.map((e) => (0, q.jsxs)(N, { children: [(0, q.jsx)(oe, { children: i(e.labelKey) }), (0, q.jsx)(N, {
+			sx: {
+				display: "grid",
+				gridTemplateColumns: `repeat(${e.columns ?? 3}, auto)`,
+				gap: "3px",
+				marginBottom: "4px"
+			},
+			children: e.presets.map((e, t) => e === null ? (0, q.jsx)(N, {}, t) : (0, q.jsx)(pe, {
+				sheet: !0,
+				disabled: r,
+				sx: e.type === x.ScaleType.IconSet ? {
+					width: "94px",
+					height: "32px"
+				} : {
+					width: "44px",
+					height: "32px"
+				},
+				onClick: () => {
+					n(e);
+				},
+				children: Ve(e, a)
+			}, t))
+		})] }, e.labelKey))
+	});
+});
+He.displayName = "ScalePresetGallery";
+var Ue = (0, K.memo)((e) => {
+	let { commandKey: t, groups: n, disabled: r } = e, i = m([t])[0];
+	return (0, q.jsx)(He, {
+		groups: n,
+		disabled: r,
+		onPick: (e) => {
+			i?.execute(e);
+		}
+	});
+});
+Ue.displayName = "CommandPresetGallery";
+var We = (0, K.memo)((0, K.forwardRef)((e, t) => {
+	let { commandKey: n, scaleType: r, groupKey: i, disabled: a, ...o } = e, s = m([n])[0], c = ze[r], l = a ?? (!s || s.disabled()), u = (0, K.useCallback)((e) => ce({
+		...e,
+		children: (0, q.jsx)(Ue, {
+			commandKey: n,
+			groups: c,
+			disabled: l
+		})
+	}), [
+		n,
+		c,
+		l
+	]);
+	return (0, q.jsx)(V, {
+		ref: t,
+		renderPopupPanel: u,
+		label: s?.getLabel(i),
+		icon: s?.getIcon(i),
+		tooltip: s?.getDescription(i),
+		groupKey: i,
+		disabled: l,
+		...o
+	});
+}));
+We.displayName = "PresetScalesCommandButton";
+export { He as a, $ as c, Ce as d, X as f, be as h, Re as i, ye as l, ge as m, ke as n, Te as o, we as p, Fe as r, _e as s, We as t, J as u };