@solostylist/ui-kit 2.0.1 → 2.0.2

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

@@ -0,0 +1,237 @@
+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";
+//#region lib/s-gradient-blob-pulse/s-gradient-blob-pulse.tsx
+var f = "--SGradientBlobPulse-blur", p = {
+	large: {
+		blobSizes: [
+			260,
+			200,
+			140
+		],
+		blur: 40
+	},
+	medium: {
+		blobSizes: [
+			180,
+			140,
+			100
+		],
+		blur: 28
+	},
+	small: {
+		blobSizes: [
+			80,
+			60,
+			40
+		],
+		blur: 14
+	}
+}, m = 1.3, h = {
+	balanced: {
+		colorCore: "50%",
+		colorMid: "18%",
+		fadeEnd: "64%",
+		fadeMid: "34%",
+		opacities: [
+			.48,
+			.38,
+			.32
+		],
+		sizeScale: 1
+	},
+	soft: {
+		colorCore: "34%",
+		colorMid: "10%",
+		fadeEnd: "52%",
+		fadeMid: "26%",
+		opacities: [
+			.28,
+			.22,
+			.18
+		],
+		sizeScale: 1
+	},
+	vivid: {
+		colorCore: "68%",
+		colorMid: "30%",
+		fadeEnd: "74%",
+		fadeMid: "40%",
+		opacities: [
+			.62,
+			.52,
+			.44
+		],
+		sizeScale: 1.08
+	}
+}, g = [
+	{
+		colorDelay: 0,
+		pulseDelay: 0,
+		pulseDuration: 1
+	},
+	{
+		colorDelay: .625,
+		pulseDelay: -.1875,
+		pulseDuration: .875
+	},
+	{
+		colorDelay: 1.25,
+		pulseDelay: -.34375,
+		pulseDuration: 1.125
+	}
+], _ = 2.5, v = [
+	l`
+  0%, 100% { transform: translate(-54%, -50%) scale(1); }
+  50% { transform: translate(-47%, -55%) scale(1.22); }
+`,
+	l`
+  0%, 100% { transform: translate(-46%, -48%) scale(1); }
+  50% { transform: translate(-53%, -43%) scale(1.16); }
+`,
+	l`
+  0%, 100% { transform: translate(-50%, -56%) scale(1); }
+  50% { transform: translate(-43%, -49%) scale(1.25); }
+`
+], y = l`
+  0%, 100% { background-image: var(--SGradientBlobPulse-gradient-1); }
+  25% { background-image: var(--SGradientBlobPulse-gradient-2); }
+  50% { background-image: var(--SGradientBlobPulse-gradient-3); }
+  75% { background-image: var(--SGradientBlobPulse-gradient-4); }
+`, b = (e, t) => {
+	let n = (e.vars ?? e).palette, r = t.colors?.length ? t.colors : [
+		n.primary[300],
+		n.primary[600],
+		n.secondary[400],
+		n.secondary[600]
+	];
+	return [
+		r[0],
+		r[1] ?? r[0],
+		r[2] ?? r[0],
+		r[3] ?? r[0]
+	];
+}, x = u(c, {
+	name: "SGradientBlobPulse",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ ownerState: e, theme: t }) => {
+	let n = p[e.size], r = h[e.variant], i = b(t, e), a = `${Math.round(n.blobSizes[0] * m)}px`, o = i.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-gradient-${n + 1}`]: [
+			"radial-gradient(circle,",
+			`color-mix(in srgb, ${t} ${r.colorCore}, transparent) 0%,`,
+			`color-mix(in srgb, ${t} ${r.colorMid}, transparent) ${r.fadeMid},`,
+			`transparent ${r.fadeEnd})`
+		].join(" ")
+	}), {}), s = i.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-gradient-${n + 1}`]: `radial-gradient(circle, ${t} 0%, transparent ${r.fadeEnd})`
+	}), {}), c = n.blobSizes.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-blobSize-${n + 1}`]: `${Math.round(t * r.sizeScale)}px`
+	}), {}), l = r.opacities.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-opacity-${n + 1}`]: String(t)
+	}), {}), u = g.reduce((t, n, r) => ({
+		...t,
+		[`--SGradientBlobPulse-colorDelay-${r + 1}`]: `${Math.round(e.animationDuration * n.colorDelay)}ms`,
+		[`--SGradientBlobPulse-pulseDelay-${r + 1}`]: `${Math.round(e.animationDuration * n.pulseDelay)}ms`,
+		[`--SGradientBlobPulse-pulseDuration-${r + 1}`]: `${Math.round(e.animationDuration * n.pulseDuration)}ms`
+	}), {});
+	return {
+		[f]: `${n.blur}px`,
+		"--SGradientBlobPulse-colorDuration": `${Math.round(e.animationDuration * _)}ms`,
+		...o,
+		...c,
+		...l,
+		...u,
+		alignItems: "center",
+		display: "inline-flex",
+		isolation: "isolate",
+		justifyContent: "center",
+		minHeight: a,
+		minWidth: a,
+		position: "relative",
+		"@supports not (color: color-mix(in srgb, red, blue))": s
+	};
+}), S = u(c, {
+	name: "SGradientBlobPulse",
+	slot: "Blob",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: e.radius.full,
+	filter: `blur(var(${f}))`,
+	left: "50%",
+	mixBlendMode: "normal",
+	pointerEvents: "none",
+	position: "absolute",
+	top: "50%",
+	willChange: "transform",
+	zIndex: 0,
+	"@media (prefers-reduced-motion: reduce)": { animation: "none !important" },
+	...e.applyStyles("dark", { mixBlendMode: "screen" }),
+	variants: [...v.map((t, n) => ({
+		props: ({ ownerState: e }) => e.index === n,
+		style: {
+			animation: [`${t} var(--SGradientBlobPulse-pulseDuration-${n + 1}) ${e.transitions.easing.easeInOut} infinite`, `${y} var(--SGradientBlobPulse-colorDuration) linear infinite`].join(", "),
+			animationDelay: `var(--SGradientBlobPulse-pulseDelay-${n + 1}), var(--SGradientBlobPulse-colorDelay-${n + 1})`,
+			backgroundImage: `var(--SGradientBlobPulse-gradient-${n + 1})`,
+			height: `var(--SGradientBlobPulse-blobSize-${n + 1})`,
+			opacity: `var(--SGradientBlobPulse-opacity-${n + 1})`,
+			width: `var(--SGradientBlobPulse-blobSize-${n + 1})`
+		}
+	})), {
+		props: ({ ownerState: e }) => e.paused,
+		style: { animationPlayState: "paused" }
+	}]
+})), C = u(c, {
+	name: "SGradientBlobPulse",
+	slot: "Content",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	position: "relative",
+	zIndex: 1
+}), w = [
+	0,
+	1,
+	2
+], T = a.forwardRef(function(a, c) {
+	let l = d({
+		props: a,
+		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,
+		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, {
+		...j,
+		ref: M,
+		sx: [...e(A), ...e(v)],
+		children: [w.map((e) => {
+			let n = {
+				...T,
+				index: e
+			};
+			return /* @__PURE__ */ o(D, {
+				...r(D, t(g?.blob, n) ?? {}, n),
+				"aria-hidden": !0
+			}, e);
+		}), /* @__PURE__ */ o(O, {
+			...N,
+			children: f
+		})]
+	});
+});
+T.displayName = "SGradientBlobPulse";
+//#endregion
+export { T as SGradientBlobPulse, T as default };

package/dist/s-gradient-icon/index.d.ts

@@ -1,3 +1,3 @@
 export { default, default as SGradientIcon } from './s-gradient-icon';
-export type { AnimationEasing, CustomGradient, GradientDirection, GradientRole, SGradientIconOwnerState, SGradientIconProps, } from './s-gradient-icon';
+export type { AnimationEasing, CustomGradient, GradientRole, SGradientIconDirection, SGradientIconOwnerState, SGradientIconProps, } from './s-gradient-icon';
 export type {} from '../theme/component-augmentation';

package/dist/s-gradient-icon/s-gradient-icon.d.ts

@@ -6,7 +6,7 @@ type IconComponent = OverridableComponent<SvgIconTypeMap<object, 'svg'>> & {
     muiName: string;
 };
 /** Gradient direction options */
-export type GradientDirection = 'horizontal' | 'vertical' | 'diagonal' | 'radial';
+export type SGradientIconDirection = 'horizontal' | 'vertical' | 'diagonal' | 'radial';
 /** Semantic gradient roles */
 export type GradientRole = 'brand-primary' | 'brand-subtle' | 'custom';
 /** Animation easing options */
@@ -23,7 +23,7 @@ export interface CustomGradient {
     middlePosition?: number;
 }
 /** Props interface for SGradientIcon component */
-export interface SGradientIconProps extends Omit<SvgIconProps, 'component'> {
+export interface SGradientIconProps extends Omit<SvgIconProps, 'component' | 'direction'> {
     /** Whether the icon should show the gradient fill (hover state) */
     hovered?: boolean;
     /** The Material-UI icon component to render with gradient effect */
@@ -37,7 +37,7 @@ export interface SGradientIconProps extends Omit<SvgIconProps, 'component'> {
     /** Custom gradient colors when role is 'custom' */
     customGradient?: CustomGradient;
     /** Direction of the gradient (default: 'diagonal') */
-    gradientDirection?: GradientDirection;
+    direction?: SGradientIconDirection;
     /** Animation duration in milliseconds (default: 300) */
     animationDuration?: number;
     /** Animation easing function (default: 'ease') */
@@ -56,7 +56,7 @@ export type SGradientIconOwnerState = SGradientIconProps & {
     animationDuration: number;
     animationEasing: AnimationEasing;
     autoHover: boolean;
-    gradientDirection: GradientDirection;
+    direction: SGradientIconDirection;
     gradientRole: GradientRole;
     hovered: boolean;
     strokeWidth: number;

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

@@ -14,7 +14,7 @@ var l = o(t(({ IconComponent: e, ...t }, n) => /* @__PURE__ */ i(e, {
 	let u = c({
 		props: t,
 		name: "SGradientIcon"
-	}), { hovered: d = !1, IconComponent: f, sx: p, strokeWidth: m = 0, gradientRole: h = "brand-primary", customGradient: g, gradientDirection: _ = "diagonal", animationDuration: v = 300, animationEasing: y = "ease", autoHover: b = !1, gradientId: x, alwaysGradient: S = !1, fallbackColor: C, ...w } = u, T = s(), E = (T.vars ?? T).palette, D = n(), O = x ?? `gradient-${D}`, k = {
+	}), { hovered: d = !1, IconComponent: f, sx: p, strokeWidth: m = 0, gradientRole: h = "brand-primary", customGradient: g, direction: _ = "diagonal", animationDuration: v = 300, animationEasing: y = "ease", autoHover: b = !1, gradientId: x, alwaysGradient: S = !1, fallbackColor: C, ...w } = u, T = s(), E = (T.vars ?? T).palette, D = n(), O = x ?? `gradient-${D}`, k = {
 		"brand-primary": {
 			start: E.primary[400],
 			end: E.primary[700]
@@ -63,7 +63,7 @@ var l = o(t(({ IconComponent: e, ...t }, n) => /* @__PURE__ */ i(e, {
 		animationDuration: v,
 		animationEasing: y,
 		autoHover: b,
-		gradientDirection: _,
+		direction: _,
 		gradientRole: h,
 		hovered: d,
 		strokeWidth: m

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

@@ -17,8 +17,12 @@ export interface SIconButtonSlotProps {
     /** Props or an owner-state callback for the tooltip slot. */
     tooltip?: OwnerStateSlotProps<Omit<TooltipProps, 'children' | 'title'>>;
 }
-/** MUI IconButton with an optional tooltip slot. */
-export interface SIconButtonProps extends Omit<IconButtonProps, 'component'> {
+/**
+ * MUI IconButton with an optional tooltip slot. Setting `href` makes the
+ * underlying ButtonBase render an anchor, so icon-only links keep the button
+ * hit target and hover state.
+ */
+export interface SIconButtonProps extends Omit<IconButtonProps, 'component'>, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'> {
     /** Components used for internal slots. */
     slots?: SIconButtonSlots;
     /** Props or owner-state callbacks for internal slots. */

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

@@ -1,9 +1,10 @@
-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";
+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";
 //#region lib/s-icon-button/s-icon-button.tsx
 var s = e(n, {
 	name: "SIconButton",
@@ -22,26 +23,26 @@ var s = e(n, {
 function c(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var l = r.forwardRef(function(e, n) {
-	let r = t({
+var l = a.forwardRef(function(e, n) {
+	let a = t({
 		props: e,
 		name: "SIconButton"
-	}), { disabled: l = !1, slotProps: u, slots: d, tooltip: f, variant: p, ...m } = r, h = {
-		...r,
+	}), { disabled: l = !1, slotProps: u, slots: d, tooltip: f, variant: p, ...m } = a, h = {
+		...a,
 		disabled: l,
 		hasTooltip: f != null,
 		variant: p
-	}, 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, {
+	}, 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, {
 		...m,
 		"aria-label": v,
 		disabled: l,
 		ownerState: h,
 		ref: n
 	});
-	return f == null ? y : /* @__PURE__ */ i(g, {
+	return f == null ? y : /* @__PURE__ */ o(g, {
 		..._,
 		title: f,
-		children: l ? /* @__PURE__ */ i("span", { children: y }) : y
+		children: l ? /* @__PURE__ */ o("span", { children: y }) : y
 	});
 });
 l.displayName = "SIconButton";

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

@@ -1,38 +1,40 @@
-import { toSxArray as e } from "../utils/sx.js";
+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 "../theme/components/action-styles.js";
-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";
+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";
 //#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 = n(s, {
+var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0, Math.min(100, e)), p = e(l, {
 	name: "SImageComparison",
 	slot: "Root"
-})({}), m = i.forwardRef((n, m) => {
-	let h = r({
-		props: n,
+})({}), m = o.forwardRef((e, m) => {
+	let h = t({
+		props: e,
 		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] = i.useState(0), j = Math.min(k, Math.max(0, D.length - 1)), [M, N] = l({
+	}), { 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({
 		controlled: x,
 		default: f(S),
 		name: "SImageComparison",
 		state: "value"
-	}), 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) => {
+	}), 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) => {
 		let n = f(t);
 		N(n), C?.(e, n);
-	}, [C, N]), H = i.useCallback((e, t) => {
+	}, [C, N]), H = o.useCallback((e, t) => {
 		if (!L.current) return;
 		let n = L.current.getBoundingClientRect();
 		V(t, (e - n.left) / n.width * 100);
-	}, [V]), U = i.useCallback((e) => {
+	}, [V]), U = o.useCallback((e) => {
 		F && (e.preventDefault(), H(e.clientX, e));
-	}, [H, F]), W = i.useCallback((e) => {
+	}, [H, F]), W = o.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 = i.useCallback(() => {
+	}, K = o.useCallback(() => {
 		I(!1);
 	}, []), q = (e) => {
 		V(e.nativeEvent, Number(e.target.value));
@@ -72,10 +74,10 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 		isDragging: F,
 		sliderPosition: P
 	};
-	return i.useEffect(() => {
+	return o.useEffect(() => {
 		let e = Math.max(0, D.length - 1);
 		A((t) => Math.min(t, e));
-	}, [D.length]), i.useEffect(() => {
+	}, [D.length]), o.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", () => {
@@ -86,7 +88,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 		U,
 		W,
 		F
-	]), /* @__PURE__ */ o(p, {
+	]), /* @__PURE__ */ c(p, {
 		ownerState: Z,
 		ref: R,
 		sx: [{
@@ -96,12 +98,12 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 			overflow: "hidden",
 			touchAction: "pan-y",
 			userSelect: "none"
-		}, ...e(g)],
+		}, ...n(g)],
 		onMouseDown: Y,
 		onTouchStart: X,
 		...E,
 		children: [
-			/* @__PURE__ */ a(t, {
+			/* @__PURE__ */ s(a, {
 				src: v,
 				alt: b,
 				sx: {
@@ -116,7 +118,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 					}
 				} }
 			}),
-			/* @__PURE__ */ a(s, {
+			/* @__PURE__ */ s(l, {
 				sx: {
 					position: "absolute",
 					inset: 0,
@@ -126,7 +128,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__ */ a(t, {
+				children: D.length > 0 ? /* @__PURE__ */ s(a, {
 					src: D[j],
 					alt: O[j] ?? O[0],
 					slotProps: { image: {
@@ -135,7 +137,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 					} }
 				}) : null
 			}),
-			z && /* @__PURE__ */ a(s, {
+			z && /* @__PURE__ */ s(l, {
 				sx: {
 					position: "absolute",
 					left: 1,
@@ -156,7 +158,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__ */ a(c, {
+				children: D.map((e, t) => /* @__PURE__ */ s(u, {
 					"aria-label": `Show comparison image ${t + 1}`,
 					"aria-pressed": j === t,
 					tabIndex: B ? 0 : -1,
@@ -200,7 +202,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 					}
 				}, `${e}-${t}`))
 			}),
-			/* @__PURE__ */ o(s, {
+			/* @__PURE__ */ c(l, {
 				sx: {
 					position: "absolute",
 					top: 0,
@@ -209,7 +211,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 					cursor: "ew-resize",
 					left: `calc(${P}% - 3px)`
 				},
-				children: [/* @__PURE__ */ a(s, {
+				children: [/* @__PURE__ */ s(l, {
 					className: "SImageComparison-range",
 					component: "input",
 					type: "range",
@@ -234,7 +236,7 @@ var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0
 							outlineOffset: 2
 						}
 					}
-				}), /* @__PURE__ */ a(s, {
+				}), /* @__PURE__ */ s(l, {
 					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-CRfnMsNy.js";
+import { r as e } from "../theme-primitives-CXtaMdVj.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 { 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 };
+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 };