@solostylist/ui-kit 2.0.0 → 2.0.1

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-Cr28OQu3.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-CKneCEtr.js";
-import { t as n } from "../appendOwnerState-CELpvdMz.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-DNIEYdtL.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-Cr28OQu3.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-icon-button/s-icon-button.js

@@ -1,12 +1,11 @@
-import { t as e } from "../styled-Bog8QCl3.js";
-import { r as t } from "../elementAcceptingRef-DhkNAkFH.js";
-import { t as n } from "../useThemeProps-Cr28OQu3.js";
-import { t as r } from "../appendOwnerState-CELpvdMz.js";
-import { t as i } from "../Tooltip-DbCd6rgF.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(t, {
+var s = e(n, {
 	name: "SIconButton",
 	slot: "Root"
 })(({ theme: e, ownerState: t }) => {
@@ -23,26 +22,26 @@ var s = e(t, {
 function c(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var l = a.forwardRef(function(e, t) {
-	let a = n({
+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: t
+		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-Cr28OQu3.js";
-import { toSxArray as n } from "../utils/sx.js";
-import { t as r } from "../useForkRef-CKneCEtr.js";
+import { toSxArray as e } from "../utils/sx.js";
 import "../theme/components/action-styles.js";
-import { t as i } from "../useControlled-BeB0W_Ui.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-Dt_DT9b5.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-DNIEYdtL.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 };

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

@@ -1,2 +1,266 @@
-import { t as e } from "../s-image-viewer-DNIEYdtL.js";
-export { e as SImageViewer, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { DefaultMediaItem as t } from "./default-media-item.js";
+import { ImageViewerThumbnailDock as n } from "./image-viewer-thumbnail-dock.js";
+import { useImageViewerNavigation as r } from "./use-image-viewer-navigation.js";
+import { styled as i, useThemeProps as a } from "@mui/material/styles";
+import o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ChevronLeft as u, ChevronRight as d, Close as f } from "@mui/icons-material";
+import { Box as p, IconButton as m, Modal as h, Paper as g, Typography as _ } from "@mui/material";
+import { mergeSlotProps as v } from "@mui/material/utils";
+import { AnimatePresence as y, motion as b, useReducedMotion as x } from "framer-motion";
+//#region lib/s-image-viewer/s-image-viewer.tsx
+var S = i(h, {
+	name: "SImageViewer",
+	slot: "Root"
+})({}), C = o.forwardRef(function(i, o) {
+	let h = a({
+		props: i,
+		name: "SImageViewer"
+	}), { "aria-label": C, "aria-labelledby": w, selectedItem: T, defaultSelectedItem: E, open: D, onClose: O, onCloseButtonClick: k, onItemChange: A, mediaItems: j = [], renderMediaItem: M, showNavigation: N = !0, showThumbnailDock: P = !0, showCounter: F = !0, closeText: I = "Close", previousText: L = "Previous image", nextText: R = "Next image", getThumbnailLabel: z, slotProps: B, sx: V, ...H } = h, { currentSelectedItem: U, navigationEnabled: W, currentIndex: G, totalItems: K, selectItem: q, goToPrevious: J, goToNext: Y, handleKeyDown: X } = r({
+		selectedItem: T,
+		defaultSelectedItem: E,
+		onItemChange: A,
+		mediaItems: j,
+		showNavigation: N
+	}), Z = {
+		...h,
+		currentIndex: G,
+		navigationEnabled: W
+	}, Q = x();
+	return U ? /* @__PURE__ */ c(S, {
+		...H,
+		ownerState: Z,
+		open: D,
+		onClose: O,
+		ref: o,
+		sx: [(e) => ({ zIndex: e.zIndex.modal + 100 }), ...e(V)],
+		slotProps: {
+			...B,
+			backdrop: v(B?.backdrop, { sx: {
+				backdropFilter: "blur(8px)",
+				zIndex: (e) => e.zIndex.modal + 99
+			} })
+		},
+		children: /* @__PURE__ */ l(p, {
+			onKeyDown: X,
+			children: [/* @__PURE__ */ c(b.div, {
+				initial: Q ? !1 : { scale: .98 },
+				animate: { scale: 1 },
+				exit: Q ? void 0 : { scale: .98 },
+				transition: Q ? { duration: 0 } : {
+					type: "spring",
+					stiffness: 400,
+					damping: 30
+				},
+				children: /* @__PURE__ */ l(g, {
+					"aria-label": C,
+					"aria-labelledby": w,
+					"aria-modal": !0,
+					role: "dialog",
+					sx: {
+						position: "fixed",
+						inset: 0,
+						width: "100%",
+						minHeight: "100vh",
+						borderRadius: 0,
+						overflow: "hidden",
+						zIndex: (e) => e.zIndex.modal + 101
+					},
+					children: [
+						/* @__PURE__ */ c(p, {
+							sx: {
+								height: "100%",
+								display: "flex",
+								flexDirection: "column"
+							},
+							children: /* @__PURE__ */ c(p, {
+								sx: {
+									flex: 1,
+									p: {
+										xs: 1,
+										sm: 2,
+										md: 3
+									},
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									bgcolor: "background.default"
+								},
+								children: /* @__PURE__ */ c(y, {
+									initial: !Q,
+									mode: "wait",
+									children: /* @__PURE__ */ c(b.div, {
+										style: { position: "relative" },
+										initial: Q ? !1 : {
+											y: 20,
+											scale: .97
+										},
+										animate: {
+											y: 0,
+											scale: 1,
+											transition: Q ? { duration: 0 } : {
+												type: "spring",
+												stiffness: 500,
+												damping: 30,
+												mass: .5
+											}
+										},
+										exit: Q ? void 0 : {
+											y: 20,
+											scale: .97,
+											transition: { duration: .15 }
+										},
+										children: /* @__PURE__ */ l(g, {
+											onClick: (e) => e.stopPropagation(),
+											sx: {
+												position: "relative",
+												width: "100%",
+												aspectRatio: "16 / 9",
+												maxWidth: {
+													xs: "95%",
+													sm: "85%",
+													md: 960
+												},
+												height: "70vh",
+												borderRadius: 1,
+												border: "1px solid",
+												borderColor: "divider",
+												overflow: "hidden",
+												bgcolor: "grey.900"
+											},
+											children: [M ? M(U) : /* @__PURE__ */ c(t, { item: U }), (U.title || U.desc) && /* @__PURE__ */ l(p, {
+												sx: {
+													position: "absolute",
+													left: 0,
+													right: 0,
+													bottom: 0,
+													p: {
+														xs: 1.5,
+														sm: 2,
+														md: 3
+													},
+													color: "common.white",
+													gradient: "overlay.media"
+												},
+												onClick: (e) => e.stopPropagation(),
+												children: [U.title && /* @__PURE__ */ c(_, {
+													variant: "h6",
+													sx: { fontSize: {
+														xs: 14,
+														sm: 18,
+														md: 20
+													} },
+													children: U.title
+												}), U.desc && /* @__PURE__ */ c(_, {
+													variant: "body2",
+													sx: { mt: .5 },
+													children: U.desc
+												})]
+											})]
+										})
+									}, U.id)
+								})
+							})
+						}),
+						/* @__PURE__ */ c(m, {
+							"aria-label": I,
+							onClick: k,
+							sx: {
+								position: "absolute",
+								top: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								right: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								zIndex: (e) => e.zIndex.modal + 102
+							},
+							children: /* @__PURE__ */ c(f, {})
+						}),
+						F && W && /* @__PURE__ */ l(p, {
+							sx: {
+								position: "absolute",
+								top: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								left: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								zIndex: (e) => e.zIndex.modal + 102,
+								padding: 1,
+								px: 2,
+								fontSize: {
+									xs: 14,
+									sm: 16
+								},
+								color: "text.primary"
+							},
+							children: [
+								G + 1,
+								" / ",
+								K
+							]
+						}),
+						W && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(m, {
+							"aria-label": L,
+							onClick: (e) => {
+								e.stopPropagation(), J(e);
+							},
+							disabled: G === 0,
+							sx: {
+								position: "absolute",
+								left: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								top: "50%",
+								transform: "translateY(-50%)",
+								zIndex: (e) => e.zIndex.modal + 102,
+								"&:disabled": { opacity: .5 }
+							},
+							children: /* @__PURE__ */ c(u, {})
+						}), /* @__PURE__ */ c(m, {
+							"aria-label": R,
+							onClick: (e) => {
+								e.stopPropagation(), Y(e);
+							},
+							disabled: G === K - 1,
+							sx: {
+								position: "absolute",
+								right: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								top: "50%",
+								transform: "translateY(-50%)",
+								zIndex: (e) => e.zIndex.modal + 102,
+								"&:disabled": { opacity: .5 }
+							},
+							children: /* @__PURE__ */ c(d, {})
+						})] })
+					]
+				})
+			}), P && W && j.length > 1 && /* @__PURE__ */ c(n, {
+				mediaItems: j,
+				selectedItem: U,
+				onSelect: q,
+				renderMediaItem: M,
+				getThumbnailLabel: z
+			})]
+		})
+	}) : null;
+});
+C.displayName = "SImageViewer";
+//#endregion
+export { C as SImageViewer, C as default };