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

package/cdn/assets/BK2u8-YC8sG_k5G1.js

@@ -0,0 +1,1299 @@
+/**
+* @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 { W as r, p as i } from "./PD_ckP5IyZurtALu.js";
+import { U as a, d as o, g as s, t as c } from "./u8iMUyjw60ayROFo.js";
+import { Si as l, tn as u } from "./D97AuczhOIBnqMXI.js";
+import { t as d } from "./CqmrD2Xs8MKJTO4v.js";
+import { r as f } from "./BmWMHgdcbZuZUGtm.js";
+import { mt as p } from "./BJ5RRYxWA_yTbVpr.js";
+import { n as m } from "./Bebab8nHNHqve2AI.js";
+import { I as h, It as g, K as _, Lt as v, O as y, St as b, W as x, Y as S, bt as C, jt as w, p as T, u as E, y as ee, z as D } from "./DliTwLXIImeC0eub.js";
+import { t as O } from "./DxI14nqCsNi-yexx.js";
+import { B as te, j as k } from "./CGklNVK7pkjOQ6XF.js";
+import { m as ne, t as A, y as j } from "./Y0Uf_lVRToNYi395.js";
+import { t as M } from "./CbKXmBz5CY-IwYsS.js";
+import { t as N } from "./FjjP2q5AOiFod5IL.js";
+import { t as re } from "./9zx-c-XsXQJu3H6F.js";
+import { S as ie, w as ae } from "./DG4PyKuuGu6RkAEv.js";
+import { t as P } from "./CzG0p4x8L99XEdym.js";
+import { n as F, t as oe } from "./Bqlj5Zz-vJpMDs6i.js";
+import { c as se, i as ce, l as le, n as ue } from "./DE9bhDAlUdLUngdj.js";
+import { a as de, o as fe } from "./BzZTldYRBXUqOINX.js";
+import { a as pe, d as I, i as me, n as he, r as ge, s as _e } from "./DtO07D35O2tAh7f4.js";
+import { a as L, c as R, i as z, l as ve, n as B, o as V, r as H, s as U, t as ye, u as be } from "./HMCOTgDNR6bpWL7f.js";
+import { i as xe } from "./B-aF0nVKMi0rBQ-X.js";
+import { n as Se, t as Ce } from "./kLmFvtw68s1_Kbq9.js";
+var W = e(t(), 1), G = n(), K = (0, W.memo)((e) => {
+	let { variant: t = "format", children: n, sx: r, ...i } = e;
+	return (0, G.jsx)(O, {
+		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 c("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 === a.Type.None ? null : e.color ?? e.foreground ?? null : null, q = (e, t) => e === "auto" ? null : R(e, t), De = (0, W.memo)((e) => {
+	let { format: t, onFormatChange: n, readOnly: r, ...s } = e, c = p(), { workbook: l, schemeLookup: u, themeKey: d, darkMode: m, propsColorPanel: h } = U(), g = t?.font ?? null, v = (g?.weight ?? 400) >= 600, y = g?.style === o.Style.Italic, b = !!g?.underline && g.underline !== o.UnderlineStyle.None, x = !!g?.strike && g.strike !== o.StrikeStyle.None, S = (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);
+	}, C = (0, W.useMemo)(() => l?.getStyles().getNormal().getFont().getColor(), [l, d]), w = (0, W.useMemo)(() => q(g?.color, l), [
+		g?.color,
+		l,
+		d
+	]), T = (0, W.useMemo)(() => q(Ee(t?.fill), l), [
+		t?.fill,
+		l,
+		d
+	]), E = {
+		padding: "4px",
+		border: "none",
+		borderRadius: 1
+	};
+	return (0, G.jsxs)(K, {
+		...s,
+		children: [(0, G.jsxs)(O, {
+			sx: {
+				display: "flex",
+				alignItems: "flex-start",
+				gap: 1
+			},
+			children: [(0, G.jsx)(O, {
+				sx: {
+					flex: "1 1 auto",
+					minWidth: 0,
+					display: "flex",
+					gap: .5,
+					flexWrap: "wrap"
+				},
+				children: _.map((e, t) => {
+					let i = q(Ee(e.style.fill), l), a = q(e.style.font?.color, l), o = e.style.borders ? q(Object.values(e.style.borders)[0]?.color, l) : null;
+					return (0, G.jsx)(B, {
+						sheet: !0,
+						title: c(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)(B, {
+				title: c("conditionalFormat.clearStyle"),
+				disabled: r || !t,
+				onClick: () => n(null),
+				sx: {
+					color: "text.secondary",
+					"&:disabled": { opacity: .4 }
+				},
+				children: (0, G.jsx)(f, {
+					iconKey: "ClearFormats",
+					size: 16
+				})
+			})]
+		}), (0, G.jsxs)(O, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				gap: .25
+			},
+			children: [
+				(0, G.jsx)(F, {
+					value: "bold",
+					size: "small",
+					sx: E,
+					selected: v,
+					disabled: r,
+					onChange: () => S({ weight: v ? void 0 : 700 }),
+					children: (0, G.jsx)(f, { iconKey: "TextBold" })
+				}),
+				(0, G.jsx)(F, {
+					value: "italic",
+					size: "small",
+					sx: E,
+					selected: y,
+					disabled: r,
+					onChange: () => S({ style: y ? void 0 : o.Style.Italic }),
+					children: (0, G.jsx)(f, { iconKey: "TextItalic" })
+				}),
+				(0, G.jsx)(F, {
+					value: "underline",
+					size: "small",
+					sx: E,
+					selected: b,
+					disabled: r,
+					onChange: () => S({ underline: b ? void 0 : o.UnderlineStyle.Single }),
+					children: (0, G.jsx)(f, { iconKey: "TextUnderline" })
+				}),
+				(0, G.jsx)(F, {
+					value: "strike",
+					size: "small",
+					sx: E,
+					selected: x,
+					disabled: r,
+					onChange: () => S({ strike: x ? void 0 : o.StrikeStyle.Single }),
+					children: (0, G.jsx)(f, { iconKey: "TextStrike" })
+				}),
+				l && (0, G.jsx)(he, {
+					tooltip: c("conditionalFormat.border"),
+					selectedBorder: t?.borders,
+					createBorder: (e) => l.getStyles().getNormal().createStyle({ borders: e }).getBorders(),
+					schemeLookup: u,
+					autoColor: C,
+					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)(I, {
+					icon: "fill.colored",
+					tooltip: c("conditionalFormat.fillColor"),
+					selectedColor: T,
+					disabled: r,
+					onSelectColor: (e) => ((e) => {
+						let r = { ...t };
+						e ? r.fill = {
+							type: a.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)(I, {
+					icon: "text.colored",
+					tooltip: c("conditionalFormat.fontColor"),
+					selectedColor: w,
+					disabled: r,
+					onSelectColor: (e) => S({ color: e ? e.toString() : void 0 }),
+					darkMode: m,
+					propsPanel: {
+						disableAlpha: !0,
+						autoColor: C,
+						...h
+					}
+				})
+			]
+		})]
+	});
+});
+De.displayName = "ConditionalFormatStylePicker";
+var Oe = {
+	[l.ColorStopType.AutoMin]: i("conditionalFormat.stopType.autoMin"),
+	[l.ColorStopType.AutoMax]: i("conditionalFormat.stopType.autoMax"),
+	[l.ColorStopType.Min]: i("conditionalFormat.stopType.min"),
+	[l.ColorStopType.Max]: i("conditionalFormat.stopType.max"),
+	[l.ColorStopType.Num]: i("conditionalFormat.stopType.num"),
+	[l.ColorStopType.Percent]: i("conditionalFormat.stopType.percent"),
+	[l.ColorStopType.Percentile]: i("conditionalFormat.stopType.percentile"),
+	[l.ColorStopType.Formula]: i("conditionalFormat.stopType.formula")
+}, ke = /* @__PURE__ */ new Set([
+	l.ColorStopType.AutoMin,
+	l.ColorStopType.AutoMax,
+	l.ColorStopType.Min,
+	l.ColorStopType.Max
+]), J = (0, W.memo)((e) => {
+	let { label: t, stop: n, onStopChange: r, allowedTypes: i, showColor: a = !1, leading: o, showExclusive: s = !1, readOnly: c, ...u } = e, d = p(), { darkMode: f, toColor: h, propsColorPanel: g } = U(), _ = se(), v = n.type ?? l.ColorStopType.Num, y = !ke.has(v), b = c || !y, x = v === l.ColorStopType.Formula, S = n.value?.isIFormula ? n.value : null, C = n.color, w = a ? h(C) : null;
+	return (0, G.jsxs)(O, {
+		sx: {
+			display: "flex",
+			alignItems: "center",
+			gap: .5
+		},
+		...u,
+		children: [
+			t !== void 0 && (0, G.jsx)(k, {
+				variant: "caption",
+				sx: {
+					color: "text.secondary",
+					flex: "0 0 62px",
+					minWidth: 0,
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				children: t
+			}),
+			o,
+			a && (0, G.jsx)(I, {
+				tooltip: d("conditionalFormat.stopColor"),
+				selectedColor: w,
+				disabled: c,
+				onSelectColor: (e) => {
+					e && r({
+						...n,
+						color: e.toString()
+					});
+				},
+				darkMode: f,
+				propsPanel: {
+					disableAlpha: !0,
+					...g
+				}
+			}),
+			s && (0, G.jsxs)(A, {
+				size: "small",
+				value: n.exclusive ? "gt" : "gte",
+				disabled: c,
+				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)(P, {
+					value: "gte",
+					children: ">="
+				}), (0, G.jsx)(P, {
+					value: "gt",
+					children: ">"
+				})]
+			}),
+			(0, G.jsx)(A, {
+				size: "small",
+				value: v,
+				disabled: c,
+				onChange: (e) => ((e) => {
+					let t = {
+						...n,
+						type: e
+					};
+					if (ke.has(e)) delete t.value;
+					else if (t.value === void 0) t.value = e === l.ColorStopType.Formula ? "" : 0;
+					else if (e !== l.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)(P, {
+					value: e,
+					children: d(Oe[e])
+				}, e))
+			}),
+			x ? (0, G.jsx)(m, {
+				size: "small",
+				home: _.home,
+				value: S ? _.display(S) : `${n.value ?? ""}`,
+				onChangeText: (e) => {
+					r({
+						...n,
+						value: e.trim().length > 0 ? _.compile(e) : e
+					});
+				},
+				placeholder: d("conditionalFormat.enterFormula"),
+				disabled: b,
+				equals: "bare",
+				pickAs: "absolute",
+				label: null,
+				showError: !1,
+				helperText: null,
+				sx: {
+					flex: "1 1 30%",
+					minWidth: 0,
+					"& .MuiInputBase-root": { backgroundColor: b ? "action.disabledBackground" : "background.paper" }
+				}
+			}) : (0, G.jsx)(re, {
+				size: "small",
+				type: "number",
+				placeholder: y ? void 0 : d("conditionalFormat.stopFromData"),
+				value: y ? `${n.value ?? ""}` : "",
+				disabled: b,
+				onChange: (e) => {
+					let t = e.target.value;
+					r({
+						...n,
+						value: t === "" ? 0 : Number(t)
+					});
+				},
+				sx: {
+					flex: "1 1 30%",
+					minWidth: 0,
+					cursor: b ? "not-allowed" : void 0
+				},
+				slotProps: { input: { sx: {
+					backgroundColor: b ? "action.disabledBackground" : "background.paper",
+					cursor: b ? "not-allowed" : void 0
+				} } }
+			})
+		]
+	});
+});
+J.displayName = "ScaleStopRow";
+var Ae = [
+	l.ColorStopType.Min,
+	l.ColorStopType.Max,
+	l.ColorStopType.Num,
+	l.ColorStopType.Percent,
+	l.ColorStopType.Percentile,
+	l.ColorStopType.Formula
+], je = (0, W.memo)((e) => {
+	let { scale: t, onScaleChange: n, readOnly: r, ...a } = e, o = p(), { workbook: s, toColor: c } = U(), u = t.stops ?? [], d = 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)(O, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1
+		},
+		...a,
+		children: [(0, G.jsx)(K, { children: (0, G.jsxs)(O, {
+			sx: {
+				display: "flex",
+				alignItems: "flex-start",
+				gap: 1
+			},
+			children: [(0, G.jsx)(O, {
+				sx: {
+					flex: "1 1 auto",
+					minWidth: 0,
+					display: "flex",
+					gap: .5,
+					flexWrap: "wrap"
+				},
+				children: C.filter((e) => e.stops.length === (u.length === 2 ? 2 : 3)).map((e, t) => (0, G.jsx)(B, {
+					sheet: !0,
+					disabled: r,
+					onClick: () => n(structuredClone(e)),
+					children: (0, G.jsx)(H, { rows: ye(e.stops ?? [], V, s) })
+				}, 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 = c(u[0]?.color ?? e)?.toRGBA(), n = c(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: l.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)(F, {
+					value: 2,
+					sx: {
+						textTransform: "none",
+						pt: .25,
+						pb: .25
+					},
+					children: o("conditionalFormat.twoColor")
+				}), (0, G.jsx)(F, {
+					value: 3,
+					sx: {
+						textTransform: "none",
+						pt: .25,
+						pb: .25
+					},
+					children: o("conditionalFormat.threeColor")
+				})]
+			})]
+		}) }), (0, G.jsx)(K, {
+			variant: "config",
+			children: u.map((e, i) => (0, G.jsx)(J, {
+				label: o(d[Math.min(i, d.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 = [
+	l.ColorStopType.AutoMin,
+	l.ColorStopType.Min,
+	l.ColorStopType.Num,
+	l.ColorStopType.Percent,
+	l.ColorStopType.Percentile,
+	l.ColorStopType.Formula
+], Ne = [
+	l.ColorStopType.AutoMax,
+	l.ColorStopType.Max,
+	l.ColorStopType.Num,
+	l.ColorStopType.Percent,
+	l.ColorStopType.Percentile,
+	l.ColorStopType.Formula
+], Y = "__auto__", Pe = (0, W.memo)((e) => {
+	let { scale: t, onScaleChange: n, readOnly: r, ...i } = e, a = p(), { darkMode: o, toColor: s, propsColorPanel: c } = U(), u = t.stops ?? [], d = s(t.color), m = s(t.negativeFillColor), h = s(t.borderColor), g = s(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)(O, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1
+		},
+		...i,
+		children: [(0, G.jsxs)(K, { children: [
+			(0, G.jsxs)(O, {
+				sx: {
+					display: "flex",
+					alignItems: "flex-start",
+					gap: 1
+				},
+				children: [(0, G.jsx)(O, {
+					sx: {
+						flex: "1 1 auto",
+						minWidth: 0,
+						display: "flex",
+						gap: .5,
+						flexWrap: "wrap"
+					},
+					children: x.filter((e) => (e.gradient ?? !1) === _).map((e, t) => (0, G.jsx)(B, {
+						sheet: !0,
+						disabled: r,
+						onClick: () => v({
+							color: e.color,
+							gradient: e.gradient,
+							borderColor: e.borderColor
+						}),
+						children: (0, G.jsx)(H, { rows: z(e, s(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)(F, {
+						value: !1,
+						sx: {
+							textTransform: "none",
+							pt: .25,
+							pb: .25
+						},
+						children: a("conditionalFormat.solidFill")
+					}), (0, G.jsx)(F, {
+						value: !0,
+						sx: {
+							textTransform: "none",
+							pt: .25,
+							pb: .25
+						},
+						children: a("conditionalFormat.gradientFill")
+					})]
+				})]
+			}),
+			(0, G.jsx)(N, {
+				control: (0, G.jsx)(M, {
+					size: "small",
+					checked: !1 === t.showValue,
+					disabled: r,
+					onChange: (e) => v({ showValue: !e.target.checked && void 0 })
+				}),
+				label: (0, G.jsx)(k, {
+					variant: "body2",
+					children: a("conditionalFormat.showBarsOnly")
+				})
+			}),
+			(0, G.jsxs)(O, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: .5
+				},
+				children: [
+					(0, G.jsx)(k, {
+						variant: "caption",
+						sx: {
+							color: "text.secondary",
+							flex: "0 0 62px"
+						},
+						children: a("conditionalFormat.bar")
+					}),
+					(0, G.jsx)(I, {
+						icon: "fill.colored",
+						tooltip: a("conditionalFormat.barColor"),
+						selectedColor: d,
+						disabled: r,
+						onSelectColor: (e) => v({ color: e ? e.toString() : void 0 }),
+						darkMode: o,
+						propsPanel: {
+							disableAlpha: !0,
+							...c
+						}
+					}),
+					(0, G.jsx)(I, {
+						icon: "stroke.colored",
+						tooltip: a("conditionalFormat.barBorderColor"),
+						selectedColor: h,
+						disabled: r,
+						onSelectColor: (e) => v({ borderColor: e ? e.toString() : void 0 }),
+						darkMode: o,
+						propsPanel: {
+							disableAlpha: !0,
+							...c
+						}
+					})
+				]
+			}),
+			(0, G.jsxs)(O, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: .5
+				},
+				children: [
+					(0, G.jsx)(k, {
+						variant: "caption",
+						sx: {
+							color: "text.secondary",
+							flex: "0 0 62px"
+						},
+						children: a("conditionalFormat.negative")
+					}),
+					(0, G.jsx)(I, {
+						icon: "fill.colored",
+						tooltip: a("conditionalFormat.negativeColor"),
+						selectedColor: m ?? d,
+						disabled: r,
+						onSelectColor: (e) => v({ negativeFillColor: e ? e.toString() : void 0 }),
+						darkMode: o,
+						propsPanel: {
+							disableAlpha: !0,
+							...c
+						}
+					}),
+					(0, G.jsx)(I, {
+						icon: "stroke.colored",
+						tooltip: a("conditionalFormat.negativeBorderColor"),
+						selectedColor: g ?? h,
+						disabled: r,
+						onSelectColor: (e) => v({ negativeBorderColor: e ? e.toString() : void 0 }),
+						darkMode: o,
+						propsPanel: {
+							disableAlpha: !0,
+							...c
+						}
+					}),
+					(0, G.jsx)(B, {
+						title: a("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)(f, {
+							iconKey: "ClearFormats",
+							size: 16
+						})
+					})
+				]
+			}),
+			(0, G.jsxs)(O, {
+				sx: {
+					display: "flex",
+					gap: 1,
+					mt: .5
+				},
+				children: [(0, G.jsxs)(j, {
+					size: "small",
+					sx: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: [(0, G.jsx)(ne, { children: a("conditionalFormat.axis") }), (0, G.jsxs)(A, {
+						label: a("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)(P, {
+								value: Y,
+								children: a("conditionalFormat.automatic")
+							}),
+							(0, G.jsx)(P, {
+								value: "middle",
+								children: a("conditionalFormat.axisMiddle")
+							}),
+							(0, G.jsx)(P, {
+								value: "none",
+								children: a("conditionalFormat.axisNone")
+							})
+						]
+					})]
+				}), (0, G.jsxs)(j, {
+					size: "small",
+					sx: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: [(0, G.jsx)(ne, { children: a("conditionalFormat.direction") }), (0, G.jsxs)(A, {
+						label: a("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)(P, {
+								value: Y,
+								children: a("conditionalFormat.automatic")
+							}),
+							(0, G.jsx)(P, {
+								value: "leftToRight",
+								children: a("conditionalFormat.leftToRight")
+							}),
+							(0, G.jsx)(P, {
+								value: "rightToLeft",
+								children: a("conditionalFormat.rightToLeft")
+							})
+						]
+					})]
+				})]
+			})
+		] }), (0, G.jsxs)(K, {
+			variant: "config",
+			children: [(0, G.jsx)(J, {
+				label: a("conditionalFormat.stop.minimum"),
+				stop: u[0] ?? { type: l.ColorStopType.AutoMin },
+				allowedTypes: Me,
+				readOnly: r,
+				onStopChange: (e) => {
+					let t = u.slice();
+					t[0] = e, v({ stops: t });
+				}
+			}), (0, G.jsx)(J, {
+				label: a("conditionalFormat.stop.maximum"),
+				stop: u[1] ?? { type: l.ColorStopType.AutoMax },
+				allowedTypes: Ne,
+				readOnly: r,
+				onStopChange: (e) => {
+					let t = u.slice();
+					for (; t.length < 2;) t.push({ type: l.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 = p();
+	return (0, G.jsxs)(O, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "4px",
+			padding: "6px 8px"
+		},
+		children: [(0, G.jsx)(B, {
+			sheet: !0,
+			title: r(Fe),
+			"aria-pressed": t === null,
+			sx: {
+				...Re,
+				...t === null ? Le : null
+			},
+			onClick: () => {
+				n({ ...h });
+			},
+			children: (0, G.jsx)(y, {
+				icons: [null],
+				size: 16
+			})
+		}), (0, G.jsx)(O, {
+			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)(B, {
+					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)(y, {
+						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, o = p(), s = (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,
+		createPopupPanel: s,
+		tooltip: i ?? o(Ie),
+		icon: (0, G.jsx)(y, {
+			icons: [n],
+			size: 16
+		}),
+		outlined: !0,
+		...a
+	});
+}));
+Be.displayName = "IconPickerPopupButton";
+var Ve = [
+	l.ColorStopType.Percent,
+	l.ColorStopType.Num,
+	l.ColorStopType.Percentile,
+	l.ColorStopType.Formula
+], He = (0, W.memo)((e) => {
+	let { scale: t, onScaleChange: n, readOnly: i, ...a } = e, o = p(), c = t.iconSet ?? s.IconSet.TrafficLights3, u = ee(c).length === 0, d = t.stops ?? [], f = d.length, m = D(t), h = (e) => {
+		let r = { ...t };
+		for (let [t, n] of Object.entries(e)) n === void 0 ? delete r[t] : r[t] = n;
+		n(r);
+	}, g = (0, W.useCallback)((e) => {
+		let { closeFloat: t } = e, n = (0, G.jsx)(pe, {
+			groups: me,
+			disabled: i,
+			onPick: (e) => {
+				t?.(), e.type === l.ScaleType.IconSet && e.iconSet && ((e) => {
+					if (e === c) return;
+					let t = E(e), n = d;
+					t !== d.length && (n = S(t)), h({
+						iconSet: e,
+						stops: n,
+						icon: void 0
+					});
+				})(e.iconSet);
+			}
+		});
+		return ie({
+			...e,
+			children: n
+		});
+	}, [i, t]), _ = r.camelToPrettyCase(c);
+	return (0, G.jsxs)(O, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 1
+		},
+		...a,
+		children: [(0, G.jsxs)(K, { children: [
+			(0, G.jsx)(O, {
+				sx: {
+					display: "flex",
+					alignItems: "center",
+					gap: 1
+				},
+				children: (0, G.jsx)(ae, {
+					outlined: !0,
+					disabled: i,
+					label: _,
+					tooltip: _,
+					icon: (0, G.jsx)(O, {
+						sx: {
+							width: "82px",
+							display: "flex",
+							justifyContent: "center"
+						},
+						children: u ? (0, G.jsx)(k, {
+							variant: "caption",
+							noWrap: !0,
+							children: _
+						}) : (0, G.jsx)(y, {
+							icons: ee(c),
+							order: "descending",
+							size: 14,
+							gap: 3
+						})
+					}),
+					createPopupPanel: g
+				})
+			}),
+			u && (0, G.jsx)(k, {
+				variant: "caption",
+				sx: { color: "text.secondary" },
+				children: o("conditionalFormat.adoptedIconSet")
+			}),
+			(0, G.jsxs)(O, {
+				sx: {
+					display: "flex",
+					gap: 1
+				},
+				children: [(0, G.jsx)(N, {
+					control: (0, G.jsx)(M, {
+						size: "small",
+						checked: !1 === t.showValue,
+						disabled: i,
+						onChange: (e) => h({ showValue: !e.target.checked && void 0 })
+					}),
+					label: (0, G.jsx)(k, {
+						variant: "body2",
+						children: o("conditionalFormat.showIconsOnly")
+					})
+				}), (0, G.jsx)(N, {
+					control: (0, G.jsx)(M, {
+						size: "small",
+						checked: t.reverse ?? !1,
+						disabled: i,
+						onChange: (e) => h({ reverse: !!e.target.checked || void 0 })
+					}),
+					label: (0, G.jsx)(k, {
+						variant: "body2",
+						children: o("conditionalFormat.reverseIcons")
+					})
+				})]
+			})
+		] }), (0, G.jsx)(K, {
+			variant: "config",
+			children: d.map((e, r) => {
+				let a = t.reverse ? f - 1 - r : r;
+				return (0, G.jsx)(J, {
+					stop: e,
+					allowedTypes: Ve,
+					showExclusive: !0,
+					readOnly: i || r === 0,
+					leading: (0, G.jsx)(Be, {
+						icon: m[r] ?? null,
+						disabled: i || u,
+						onPick: (e) => n(T(t, a, e))
+					}),
+					onStopChange: (e) => {
+						let t = d.slice();
+						t[r] = e, h({ stops: t });
+					}
+				}, r);
+			})
+		})]
+	});
+});
+He.displayName = "IconSetRulePanel";
+var X = (e, t, n) => R(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 === a.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 } = U();
+	d(t, "onAnyChange");
+	let s = t.getScale(), c = t.getStyle(), u = (0, W.useMemo)(() => {
+		try {
+			return i?.getStyles().getNormal().getFont().toCSS("adaptive") ?? {};
+		} catch {
+			return {};
+		}
+	}, [i, a]), f = (0, W.useMemo)(() => {
+		if (s?.type === l.ScaleType.ColorScale) return (0, G.jsx)(H, { rows: ye(s.stops ?? [], V, i) });
+		if (s?.type === l.ScaleType.DataBar) return (0, G.jsx)(H, { rows: z(s, X(s.color, i, L), s.borderColor ? X(s.borderColor, i, L) : void 0) });
+		if (s?.type === l.ScaleType.IconSet) return (0, G.jsx)(O, {
+			sx: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: "100%",
+				height: "100%",
+				px: .5
+			},
+			children: (0, G.jsx)(y, {
+				icons: D(s),
+				order: "descending",
+				size: 14,
+				gap: 3
+			})
+		});
+		let e = c?.font, t = e?.underline && e.underline !== o.UnderlineStyle.None;
+		return (0, G.jsx)(O, {
+			sx: {
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				...u,
+				backgroundColor: Ue(c?.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: c?.borders ? `1px solid ${X(Object.values(c.borders)[0]?.color, i, be)}` : void 0,
+				outlineOffset: "-3px"
+			},
+			children: "Aa"
+		});
+	}, [
+		s,
+		c,
+		n,
+		u,
+		i,
+		a
+	]);
+	return (0, G.jsx)(B, {
+		sheet: !0,
+		className: "sxl-cf-rule-preview",
+		sx: {
+			width: "auto",
+			minWidth: 1.7 * n + "px",
+			height: `${n}px`
+		},
+		...r,
+		children: f
+	});
+});
+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"),
+	[l.ScaleType.ColorScale]: i("conditionalFormat.tab.colorScale"),
+	[l.ScaleType.DataBar]: i("conditionalFormat.tab.dataBars"),
+	[l.ScaleType.IconSet]: i("conditionalFormat.tab.iconSets")
+}, Q = (0, W.memo)((e) => {
+	let { conditionalFormat: t } = e, n = p();
+	d(t, "onAnyChange");
+	let r = t.getScale(), i = t.getCondition(), a = t.getStyle(), o = t.isProtected(), s = r?.type ?? "classic", c = (0, W.useRef)({ scales: {} }), f = (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)(O, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: (e) => e.spacing(1.75),
+					margin: (e) => e.spacing(1.25),
+					marginBottom: 0
+				},
+				children: [(0, G.jsxs)(O, {
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						gap: (e) => e.spacing(1.5)
+					},
+					children: [(0, G.jsx)(Z, {
+						conditionalFormat: t,
+						size: 48
+					}), (0, G.jsx)(k, {
+						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: s,
+				onChange: (e, n) => {
+					o || ((e) => {
+						if (e !== s) {
+							if (s === "classic" ? (c.current.condition = i?.toJSON() ?? null, c.current.style = a) : r && (c.current.scales[r.type] = r), e === "classic") t.update({
+								condition: c.current.condition ?? {
+									operator: u.BuiltInOperatorNames.Between,
+									param: null
+								},
+								style: c.current.style ?? null,
+								scale: null
+							});
+							else {
+								let n = c.current.scales[e] ?? (e === l.ScaleType.ColorScale ? w() : e === l.ScaleType.DataBar ? v() : g());
+								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))
+			}),
+			s === "classic" && (0, G.jsxs)(G.Fragment, { children: [(0, G.jsx)(De, {
+				format: a,
+				readOnly: o,
+				onFormatChange: (e) => t.update({ style: e })
+			}), (0, G.jsx)(ce, {
+				sx: {
+					...ue,
+					p: 2,
+					pb: 1
+				},
+				selectorTitle: n("conditionalFormat.highlight"),
+				condition: i,
+				ranges: t.getRanges(),
+				readOnly: o,
+				onConditionChange: (e) => t.setCondition(e)
+			})] }),
+			r?.type === l.ScaleType.ColorScale && (0, G.jsx)(je, {
+				scale: r,
+				onScaleChange: f,
+				readOnly: o
+			}),
+			r?.type === l.ScaleType.DataBar && (0, G.jsx)(Pe, {
+				scale: r,
+				onScaleChange: f,
+				readOnly: o
+			}),
+			r?.type === l.ScaleType.IconSet && (0, G.jsx)(He, {
+				scale: r,
+				onScaleChange: f,
+				readOnly: o
+			}),
+			s === "classic" && (0, G.jsx)(O, {
+				sx: {
+					pl: 2,
+					pr: 2,
+					border: 1,
+					borderColor: "divider",
+					borderRadius: 1
+				},
+				children: (0, G.jsx)(N, {
+					control: (0, G.jsx)(M, {
+						checked: t.isStopIfTrue(),
+						disabled: o,
+						onChange: (e) => t.setStopIfTrue(e.target.checked)
+					}),
+					label: n("conditionalFormat.stopIfTrue")
+				})
+			})
+		]
+	});
+	return (0, G.jsx)(le.Provider, {
+		value: t,
+		children: m
+	});
+});
+Q.displayName = "ConditionalFormatEditorPanel";
+var Ke = (0, W.memo)(({ item: e }) => {
+	let t = p();
+	return d(e, "onAnyChange"), !e.isStopIfTrue() || e.getScale() ? null : (0, G.jsx)(O, {
+		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)(k, {
+			variant: "caption",
+			children: t("conditionalFormat.stopIfTrue")
+		})
+	});
+});
+Ke.displayName = "StopIfTrueBadge";
+var qe = (0, W.memo)(({ item: e }) => {
+	let t = p();
+	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 };