@solostylist/ui-kit 1.0.222 → 1.0.224

package/dist/{s-tool-bar-Du66wRC2.js → s-tool-bar-DGfyNoYW.js}

@@ -1,15 +1,15 @@
-import { o as e, s as t } from "./theme-primitives-OrQ-xFJR.js";
-import { t as n } from "./createSvgIcon-BdNZIlKS.js";
-import { t as r } from "./Close-oXeOGTZb.js";
-import { t as i } from "./Download-DMm8oiCF.js";
-import { t as a } from "./InfoOutlined-CqXSSVWh.js";
-import { t as o } from "./s-select-ClL8bygg.js";
-import s, { useCallback as c, useEffect as l, useMemo as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { createPortal as m } from "react-dom";
-import { Box as h, Checkbox as g, Dialog as _, DialogContent as v, DialogTitle as y, Divider as b, IconButton as x, Slider as S, TextField as C, Tooltip as w, Typography as T, alpha as E } from "@mui/material";
+import { tint as e } from "./theme/utils.js";
+import { t } from "./createSvgIcon-BdNZIlKS.js";
+import { t as n } from "./Close-Bj2HYB9Q.js";
+import { t as r } from "./Download-BhSXOhCI.js";
+import { t as i } from "./InfoOutlined-C1AW3f5V.js";
+import { t as a } from "./s-select-b8CHbeCf.js";
+import o, { useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { createPortal as p } from "react-dom";
+import { Box as m, Checkbox as h, Dialog as g, DialogContent as _, DialogTitle as v, Divider as y, IconButton as b, Slider as x, TextField as S, Tooltip as C, Typography as w } from "@mui/material";
 //#region ../../node_modules/@mui/icons-material/AddPhotoAlternate.mjs
-var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8zM5 19l3-4 2 3 3-4 4 5z" }), "AddPhotoAlternate"), O = n(/* @__PURE__ */ f("path", { d: "m19 9 1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25z" }), "AutoAwesome"), k = n(/* @__PURE__ */ f("path", { d: "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6m6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26" }), "Autorenew"), A = s.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ f(C, {
+var T = t(/* @__PURE__ */ d("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8zM5 19l3-4 2 3 3-4 4 5z" }), "AddPhotoAlternate"), E = t(/* @__PURE__ */ d("path", { d: "m19 9 1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25z" }), "AutoAwesome"), D = t(/* @__PURE__ */ d("path", { d: "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6m6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26" }), "Autorenew"), O = o.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ d(S, {
 	value: t,
 	onChange: (e) => n(e.target.value),
 	onFocus: r,
@@ -21,7 +21,7 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 	maxRows: e.maxRows ?? 5,
 	fullWidth: !0,
 	...e.componentProps?.textarea ?? {}
-})), j = s.memo((e) => /* @__PURE__ */ f(T, {
+})), k = o.memo((e) => /* @__PURE__ */ d(w, {
 	variant: "caption",
 	sx: {
 		whiteSpace: "nowrap",
@@ -31,13 +31,13 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 		textAlign: "center"
 	},
 	children: e.label
-})), M = s.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ p(h, {
+})), A = o.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ f(m, {
 	sx: {
 		width: 120,
 		display: "flex",
 		flexDirection: "column"
 	},
-	children: [/* @__PURE__ */ f(j, { label: e.label }), /* @__PURE__ */ f(C, {
+	children: [/* @__PURE__ */ d(k, { label: e.label }), /* @__PURE__ */ d(S, {
 		type: "number",
 		value: t ?? e.defaultValue ?? 0,
 		onChange: (e) => n(Number(e.target.value)),
@@ -52,18 +52,18 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 		sx: { "& input": { textAlign: "center" } },
 		...e.componentProps?.number ?? {}
 	})]
-})), N = s.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ p(h, {
+})), j = o.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: o }) => /* @__PURE__ */ f(m, {
 	sx: {
 		width: 180,
 		display: "flex",
 		flexDirection: "column"
 	},
-	children: [/* @__PURE__ */ f(j, { label: e.label }), /* @__PURE__ */ f(o, {
+	children: [/* @__PURE__ */ d(k, { label: e.label }), /* @__PURE__ */ d(a, {
 		value: t ?? e.defaultValue ?? "",
 		onChange: (e) => n(e.target.value),
 		onFocus: r,
 		onBlur: i,
-		disabled: a,
+		disabled: o,
 		placeholder: e.placeholder,
 		options: e.options ?? [],
 		optionLabel: e.optionLabel,
@@ -72,19 +72,19 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 		searchPlaceholder: e.searchPlaceholder,
 		...e.componentProps?.select ?? {}
 	})]
-})), P = s.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ p(h, {
+})), M = o.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ f(m, {
 	sx: {
 		width: 160,
 		display: "flex",
 		flexDirection: "column"
 	},
-	children: [/* @__PURE__ */ f(j, { label: e.label }), /* @__PURE__ */ p(h, {
+	children: [/* @__PURE__ */ d(k, { label: e.label }), /* @__PURE__ */ f(m, {
 		sx: {
 			display: "flex",
 			alignItems: "center",
 			height: 36
 		},
-		children: [/* @__PURE__ */ f(S, {
+		children: [/* @__PURE__ */ d(x, {
 			value: t ?? e.defaultValue ?? e.min ?? 0,
 			onChange: (e, t) => n(t),
 			onMouseDown: r,
@@ -95,7 +95,7 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 			step: e.step ?? 1,
 			sx: { flex: 1 },
 			...e.componentProps?.slider ?? {}
-		}), /* @__PURE__ */ f(h, {
+		}), /* @__PURE__ */ d(m, {
 			sx: {
 				minWidth: 60,
 				textAlign: "center",
@@ -105,11 +105,11 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 			children: t ?? e.defaultValue ?? e.min ?? 0
 		})]
 	})]
-})), F = s.memo(({ input: e, value: t, onChange: n, disabled: i }) => {
-	let a = s.useRef(null), [o, c] = s.useState([]), [u, d] = s.useState(null), m = e.multiple ?? !1, g = e.maxImages ?? 5;
-	l(() => {
+})), N = o.memo(({ input: e, value: t, onChange: r, disabled: i }) => {
+	let a = o.useRef(null), [s, l] = o.useState([]), [u, p] = o.useState(null), h = e.multiple ?? !1, g = e.maxImages ?? 5;
+	c(() => {
 		let e = [];
-		return c(((t) => {
+		return l(((t) => {
 			if (!t) return [];
 			let n = Array.isArray(t) ? t : [t], r = [], i = /* @__PURE__ */ new Map();
 			return n.forEach((t) => {
@@ -134,42 +134,42 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 		};
 	}, [t]);
 	let _ = (e) => {
-		let r = e.target.files;
-		if (!(!r || r.length === 0)) {
-			if (m) {
-				let e = R(t), i = Array.from(r).slice(0, g - e.length);
-				n([...e, ...i]);
-			} else n(r[0]);
+		let n = e.target.files;
+		if (!(!n || n.length === 0)) {
+			if (h) {
+				let e = I(t), i = Array.from(n).slice(0, g - e.length);
+				r([...e, ...i]);
+			} else r(n[0]);
 			e.target.value = "";
 		}
-	}, v = (e, r) => {
-		if (e.stopPropagation(), m && Array.isArray(t)) {
-			let e = t.filter((e, t) => t !== r);
-			n(e.length > 0 ? e : null);
-		} else n(null);
+	}, v = (e, n) => {
+		if (e.stopPropagation(), h && Array.isArray(t)) {
+			let e = t.filter((e, t) => t !== n);
+			r(e.length > 0 ? e : null);
+		} else r(null);
 	}, y = () => {
-		i || m && o.length >= g || a.current?.click();
-	}, b = m && o.length < g;
-	return /* @__PURE__ */ p(h, {
+		i || h && s.length >= g || a.current?.click();
+	}, x = h && s.length < g;
+	return /* @__PURE__ */ f(m, {
 		sx: {
 			display: "flex",
 			alignItems: "center",
 			gap: .75
 		},
 		children: [
-			/* @__PURE__ */ f("input", {
+			/* @__PURE__ */ d("input", {
 				ref: a,
 				type: "file",
 				accept: "image/*",
-				multiple: m,
+				multiple: h,
 				onChange: _,
 				disabled: i,
 				style: { display: "none" },
 				...e.componentProps?.image ?? {}
 			}),
-			o.map((e, t) => /* @__PURE__ */ p(h, {
-				onMouseEnter: () => d(t),
-				onMouseLeave: () => d(null),
+			s.map((e, t) => /* @__PURE__ */ f(m, {
+				onMouseEnter: () => p(t),
+				onMouseLeave: () => p(null),
 				sx: {
 					width: 50,
 					height: 50,
@@ -184,7 +184,7 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 					overflow: "hidden",
 					transition: "all 0.2s"
 				},
-				children: [/* @__PURE__ */ f(h, {
+				children: [/* @__PURE__ */ d(m, {
 					component: "img",
 					src: e.src,
 					alt: `Preview ${t + 1}`,
@@ -193,7 +193,7 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 						height: "100%",
 						objectFit: "cover"
 					}
-				}), !i && u === t && /* @__PURE__ */ f(h, {
+				}), !i && u === t && /* @__PURE__ */ d(m, {
 					onClick: (e) => v(e, t),
 					sx: {
 						position: "absolute",
@@ -205,13 +205,13 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 						alignItems: "center",
 						justifyContent: "center"
 					},
-					children: /* @__PURE__ */ f(x, {
+					children: /* @__PURE__ */ d(b, {
 						onClick: (e) => v(e, t),
-						children: /* @__PURE__ */ f(r, {})
+						children: /* @__PURE__ */ d(n, {})
 					})
 				})]
 			}, e.key)),
-			(o.length === 0 || b) && /* @__PURE__ */ f(h, {
+			(s.length === 0 || x) && /* @__PURE__ */ d(m, {
 				onClick: y,
 				sx: {
 					width: 50,
@@ -226,21 +226,21 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 					transition: "all 0.2s",
 					"&:hover": { bgcolor: "action.hover" }
 				},
-				children: /* @__PURE__ */ f(D, { sx: {
+				children: /* @__PURE__ */ d(T, { sx: {
 					fontSize: 20,
 					color: i ? "action.disabled" : "divider"
 				} })
 			})
 		]
 	});
-}), I = s.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ p(h, {
+}), P = o.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: i, disabled: a }) => /* @__PURE__ */ f(m, {
 	sx: {
 		display: "flex",
 		flexDirection: "column",
 		alignItems: "center",
 		minWidth: 60
 	},
-	children: [/* @__PURE__ */ f(j, { label: e.label }), /* @__PURE__ */ f(g, {
+	children: [/* @__PURE__ */ d(k, { label: e.label }), /* @__PURE__ */ d(h, {
 		checked: t ?? e.defaultValue ?? !1,
 		onChange: (e) => n(e.target.checked),
 		onFocus: r,
@@ -249,54 +249,54 @@ var D = n(/* @__PURE__ */ f("path", { d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99
 		...e.componentProps?.checkbox ?? {}
 	})]
 }));
-function L(e, t) {
+function F(e, t) {
 	return e.required ? e.type === "textarea" ? typeof t == "string" && t.trim() !== "" : e.type === "number" || e.type === "slider" ? t != null : e.type === "select" ? t != null && t !== "" : !0 : !0;
 }
-function R(e) {
+function I(e) {
 	return Array.isArray(e) ? e : e instanceof File || typeof e == "string" ? [e] : [];
 }
-function z(e) {
+function L(e) {
 	return e.reduce((e, t) => (t.type === "image" ? e.imageInputs.push(t) : t.type === "textarea" ? e.textareaInputs.push(t) : e.paramInputs.push(t), e), {
 		imageInputs: [],
 		textareaInputs: [],
 		paramInputs: []
 	});
 }
-function B(e, t) {
+function R(e, t) {
 	return e.length > 0 || t.length > 0;
 }
-function V(e, t, n, r) {
+function z(e, t, n, r) {
 	return e || !t || n || r;
 }
-var H = (e) => {
+var B = (e) => {
 	switch (e.input.type) {
-		case "textarea": return /* @__PURE__ */ f(A, { ...e });
-		case "number": return /* @__PURE__ */ f(M, { ...e });
-		case "slider": return /* @__PURE__ */ f(P, { ...e });
-		case "select": return /* @__PURE__ */ f(N, { ...e });
-		case "image": return /* @__PURE__ */ f(F, {
+		case "textarea": return /* @__PURE__ */ d(O, { ...e });
+		case "number": return /* @__PURE__ */ d(A, { ...e });
+		case "slider": return /* @__PURE__ */ d(M, { ...e });
+		case "select": return /* @__PURE__ */ d(j, { ...e });
+		case "image": return /* @__PURE__ */ d(N, {
 			input: e.input,
 			value: e.value,
 			onChange: e.onChange,
 			disabled: e.disabled
 		});
-		case "checkbox": return /* @__PURE__ */ f(I, { ...e });
+		case "checkbox": return /* @__PURE__ */ d(P, { ...e });
 		default: return null;
 	}
-}, U = s.memo(({ input: e, value: t, disabled: n, onChange: r, onFocus: i, onBlur: a }) => e.renderInput ? /* @__PURE__ */ f(h, { children: e.renderInput({
+}, V = o.memo(({ input: e, value: t, disabled: n, onChange: r, onFocus: i, onBlur: a }) => e.renderInput ? /* @__PURE__ */ d(m, { children: e.renderInput({
 	value: t,
 	onChange: r,
 	onFocus: i,
 	onBlur: a,
 	disabled: n
-}) }) : /* @__PURE__ */ f(H, {
+}) }) : /* @__PURE__ */ d(B, {
 	input: e,
 	value: t,
 	onChange: r,
 	onFocus: i,
 	onBlur: a,
 	disabled: n
-})), W = s.memo(({ customActionButtons: e, infoContent: t, infoTooltip: n, downloadTooltip: r, resetTooltip: o, processTooltip: s, hideProcessButton: c, processActionDisabled: l, onInfoOpen: u, onDownload: d, onReset: m, onProcess: g }) => /* @__PURE__ */ p(h, {
+})), H = o.memo(({ customActionButtons: e, infoContent: t, infoTooltip: n, downloadTooltip: a, resetTooltip: o, processTooltip: s, hideProcessButton: c, processActionDisabled: l, onInfoOpen: u, onDownload: p, onReset: h, onProcess: g }) => /* @__PURE__ */ f(m, {
 	sx: {
 		display: "flex",
 		alignItems: "center",
@@ -305,71 +305,71 @@ var H = (e) => {
 	},
 	children: [
 		e,
-		t && /* @__PURE__ */ f(w, {
+		t && /* @__PURE__ */ d(C, {
 			title: n,
-			children: /* @__PURE__ */ f(x, {
+			children: /* @__PURE__ */ d(b, {
 				onClick: u,
-				children: /* @__PURE__ */ f(a, {})
+				children: /* @__PURE__ */ d(i, {})
 			})
 		}),
-		/* @__PURE__ */ f(w, {
-			title: r,
-			children: /* @__PURE__ */ f(x, {
-				onClick: d,
-				children: /* @__PURE__ */ f(i, {})
+		/* @__PURE__ */ d(C, {
+			title: a,
+			children: /* @__PURE__ */ d(b, {
+				onClick: p,
+				children: /* @__PURE__ */ d(r, {})
 			})
 		}),
-		/* @__PURE__ */ f(w, {
+		/* @__PURE__ */ d(C, {
 			title: o,
-			children: /* @__PURE__ */ f(x, {
-				onClick: m,
-				children: /* @__PURE__ */ f(k, {})
+			children: /* @__PURE__ */ d(b, {
+				onClick: h,
+				children: /* @__PURE__ */ d(D, {})
 			})
 		}),
-		!c && /* @__PURE__ */ f(w, {
+		!c && /* @__PURE__ */ d(C, {
 			title: s,
-			children: /* @__PURE__ */ f("span", { children: /* @__PURE__ */ f(x, {
+			children: /* @__PURE__ */ d("span", { children: /* @__PURE__ */ d(b, {
 				onClick: g,
 				disabled: l,
 				size: "large",
-				children: /* @__PURE__ */ f(O, { color: l ? "disabled" : "primary" })
+				children: /* @__PURE__ */ d(E, { color: l ? "disabled" : "primary" })
 			}) })
 		})
 	]
-})), G = ({ inputs: n = [], onProcess: r, onReset: i, onDownload: a, processing: o = !1, uploading: s = !1, inputValues: l = {}, onInputChange: g, customActionButtons: x, hideProcessButton: S = !1, processButtonDisabled: C = !1, getInputDisabled: w, processTooltip: T = "Process", downloadTooltip: D = "Download", resetTooltip: O = "Reset", infoTooltip: k = "Information", infoTitle: A = "Tool Information", infoContent: j, position: M = "bottom", relative: N = !1, containerSx: P, sx: F }) => {
-	let [I, R] = d(!1), H = u(() => n.length === 0 ? !0 : n.every((e) => L(e, l[e.key])), [n, l]), { imageInputs: G, textareaInputs: K, paramInputs: q } = u(() => z(n), [n]), J = B(G, q), ee = V(C, H, s, o), Y = c(() => {}, []), X = c(() => {}, []), Z = c((e, t, n) => {
-		g?.(e, t, n);
-	}, [g]), te = c(() => R(!0), []), ne = c(() => R(!1), []), Q = c((e) => {
-		let t = l[e.key];
-		return /* @__PURE__ */ f(U, {
+})), U = ({ inputs: t = [], onProcess: n, onReset: r, onDownload: i, processing: a = !1, uploading: o = !1, inputValues: c = {}, onInputChange: h, customActionButtons: b, hideProcessButton: x = !1, processButtonDisabled: S = !1, getInputDisabled: C, processTooltip: w = "Process", downloadTooltip: T = "Download", resetTooltip: E = "Reset", infoTooltip: D = "Information", infoTitle: O = "Tool Information", infoContent: k, position: A = "bottom", relative: j = !1, containerSx: M, sx: N }) => {
+	let [P, I] = u(!1), B = l(() => t.length === 0 ? !0 : t.every((e) => F(e, c[e.key])), [t, c]), { imageInputs: U, textareaInputs: W, paramInputs: G } = l(() => L(t), [t]), K = R(U, G), q = z(S, B, o, a), J = s(() => {}, []), Y = s(() => {}, []), X = s((e, t, n) => {
+		h?.(e, t, n);
+	}, [h]), Z = s(() => I(!0), []), ee = s(() => I(!1), []), Q = s((e) => {
+		let t = c[e.key];
+		return /* @__PURE__ */ d(V, {
 			input: e,
 			value: t,
-			onChange: (t) => Z(e.key, t),
-			onFocus: Y,
-			onBlur: X,
-			disabled: w?.(e.key) ?? !1
+			onChange: (t) => X(e.key, t),
+			onFocus: J,
+			onBlur: Y,
+			disabled: C?.(e.key) ?? !1
 		}, e.key);
 	}, [
-		l,
-		w,
-		Z,
-		Y,
-		X
-	]), $ = /* @__PURE__ */ p(h, {
+		c,
+		C,
+		X,
+		J,
+		Y
+	]), $ = /* @__PURE__ */ f(m, {
 		sx: {
-			position: N ? "relative" : "fixed",
-			[M]: N ? "auto" : 20,
-			left: N ? "auto" : "50%",
-			transform: N ? "none" : "translateX(-50%)",
-			zIndex: N ? "auto" : 1300,
-			display: N ? "flex" : "block",
-			justifyContent: N ? "center" : "initial",
-			mt: N && M === "top" ? 2 : 0,
-			mb: N && M === "bottom" ? 2 : 0,
-			...P
+			position: j ? "relative" : "fixed",
+			[A]: j ? "auto" : 20,
+			left: j ? "auto" : "50%",
+			transform: j ? "none" : "translateX(-50%)",
+			zIndex: j ? "auto" : 1300,
+			display: j ? "flex" : "block",
+			justifyContent: j ? "center" : "initial",
+			mt: j && A === "top" ? 2 : 0,
+			mb: j && A === "bottom" ? 2 : 0,
+			...M
 		},
-		children: [/* @__PURE__ */ p(h, {
-			sx: {
+		children: [/* @__PURE__ */ f(m, {
+			sx: [(t) => ({
 				display: "flex",
 				flexDirection: "column",
 				gap: 2,
@@ -379,44 +379,43 @@ var H = (e) => {
 				borderColor: "divider",
 				bgcolor: "background.default",
 				transition: "border 120ms ease-in",
-				"&:hover": { borderColor: t[500] },
+				"&:hover": { borderColor: (t.vars ?? t).palette.grey[500] },
 				"&:focus-within": {
-					outline: `3px solid ${E(e[500], .5)}`,
-					borderColor: e[400]
-				},
-				...F
-			},
-			children: [K.length > 0 && /* @__PURE__ */ f(h, {
+					outline: `3px solid ${e((t.vars ?? t).palette.primary[500], 50)}`,
+					borderColor: (t.vars ?? t).palette.primary[400]
+				}
+			}), ...Array.isArray(N) ? N : [N]],
+			children: [W.length > 0 && /* @__PURE__ */ d(m, {
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					gap: 2
 				},
-				children: K.map(Q)
-			}), /* @__PURE__ */ p(h, {
+				children: W.map(Q)
+			}), /* @__PURE__ */ f(m, {
 				sx: {
 					display: "flex",
 					alignItems: "center",
 					gap: .5
 				},
 				children: [
-					/* @__PURE__ */ f(h, {
+					/* @__PURE__ */ d(m, {
 						sx: {
 							display: "flex",
 							alignItems: "center",
 							gap: 2,
 							flex: 1
 						},
-						children: J && /* @__PURE__ */ p(h, {
+						children: K && /* @__PURE__ */ f(m, {
 							sx: {
 								display: "flex",
 								alignItems: "center",
 								gap: 1.5
 							},
-							children: [G.map(Q), q.map(Q)]
+							children: [U.map(Q), G.map(Q)]
 						})
 					}),
-					J && /* @__PURE__ */ f(b, {
+					K && /* @__PURE__ */ d(y, {
 						orientation: "vertical",
 						flexItem: !0,
 						sx: {
@@ -424,32 +423,32 @@ var H = (e) => {
 							flexShrink: 0
 						}
 					}),
-					/* @__PURE__ */ f(W, {
-						customActionButtons: x,
-						infoContent: j,
-						infoTooltip: k,
-						downloadTooltip: D,
-						resetTooltip: O,
-						processTooltip: T,
-						hideProcessButton: S,
-						processActionDisabled: ee,
-						onInfoOpen: te,
-						onDownload: a,
-						onReset: i,
-						onProcess: r
+					/* @__PURE__ */ d(H, {
+						customActionButtons: b,
+						infoContent: k,
+						infoTooltip: D,
+						downloadTooltip: T,
+						resetTooltip: E,
+						processTooltip: w,
+						hideProcessButton: x,
+						processActionDisabled: q,
+						onInfoOpen: Z,
+						onDownload: i,
+						onReset: r,
+						onProcess: n
 					})
 				]
 			})]
-		}), j && /* @__PURE__ */ p(_, {
-			open: I,
-			onClose: ne,
+		}), k && /* @__PURE__ */ f(g, {
+			open: P,
+			onClose: ee,
 			maxWidth: "sm",
 			fullWidth: !0,
-			children: [/* @__PURE__ */ f(y, { children: A }), /* @__PURE__ */ f(v, { children: j })]
+			children: [/* @__PURE__ */ d(v, { children: O }), /* @__PURE__ */ d(_, { children: k })]
 		})]
 	});
-	return !N && typeof window < "u" ? m($, document.body) : $;
+	return !j && typeof window < "u" ? p($, document.body) : $;
 };
-G.displayName = "SToolBar";
+U.displayName = "SToolBar";
 //#endregion
-export { G as t };
+export { U as t };