@solostylist/ui-kit 2.0.6 → 2.0.7

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

@@ -2,31 +2,42 @@ import { toSxArray as e } from "../utils/sx.js";
 import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
 import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
 import { SIconButton as r } from "../s-icon-button/s-icon-button.js";
-import { SCarousel as i } from "../s-carousel/s-carousel.js";
-import * as a from "react";
-import { createElement as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Box as l, ButtonBase as u, CircularProgress as d, styled as f, useTheme as ee, useThemeProps as te } from "@mui/material";
-import { mergeSlotProps as p, useControlled as ne, useEventCallback as m, useForkRef as h } from "@mui/material/utils";
+import * as i from "react";
+import { createElement as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Box as c, ButtonBase as l, CircularProgress as u, Typography as d, styled as f, useThemeProps as ee } from "@mui/material";
+import { mergeSlotProps as p, setRef as te, useControlled as ne, useEventCallback as m, useForkRef as h } from "@mui/material/utils";
 import g from "@mui/utils/appendOwnerState";
+import re from "@mui/icons-material/ImageOutlined";
 import _ from "@mui/icons-material/PlayArrowRounded";
 //#region lib/s-product-gallery/s-product-gallery.tsx
-var re = f(l, {
+var v = (e) => e === "start" || e === "end", y = (e, t) => `calc(${t ? e.spacing(5.5) : e.spacing(8)} + 4px)`, b = (e, t) => t ? e.spacing(1) : e.spacing(1.5), ie = f(c, {
 	name: "SProductGallery",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
-})({ width: "100%" }), ie = f(l, {
+})(({ ownerState: e, theme: t }) => {
+	let n = v(e.thumbnailsPosition), r = e.thumbnailsPosition === "end", i = e.variant === "compact";
+	return {
+		width: "100%",
+		...n && { [t.breakpoints.up("sm")]: {
+			position: "relative",
+			[r ? "paddingInlineEnd" : "paddingInlineStart"]: `calc(${y(t, i)} + ${b(t, i)})`
+		} }
+	};
+}), ae = f(c, {
 	name: "SProductGallery",
 	slot: "Stage",
 	shouldForwardProp: (e) => e !== "ownerState"
 })(({ ownerState: e, theme: t }) => ({
 	aspectRatio: String(e.aspectRatio),
 	backgroundColor: (t.vars ?? t).palette.background.paper,
-	borderRadius: t.radius.md,
+	borderRadius: e.variant === "compact" ? t.radius.sm : t.radius.md,
+	flex: 1,
+	minWidth: 0,
 	overflow: "hidden",
 	position: "relative",
 	width: "100%"
-})), ae = f(l, {
+})), oe = f(c, {
 	name: "SProductGallery",
 	slot: "Media",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -40,14 +51,10 @@ var re = f(l, {
 		gridArea: "1 / 1",
 		minWidth: 0
 	}
-}), oe = f(n, {
+}), se = f(n, {
 	name: "SProductGallery",
 	slot: "Image",
 	shouldForwardProp: (e) => e !== "ownerState"
-})({}), se = f(i, {
-	name: "SProductGallery",
-	slot: "Carousel",
-	shouldForwardProp: (e) => e !== "ownerState"
 })({}), ce = f("video", {
 	name: "SProductGallery",
 	slot: "Video",
@@ -61,9 +68,10 @@ var re = f(l, {
 	objectFit: "cover",
 	position: "absolute",
 	width: "100%"
-}), le = f(l, {
+}), le = f(c, {
 	name: "SProductGallery",
-	slot: "VideoFrame"
+	slot: "VideoFrame",
+	shouldForwardProp: (e) => e !== "ownerState"
 })({
 	height: "100%",
 	minHeight: 0,
@@ -71,7 +79,8 @@ var re = f(l, {
 	width: "100%"
 }), ue = f(r, {
 	name: "SProductGallery",
-	slot: "VideoPlayButton"
+	slot: "VideoPlayButton",
+	shouldForwardProp: (e) => e !== "ownerState"
 })(({ theme: e }) => {
 	let t = (e.vars ?? e).palette;
 	return {
@@ -88,68 +97,96 @@ var re = f(l, {
 		},
 		"& svg": { fontSize: e.typography.pxToRem(32) }
 	};
-}), de = f(l, {
+}), de = f(c, {
 	name: "SProductGallery",
 	slot: "Thumbnails",
 	shouldForwardProp: (e) => e !== "ownerState"
-})(({ theme: e }) => ({
-	marginTop: e.spacing(1),
-	width: "100%"
-})), fe = f(u, {
+})(({ ownerState: e, theme: t }) => {
+	let n = v(e.thumbnailsPosition), r = e.thumbnailsPosition === "end", i = e.variant === "compact";
+	return {
+		display: "flex",
+		flexDirection: "row",
+		gap: i ? t.spacing(.5) : t.spacing(1),
+		marginTop: i ? t.spacing(.75) : t.spacing(1),
+		maxWidth: "100%",
+		overflowX: "auto",
+		overflowY: "hidden",
+		padding: "2px",
+		scrollbarWidth: "none",
+		width: "100%",
+		"&::-webkit-scrollbar": { display: "none" },
+		...n && { [t.breakpoints.up("sm")]: {
+			flexDirection: "column",
+			gap: i ? t.spacing(.5) : t.spacing(.75),
+			insetBlock: 0,
+			[r ? "insetInlineEnd" : "insetInlineStart"]: 0,
+			marginTop: 0,
+			maxWidth: "none",
+			overflowX: "hidden",
+			overflowY: "auto",
+			position: "absolute",
+			width: y(t, i)
+		} }
+	};
+}), fe = f(l, {
 	name: "SProductGallery",
 	slot: "Thumbnail",
 	shouldForwardProp: (e) => e !== "ownerState"
-})(({ theme: e }) => ({
-	backgroundColor: (e.vars ?? e).palette.background.paper,
-	boxSizing: "border-box",
-	borderRadius: e.radius.md,
-	display: "block",
-	height: e.spacing(7),
-	minHeight: e.spacing(5.5),
-	minWidth: e.spacing(5.5),
-	opacity: .72,
-	overflow: "hidden",
-	padding: 0,
-	position: "relative",
-	transition: e.transitions.create("opacity"),
-	marginInline: e.spacing(.5),
-	width: `calc(100% - ${e.spacing(1)})`,
-	[e.breakpoints.down("sm")]: { height: e.spacing(6.5) },
-	"&.Mui-focusVisible": {
-		outline: 0,
-		boxShadow: `0 0 0 2px ${(e.vars ?? e).palette.primary.main}`,
-		zIndex: 2
-	},
-	"&::after": {
-		border: "2px solid transparent",
-		borderRadius: "inherit",
-		content: "\"\"",
-		inset: 0,
-		pointerEvents: "none",
-		position: "absolute",
-		transition: e.transitions.create("border-color"),
-		zIndex: 1
-	},
-	"@media (hover: hover) and (pointer: fine)": { "&:hover": { opacity: 1 } },
-	"@media (prefers-reduced-motion: reduce)": {
-		transition: "none",
-		"&::after": { transition: "none" }
-	},
-	variants: [{
-		props: ({ ownerState: e }) => e.selected,
-		style: {
-			"&::after": { borderColor: (e.vars ?? e).palette.primary.main },
-			opacity: 1
-		}
-	}]
-})), pe = f(l, {
+})(({ ownerState: e, theme: t }) => {
+	let n = e.variant === "compact", r = n ? t.spacing(5.5) : t.spacing(8);
+	return {
+		aspectRatio: "1",
+		backgroundColor: (t.vars ?? t).palette.background.paper,
+		borderRadius: n ? t.radius.sm : t.radius.md,
+		boxSizing: "border-box",
+		display: "block",
+		flexShrink: 0,
+		height: r,
+		minHeight: r,
+		minWidth: r,
+		opacity: t.interaction.mediaIdleOpacity,
+		overflow: "hidden",
+		padding: 0,
+		position: "relative",
+		transition: t.transitions.create(["opacity", "box-shadow"]),
+		width: r,
+		"&.Mui-focusVisible": {
+			boxShadow: `0 0 0 2px ${(t.vars ?? t).palette.primary.main}`,
+			outline: 0,
+			zIndex: 2
+		},
+		"&::after": {
+			border: "2px solid transparent",
+			borderRadius: "inherit",
+			content: "\"\"",
+			inset: 0,
+			pointerEvents: "none",
+			position: "absolute",
+			transition: t.transitions.create("border-color"),
+			zIndex: 1
+		},
+		"@media (hover: hover) and (pointer: fine)": { "&:hover": { opacity: 1 } },
+		"@media (prefers-reduced-motion: reduce)": {
+			transition: "none",
+			"&::after": { transition: "none" }
+		},
+		variants: [{
+			props: ({ ownerState: e }) => e.selected,
+			style: {
+				"&::after": { borderColor: (t.vars ?? t).palette.primary.main },
+				opacity: 1
+			}
+		}]
+	};
+}), pe = f(c, {
 	name: "SProductGallery",
-	slot: "VideoIndicator"
+	slot: "VideoIndicator",
+	shouldForwardProp: (e) => e !== "ownerState"
 })(({ theme: e }) => {
 	let t = (e.vars ?? e).palette;
 	return {
 		alignItems: "center",
-		backgroundColor: e.alpha(t.common.black, .58),
+		backgroundColor: t.blackAlpha.medium,
 		borderRadius: e.radius.full,
 		boxShadow: e.shadows[2],
 		color: t.common.white,
@@ -165,151 +202,182 @@ var re = f(l, {
 		zIndex: 2,
 		"& svg": { fontSize: e.typography.pxToRem(20) }
 	};
-}), v = 1, me = 6;
-function he(e, t) {
+}), me = f(c, {
+	name: "SProductGallery",
+	slot: "Empty",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette;
+	return {
+		alignItems: "center",
+		color: t.text.secondary,
+		display: "flex",
+		flexDirection: "column",
+		height: "100%",
+		inset: 0,
+		justifyContent: "center",
+		padding: e.spacing(2),
+		position: "absolute",
+		width: "100%",
+		"& svg": {
+			color: t.action.disabled,
+			fontSize: e.typography.pxToRem(40),
+			marginBottom: e.spacing(.5)
+		}
+	};
+}), x = 1;
+function S(e, t) {
 	return e !== void 0 && Number.isFinite(e) && e > 0 ? e : t;
 }
-function ge(e, t) {
-	return typeof e == "number" ? he(e, typeof t == "number" ? t : v) : typeof e == "string" && e.trim() ? e : t;
+function he(e, t) {
+	return typeof e == "number" ? S(e, typeof t == "number" ? t : x) : typeof e == "string" && e.trim() ? e : t;
 }
-function _e(e) {
+function ge(e) {
 	return e.type === "video" ? e.thumbnailSrc ?? e.poster ?? "" : e.thumbnailSrc ?? e.src;
 }
-function y(e) {
+function C(e) {
 	return e.type === "video" ? e.ariaLabel : e.alt;
 }
-function b(e) {
+function w(e) {
 	return e ? `${e.type ?? "image"}:${e.id}:${e.src}` : "";
 }
-var ve = (e, t, n) => {
-	let r = y(e);
+var _e = (e, t, n) => {
+	let r = C(e);
 	return r ? `Show ${r}, ${t + 1} of ${n}` : `Show ${e.type === "video" ? "video" : "image"} ${t + 1} of ${n}`;
 };
-function ye(e, t, n) {
-	return `${y(e) || (e.type === "video" ? "Product video" : "Product image")} ${t + 1} of ${n}`;
+function ve(e, t, n) {
+	return `${C(e) || (e.type === "video" ? "Product video" : "Product image")} ${t + 1} of ${n}`;
 }
-function be(e, t) {
-	typeof e == "function" ? e(t) : e && (e.current = t);
-}
-var x = a.forwardRef(function(r, i) {
-	let { aspectRatio: l = v, defaultValue: u, getThumbnailAriaLabel: f = ve, items: y, onChange: x, slotProps: S, slots: C, sx: w, thumbnailsLabel: T = "Choose product media", thumbnailsToShow: xe = me, value: E, ...D } = te({
+var T = i.forwardRef(function(r, c) {
+	let { aspectRatio: l = x, defaultValue: f, emptyText: v = "No product media", getThumbnailAriaLabel: y = _e, items: b, onChange: S, slotProps: C, slots: T, sx: E, thumbnailsLabel: D = "Choose product media", thumbnailsPosition: ye = "bottom", value: O, variant: be = "standard", ...k } = ee({
 		props: r,
 		name: "SProductGallery"
-	}), Se = ee(), Ce = ge(l, v), O = Math.max(1, Math.floor(he(xe, me))), we = a.useRef(y[0]?.id ?? ""), Te = a.useRef(u === void 0), [k, A] = ne({
-		controlled: E,
-		default: u ?? we.current,
+	}), xe = he(l, x), Se = i.useRef(b[0]?.id ?? ""), Ce = i.useRef(f === void 0), [A, j] = ne({
+		controlled: O,
+		default: f ?? Se.current,
 		name: "SProductGallery",
 		state: "value"
-	}), j = E !== void 0, M = y.findIndex((e) => e.id === k), Ee = !j && y.length > 0 && M < 0 && (k !== "" || Te.current), N = M >= 0 ? M : Ee ? 0 : -1, P = y[N] ?? null, F = P?.id ?? "", De = b(P), I = P?.type === "video" ? De : "", L = a.useRef(null), R = a.useRef(null), z = a.useRef(!1), [B, V] = a.useState({
+	}), M = O !== void 0, N = b.findIndex((e) => e.id === A), we = !M && b.length > 0 && N < 0 && (A !== "" || Ce.current), P = N >= 0 ? N : we ? 0 : -1, F = b[P] ?? null, I = F?.id ?? "", Te = w(F), L = F?.type === "video" ? Te : "", R = i.useRef([]), z = i.useRef(!1), B = i.useRef(null), V = i.useRef(!1), [H, U] = i.useState({
 		mediaKey: "",
 		loading: !1,
 		started: !1
-	}), H = B.mediaKey === I ? B : null, U = H?.loading ?? !1, W = H?.started ?? !1, G = a.useId(), K = {
-		...D,
-		aspectRatio: Ce,
-		activeItem: P,
-		activeIndex: N,
-		defaultValue: u,
-		getThumbnailAriaLabel: f,
-		items: y,
-		onChange: x,
-		sx: w,
-		thumbnailsLabel: T,
-		thumbnailsToShow: O,
-		value: F
-	}, q = t(S?.video, K), Oe = h(R, q?.ref);
-	a.useEffect(() => {
-		!j && P && k !== F && A(F);
+	}), W = H.mediaKey === L ? H : null, G = W?.loading ?? !1, K = W?.started ?? !1, q = i.useId(), J = {
+		...k,
+		aspectRatio: xe,
+		activeItem: F,
+		activeIndex: P,
+		defaultValue: f,
+		emptyText: v,
+		getThumbnailAriaLabel: y,
+		items: b,
+		onChange: S,
+		sx: E,
+		thumbnailsLabel: D,
+		thumbnailsPosition: ye,
+		value: I,
+		variant: be
+	}, Y = t(C?.video, J), Ee = h(B, Y?.ref);
+	i.useEffect(() => {
+		!M && F && A !== I && j(I);
 	}, [
-		P,
 		F,
+		I,
+		M,
 		j,
-		A,
-		k
-	]), a.useEffect(() => {
-		N >= 0 && L.current?.scrollTo(N);
-	}, [N]), a.useEffect(() => {
-		z.current = !1;
-	}, [I]);
-	let ke = m((e, t) => {
-		let n = y[t];
-		!n || n.id === P?.id || (A(n.id), x?.(e, n.id));
-	}), Ae = m(() => {
-		let e = R.current;
-		if (!e || P?.type !== "video") return;
-		let t = b(P);
-		z.current = !0, V({
+		A
+	]), i.useEffect(() => {
+		if (P < 0) return;
+		if (!z.current) {
+			z.current = !0;
+			return;
+		}
+		let e = typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		R.current[P]?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest",
+			behavior: e ? "auto" : "smooth"
+		});
+	}, [P]), i.useEffect(() => {
+		V.current = !1, U({
+			mediaKey: "",
+			loading: !1,
+			started: !1
+		});
+	}, [L]);
+	let De = m((e, t) => {
+		let n = b[t];
+		!n || n.id === F?.id || (j(n.id), S?.(e, n.id));
+	}), Oe = m(() => {
+		let e = B.current;
+		if (!e || F?.type !== "video") return;
+		let t = w(F);
+		V.current = !0, U({
 			mediaKey: t,
 			loading: !0,
 			started: !1
 		}), e.play().catch(() => {
-			z.current = !1, V((n) => R.current === e && n.mediaKey === t ? {
+			V.current = !1, U((n) => B.current === e && n.mediaKey === t ? {
 				...n,
 				loading: !1,
 				started: !1
 			} : n);
 		});
-	}), je = C?.root ?? re, Me = C?.stage ?? ie, Ne = C?.media ?? ae, Pe = C?.image ?? oe, Fe = C?.video ?? ce, J = C?.thumbnails ?? de, Ie = C?.carousel ?? se, Le = C?.thumbnail ?? fe, { ref: Re, sx: ze, ...Y } = g(je, p(t(S?.root, K), D), K), Be = h(Re, i), X = g(Me, t(S?.stage, K) ?? {}, K), Ve = g(Ne, t(S?.media, K) ?? {}, K), Z = g(J, t(S?.thumbnails, K) ?? {}, K), He = t(S?.carousel, K), Q = Math.min(y.length, O), $ = He?.slotProps, Ue = g(Ie, p(He, {
-		arrows: y.length > Q,
-		slotProps: {
-			...$,
-			viewport: {
-				...$?.viewport,
-				sx: [{ py: .5 }, ...e($?.viewport?.sx)]
-			}
-		}
-	}), K), We = () => {
-		if (!P) return null;
-		if (P.type === "video") {
-			let e = b(P), t = (e) => e.currentTarget === R.current, { children: n, controls: r = !0, ...i } = g(Fe, p(q, {
+	}), ke = T?.root ?? ie, Ae = T?.stage ?? ae, je = T?.media ?? oe, Me = T?.image ?? se, Ne = T?.video ?? ce, X = T?.videoFrame ?? le, Pe = T?.videoPlayButton ?? ue, Fe = T?.videoIndicator ?? pe, Ie = T?.thumbnails ?? de, Le = T?.thumbnail ?? fe, Re = T?.empty ?? me, { ref: ze, sx: Be, ...Z } = g(ke, p(t(C?.root, J), k), J), Ve = h(ze, c), Q = g(Ae, t(C?.stage, J) ?? {}, J), He = g(je, t(C?.media, J) ?? {}, J), $ = g(Ie, t(C?.thumbnails, J) ?? {}, J), Ue = g(Re, t(C?.empty, J) ?? {}, J), We = t(C?.videoFrame, J), Ge = t(C?.videoPlayButton, J), Ke = t(C?.videoIndicator, J), qe = () => {
+		if (!F) return /* @__PURE__ */ s(Re, {
+			...Ue,
+			children: [/* @__PURE__ */ o(re, {}), /* @__PURE__ */ o(d, {
+				variant: "body2",
+				children: v
+			})]
+		});
+		if (F.type === "video") {
+			let e = w(F), t = (e) => e.currentTarget === B.current, { children: n, controls: r = !0, ...i } = g(Ne, p(Y, {
 				controls: !0,
 				onCanPlay: (n) => {
-					t(n) && V((t) => t.mediaKey === e && t.started ? {
+					t(n) && U((t) => t.mediaKey === e && t.started ? {
 						...t,
 						loading: !1
 					} : t);
 				},
 				onEnded: (n) => {
-					t(n) && (z.current = !1, V({
-						mediaKey: e,
-						loading: !1,
-						started: !1
-					}));
+					t(n) && (V.current = !1, U((t) => t.mediaKey === e ? {
+						...t,
+						loading: !1
+					} : t));
 				},
 				onError: (n) => {
-					t(n) && (z.current = !1, V({
+					t(n) && (V.current = !1, U({
 						mediaKey: e,
 						loading: !1,
 						started: !1
 					}));
 				},
 				onPause: (n) => {
-					t(n) && (z.current = !1, V({
-						mediaKey: e,
-						loading: !1,
-						started: !1
-					}));
+					t(n) && (V.current = !1, U((t) => t.mediaKey === e ? {
+						...t,
+						loading: !1
+					} : t));
 				},
 				onPlay: (n) => {
-					t(n) && V({
+					t(n) && U((t) => ({
 						mediaKey: e,
 						loading: !0,
-						started: !1
-					});
+						started: t.mediaKey === e ? t.started : !1
+					}));
 				},
 				onPlaying: (n) => {
 					if (!t(n)) return;
-					let r = n.currentTarget, i = z.current;
-					z.current = !1, V({
+					let r = n.currentTarget, i = V.current;
+					V.current = !1, U({
 						mediaKey: e,
 						loading: !1,
 						started: !0
 					}), i && requestAnimationFrame(() => {
-						R.current === r && r.focus({ preventScroll: !0 });
+						B.current === r && r.focus({ preventScroll: !0 });
 					});
 				},
 				onWaiting: (n) => {
-					t(n) && V((t) => ({
+					t(n) && U((t) => ({
 						mediaKey: e,
 						loading: !0,
 						started: t.mediaKey === e && t.started
@@ -317,111 +385,99 @@ var x = a.forwardRef(function(r, i) {
 				},
 				playsInline: !0,
 				preload: "metadata"
-			}), K);
-			return /* @__PURE__ */ c(le, {
-				"aria-busy": U || void 0,
-				children: [/* @__PURE__ */ s(Fe, {
+			}), J), a = g(X, p(We, { "aria-busy": G || void 0 }), J), c = g(Pe, p(Ge, {
+				"aria-busy": G || void 0,
+				"aria-label": G ? `Loading ${F.ariaLabel}` : `Play ${F.ariaLabel}`,
+				disabled: G,
+				onClick: Oe,
+				variant: "overlay"
+			}), J);
+			return /* @__PURE__ */ s(X, {
+				...a,
+				children: [/* @__PURE__ */ o(Ne, {
 					...i,
-					"aria-label": P.ariaLabel,
-					controls: r && W,
-					poster: P.poster,
-					ref: Oe,
-					src: P.src,
+					"aria-label": F.ariaLabel,
+					controls: r && K,
+					poster: F.poster,
+					ref: Ee,
+					src: F.src,
 					children: n
-				}), !W || U ? /* @__PURE__ */ s(ue, {
-					"aria-busy": U || void 0,
-					"aria-label": U ? `Loading ${P.ariaLabel}` : `Play ${P.ariaLabel}`,
-					disabled: U,
-					onClick: Ae,
-					variant: "overlay",
-					children: U ? /* @__PURE__ */ s(d, {
-						"aria-label": `Loading ${P.ariaLabel}`,
+				}), K ? null : /* @__PURE__ */ o(Pe, {
+					...c,
+					children: G ? /* @__PURE__ */ o(u, {
+						"aria-label": `Loading ${F.ariaLabel}`,
 						color: "inherit",
-						size: 28
-					}) : /* @__PURE__ */ s(_, {})
-				}) : null]
-			}, `${P.type}:${P.id}:${P.src}`);
+						size: 32
+					}) : /* @__PURE__ */ o(_, {})
+				})]
+			}, e);
 		}
-		let { slotProps: e, ...n } = p(t(S?.image, K), { variant: "rectangular" }), r = g(Pe, n, K), i = {
+		let { slotProps: e, ...n } = p(t(C?.image, J), { variant: "rectangular" }), r = g(Me, n, J), i = {
 			...e,
 			image: p(e?.image, { sx: { objectFit: "cover" } })
 		};
-		return /* @__PURE__ */ o(Pe, {
+		return /* @__PURE__ */ a(Me, {
 			...r,
-			alt: P.alt,
-			key: `${P.type ?? "image"}:${P.id}:${P.src}`,
+			alt: F.alt,
+			key: `${F.type ?? "image"}:${F.id}:${F.src}`,
 			slotProps: i,
-			src: P.src
+			src: F.src
 		});
+	}, Je = (e, r) => {
+		let i = r === P, a = {
+			...J,
+			index: r,
+			item: e,
+			selected: i
+		}, c = t(C?.thumbnail, a), { ref: l, ...u } = g(Le, c ?? {}, a), d = `${q}-thumbnail-${r}`, f = g(Fe, p(Ke, { "aria-hidden": !0 }), J);
+		return /* @__PURE__ */ s(Le, {
+			"aria-controls": q,
+			"aria-label": y(e, r, b.length),
+			"aria-pressed": i,
+			id: d,
+			...u,
+			onClick: (e) => {
+				c?.onClick?.(e), e.defaultPrevented || De(e, r);
+			},
+			ref: (e) => {
+				R.current[r] = e, te(l, e);
+			},
+			children: [/* @__PURE__ */ o(n, {
+				alt: "",
+				src: ge(e),
+				variant: "rectangular",
+				slotProps: { image: { sx: { objectFit: "cover" } } }
+			}), e.type === "video" ? /* @__PURE__ */ o(Fe, {
+				...f,
+				children: /* @__PURE__ */ o(_, {})
+			}) : null]
+		}, e.id);
 	};
-	return /* @__PURE__ */ c(je, {
-		...Y,
-		"aria-label": Y["aria-label"] ?? "Product media gallery",
-		"aria-roledescription": Y["aria-roledescription"] ?? "carousel",
-		ref: Be,
-		role: Y.role ?? "group",
-		sx: [...e(ze), ...e(w)],
-		children: [/* @__PURE__ */ s(Me, {
-			...X,
-			"aria-hidden": X["aria-hidden"] ?? !P,
-			"aria-label": X["aria-label"] ?? (P ? ye(P, N, y.length) : void 0),
-			"aria-roledescription": X["aria-roledescription"] ?? (P ? "slide" : void 0),
-			id: G,
-			role: X.role ?? (P ? "group" : void 0),
-			children: /* @__PURE__ */ s(Ne, {
-				...Ve,
-				children: We()
-			})
-		}), y.length > 1 ? /* @__PURE__ */ s(J, {
-			...Z,
-			"aria-label": Z["aria-label"] ?? T,
-			role: Z.role ?? "group",
-			children: /* @__PURE__ */ s(Ie, {
-				...Ue,
-				apiRef: L,
-				autoplay: !1,
-				centerMode: !1,
-				infinite: !1,
-				responsive: [{
-					breakpoint: Se.breakpoints.values.sm,
-					settings: { slidesToShow: Math.max(Math.ceil(Q / 2), 1) }
-				}],
-				slidesToShow: Q,
-				spaceBetween: 0,
-				children: y.map((e, r) => {
-					let i = r === N, a = {
-						...K,
-						index: r,
-						item: e,
-						selected: i
-					}, o = t(S?.thumbnail, a), { ref: l, ...u } = g(Le, o ?? {}, a), d = `${G}-thumbnail-${r}`;
-					return /* @__PURE__ */ c(Le, {
-						...u,
-						"aria-controls": G,
-						"aria-label": f(e, r, y.length),
-						"aria-pressed": i,
-						id: d,
-						onClick: (e) => {
-							o?.onClick?.(e), e.defaultPrevented || ke(e, r);
-						},
-						ref: (e) => {
-							be(l, e);
-						},
-						children: [/* @__PURE__ */ s(n, {
-							alt: "",
-							src: _e(e),
-							variant: "rectangular",
-							slotProps: { image: { sx: { objectFit: "cover" } } }
-						}), e.type === "video" ? /* @__PURE__ */ s(pe, {
-							"aria-hidden": !0,
-							children: /* @__PURE__ */ s(_, {})
-						}) : null]
-					}, e.id);
-				})
+	return /* @__PURE__ */ s(ke, {
+		...Z,
+		"aria-label": Z["aria-label"] ?? "Product media gallery",
+		"aria-roledescription": Z["aria-roledescription"] ?? "carousel",
+		ref: Ve,
+		role: Z.role ?? "group",
+		sx: [...e(Be), ...e(E)],
+		children: [/* @__PURE__ */ o(Ae, {
+			...Q,
+			"aria-label": Q["aria-label"] ?? (F ? ve(F, P, b.length) : void 0),
+			"aria-roledescription": Q["aria-roledescription"] ?? (F ? "slide" : void 0),
+			id: q,
+			role: Q.role ?? (F ? "group" : void 0),
+			children: /* @__PURE__ */ o(je, {
+				...He,
+				children: qe()
 			})
+		}), b.length > 1 ? /* @__PURE__ */ o(Ie, {
+			...$,
+			"aria-label": $["aria-label"] ?? D,
+			role: $.role ?? "group",
+			children: b.map((e, t) => Je(e, t))
 		}) : null]
 	});
 });
-x.displayName = "SProductGallery";
+T.displayName = "SProductGallery";
 //#endregion
-export { x as SProductGallery, x as default };
+export { T as SProductGallery, T as default };