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

package/cdn/assets/DtO07D35O2tAh7f4.js

@@ -0,0 +1,1241 @@
+/**
+* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.11
+*
+* (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 "./C7fZFw4yQ9VNHtnV.js";
+import { t } from "./Cf0bbHHOW6iwvyXg.js";
+import { t as n } from "./8CW-puLLSNyeaGce.js";
+import { A as r, C as i, p as a } from "./PD_ckP5IyZurtALu.js";
+import { bt as o, t as s, x as c } from "./u8iMUyjw60ayROFo.js";
+import { Si as l } from "./D97AuczhOIBnqMXI.js";
+import { s as u } from "./Cl3d4ILjFxp4IdO9.js";
+import { r as d } from "./BmWMHgdcbZuZUGtm.js";
+import { Et as f, K as p, Nt as m, U as h, at as g, j as _, mt as v, t as y, vt as b, z as x } from "./BJ5RRYxWA_yTbVpr.js";
+import { M as S, Nt as C, O as w, W as T, _ as E, bt as D, nt as O, s as k, w as A, y as j } from "./DliTwLXIImeC0eub.js";
+import { n as ee, t as M } from "./DxI14nqCsNi-yexx.js";
+import { N, Q as te, T as ne, a as P, i as F, j as I, p as re, t as L } from "./CGklNVK7pkjOQ6XF.js";
+import { B as R, D as ie, H as ae, L as oe, R as se, S as ce, T as le, c as ue, k as de, t as z, v as B, w as V } from "./DG4PyKuuGu6RkAEv.js";
+import { t as H } from "./BI1IDPvx--ARef3O.js";
+import { t as U } from "./D7g9SLSLSONiRP8_.js";
+import { c as fe, i as pe, n as me, o as he, r as W, t as G } from "./HMCOTgDNR6bpWL7f.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 = b.EmptyCssProperties, children: u, alphaWhite: d, alphaGrey: p, darkMode: m, alphaCheckSize: h = 7, ...g } = e;
+	if (!t) throw Error("a selectedColor is required");
+	let _ = (0, K.useCallback)((e) => {
+		i?.(e), e.isDefaultPrevented() || (e.ctrlKey ? r?.(t.toRGBA()) : n?.(t.toRGBA()));
+	}, [
+		n,
+		r,
+		i,
+		t
+	]), v = (0, K.useCallback)((e) => {
+		o?.(e), e.isDefaultPrevented() || r?.(t.toRGBA());
+	}, [
+		r,
+		o,
+		t
+	]), y = (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 === f.Enter && n?.(t.toRGBA());
+	}, [
+		n,
+		a,
+		t
+	]), C = (0, K.useMemo)(() => t.toRGBA().alpha === 1 ? null : (0, q.jsx)(U, {
+		size: h,
+		white: d,
+		grey: p,
+		style: {
+			position: "absolute",
+			width: "calc(100% - 1.5px)",
+			height: "calc(100% - 1.5px)",
+			top: "0.75px",
+			left: "0.75px"
+		}
+	}), [
+		d,
+		p,
+		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: _,
+		onKeyDown: S,
+		onMouseOver: v,
+		onMouseLeave: y,
+		onFocus: x,
+		children: [C, (0, q.jsx)("div", {
+			style: {
+				position: "absolute",
+				top: "0px",
+				left: "0px",
+				height: "100%",
+				width: "100%",
+				background: t.toCSS(m)
+			},
+			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)(P, {
+		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 = b.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
+	]), _ = (0, K.useMemo)(() => n ? (0, q.jsx)(I, {
+		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: [_, (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 = h(r("studio:customColorPanel", () => import("./RZYxEHY1tap8fDMU.js")).load, { renderError: (e) => (0, q.jsx)(B, { error: e }) }), X = (0, K.memo)((0, K.forwardRef)((e, t) => {
+	let { selectedColor: n = null, previewColor: r = e.selectedColor ?? null, recentColors: o, schemeLookup: c, disableAlpha: l = !1, previewDebounceTime: f = 100, initialPanelType: p, defaultButtonSize: m = 24, width: h, onElementLoad: g, onDone: _, 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, ...te } = e, P = v(), F = E ?? P(D ?? a("color.automatic")), re = r || n, L = x(S ?? ((e) => {}), [S]), R = x(C ?? ((e) => {}), [C]), ie = x(w ?? ((e, t) => {}), [w]), oe = x(y ?? (() => {}), [y]), se = x(b ?? (() => {}), [b]), [ce, le] = (0, K.useState)(!1), de = ee(), z = (0, K.useMemo)(() => c || s.getDefaultSchemeLookup(), [c]), B = (0, K.useMemo)(() => {
+		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), n = [];
+		Y(P("color.scheme.bg1"), "bg1", z, n, e, t), Y(P("color.scheme.tx1"), "tx1", z, n, e, t), Y(P("color.scheme.bg2"), "bg2", z, n, e, t), Y(P("color.scheme.tx2"), "tx2", z, n, e, t), Y(P("color.scheme.accent", { n: 1 }), "accent1", z, n, e, t), Y(P("color.scheme.accent", { n: 2 }), "accent2", z, n, e, t), Y(P("color.scheme.accent", { n: 3 }), "accent3", z, n, e, t), Y(P("color.scheme.accent", { n: 4 }), "accent4", z, n, e, t), Y(P("color.scheme.accent", { n: 5 }), "accent5", z, n, e, t), Y(P("color.scheme.accent", { n: 6 }), "accent6", z, n, e, t);
+		let r = u.buildPalette(n, z, e, t), i = [];
+		if (Y(P("color.standard.darkRed"), "C00000", z, i, e, t), Y(P("color.standard.red"), "FF0000", z, i, e, t), Y(P("color.standard.orange"), "FFC000", z, i, e, t), Y(P("color.standard.yellow"), "FFFF00", z, i, e, t), Y(P("color.standard.lightGreen"), "92D050", z, i, e, t), Y(P("color.standard.green"), "00B050", z, i, e, t), Y(P("color.standard.lightBlue"), "00B0F0", z, i, e, t), Y(P("color.standard.blue"), "0070C0", z, i, e, t), Y(P("color.standard.darkBlue"), "002060", z, i, e, t), l ? Y(P("color.standard.purpleFruit"), "7030A0", z, i, e, t) : Y(P("color.standard.transparent"), "00000000", z, 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: P("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
+		};
+	}, [
+		z,
+		o,
+		l,
+		T
+	]);
+	(0, K.useEffect)(() => {
+		g?.();
+	}, []);
+	let [V, U] = (0, K.useState)(!1), fe = (0, K.useCallback)(() => {
+		U((e) => !e);
+	}, []);
+	(0, K.useEffect)(() => {
+		if (p) U(p === ge.Custom);
+		else if (n) {
+			let e = n.toString(), t = B.mapAllPresets.get(e);
+			t ||= (e = n.toRGBA().toString(), B.mapAllPresetsRGB.get(e));
+			let r = B.mapRecent.get(e);
+			U(!t && !r);
+		}
+	}, [n, p]);
+	let pe = (0, K.useCallback)(i.debounce((e) => {
+		L?.(e);
+	}, f), [L, f]), [me, he] = (0, K.useState)();
+	(0, K.useEffect)(() => {
+		he(r || n);
+	}, [r, n]);
+	let W = x((e) => {
+		R && (R(e), pe(e));
+	}, [R]), G = x((e) => {
+		W(e ? new s({
+			val: e.definition.val,
+			adjs: e.definition.adjs
+		}, z) : null);
+	}, [z]), ve = (0, K.useCallback)((e) => {
+		e.ctrlKey && U(!0);
+	}, []), be = x((e) => {
+		let t = !1;
+		if (e) {
+			let n = e.toString();
+			t = !B.mapAllPresets.has(n);
+		}
+		ie?.(e, t);
+	}, [ie, B]), X = x((e) => {
+		let t = e ? new s({
+			val: e.definition.val,
+			adjs: e.definition.adjs
+		}, z) : null;
+		Promise.resolve(_?.()).then(() => {
+			be(t);
+		});
+	}, [z, _]), Se = x((e) => {
+		W(e ? new s(e, z) : null);
+	}, [z]), Ce = (0, K.useMemo)(() => window.EyeDropper === void 0 ? (0, q.jsx)(q.Fragment, {}) : (0, q.jsx)(N, {
+		"aria-label": P("color.eyeDropper"),
+		size: "small",
+		sx: { color: (e) => e.palette.text.icon ?? e.palette.action.active },
+		onClick: async () => {
+			le(!0), oe?.(), await new EyeDropper().open().then((e) => {
+				le(!1), se?.();
+				let t = new s(e.sRGBHex), n = t.toString(), r = B.mapAllPresets.get(n);
+				if (r ||= (n = t.toRGBA().toString(), B.mapAllPresetsRGB.get(n)), !r) {
+					let e = t.toRGBA();
+					B.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), W(r || t);
+			}).catch((e) => {
+				le(!1), e?.name !== "AbortError" && console.error(e);
+			});
+		},
+		children: (0, q.jsx)(d, { iconKey: "Colorize" })
+	}), [B, A]), Z = (0, K.useMemo)(() => {
+		if (!V) return;
+		let e = {
+			opacity: V ? 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
+			})
+		});
+	}, [V, re]), Q = (0, K.useMemo)(() => ({
+		onClick: ve,
+		alphaGrey: de.palette.text.icon ?? de.palette.action.active
+	}), [ve, de]), $ = (0, K.useMemo)(() => {
+		if (!T) return null;
+		let e = {
+			description: F,
+			definition: {
+				val: T.getVal(),
+				adjs: T.getAdjustments()
+			}
+		};
+		return (0, q.jsx)(q.Fragment, { children: (0, q.jsxs)(ae, {
+			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: z,
+					colorDef: e,
+					selectedColor: n === null ? T : n,
+					previewColor: r === null ? T : r,
+					defaultButtonSize: m,
+					isLarge: !0,
+					darkMode: A,
+					compareRGB: k,
+					propsSwatch: Q
+				})
+			}), (0, q.jsx)(I, {
+				noWrap: !0,
+				component: "div",
+				style: {
+					display: "flex",
+					flex: "1 1 100%",
+					marginLeft: "8px",
+					userSelect: "none"
+				},
+				children: F
+			})]
+		}) });
+	}, [
+		T,
+		F,
+		z,
+		n,
+		r,
+		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,
+		...te,
+		children: [
+			(0, q.jsxs)("div", {
+				style: {
+					position: "relative",
+					display: "flex"
+				},
+				children: [(0, q.jsxs)("div", {
+					style: { opacity: V ? "0" : 1 },
+					children: [
+						$ && O === _e.Start ? (0, q.jsxs)(q.Fragment, { children: [$, (0, q.jsx)(H, { style: {
+							marginTop: "2px",
+							marginBottom: "10px"
+						} })] }) : null,
+						(0, q.jsx)(J, {
+							title: P("color.themeColors"),
+							schemeColorLookup: z,
+							colorDefs: B.primaryColors,
+							selectedColor: n,
+							previewColor: r === void 0 ? n : r,
+							propsSwatch: Q,
+							onPreviewColorDef: G,
+							onSelectColorDef: X,
+							compareRGB: k,
+							darkMode: A
+						}),
+						(0, q.jsx)(J, {
+							schemeColorLookup: z,
+							colorDefs: B.modifiedPresets,
+							selectedColor: n,
+							previewColor: r === void 0 ? n : r,
+							propsSwatch: Q,
+							onPreviewColorDef: G,
+							onSelectColorDef: X,
+							compareRGB: k,
+							darkMode: A
+						}),
+						(0, q.jsx)(H, { style: { marginBottom: "10px" } }),
+						(0, q.jsx)(J, {
+							title: P("color.standardColors"),
+							schemeColorLookup: z,
+							colorDefs: B.standardColors,
+							selectedColor: n,
+							previewColor: r === void 0 ? n : r,
+							propsSwatch: Q,
+							onPreviewColorDef: G,
+							onSelectColorDef: X,
+							compareRGB: k,
+							darkMode: A
+						}),
+						(0, q.jsxs)("div", {
+							style: {
+								opacity: B.recentColorsLimited.length === 0 ? "0" : void 0,
+								display: B.recentColorsLimited.length === 0 ? "none" : void 0
+							},
+							children: [(0, q.jsx)(H, { style: { marginBottom: "10px" } }), (0, q.jsx)(J, {
+								title: P("color.recentColors"),
+								schemeColorLookup: z,
+								colorDefs: B.recentColorsLimited,
+								selectedColor: n,
+								previewColor: r === void 0 ? n : r,
+								propsSwatch: Q,
+								onPreviewColorDef: G,
+								onSelectColorDef: X,
+								compareRGB: k,
+								darkMode: A
+							})]
+						}),
+						$ && O === _e.End ? (0, q.jsxs)(q.Fragment, { children: [
+							(0, q.jsx)(H, { sx: {
+								marginTop: "2px",
+								marginBottom: "2px"
+							} }),
+							$,
+							(0, q.jsx)("div", { style: { marginBottom: "2px" } })
+						] }) : null
+					]
+				}), Z]
+			}),
+			(0, q.jsx)(H, { 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)(ne, {
+							style: { minWidth: "75px" },
+							value: "check",
+							variant: "outlined",
+							size: "small",
+							onClick: () => {
+								fe();
+							},
+							children: (0, q.jsxs)("span", {
+								style: {
+									display: "grid",
+									alignItems: "center"
+								},
+								children: [(0, q.jsx)("span", {
+									style: {
+										gridArea: "1 / 1",
+										visibility: V ? "hidden" : "visible"
+									},
+									children: P("color.custom")
+								}), (0, q.jsx)("span", {
+									style: {
+										gridArea: "1 / 1",
+										visibility: V ? "visible" : "hidden"
+									},
+									children: P("color.preset")
+								})]
+							})
+						}), (0, q.jsx)(ne, {
+							variant: "contained",
+							size: "small",
+							style: { minWidth: "75px" },
+							onClick: () => {
+								Promise.resolve(_?.()).then(() => {
+									be(me ?? null);
+								});
+							},
+							children: P("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 = z.Toolbar, propsPanel: p, shouldCloseFloatAll: m = !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 || p?.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(p?.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,
+		p?.autoColor,
+		i,
+		g
+	]), te = x((e) => {
+		b?.(r ?? null, !1);
+	}, [b, r]), [ne, P] = (0, K.useState)(!1), F = (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 === f.Enter && (m ? r?.() : t?.());
+			},
+			onPreviewColorImmediate: j,
+			onPreviewColor: A,
+			onSelectColor: ee,
+			onEyeDropStart: () => P(!0),
+			onEyeDropStop: () => P(!1),
+			compareRGB: h,
+			darkMode: g
+		});
+	}, [
+		n,
+		S,
+		m,
+		E,
+		p?.autoColor,
+		g
+	]), I = {
+		onQuickClick: r ? te : void 0,
+		createPopupPanel: F,
+		propsPopup: { propsPopper: { resizeOnOverflow: !1 } },
+		onPopupOpen: k,
+		onPopupClose: O,
+		tooltip: a || o || "Color",
+		label: o,
+		icon: N,
+		..._
+	};
+	return u === z.Toolbar ? (0, q.jsx)(V, {
+		ref: t,
+		...I
+	}) : (0, q.jsx)(R, {
+		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)(te, {
+		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)(O, {
+			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, createPopupPanel: a, styleColor: s, selectedStyle: c, onSelectStyle: l, showNone: u = !0, darkMode: d, sx: p, ...m } = e, h = x(l ?? ((e) => {}), []), g = v(), _ = (0, K.useCallback)((e) => {
+		let { popupContainer: t, closeFloat: n, ...a } = e, l = [], p = o.BuiltInDefinitionsArray;
+		for (let e = 0; e < p.length; e++) {
+			let t = p[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(g, 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(g, t) : a, l.push((0, q.jsx)(de, {
+				className: "border-stroke",
+				tabIndex: 0,
+				sx: {
+					height: "28px",
+					"& svg path.activeColor": { filter: L(4) },
+					paddingLeft: "16px"
+				},
+				propsTooltip: { description: r ? "" : Q(g, t) },
+				icon: null,
+				disabled: i,
+				onMouseDown: (e) => e.preventDefault(),
+				onMouseUp: () => {
+					n?.(), h(t.style);
+				},
+				onKeyDown: (e) => {
+					e.which === f.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,
+		g
+	]), 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(g, 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: L() }
+				},
+				children: e
+			})) : null;
+		}, [
+			c,
+			s,
+			g
+		]),
+		tooltip: g("border.styleTooltip", { style: Q(g, (0, K.useMemo)(() => o.BuiltInDefinitions.get(c), [c])) }),
+		sx: p,
+		createPopupPanel: _,
+		...m
+	};
+	return n === z.Toolbar ? (0, q.jsx)(V, { ...y }) : (0, q.jsx)(R, { ...y });
+})), Te = (e) => {
+	let { border: t, createBorder: n } = e, [r, { width: i, height: a }] = _(), s = m(), 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 f = Object.keys(c).length > 0, p = Math.min(i, a), h = p > 0 ? Oe(p, s) : null, g = "";
+	if (h) {
+		let { start: e, span: t, dot: n } = h, 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) || (g += `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: h ? (0, q.jsxs)(q.Fragment, { children: [(0, q.jsx)("svg", {
+			viewBox: `0 0 ${p} ${p}`,
+			className: "grid",
+			style: {
+				top: "0px",
+				left: "0px",
+				width: `${p}px`,
+				height: `${p}px`,
+				position: "absolute",
+				overflow: "visible"
+			},
+			children: (0, q.jsx)("path", {
+				className: "fill",
+				d: g
+			})
+		}), (0, q.jsx)(M, {
+			className: "border-container",
+			sx: {
+				position: "absolute",
+				top: "0px",
+				left: "0px",
+				width: `${p}px`,
+				height: `${p}px`,
+				"& svg path": { filter: re }
+			},
+			children: (0, q.jsx)(E, {
+				getBorderAt: (e, t) => {
+					if (!n || !f) 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: h.span / s,
+				height: h.span / s,
+				style: {
+					top: h.start / s + "px",
+					left: h.start / s + "px",
+					width: h.span / s + "px",
+					height: h.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: m, selectedBorder: h, createBorder: _, ...y } = e, b = x(f ?? ((e) => {}), [f]), S = x(m ?? ((e) => {}), [m]), C = v(), w = p("borderOptions"), [T, E] = (0, K.useState)(), [D, O] = (0, K.useState)(), k = h || { 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;
+	}, []), te = (0, K.useCallback)((e) => {
+		b?.(e);
+	}, []), ne = (0, K.useCallback)((e) => {
+		S?.(e);
+	}, []), P = (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)(se, {
+				icon: ee(s),
+				propsTooltip: {
+					label: n,
+					simple: !0,
+					placement: r
+				},
+				onClick: () => {
+					t?.(), ne(a), te(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: z.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,
+					...g("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: z.Toolbar
+			})]
+		}) });
+		return (0, q.jsxs)(M, {
+			...g("grid", l ? "dark" : "light"),
+			sx: {
+				display: "flex",
+				flexDirection: "column",
+				paddingTop: "4px",
+				paddingBottom: "4px"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: [
+				u ? f : c,
+				(0, q.jsx)(ie, { orientation: "horizontal" }),
+				u ? c : f
+			]
+		});
+	}, [
+		A,
+		j,
+		n,
+		A,
+		r,
+		l,
+		C
+	]), I = (0, K.useMemo)(() => ee(k), [k, l]);
+	return (0, q.jsx)(V, {
+		ref: t,
+		createPopupPanel: P,
+		propsPopup: { propsPopper: { resizeOnOverflow: !1 } },
+		createTooltip: ({ children: e }, t) => (0, q.jsx)(F, {
+			label: w?.getLabel?.(),
+			description: w?.getDescription?.(),
+			disabled: t,
+			children: e
+		}),
+		onQuickClick: () => {
+			b?.(k);
+		},
+		disabled: a,
+		icon: I,
+		...y
+	});
+})), 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 } = A(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: T.filter((e) => e.gradient)
+}, {
+	labelKey: a("conditionalFormat.solidFill"),
+	presets: T.filter((e) => !e.gradient)
+}]), Le = Object.freeze([{
+	labelKey: a("conditionalFormat.threeColor"),
+	presets: D.filter((e) => e.stops.length === 3)
+}, {
+	labelKey: a("conditionalFormat.twoColor"),
+	presets: D.filter((e) => e.stops.length === 2)
+}]), Re = Object.freeze(S.map((e) => ({
+	labelKey: Ae[e.key],
+	columns: 2,
+	presets: e.rows.flatMap(([e, t]) => [C(e), t ? C(t) : null])
+}))), ze = {
+	dataBar: Ie,
+	colorScale: Le,
+	iconSet: Re
+}, Be = (e, t) => e.type === l.ScaleType.DataBar ? pe(e, fe(e.color, t)?.toCSS("adaptive") ?? "var(--sxl-color-primary, rgb(33, 115, 70))") : e.type === l.ScaleType.ColorScale ? G(e.stops ?? [], he, t) : [], Ve = (e, t) => e.type === l.ScaleType.IconSet ? (0, q.jsx)(w, {
+	icons: j(e.iconSet),
+	order: "descending",
+	size: 14,
+	gap: 3
+}) : (0, q.jsx)(W, { rows: Be(e, t) }), He = (0, K.memo)((e) => {
+	let { groups: t, onPick: n, disabled: r } = e, i = v(), 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)(le, { 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)(me, {
+				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) => ce({
+		...e,
+		children: (0, q.jsx)(Ue, {
+			commandKey: n,
+			groups: c,
+			disabled: l
+		})
+	}), [
+		n,
+		c,
+		l
+	]);
+	return (0, q.jsx)(oe, {
+		ref: t,
+		createPopupPanel: 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 };