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

package/{browser/esm/ztqpWR65YYMZ3EPk.mjs → cdn/assets/DVyIyNBrlUT9W9cY.js}

@@ -1,28 +1,30 @@
 /**
-* @license @sheetxl/studio-vanilla - SheetXL Studio - Vanilla entry point for integrating SheetXL UI. - v0.8.0-beta.10
+* @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 "./DLqc11Pf8vaE4Q5B.mjs";
-import { i as t, r as n } from "./C4VT6lNbpaDXCpBb.mjs";
-import { L as r } from "./CMxbiQ5J79M3n1tk.mjs";
-import { r as i } from "./D2aQPiGg0ZoMYzuf.mjs";
-import { tt as a, z as o } from "./BThOwSja2ra4xejQ.mjs";
-import { t as s } from "./DjdkGy-EI1kSo226.mjs";
-import { N as c } from "./CWoPWWRwMgkGPFFP.mjs";
-import { h as l } from "./DZRmBfjn2TgOTu5e.mjs";
-import { $ as u, t as d } from "./sxxbiJiCMOW2Eivd.mjs";
-import { _ as f, g as p, t as m, v as h } from "./rkTVQiYG3wd8oPom.mjs";
-import { $ as g, D as _, Et as v, F as y, T as b, Tt as x, ct as S, gt as C, j as w, lt as T, st as E } from "./CtZPEkaldpJpoGtW.mjs";
-import { r as D } from "./D2coM-dNrlLpnUu5.mjs";
-import { t as O } from "./-LoBx7J6imeqaxCq.mjs";
-import { B as k, T as ee } from "./DvWCBuY0jAL-RmJV.mjs";
-import { t as A } from "./CVxlfyE-gnJM8hOz.mjs";
-import { t as j } from "./DGuynZFJ9tqziqQs.mjs";
-import { t as M } from "./DaMKWQQTgIF08cT7.mjs";
-var N = e(t(), 1);
-function P(e) {
+import { n as e } from "./CTmLSM7UhiKOIhgu.js";
+import { t } from "./CCos0hQMhVcaGwU0.js";
+import { t as n } from "./CPGIT9PYUuWdSglk.js";
+import { L as r, j as i } from "./Cif0315haNLmyMj-.js";
+import { t as a } from "./TVEs01pqc117KeGZ.js";
+import { l as o } from "./CqP5OkILMJUsRGxp.js";
+import { r as s } from "./DdWtfDWDB6Yst5LZ.js";
+import { St as c, dt as l, mt as u } from "./OABpLvY7siKUyNIa.js";
+import { r as d } from "./D4DsR2aIqjajGOKK.js";
+import { _ as f, g as p, t as m, v as h } from "./DWcAYH0eBaOj-dU4.js";
+import { Dt as g, E as _, Et as v, I as y, M as b, O as x, _t as S, ct as C, et as w, lt as T, ut as E } from "./DX-iRDnwn8uZZIqp.js";
+import { r as D } from "./BqM-W_oFdjeyu8N4.js";
+import { t as O } from "./CwPsCkeHan5zXDyX.js";
+import { T as k, V as A } from "./nQBuuL7ZHzDHpWHk.js";
+import { t as j } from "./B5znT6l0E-uRlPxA.js";
+import { t as M } from "./DLGHrXPNZh3ZMjhS.js";
+import { t as N } from "./DkZqI9EyJ9BaBNL_.js";
+import { t as P } from "./BSW3wcvLJdkMerg-.js";
+import { t as ee } from "./CImdnjQtd2Yn7uXl.js";
+var F = e(t(), 1);
+function I(e) {
 	return f("MuiSkeleton", e);
 }
 p("MuiSkeleton", [
@@ -37,7 +39,7 @@ p("MuiSkeleton", [
 	"fitContent",
 	"heightAuto"
 ]);
-var F = e(n(), 1), I = v`
+var L = n(), R = g`
   0% {
     opacity: 1;
   }
@@ -49,7 +51,7 @@ var F = e(n(), 1), I = v`
   100% {
     opacity: 1;
   }
-`, L = v`
+`, z = g`
   0% {
     transform: translateX(-100%);
   }
@@ -62,13 +64,13 @@ var F = e(n(), 1), I = v`
   100% {
     transform: translateX(100%);
   }
-`, te = typeof I == "string" ? null : x`
-        animation: ${I} 2s ease-in-out 0.5s infinite;
-      `, ne = typeof L == "string" ? null : x`
+`, te = typeof R == "string" ? null : v`
+        animation: ${R} 2s ease-in-out 0.5s infinite;
+      `, B = typeof z == "string" ? null : v`
         &::after {
-          animation: ${L} 2s linear 0.5s infinite;
+          animation: ${z} 2s linear 0.5s infinite;
         }
-      `, R = T("span", {
+      `, V = E("span", {
 	name: "MuiSkeleton",
 	slot: "Root",
 	overridesResolver: (e, t) => {
@@ -82,12 +84,12 @@ var F = e(n(), 1), I = v`
 			n.hasChildren && !n.height && t.heightAuto
 		];
 	}
-})(S(({ theme: e }) => {
+})(T(({ theme: e }) => {
 	let t = (n = e.shape.borderRadius, String(n).match(/[\d.\-+]*\s*(.*)/)[1] || "px");
 	var n;
 	let r = (i = e.shape.borderRadius, parseFloat(i));
 	var i;
-	let a = g(e, { animation: "none" }), o = g(e, { "&::after": {
+	let a = w(e, { animation: "none" }), o = w(e, { "&::after": {
 		animation: "none",
 		display: "none"
 	} });
@@ -130,7 +132,7 @@ var F = e(n(), 1), I = v`
 			},
 			{
 				props: { animation: "pulse" },
-				style: te || { animation: `${I} 2s ease-in-out 0.5s infinite` }
+				style: te || { animation: `${R} 2s ease-in-out 0.5s infinite` }
 			},
 			...a ? [{
 				props: { animation: "pulse" },
@@ -156,7 +158,7 @@ var F = e(n(), 1), I = v`
 			},
 			{
 				props: { animation: "wave" },
-				style: ne || { "&::after": { animation: `${L} 2s linear 0.5s infinite` } }
+				style: B || { "&::after": { animation: `${z} 2s linear 0.5s infinite` } }
 			},
 			...o ? [{
 				props: { animation: "wave" },
@@ -164,8 +166,8 @@ var F = e(n(), 1), I = v`
 			}] : []
 		]
 	};
-})), z = N.forwardRef(function(e, t) {
-	let n = E({
+})), H = F.forwardRef(function(e, t) {
+	let n = C({
 		props: e,
 		name: "MuiSkeleton"
 	}), { animation: r = "pulse", className: i, component: a = "span", height: o, style: s, variant: c = "text", width: l, ...u } = n, d = {
@@ -176,16 +178,16 @@ var F = e(n(), 1), I = v`
 		hasChildren: !!u.children
 	}, f = ((e) => {
 		let { classes: t, variant: n, animation: r, hasChildren: i, width: a, height: o } = e;
-		return C({ root: [
+		return S({ root: [
 			"root",
 			n,
 			r,
 			i && "withChildren",
 			i && !a && "fitContent",
 			i && !o && "heightAuto"
-		] }, P, t);
+		] }, I, t);
 	})(d);
-	return (0, F.jsx)(R, {
+	return (0, L.jsx)(V, {
 		as: a,
 		ref: t,
 		className: h(f.root, i),
@@ -197,10 +199,10 @@ var F = e(n(), 1), I = v`
 			...s
 		}
 	});
-}), B = (e, t) => {
+}), U = (e, t) => {
 	if (!e?.color) return null;
 	try {
-		let n = new c(e.color).toCSS(t.palette.mode === "dark");
+		let n = new a(e.color).toCSS(t.palette.mode === "dark");
 		return {
 			fill: n,
 			text: t.palette.getContrastText(n)
@@ -208,20 +210,20 @@ var F = e(n(), 1), I = v`
 	} catch {
 		return null;
 	}
-}, V = "8 / 5", H = (e) => {
-	let { entry: t, category: n } = e, r = (u() === "dark" ? t.thumbnailDarkUrl : void 0) ?? t.thumbnailUrl;
-	return (0, F.jsx)(U, {
+}, W = "8 / 5", ne = (e) => {
+	let { entry: t, category: n } = e, r = (d() === "dark" ? t.thumbnailDarkUrl : void 0) ?? t.thumbnailUrl;
+	return (0, L.jsx)(re, {
 		src: r,
 		category: n
 	}, r);
-}, U = (e) => {
-	let { src: t, category: n } = e, [r, a] = (0, N.useState)(t ? "loading" : "failed");
-	return (0, F.jsxs)(m, {
+}, re = (e) => {
+	let { src: t, category: n } = e, [r, i] = (0, F.useState)(t ? "loading" : "failed");
+	return (0, L.jsxs)(m, {
 		className: "template-thumbnail",
 		sx: {
 			position: "relative",
 			width: "100%",
-			aspectRatio: V,
+			aspectRatio: W,
 			overflow: "hidden",
 			borderRadius: 1,
 			border: (e) => `1px solid ${e.palette.divider}`,
@@ -231,19 +233,19 @@ var F = e(n(), 1), I = v`
 			alignItems: "center",
 			justifyContent: "center"
 		},
-		children: [r === "failed" ? (0, F.jsx)(i, {
+		children: [r === "failed" ? (0, L.jsx)(s, {
 			iconKey: "FileNew",
 			style: {
 				fontSize: "2.5rem",
 				opacity: .4
 			}
-		}) : (0, F.jsx)("img", {
+		}) : (0, L.jsx)("img", {
 			src: t,
 			alt: "",
 			loading: "lazy",
 			draggable: !1,
-			onLoad: () => a("loaded"),
-			onError: () => a("failed"),
+			onLoad: () => i("loaded"),
+			onError: () => i("failed"),
 			style: {
 				width: "100%",
 				height: "100%",
@@ -252,18 +254,18 @@ var F = e(n(), 1), I = v`
 				opacity: +(r === "loaded"),
 				transition: "opacity 150ms ease-out"
 			}
-		}), n?.color ? (0, F.jsx)(m, { sx: (e) => ({
+		}), n?.color ? (0, L.jsx)(m, { sx: (e) => ({
 			position: "absolute",
 			top: 0,
 			left: 0,
 			right: 0,
 			height: "3px",
-			backgroundColor: B(n, e)?.fill
+			backgroundColor: U(n, e)?.fill
 		}) }) : null]
 	});
-}, W = (e) => {
+}, ie = (e) => {
 	let { entry: t, category: n, onSelect: r } = e;
-	return (0, F.jsxs)(y, {
+	return (0, L.jsxs)(y, {
 		className: "template-tile",
 		disableRipple: !0,
 		onClick: r,
@@ -286,17 +288,17 @@ var F = e(n(), 1), I = v`
 				outlineOffset: "-2px"
 			}
 		},
-		children: [(0, F.jsx)(H, {
+		children: [(0, L.jsx)(ne, {
 			entry: t,
 			category: n
-		}), (0, F.jsxs)(m, {
+		}), (0, L.jsxs)(m, {
 			sx: { minWidth: 0 },
-			children: [(0, F.jsx)(w, {
+			children: [(0, L.jsx)(b, {
 				variant: "subtitle2",
 				component: "div",
 				noWrap: !0,
 				children: t.title
-			}), n ? (0, F.jsxs)(w, {
+			}), n ? (0, L.jsxs)(b, {
 				variant: "caption",
 				component: "div",
 				noWrap: !0,
@@ -306,16 +308,16 @@ var F = e(n(), 1), I = v`
 					alignItems: "center",
 					gap: .75
 				},
-				children: [n.color ? (0, F.jsx)(m, {
+				children: [n.color ? (0, L.jsx)(m, {
 					component: "span",
 					sx: (e) => ({
 						width: "8px",
 						height: "8px",
 						borderRadius: "50%",
 						flex: "none",
-						backgroundColor: B(n, e)?.fill
+						backgroundColor: U(n, e)?.fill
 					})
-				}) : null, (0, F.jsx)(m, {
+				}) : null, (0, L.jsx)(m, {
 					component: "span",
 					sx: {
 						overflow: "hidden",
@@ -326,7 +328,7 @@ var F = e(n(), 1), I = v`
 			}) : null]
 		})]
 	});
-}, re = () => (0, F.jsxs)(m, {
+}, ae = () => (0, L.jsxs)(m, {
 	sx: {
 		padding: 1,
 		display: "flex",
@@ -334,47 +336,47 @@ var F = e(n(), 1), I = v`
 		gap: .75
 	},
 	children: [
-		(0, F.jsx)(z, {
+		(0, L.jsx)(H, {
 			variant: "rectangular",
 			sx: {
 				width: "100%",
 				height: "auto",
-				aspectRatio: V,
+				aspectRatio: W,
 				borderRadius: 1
 			}
 		}),
-		(0, F.jsx)(z, {
+		(0, L.jsx)(H, {
 			variant: "text",
 			width: "60%"
 		}),
-		(0, F.jsx)(z, {
+		(0, L.jsx)(H, {
 			variant: "text",
 			width: "35%"
 		})
 	]
-}), G = (0, N.memo)((0, N.forwardRef)((e, t) => {
-	let { catalog: n, onSelect: r, filter: i, groupBy: c, renderTile: l, tileMinWidth: u = 180, emptyLabel: d, visibleRows: f, sx: p = o.EmptyCssProperties, style: h, className: g, onKeyDown: _, ...v } = e, y = a(), x = (0, N.useRef)(null), [S, C] = (0, N.useState)(0), T = (0, N.useRef)(null);
+}), G = (0, F.memo)((0, F.forwardRef)((e, t) => {
+	let { catalog: n, onSelect: r, filter: i, groupBy: a, renderTile: o, tileMinWidth: s = 180, emptyLabel: d, visibleRows: f, sx: p = u.EmptyCssProperties, style: h, className: g, onKeyDown: v, ...y } = e, x = l(), S = (0, F.useRef)(null), [C, w] = (0, F.useState)(0), T = (0, F.useRef)(null);
 	T.current = () => {
-		let e = x.current?.querySelector(".template-grid")?.firstElementChild, t = (e?.offsetHeight ? e : e?.firstElementChild)?.getBoundingClientRect().height;
-		t && C(t);
-	}, (0, N.useLayoutEffect)(() => {
+		let e = S.current?.querySelector(".template-grid")?.firstElementChild, t = (e?.offsetHeight ? e : e?.firstElementChild)?.getBoundingClientRect().height;
+		t && w(t);
+	}, (0, F.useLayoutEffect)(() => {
 		f && T.current?.();
-	}), (0, N.useEffect)(() => {
-		let e = x.current;
+	}), (0, F.useEffect)(() => {
+		let e = S.current;
 		if (!f || !e) return;
 		let t = new ResizeObserver(() => T.current?.());
 		return t.observe(e), () => t.disconnect();
 	}, [f]);
-	let E, D = (0, N.useMemo)(() => new Map(n.categories.map((e) => [e.id, e])), [n.categories]), O = (0, N.useMemo)(() => {
+	let E, D = (0, F.useMemo)(() => new Map(n.categories.map((e) => [e.id, e])), [n.categories]), O = (0, F.useMemo)(() => {
 		let e = i ? n.entries.filter(i) : n.entries;
-		if (!c) return [{
+		if (!a) return [{
 			key: null,
 			entries: e
 		}];
 		let t = /* @__PURE__ */ new Map();
 		for (let e of n.categories) t.set(e.id, []);
 		for (let n of e) {
-			let e = c(n), r = t.get(e);
+			let e = a(n), r = t.get(e);
 			r || t.set(e, r = []), r.push(n);
 		}
 		return [...t].filter(([, e]) => e.length > 0).map(([e, t]) => ({
@@ -387,19 +389,19 @@ var F = e(n(), 1), I = v`
 		n.categories,
 		D,
 		i,
-		c
+		a
 	]), k = {
 		display: "grid",
-		gridTemplateColumns: `repeat(auto-fill, minmax(${u}px, 1fr))`,
+		gridTemplateColumns: `repeat(auto-fill, minmax(${s}px, 1fr))`,
 		gap: "8px"
 	};
-	return E = n.status === "loading" ? (0, F.jsx)(m, {
+	return E = n.status === "loading" ? (0, L.jsx)(m, {
 		className: "template-grid",
 		sx: k,
 		"aria-busy": "true",
-		"aria-label": y("template.loading"),
-		children: Array.from({ length: 6 }, (e, t) => (0, F.jsx)(re, {}, t))
-	}) : n.status === "error" ? (0, F.jsxs)(m, {
+		"aria-label": x("template.loading"),
+		children: Array.from({ length: 6 }, (e, t) => (0, L.jsx)(ae, {}, t))
+	}) : n.status === "error" ? (0, L.jsxs)(m, {
 		sx: {
 			display: "flex",
 			flexDirection: "column",
@@ -408,28 +410,28 @@ var F = e(n(), 1), I = v`
 			padding: 4,
 			textAlign: "center"
 		},
-		children: [(0, F.jsx)(w, {
+		children: [(0, L.jsx)(b, {
 			variant: "body2",
 			sx: { color: "text.secondary" },
-			children: y("template.loadFailed")
-		}), (0, F.jsx)(b, {
+			children: x("template.loadFailed")
+		}), (0, L.jsx)(_, {
 			variant: "outlined",
 			size: "small",
 			onClick: n.retry,
-			children: y("template.retry")
+			children: x("template.retry")
 		})]
-	}) : O.every((e) => e.entries.length === 0) ? (0, F.jsx)(w, {
+	}) : O.every((e) => e.entries.length === 0) ? (0, L.jsx)(b, {
 		variant: "body2",
 		sx: {
 			color: "text.secondary",
 			padding: 4,
 			textAlign: "center"
 		},
-		children: d ?? y("template.empty")
-	}) : O.map((e) => (0, F.jsxs)(m, {
+		children: d ?? x("template.empty")
+	}) : O.map((e) => (0, L.jsxs)(m, {
 		role: "group",
 		"aria-label": e.title,
-		children: [e.title ? (0, F.jsx)(w, {
+		children: [e.title ? (0, L.jsx)(b, {
 			variant: "overline",
 			component: "div",
 			sx: {
@@ -437,7 +439,7 @@ var F = e(n(), 1), I = v`
 				paddingX: 1
 			},
 			children: e.title
-		}) : null, (0, F.jsx)(m, {
+		}) : null, (0, L.jsx)(m, {
 			className: "template-grid",
 			sx: k,
 			children: e.entries.map((e) => {
@@ -445,32 +447,38 @@ var F = e(n(), 1), I = v`
 					category: D.get(e.category),
 					onSelect: () => r?.(e)
 				};
-				return l ? (0, F.jsx)(m, {
+				return o ? (0, L.jsx)(m, {
 					sx: { display: "contents" },
-					children: l(e, t)
-				}, e.id) : (0, F.jsx)(W, {
+					children: (0, L.jsx)(c, {
+						render: o,
+						props: {
+							entry: e,
+							...t
+						}
+					})
+				}, e.id) : (0, L.jsx)(ie, {
 					entry: e,
 					...t
 				}, e.id);
 			})
 		})]
-	}, e.key ?? "")), (0, F.jsx)(m, {
+	}, e.key ?? "")), (0, L.jsx)(m, {
 		ref: t,
-		className: s(g, "template-panel"),
+		className: ee(g, "template-panel"),
 		sx: p,
-		style: f && S ? {
+		style: f && C ? {
 			boxSizing: "content-box",
 			scrollbarGutter: "stable",
-			height: `${Math.ceil(f * S + 8 * (f - 1))}px`,
-			minHeight: `${Math.ceil(S)}px`,
+			height: `${Math.ceil(f * C + 8 * (f - 1))}px`,
+			minHeight: `${Math.ceil(C)}px`,
 			...h
 		} : h,
-		...v,
-		children: (0, F.jsx)(m, {
-			ref: x,
+		...y,
+		children: (0, L.jsx)(m, {
+			ref: S,
 			onKeyDown: (e) => {
-				if (_?.(e), e.defaultPrevented) return;
-				let t = x.current;
+				if (v?.(e), e.defaultPrevented) return;
+				let t = S.current;
 				if (!t) return;
 				let n = Array.from(t.querySelectorAll(".template-tile")), r = n.indexOf(document.activeElement);
 				if (r < 0) return;
@@ -505,7 +513,7 @@ var F = e(n(), 1), I = v`
 	});
 }));
 G.displayName = "TemplatePanel";
-var ie = (e, t, n) => (0, N.useMemo)(() => {
+var oe = (e, t, n) => (0, F.useMemo)(() => {
 	if (!t.trim() && n.length === 0) return;
 	let r = new Map(e.map((e) => [e.id, e])), i = n.length > 0 ? new Set(n) : null;
 	return (e) => !(i && !i.has(e.category)) && ((e, t, n) => {
@@ -521,9 +529,9 @@ var ie = (e, t, n) => (0, N.useMemo)(() => {
 	e,
 	t,
 	n
-]), ae = [], oe = (e) => {
+]), se = [], ce = (e) => {
 	let { category: t } = e;
-	return (0, F.jsx)(m, {
+	return (0, L.jsx)(m, {
 		component: "span",
 		sx: (e) => ({
 			display: "inline-block",
@@ -531,18 +539,18 @@ var ie = (e, t, n) => (0, N.useMemo)(() => {
 			height: "10px",
 			borderRadius: "50%",
 			flex: "none",
-			backgroundColor: B(t, e)?.fill ?? e.palette.action.selected
+			backgroundColor: U(t, e)?.fill ?? e.palette.action.selected
 		})
 	});
-}, se = (e) => {
+}, le = (e) => {
 	let { category: t, onDelete: n } = e;
-	return (0, F.jsx)(_, {
+	return (0, L.jsx)(x, {
 		size: "small",
 		label: t.title,
 		title: t.description,
 		onDelete: n,
 		sx: (e) => {
-			let n = B(t, e);
+			let n = U(t, e);
 			return {
 				marginY: .25,
 				marginRight: .5,
@@ -567,37 +575,37 @@ var ie = (e, t, n) => (0, N.useMemo)(() => {
 			};
 		}
 	});
-}, ce = (e) => {
-	let { value: t, onChange: n, categories: r, categoryIds: o = ae, onCategoryIdsChange: s, sx: c } = e, l = a(), u = (0, N.useRef)(null), [f, p] = (0, N.useState)(null), m = !!s && (r?.length ?? 0) > 1, h = (0, N.useMemo)(() => {
-		if (!m || o.length === 0) return [];
+}, ue = (e) => {
+	let { value: t, onChange: n, categories: r, categoryIds: i = se, onCategoryIdsChange: a, sx: o } = e, c = l(), u = (0, F.useRef)(null), [d, f] = (0, F.useState)(null), p = !!a && (r?.length ?? 0) > 1, m = (0, F.useMemo)(() => {
+		if (!p || i.length === 0) return [];
 		let e = new Map(r.map((e) => [e.id, e]));
-		return o.map((t) => e.get(t)).filter((e) => !!e);
+		return i.map((t) => e.get(t)).filter((e) => !!e);
 	}, [
-		m,
+		p,
 		r,
-		o
-	]), g = (e) => {
-		s?.(e), u.current?.focus();
-	}, _ = () => {
-		p(null), u.current?.focus();
-	}, v = (0, F.jsx)(i, { iconKey: "Find" }), b = (0, F.jsx)(j, {
+		i
+	]), h = (e) => {
+		a?.(e), u.current?.focus();
+	}, g = () => {
+		f(null), u.current?.focus();
+	}, _ = (0, L.jsx)(s, { iconKey: "Find" }), v = (0, L.jsx)(N, {
 		position: "start",
-		children: v
+		children: _
 	});
-	if (m) {
-		let e = l("template.filterByCategory");
-		b = (0, F.jsxs)(F.Fragment, { children: [(0, F.jsx)(j, {
+	if (p) {
+		let e = c("template.filterByCategory");
+		v = (0, L.jsxs)(L.Fragment, { children: [(0, L.jsx)(N, {
 			position: "start",
 			sx: { marginRight: .5 },
-			children: (0, F.jsxs)(y, {
+			children: (0, L.jsxs)(y, {
 				"aria-label": e,
 				title: e,
 				"aria-haspopup": "menu",
-				"aria-expanded": !!f,
+				"aria-expanded": !!d,
 				onMouseDown: (e) => {
 					e.button === 0 && e.preventDefault();
 				},
-				onClick: (e) => p(e.currentTarget),
+				onClick: (e) => f(e.currentTarget),
 				sx: {
 					display: "flex",
 					alignItems: "center",
@@ -608,7 +616,7 @@ var ie = (e, t, n) => (0, N.useMemo)(() => {
 					color: "inherit",
 					"&:hover, &.Mui-focusVisible": { backgroundColor: "action.hover" }
 				},
-				children: [v, (0, F.jsx)(i, {
+				children: [_, (0, L.jsx)(s, {
 					iconKey: "ExpandMore",
 					style: {
 						fontSize: "1rem",
@@ -616,33 +624,33 @@ var ie = (e, t, n) => (0, N.useMemo)(() => {
 					}
 				})]
 			})
-		}), h.map((e) => (0, F.jsx)(se, {
+		}), m.map((e) => (0, L.jsx)(le, {
 			category: e,
-			onDelete: () => g(o.filter((t) => t !== e.id))
+			onDelete: () => h(i.filter((t) => t !== e.id))
 		}, e.id))] });
 	}
-	let x = !!t || h.length > 0;
-	return (0, F.jsxs)(F.Fragment, { children: [(0, F.jsx)(O, {
+	let b = !!t || m.length > 0;
+	return (0, L.jsxs)(L.Fragment, { children: [(0, L.jsx)(O, {
 		size: "small",
 		value: t,
-		placeholder: h.length > 0 ? void 0 : l("template.search"),
+		placeholder: m.length > 0 ? void 0 : c("template.search"),
 		inputRef: u,
 		onChange: (e) => n(e.target.value),
 		onKeyDown: (e) => {
-			if (e.key === "Escape" && x) e.stopPropagation(), t ? n("") : g([]);
-			else if (e.key === "Backspace" && h.length > 0) {
+			if (e.key === "Escape" && b) e.stopPropagation(), t ? n("") : h([]);
+			else if (e.key === "Backspace" && m.length > 0) {
 				let t = u.current;
-				e.target === t && t.selectionStart === 0 && t.selectionEnd === 0 && (e.preventDefault(), g(o.slice(0, -1)));
+				e.target === t && t.selectionStart === 0 && t.selectionEnd === 0 && (e.preventDefault(), h(i.slice(0, -1)));
 			}
 		},
-		sx: c,
+		sx: o,
 		slotProps: {
 			input: {
 				sx: {
 					backgroundColor: "background.paper",
 					flexWrap: "wrap",
 					paddingY: "6px",
-					paddingRight: x ? "40px" : void 0,
+					paddingRight: b ? "40px" : void 0,
 					"& .MuiInputBase-input": {
 						flex: "1 1 60px",
 						minWidth: "60px",
@@ -663,19 +671,19 @@ var ie = (e, t, n) => (0, N.useMemo)(() => {
 						marginLeft: 0
 					}
 				},
-				startAdornment: b,
-				endAdornment: x ? (0, F.jsx)(j, {
+				startAdornment: v,
+				endAdornment: b ? (0, L.jsx)(N, {
 					position: "end",
-					children: (0, F.jsx)(ee, {
-						"aria-label": l("template.clearSearch"),
-						propsTooltip: { label: l("template.clearSearch") },
+					children: (0, L.jsx)(k, {
+						"aria-label": c("template.clearSearch"),
+						propsTooltip: { label: c("template.clearSearch") },
 						onMouseDown: (e) => {
 							e.button === 0 && e.preventDefault();
 						},
 						onClick: () => {
-							n(""), g([]);
+							n(""), h([]);
 						},
-						icon: (0, F.jsx)(i, { iconKey: "Close" }),
+						icon: (0, L.jsx)(s, { iconKey: "Close" }),
 						size: "small"
 					})
 				}) : void 0
@@ -683,30 +691,30 @@ var ie = (e, t, n) => (0, N.useMemo)(() => {
 			htmlInput: {
 				spellCheck: !1,
 				autoComplete: "off",
-				"aria-label": l("template.search")
+				"aria-label": c("template.search")
 			}
 		}
-	}), m ? (0, F.jsxs)(D, {
-		anchorEl: f,
-		open: !!f,
-		onClose: _,
+	}), p ? (0, L.jsxs)(D, {
+		anchorEl: d,
+		open: !!d,
+		onClose: g,
 		disableRestoreFocus: !0,
 		slotProps: { list: {
 			dense: !0,
-			"aria-label": l("dialog.template.categories")
+			"aria-label": c("dialog.template.categories")
 		} },
 		children: [r.map((e) => {
-			let t = o.includes(e.id);
-			return (0, F.jsxs)(A, {
+			let t = i.includes(e.id);
+			return (0, L.jsxs)(j, {
 				selected: t,
 				title: e.description,
 				onClick: () => {
-					s(t ? o.filter((t) => t !== e.id) : [...o, e.id]), _();
+					a(t ? i.filter((t) => t !== e.id) : [...i, e.id]), g();
 				},
 				children: [
-					(0, F.jsx)(k, { children: (0, F.jsx)(oe, { category: e }) }),
-					(0, F.jsx)(M, { children: e.title }),
-					t ? (0, F.jsx)(i, {
+					(0, L.jsx)(A, { children: (0, L.jsx)(ce, { category: e }) }),
+					(0, L.jsx)(P, { children: e.title }),
+					t ? (0, L.jsx)(s, {
 						iconKey: "Check",
 						style: {
 							fontSize: "1rem",
@@ -715,14 +723,14 @@ var ie = (e, t, n) => (0, N.useMemo)(() => {
 					}) : null
 				]
 			}, e.id);
-		}), h.length > 0 ? [(0, F.jsx)(d, {}, "divider"), (0, F.jsxs)(A, {
+		}), m.length > 0 ? [(0, L.jsx)(M, {}, "divider"), (0, L.jsxs)(j, {
 			onClick: () => {
-				s([]), _();
+				a([]), g();
 			},
-			children: [(0, F.jsx)(k, {}), (0, F.jsx)(M, { children: l("template.allCategories") })]
+			children: [(0, L.jsx)(A, {}), (0, L.jsx)(P, { children: c("template.allCategories") })]
 		}, "all")] : null]
 	}) : null] });
-}, K = /^\d+\.\d+\.\d+-([0-9A-Za-z-]+)/.exec(l)?.[1], q = `https://unpkg.com/@sheetxl/templates-workbook${K ? `@${K}` : ""}/dist`, J = "templates-workbook", Y = (e) => e.replace(/\.[^/.]+$/, "").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ").trim().replace(/\b\w/g, (e) => e.toUpperCase()), X = (e, t) => {
+}, K = i(o), q = `https://unpkg.com/@sheetxl/templates-workbook${K ? `@${K}` : ""}/dist`, J = "templates-workbook", Y = (e) => e.replace(/\.[^/.]+$/, "").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ").trim().replace(/\b\w/g, (e) => e.toUpperCase()), X = (e, t) => {
 	let n = `${e}${e.endsWith("/") ? "" : "/"}${J}/${t}`;
 	return typeof document > "u" ? n : new URL(n, document.baseURI).href;
 }, Z = (e) => typeof e == "string" && e ? e : void 0, Q = /* @__PURE__ */ new Map(), $ = (e = q) => {
@@ -774,13 +782,13 @@ var ie = (e, t, n) => (0, N.useMemo)(() => {
 	})(), Q.set(e, t), t.catch(() => {
 		Q.delete(e);
 	})), t;
-}, le = (e = {}) => {
-	let { path: t = q } = e, [n, r] = (0, N.useState)(0), [i, a] = (0, N.useState)({
+}, de = (e = {}) => {
+	let { path: t = q } = e, [n, r] = (0, F.useState)(0), [i, a] = (0, F.useState)({
 		status: "loading",
 		categories: [],
 		entries: []
 	});
-	return (0, N.useEffect)(() => {
+	return (0, F.useEffect)(() => {
 		let e = !1;
 		return a((e) => e.status === "loading" ? e : {
 			status: "loading",
@@ -803,9 +811,9 @@ var ie = (e, t, n) => (0, N.useMemo)(() => {
 		};
 	}, [t, n]), {
 		...i,
-		retry: (0, N.useCallback)(() => {
+		retry: (0, F.useCallback)(() => {
 			r((e) => e + 1);
 		}, [])
 	};
 };
-export { G as a, ce as i, ie as n, $ as r, le as t };
+export { de as a, ue as i, oe as n, G as r, $ as t };