@solostylist/ui-kit 1.0.204 → 1.0.205

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

@@ -1,34 +1,34 @@
-import "../createTheme-CMuiGmV-.js";
-import { t as e } from "../jsx-runtime-V-UOMaX1.js";
-import { t } from "../ChevronLeft-Djq7TyZX.js";
-import { t as n } from "../ChevronRight-BgWjUtu8.js";
-import r from "../s-lazy-image/s-lazy-image.js";
-import * as i from "react";
-import { Box as a, IconButton as o } from "@mui/material";
+import "../createTheme-DuS5_nJb.js";
+import { t as e } from "../ChevronLeft-C7DUyLoc.js";
+import { t } from "../ChevronRight-VFk57Tte.js";
+import n from "../s-lazy-image/s-lazy-image.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o, IconButton as s } from "@mui/material";
 //#region lib/s-image-comparison/s-image-comparison.tsx
-var s = e(), c = i.forwardRef(({ sx: e, leftImage: c, rightImage: l, altLeft: u = "Left image", altRight: d = "Right image", initialPosition: f = 50, ...p }, m) => {
-	let h = Array.isArray(c) ? c : [c], g = Array.isArray(u) ? u : [u], [_, v] = i.useState(0), [y, b] = i.useState(f), [x, S] = i.useState(!1), C = i.useRef(null), w = h.length > 1, T = (e) => {
-		if (!C.current) return;
-		let t = C.current.getBoundingClientRect(), n = (e - t.left) / t.width * 100;
-		n = Math.max(0, Math.min(100, n)), b(n);
-	}, E = i.useCallback((e) => {
-		x && T(e.clientX);
-	}, [x]), D = i.useCallback((e) => {
-		x && T(e.touches[0].clientX);
-	}, [x]), O = () => {
-		S(!0);
-	}, k = () => {
-		S(!1);
-	}, A = y === 0 || y === 100;
-	return i.useEffect(() => (x ? (document.addEventListener("mousemove", E), document.addEventListener("touchmove", D), document.addEventListener("mouseup", k), document.addEventListener("touchend", k), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
-		document.removeEventListener("mousemove", E), document.removeEventListener("touchmove", D), document.removeEventListener("mouseup", k), document.removeEventListener("touchend", k), document.body.style.cursor = "";
+var c = r.forwardRef(({ sx: c, leftImage: l, rightImage: u, altLeft: d = "Left image", altRight: f = "Right image", initialPosition: p = 50, ...m }, h) => {
+	let g = Array.isArray(l) ? l : [l], _ = Array.isArray(d) ? d : [d], [v, y] = r.useState(0), [b, x] = r.useState(p), [S, C] = r.useState(!1), w = r.useRef(null), T = g.length > 1, E = (e) => {
+		if (!w.current) return;
+		let t = w.current.getBoundingClientRect(), n = (e - t.left) / t.width * 100;
+		n = Math.max(0, Math.min(100, n)), x(n);
+	}, D = r.useCallback((e) => {
+		S && E(e.clientX);
+	}, [S]), O = r.useCallback((e) => {
+		S && E(e.touches[0].clientX);
+	}, [S]), k = () => {
+		C(!0);
+	}, A = () => {
+		C(!1);
+	}, j = b === 0 || b === 100;
+	return r.useEffect(() => (S ? (document.addEventListener("mousemove", D), document.addEventListener("touchmove", O), document.addEventListener("mouseup", A), document.addEventListener("touchend", A), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
+		document.removeEventListener("mousemove", D), document.removeEventListener("touchmove", O), document.removeEventListener("mouseup", A), document.removeEventListener("touchend", A), document.body.style.cursor = "";
 	}), [
-		x,
-		E,
-		D
-	]), /* @__PURE__ */ (0, s.jsxs)(a, {
+		S,
+		D,
+		O
+	]), /* @__PURE__ */ a(o, {
 		ref: (e) => {
-			C.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
+			w.current = e, typeof h == "function" ? h(e) : h && (h.current = e);
 		},
 		sx: {
 			position: "relative",
@@ -36,15 +36,15 @@ var s = e(), c = i.forwardRef(({ sx: e, leftImage: c, rightImage: l, altLeft: u
 			height: "100%",
 			overflow: "hidden",
 			userSelect: "none",
-			...e
+			...c
 		},
-		onMouseDown: O,
-		onTouchStart: O,
-		...p,
+		onMouseDown: k,
+		onTouchStart: k,
+		...m,
 		children: [
-			/* @__PURE__ */ (0, s.jsx)(r, {
-				src: l,
-				alt: d,
+			/* @__PURE__ */ i(n, {
+				src: u,
+				alt: f,
 				style: {
 					position: "absolute",
 					inset: 0,
@@ -55,7 +55,7 @@ var s = e(), c = i.forwardRef(({ sx: e, leftImage: c, rightImage: l, altLeft: u
 				},
 				draggable: !1
 			}),
-			/* @__PURE__ */ (0, s.jsx)(a, {
+			/* @__PURE__ */ i(o, {
 				sx: {
 					position: "absolute",
 					inset: 0,
@@ -63,11 +63,11 @@ var s = e(), c = i.forwardRef(({ sx: e, leftImage: c, rightImage: l, altLeft: u
 					height: "100%",
 					overflow: "hidden",
 					pointerEvents: "none",
-					clipPath: `polygon(0 0, ${y}% 0, ${y}% 100%, 0 100%)`
+					clipPath: `polygon(0 0, ${b}% 0, ${b}% 100%, 0 100%)`
 				},
-				children: /* @__PURE__ */ (0, s.jsx)(r, {
-					src: h[_],
-					alt: g[_] ?? g[0],
+				children: /* @__PURE__ */ i(n, {
+					src: g[v],
+					alt: _[v] ?? _[0],
 					style: {
 						width: "100%",
 						height: "100%",
@@ -76,7 +76,7 @@ var s = e(), c = i.forwardRef(({ sx: e, leftImage: c, rightImage: l, altLeft: u
 					draggable: !1
 				})
 			}),
-			w && /* @__PURE__ */ (0, s.jsx)(a, {
+			T && /* @__PURE__ */ i(o, {
 				sx: {
 					position: "absolute",
 					left: 16,
@@ -84,55 +84,55 @@ var s = e(), c = i.forwardRef(({ sx: e, leftImage: c, rightImage: l, altLeft: u
 					display: "flex",
 					gap: 1,
 					zIndex: 1,
-					pointerEvents: x ? "none" : "auto",
-					opacity: y > 10 ? 1 : 0,
+					pointerEvents: S ? "none" : "auto",
+					opacity: b > 10 ? 1 : 0,
 					transition: "opacity 0.2s"
 				},
 				onClick: (e) => e.stopPropagation(),
 				onMouseDown: (e) => e.stopPropagation(),
-				children: h.map((e, t) => /* @__PURE__ */ (0, s.jsx)(a, {
+				children: g.map((e, t) => /* @__PURE__ */ i(o, {
 					onClick: (e) => {
-						e.stopPropagation(), v(t);
+						e.stopPropagation(), y(t);
 					},
 					sx: {
 						width: 8,
 						height: 8,
 						borderRadius: "50%",
-						bgcolor: _ === t ? "primary.main" : "whiteAlpha.medium",
+						bgcolor: v === t ? "primary.main" : "whiteAlpha.medium",
 						cursor: "pointer",
 						boxShadow: 1,
 						backdropFilter: "blur(4px)",
 						transition: "all 0.2s",
 						"&:hover": {
 							transform: "scale(1.2)",
-							bgcolor: _ === t ? "primary.main" : "whiteAlpha.dark"
+							bgcolor: v === t ? "primary.main" : "whiteAlpha.dark"
 						}
 					}
 				}, t))
 			}),
-			/* @__PURE__ */ (0, s.jsxs)(a, {
+			/* @__PURE__ */ a(o, {
 				sx: {
 					position: "absolute",
 					top: 0,
 					height: "100%",
 					width: "4px",
 					cursor: "ew-resize",
-					left: `calc(${y}% - 2px)`
+					left: `calc(${b}% - 2px)`
 				},
-				children: [/* @__PURE__ */ (0, s.jsx)(a, { sx: {
+				children: [/* @__PURE__ */ i(o, { sx: {
 					position: "absolute",
 					inset: "0 0 0 0",
 					width: "4px",
 					bgcolor: "divider",
 					backdropFilter: "blur(4px)"
-				} }), /* @__PURE__ */ (0, s.jsx)(o, {
+				} }), /* @__PURE__ */ i(s, {
 					sx: {
 						position: "absolute",
 						top: "50%",
 						left: "50%",
 						transform: "translate(-50%, -50%)",
 						cursor: "ew-resize",
-						...A ? {
+						...j ? {
 							width: 48,
 							height: 48,
 							backdropFilter: "blur(8px)",
@@ -141,10 +141,10 @@ var s = e(), c = i.forwardRef(({ sx: e, leftImage: c, rightImage: l, altLeft: u
 							color: "text.primary"
 						} : {},
 						transition: "all 0.3s ease-in-out",
-						"&:hover": { bgcolor: A ? "rgba(255,255,255,0.4)" : "transparent" }
+						"&:hover": { bgcolor: j ? "rgba(255,255,255,0.4)" : "transparent" }
 					},
 					role: "slider",
-					"aria-valuenow": y,
+					"aria-valuenow": b,
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
 					"aria-orientation": "horizontal",
@@ -152,12 +152,12 @@ var s = e(), c = i.forwardRef(({ sx: e, leftImage: c, rightImage: l, altLeft: u
 					onClick: (e) => {
 						e.preventDefault(), e.stopPropagation();
 					},
-					children: A && /* @__PURE__ */ (0, s.jsxs)(a, {
+					children: j && /* @__PURE__ */ a(o, {
 						sx: {
 							display: "flex",
 							alignItems: "center"
 						},
-						children: [/* @__PURE__ */ (0, s.jsx)(t, {}), /* @__PURE__ */ (0, s.jsx)(n, {})]
+						children: [/* @__PURE__ */ i(e, {}), /* @__PURE__ */ i(t, {})]
 					})
 				})]
 			})

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

@@ -1,4 +1,3 @@
-import "../createTheme-CMuiGmV-.js";
-import "../jsx-runtime-V-UOMaX1.js";
+import "../createTheme-DuS5_nJb.js";
 import { DefaultMediaItem as e, SImageModal as t } from "./s-image-modal.js";
 export { e as DefaultMediaItem, t as default };

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

@@ -1,101 +1,101 @@
-import "../createTheme-CMuiGmV-.js";
-import { t as e } from "../jsx-runtime-V-UOMaX1.js";
-import { t } from "../ChevronLeft-Djq7TyZX.js";
-import { t as n } from "../ChevronRight-BgWjUtu8.js";
-import { t as r } from "../Close-DD2G0QfM.js";
-import i from "../s-lazy-image/s-lazy-image.js";
-import a, { useEffect as o, useState as s } from "react";
-import { Box as c, IconButton as l, Modal as u, Paper as d, Stack as f, Typography as p } from "@mui/material";
-import { AnimatePresence as m, motion as h } from "framer-motion";
+import "../createTheme-DuS5_nJb.js";
+import { t as e } from "../ChevronLeft-C7DUyLoc.js";
+import { t } from "../ChevronRight-VFk57Tte.js";
+import { t as n } from "../Close-OtVsJy75.js";
+import r from "../s-lazy-image/s-lazy-image.js";
+import i, { useEffect as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Box as u, IconButton as d, Modal as f, Paper as p, Stack as m, Typography as h } from "@mui/material";
+import { AnimatePresence as g, motion as _ } from "framer-motion";
 //#region lib/s-image-modal/s-image-modal.tsx
-var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain", disableVideoControls: a = !1 }) => e.type === "video" ? /* @__PURE__ */ (0, g.jsx)(c, {
+var v = ({ item: e, onClick: t, style: n = {}, objectFit: i = "contain", disableVideoControls: a = !1 }) => e.type === "video" ? /* @__PURE__ */ c(u, {
 	component: "video",
 	onClick: t,
 	controls: !a,
 	sx: {
 		width: "100%",
 		height: "100%",
-		objectFit: r,
+		objectFit: i,
 		bgcolor: "background.paper",
 		...n
 	},
-	children: /* @__PURE__ */ (0, g.jsx)("source", {
+	children: /* @__PURE__ */ c("source", {
 		src: e.url,
 		type: "video/mp4"
 	})
-}) : /* @__PURE__ */ (0, g.jsx)(i, {
+}) : /* @__PURE__ */ c(r, {
 	src: e.url,
 	alt: e.title ?? "",
 	onClick: t,
 	style: {
 		width: "100%",
 		height: "100%",
-		objectFit: r,
+		objectFit: i,
 		backgroundColor: "background.paper",
 		...n
 	}
-}), v = ({ selectedItem: e, isOpen: i, onClose: v, onItemChange: y, mediaItems: b = [], renderMediaItem: x, showNavigation: S = !0, showThumbnailDock: C = !0, showCounter: w = !0, modalSx: T = {} }) => {
-	let [E, D] = s(e ?? null), O = e ?? E;
-	o(() => {
-		e && D(e);
-	}, [e]);
-	let k = S && b.length > 1 && O, A = O ? b.findIndex((e) => e.id === O.id) : -1, j = b.length, M = a.useCallback(() => {
-		if (k && A > 0) {
-			let e = b[A - 1];
-			y ? y(e) : D(e);
+}), y = ({ selectedItem: r, isOpen: y, onClose: b, onItemChange: x, mediaItems: S = [], renderMediaItem: C, showNavigation: w = !0, showThumbnailDock: T = !0, showCounter: E = !0, modalSx: D = {} }) => {
+	let [O, k] = o(r ?? null), A = r ?? O;
+	a(() => {
+		r && k(r);
+	}, [r]);
+	let j = w && S.length > 1 && A, M = A ? S.findIndex((e) => e.id === A.id) : -1, N = S.length, P = i.useCallback(() => {
+		if (j && M > 0) {
+			let e = S[M - 1];
+			x ? x(e) : k(e);
 		}
 	}, [
-		k,
-		A,
-		b,
-		y
-	]), N = a.useCallback(() => {
-		if (k && A < j - 1) {
-			let e = b[A + 1];
-			y ? y(e) : D(e);
+		j,
+		M,
+		S,
+		x
+	]), F = i.useCallback(() => {
+		if (j && M < N - 1) {
+			let e = S[M + 1];
+			x ? x(e) : k(e);
 		}
 	}, [
-		k,
-		A,
 		j,
-		b,
-		y
+		M,
+		N,
+		S,
+		x
 	]);
-	return o(() => {
+	return a(() => {
 		let e = (e) => {
-			if (i) switch (e.key) {
+			if (y) switch (e.key) {
 				case "ArrowLeft":
-					M();
+					P();
 					break;
 				case "ArrowRight":
-					N();
+					F();
 					break;
 				case "Escape":
-					v();
+					b();
 					break;
 			}
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, [
-		i,
-		A,
-		j,
-		k,
+		y,
 		M,
 		N,
-		v
-	]), !i || !O ? null : /* @__PURE__ */ (0, g.jsx)(u, {
-		open: i,
-		onClose: v,
+		j,
+		P,
+		F,
+		b
+	]), !y || !A ? null : /* @__PURE__ */ c(f, {
+		open: y,
+		onClose: b,
 		sx: {
 			zIndex: (e) => e.zIndex.modal + 100,
-			...T
+			...D
 		},
 		slotProps: { backdrop: { sx: {
 			backdropFilter: "blur(8px)",
 			zIndex: (e) => e.zIndex.modal + 99
 		} } },
-		children: /* @__PURE__ */ (0, g.jsxs)(c, { children: [/* @__PURE__ */ (0, g.jsx)(h.div, {
+		children: /* @__PURE__ */ l(u, { children: [/* @__PURE__ */ c(_.div, {
 			initial: { scale: .98 },
 			animate: { scale: 1 },
 			exit: { scale: .98 },
@@ -104,7 +104,7 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 				stiffness: 400,
 				damping: 30
 			},
-			children: /* @__PURE__ */ (0, g.jsxs)(d, {
+			children: /* @__PURE__ */ l(p, {
 				sx: {
 					position: "fixed",
 					inset: 0,
@@ -115,13 +115,13 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 					zIndex: (e) => e.zIndex.modal + 101
 				},
 				children: [
-					/* @__PURE__ */ (0, g.jsx)(c, {
+					/* @__PURE__ */ c(u, {
 						sx: {
 							height: "100%",
 							display: "flex",
 							flexDirection: "column"
 						},
-						children: /* @__PURE__ */ (0, g.jsx)(c, {
+						children: /* @__PURE__ */ c(u, {
 							sx: {
 								flex: 1,
 								p: {
@@ -134,9 +134,9 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 								justifyContent: "center",
 								bgcolor: "background.default"
 							},
-							children: /* @__PURE__ */ (0, g.jsx)(m, {
+							children: /* @__PURE__ */ c(g, {
 								mode: "wait",
-								children: /* @__PURE__ */ (0, g.jsx)(h.div, {
+								children: /* @__PURE__ */ c(_.div, {
 									style: { position: "relative" },
 									initial: {
 										y: 20,
@@ -157,7 +157,7 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 										scale: .97,
 										transition: { duration: .15 }
 									},
-									children: /* @__PURE__ */ (0, g.jsxs)(d, {
+									children: /* @__PURE__ */ l(p, {
 										onClick: (e) => e.stopPropagation(),
 										sx: {
 											position: "relative",
@@ -172,7 +172,7 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 											borderRadius: 2,
 											overflow: "hidden"
 										},
-										children: [x ? x(O) : /* @__PURE__ */ (0, g.jsx)(_, { item: O }), (O.title || O.desc) && /* @__PURE__ */ (0, g.jsxs)(c, {
+										children: [C ? C(A) : /* @__PURE__ */ c(v, { item: A }), (A.title || A.desc) && /* @__PURE__ */ l(u, {
 											sx: {
 												position: "absolute",
 												left: 0,
@@ -186,7 +186,7 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 												background: (e) => `linear-gradient(to top, ${(e.vars ?? e).palette.background.paper}, transparent)`
 											},
 											onClick: (e) => e.stopPropagation(),
-											children: [O.title && /* @__PURE__ */ (0, g.jsx)(p, {
+											children: [A.title && /* @__PURE__ */ c(h, {
 												variant: "h6",
 												sx: {
 													fontWeight: 600,
@@ -196,24 +196,24 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 														md: 20
 													}
 												},
-												children: O.title
-											}), O.desc && /* @__PURE__ */ (0, g.jsx)(p, {
+												children: A.title
+											}), A.desc && /* @__PURE__ */ c(h, {
 												variant: "body2",
 												sx: {
 													opacity: .8,
 													mt: .5
 												},
-												children: O.desc
+												children: A.desc
 											})]
 										})]
 									})
-								}, O.id)
+								}, A.id)
 							})
 						})
 					}),
-					/* @__PURE__ */ (0, g.jsx)(l, {
+					/* @__PURE__ */ c(d, {
 						"aria-label": "Close",
-						onClick: v,
+						onClick: b,
 						sx: {
 							position: "absolute",
 							top: {
@@ -228,9 +228,9 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 							},
 							zIndex: (e) => e.zIndex.modal + 102
 						},
-						children: /* @__PURE__ */ (0, g.jsx)(r, {})
+						children: /* @__PURE__ */ c(n, {})
 					}),
-					w && k && /* @__PURE__ */ (0, g.jsxs)(c, {
+					E && j && /* @__PURE__ */ l(u, {
 						sx: {
 							position: "absolute",
 							top: {
@@ -253,17 +253,17 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 							color: "text.primary"
 						},
 						children: [
-							A + 1,
+							M + 1,
 							" / ",
-							j
+							N
 						]
 					}),
-					k && /* @__PURE__ */ (0, g.jsxs)(g.Fragment, { children: [/* @__PURE__ */ (0, g.jsx)(l, {
+					j && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(d, {
 						"aria-label": "Previous image",
 						onClick: (e) => {
-							e.stopPropagation(), M();
+							e.stopPropagation(), P();
 						},
-						disabled: A === 0,
+						disabled: M === 0,
 						sx: {
 							position: "absolute",
 							left: {
@@ -276,13 +276,13 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 							zIndex: (e) => e.zIndex.modal + 102,
 							"&:disabled": { opacity: .5 }
 						},
-						children: /* @__PURE__ */ (0, g.jsx)(t, {})
-					}), /* @__PURE__ */ (0, g.jsx)(l, {
+						children: /* @__PURE__ */ c(e, {})
+					}), /* @__PURE__ */ c(d, {
 						"aria-label": "Next image",
 						onClick: (e) => {
-							e.stopPropagation(), N();
+							e.stopPropagation(), F();
 						},
-						disabled: A === j - 1,
+						disabled: M === N - 1,
 						sx: {
 							position: "absolute",
 							right: {
@@ -295,11 +295,11 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 							zIndex: (e) => e.zIndex.modal + 102,
 							"&:disabled": { opacity: .5 }
 						},
-						children: /* @__PURE__ */ (0, g.jsx)(n, {})
+						children: /* @__PURE__ */ c(t, {})
 					})] })
 				]
 			})
-		}), C && k && b.length > 1 && /* @__PURE__ */ (0, g.jsx)(c, {
+		}), T && j && S.length > 1 && /* @__PURE__ */ c(u, {
 			sx: {
 				position: "fixed",
 				zIndex: 1502,
@@ -307,7 +307,7 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 				bottom: 16,
 				transform: "translateX(-50%)"
 			},
-			children: /* @__PURE__ */ (0, g.jsx)(d, {
+			children: /* @__PURE__ */ c(p, {
 				sx: {
 					position: "relative",
 					borderRadius: 3,
@@ -318,13 +318,13 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 					px: 1.5,
 					py: 1
 				},
-				children: /* @__PURE__ */ (0, g.jsx)(f, {
+				children: /* @__PURE__ */ c(m, {
 					direction: "row",
 					alignItems: "center",
 					spacing: -1.5,
-					children: b.map((e, t) => /* @__PURE__ */ (0, g.jsxs)(h.div, {
+					children: S.map((e, t) => /* @__PURE__ */ l(_.div, {
 						onClick: (t) => {
-							t.stopPropagation(), y ? y(e) : D(e);
+							t.stopPropagation(), x ? x(e) : k(e);
 						},
 						style: {
 							position: "relative",
@@ -333,16 +333,16 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 							borderRadius: 10,
 							overflow: "hidden",
 							flexShrink: 0,
-							zIndex: O.id === e.id ? 30 : b.length - t,
-							border: O.id === e.id ? "1px solid" : void 0,
-							borderColor: O.id === e.id ? "divider" : void 0,
+							zIndex: A.id === e.id ? 30 : S.length - t,
+							border: A.id === e.id ? "1px solid" : void 0,
+							borderColor: A.id === e.id ? "divider" : void 0,
 							cursor: "pointer"
 						},
 						initial: { rotate: t % 2 == 0 ? -15 : 15 },
 						animate: {
-							scale: O.id === e.id ? 1.2 : 1,
-							rotate: O.id === e.id ? 0 : t % 2 == 0 ? -15 : 15,
-							y: O.id === e.id ? -8 : 0
+							scale: A.id === e.id ? 1.2 : 1,
+							rotate: A.id === e.id ? 0 : t % 2 == 0 ? -15 : 15,
+							y: A.id === e.id ? -8 : 0
 						},
 						whileHover: {
 							scale: 1.3,
@@ -355,9 +355,9 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 							}
 						},
 						children: [
-							x ? x(e, () => {
-								y ? y(e) : D(e);
-							}) : /* @__PURE__ */ (0, g.jsx)(_, {
+							C ? C(e, () => {
+								x ? x(e) : k(e);
+							}) : /* @__PURE__ */ c(v, {
 								item: e,
 								objectFit: "cover",
 								style: {
@@ -367,13 +367,13 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 								},
 								disableVideoControls: !0
 							}),
-							/* @__PURE__ */ (0, g.jsx)(c, { sx: {
+							/* @__PURE__ */ c(u, { sx: {
 								position: "absolute",
 								inset: 0,
 								background: (e) => `linear-gradient(to bottom, transparent, ${(e.vars ?? e).palette.action.hover}, ${(e.vars ?? e).palette.action.selected})`,
 								pointerEvents: "none"
 							} }),
-							O.id === e.id && /* @__PURE__ */ (0, g.jsx)(h.div, {
+							A.id === e.id && /* @__PURE__ */ c(_.div, {
 								layoutId: "activeGlow",
 								style: {
 									position: "absolute",
@@ -392,6 +392,6 @@ var g = e(), _ = ({ item: e, onClick: t, style: n = {}, objectFit: r = "contain"
 		})] })
 	});
 };
-v.displayName = "SImageModal";
+y.displayName = "SImageModal";
 //#endregion
-export { _ as DefaultMediaItem, v as SImageModal, v as default };
+export { v as DefaultMediaItem, y as SImageModal, y as default };

package/dist/s-item-not-found/index.js

@@ -1,3 +1,2 @@
-import "../jsx-runtime-V-UOMaX1.js";
 import { SItemNotFound as e } from "./s-item-not-found.js";
 export { e as default };