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

package/browser/esm/DyanYbYqqcmiADCL.mjs

@@ -0,0 +1,1298 @@
+/**
+* @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 { G as r, m as i } from "./Cif0315haNLmyMj-.mjs";
+import { r as a } from "./BoYTs2k2yWAKW5LM.mjs";
+import { dt as o } from "./B1mhVM8eRIyuL-VB.mjs";
+import { U as s, d as c, g as l, t as u } from "./Dac2pa3EUXg26xcV.mjs";
+import { B as d, nn as f } from "./DmdChrGkm5oufbRE.mjs";
+import { t as p } from "./CuuWjNFFRxXfbQnD.mjs";
+import { Bt as m, C as h, Dt as g, K as _, N as v, Nt as y, R as b, Vt as x, bt as S, et as C, it as w, lt as T, n as ee, v as E } from "./COPR5sXYEAeM73Ep.mjs";
+import { t as D } from "./DAOjpr33PSwrKpc0.mjs";
+import { M as O, V as te } from "./DJpfJorMrLhI9gOT.mjs";
+import { m as ne, t as k, y as A } from "./CW9UkULY0jchroYa.mjs";
+import { t as j } from "./BIX8xNwuEM4TocmY.mjs";
+import { t as M } from "./Bs9KvD8n3018Rkew.mjs";
+import { t as re } from "./IHk5INXMVCzM8mcG.mjs";
+import { L as ie, y as ae } from "./_9nyq5XWoIo-JhAp.mjs";
+import { t as N } from "./CrIHwDDOUDcx5WSM.mjs";
+import { n as P, t as oe } from "./DxVYvgAm5kxHC0F6.mjs";
+import { a as se, n as ce, o as le, r as ue } from "./COh0UZopdYUbHVON.mjs";
+import { a as de, o as fe } from "./n3-ex6JlSC4JH_g3.mjs";
+import { a as pe, d as F, i as me, n as he, r as ge, s as _e } from "./CX1VWdQjKSXDMfs9.mjs";
+import { a as I, c as L, i as R, l as ve, n as z, o as B, r as V, s as H, t as U, u as ye } from "./BqPEItNoP2iZ2lkz.mjs";
+import { n as be } from "./D9ukH57ON841L8l9.mjs";
+import { i as xe } from "./Ovh5ic9JtH6cyxub.mjs";
+import { n as Se, t as Ce } from "./CNcLDXQDQECQxvtA.mjs";
+var W = e(t(), 1), G = e(n(), 1), K = (0, W.memo)((e) => {
+	let { variant: t = "format", children: n, sx: r, ...i } = e;
+	return (0, G.jsx)(D, {
+		className: `sxl-cf-rule-section sxl-cf-rule-section-${t}`,
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1,
+			p: 2,
+			border: 1,
+			borderColor: "divider",
+			borderRadius: 1,
+			...t === "config" ? { backgroundColor: "action.hover" } : null,
+			...r
+		},
+		...i,
+		children: n
+	});
+});
+K.displayName = "RuleSection";
+var we = new u("transparent"), Te = {
+	lightRedFillDarkRedText: i("conditionalFormat.preset.lightRedFillDarkRedText"),
+	yellowFillDarkYellowText: i("conditionalFormat.preset.yellowFillDarkYellowText"),
+	greenFillDarkGreenText: i("conditionalFormat.preset.greenFillDarkGreenText"),
+	lightRedFill: i("conditionalFormat.preset.lightRedFill"),
+	redText: i("conditionalFormat.preset.redText"),
+	redBorder: i("conditionalFormat.preset.redBorder")
+}, Ee = (e) => e ? typeof e == "string" ? e : e.type === s.Type.None ? null : e.color ?? e.foreground ?? null : null, q = (e, t) => e === "auto" ? null : L(e, t), De = (0, W.memo)((e) => {
+	let { format: t, onFormatChange: n, readOnly: r, ...l } = e, u = o(), { workbook: d, schemeLookup: f, themeKey: p, darkMode: m, propsColorPanel: h } = H(), g = t?.font ?? null, _ = (g?.weight ?? 400) >= 600, v = g?.style === c.Style.Italic, y = !!g?.underline && g.underline !== c.UnderlineStyle.None, b = !!g?.strike && g.strike !== c.StrikeStyle.None, x = (e) => {
+		let r = { ...g };
+		for (let [t, n] of Object.entries(e)) n === void 0 ? delete r[t] : r[t] = n;
+		let i = { ...t };
+		Object.keys(r).length === 0 ? delete i.font : i.font = r, n(Object.keys(i).length === 0 ? null : i);
+	}, S = (0, W.useMemo)(() => d?.getStyles().getNormal().getFont().getColor(), [d, p]), C = (0, W.useMemo)(() => q(g?.color, d), [
+		g?.color,
+		d,
+		p
+	]), w = (0, W.useMemo)(() => q(Ee(t?.fill), d), [
+		t?.fill,
+		d,
+		p
+	]), T = {
+		padding: "4px",
+		border: "none",
+		borderRadius: 1
+	};
+	return (0, G.jsxs)(K, {
+		...l,
+		children: [(0, G.jsxs)(D, {
+			sx: {
+				display: "flex",
+				alignItems: "flex-start",
+				gap: 1
+			},
+			children: [(0, G.jsx)(D, {
+				sx: {
+					flex: "1 1 auto",
+					minWidth: 0,
+					display: "flex",
+					gap: .5,
+					flexWrap: "wrap"
+				},
+				children: ee.map((e, t) => {
+					let i = q(Ee(e.style.fill), d), a = q(e.style.font?.color, d), o = e.style.borders ? q(Object.values(e.style.borders)[0]?.color, d) : null;
+					return (0, G.jsx)(z, {
+						sheet: !0,
+						title: u(Te[e.key] ?? e.key),
+						disabled: r,
+						onClick: () => n(structuredClone(e.style)),
+						sx: {
+							backgroundColor: i?.toCSS("adaptive") ?? void 0,
+							color: a?.toCSS("adaptive") ?? void 0,
+							outline: o ? `1px solid ${o.toCSS("adaptive")}` : void 0,
+							outlineOffset: "-3px"
+						},
+						children: "Aa"
+					}, t);
+				})
+			}), (0, G.jsx)(z, {
+				title: u("conditionalFormat.clearStyle"),
+				disabled: r || !t,
+				onClick: () => n(null),
+				sx: {
+					color: "text.secondary",
+					"&:disabled": { opacity: .4 }
+				},
+				children: (0, G.jsx)(a, {
+					iconKey: "ClearFormats",
+					size: 16
+				})
+			})]
+		}), (0, G.jsxs)(D, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .25
+			},
+			children: [
+				(0, G.jsx)(P, {
+					value: "bold",
+					size: "small",
+					sx: T,
+					selected: _,
+					disabled: r,
+					onChange: () => x({ weight: _ ? void 0 : 700 }),
+					children: (0, G.jsx)(a, { iconKey: "TextBold" })
+				}),
+				(0, G.jsx)(P, {
+					value: "italic",
+					size: "small",
+					sx: T,
+					selected: v,
+					disabled: r,
+					onChange: () => x({ style: v ? void 0 : c.Style.Italic }),
+					children: (0, G.jsx)(a, { iconKey: "TextItalic" })
+				}),
+				(0, G.jsx)(P, {
+					value: "underline",
+					size: "small",
+					sx: T,
+					selected: y,
+					disabled: r,
+					onChange: () => x({ underline: y ? void 0 : c.UnderlineStyle.Single }),
+					children: (0, G.jsx)(a, { iconKey: "TextUnderline" })
+				}),
+				(0, G.jsx)(P, {
+					value: "strike",
+					size: "small",
+					sx: T,
+					selected: b,
+					disabled: r,
+					onChange: () => x({ strike: b ? void 0 : c.StrikeStyle.Single }),
+					children: (0, G.jsx)(a, { iconKey: "TextStrike" })
+				}),
+				d && (0, G.jsx)(he, {
+					tooltip: u("conditionalFormat.border"),
+					selectedBorder: t?.borders,
+					createBorder: (e) => d.getStyles().getNormal().createStyle({ borders: e }).getBorders(),
+					schemeLookup: f,
+					autoColor: S,
+					darkMode: m,
+					disabled: r,
+					onSelectBorder: (e) => ((e) => {
+						let r = { ...t };
+						e && Object.keys(e).length !== 0 ? r.borders = e : delete r.borders, n(Object.keys(r).length === 0 ? null : r);
+					})(e)
+				}),
+				(0, G.jsx)(F, {
+					icon: "fill.colored",
+					tooltip: u("conditionalFormat.fillColor"),
+					selectedColor: w,
+					disabled: r,
+					onSelectColor: (e) => ((e) => {
+						let r = { ...t };
+						e ? r.fill = {
+							type: s.Type.Solid,
+							color: e.toString()
+						} : delete r.fill, n(Object.keys(r).length === 0 ? null : r);
+					})(e),
+					darkMode: m,
+					propsPanel: {
+						disableAlpha: !0,
+						autoColor: we,
+						autoColorLabelKey: i("color.noFill"),
+						autoColorPosition: _e.End,
+						...h
+					}
+				}),
+				(0, G.jsx)(F, {
+					icon: "text.colored",
+					tooltip: u("conditionalFormat.fontColor"),
+					selectedColor: C,
+					disabled: r,
+					onSelectColor: (e) => x({ color: e ? e.toString() : void 0 }),
+					darkMode: m,
+					propsPanel: {
+						disableAlpha: !0,
+						autoColor: S,
+						...h
+					}
+				})
+			]
+		})]
+	});
+});
+De.displayName = "ConditionalFormatStylePicker";
+var Oe = {
+	[d.ColorStopType.AutoMin]: i("conditionalFormat.stopType.autoMin"),
+	[d.ColorStopType.AutoMax]: i("conditionalFormat.stopType.autoMax"),
+	[d.ColorStopType.Min]: i("conditionalFormat.stopType.min"),
+	[d.ColorStopType.Max]: i("conditionalFormat.stopType.max"),
+	[d.ColorStopType.Num]: i("conditionalFormat.stopType.num"),
+	[d.ColorStopType.Percent]: i("conditionalFormat.stopType.percent"),
+	[d.ColorStopType.Percentile]: i("conditionalFormat.stopType.percentile"),
+	[d.ColorStopType.Formula]: i("conditionalFormat.stopType.formula")
+}, ke = /* @__PURE__ */ new Set([
+	d.ColorStopType.AutoMin,
+	d.ColorStopType.AutoMax,
+	d.ColorStopType.Min,
+	d.ColorStopType.Max
+]), J = (0, W.memo)((e) => {
+	let { label: t, stop: n, onStopChange: r, allowedTypes: i, showColor: a = !1, leading: s, showExclusive: c = !1, readOnly: l, ...u } = e, f = o(), { darkMode: p, toColor: m, propsColorPanel: h } = H(), g = ue(), _ = n.type ?? d.ColorStopType.Num, v = !ke.has(_), y = l || !v, b = _ === d.ColorStopType.Formula, x = n.value?.isIFormula ? n.value : null, S = n.color, C = a ? m(S) : null;
+	return (0, G.jsxs)(D, {
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			gap: .5
+		},
+		...u,
+		children: [
+			t !== void 0 && (0, G.jsx)(O, {
+				variant: "caption",
+				sx: {
+					color: "text.secondary",
+					flex: "0 0 62px",
+					minWidth: 0,
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				children: t
+			}),
+			s,
+			a && (0, G.jsx)(F, {
+				tooltip: f("conditionalFormat.stopColor"),
+				selectedColor: C,
+				disabled: l,
+				onSelectColor: (e) => {
+					e && r({
+						...n,
+						color: e.toString()
+					});
+				},
+				darkMode: p,
+				propsPanel: {
+					disableAlpha: !0,
+					...h
+				}
+			}),
+			c && (0, G.jsxs)(k, {
+				size: "small",
+				value: n.exclusive ? "gt" : "gte",
+				disabled: l,
+				onChange: (e) => {
+					let t = { ...n };
+					e.target.value === "gt" ? t.exclusive = !0 : delete t.exclusive, r(t);
+				},
+				sx: {
+					flex: "0 0 auto",
+					backgroundColor: "background.paper"
+				},
+				children: [(0, G.jsx)(N, {
+					value: "gte",
+					children: ">="
+				}), (0, G.jsx)(N, {
+					value: "gt",
+					children: ">"
+				})]
+			}),
+			(0, G.jsx)(k, {
+				size: "small",
+				value: _,
+				disabled: l,
+				onChange: (e) => ((e) => {
+					let t = {
+						...n,
+						type: e
+					};
+					if (ke.has(e)) delete t.value;
+					else if (t.value === void 0) t.value = e === d.ColorStopType.Formula ? "" : 0;
+					else if (e !== d.ColorStopType.Formula && typeof t.value != "number") {
+						let e = typeof t.value == "string" ? Number(t.value) : NaN;
+						t.value = Number.isFinite(e) ? e : 0;
+					}
+					r(t);
+				})(e.target.value),
+				sx: {
+					flex: "1 1 40%",
+					minWidth: 0,
+					backgroundColor: "background.paper"
+				},
+				children: i.map((e) => (0, G.jsx)(N, {
+					value: e,
+					children: f(Oe[e])
+				}, e))
+			}),
+			b ? (0, G.jsx)(be, {
+				size: "small",
+				home: g.home,
+				value: x ? g.display(x) : `${n.value ?? ""}`,
+				onChangeText: (e) => {
+					r({
+						...n,
+						value: e.trim().length > 0 ? g.compile(e) : e
+					});
+				},
+				placeholder: f("conditionalFormat.enterFormula"),
+				disabled: y,
+				equals: "bare",
+				pickAs: "absolute",
+				label: null,
+				showError: !1,
+				helperText: null,
+				sx: {
+					flex: "1 1 30%",
+					minWidth: 0,
+					"& .MuiInputBase-root": { backgroundColor: y ? "action.disabledBackground" : "background.paper" }
+				}
+			}) : (0, G.jsx)(re, {
+				size: "small",
+				type: "number",
+				placeholder: v ? void 0 : f("conditionalFormat.stopFromData"),
+				value: v ? `${n.value ?? ""}` : "",
+				disabled: y,
+				onChange: (e) => {
+					let t = e.target.value;
+					r({
+						...n,
+						value: t === "" ? 0 : Number(t)
+					});
+				},
+				sx: {
+					flex: "1 1 30%",
+					minWidth: 0,
+					cursor: y ? "not-allowed" : void 0
+				},
+				slotProps: { input: { sx: {
+					backgroundColor: y ? "action.disabledBackground" : "background.paper",
+					cursor: y ? "not-allowed" : void 0
+				} } }
+			})
+		]
+	});
+});
+J.displayName = "ScaleStopRow";
+var Ae = [
+	d.ColorStopType.Min,
+	d.ColorStopType.Max,
+	d.ColorStopType.Num,
+	d.ColorStopType.Percent,
+	d.ColorStopType.Percentile,
+	d.ColorStopType.Formula
+], je = (0, W.memo)((e) => {
+	let { scale: t, onScaleChange: n, readOnly: r, ...a } = e, s = o(), { workbook: c, toColor: l } = H(), u = t.stops ?? [], f = u.length === 2 ? [i("conditionalFormat.stop.minimum"), i("conditionalFormat.stop.maximum")] : [
+		i("conditionalFormat.stop.minimum"),
+		i("conditionalFormat.stop.midpoint"),
+		i("conditionalFormat.stop.maximum")
+	];
+	return (0, G.jsxs)(D, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1
+		},
+		...a,
+		children: [(0, G.jsx)(K, { children: (0, G.jsxs)(D, {
+			sx: {
+				display: "flex",
+				alignItems: "flex-start",
+				gap: 1
+			},
+			children: [(0, G.jsx)(D, {
+				sx: {
+					flex: "1 1 auto",
+					minWidth: 0,
+					display: "flex",
+					gap: .5,
+					flexWrap: "wrap"
+				},
+				children: y.filter((e) => e.stops.length === (u.length === 2 ? 2 : 3)).map((e, t) => (0, G.jsx)(z, {
+					sheet: !0,
+					disabled: r,
+					onClick: () => n(structuredClone(e)),
+					children: (0, G.jsx)(V, { rows: U(e.stops ?? [], B, c) })
+				}, t))
+			}), (0, G.jsxs)(oe, {
+				exclusive: !0,
+				size: "small",
+				value: u.length === 2 ? 2 : 3,
+				disabled: r,
+				onChange: (e, r) => {
+					r && ((e) => {
+						if (e === u.length || e !== 2 && e !== 3) return;
+						let r = u.slice();
+						if (e === 3) {
+							let e = "#FFEB84", t = l(u[0]?.color ?? e)?.toRGBA(), n = l(u[u.length - 1]?.color ?? e)?.toRGBA();
+							if (t && n) {
+								let r = (e) => Math.round(e).toString(16).padStart(2, "0").toUpperCase();
+								e = `#${r((t.red + n.red) / 2)}${r((t.green + n.green) / 2)}${r((t.blue + n.blue) / 2)}`;
+							}
+							r.splice(1, 0, {
+								type: d.ColorStopType.Percentile,
+								value: 50,
+								color: e
+							});
+						} else r.splice(1, r.length - 2);
+						n({
+							...t,
+							stops: r
+						});
+					})(r);
+				},
+				sx: { flex: "0 0 auto" },
+				children: [(0, G.jsx)(P, {
+					value: 2,
+					sx: {
+						textTransform: "none",
+						pt: .25,
+						pb: .25
+					},
+					children: s("conditionalFormat.twoColor")
+				}), (0, G.jsx)(P, {
+					value: 3,
+					sx: {
+						textTransform: "none",
+						pt: .25,
+						pb: .25
+					},
+					children: s("conditionalFormat.threeColor")
+				})]
+			})]
+		}) }), (0, G.jsx)(K, {
+			variant: "config",
+			children: u.map((e, i) => (0, G.jsx)(J, {
+				label: s(f[Math.min(i, f.length - 1)]),
+				stop: e,
+				allowedTypes: Ae,
+				showColor: !0,
+				readOnly: r,
+				onStopChange: (e) => {
+					let r = u.slice();
+					r[i] = e, n({
+						...t,
+						stops: r
+					});
+				}
+			}, i))
+		})]
+	});
+});
+je.displayName = "ColorScaleRulePanel";
+var Me = [
+	d.ColorStopType.AutoMin,
+	d.ColorStopType.Min,
+	d.ColorStopType.Num,
+	d.ColorStopType.Percent,
+	d.ColorStopType.Percentile,
+	d.ColorStopType.Formula
+], Ne = [
+	d.ColorStopType.AutoMax,
+	d.ColorStopType.Max,
+	d.ColorStopType.Num,
+	d.ColorStopType.Percent,
+	d.ColorStopType.Percentile,
+	d.ColorStopType.Formula
+], Y = "__auto__", Pe = (0, W.memo)((e) => {
+	let { scale: t, onScaleChange: n, readOnly: r, ...i } = e, s = o(), { darkMode: c, toColor: l, propsColorPanel: u } = H(), f = t.stops ?? [], p = l(t.color), m = l(t.negativeFillColor), h = l(t.borderColor), g = l(t.negativeBorderColor), _ = t.gradient ?? !1, v = (e) => {
+		let r = { ...t };
+		for (let [t, n] of Object.entries(e)) n === void 0 ? delete r[t] : r[t] = n;
+		n(r);
+	}, y = { backgroundColor: "background.paper" };
+	return (0, G.jsxs)(D, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1
+		},
+		...i,
+		children: [(0, G.jsxs)(K, { children: [
+			(0, G.jsxs)(D, {
+				sx: {
+					display: "flex",
+					alignItems: "flex-start",
+					gap: 1
+				},
+				children: [(0, G.jsx)(D, {
+					sx: {
+						flex: "1 1 auto",
+						minWidth: 0,
+						display: "flex",
+						gap: .5,
+						flexWrap: "wrap"
+					},
+					children: C.filter((e) => (e.gradient ?? !1) === _).map((e, t) => (0, G.jsx)(z, {
+						sheet: !0,
+						disabled: r,
+						onClick: () => v({
+							color: e.color,
+							gradient: e.gradient,
+							borderColor: e.borderColor
+						}),
+						children: (0, G.jsx)(V, { rows: R(e, l(e.color)?.toCSS("adaptive") ?? "var(--sxl-color-primary, rgb(33, 115, 70))") })
+					}, t))
+				}), (0, G.jsxs)(oe, {
+					exclusive: !0,
+					size: "small",
+					value: _,
+					disabled: r,
+					onChange: (e, t) => {
+						t !== null && v({ gradient: !!t || void 0 });
+					},
+					sx: { flex: "0 0 auto" },
+					children: [(0, G.jsx)(P, {
+						value: !1,
+						sx: {
+							textTransform: "none",
+							pt: .25,
+							pb: .25
+						},
+						children: s("conditionalFormat.solidFill")
+					}), (0, G.jsx)(P, {
+						value: !0,
+						sx: {
+							textTransform: "none",
+							pt: .25,
+							pb: .25
+						},
+						children: s("conditionalFormat.gradientFill")
+					})]
+				})]
+			}),
+			(0, G.jsx)(M, {
+				control: (0, G.jsx)(j, {
+					size: "small",
+					checked: !1 === t.showValue,
+					disabled: r,
+					onChange: (e) => v({ showValue: !e.target.checked && void 0 })
+				}),
+				label: (0, G.jsx)(O, {
+					variant: "body2",
+					children: s("conditionalFormat.showBarsOnly")
+				})
+			}),
+			(0, G.jsxs)(D, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: .5
+				},
+				children: [
+					(0, G.jsx)(O, {
+						variant: "caption",
+						sx: {
+							color: "text.secondary",
+							flex: "0 0 62px"
+						},
+						children: s("conditionalFormat.bar")
+					}),
+					(0, G.jsx)(F, {
+						icon: "fill.colored",
+						tooltip: s("conditionalFormat.barColor"),
+						selectedColor: p,
+						disabled: r,
+						onSelectColor: (e) => v({ color: e ? e.toString() : void 0 }),
+						darkMode: c,
+						propsPanel: {
+							disableAlpha: !0,
+							...u
+						}
+					}),
+					(0, G.jsx)(F, {
+						icon: "stroke.colored",
+						tooltip: s("conditionalFormat.barBorderColor"),
+						selectedColor: h,
+						disabled: r,
+						onSelectColor: (e) => v({ borderColor: e ? e.toString() : void 0 }),
+						darkMode: c,
+						propsPanel: {
+							disableAlpha: !0,
+							...u
+						}
+					})
+				]
+			}),
+			(0, G.jsxs)(D, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: .5
+				},
+				children: [
+					(0, G.jsx)(O, {
+						variant: "caption",
+						sx: {
+							color: "text.secondary",
+							flex: "0 0 62px"
+						},
+						children: s("conditionalFormat.negative")
+					}),
+					(0, G.jsx)(F, {
+						icon: "fill.colored",
+						tooltip: s("conditionalFormat.negativeColor"),
+						selectedColor: m ?? p,
+						disabled: r,
+						onSelectColor: (e) => v({ negativeFillColor: e ? e.toString() : void 0 }),
+						darkMode: c,
+						propsPanel: {
+							disableAlpha: !0,
+							...u
+						}
+					}),
+					(0, G.jsx)(F, {
+						icon: "stroke.colored",
+						tooltip: s("conditionalFormat.negativeBorderColor"),
+						selectedColor: g ?? h,
+						disabled: r,
+						onSelectColor: (e) => v({ negativeBorderColor: e ? e.toString() : void 0 }),
+						darkMode: c,
+						propsPanel: {
+							disableAlpha: !0,
+							...u
+						}
+					}),
+					(0, G.jsx)(z, {
+						title: s("conditionalFormat.sameAsPositive"),
+						disabled: r || !t.negativeFillColor && !t.negativeBorderColor,
+						onClick: () => v({
+							negativeFillColor: void 0,
+							negativeBorderColor: void 0
+						}),
+						sx: {
+							color: "text.secondary",
+							"&:disabled": { opacity: .4 }
+						},
+						children: (0, G.jsx)(a, {
+							iconKey: "ClearFormats",
+							size: 16
+						})
+					})
+				]
+			}),
+			(0, G.jsxs)(D, {
+				sx: {
+					display: "flex",
+					gap: 1,
+					mt: .5
+				},
+				children: [(0, G.jsxs)(A, {
+					size: "small",
+					sx: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: [(0, G.jsx)(ne, { children: s("conditionalFormat.axis") }), (0, G.jsxs)(k, {
+						label: s("conditionalFormat.axis"),
+						value: t.axisPosition ?? Y,
+						disabled: r,
+						sx: y,
+						onChange: (e) => {
+							let t = e.target.value;
+							v({ axisPosition: t === Y ? void 0 : t });
+						},
+						children: [
+							(0, G.jsx)(N, {
+								value: Y,
+								children: s("conditionalFormat.automatic")
+							}),
+							(0, G.jsx)(N, {
+								value: "middle",
+								children: s("conditionalFormat.axisMiddle")
+							}),
+							(0, G.jsx)(N, {
+								value: "none",
+								children: s("conditionalFormat.axisNone")
+							})
+						]
+					})]
+				}), (0, G.jsxs)(A, {
+					size: "small",
+					sx: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: [(0, G.jsx)(ne, { children: s("conditionalFormat.direction") }), (0, G.jsxs)(k, {
+						label: s("conditionalFormat.direction"),
+						value: t.direction ?? Y,
+						disabled: r,
+						sx: y,
+						onChange: (e) => {
+							let t = e.target.value;
+							v({ direction: t === Y ? void 0 : t });
+						},
+						children: [
+							(0, G.jsx)(N, {
+								value: Y,
+								children: s("conditionalFormat.automatic")
+							}),
+							(0, G.jsx)(N, {
+								value: "leftToRight",
+								children: s("conditionalFormat.leftToRight")
+							}),
+							(0, G.jsx)(N, {
+								value: "rightToLeft",
+								children: s("conditionalFormat.rightToLeft")
+							})
+						]
+					})]
+				})]
+			})
+		] }), (0, G.jsxs)(K, {
+			variant: "config",
+			children: [(0, G.jsx)(J, {
+				label: s("conditionalFormat.stop.minimum"),
+				stop: f[0] ?? { type: d.ColorStopType.AutoMin },
+				allowedTypes: Me,
+				readOnly: r,
+				onStopChange: (e) => {
+					let t = f.slice();
+					t[0] = e, v({ stops: t });
+				}
+			}), (0, G.jsx)(J, {
+				label: s("conditionalFormat.stop.maximum"),
+				stop: f[1] ?? { type: d.ColorStopType.AutoMax },
+				allowedTypes: Ne,
+				readOnly: r,
+				onStopChange: (e) => {
+					let t = f.slice();
+					for (; t.length < 2;) t.push({ type: d.ColorStopType.AutoMax });
+					t[1] = e, v({ stops: t });
+				}
+			})]
+		})]
+	});
+});
+Pe.displayName = "DataBarRulePanel";
+var Fe = i("conditionalFormat.noCellIcon"), Ie = i("conditionalFormat.cellIcon"), Le = {
+	borderColor: "primary.main",
+	boxShadow: (e) => `inset 0 0 0 1px ${e.palette.primary.main}`
+}, Re = {
+	width: "28px",
+	height: "26px"
+}, ze = (0, W.memo)((e) => {
+	let { icon: t, onPick: n } = e, r = o();
+	return (0, G.jsxs)(D, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "4px",
+			padding: "6px 8px"
+		},
+		children: [(0, G.jsx)(z, {
+			sheet: !0,
+			title: r(Fe),
+			"aria-pressed": t === null,
+			sx: {
+				...Re,
+				...t === null ? Le : null
+			},
+			onClick: () => {
+				n({ ...x });
+			},
+			children: (0, G.jsx)(h, {
+				icons: [null],
+				size: 16
+			})
+		}), (0, G.jsx)(D, {
+			sx: {
+				display: "grid",
+				gridTemplateColumns: "repeat(8, auto)",
+				justifyContent: "start",
+				gap: "3px"
+			},
+			children: b.map((e) => {
+				let i = (a = t, o = e.spec, !!a && a.iconKey === o.iconKey && a.color === o.color);
+				var a, o;
+				return (0, G.jsx)(z, {
+					sheet: !0,
+					title: ge(r, e.spec),
+					"aria-pressed": i,
+					sx: {
+						...Re,
+						...i ? Le : null
+					},
+					onClick: () => {
+						n({
+							set: e.set,
+							id: e.id
+						});
+					},
+					children: (0, G.jsx)(h, {
+						icons: [e.spec],
+						size: 16
+					})
+				}, `${e.set}:${e.id}`);
+			})
+		})]
+	});
+});
+ze.displayName = "IconCatalogPanel";
+var Be = (0, W.memo)((0, W.forwardRef)((e, t) => {
+	let { icon: n, onPick: r, tooltip: i, ...a } = e, s = o(), c = (0, W.useCallback)((e) => {
+		let { closeFloat: t } = e, i = (0, G.jsx)(ze, {
+			icon: n,
+			onPick: (e) => {
+				t?.(), r(e);
+			}
+		});
+		return ie({
+			...e,
+			children: i
+		});
+	}, [n, r]);
+	return (0, G.jsx)(ae, {
+		ref: t,
+		renderPopupPanel: c,
+		tooltip: i ?? s(Ie),
+		icon: (0, G.jsx)(h, {
+			icons: [n],
+			size: 16
+		}),
+		outlined: !0,
+		...a
+	});
+}));
+Be.displayName = "IconPickerPopupButton";
+var Ve = [
+	d.ColorStopType.Percent,
+	d.ColorStopType.Num,
+	d.ColorStopType.Percentile,
+	d.ColorStopType.Formula
+], He = (0, W.memo)((e) => {
+	let { scale: t, onScaleChange: n, readOnly: i, ...a } = e, s = o(), c = t.iconSet ?? l.IconSet.TrafficLights3, u = E(c).length === 0, f = t.stops ?? [], p = f.length, g = v(t), y = (e) => {
+		let r = { ...t };
+		for (let [t, n] of Object.entries(e)) n === void 0 ? delete r[t] : r[t] = n;
+		n(r);
+	}, b = (0, W.useCallback)((e) => {
+		let { closeFloat: t } = e, n = (0, G.jsx)(pe, {
+			groups: me,
+			disabled: i,
+			onPick: (e) => {
+				t?.(), e.type === d.ScaleType.IconSet && e.iconSet && ((e) => {
+					if (e === c) return;
+					let t = _(e), n = f;
+					t !== f.length && (n = S(t)), y({
+						iconSet: e,
+						stops: n,
+						icon: void 0
+					});
+				})(e.iconSet);
+			}
+		});
+		return ie({
+			...e,
+			children: n
+		});
+	}, [i, t]), x = r.camelToPrettyCase(c);
+	return (0, G.jsxs)(D, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1
+		},
+		...a,
+		children: [(0, G.jsxs)(K, { children: [
+			(0, G.jsx)(D, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: 1
+				},
+				children: (0, G.jsx)(ae, {
+					outlined: !0,
+					disabled: i,
+					label: x,
+					tooltip: x,
+					icon: (0, G.jsx)(D, {
+						sx: {
+							width: "82px",
+							display: "flex",
+							justifyContent: "center"
+						},
+						children: u ? (0, G.jsx)(O, {
+							variant: "caption",
+							noWrap: !0,
+							children: x
+						}) : (0, G.jsx)(h, {
+							icons: E(c),
+							order: "descending",
+							size: 14,
+							gap: 3
+						})
+					}),
+					renderPopupPanel: b
+				})
+			}),
+			u && (0, G.jsx)(O, {
+				variant: "caption",
+				sx: { color: "text.secondary" },
+				children: s("conditionalFormat.adoptedIconSet")
+			}),
+			(0, G.jsxs)(D, {
+				sx: {
+					display: "flex",
+					gap: 1
+				},
+				children: [(0, G.jsx)(M, {
+					control: (0, G.jsx)(j, {
+						size: "small",
+						checked: !1 === t.showValue,
+						disabled: i,
+						onChange: (e) => y({ showValue: !e.target.checked && void 0 })
+					}),
+					label: (0, G.jsx)(O, {
+						variant: "body2",
+						children: s("conditionalFormat.showIconsOnly")
+					})
+				}), (0, G.jsx)(M, {
+					control: (0, G.jsx)(j, {
+						size: "small",
+						checked: t.reverse ?? !1,
+						disabled: i,
+						onChange: (e) => y({ reverse: !!e.target.checked || void 0 })
+					}),
+					label: (0, G.jsx)(O, {
+						variant: "body2",
+						children: s("conditionalFormat.reverseIcons")
+					})
+				})]
+			})
+		] }), (0, G.jsx)(K, {
+			variant: "config",
+			children: f.map((e, r) => {
+				let a = t.reverse ? p - 1 - r : r;
+				return (0, G.jsx)(J, {
+					stop: e,
+					allowedTypes: Ve,
+					showExclusive: !0,
+					readOnly: i || r === 0,
+					leading: (0, G.jsx)(Be, {
+						icon: g[r] ?? null,
+						disabled: i || u,
+						onPick: (e) => n(m(t, a, e))
+					}),
+					onStopChange: (e) => {
+						let t = f.slice();
+						t[r] = e, y({ stops: t });
+					}
+				}, r);
+			})
+		})]
+	});
+});
+He.displayName = "IconSetRulePanel";
+var X = (e, t, n) => L(e, t)?.toCSS("adaptive") ?? n, Ue = (e, t, n) => {
+	if (!e) return n;
+	if (typeof e == "string") return X(e, t, n);
+	if (e.type === s.Type.None) return n;
+	let r = e, i = e;
+	return X(i.foreground ?? r.color ?? i.background, t, n);
+}, Z = (0, W.memo)((e) => {
+	let { conditionalFormat: t, size: n = 28, ...r } = e, { workbook: i, themeKey: a } = H();
+	p(t, "onAnyChange");
+	let o = t.getScale(), s = t.getStyle(), l = (0, W.useMemo)(() => {
+		try {
+			return i?.getStyles().getNormal().getFont().toCSS("adaptive") ?? {};
+		} catch {
+			return {};
+		}
+	}, [i, a]), u = (0, W.useMemo)(() => {
+		if (o?.type === d.ScaleType.ColorScale) return (0, G.jsx)(V, { rows: U(o.stops ?? [], B, i) });
+		if (o?.type === d.ScaleType.DataBar) return (0, G.jsx)(V, { rows: R(o, X(o.color, i, I), o.borderColor ? X(o.borderColor, i, I) : void 0) });
+		if (o?.type === d.ScaleType.IconSet) return (0, G.jsx)(D, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: "100%",
+				height: "100%",
+				px: .5
+			},
+			children: (0, G.jsx)(h, {
+				icons: v(o),
+				order: "descending",
+				size: 14,
+				gap: 3
+			})
+		});
+		let e = s?.font, t = e?.underline && e.underline !== c.UnderlineStyle.None;
+		return (0, G.jsx)(D, {
+			sx: {
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				...l,
+				backgroundColor: Ue(s?.fill, i, "transparent"),
+				...e?.color && e.color !== "auto" ? { color: X(e.color, i, ve) } : null,
+				...e?.weight ? { fontWeight: e.weight } : null,
+				...e?.style ? { fontStyle: e.style } : null,
+				textDecoration: [t ? "underline" : "", e?.strike ? "line-through" : ""].join(" ").trim() || "none",
+				fontSize: `${Math.round(.5 * n)}px`,
+				lineHeight: 1,
+				outline: s?.borders ? `1px solid ${X(Object.values(s.borders)[0]?.color, i, ye)}` : void 0,
+				outlineOffset: "-3px"
+			},
+			children: "Aa"
+		});
+	}, [
+		o,
+		s,
+		n,
+		l,
+		i,
+		a
+	]);
+	return (0, G.jsx)(z, {
+		sheet: !0,
+		className: "sxl-cf-rule-preview",
+		sx: {
+			width: "auto",
+			minWidth: 1.7 * n + "px",
+			height: `${n}px`
+		},
+		...r,
+		children: u
+	});
+});
+Z.displayName = "RulePreview";
+var We = (e, t) => {
+	let n = e.getCondition()?.toString();
+	if (n) return n;
+	let i = e.getScale();
+	return i ? r.camelToPrettyCase(i.type) : t("conditionalFormat.noCondition");
+}, Ge = {
+	classic: i("conditionalFormat.tab.classic"),
+	[d.ScaleType.ColorScale]: i("conditionalFormat.tab.colorScale"),
+	[d.ScaleType.DataBar]: i("conditionalFormat.tab.dataBars"),
+	[d.ScaleType.IconSet]: i("conditionalFormat.tab.iconSets")
+}, Q = (0, W.memo)((e) => {
+	let { conditionalFormat: t } = e, n = o();
+	p(t, "onAnyChange");
+	let r = t.getScale(), i = t.getCondition(), a = t.getStyle(), s = t.isProtected(), c = r?.type ?? "classic", l = (0, W.useRef)({ scales: {} }), u = (e) => {
+		t.update({ scale: e });
+	}, m = (0, G.jsxs)(te, {
+		tabIndex: 0,
+		className: xe["editor-panel"],
+		sx: {
+			gap: (e) => e.spacing(1),
+			paddingTop: (e) => e.spacing(1.25),
+			paddingBottom: (e) => e.spacing(2),
+			paddingLeft: (e) => e.spacing(1.5),
+			paddingRight: (e) => e.spacing(1.5),
+			border: (e) => `1px solid ${e.palette.divider}`,
+			borderRadius: (e) => e.spacing(1.25),
+			overflow: "auto"
+		},
+		children: [
+			(0, G.jsxs)(D, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: (e) => e.spacing(1.75),
+					margin: (e) => e.spacing(1.25),
+					marginBottom: 0
+				},
+				children: [(0, G.jsxs)(D, {
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						gap: (e) => e.spacing(1.5)
+					},
+					children: [(0, G.jsx)(Z, {
+						conditionalFormat: t,
+						size: 48
+					}), (0, G.jsx)(O, {
+						variant: "body2",
+						sx: {
+							minWidth: 0,
+							wordBreak: "break-word"
+						},
+						children: We(t, n)
+					})]
+				}), (0, G.jsx)(Ce, {
+					item: t,
+					label: n("conditionalFormat.applyTo")
+				})]
+			}),
+			(0, G.jsx)(de, {
+				value: c,
+				onChange: (e, n) => {
+					s || ((e) => {
+						if (e !== c) {
+							if (c === "classic" ? (l.current.condition = i?.toJSON() ?? null, l.current.style = a) : r && (l.current.scales[r.type] = r), e === "classic") t.update({
+								condition: l.current.condition ?? {
+									operator: f.BuiltInOperatorNames.Between,
+									param: null
+								},
+								style: l.current.style ?? null,
+								scale: null
+							});
+							else {
+								let n = l.current.scales[e] ?? (e === d.ScaleType.ColorScale ? w() : e === d.ScaleType.DataBar ? g() : T());
+								t.update({
+									scale: n,
+									condition: null,
+									style: null
+								});
+							}
+						}
+					})(n);
+				},
+				variant: "fullWidth",
+				sx: {
+					minHeight: "36px",
+					borderBottom: 1,
+					borderColor: "divider",
+					"& .MuiTab-root": {
+						minHeight: "36px",
+						textTransform: "none",
+						pt: .5,
+						pb: .5,
+						px: .5,
+						minWidth: 0
+					}
+				},
+				children: Object.keys(Ge).map((e) => (0, G.jsx)(fe, {
+					value: e,
+					label: n(Ge[e])
+				}, e))
+			}),
+			c === "classic" && (0, G.jsxs)(G.Fragment, { children: [(0, G.jsx)(De, {
+				format: a,
+				readOnly: s,
+				onFormatChange: (e) => t.update({ style: e })
+			}), (0, G.jsx)(se, {
+				sx: {
+					...le,
+					p: 2,
+					pb: 1
+				},
+				selectorTitle: n("conditionalFormat.highlight"),
+				condition: i,
+				ranges: t.getRanges(),
+				readOnly: s,
+				onConditionChange: (e) => t.setCondition(e)
+			})] }),
+			r?.type === d.ScaleType.ColorScale && (0, G.jsx)(je, {
+				scale: r,
+				onScaleChange: u,
+				readOnly: s
+			}),
+			r?.type === d.ScaleType.DataBar && (0, G.jsx)(Pe, {
+				scale: r,
+				onScaleChange: u,
+				readOnly: s
+			}),
+			r?.type === d.ScaleType.IconSet && (0, G.jsx)(He, {
+				scale: r,
+				onScaleChange: u,
+				readOnly: s
+			}),
+			c === "classic" && (0, G.jsx)(D, {
+				sx: {
+					pl: 2,
+					pr: 2,
+					border: 1,
+					borderColor: "divider",
+					borderRadius: 1
+				},
+				children: (0, G.jsx)(M, {
+					control: (0, G.jsx)(j, {
+						checked: t.isStopIfTrue(),
+						disabled: s,
+						onChange: (e) => t.setStopIfTrue(e.target.checked)
+					}),
+					label: n("conditionalFormat.stopIfTrue")
+				})
+			})
+		]
+	});
+	return (0, G.jsx)(ce.Provider, {
+		value: t,
+		children: m
+	});
+});
+Q.displayName = "ConditionalFormatEditorPanel";
+var Ke = (0, W.memo)(({ item: e }) => {
+	let t = o();
+	return p(e, "onAnyChange"), !e.isStopIfTrue() || e.getScale() ? null : (0, G.jsx)(D, {
+		sx: {
+			display: "inline-flex",
+			alignItems: "center",
+			alignSelf: "flex-start",
+			px: .75,
+			py: .25,
+			border: 1,
+			borderColor: "divider",
+			borderRadius: 1,
+			color: "text.secondary"
+		},
+		children: (0, G.jsx)(O, {
+			variant: "caption",
+			children: t("conditionalFormat.stopIfTrue")
+		})
+	});
+});
+Ke.displayName = "StopIfTrueBadge";
+var qe = (0, W.memo)(({ item: e }) => {
+	let t = o();
+	return (0, G.jsx)(Ce, {
+		item: e,
+		label: t("conditionalFormat.applyTo"),
+		helperText: null
+	});
+});
+qe.displayName = "ConditionalFormatCardRanges";
+var Je = {
+	key: "conditional-format",
+	messageKeys: {
+		none: i("conditionalFormat.none"),
+		addPrompt: i("conditionalFormat.addPrompt"),
+		heading: i("conditionalFormat.heading"),
+		insert: i("conditionalFormat.insert"),
+		new: i("conditionalFormat.new"),
+		moveUp: i("conditionalFormat.moveUp"),
+		moveDown: i("conditionalFormat.moveDown"),
+		edit: i("conditionalFormat.edit"),
+		duplicate: i("conditionalFormat.duplicate"),
+		delete: i("conditionalFormat.delete"),
+		cancel: i("conditionalFormat.cancel"),
+		save: i("conditionalFormat.save")
+	},
+	getCollection: (e) => e.getConditionalFormats(),
+	changeEvents: ["onConditionalFormatsChange"],
+	isReadOnly: (e) => !e.getProtection().isFormatCellsAllowed(),
+	applyUpdate: (e, t) => {
+		e.update(t);
+	},
+	validate: (e) => e.getCondition()?.validate() ?? null,
+	applySeed: (e, t) => {
+		e.update({
+			condition: t.condition ?? null,
+			style: t.style ?? null,
+			scale: t.scale ?? null,
+			stopIfTrue: t.stopIfTrue ?? !1
+		});
+	},
+	getCardTitle: We,
+	CardMedia: ({ item: e }) => (0, G.jsx)(Z, {
+		conditionalFormat: e,
+		size: 32
+	}),
+	CardSubtitle: qe,
+	CardBody: Ke,
+	EditorBody: ({ item: e }) => (0, G.jsx)(Q, { conditionalFormat: e })
+}, $ = (0, W.memo)((0, W.forwardRef)((e, t) => {
+	let { workbook: n, args: r, ...i } = e;
+	return (0, G.jsx)(Se, {
+		ref: t,
+		workbook: n,
+		descriptor: Je,
+		args: r,
+		dragReorder: !0,
+		...i
+	});
+}));
+$.displayName = "ConditionalFormatDetailsPanel";
+var Ye = (e) => {
+	let { model: t, entryKey: n, frame: r, args: i, ref: a, ...o } = e;
+	return (0, G.jsx)($, {
+		ref: a,
+		workbook: t,
+		args: i,
+		...o
+	});
+};
+export { Ye as ConditionalFormatDetailsTaskPane };