@solostylist/ui-kit 2.0.2 → 2.0.4

package/dist/s-flex-box/s-flex-box.js

@@ -1,21 +1,20 @@
-import { t as e } from "../Box-9oeZgA1U.js";
-import { t } from "../styled-Bog8QCl3.js";
-import { t as n } from "../useThemeProps-Dw9dmKyT.js";
-import * as r from "react";
-import { jsx as i } from "react/jsx-runtime";
+import { styled as e, useThemeProps as t } from "@mui/material/styles";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@mui/material/Box";
 //#region lib/s-flex-box/s-flex-box.tsx
-var a = t(e, {
+var a = e(i, {
 	name: "SFlexBox",
 	slot: "Root"
-})({ display: "flex" }), o = Object.assign(r.forwardRef(function(e, t) {
-	let r = n({
+})({ display: "flex" }), o = Object.assign(n.forwardRef(function(e, n) {
+	let i = t({
 		props: e,
 		name: "SFlexBox"
 	});
-	return /* @__PURE__ */ i(a, {
-		...r,
-		ownerState: r,
-		ref: t
+	return /* @__PURE__ */ r(a, {
+		...i,
+		ownerState: i,
+		ref: n
 	});
 }), { displayName: "SFlexBox" });
 //#endregion

package/dist/s-form/s-form.js

@@ -1,28 +1,28 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../useForkRef-BuNFTXxE.js";
-import { t as n } from "../appendOwnerState-CFQTq3pb.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { FormControl as o, FormHelperText as s, FormLabel as c, styled as l, useThemeProps as u } from "@mui/material";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { FormControl as i, FormHelperText as a, FormLabel as o, styled as s, useThemeProps as c } from "@mui/material";
+import { useForkRef as l } from "@mui/material/utils";
+import u from "@mui/utils/appendOwnerState";
 //#region lib/s-form/s-form.tsx
-var d = l(o, {
+var d = s(i, {
 	name: "SForm",
 	slot: "Root"
 })({});
 function f(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var p = r.forwardRef(function(r, o) {
-	let l = u({
-		props: r,
+var p = t.forwardRef(function(t, i) {
+	let s = c({
+		props: t,
 		name: "SForm"
-	}), { children: p, disabled: m = !1, error: h = !1, fullWidth: g = !0, helperText: _, label: v, required: y = !1, slots: b, slotProps: x, ...S } = l, C = {
-		...l,
+	}), { children: p, disabled: m = !1, error: h = !1, fullWidth: g = !0, helperText: _, label: v, required: y = !1, slots: b, slotProps: x, ...S } = s, C = {
+		...s,
 		disabled: m,
 		error: h,
 		required: y
-	}, w = b?.root ?? d, T = b?.label ?? c, E = b?.helperText ?? s, D = f(x?.root, C), O = f(x?.label, C), k = f(x?.helperText, C), { ref: A, ...j } = n(w, D ?? {}, C), M = t(A, o), N = n(b?.label, O ?? {}, C), P = n(b?.helperText, k ?? {}, C), { sx: F, ...I } = N;
-	return /* @__PURE__ */ a(w, {
+	}, w = b?.root ?? d, T = b?.label ?? o, E = b?.helperText ?? a, D = f(x?.root, C), O = f(x?.label, C), k = f(x?.helperText, C), { ref: A, ...j } = u(w, D ?? {}, C), M = l(A, i), N = u(b?.label, O ?? {}, C), P = u(b?.helperText, k ?? {}, C), { sx: F, ...I } = N;
+	return /* @__PURE__ */ r(w, {
 		...S,
 		...j,
 		ref: M,
@@ -31,7 +31,7 @@ var p = r.forwardRef(function(r, o) {
 		fullWidth: g,
 		required: y,
 		children: [
-			v ? /* @__PURE__ */ i(T, {
+			v ? /* @__PURE__ */ n(T, {
 				...I,
 				required: y,
 				sx: [{
@@ -41,7 +41,7 @@ var p = r.forwardRef(function(r, o) {
 				children: v
 			}) : null,
 			p,
-			_ ? /* @__PURE__ */ i(E, {
+			_ ? /* @__PURE__ */ n(E, {
 				...P,
 				children: _
 			}) : null

package/dist/s-gallery/s-gallery.js

@@ -1,5 +1,5 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../s-image-viewer-CjK67-rs.js";
+import { SImageViewer as t } from "../s-image-viewer/s-image-viewer.js";
 import { GalleryGridItem as n } from "./gallery-grid-item.js";
 import { applyLayoutVariant as r, getLayoutDimensions as i } from "./gallery-layout.js";
 import a, { useCallback as o, useEffect as s, useId as c, useState as l } from "react";

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

@@ -1,17 +1,16 @@
-import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../useThemeProps-Dw9dmKyT.js";
-import { toSxArray as n } from "../utils/sx.js";
-import { SMovingBorder as r } from "../s-moving-border/s-moving-border.js";
+import { toSxArray as e } from "../utils/sx.js";
+import { SMovingBorder as t } from "../s-moving-border/s-moving-border.js";
+import { styled as n, useThemeProps as r } from "@mui/material/styles";
 import i from "react";
 import { jsx as a } from "react/jsx-runtime";
 import { Button as o } from "@mui/material";
 //#region lib/s-glow-button/s-glow-button.tsx
-var s = e(o, {
+var s = n(o, {
 	name: "SGlowButton",
 	slot: "Root"
-})({}), c = i.forwardRef(function(e, i) {
-	let o = t({
-		props: e,
+})({}), c = i.forwardRef(function(n, i) {
+	let o = r({
+		props: n,
 		name: "SGlowButton"
 	}), { borderRadius: c = 12, children: l, disableRipple: u, duration: d = 3e3, fullWidth: f = !1, glowColor: p = "var(--s-palette-info-main)", glowSize: m = 60, height: h = "60px", sx: g, width: _ = "fit-content", ...v } = o, y = f ? "100%" : _, b = {
 		...o,
@@ -22,7 +21,7 @@ var s = e(o, {
 		height: h,
 		width: y
 	};
-	return /* @__PURE__ */ a(r, {
+	return /* @__PURE__ */ a(t, {
 		width: y,
 		height: h,
 		duration: d,
@@ -40,7 +39,7 @@ var s = e(o, {
 				borderRadius: c,
 				height: h,
 				width: y
-			}, ...n(g)],
+			}, ...e(g)],
 			children: l
 		})
 	});

package/dist/s-gradient-blob-pulse/s-gradient-blob-pulse.js

@@ -1,11 +1,10 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
-import { t as n } from "../useForkRef-BuNFTXxE.js";
-import { t as r } from "../appendOwnerState-CFQTq3pb.js";
-import { t as i } from "../mergeSlotProps-DC8r4QzS.js";
-import * as a from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Box as c, keyframes as l, styled as u, useThemeProps as d } from "@mui/material";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Box as a, keyframes as o, styled as s, useThemeProps as c } from "@mui/material";
+import { mergeSlotProps as l, useForkRef as u } from "@mui/material/utils";
+import d from "@mui/utils/appendOwnerState";
 //#region lib/s-gradient-blob-pulse/s-gradient-blob-pulse.tsx
 var f = "--SGradientBlobPulse-blur", p = {
 	large: {
@@ -86,19 +85,19 @@ var f = "--SGradientBlobPulse-blur", p = {
 		pulseDuration: 1.125
 	}
 ], _ = 2.5, v = [
-	l`
+	o`
   0%, 100% { transform: translate(-54%, -50%) scale(1); }
   50% { transform: translate(-47%, -55%) scale(1.22); }
 `,
-	l`
+	o`
   0%, 100% { transform: translate(-46%, -48%) scale(1); }
   50% { transform: translate(-53%, -43%) scale(1.16); }
 `,
-	l`
+	o`
   0%, 100% { transform: translate(-50%, -56%) scale(1); }
   50% { transform: translate(-43%, -49%) scale(1.25); }
 `
-], y = l`
+], y = o`
   0%, 100% { background-image: var(--SGradientBlobPulse-gradient-1); }
   25% { background-image: var(--SGradientBlobPulse-gradient-2); }
   50% { background-image: var(--SGradientBlobPulse-gradient-3); }
@@ -116,7 +115,7 @@ var f = "--SGradientBlobPulse-blur", p = {
 		r[2] ?? r[0],
 		r[3] ?? r[0]
 	];
-}, x = u(c, {
+}, x = s(a, {
 	name: "SGradientBlobPulse",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -160,7 +159,7 @@ var f = "--SGradientBlobPulse-blur", p = {
 		position: "relative",
 		"@supports not (color: color-mix(in srgb, red, blue))": s
 	};
-}), S = u(c, {
+}), S = s(a, {
 	name: "SGradientBlobPulse",
 	slot: "Blob",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -190,7 +189,7 @@ var f = "--SGradientBlobPulse-blur", p = {
 		props: ({ ownerState: e }) => e.paused,
 		style: { animationPlayState: "paused" }
 	}]
-})), C = u(c, {
+})), C = s(a, {
 	name: "SGradientBlobPulse",
 	slot: "Content",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -201,19 +200,19 @@ var f = "--SGradientBlobPulse-blur", p = {
 	0,
 	1,
 	2
-], T = a.forwardRef(function(a, c) {
-	let l = d({
-		props: a,
+], T = n.forwardRef(function(n, a) {
+	let o = c({
+		props: n,
 		name: "SGradientBlobPulse"
-	}), { animationDuration: u = 3200, children: f, colors: p, paused: m = !1, size: h = "medium", slotProps: g, slots: _, sx: v, variant: y = "balanced", ...b } = l, T = {
-		...l,
-		animationDuration: u,
+	}), { animationDuration: s = 3200, children: f, colors: p, paused: m = !1, size: h = "medium", slotProps: g, slots: _, sx: v, variant: y = "balanced", ...b } = o, T = {
+		...o,
+		animationDuration: s,
 		colors: p,
 		paused: m,
 		size: h,
 		variant: y
-	}, E = _?.root ?? x, D = _?.blob ?? S, O = _?.content ?? C, { ref: k, sx: A, ...j } = r(E, i(t(g?.root, T), b), T), M = n(k, c), N = r(O, t(g?.content, T) ?? {}, T);
-	return /* @__PURE__ */ s(E, {
+	}, E = _?.root ?? x, D = _?.blob ?? S, O = _?.content ?? C, { ref: k, sx: A, ...j } = d(E, l(t(g?.root, T), b), T), M = u(k, a), N = d(O, t(g?.content, T) ?? {}, T);
+	return /* @__PURE__ */ i(E, {
 		...j,
 		ref: M,
 		sx: [...e(A), ...e(v)],
@@ -222,11 +221,11 @@ var f = "--SGradientBlobPulse-blur", p = {
 				...T,
 				index: e
 			};
-			return /* @__PURE__ */ o(D, {
-				...r(D, t(g?.blob, n) ?? {}, n),
+			return /* @__PURE__ */ r(D, {
+				...d(D, t(g?.blob, n) ?? {}, n),
 				"aria-hidden": !0
 			}, e);
-		}), /* @__PURE__ */ o(O, {
+		}), /* @__PURE__ */ r(O, {
 			...N,
 			children: f
 		})]

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

@@ -1,10 +1,9 @@
-import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../useThemeProps-Dw9dmKyT.js";
-import { t as n } from "../IconButton-CE-4GamO.js";
-import { t as r } from "../appendOwnerState-CFQTq3pb.js";
-import { t as i } from "../Tooltip-B1sn94L0.js";
-import * as a from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { styled as e, useThemeProps as t } from "@mui/material/styles";
+import n from "@mui/material/IconButton";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import a from "@mui/utils/appendOwnerState";
+import o from "@mui/material/Tooltip";
 //#region lib/s-icon-button/s-icon-button.tsx
 var s = e(n, {
 	name: "SIconButton",
@@ -23,26 +22,26 @@ var s = e(n, {
 function c(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var l = a.forwardRef(function(e, n) {
-	let a = t({
+var l = r.forwardRef(function(e, n) {
+	let r = t({
 		props: e,
 		name: "SIconButton"
-	}), { disabled: l = !1, slotProps: u, slots: d, tooltip: f, variant: p, ...m } = a, h = {
-		...a,
+	}), { disabled: l = !1, slotProps: u, slots: d, tooltip: f, variant: p, ...m } = r, h = {
+		...r,
 		disabled: l,
 		hasTooltip: f != null,
 		variant: p
-	}, g = d?.tooltip ?? i, _ = r(d?.tooltip, c(u?.tooltip, h) ?? {}, h), v = m["aria-label"] ?? (typeof f == "string" ? f : void 0), y = /* @__PURE__ */ o(s, {
+	}, g = d?.tooltip ?? o, _ = a(d?.tooltip, c(u?.tooltip, h) ?? {}, h), v = m["aria-label"] ?? (typeof f == "string" ? f : void 0), y = /* @__PURE__ */ i(s, {
 		...m,
 		"aria-label": v,
 		disabled: l,
 		ownerState: h,
 		ref: n
 	});
-	return f == null ? y : /* @__PURE__ */ o(g, {
+	return f == null ? y : /* @__PURE__ */ i(g, {
 		..._,
 		title: f,
-		children: l ? /* @__PURE__ */ o("span", { children: y }) : y
+		children: l ? /* @__PURE__ */ i("span", { children: y }) : y
 	});
 });
 l.displayName = "SIconButton";

package/dist/s-image-comparison/s-image-comparison.js

@@ -1,40 +1,38 @@
-import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../useThemeProps-Dw9dmKyT.js";
-import { toSxArray as n } from "../utils/sx.js";
-import { t as r } from "../useForkRef-BuNFTXxE.js";
+import { toSxArray as e } from "../utils/sx.js";
 import "../theme/components/action-styles.js";
-import { t as i } from "../useControlled-DqNPBJNp.js";
-import { SLazyImage as a } from "../s-lazy-image/s-lazy-image.js";
-import * as o from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Box as l, IconButton as u } from "@mui/material";
+import { SLazyImage as t } from "../s-lazy-image/s-lazy-image.js";
+import { styled as n, useThemeProps as r } from "@mui/material/styles";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Box as s, IconButton as c } from "@mui/material";
+import { useControlled as l, useForkRef as u } from "@mui/material/utils";
 //#region lib/s-image-comparison/s-image-comparison.tsx
-var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0, Math.min(100, e)), p = e(l, {
+var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0, Math.min(100, e)), p = n(s, {
 	name: "SImageComparison",
 	slot: "Root"
-})({}), m = o.forwardRef((e, m) => {
-	let h = t({
-		props: e,
+})({}), m = i.forwardRef((n, m) => {
+	let h = r({
+		props: n,
 		name: "SImageComparison"
-	}), { sx: g, leftImage: _, rightImage: v, altLeft: y = "Left image", altRight: b = "Right image", value: x, defaultValue: S = 50, onChange: C, onMouseDown: w, onTouchStart: T, ...E } = h, D = Array.isArray(_) ? _ : [_], O = Array.isArray(y) ? y : [y], [k, A] = o.useState(0), j = Math.min(k, Math.max(0, D.length - 1)), [M, N] = i({
+	}), { sx: g, leftImage: _, rightImage: v, altLeft: y = "Left image", altRight: b = "Right image", value: x, defaultValue: S = 50, onChange: C, onMouseDown: w, onTouchStart: T, ...E } = h, D = Array.isArray(_) ? _ : [_], O = Array.isArray(y) ? y : [y], [k, A] = i.useState(0), j = Math.min(k, Math.max(0, D.length - 1)), [M, N] = l({
 		controlled: x,
 		default: f(S),
 		name: "SImageComparison",
 		state: "value"
-	}), P = f(M), [F, I] = o.useState(!1), L = o.useRef(null), R = r(L, m), z = D.length > 1, B = P > 10, V = o.useCallback((e, t) => {
+	}), P = f(M), [F, I] = i.useState(!1), L = i.useRef(null), R = u(L, m), z = D.length > 1, B = P > 10, V = i.useCallback((e, t) => {
 		let n = f(t);
 		N(n), C?.(e, n);
-	}, [C, N]), H = o.useCallback((e, t) => {
+	}, [C, N]), H = i.useCallback((e, t) => {
 		if (!L.current) return;
 		let n = L.current.getBoundingClientRect();
 		V(t, (e - n.left) / n.width * 100);
-	}, [V]), U = o.useCallback((e) => {
+	}, [V]), U = i.useCallback((e) => {
 		F && (e.preventDefault(), H(e.clientX, e));
-	}, [H, F]), W = o.useCallback((e) => {
+	}, [H, F]), W = i.useCallback((e) => {
 		F && e.touches[0] && H(e.touches[0].clientX, e);
 	}, [H, F]), G = (e) => {
 		"button" in e && e.button !== 0 || (I(!0), "clientX" in e ? H(e.clientX, e.nativeEvent) : e.touches[0] && H(e.touches[0].clientX, e.nativeEvent));
-	}, K = o.useCallback(() => {
+	}, K = i.useCallback(() => {
 		I(!1);
 	}, []), q = (e) => {
 		V(e.nativeEvent, Number(e.target.value));
@@ -74,10 +72,10 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 		isDragging: F,
 		sliderPosition: P
 	};
-	return o.useEffect(() => {
+	return i.useEffect(() => {
 		let e = Math.max(0, D.length - 1);
 		A((t) => Math.min(t, e));
-	}, [D.length]), o.useEffect(() => {
+	}, [D.length]), i.useEffect(() => {
 		if (!F) return;
 		let e = document.body.style.cursor;
 		return document.addEventListener("mousemove", U), document.addEventListener("touchmove", W), document.addEventListener("mouseup", K), document.addEventListener("touchend", K), document.addEventListener("touchcancel", K), document.body.style.cursor = "ew-resize", () => {
@@ -88,7 +86,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 		U,
 		W,
 		F
-	]), /* @__PURE__ */ c(p, {
+	]), /* @__PURE__ */ o(p, {
 		ownerState: Z,
 		ref: R,
 		sx: [{
@@ -98,12 +96,12 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 			overflow: "hidden",
 			touchAction: "pan-y",
 			userSelect: "none"
-		}, ...n(g)],
+		}, ...e(g)],
 		onMouseDown: Y,
 		onTouchStart: X,
 		...E,
 		children: [
-			/* @__PURE__ */ s(a, {
+			/* @__PURE__ */ a(t, {
 				src: v,
 				alt: b,
 				sx: {
@@ -118,7 +116,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 					}
 				} }
 			}),
-			/* @__PURE__ */ s(l, {
+			/* @__PURE__ */ a(s, {
 				sx: {
 					position: "absolute",
 					inset: 0,
@@ -128,7 +126,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 					pointerEvents: "none",
 					clipPath: `polygon(0 0, ${P}% 0, ${P}% 100%, 0 100%)`
 				},
-				children: D.length > 0 ? /* @__PURE__ */ s(a, {
+				children: D.length > 0 ? /* @__PURE__ */ a(t, {
 					src: D[j],
 					alt: O[j] ?? O[0],
 					slotProps: { image: {
@@ -137,7 +135,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 					} }
 				}) : null
 			}),
-			z && /* @__PURE__ */ s(l, {
+			z && /* @__PURE__ */ a(s, {
 				sx: {
 					position: "absolute",
 					left: 1,
@@ -158,7 +156,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 				onClick: (e) => e.stopPropagation(),
 				onMouseDown: (e) => e.stopPropagation(),
 				onTouchStart: (e) => e.stopPropagation(),
-				children: D.map((e, t) => /* @__PURE__ */ s(u, {
+				children: D.map((e, t) => /* @__PURE__ */ a(c, {
 					"aria-label": `Show comparison image ${t + 1}`,
 					"aria-pressed": j === t,
 					tabIndex: B ? 0 : -1,
@@ -202,7 +200,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 					}
 				}, `${e}-${t}`))
 			}),
-			/* @__PURE__ */ c(l, {
+			/* @__PURE__ */ o(s, {
 				sx: {
 					position: "absolute",
 					top: 0,
@@ -211,7 +209,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 					cursor: "ew-resize",
 					left: `calc(${P}% - 3px)`
 				},
-				children: [/* @__PURE__ */ s(l, {
+				children: [/* @__PURE__ */ a(s, {
 					className: "SImageComparison-range",
 					component: "input",
 					type: "range",
@@ -236,7 +234,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 							outlineOffset: 2
 						}
 					}
-				}), /* @__PURE__ */ s(l, {
+				}), /* @__PURE__ */ a(s, {
 					className: "SImageComparison-divider",
 					sx: {
 						position: "absolute",

package/dist/s-image-viewer/image-viewer-thumbnail-dock.js

@@ -1,4 +1,4 @@
-import { r as e } from "../theme-primitives-CXtaMdVj.js";
+import { r as e } from "../theme-primitives-CRfnMsNy.js";
 import { DefaultMediaItem as t } from "./default-media-item.js";
 import "react";
 import { jsx as n } from "react/jsx-runtime";

package/dist/s-image-viewer/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../s-image-viewer-CjK67-rs.js";
-import { DefaultMediaItem as t } from "./default-media-item.js";
-export { t as DefaultMediaItem, e as SImageViewer, e as default };
+import { DefaultMediaItem as e } from "./default-media-item.js";
+import { SImageViewer as t } from "./s-image-viewer.js";
+export { e as DefaultMediaItem, t as SImageViewer, t as default };