@solostylist/ui-kit 1.0.230 → 2.0.0

package/dist/s-theme-demo/utils.js

@@ -0,0 +1,9 @@
+//#region lib/s-theme-demo/utils.ts
+var e = (e, t = 16) => {
+	if (typeof e == "number") return `${e}px`;
+	if (typeof e != "string") return "";
+	let n = Number.parseFloat(e);
+	return Number.isNaN(n) ? e : e.endsWith("rem") ? `${e} (${Math.round(n * t)}px)` : e;
+};
+//#endregion
+export { e as formatFontSize };

package/dist/s-theme-provider/index.d.ts

@@ -1,2 +1,3 @@
+export type {} from '../theme/component-augmentation';
 export { default, default as SThemeProvider } from './s-theme-provider';
 export type { SThemeProviderProps } from './s-theme-provider';

package/dist/s-theme-provider/s-theme-provider.js

@@ -1,42 +1,41 @@
-import { a as e, i as t, n, r, t as i } from "../theme-primitives-CiQYd9Cc.js";
-import { components as a } from "../theme/components/components.js";
-import * as o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { CssBaseline as l, ThemeProvider as u, createTheme as d } from "@mui/material";
-import { deepmerge as f } from "@mui/utils";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../theme-primitives-Dt_DT9b5.js";
+import { components as s } from "../theme/components/components.js";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { CssBaseline as d, ThemeProvider as f, createTheme as p } from "@mui/material";
+import { deepmerge as m } from "@mui/utils";
 //#region lib/s-theme-provider/s-theme-provider.tsx
-var p = ({ children: p, disableCssBaseline: m = !1, disableCustomTheme: h, themeComponents: g, defaultMode: _ = "system", theme: v, ...y }) => {
-	let b = o.useMemo(() => {
-		if (h) return {};
-		let o = {
+var h = ({ children: h, disableCssBaseline: g = !1, disableCustomTheme: _, themeComponents: v, defaultMode: y = "system", theme: b, ...x }) => {
+	let S = c.useMemo(() => {
+		if (_) return {};
+		let c = {
 			cssVariables: {
 				colorSchemeSelector: "data-mui-color-scheme",
 				cssVarPrefix: "s"
 			},
-			colorSchemes: i,
-			typography: e,
-			shadows: r,
-			shape: t,
-			radius: n,
-			components: {
-				...a,
-				...g
-			}
-		};
-		return d(v ? f(o, v) : o);
+			unstable_sxConfig: r,
+			colorSchemes: o,
+			interaction: n,
+			typography: a,
+			shadows: t,
+			shape: e,
+			radius: i,
+			components: s
+		}, l = v ? m(c, { components: v }) : c;
+		return p(b ? m(l, b) : l);
 	}, [
-		h,
-		g,
-		v
+		_,
+		v,
+		b
 	]);
-	return h ? /* @__PURE__ */ s(o.Fragment, { children: p }) : /* @__PURE__ */ c(u, {
+	return _ ? /* @__PURE__ */ l(c.Fragment, { children: h }) : /* @__PURE__ */ u(f, {
 		disableTransitionOnChange: !0,
-		...y,
-		theme: b,
-		defaultMode: _,
-		children: [!m && /* @__PURE__ */ s(l, {}), p]
+		...x,
+		theme: S,
+		defaultMode: y,
+		children: [!g && /* @__PURE__ */ l(d, {}), h]
 	});
 };
-p.displayName = "SThemeProvider";
+h.displayName = "SThemeProvider";
 //#endregion
-export { p as SThemeProvider, p as default };
+export { h as SThemeProvider, h as default };

package/dist/s-theme-switch/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SThemeSwitch } from './s-theme-switch';
-export type { SThemeSwitchProps, SThemeMode } from './s-theme-switch';
+export type { SThemeMode, SThemeSwitchOwnerState, SThemeSwitchProps } from './s-theme-switch';
+export type {} from '../theme/component-augmentation';

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

@@ -1,2 +1,2 @@
-import { t as e } from "../s-theme-switch-DzXoVmQH.js";
+import { t as e } from "../s-theme-switch-BLMz1_m2.js";
 export { e as SThemeSwitch, e as default };

package/dist/s-theme-switch/s-theme-switch.d.ts

@@ -1,9 +1,11 @@
-import { SxProps, Theme } from '@mui/material';
+import { IconButtonProps } from '@mui/material';
 export type SThemeMode = 'light' | 'dark' | 'system' | undefined;
-export interface SThemeSwitchProps {
+export interface SThemeSwitchProps extends Omit<IconButtonProps, 'children' | 'component'> {
     mode?: SThemeMode;
     setMode?: (mode: SThemeMode) => void;
-    sx?: SxProps<Theme>;
 }
-declare const SThemeSwitch: ({ mode, setMode, sx }: SThemeSwitchProps) => import("react/jsx-runtime").JSX.Element;
+export type SThemeSwitchOwnerState = SThemeSwitchProps & {
+    mode: SThemeMode;
+};
+export declare const SThemeSwitch: import('react').ForwardRefExoticComponent<Omit<SThemeSwitchProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export default SThemeSwitch;

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

@@ -1,2 +1,2 @@
-import { t as e } from "../s-theme-switch-DzXoVmQH.js";
-export { e as default };
+import { t as e } from "../s-theme-switch-BLMz1_m2.js";
+export { e as SThemeSwitch, e as default };

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

@@ -0,0 +1,60 @@
+import { t as e } from "./useForkRef-CKneCEtr.js";
+import { t } from "./createSvgIcon-B0SZlJF1.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.d.ts

@@ -1,2 +1,3 @@
 export { default, default as STip } from './s-tip';
-export type { STipProps } from './s-tip';
+export type { STipOwnerState, STipProps, STipSlotProps, STipSlots } from './s-tip';
+export type {} from '../theme/component-augmentation';

package/dist/s-tip/index.js

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

package/dist/s-tip/s-tip.d.ts

@@ -1,13 +1,31 @@
+import { StackProps } from '@mui/material/Stack';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { TypographyProps } from '@mui/material/Typography';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
-/**
- * Props interface for STip component
- */
-export interface STipProps {
-    /** The tip message to display */
-    message: string;
-}
-export declare const STip: {
-    ({ message }: STipProps): React.JSX.Element;
-    displayName: string;
-};
+export interface STipSlots {
+    icon?: React.ElementType;
+    text?: React.ElementType;
+}
+export interface STipOwnerState {
+    direction: StackProps['direction'];
+    hasLabel: boolean;
+    spacing: StackProps['spacing'];
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, STipOwnerState>;
+export interface STipSlotProps {
+    icon?: OwnerStateSlotProps<SvgIconProps>;
+    text?: OwnerStateSlotProps<TypographyProps>;
+}
+export interface STipProps extends Omit<StackProps, 'children' | 'component'> {
+    /** Tip content. */
+    children: React.ReactNode;
+    /** Prefix displayed before the tip content. */
+    label?: React.ReactNode;
+    /** Components used for internal slots. */
+    slots?: STipSlots;
+    /** Props for internal slots. */
+    slotProps?: STipSlotProps;
+}
+export declare const STip: React.ForwardRefExoticComponent<Omit<STipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STip;

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

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

package/dist/s-tip-ty41ePQm.js

@@ -0,0 +1,62 @@
+import { t as e } from "./styled-Bog8QCl3.js";
+import { t } from "./Stack-UMc4dV4G.js";
+import { t as n } from "./useThemeProps-Cr28OQu3.js";
+import { toSxArray as r } from "./utils/sx.js";
+import { t as i } from "./appendOwnerState-CELpvdMz.js";
+import { t as a } from "./createSvgIcon-B0SZlJF1.js";
+import { t as o } from "./Typography-yXjc7kVP.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-toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as SToggleButton } from './s-toggle-button';
+export type { SToggleButtonProps } from './s-toggle-button';

package/dist/s-toggle-button/index.js

@@ -0,0 +1,2 @@
+import { SToggleButton as e } from "./s-toggle-button.js";
+export { e as SToggleButton, e as default };

package/dist/s-toggle-button/s-toggle-button.d.ts

@@ -0,0 +1,6 @@
+import { ToggleButtonProps } from '@mui/material';
+/** Exact MUI ToggleButton props, including polymorphic `component` support. */
+export type SToggleButtonProps = ToggleButtonProps;
+/** SoloStylist export of the MUI ToggleButton contract with shared theme styling. */
+export declare const SToggleButton: import('@mui/material').ExtendButtonBase<import('@mui/material').ToggleButtonTypeMap<{}, "button">>;
+export default SToggleButton;

package/dist/s-toggle-button/s-toggle-button.js

@@ -0,0 +1,5 @@
+import { ToggleButton as e } from "@mui/material";
+//#region lib/s-toggle-button/s-toggle-button.tsx
+var t = e;
+//#endregion
+export { t as SToggleButton, t as default };

package/dist/s-tool-bar/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SToolBar } from './s-tool-bar';
-export type { SToolBarProps, SToolBarInputType, SToolBarInput, SToolBarValue, SToolBarOption } from './types';
+export type { SToolBarInput, SToolBarChangeEvent, SToolBarInputSlotProps, SToolBarInputType, SToolBarOption, SToolBarOwnerState, SToolBarProps, SToolBarSlotProps, SToolBarSlots, SToolBarValue, } from './types';
+export type {} from '../theme/component-augmentation';

package/dist/s-tool-bar/s-tool-bar.d.ts

@@ -1,7 +1,4 @@
-import { default as React } from 'react';
 import { SToolBarProps } from './types';
-export declare const SToolBar: {
-    ({ inputs, onProcess, onReset, onDownload, processing, uploading, inputValues, onInputChange, customActionButtons, hideProcessButton, processButtonDisabled, getInputDisabled, processTooltip, downloadTooltip, resetTooltip, infoTooltip, infoTitle, infoContent, position, relative, containerSx, sx, }: SToolBarProps): React.JSX.Element;
-    displayName: string;
-};
+import * as React from 'react';
+export declare const SToolBar: React.ForwardRefExoticComponent<Omit<SToolBarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SToolBar;

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

@@ -1,46 +1,69 @@
-import { tint as e } from "../theme/utils.js";
-import { t } from "../tool-bar-action-buttons-CSXNDen6.js";
-import { groupInputsByType as n, hasVisibleInputSection as r, isProcessActionDisabled as i, isRequiredInputFilled as a } from "./utils.js";
-import { ToolbarInputItem as o } from "./tool-bar-inputs.js";
-import { useCallback as s, useMemo as c, useState as l } from "react";
+import { toSxArray as e } from "../utils/sx.js";
+import { tint as t } from "../theme/utils.js";
+import { t as n } from "../appendOwnerState-CELpvdMz.js";
+import { t as r } from "../mergeSlotProps-xl1-PgWL.js";
+import { t as i } from "../tool-bar-action-buttons-Dt-pV3GA.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 { createPortal as f } from "react-dom";
-import { Box as p, Dialog as m, DialogContent as h, DialogTitle as g } from "@mui/material";
+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 _ = ({ inputs: _ = [], onProcess: v, onReset: y, onDownload: b, processing: x = !1, uploading: S = !1, inputValues: C = {}, onInputChange: w, customActionButtons: T, hideProcessButton: E = !1, processButtonDisabled: D = !1, getInputDisabled: O, processTooltip: k = "Process", downloadTooltip: A = "Download", resetTooltip: j = "Reset", infoTooltip: M = "Information", infoTitle: N = "Tool Information", infoContent: P, position: F = "bottom", relative: I = !1, containerSx: L, sx: R }) => {
-	let [z, B] = l(!1), V = c(() => _.length === 0 ? !0 : _.every((e) => a(e, C[e.key])), [_, C]), { imageInputs: H, textareaInputs: U, paramInputs: W } = c(() => n(_), [_]), G = r(H, W), K = i(D, V, S, x), q = s(() => {}, []), J = s(() => {}, []), Y = s((e, t, n) => {
-		w?.(e, t, n);
-	}, [w]), X = s(() => B(!0), []), Z = s(() => B(!1), []), Q = s((e) => {
-		let t = C[e.key];
-		return /* @__PURE__ */ u(o, {
-			input: e,
-			value: t,
-			onChange: (t) => Y(e.key, t),
-			onFocus: q,
-			onBlur: J,
-			disabled: O?.(e.key) ?? !1
-		}, e.key);
-	}, [
-		C,
-		O,
+var g = m(f, {
+	name: "SToolBar",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), _ = m(f, {
+	name: "SToolBar",
+	slot: "Toolbar",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({});
+function v(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+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] = l.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) => {
+		E?.(e, t, n, r);
+	}, [E]), Q = l.useCallback((e) => /* @__PURE__ */ u(c, {
+		input: e,
+		value: a(e, w),
+		onChange: (t, n, r) => Z(t, e.key, n, r),
+		onFocus: Y,
+		onBlur: X,
+		disabled: S?.(e.key) ?? !1
+	}, e.key), [
+		w,
+		S,
+		Z,
 		Y,
-		q,
-		J
-	]), $ = /* @__PURE__ */ d(p, {
-		sx: {
-			position: I ? "relative" : "fixed",
-			[F]: I ? "auto" : 20,
-			left: I ? "auto" : "50%",
-			transform: I ? "none" : "translateX(-50%)",
-			zIndex: I ? "auto" : 1300,
-			display: I ? "flex" : "block",
-			justifyContent: I ? "center" : "initial",
-			mt: I && F === "top" ? 2 : 0,
-			mb: I && F === "bottom" ? 2 : 0,
-			...L
-		},
-		children: [/* @__PURE__ */ d(p, {
-			sx: [(t) => ({
+		X
+	]), $ = /* @__PURE__ */ d(g, {
+		...z,
+		ownerState: H,
+		ref: y,
+		sx: [{
+			position: N ? "relative" : "fixed",
+			[k]: 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 && k === "top" ? 2 : 0,
+			mb: N && k === "bottom" ? 2 : 0
+		}, ...e(L)],
+		children: [/* @__PURE__ */ d(G, {
+			...ye,
+			sx: [(e) => ({
 				display: "flex",
 				flexDirection: "column",
 				gap: 2,
@@ -50,65 +73,71 @@ var _ = ({ inputs: _ = [], onProcess: v, onReset: y, onDownload: b, processing:
 				borderColor: "divider",
 				bgcolor: "background.default",
 				transition: "border 120ms ease-in",
-				"&:hover": { borderColor: (t.vars ?? t).palette.grey[500] },
+				"&:hover": { borderColor: (e.vars ?? e).palette.grey[500] },
 				"&:focus-within": {
-					outline: `3px solid ${e((t.vars ?? t).palette.primary[500], 50)}`,
-					borderColor: (t.vars ?? t).palette.primary[400]
+					outline: `3px solid ${t((e.vars ?? e).palette.primary[500], 50)}`,
+					borderColor: (e.vars ?? e).palette.primary[400]
 				}
-			}), ...Array.isArray(R) ? R : [R]],
-			children: [U.length > 0 && /* @__PURE__ */ u(p, {
+			}), ...e(_e)],
+			children: [q.length > 0 && /* @__PURE__ */ u(f, {
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					gap: 2
 				},
-				children: U.map(Q)
-			}), /* @__PURE__ */ d(p, {
+				children: q.map(Q)
+			}), /* @__PURE__ */ d(f, {
 				sx: {
 					display: "flex",
 					alignItems: "center",
 					gap: .5
 				},
-				children: [/* @__PURE__ */ u(p, {
+				children: [/* @__PURE__ */ u(f, {
 					sx: {
 						display: "flex",
 						alignItems: "center",
 						gap: 2,
 						flex: 1
 					},
-					children: G && /* @__PURE__ */ d(p, {
+					children: we && /* @__PURE__ */ d(f, {
 						sx: {
 							display: "flex",
 							alignItems: "center",
 							gap: 1.5
 						},
-						children: [H.map(Q), W.map(Q)]
+						children: [K.map(Q), J.map(Q)]
 					})
-				}), /* @__PURE__ */ u(t, {
-					customActionButtons: T,
-					infoContent: P,
-					infoTooltip: M,
-					downloadTooltip: A,
-					resetTooltip: j,
-					processTooltip: k,
-					hideProcessButton: E,
-					processActionDisabled: K,
-					onInfoOpen: X,
-					onDownload: b,
-					onReset: y,
-					onProcess: v
+				}), /* @__PURE__ */ u(i, {
+					customActionButtons: x,
+					infoContent: C,
+					infoTooltip: ce,
+					downloadTooltip: ae,
+					resetTooltip: P,
+					processTooltip: j,
+					hideProcessButton: oe,
+					processActionDisabled: Te,
+					onInfoOpen: U,
+					onDownload: le,
+					onReset: O,
+					onProcess: D
 				})]
 			})]
-		}), P && /* @__PURE__ */ d(m, {
-			open: z,
-			onClose: Z,
+		}), C && /* @__PURE__ */ d(ue, {
 			maxWidth: "sm",
 			fullWidth: !0,
-			children: [/* @__PURE__ */ u(g, { children: N }), /* @__PURE__ */ u(h, { children: P })]
+			...be,
+			open: B,
+			children: [/* @__PURE__ */ u(de, {
+				...xe,
+				children: se
+			}), /* @__PURE__ */ u(fe, {
+				...Se,
+				children: C
+			})]
 		})]
 	});
-	return !I && typeof window < "u" ? f($, document.body) : $;
-};
-_.displayName = "SToolBar";
+	return N ? $ : /* @__PURE__ */ u(p, { children: $ });
+});
+y.displayName = "SToolBar";
 //#endregion
-export { _ as SToolBar, _ as default };
+export { y as SToolBar, y as default };

package/dist/s-tool-bar/tool-bar-action-buttons.d.ts

@@ -9,7 +9,7 @@ export declare const ToolbarActionButtons: React.NamedExoticComponent<{
     hideProcessButton: boolean;
     processActionDisabled: boolean;
     onInfoOpen: () => void;
-    onDownload?: () => void;
-    onReset?: () => void;
-    onProcess?: () => void;
+    onDownload?: React.MouseEventHandler<HTMLButtonElement>;
+    onReset?: React.MouseEventHandler<HTMLButtonElement>;
+    onProcess?: React.MouseEventHandler<HTMLButtonElement>;
 }>;

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

@@ -1,2 +1,2 @@
-import { t as e } from "../tool-bar-action-buttons-CSXNDen6.js";
+import { t as e } from "../tool-bar-action-buttons-Dt-pV3GA.js";
 export { e as ToolbarActionButtons };

package/dist/s-tool-bar/tool-bar-image-input.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
-import { SToolBarInput, SToolBarValue } from './types';
+import { SToolBarChangeEvent, SToolBarInput, SToolBarValue } from './types';
 export declare const ImageInput: React.NamedExoticComponent<{
     input: SToolBarInput;
     value: SToolBarValue;
-    onChange: (value: SToolBarValue) => void;
+    onChange: (event: SToolBarChangeEvent, value: SToolBarValue, file?: File) => void;
     disabled?: boolean;
 }>;

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

@@ -1,2 +1,2 @@
-import { t as e } from "../tool-bar-image-input-IdA6l71Y.js";
+import { t as e } from "../tool-bar-image-input-BXlll_hV.js";
 export { e as ImageInput };