@solostylist/ui-kit 2.0.2 → 2.0.4

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 { 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";
+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";
 //#region lib/s-tool-bar/s-tool-bar.tsx
-var g = m(f, {
+var g = f(d, {
 	name: "SToolBar",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
-})({}), _ = m(f, {
+})({}), _ = f(d, {
 	name: "SToolBar",
 	slot: "Toolbar",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -21,21 +21,21 @@ var g = m(f, {
 function v(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var y = l.forwardRef(function(m, y) {
-	let b = h({
-		props: m,
+var y = c.forwardRef(function(f, y) {
+	let b = p({
+		props: f,
 		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] = l.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] = c.useState(!1), H = {
 		...b,
 		position: k,
 		processing: M,
 		relative: N,
 		uploading: 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) => {
+	}, 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) => {
 		E?.(e, t, n, r);
-	}, [E]), Q = l.useCallback((e) => /* @__PURE__ */ u(c, {
+	}, [E]), Q = c.useCallback((e) => /* @__PURE__ */ l(s, {
 		input: e,
-		value: a(e, w),
+		value: n(e, w),
 		onChange: (t, n, r) => Z(t, e.key, n, r),
 		onFocus: Y,
 		onBlur: X,
@@ -46,7 +46,7 @@ var y = l.forwardRef(function(m, y) {
 		Z,
 		Y,
 		X
-	]), $ = /* @__PURE__ */ d(g, {
+	]), $ = /* @__PURE__ */ u(g, {
 		...z,
 		ownerState: H,
 		ref: y,
@@ -61,7 +61,7 @@ var y = l.forwardRef(function(m, y) {
 			mt: N && k === "top" ? 2 : 0,
 			mb: N && k === "bottom" ? 2 : 0
 		}, ...e(L)],
-		children: [/* @__PURE__ */ d(G, {
+		children: [/* @__PURE__ */ u(G, {
 			...ye,
 			sx: [(e) => ({
 				display: "flex",
@@ -79,27 +79,27 @@ var y = l.forwardRef(function(m, y) {
 					borderColor: (e.vars ?? e).palette.primary[400]
 				}
 			}), ...e(_e)],
-			children: [q.length > 0 && /* @__PURE__ */ u(f, {
+			children: [q.length > 0 && /* @__PURE__ */ l(d, {
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					gap: 2
 				},
 				children: q.map(Q)
-			}), /* @__PURE__ */ d(f, {
+			}), /* @__PURE__ */ u(d, {
 				sx: {
 					display: "flex",
 					alignItems: "center",
 					gap: .5
 				},
-				children: [/* @__PURE__ */ u(f, {
+				children: [/* @__PURE__ */ l(d, {
 					sx: {
 						display: "flex",
 						alignItems: "center",
 						gap: 2,
 						flex: 1
 					},
-					children: we && /* @__PURE__ */ d(f, {
+					children: we && /* @__PURE__ */ u(d, {
 						sx: {
 							display: "flex",
 							alignItems: "center",
@@ -107,7 +107,7 @@ var y = l.forwardRef(function(m, y) {
 						},
 						children: [K.map(Q), J.map(Q)]
 					})
-				}), /* @__PURE__ */ u(i, {
+				}), /* @__PURE__ */ l(ee, {
 					customActionButtons: x,
 					infoContent: C,
 					infoTooltip: ce,
@@ -122,21 +122,21 @@ var y = l.forwardRef(function(m, y) {
 					onProcess: D
 				})]
 			})]
-		}), C && /* @__PURE__ */ d(ue, {
+		}), C && /* @__PURE__ */ u(ue, {
 			maxWidth: "sm",
 			fullWidth: !0,
 			...be,
 			open: B,
-			children: [/* @__PURE__ */ u(de, {
+			children: [/* @__PURE__ */ l(de, {
 				...xe,
 				children: se
-			}), /* @__PURE__ */ u(fe, {
+			}), /* @__PURE__ */ l(fe, {
 				...Se,
 				children: C
 			})]
 		})]
 	});
-	return N ? $ : /* @__PURE__ */ u(p, { children: $ });
+	return N ? $ : /* @__PURE__ */ l(ie, { children: $ });
 });
 y.displayName = "SToolBar";
 //#endregion

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

@@ -1,2 +1,55 @@
-import { t as e } from "../tool-bar-action-buttons-v1koaasr.js";
-export { e as ToolbarActionButtons };
+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 };

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

@@ -1,2 +1,148 @@
-import { t as e } from "../tool-bar-image-input-DtXTyEe1.js";
-export { e as ImageInput };
+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 };

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

@@ -1,41 +1,41 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../mergeSlotProps-DC8r4QzS.js";
-import { t as n } from "../tool-bar-image-input-DtXTyEe1.js";
-import { t as r } from "../s-select-CtVKEOZ5.js";
-import i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Box as s, Slider as c, TextField as l, Typography as u, outlinedInputClasses as d } from "@mui/material";
+import { SSelect as t } from "../s-select/s-select.js";
+import { ImageInput as n } from "./tool-bar-image-input.js";
+import r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o, Slider as s, TextField as c, Typography as l, outlinedInputClasses as u } from "@mui/material";
+import { mergeSlotProps as d } from "@mui/material/utils";
 //#region lib/s-tool-bar/tool-bar-inputs.tsx
-var f = i.memo(({ input: e, value: n, onChange: r, onFocus: i, onBlur: o, disabled: s }) => {
-	let { slotProps: c, ...u } = e.slotProps?.textarea ?? {};
-	return /* @__PURE__ */ a(l, {
-		value: n ?? "",
-		onChange: (e) => r(e, e.target.value),
-		onFocus: i,
-		onBlur: o,
+var f = r.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: a, disabled: o }) => {
+	let { slotProps: s, ...l } = e.slotProps?.textarea ?? {};
+	return /* @__PURE__ */ i(c, {
+		value: t ?? "",
+		onChange: (e) => n(e, e.target.value),
+		onFocus: r,
+		onBlur: a,
 		placeholder: e.placeholder ?? e.label,
-		disabled: s,
+		disabled: o,
 		multiline: !0,
 		minRows: e.minRows ?? 2,
 		maxRows: e.maxRows ?? 5,
 		fullWidth: !0,
 		variant: "outlined",
-		...u,
+		...l,
 		slotProps: {
-			...c,
-			htmlInput: t(c?.htmlInput, { "aria-label": e.label }),
-			input: t(c?.input, { sx: {
+			...s,
+			htmlInput: d(s?.htmlInput, { "aria-label": e.label }),
+			input: d(s?.input, { sx: {
 				backgroundColor: "transparent",
 				border: "none",
 				padding: 0,
-				[`&.${d.focused}`]: { outline: "none" },
+				[`&.${u.focused}`]: { outline: "none" },
 				"& fieldset": { border: "none" },
 				"&:hover fieldset": { border: "none" },
 				"&.Mui-focused fieldset": { border: "none" }
 			} })
 		}
 	});
-}), p = i.memo((e) => /* @__PURE__ */ a(u, {
+}), p = r.memo((e) => /* @__PURE__ */ i(l, {
 	variant: "subtitle2",
 	sx: {
 		whiteSpace: "nowrap",
@@ -44,25 +44,25 @@ var f = i.memo(({ input: e, value: n, onChange: r, onFocus: i, onBlur: o, disabl
 		width: "100% !important"
 	},
 	children: e.label
-})), m = i.memo(({ input: e, value: n, onChange: r, onFocus: i, onBlur: c, disabled: u }) => {
-	let { slotProps: d, ...f } = e.slotProps?.number ?? {};
-	return /* @__PURE__ */ o(s, {
+})), m = r.memo(({ input: e, value: t, onChange: n, onFocus: r, onBlur: s, disabled: l }) => {
+	let { slotProps: u, ...f } = e.slotProps?.number ?? {};
+	return /* @__PURE__ */ a(o, {
 		sx: {
 			width: 80,
 			display: "flex",
 			flexDirection: "column"
 		},
-		children: [/* @__PURE__ */ a(p, { label: e.label }), /* @__PURE__ */ a(l, {
+		children: [/* @__PURE__ */ i(p, { label: e.label }), /* @__PURE__ */ i(c, {
 			type: "number",
-			value: typeof n == "number" ? n : "",
-			onChange: (e) => r(e, Number(e.target.value)),
-			onFocus: i,
-			onBlur: c,
-			disabled: u,
+			value: typeof t == "number" ? t : "",
+			onChange: (e) => n(e, Number(e.target.value)),
+			onFocus: r,
+			onBlur: s,
+			disabled: l,
 			...f,
 			slotProps: {
-				...d,
-				htmlInput: t(d?.htmlInput, {
+				...u,
+				htmlInput: d(u?.htmlInput, {
 					"aria-label": e.label,
 					min: e.min,
 					max: e.max,
@@ -71,18 +71,18 @@ var f = i.memo(({ input: e, value: n, onChange: r, onFocus: i, onBlur: o, disabl
 			}
 		})]
 	});
-}), h = i.memo(({ input: e, value: t, onChange: n, onFocus: i, onBlur: c, disabled: l }) => {
+}), h = r.memo(({ input: e, value: n, onChange: r, onFocus: s, onBlur: c, disabled: l }) => {
 	let { inputProps: u, ...d } = e.slotProps?.select ?? {};
-	return /* @__PURE__ */ o(s, {
+	return /* @__PURE__ */ a(o, {
 		sx: {
 			width: 180,
 			display: "flex",
 			flexDirection: "column"
 		},
-		children: [/* @__PURE__ */ a(p, { label: e.label }), /* @__PURE__ */ a(r, {
-			value: t ?? "",
-			onChange: (e) => n(e, e.target.value),
-			onFocus: i,
+		children: [/* @__PURE__ */ i(p, { label: e.label }), /* @__PURE__ */ i(t, {
+			value: n ?? "",
+			onChange: (e) => r(e, e.target.value),
+			onFocus: s,
 			onBlur: c,
 			disabled: l,
 			placeholder: e.placeholder,
@@ -98,33 +98,33 @@ var f = i.memo(({ input: e, value: n, onChange: r, onFocus: i, onBlur: o, disabl
 			}
 		})]
 	});
-}), g = i.memo(({ input: t, value: n, onChange: r, onFocus: i, onBlur: l, disabled: d }) => {
+}), g = r.memo(({ input: t, value: n, onChange: r, onFocus: c, onBlur: u, disabled: d }) => {
 	let { sx: f, ...m } = t.slotProps?.slider ?? {};
-	return /* @__PURE__ */ o(s, {
+	return /* @__PURE__ */ a(o, {
 		sx: {
 			width: 160,
 			display: "flex",
 			flexDirection: "column"
 		},
-		children: [/* @__PURE__ */ a(p, { label: t.label }), /* @__PURE__ */ o(s, {
+		children: [/* @__PURE__ */ i(p, { label: t.label }), /* @__PURE__ */ a(o, {
 			sx: {
 				display: "flex",
 				alignItems: "center",
 				height: 36
 			},
-			children: [/* @__PURE__ */ a(c, {
+			children: [/* @__PURE__ */ i(s, {
 				"aria-label": t.label,
 				value: typeof n == "number" ? n : t.min ?? 0,
 				onChange: (e, t) => r(e, t),
-				onMouseDown: i,
-				onMouseUp: l,
+				onMouseDown: c,
+				onMouseUp: u,
 				disabled: d,
 				min: t.min ?? 0,
 				max: t.max ?? 100,
 				step: t.step ?? 1,
 				...m,
 				sx: [{ flex: 1 }, ...e(f)]
-			}), /* @__PURE__ */ a(u, {
+			}), /* @__PURE__ */ i(l, {
 				variant: "body2",
 				sx: {
 					minWidth: 60,
@@ -136,11 +136,11 @@ var f = i.memo(({ input: e, value: n, onChange: r, onFocus: i, onBlur: o, disabl
 	});
 }), _ = (e) => {
 	switch (e.input.type) {
-		case "textarea": return /* @__PURE__ */ a(f, { ...e });
-		case "number": return /* @__PURE__ */ a(m, { ...e });
-		case "slider": return /* @__PURE__ */ a(g, { ...e });
-		case "select": return /* @__PURE__ */ a(h, { ...e });
-		case "image": return /* @__PURE__ */ a(n, {
+		case "textarea": return /* @__PURE__ */ i(f, { ...e });
+		case "number": return /* @__PURE__ */ i(m, { ...e });
+		case "slider": return /* @__PURE__ */ i(g, { ...e });
+		case "select": return /* @__PURE__ */ i(h, { ...e });
+		case "image": return /* @__PURE__ */ i(n, {
 			input: e.input,
 			value: e.value,
 			onChange: e.onChange,
@@ -148,18 +148,18 @@ var f = i.memo(({ input: e, value: n, onChange: r, onFocus: i, onBlur: o, disabl
 		});
 		default: return null;
 	}
-}, v = i.memo(({ input: e, value: t, disabled: n, onChange: r, onFocus: i, onBlur: o }) => e.renderInput ? /* @__PURE__ */ a(s, { children: e.renderInput({
+}, v = r.memo(({ input: e, value: t, disabled: n, onChange: r, onFocus: a, onBlur: s }) => e.renderInput ? /* @__PURE__ */ i(o, { children: e.renderInput({
 	value: t,
 	onChange: r,
-	onFocus: i,
-	onBlur: o,
+	onFocus: a,
+	onBlur: s,
 	disabled: n
-}) }) : /* @__PURE__ */ a(_, {
+}) }) : /* @__PURE__ */ i(_, {
 	input: e,
 	value: t,
 	onChange: r,
-	onFocus: i,
-	onBlur: o,
+	onFocus: a,
+	onBlur: s,
 	disabled: n
 }));
 //#endregion

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

@@ -1,15 +1,15 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../appendOwnerState-CFQTq3pb.js";
-import { SNavItem as n } from "../s-nav-item/s-nav-item.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { ButtonBase as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
+import { SNavItem as t } from "../s-nav-item/s-nav-item.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { ButtonBase as a, Typography as o, styled as s, useThemeProps as c } from "@mui/material";
+import l from "@mui/utils/appendOwnerState";
 //#region lib/s-tool-item/s-tool-item.tsx
-var u = c("li", {
+var u = s("li", {
 	name: "SToolItem",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
-})({}), d = c(n, {
+})({}), d = s(t, {
 	name: "SToolItem",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -17,12 +17,12 @@ var u = c("li", {
 function f(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var p = r.forwardRef(function(n, r) {
-	let c = l({
-		props: n,
+var p = n.forwardRef(function(t, n) {
+	let s = c({
+		props: t,
 		name: "SToolItem"
-	}), { disabled: p = !1, expanded: m = !1, icon: h, label: g, onClick: _, selected: v = !1, slotProps: y, slots: b, sx: x, ...S } = c, C = {
-		...c,
+	}), { disabled: p = !1, expanded: m = !1, icon: h, label: g, onClick: _, selected: v = !1, slotProps: y, slots: b, sx: x, ...S } = s, C = {
+		...s,
 		disabled: p,
 		expanded: m,
 		selected: v
@@ -30,37 +30,37 @@ var p = r.forwardRef(function(n, r) {
 		O?.(e), e.defaultPrevented || _?.(e);
 	};
 	if (m) {
-		let n = t(b?.button, D, C), a = t(b?.label, T ?? {}, C);
-		return /* @__PURE__ */ i(d, {
+		let t = l(b?.button, D, C), i = l(b?.label, T ?? {}, C);
+		return /* @__PURE__ */ r(d, {
 			...S,
 			disabled: p,
 			icon: h,
 			label: g,
 			onClick: k,
 			ownerState: C,
-			ref: r,
+			ref: n,
 			selected: v,
 			slots: {
 				item: b?.button,
 				label: b?.label
 			},
 			slotProps: {
-				item: n,
-				label: a
+				item: t,
+				label: i
 			},
 			sx: [{ cursor: p ? "not-allowed" : void 0 }, ...e(x)]
 		});
 	}
-	let A = b?.button ?? o, j = b?.label ?? s, { sx: M, ...N } = D, { sx: P, ...F } = T ?? {}, I = t(b?.button, N, C), L = t(b?.label, F, C), R = typeof g == "string" ? g : void 0;
-	return /* @__PURE__ */ i(u, {
+	let A = b?.button ?? a, j = b?.label ?? o, { sx: M, ...N } = D, { sx: P, ...F } = T ?? {}, I = l(b?.button, N, C), L = l(b?.label, F, C), R = typeof g == "string" ? g : void 0;
+	return /* @__PURE__ */ r(u, {
 		...S,
 		ownerState: C,
-		ref: r,
+		ref: n,
 		sx: [{
 			cursor: p ? "not-allowed" : void 0,
 			display: "block"
 		}, ...e(x)],
-		children: /* @__PURE__ */ a(A, {
+		children: /* @__PURE__ */ i(A, {
 			...I,
 			"aria-current": v ? "page" : void 0,
 			"aria-label": R,
@@ -97,7 +97,7 @@ var p = r.forwardRef(function(n, r) {
 				"&.Mui-disabled": { color: "text.disabled" },
 				"& svg": { flexShrink: 0 }
 			}, ...e(M)],
-			children: [h, /* @__PURE__ */ i(j, {
+			children: [h, /* @__PURE__ */ r(j, {
 				component: "span",
 				variant: "caption",
 				...L,