@solostylist/ui-kit 2.0.0 → 2.0.1

package/dist/s-theme-demo/theme-demo-components-section.js

@@ -1,2 +1,265 @@
-import { t as e } from "../theme-demo-components-section-gtIYRngY.js";
-export { e as SoloStylistSection };
+import { SButton as e } from "../s-button/s-button.js";
+import { STextField as t } from "../s-text-field/s-text-field.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Add as a, Favorite as o, Share as s, Star as c } from "@mui/icons-material";
+import { Box as l, Card as u, CardContent as d, Stack as f, Typography as p } from "@mui/material";
+//#region lib/s-theme-demo/theme-demo-components-section.tsx
+var m = () => {
+	let [m, h] = n.useState("");
+	return /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r(l, { children: /* @__PURE__ */ i(f, {
+		spacing: 3,
+		children: [
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Button Variants"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						children: "Contained"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "primary",
+						children: "Outlined"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "text",
+						color: "primary",
+						children: "Text"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Color Variants (Contained)"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						children: "Primary"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "secondary",
+						children: "Secondary"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "success",
+						children: "Success"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "warning",
+						children: "Warning"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "error",
+						children: "Error"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "info",
+						children: "Info"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Color Variants (Outlined)"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "primary",
+						children: "Primary"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "secondary",
+						children: "Secondary"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "success",
+						children: "Success"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "warning",
+						children: "Warning"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "error",
+						children: "Error"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "info",
+						children: "Info"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Button Sizes"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					alignItems: "center",
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						size: "small",
+						children: "Small"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						size: "medium",
+						children: "Medium"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						size: "large",
+						children: "Large"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Button States"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						children: "Default"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						disabled: !0,
+						children: "Disabled"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "primary",
+						disabled: !0,
+						children: "Disabled Outlined"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "text",
+						color: "primary",
+						disabled: !0,
+						children: "Disabled Text"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Buttons with Icons"
+			}), /* @__PURE__ */ i(f, {
+				direction: "row",
+				sx: {
+					flexWrap: "wrap",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "primary",
+						startIcon: /* @__PURE__ */ r(a, {}),
+						children: "Start Icon"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "contained",
+						color: "secondary",
+						endIcon: /* @__PURE__ */ r(s, {}),
+						children: "End Icon"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "outlined",
+						color: "success",
+						startIcon: /* @__PURE__ */ r(c, {}),
+						children: "Outlined + Icon"
+					}),
+					/* @__PURE__ */ r(e, {
+						variant: "text",
+						color: "error",
+						endIcon: /* @__PURE__ */ r(o, {}),
+						children: "Text + Icon"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ i(l, { children: [/* @__PURE__ */ r(p, {
+				variant: "h6",
+				sx: { mb: 2 },
+				children: "Form Components"
+			}), /* @__PURE__ */ i(f, {
+				sx: { gap: 2 },
+				children: [
+					/* @__PURE__ */ r(t, {
+						label: "Enhanced Text Field",
+						value: m,
+						onChange: (e) => h(e.target.value),
+						placeholder: "Enter text here...",
+						helperText: "This is an enhanced STextField component"
+					}),
+					/* @__PURE__ */ r(t, {
+						label: "Password Field",
+						type: "password",
+						placeholder: "Enter password...",
+						helperText: "Password input with custom styling"
+					}),
+					/* @__PURE__ */ r(t, {
+						label: "Multiline Text",
+						multiline: !0,
+						rows: 3,
+						placeholder: "Enter multiple lines...",
+						helperText: "Multiline text input"
+					})
+				]
+			})] })
+		]
+	}) }) }) });
+};
+//#endregion
+export { m as SoloStylistSection };

package/dist/s-theme-demo/theme-demo-typography-section.js

@@ -1,12 +1,12 @@
-import { t as e } from "../useTheme-BIWMbX3i.js";
-import { formatFontSize as t } from "./utils.js";
-import { headingSamples as n } from "./theme-demo-data.js";
+import { formatFontSize as e } from "./utils.js";
+import { headingSamples as t } from "./theme-demo-data.js";
+import { useTheme as n } from "@mui/material/styles";
 import "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Box as a, Card as o, CardContent as s, Stack as c, Typography as l } from "@mui/material";
 //#region lib/s-theme-demo/theme-demo-typography-section.tsx
 var u = () => {
-	let u = e();
+	let u = n();
 	return /* @__PURE__ */ r(o, { children: /* @__PURE__ */ i(s, { children: [/* @__PURE__ */ r(l, {
 		variant: "h6",
 		sx: { mb: 2 },
@@ -16,25 +16,25 @@ var u = () => {
 		children: /* @__PURE__ */ i(c, {
 			spacing: 2,
 			children: [
-				n.map(({ variant: e, label: n, description: o }) => {
-					let s = u.typography[e];
+				t.map(({ variant: t, label: n, description: o }) => {
+					let s = u.typography[t];
 					return /* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(l, {
-						variant: e,
+						variant: t,
 						gutterBottom: !0,
 						children: n
 					}), /* @__PURE__ */ i(l, {
 						variant: "caption",
 						children: [
-							e,
+							t,
 							" - ",
-							t(s.fontSize, u.typography.htmlFontSize),
+							e(s.fontSize, u.typography.htmlFontSize),
 							", Weight",
 							" ",
 							s.fontWeight,
 							" - ",
 							o
 						]
-					})] }, e);
+					})] }, t);
 				}),
 				/* @__PURE__ */ i(a, { children: [/* @__PURE__ */ r(l, {
 					variant: "body1",

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

@@ -1,4 +1,4 @@
-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 { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../theme-primitives-CRfnMsNy.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";

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

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

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

@@ -1,2 +1,60 @@
-import { t as e } from "../s-theme-switch-BLMz1_m2.js";
-export { e as SThemeSwitch, e as default };
+import { forwardRef as e, useCallback as t, useRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { DarkMode as i, LightMode as a } from "@mui/icons-material";
+import { IconButton as o, styled as s, useColorScheme as c, useMediaQuery as l, useThemeProps as u } from "@mui/material";
+import { useForkRef as d } from "@mui/material/utils";
+import { flushSync as f } from "react-dom";
+//#region lib/s-theme-switch/s-theme-switch.tsx
+var p = s(o, {
+	name: "SThemeSwitch",
+	slot: "Root"
+})({}), m = e(function(e, o) {
+	let s = u({
+		props: e,
+		name: "SThemeSwitch"
+	}), { mode: m, onClick: h, setMode: g, "aria-label": _, ...v } = s, y = n(null), b = d(y, o), { mode: x, setMode: S, systemMode: C } = c(), w = l("(prefers-reduced-motion: reduce)"), T = m ?? x, E = (T === "system" ? C : T) === "dark", D = {
+		...s,
+		mode: T
+	}, O = t(() => {
+		let e = E ? "light" : "dark";
+		g ? g(e) : S(e);
+	}, [
+		E,
+		S,
+		g
+	]), k = t(async (e) => {
+		if (h?.(e), e.defaultPrevented) return;
+		if (w || !y.current || typeof document > "u" || !document.startViewTransition) {
+			O();
+			return;
+		}
+		await document.startViewTransition(() => {
+			f(() => {
+				O();
+			});
+		}).ready;
+		let t = y.current;
+		if (!t) return;
+		let { top: n, left: r, width: i, height: a } = t.getBoundingClientRect(), o = r + i / 2, s = n + a / 2, c = Math.hypot(Math.max(o, window.innerWidth - o), Math.max(s, window.innerHeight - s));
+		document.documentElement.animate({ clipPath: [`circle(0px at ${o}px ${s}px)`, `circle(${c}px at ${o}px ${s}px)`] }, {
+			duration: 700,
+			easing: "ease-in-out",
+			pseudoElement: "::view-transition-new(root)"
+		});
+	}, [
+		h,
+		w,
+		O
+	]);
+	return /* @__PURE__ */ r(p, {
+		...v,
+		ref: b,
+		"aria-label": _ ?? (E ? "Switch to light mode" : "Switch to dark mode"),
+		onClick: k,
+		ownerState: D,
+		children: r(E ? a : i, {})
+	});
+});
+m.displayName = "SThemeSwitch";
+//#endregion
+export { m as SThemeSwitch, m as default };

package/dist/s-tip/index.js

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

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

@@ -1,2 +1,61 @@
-import { t as e } from "../s-tip-ty41ePQm.js";
-export { e as STip, e as default };
+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 };

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-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 { 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-Dt-pV3GA.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 };