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

package/cdn/assets/CFJ9wCSJYOoE1Lrz.js

@@ -0,0 +1,1241 @@
+/**
+* @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 { n as e } from "./CTmLSM7UhiKOIhgu.js";
+import { t } from "./CCos0hQMhVcaGwU0.js";
+import { t as n } from "./CPGIT9PYUuWdSglk.js";
+import { A as r, D as i, m as a } from "./Cif0315haNLmyMj-.js";
+import { bt as o, t as s, x as c } from "./TVEs01pqc117KeGZ.js";
+import { B as l } from "./CZG3fjfebhJvUipF.js";
+import { g as u } from "./CqP5OkILMJUsRGxp.js";
+import { r as d } from "./DdWtfDWDB6Yst5LZ.js";
+import { Ft as f, I as p, Tt as m, U as h, dt as g, mt as _, pt as v, t as y, w as b, z as x } from "./OABpLvY7siKUyNIa.js";
+import { At as S, C, Lt as w, Nt as T, at as E, c as D, et as O, tt as k, u as A, v as j } from "./Cc-jOsunTu0-Mla_.js";
+import { n as ee, t as M } from "./DWcAYH0eBaOj-dU4.js";
+import { $ as N, E as P, M as te, P as ne, c as F, f as I, m as re, o as ie } from "./DX-iRDnwn8uZZIqp.js";
+import { D as ae, E as L, H as oe, L as se, O as ce, S as le, T as R, f as ue, g as z, j as B, l as V, y as H } from "./nQBuuL7ZHzDHpWHk.js";
+import { t as U } from "./DLGHrXPNZh3ZMjhS.js";
+import { t as W } from "./wK0g9YTrJa8xbPXn.js";
+import { c as de, i as fe, n as pe, o as me, r as he, t as G } from "./Dg-qsGzlATZbZ35c.js";
+var K = e(t(), 1), q = n(), 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: l = _.EmptyCssProperties, children: u, alphaWhite: d, alphaGrey: f, darkMode: p, alphaCheckSize: h = 7, ...g } = e;
+	if (!t) throw Error("a selectedColor is required");
+	let v = (0, K.useCallback)((e) => {
+		i?.(e), e.isDefaultPrevented() || (e.ctrlKey ? r?.(t.toRGBA()) : n?.(t.toRGBA()));
+	}, [
+		n,
+		r,
+		i,
+		t
+	]), y = (0, K.useCallback)((e) => {
+		o?.(e), e.isDefaultPrevented() || r?.(t.toRGBA());
+	}, [
+		r,
+		o,
+		t
+	]), b = (0, K.useCallback)((e) => {
+		s?.(e), e.isDefaultPrevented();
+	}, [r, s]), x = (0, K.useCallback)((e) => {
+		c?.(e), e.isDefaultPrevented() || r?.(t.toRGBA());
+	}, [
+		r,
+		c,
+		t
+	]), S = (0, K.useCallback)((e) => {
+		a?.(e), e.isDefaultPrevented() || e.keyCode === m.Enter && n?.(t.toRGBA());
+	}, [
+		n,
+		a,
+		t
+	]), C = (0, K.useMemo)(() => t.toRGBA().alpha === 1 ? null : (0, q.jsx)(W, {
+		size: h,
+		white: d,
+		grey: f,
+		style: {
+			position: "absolute",
+			width: "calc(100% - 1.5px)",
+			height: "calc(100% - 1.5px)",
+			top: "0.75px",
+			left: "0.75px"
+		}
+	}), [
+		d,
+		f,
+		t
+	]);
+	return (0, q.jsxs)("div", {
+		style: {
+			position: "absolute",
+			height: "100%",
+			width: "100%",
+			top: "0px",
+			left: "0px",
+			cursor: "pointer",
+			outline: "none",
+			...l
+		},
+		tabIndex: 0,
+		...g,
+		onClick: v,
+		onKeyDown: S,
+		onMouseOver: y,
+		onMouseLeave: b,
+		onFocus: x,
+		children: [C, (0, q.jsx)("div", {
+			style: {
+				position: "absolute",
+				top: "0px",
+				left: "0px",
+				height: "100%",
+				width: "100%",
+				background: t.toCSS(p)
+			},
+			children: u
+		})]
+	});
+}), ye = (0, K.memo)((e) => {
+	let { schemeColorLookup: t, selectedColor: n, previewColor: r, colorDef: i, onSelectColorDef: a, onPreviewColorDef: o, propsSwatch: l, defaultButtonSize: u = 24, isLarge: d = !1, compareRGB: f = !1, darkMode: p = !1, ...m } = e, h = new s({
+		val: i.definition.val,
+		adjs: i.definition.adjs
+	}, (e) => t(e)), g = f ? h.toRGBA().toString() : h.toString(), _ = n && (f ? n.toRGBA().toString() : n.toString()) === g, v = r && (f ? r.toRGBA().toString() : r.toString()) === g, y = [];
+	y.push({ [c.AdjustmentType.Inv]: !0 }), y.push({ [c.AdjustmentType.Alpha]: 100 });
+	let b = h.toRGBA().alpha === 0 && l?.alphaGrey ? l.alphaGrey : h.adjust(y).toRGBA(p).toString(), x = (0, K.useCallback)(() => {
+		a?.(i);
+	}, [a, i]), S = (0, K.useCallback)((e) => {
+		o?.(i);
+	}, [o, i]);
+	return (0, q.jsx)(I, {
+		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: u * (d ? 1.2 : 1) + "px",
+				height: u * (d ? 1.2 : 1) + "px",
+				position: "relative",
+				boxSizing: "border-box",
+				cursor: "pointer",
+				outline: "none"
+			},
+			...m,
+			children: (0, q.jsxs)(ve, {
+				selectedColor: h,
+				title: void 0,
+				onSelectColor: x,
+				onPreviewColor: S,
+				alphaCheckSize: d ? 9 : void 0,
+				darkMode: p,
+				...l,
+				children: [(0, q.jsx)("div", { style: {
+					position: "absolute",
+					width: "100%",
+					height: "100%",
+					top: "0px",
+					left: "0px",
+					pointerEvents: "none",
+					borderColor: b,
+					borderWidth: "2px",
+					borderStyle: "solid",
+					boxSizing: "border-box",
+					opacity: _ ? "1" : "0"
+				} }), (0, q.jsx)("div", { style: {
+					position: "absolute",
+					width: .33 * u * (d ? 1.2 : 1) + "px",
+					height: .33 * u * (d ? 1.2 : 1) + "px",
+					left: "calc(50% - 0.5px)",
+					top: "calc(50% - 0.5px)",
+					transform: "translate(-50%,-50%)",
+					pointerEvents: "none",
+					background: b,
+					borderRadius: "50%",
+					opacity: v ? "1" : "0"
+				} })]
+			})
+		})
+	});
+}), J = (0, K.memo)((e) => {
+	let t, { title: n, schemeColorLookup: r, colorDefs: i, selectedColor: a, previewColor: o, onSelectColorDef: s, onPreviewColorDef: c, style: l = _.EmptyCssProperties, compareRGB: u = !1, darkMode: d, propsSwatch: f, ...p } = e;
+	if (Array.isArray(i[0])) t = i;
+	else {
+		t = [];
+		for (let e = 0; e < i.length; e++) t.push([i[e]]);
+	}
+	let m = (0, K.useCallback)((e) => {
+		s?.(e);
+	}, [s]), h = (0, K.useCallback)((e) => {
+		c?.(e);
+	}, [c]), g = (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: m,
+					onPreviewColorDef: h,
+					propsSwatch: f,
+					compareRGB: u,
+					darkMode: d
+				}, n + " " + e));
+			}
+			let c = (0, q.jsx)(M, {
+				className: "button-col",
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "space-between",
+					boxShadow: (e) => e.shadows[2],
+					borderRadius: "2px",
+					overflow: "hidden"
+				},
+				children: i
+			}, "" + n);
+			e.push(c);
+		}
+		return e;
+	}, [
+		t,
+		a,
+		o,
+		m,
+		h
+	]), v = (0, K.useMemo)(() => n ? (0, q.jsx)(te, {
+		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)(M, {
+		style: { ...l },
+		children: [v, (0, q.jsx)(M, {
+			sx: {
+				display: "flex",
+				flexDirection: "row",
+				gap: "6px",
+				marginBottom: "14px",
+				flexWrap: "wrap",
+				justifyContent: "flex-start"
+			},
+			...p,
+			children: g
+		})]
+	});
+}), 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 c = new s({
+		val: o.definition.val,
+		adjs: o.definition.adjs
+	}, n), l = c.toString();
+	i?.set(l, c);
+	let u = c.toRGBA().toString();
+	a?.set(u, c);
+}, xe = v(i("studio:customColorPanel", () => import("./DZiWWhATAOxJQZ_N.js")).load, { renderError: ({ error: e }) => (0, q.jsx)(z, { error: e }) }), X = (0, K.memo)((0, K.forwardRef)((e, t) => {
+	let { selectedColor: n = null, previewColor: i = e.selectedColor ?? null, recentColors: o, schemeLookup: c, disableAlpha: l = !1, previewDebounceTime: f = 100, initialPanelType: p, defaultButtonSize: m = 24, width: h, onElementLoad: _, onDone: v, onEyeDropStart: y, onEyeDropStop: b, onPreviewColor: S, onPreviewColorImmediate: C, onSelectColor: w, autoColor: T, autoColorLabel: E, autoColorLabelKey: D, autoColorPosition: O = _e.Start, compareRGB: k = !1, darkMode: A = !1, style: j, ...N } = e, F = g(), I = E ?? F(D ?? a("color.automatic")), re = i || n, ie = x(S ?? ((e) => {}), [S]), ae = x(C ?? ((e) => {}), [C]), L = x(w ?? ((e, t) => {}), [w]), se = x(y ?? (() => {}), [y]), ce = x(b ?? (() => {}), [b]), [le, R] = (0, K.useState)(!1), z = ee(), B = (0, K.useMemo)(() => c || s.getDefaultSchemeLookup(), [c]), V = (0, K.useMemo)(() => {
+		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), n = [];
+		Y(F("color.scheme.bg1"), "bg1", B, n, e, t), Y(F("color.scheme.tx1"), "tx1", B, n, e, t), Y(F("color.scheme.bg2"), "bg2", B, n, e, t), Y(F("color.scheme.tx2"), "tx2", B, n, e, t), Y(F("color.scheme.accent", { n: 1 }), "accent1", B, n, e, t), Y(F("color.scheme.accent", { n: 2 }), "accent2", B, n, e, t), Y(F("color.scheme.accent", { n: 3 }), "accent3", B, n, e, t), Y(F("color.scheme.accent", { n: 4 }), "accent4", B, n, e, t), Y(F("color.scheme.accent", { n: 5 }), "accent5", B, n, e, t), Y(F("color.scheme.accent", { n: 6 }), "accent6", B, n, e, t);
+		let r = u.buildPalette(n, B, e, t), i = [];
+		if (Y(F("color.standard.darkRed"), "C00000", B, i, e, t), Y(F("color.standard.red"), "FF0000", B, i, e, t), Y(F("color.standard.orange"), "FFC000", B, i, e, t), Y(F("color.standard.yellow"), "FFFF00", B, i, e, t), Y(F("color.standard.lightGreen"), "92D050", B, i, e, t), Y(F("color.standard.green"), "00B050", B, i, e, t), Y(F("color.standard.lightBlue"), "00B0F0", B, i, e, t), Y(F("color.standard.blue"), "0070C0", B, i, e, t), Y(F("color.standard.darkBlue"), "002060", B, i, e, t), l ? Y(F("color.standard.purpleFruit"), "7030A0", B, i, e, t) : Y(F("color.standard.transparent"), "00000000", B, i, e, t), T) {
+			let t = T.toString();
+			e.set(t, T);
+		}
+		let a = /* @__PURE__ */ new Map(), s = typeof o == "function" ? o() : o, c = [];
+		for (let e = 0; s && e < s.length; e++) {
+			let t = s[e].toString();
+			a.set(t, s[e]), c.push({
+				description: F("color.recent", { n: e + 1 }),
+				definition: { val: s[e].toString() }
+			});
+		}
+		return {
+			primaryColors: n,
+			modifiedPresets: r,
+			standardColors: i,
+			recentColorsLimited: c,
+			mapAllPresets: e,
+			mapAllPresetsRGB: t,
+			mapRecent: a
+		};
+	}, [
+		B,
+		o,
+		l,
+		T
+	]);
+	(0, K.useEffect)(() => {
+		_?.();
+	}, []);
+	let [H, W] = (0, K.useState)(!1), de = (0, K.useCallback)(() => {
+		W((e) => !e);
+	}, []);
+	(0, K.useEffect)(() => {
+		if (p) W(p === 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);
+			W(!t && !r);
+		}
+	}, [n, p]);
+	let fe = (0, K.useCallback)(r.debounce((e) => {
+		ie?.(e);
+	}, f), [ie, f]), [pe, me] = (0, K.useState)();
+	(0, K.useEffect)(() => {
+		me(i || n);
+	}, [i, n]);
+	let he = x((e) => {
+		ae && (ae(e), fe(e));
+	}, [ae]), G = x((e) => {
+		he(e ? new s({
+			val: e.definition.val,
+			adjs: e.definition.adjs
+		}, B) : null);
+	}, [B]), ve = (0, K.useCallback)((e) => {
+		e.ctrlKey && W(!0);
+	}, []), be = x((e) => {
+		let t = !1;
+		if (e) {
+			let n = e.toString();
+			t = !V.mapAllPresets.has(n);
+		}
+		L?.(e, t);
+	}, [L, V]), X = x((e) => {
+		let t = e ? new s({
+			val: e.definition.val,
+			adjs: e.definition.adjs
+		}, B) : null;
+		Promise.resolve(v?.()).then(() => {
+			be(t);
+		});
+	}, [B, v]), Se = x((e) => {
+		he(e ? new s(e, B) : null);
+	}, [B]), Ce = (0, K.useMemo)(() => window.EyeDropper === void 0 ? (0, q.jsx)(q.Fragment, {}) : (0, q.jsx)(ne, {
+		"aria-label": F("color.eyeDropper"),
+		size: "small",
+		sx: { color: (e) => e.palette.text.icon ?? e.palette.action.active },
+		onClick: async () => {
+			R(!0), se?.(), await new EyeDropper().open().then((e) => {
+				R(!1), ce?.();
+				let t = new s(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);
+					});
+				}
+				W(!r), he(r || t);
+			}).catch((e) => {
+				R(!1), e?.name !== "AbortError" && console.error(e);
+			});
+		},
+		children: (0, q.jsx)(d, { 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)(oe, {
+			sx: {
+				display: "flex",
+				color: (e) => e.palette.text.secondary
+			},
+			onMouseOver: () => {
+				G(null);
+			},
+			onClick: () => {
+				X(null);
+			},
+			children: [(0, q.jsx)(M, {
+				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: m,
+					isLarge: !0,
+					darkMode: A,
+					compareRGB: k,
+					propsSwatch: Q
+				})
+			}), (0, q.jsx)(te, {
+				noWrap: !0,
+				component: "div",
+				style: {
+					display: "flex",
+					flex: "1 1 100%",
+					marginLeft: "8px",
+					userSelect: "none"
+				},
+				children: I
+			})]
+		}) });
+	}, [
+		T,
+		I,
+		B,
+		n,
+		i,
+		A,
+		k,
+		m,
+		Q
+	]);
+	return (0, q.jsxs)(M, {
+		ref: t,
+		sx: {
+			width: h,
+			outline: "none",
+			padding: "10px 10px",
+			overflow: "hidden",
+			boxSizing: "content-box"
+		},
+		style: j,
+		...N,
+		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)(U, { style: {
+							marginTop: "2px",
+							marginBottom: "10px"
+						} })] }) : null,
+						(0, q.jsx)(J, {
+							title: F("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)(U, { style: { marginBottom: "10px" } }),
+						(0, q.jsx)(J, {
+							title: F("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)(U, { style: { marginBottom: "10px" } }), (0, q.jsx)(J, {
+								title: F("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)(U, { sx: {
+								marginTop: "2px",
+								marginBottom: "2px"
+							} }),
+							$,
+							(0, q.jsx)("div", { style: { marginBottom: "2px" } })
+						] }) : null
+					]
+				}), Z]
+			}),
+			(0, q.jsx)(U, { 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)(P, {
+							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: F("color.custom")
+								}), (0, q.jsx)("span", {
+									style: {
+										gridArea: "1 / 1",
+										visibility: H ? "visible" : "hidden"
+									},
+									children: F("color.preset")
+								})]
+							})
+						}), (0, q.jsx)(P, {
+							variant: "contained",
+							size: "small",
+							style: { minWidth: "75px" },
+							onClick: () => {
+								Promise.resolve(v?.()).then(() => {
+									be(pe ?? null);
+								});
+							},
+							children: F("color.done")
+						})]
+					})
+				]
+			})
+		]
+	});
+})), Se = (0, q.jsx)(d, { iconKey: "circle.colored" }), Ce = (0, K.memo)((0, K.forwardRef)((e, t) => {
+	let { selectedColor: n, quickColor: r, icon: i = Se, tooltip: a, label: o, onPreviewColor: s, onPreviewColorImmediate: c, onSelectColor: l, variant: u = L.Toolbar, propsPanel: f, shouldCloseFloatAll: p = !0, compareRGB: h = !1, darkMode: g = !1, ..._ } = e, v = x(s ?? ((e) => {}), [s]), y = x(c ?? ((e) => {}), [c]), b = x(l ?? ((e, t) => {}), [l]), [S, C] = (0, K.useState)(() => {}), [w, T] = (0, K.useState)(!1), E = r || (w ? S : void 0) || n || f?.autoColor, D = (0, K.useRef)(!1), O = (0, K.useCallback)(() => {
+		T(!1);
+	}, []), k = x(() => {
+		C(n), T(!0);
+	}, [n]), A = x((e) => {
+		D.current || (C(e), v?.(e));
+	}, [v]), j = x((e) => {
+		D.current || (C(e), y?.(e));
+	}, [y]), ee = x((e, t) => {
+		D.current || (C(void 0), b?.(e, t));
+	}, [b]), N = (0, K.useMemo)(() => {
+		let e = typeof i == "function" ? i() : i;
+		typeof e == "string" && (e = (0, q.jsx)(d, { iconKey: e }));
+		let t = (e) => e && e !== "none" ? e : void 0, n = t(E?.toCSS(g)) ?? t(f?.autoColor?.toCSS(g)) ?? "transparent";
+		return (0, q.jsx)(M, {
+			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,
+		f?.autoColor,
+		i,
+		g
+	]), P = x((e) => {
+		b?.(r ?? null, !1);
+	}, [b, r]), [te, ne] = (0, K.useState)(!1), F = (0, K.useCallback)((e) => {
+		let { closeFloat: t, closeFloatAll: r } = e;
+		return (0, q.jsx)(X, {
+			...f,
+			selectedColor: n,
+			previewColor: S,
+			onDone: p ? r : t,
+			onKeyDown: (e) => {
+				e.which === m.Enter && (p ? r?.() : t?.());
+			},
+			onPreviewColorImmediate: j,
+			onPreviewColor: A,
+			onSelectColor: ee,
+			onEyeDropStart: () => ne(!0),
+			onEyeDropStop: () => ne(!1),
+			compareRGB: h,
+			darkMode: g
+		});
+	}, [
+		n,
+		S,
+		p,
+		E,
+		f?.autoColor,
+		g
+	]), I = {
+		onQuickClick: r ? P : void 0,
+		renderPopupPanel: F,
+		propsPopup: { propsPopper: { resizeOnOverflow: !1 } },
+		onPopupOpen: k,
+		onPopupClose: O,
+		tooltip: a || o || "Color",
+		label: o,
+		icon: N,
+		..._
+	};
+	return u === L.Toolbar ? (0, q.jsx)(H, {
+		ref: t,
+		...I
+	}) : (0, q.jsx)(le, {
+		ref: t,
+		...I
+	});
+})), Z = 82;
+function Q(e, t) {
+	if (!t) return "";
+	switch (t.style) {
+		case o.StrokeStyle.None: return e("border.style.none");
+		case o.StrokeStyle.Hair: return e("border.style.hair");
+		case o.StrokeStyle.Dotted: return e("border.style.dotted");
+		case o.StrokeStyle.Dashed: return e("border.style.dashed");
+		case o.StrokeStyle.DashDot: return e("border.style.dashDot");
+		case o.StrokeStyle.DashDotDot: return e("border.style.dashDotDot");
+		case o.StrokeStyle.Double: return e("border.style.double");
+		case o.StrokeStyle.Thin: return e("border.style.thin");
+		case o.StrokeStyle.Medium: return e("border.style.medium");
+		case o.StrokeStyle.MediumDashed: return e("border.style.mediumDashed");
+		case o.StrokeStyle.MediumDashDot: return e("border.style.mediumDashDot");
+		case o.StrokeStyle.MediumDashDotDot: return e("border.style.mediumDashDotDot");
+		case o.StrokeStyle.SlantDashDot: return e("border.style.slantDashDot");
+		case o.StrokeStyle.Thick: return e("border.style.thick");
+		default: return t.description;
+	}
+}
+var $ = (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)(N, {
+		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)(S, {
+			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: s, selectedStyle: c, onSelectStyle: l, showNone: u = !0, darkMode: d, sx: f, ...p } = e, h = x(l ?? ((e) => {}), []), _ = g(), v = (0, K.useCallback)((e) => {
+		let { popupContainer: t, closeFloat: n, ...a } = e, l = [], f = o.BuiltInDefinitionsArray;
+		for (let e = 0; e < f.length; e++) {
+			let t = f[e];
+			if (t.description === "None" && !u) continue;
+			let a = (0, q.jsx)($, {
+				styleColor: s,
+				length: Z,
+				width: t.width,
+				darkMode: d,
+				dashArray: t.pattern,
+				isDouble: t.description.toLowerCase().includes("double"),
+				isAngled: t.description.toLowerCase().includes("slant")
+			}), o = null;
+			o = r ? (0, q.jsxs)(q.Fragment, { children: [(0, q.jsx)(M, {
+				sx: { marginRight: "6px" },
+				children: Q(_, t)
+			}), (0, q.jsxs)(M, {
+				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, l.push((0, q.jsx)(ce, {
+				className: "border-stroke",
+				tabIndex: 0,
+				sx: {
+					height: "28px",
+					"& svg path.activeColor": { filter: F(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 === m.Enter && n?.();
+				},
+				selected: t.style === c,
+				children: o
+			}, e));
+		}
+		return (0, q.jsx)(M, {
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				paddingTop: "4px",
+				paddingBottom: "4px"
+			},
+			children: l
+		});
+	}, [
+		i,
+		u,
+		s,
+		c,
+		d,
+		_
+	]), y = {
+		disabled: i,
+		icon: (0, K.useMemo)(() => {
+			let e, t = o.BuiltInDefinitions.get(c);
+			return t ? (e = t.description === "None" ? (0, q.jsx)(M, {
+				sx: { minWidth: `${Z}px` },
+				children: Q(_, t)
+			}) : (0, q.jsx)($, {
+				styleColor: s,
+				length: Z,
+				width: t.width,
+				dashArray: t.pattern,
+				darkMode: d,
+				isDouble: t.description.toLowerCase().includes("double"),
+				isAngled: t.description.toLowerCase().includes("slant")
+			}), (0, q.jsx)(M, {
+				className: "border-stroke",
+				sx: {
+					paddingLeft: "12px",
+					marginLeft: "4px",
+					marginRight: "4px",
+					height: "24px",
+					display: "flex",
+					alignItems: "center",
+					"& svg path.activeColor": { filter: F() }
+				},
+				children: e
+			})) : null;
+		}, [
+			c,
+			s,
+			_
+		]),
+		tooltip: _("border.styleTooltip", { style: Q(_, (0, K.useMemo)(() => o.BuiltInDefinitions.get(c), [c])) }),
+		sx: f,
+		renderPopupPanel: v,
+		...p
+	};
+	return n === L.Toolbar ? (0, q.jsx)(H, { ...y }) : (0, q.jsx)(le, { ...y });
+})), Te = (e) => {
+	let { border: t, createBorder: n } = e, [r, { width: i, height: a }] = p(), s = f(), c = {}, l = t ? Object.keys(t) : [], u = l.length;
+	for (let e = 0; e < u; e++) {
+		let n = l[e], r = t?.[n];
+		r?.style && r.style !== o.StrokeStyle.None && (c[n] = {
+			style: r.style,
+			color: r.color
+		});
+	}
+	let m = Object.keys(c).length > 0, h = Math.min(i, a), g = h > 0 ? Oe(h, s) : null, _ = "";
+	if (g) {
+		let { start: e, span: t, dot: n } = g, r = (e, t) => t === 0 && !!c.top || t === 2 && !!c.horizontal || t === 4 && !!c.bottom || e === 0 && !!c.left || e === 2 && !!c.vertical || e === 4 && !!c.right || e === t && !!c.diagonalDown || e + t === 4 && !!c.diagonalUp, i = n / s, 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) || (_ += `M ${(e + o * t / 4 + .5) / s - a},${(e + n * t / 4 + .5) / s - a} h ${i} v ${i} h ${-i} Z `);
+	}
+	return (0, q.jsxs)(d, { children: [" ", (0, q.jsx)(M, {
+		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: g ? (0, q.jsxs)(q.Fragment, { children: [(0, q.jsx)("svg", {
+			viewBox: `0 0 ${h} ${h}`,
+			className: "grid",
+			style: {
+				top: "0px",
+				left: "0px",
+				width: `${h}px`,
+				height: `${h}px`,
+				position: "absolute",
+				overflow: "visible"
+			},
+			children: (0, q.jsx)("path", {
+				className: "fill",
+				d: _
+			})
+		}), (0, q.jsx)(M, {
+			className: "border-container",
+			sx: {
+				position: "absolute",
+				top: "0px",
+				left: "0px",
+				width: `${h}px`,
+				height: `${h}px`,
+				"& svg path": { filter: re }
+			},
+			children: (0, q.jsx)(A, {
+				getBorderAt: (e, t) => {
+					if (!n || !m) return null;
+					let r = {
+						diagonalUp: c.diagonalUp,
+						diagonalDown: c.diagonalDown
+					};
+					return e.rowIndex === 0 ? (r.top = c.top, r.bottom = c.horizontal) : (r.top = c.horizontal, r.bottom = c.bottom), e.colIndex === 0 ? (r.left = c.left, r.right = c.vertical) : (r.left = c.vertical, r.right = c.right), n(r);
+				},
+				getMergeAt: De,
+				width: g.span / s,
+				height: g.span / s,
+				style: {
+					top: g.start / s + "px",
+					left: g.start / s + "px",
+					width: g.span / s + "px",
+					height: g.span / s + "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 = o.StrokeStyle.Thin, disabled: a, darkMode: l = !1, showStylingBefore: u = !0, onSelectBorder: f, onPreviewBorder: p, selectedBorder: m, createBorder: _, ...v } = e, y = x(f ?? ((e) => {}), [f]), S = x(p ?? ((e) => {}), [p]), C = g(), w = h("borderOptions"), [T, E] = (0, K.useState)(), [D, O] = (0, K.useState)(), k = m || { bottom: {
+		style: i,
+		color: n?.toString() ?? c.Named.Gray
+	} }, A = T ?? k?.bottom?.style ?? i, j = D ?? (k?.bottom?.color ? new s(k?.bottom?.color, r) : void 0) ?? n ?? null, ee = x((e) => (0, q.jsx)(Te, {
+		border: e,
+		createBorder: _
+	}), [_]), N = (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) => {
+		y?.(e);
+	}, []), te = (0, K.useCallback)((e) => {
+		S?.(e);
+	}, []), ne = (0, K.useCallback)((e) => {
+		let { closeFloatAll: t } = e, i = (e, n, r = "bottom", i = !1) => {
+			let a = N(e, j ?? null, i ? o.StrokeStyle.None : A ?? null), s = i ? N([], j ?? null, A ?? null) : a;
+			return (0, q.jsx)(R, {
+				icon: ee(s),
+				propsTooltip: {
+					label: n,
+					simple: !0,
+					placement: r
+				},
+				onClick: () => {
+					t?.(), te(a), P(a);
+				}
+			});
+		}, c = (0, q.jsxs)(q.Fragment, { children: [(0, q.jsxs)(M, {
+			sx: {
+				display: "flex",
+				padding: "6px 16px",
+				justifyContent: "center",
+				rowGap: "2px",
+				gap: "2px"
+			},
+			children: [
+				i([
+					o.Edge.Left,
+					o.Edge.Top,
+					o.Edge.Right,
+					o.Edge.Bottom,
+					o.Edge.Horizontal,
+					o.Edge.Vertical
+				], C("border.all"), "top"),
+				i([o.Edge.Horizontal, o.Edge.Vertical], C("border.inner"), "top"),
+				i([o.Edge.Horizontal], C("border.insideHorizontal"), "top"),
+				i([o.Edge.Vertical], C("border.insideVertical"), "top"),
+				i([
+					o.Edge.Left,
+					o.Edge.Top,
+					o.Edge.Right,
+					o.Edge.Bottom
+				], C("border.outside"), "top")
+			]
+		}), (0, q.jsxs)(M, {
+			sx: {
+				display: "flex",
+				padding: "6px 16px",
+				justifyContent: "center",
+				rowGap: "2px",
+				gap: "2px"
+			},
+			children: [
+				i([o.Edge.Left], C("border.left")),
+				i([o.Edge.Top], C("border.top")),
+				i([o.Edge.Right], C("border.right")),
+				i([o.Edge.Bottom], C("border.bottom")),
+				i([
+					o.Edge.Left,
+					o.Edge.Top,
+					o.Edge.Right,
+					o.Edge.Bottom,
+					o.Edge.Horizontal,
+					o.Edge.Vertical,
+					o.Edge.DiagonalUp,
+					o.Edge.DiagonalDown
+				], C("border.none"), "bottom", !0)
+			]
+		})] }), f = (0, q.jsx)(q.Fragment, { children: (0, q.jsxs)(M, {
+			sx: {
+				display: "flex",
+				padding: "6px 16px",
+				flexDirection: "row",
+				gap: "6px"
+			},
+			children: [(0, q.jsx)(Ce, {
+				variant: L.Toolbar,
+				icon: (0, q.jsx)(d, { iconKey: "stroke.colored" }),
+				selectedColor: A === o.StrokeStyle.None ? new s("transparent") : j ?? new s("transparent"),
+				onPreviewColor: (e) => {
+					O(e);
+				},
+				onSelectColor: (e, t) => {
+					O(e);
+				},
+				darkMode: l,
+				tooltip: C("border.colorTooltip"),
+				propsPanel: {
+					disableAlpha: !0,
+					autoColor: n,
+					schemeLookup: r,
+					...b("grid", l ? "dark" : "light")
+				},
+				disabled: a || A === o.StrokeStyle.None,
+				shouldCloseFloatAll: !1
+			}), (0, q.jsx)(we, {
+				selectedStyle: A,
+				onSelectStyle: E,
+				styleColor: j,
+				darkMode: l,
+				variant: L.Toolbar
+			})]
+		}) });
+		return (0, q.jsxs)(M, {
+			...b("grid", l ? "dark" : "light"),
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				paddingTop: "4px",
+				paddingBottom: "4px"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				u ? f : c,
+				(0, q.jsx)(V, { orientation: "horizontal" }),
+				u ? c : f
+			]
+		});
+	}, [
+		A,
+		j,
+		n,
+		A,
+		r,
+		l,
+		C
+	]), F = (0, K.useMemo)(() => ee(k), [k, l]);
+	return (0, q.jsx)(H, {
+		ref: t,
+		renderPopupPanel: ne,
+		propsPopup: { propsPopper: { resizeOnOverflow: !1 } },
+		renderTooltip: ({ children: e, disabled: t }) => (0, q.jsx)(ie, {
+			label: w?.getLabel?.(),
+			description: w?.getDescription?.(),
+			disabled: t,
+			children: e
+		}),
+		onQuickClick: () => {
+			y?.(k);
+		},
+		disabled: a,
+		icon: F,
+		...v
+	});
+})), 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 } = D(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: O.filter((e) => e.gradient)
+}, {
+	labelKey: a("conditionalFormat.solidFill"),
+	presets: O.filter((e) => !e.gradient)
+}]), Le = Object.freeze([{
+	labelKey: a("conditionalFormat.threeColor"),
+	presets: T.filter((e) => e.stops.length === 3)
+}, {
+	labelKey: a("conditionalFormat.twoColor"),
+	presets: T.filter((e) => e.stops.length === 2)
+}]), Re = Object.freeze(E.map((e) => ({
+	labelKey: Ae[e.key],
+	columns: 2,
+	presets: e.rows.flatMap(([e, t]) => [w(e), t ? w(t) : null])
+}))), ze = {
+	dataBar: Ie,
+	colorScale: Le,
+	iconSet: Re
+}, Be = (e, t) => e.type === l.ScaleType.DataBar ? fe(e, de(e.color, t)?.toCSS("adaptive") ?? "var(--sxl-color-primary, rgb(33, 115, 70))") : e.type === l.ScaleType.ColorScale ? G(e.stops ?? [], me, t) : [], Ve = (e, t) => e.type === l.ScaleType.IconSet ? (0, q.jsx)(C, {
+	icons: j(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 = g(), a = k();
+	return (0, q.jsx)(M, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			padding: "2px 8px 4px"
+		},
+		children: t.map((e) => (0, q.jsxs)(M, { children: [(0, q.jsx)(ae, { children: i(e.labelKey) }), (0, q.jsx)(M, {
+			sx: {
+				display: "grid",
+				gridTemplateColumns: `repeat(${e.columns ?? 3}, auto)`,
+				gap: "3px",
+				marginBottom: "4px"
+			},
+			children: e.presets.map((e, t) => e === null ? (0, q.jsx)(M, {}, t) : (0, q.jsx)(pe, {
+				sheet: !0,
+				disabled: r,
+				sx: e.type === l.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 = y([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 = y([n])[0], c = ze[r], l = a ?? (!s || s.disabled()), u = (0, K.useCallback)((e) => se({
+		...e,
+		children: (0, q.jsx)(Ue, {
+			commandKey: n,
+			groups: c,
+			disabled: l
+		})
+	}), [
+		n,
+		c,
+		l
+	]);
+	return (0, q.jsx)(B, {
+		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 };