@solostylist/ui-kit 2.0.1 → 2.0.2

package/dist/s-theme-switch-BFWpADh3.js

@@ -0,0 +1,60 @@
+import { t as e } from "./useForkRef-BuNFTXxE.js";
+import { t } from "./createSvgIcon-3y-gS0r1.js";
+import { forwardRef as n, useCallback as r, useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { flushSync as o } from "react-dom";
+import { IconButton as s, styled as c, useColorScheme as l, useMediaQuery as u, useThemeProps as d } from "@mui/material";
+//#region ../../node_modules/@mui/icons-material/DarkMode.mjs
+var f = t(/* @__PURE__ */ a("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1" }), "DarkMode"), p = t(/* @__PURE__ */ a("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5M2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1m18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1m0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1M5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0z" }), "LightMode"), m = c(s, {
+	name: "SThemeSwitch",
+	slot: "Root"
+})({}), h = n(function(t, n) {
+	let s = d({
+		props: t,
+		name: "SThemeSwitch"
+	}), { mode: c, onClick: h, setMode: g, "aria-label": _, ...v } = s, y = i(null), b = e(y, n), { mode: x, setMode: S, systemMode: C } = l(), w = u("(prefers-reduced-motion: reduce)"), T = c ?? x, E = (T === "system" ? C : T) === "dark", D = {
+		...s,
+		mode: T
+	}, O = r(() => {
+		let e = E ? "light" : "dark";
+		g ? g(e) : S(e);
+	}, [
+		E,
+		S,
+		g
+	]), k = r(async (e) => {
+		if (h?.(e), e.defaultPrevented) return;
+		if (w || !y.current || typeof document > "u" || !document.startViewTransition) {
+			O();
+			return;
+		}
+		await document.startViewTransition(() => {
+			o(() => {
+				O();
+			});
+		}).ready;
+		let t = y.current;
+		if (!t) return;
+		let { top: n, left: r, width: i, height: a } = t.getBoundingClientRect(), s = r + i / 2, c = n + a / 2, l = Math.hypot(Math.max(s, window.innerWidth - s), Math.max(c, window.innerHeight - c));
+		document.documentElement.animate({ clipPath: [`circle(0px at ${s}px ${c}px)`, `circle(${l}px at ${s}px ${c}px)`] }, {
+			duration: 700,
+			easing: "ease-in-out",
+			pseudoElement: "::view-transition-new(root)"
+		});
+	}, [
+		h,
+		w,
+		O
+	]);
+	return /* @__PURE__ */ a(m, {
+		...v,
+		ref: b,
+		"aria-label": _ ?? (E ? "Switch to light mode" : "Switch to dark mode"),
+		onClick: k,
+		ownerState: D,
+		children: a(E ? p : f, {})
+	});
+});
+h.displayName = "SThemeSwitch";
+//#endregion
+export { h as t };

package/dist/s-tip/index.js

@@ -1,2 +1,2 @@
-import { STip as e } from "./s-tip.js";
+import { t as e } from "../s-tip-jbL7vtoU.js";
 export { e as STip, e as default };

package/dist/s-tip/s-tip.js

@@ -1,61 +1,2 @@
-import { toSxArray as e } from "../utils/sx.js";
-import { styled as t, useThemeProps as n } from "@mui/material/styles";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import o from "@mui/material/Typography";
-import s from "@mui/utils/appendOwnerState";
-import c from "@mui/icons-material/LightbulbOutlined";
-import l from "@mui/material/Stack";
-//#region lib/s-tip/s-tip.tsx
-var u = t(l, {
-	name: "STip",
-	slot: "Root",
-	shouldForwardProp: (e) => e !== "ownerState"
-})({});
-function d(e, t) {
-	return typeof e == "function" ? e(t) : e;
-}
-var f = r.forwardRef(function(t, r) {
-	let l = n({
-		props: t,
-		name: "STip"
-	}), { children: f, direction: p = "row", label: m = "Tip.", slotProps: h, slots: g, spacing: _ = 1, sx: v, ...y } = l, b = {
-		...l,
-		direction: p,
-		hasLabel: m != null,
-		spacing: _
-	}, x = g?.icon ?? c, S = g?.text ?? o, C = d(h?.icon, b), w = d(h?.text, b), T = s(g?.icon, C ?? {}, b), E = s(g?.text, w ?? {}, b);
-	return /* @__PURE__ */ a(u, {
-		...y,
-		ref: r,
-		direction: p,
-		ownerState: b,
-		spacing: _,
-		sx: [{
-			alignItems: "center",
-			bgcolor: "background.default",
-			borderRadius: 1,
-			color: "text.primary",
-			p: 1
-		}, ...e(v)],
-		children: [/* @__PURE__ */ i(x, {
-			...T,
-			sx: [{ fontSize: 16 }, ...e(C?.sx)]
-		}), /* @__PURE__ */ a(S, {
-			...E,
-			children: [
-				m != null && /* @__PURE__ */ i(o, {
-					component: "span",
-					sx: { fontWeight: "bold" },
-					variant: "inherit",
-					children: m
-				}),
-				" ",
-				f
-			]
-		})]
-	});
-});
-f.displayName = "STip";
-//#endregion
-export { f as STip, f as default };
+import { t as e } from "../s-tip-jbL7vtoU.js";
+export { e as STip, e as default };

package/dist/s-tip-jbL7vtoU.js

@@ -0,0 +1,62 @@
+import { t as e } from "./styled-Bog8QCl3.js";
+import { t } from "./Stack-C0LGzM4c.js";
+import { t as n } from "./useThemeProps-Dw9dmKyT.js";
+import { toSxArray as r } from "./utils/sx.js";
+import { t as i } from "./appendOwnerState-CFQTq3pb.js";
+import { t as a } from "./createSvgIcon-3y-gS0r1.js";
+import { t as o } from "./Typography-_P0svrkO.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region ../../node_modules/@mui/icons-material/LightbulbOutlined.mjs
+var u = a(/* @__PURE__ */ c("path", { d: "M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7m2.85 11.1-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1" }), "LightbulbOutlined"), d = e(t, {
+	name: "STip",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function f(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var p = s.forwardRef(function(e, t) {
+	let a = n({
+		props: e,
+		name: "STip"
+	}), { children: s, direction: p = "row", label: m = "Tip.", slotProps: h, slots: g, spacing: _ = 1, sx: v, ...y } = a, b = {
+		...a,
+		direction: p,
+		hasLabel: m != null,
+		spacing: _
+	}, x = g?.icon ?? u, S = g?.text ?? o, C = f(h?.icon, b), w = f(h?.text, b), T = i(g?.icon, C ?? {}, b), E = i(g?.text, w ?? {}, b);
+	return /* @__PURE__ */ l(d, {
+		...y,
+		ref: t,
+		direction: p,
+		ownerState: b,
+		spacing: _,
+		sx: [{
+			alignItems: "center",
+			bgcolor: "background.default",
+			borderRadius: 1,
+			color: "text.primary",
+			p: 1
+		}, ...r(v)],
+		children: [/* @__PURE__ */ c(x, {
+			...T,
+			sx: [{ fontSize: 16 }, ...r(C?.sx)]
+		}), /* @__PURE__ */ l(S, {
+			...E,
+			children: [
+				m != null && /* @__PURE__ */ c(o, {
+					component: "span",
+					sx: { fontWeight: "bold" },
+					variant: "inherit",
+					children: m
+				}),
+				" ",
+				s
+			]
+		})]
+	});
+});
+p.displayName = "STip";
+//#endregion
+export { p as t };

package/dist/s-tool-bar/s-tool-bar.js

@@ -1,19 +1,19 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { tint as t } from "../theme/utils.js";
-import { getToolBarInputValue as n, groupInputsByType as r, hasVisibleInputSection as i, isProcessActionDisabled as a, isRequiredInputFilled as o } from "./utils.js";
-import { ToolbarInputItem as s } from "./tool-bar-inputs.js";
-import { ToolbarActionButtons as ee } from "./tool-bar-action-buttons.js";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Box as d, Dialog as te, DialogContent as ne, DialogTitle as re, Portal as ie, styled as f, useThemeProps as p } from "@mui/material";
-import { mergeSlotProps as m } from "@mui/material/utils";
-import h from "@mui/utils/appendOwnerState";
+import { t as n } from "../appendOwnerState-CFQTq3pb.js";
+import { t as r } from "../mergeSlotProps-DC8r4QzS.js";
+import { t as i } from "../tool-bar-action-buttons-v1koaasr.js";
+import { getToolBarInputValue as a, groupInputsByType as o, hasVisibleInputSection as ee, isProcessActionDisabled as te, isRequiredInputFilled as s } from "./utils.js";
+import { ToolbarInputItem as c } from "./tool-bar-inputs.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Box as f, Dialog as ne, DialogContent as re, DialogTitle as ie, Portal as p, styled as m, useThemeProps as h } from "@mui/material";
 //#region lib/s-tool-bar/s-tool-bar.tsx
-var g = f(d, {
+var g = m(f, {
 	name: "SToolBar",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
-})({}), _ = f(d, {
+})({}), _ = m(f, {
 	name: "SToolBar",
 	slot: "Toolbar",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -21,21 +21,21 @@ var g = f(d, {
 function v(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var y = c.forwardRef(function(f, y) {
-	let b = p({
-		props: f,
+var y = l.forwardRef(function(m, y) {
+	let b = h({
+		props: m,
 		name: "SToolBar"
-	}), { actions: x, downloadTooltip: ae = "Download", getInputDisabled: S, hideProcessButton: oe = !1, infoContent: C, infoTitle: se = "Tool Information", infoTooltip: ce = "Information", inputValues: w = {}, inputs: T = [], onDownload: le, onInputChange: E, onProcess: D, onReset: O, position: k = "bottom", processButtonDisabled: A = !1, processTooltip: j = "Process", processing: M = !1, relative: N = !1, resetTooltip: P = "Reset", slotProps: F, slots: I, sx: L, uploading: R = !1, ...z } = b, [B, V] = c.useState(!1), H = {
+	}), { actions: x, downloadTooltip: ae = "Download", getInputDisabled: S, hideProcessButton: oe = !1, infoContent: C, infoTitle: se = "Tool Information", infoTooltip: ce = "Information", inputValues: w = {}, inputs: T = [], onDownload: le, onInputChange: E, onProcess: D, onReset: O, position: k = "bottom", processButtonDisabled: A = !1, processTooltip: j = "Process", processing: M = !1, relative: N = !1, resetTooltip: P = "Reset", slotProps: F, slots: I, sx: L, uploading: R = !1, ...z } = b, [B, V] = l.useState(!1), H = {
 		...b,
 		position: k,
 		processing: M,
 		relative: N,
 		uploading: R
-	}, U = c.useCallback(() => V(!0), []), W = c.useCallback(() => V(!1), []), G = I?.toolbar ?? _, ue = I?.dialog ?? te, de = I?.dialogTitle ?? re, fe = I?.dialogContent ?? ne, pe = v(F?.toolbar, H), me = v(F?.dialog, H), he = v(F?.dialogTitle, H), ge = v(F?.dialogContent, H), { sx: _e, ...ve } = pe ?? {}, ye = h(G, ve, H), be = h(I?.dialog, m(me, { onClose: W }), H), xe = h(I?.dialogTitle, he ?? {}, H), Se = h(I?.dialogContent, ge ?? {}, H), Ce = c.useMemo(() => T.length === 0 ? !0 : T.every((e) => o(e, n(e, w))), [T, w]), { imageInputs: K, textareaInputs: q, paramInputs: J } = c.useMemo(() => r(T), [T]), we = i(K, J), Te = a(A, Ce, R, M), Y = c.useCallback(() => {}, []), X = c.useCallback(() => {}, []), Z = c.useCallback((e, t, n, r) => {
+	}, U = l.useCallback(() => V(!0), []), W = l.useCallback(() => V(!1), []), G = I?.toolbar ?? _, ue = I?.dialog ?? ne, de = I?.dialogTitle ?? ie, fe = I?.dialogContent ?? re, pe = v(F?.toolbar, H), me = v(F?.dialog, H), he = v(F?.dialogTitle, H), ge = v(F?.dialogContent, H), { sx: _e, ...ve } = pe ?? {}, ye = n(G, ve, H), be = n(I?.dialog, r(me, { onClose: W }), H), xe = n(I?.dialogTitle, he ?? {}, H), Se = n(I?.dialogContent, ge ?? {}, H), Ce = l.useMemo(() => T.length === 0 ? !0 : T.every((e) => s(e, a(e, w))), [T, w]), { imageInputs: K, textareaInputs: q, paramInputs: J } = l.useMemo(() => o(T), [T]), we = ee(K, J), Te = te(A, Ce, R, M), Y = l.useCallback(() => {}, []), X = l.useCallback(() => {}, []), Z = l.useCallback((e, t, n, r) => {
 		E?.(e, t, n, r);
-	}, [E]), Q = c.useCallback((e) => /* @__PURE__ */ l(s, {
+	}, [E]), Q = l.useCallback((e) => /* @__PURE__ */ u(c, {
 		input: e,
-		value: n(e, w),
+		value: a(e, w),
 		onChange: (t, n, r) => Z(t, e.key, n, r),
 		onFocus: Y,
 		onBlur: X,
@@ -46,7 +46,7 @@ var y = c.forwardRef(function(f, y) {
 		Z,
 		Y,
 		X
-	]), $ = /* @__PURE__ */ u(g, {
+	]), $ = /* @__PURE__ */ d(g, {
 		...z,
 		ownerState: H,
 		ref: y,
@@ -61,7 +61,7 @@ var y = c.forwardRef(function(f, y) {
 			mt: N && k === "top" ? 2 : 0,
 			mb: N && k === "bottom" ? 2 : 0
 		}, ...e(L)],
-		children: [/* @__PURE__ */ u(G, {
+		children: [/* @__PURE__ */ d(G, {
 			...ye,
 			sx: [(e) => ({
 				display: "flex",
@@ -79,27 +79,27 @@ var y = c.forwardRef(function(f, y) {
 					borderColor: (e.vars ?? e).palette.primary[400]
 				}
 			}), ...e(_e)],
-			children: [q.length > 0 && /* @__PURE__ */ l(d, {
+			children: [q.length > 0 && /* @__PURE__ */ u(f, {
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					gap: 2
 				},
 				children: q.map(Q)
-			}), /* @__PURE__ */ u(d, {
+			}), /* @__PURE__ */ d(f, {
 				sx: {
 					display: "flex",
 					alignItems: "center",
 					gap: .5
 				},
-				children: [/* @__PURE__ */ l(d, {
+				children: [/* @__PURE__ */ u(f, {
 					sx: {
 						display: "flex",
 						alignItems: "center",
 						gap: 2,
 						flex: 1
 					},
-					children: we && /* @__PURE__ */ u(d, {
+					children: we && /* @__PURE__ */ d(f, {
 						sx: {
 							display: "flex",
 							alignItems: "center",
@@ -107,7 +107,7 @@ var y = c.forwardRef(function(f, y) {
 						},
 						children: [K.map(Q), J.map(Q)]
 					})
-				}), /* @__PURE__ */ l(ee, {
+				}), /* @__PURE__ */ u(i, {
 					customActionButtons: x,
 					infoContent: C,
 					infoTooltip: ce,
@@ -122,21 +122,21 @@ var y = c.forwardRef(function(f, y) {
 					onProcess: D
 				})]
 			})]
-		}), C && /* @__PURE__ */ u(ue, {
+		}), C && /* @__PURE__ */ d(ue, {
 			maxWidth: "sm",
 			fullWidth: !0,
 			...be,
 			open: B,
-			children: [/* @__PURE__ */ l(de, {
+			children: [/* @__PURE__ */ u(de, {
 				...xe,
 				children: se
-			}), /* @__PURE__ */ l(fe, {
+			}), /* @__PURE__ */ u(fe, {
 				...Se,
 				children: C
 			})]
 		})]
 	});
-	return N ? $ : /* @__PURE__ */ l(ie, { children: $ });
+	return N ? $ : /* @__PURE__ */ u(p, { children: $ });
 });
 y.displayName = "SToolBar";
 //#endregion

package/dist/s-tool-bar/tool-bar-action-buttons.js

@@ -1,55 +1,2 @@
-import e from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { AutoAwesome as r } from "@mui/icons-material";
-import { Box as i, IconButton as a, Tooltip as o } from "@mui/material";
-import s from "@mui/icons-material/Autorenew";
-import c from "@mui/icons-material/Download";
-import l from "@mui/icons-material/InfoOutlined";
-//#region lib/s-tool-bar/tool-bar-action-buttons.tsx
-var u = e.memo(({ customActionButtons: e, infoContent: u, infoTooltip: d, downloadTooltip: f, resetTooltip: p, processTooltip: m, hideProcessButton: h, processActionDisabled: g, onInfoOpen: _, onDownload: v, onReset: y, onProcess: b }) => /* @__PURE__ */ n(i, {
-	sx: {
-		display: "flex",
-		alignItems: "center",
-		gap: 1,
-		ml: "auto"
-	},
-	children: [
-		e,
-		u && /* @__PURE__ */ t(o, {
-			title: d,
-			children: /* @__PURE__ */ t(a, {
-				"aria-label": d,
-				onClick: _,
-				children: /* @__PURE__ */ t(l, {})
-			})
-		}),
-		/* @__PURE__ */ t(o, {
-			title: f,
-			children: /* @__PURE__ */ t(a, {
-				"aria-label": f,
-				onClick: v,
-				children: /* @__PURE__ */ t(c, {})
-			})
-		}),
-		/* @__PURE__ */ t(o, {
-			title: p,
-			children: /* @__PURE__ */ t(a, {
-				"aria-label": p,
-				onClick: y,
-				children: /* @__PURE__ */ t(s, {})
-			})
-		}),
-		!h && /* @__PURE__ */ t(o, {
-			title: m,
-			children: /* @__PURE__ */ t("span", { children: /* @__PURE__ */ t(a, {
-				"aria-label": m,
-				onClick: b,
-				disabled: g,
-				size: "large",
-				children: /* @__PURE__ */ t(r, { color: g ? "disabled" : "primary" })
-			}) })
-		})
-	]
-}));
-//#endregion
-export { u as ToolbarActionButtons };
+import { t as e } from "../tool-bar-action-buttons-v1koaasr.js";
+export { e as ToolbarActionButtons };

package/dist/s-tool-bar/tool-bar-image-input.js

@@ -1,148 +1,2 @@
-import { actionHoverMedia as e, getFocusVisibleStyle as t } from "../theme/components/action-styles.js";
-import { getImageInputFiles as n } from "./utils.js";
-import { SIconButton as r } from "../s-icon-button/s-icon-button.js";
-import i, { useEffect as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Box as c, ButtonBase as l } from "@mui/material";
-import u from "@mui/icons-material/AddPhotoAlternate";
-import d from "@mui/icons-material/Close";
-//#region lib/s-tool-bar/tool-bar-image-input.tsx
-var f = i.memo(({ input: f, value: p, onChange: m, disabled: h }) => {
-	let g = i.useRef(null), [_, v] = i.useState([]), y = f.multiple ?? !1, b = f.maxImages ?? 5;
-	a(() => {
-		let e = [];
-		return v(((t) => {
-			if (!t) return [];
-			let n = Array.isArray(t) ? t : [t], r = [], i = /* @__PURE__ */ new Map();
-			return n.forEach((t) => {
-				if (t instanceof File) {
-					let n = URL.createObjectURL(t);
-					e.push(n);
-					let a = `file:${t.name}:${t.size}:${t.lastModified}`, o = i.get(a) ?? 0;
-					i.set(a, o + 1), r.push({
-						key: o > 0 ? `${a}:${o}` : a,
-						src: n
-					});
-				} else if (typeof t == "string") {
-					let e = `url:${t}`, n = i.get(e) ?? 0;
-					i.set(e, n + 1), r.push({
-						key: n > 0 ? `${e}:${n}` : e,
-						src: t
-					});
-				}
-			}), r;
-		})(p)), () => {
-			e.forEach((e) => URL.revokeObjectURL(e));
-		};
-	}, [p]);
-	let x = (e) => {
-		let t = e.target.files;
-		if (!(!t || t.length === 0)) {
-			if (y) {
-				let r = n(p), i = Array.from(t).slice(0, b - r.length);
-				m(e, [...r, ...i], i[0]);
-			} else m(e, t[0], t[0]);
-			e.target.value = "";
-		}
-	}, S = (e, t) => {
-		if (e.stopPropagation(), y && Array.isArray(p)) {
-			let n = p.filter((e, n) => n !== t);
-			m(e, n.length > 0 ? n : null);
-		} else m(e, null);
-	}, C = () => {
-		h || y && _.length >= b || g.current?.click();
-	}, w = y && _.length < b;
-	return /* @__PURE__ */ s(c, {
-		sx: {
-			display: "flex",
-			alignItems: "center",
-			gap: .75
-		},
-		children: [
-			/* @__PURE__ */ o("input", {
-				type: "file",
-				accept: "image/*",
-				...f.slotProps?.image ?? {},
-				ref: g,
-				multiple: y,
-				onChange: x,
-				disabled: h,
-				style: { display: "none" }
-			}),
-			_.map((t, n) => /* @__PURE__ */ s(c, {
-				sx: {
-					width: 50,
-					height: 50,
-					border: 1,
-					borderColor: h ? "action.disabled" : "divider",
-					borderRadius: 1,
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
-					cursor: h ? "not-allowed" : "default",
-					position: "relative",
-					overflow: "hidden",
-					"& .SToolBar-removeImageOverlay": { opacity: 1 },
-					"&:focus-within .SToolBar-removeImageOverlay": { opacity: 1 },
-					[e]: {
-						"& .SToolBar-removeImageOverlay": { opacity: 0 },
-						"&:hover .SToolBar-removeImageOverlay, &:focus-within .SToolBar-removeImageOverlay": { opacity: 1 }
-					}
-				},
-				children: [/* @__PURE__ */ o(c, {
-					component: "img",
-					src: t.src,
-					alt: `Preview ${n + 1}`,
-					sx: {
-						width: "100%",
-						height: "100%",
-						objectFit: "cover"
-					}
-				}), !h && /* @__PURE__ */ o(c, {
-					className: "SToolBar-removeImageOverlay",
-					sx: (e) => ({
-						position: "absolute",
-						inset: 0,
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						pointerEvents: "none",
-						transition: e.transitions.create("opacity", { duration: e.transitions.duration.shorter }),
-						"@media (prefers-reduced-motion: reduce)": { transition: "none" }
-					}),
-					children: /* @__PURE__ */ o(r, {
-						"aria-label": `Remove image ${n + 1}`,
-						onClick: (e) => S(e, n),
-						size: "small",
-						sx: { pointerEvents: "auto" },
-						variant: "overlay",
-						children: /* @__PURE__ */ o(d, { fontSize: "small" })
-					})
-				})]
-			}, t.key)),
-			(_.length === 0 || w) && /* @__PURE__ */ o(l, {
-				"aria-label": "Add image",
-				disabled: h,
-				onClick: C,
-				sx: (e) => ({
-					width: 50,
-					height: 50,
-					border: 1,
-					borderColor: h ? "action.disabled" : "divider",
-					borderRadius: 1,
-					color: h ? "action.disabled" : "action.active",
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
-					transition: e.transitions.create(["background-color", "border-color"], { duration: e.transitions.duration.shorter }),
-					"@media (hover: hover) and (pointer: fine)": { "&:hover": { bgcolor: "action.hover" } },
-					"&.Mui-focusVisible": t(e),
-					"@media (prefers-reduced-motion: reduce)": { transition: "none" }
-				}),
-				children: /* @__PURE__ */ o(u, { sx: { fontSize: 20 } })
-			})
-		]
-	});
-});
-//#endregion
-export { f as ImageInput };
+import { t as e } from "../tool-bar-image-input-DtXTyEe1.js";
+export { e as ImageInput };