@solostylist/ui-kit 1.0.87 → 1.0.89

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

@@ -1,74 +1,70 @@
-import { j as i } from "../jsx-runtime-DywqP_6a.js";
-import { useState as k, useEffect as z } from "react";
-import { Modal as A, Box as l, Paper as b, Typography as w, IconButton as m, Stack as T } from "@mui/material";
-import { motion as u, AnimatePresence as F } from "framer-motion";
-import { C as M } from "../Close-CKpTrk7X.js";
-import { c as P } from "../createSvgIcon-vJH0FaMW.js";
-const $ = P(/* @__PURE__ */ i.jsx("path", {
-  d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-}), "ChevronLeft"), B = P(/* @__PURE__ */ i.jsx("path", {
-  d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-}), "ChevronRight"), I = ({ item: s, onClick: c, style: r = {}, objectFit: e = "contain", disableVideoControls: n = !1 }) => s.type === "video" ? /* @__PURE__ */ i.jsx(
-  l,
+import { j as o } from "../jsx-runtime-DywqP_6a.js";
+import { useState as k, useEffect as w } from "react";
+import { Modal as A, Box as d, Paper as b, Typography as z, IconButton as m, Stack as L } from "@mui/material";
+import { motion as h, AnimatePresence as T } from "framer-motion";
+import { C as F } from "../Close--Sf9yZGB.js";
+import { C as $, a as B } from "../ChevronRight-CtkI4XwH.js";
+const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disableVideoControls: n = !1 }) => s.type === "video" ? /* @__PURE__ */ o.jsx(
+  d,
   {
     component: "video",
-    onClick: c,
+    onClick: l,
     controls: !n,
     sx: {
       width: "100%",
       height: "100%",
       objectFit: e,
       bgcolor: "background.paper",
-      ...r
+      ...x
     },
-    children: /* @__PURE__ */ i.jsx("source", { src: s.url, type: "video/mp4" })
+    children: /* @__PURE__ */ o.jsx("source", { src: s.url, type: "video/mp4" })
   }
-) : /* @__PURE__ */ i.jsx(
-  l,
+) : /* @__PURE__ */ o.jsx(
+  d,
   {
     component: "img",
     src: s.url,
     alt: s.title || "",
-    onClick: c,
+    onClick: l,
     sx: {
       width: "100%",
       height: "100%",
       objectFit: e,
       bgcolor: "background.paper",
-      ...r
+      ...x
     }
   }
-), V = ({
+), M = ({
   selectedItem: s,
-  isOpen: c,
-  onClose: r,
+  isOpen: l,
+  onClose: x,
   onItemChange: e,
   mediaItems: n = [],
   renderMediaItem: f,
-  showNavigation: E = !0,
-  showThumbnailDock: S = !0,
-  showCounter: R = !0,
+  showNavigation: P = !0,
+  showThumbnailDock: E = !0,
+  showCounter: S = !0,
   modalSx: C = {}
 }) => {
-  const [v, L] = k({ x: 0, y: 0 }), [D, h] = k(s || null), o = s || D;
-  z(() => {
-    s && h(s);
+  const [v, R] = k({ x: 0, y: 0 }), [D, u] = k(s || null), i = s || D;
+  w(() => {
+    s && u(s);
   }, [s]);
-  const p = E && n.length > 1 && o, a = o ? n.findIndex((t) => t.id === o.id) : -1, g = n.length, y = () => {
-    if (p && a > 0) {
-      const t = n[a - 1];
-      e ? e(t) : h(t);
+  const p = P && n.length > 1 && i, r = i ? n.findIndex((t) => t.id === i.id) : -1, g = n.length, y = () => {
+    if (p && r > 0) {
+      const t = n[r - 1];
+      e ? e(t) : u(t);
     }
   }, j = () => {
-    if (p && a < g - 1) {
-      const t = n[a + 1];
-      e ? e(t) : h(t);
+    if (p && r < g - 1) {
+      const t = n[r + 1];
+      e ? e(t) : u(t);
     }
   };
-  return z(() => {
-    const t = (d) => {
-      if (c)
-        switch (d.key) {
+  return w(() => {
+    const t = (a) => {
+      if (l)
+        switch (a.key) {
           case "ArrowLeft":
             y();
             break;
@@ -76,16 +72,16 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
             j();
             break;
           case "Escape":
-            r();
+            x();
             break;
         }
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [c, a, g, p]), !c || !o ? null : /* @__PURE__ */ i.jsx(
+  }, [l, r, g, p]), !l || !i ? null : /* @__PURE__ */ o.jsx(
     A,
     {
-      open: c,
-      onClose: r,
+      open: l,
+      onClose: x,
       sx: {
         zIndex: (t) => t.zIndex.modal + 100,
         ...C
@@ -98,15 +94,15 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
           }
         }
       },
-      children: /* @__PURE__ */ i.jsxs(l, { children: [
-        /* @__PURE__ */ i.jsx(
-          u.div,
+      children: /* @__PURE__ */ o.jsxs(d, { children: [
+        /* @__PURE__ */ o.jsx(
+          h.div,
           {
             initial: { scale: 0.98 },
             animate: { scale: 1 },
             exit: { scale: 0.98 },
             transition: { type: "spring", stiffness: 400, damping: 30 },
-            children: /* @__PURE__ */ i.jsxs(
+            children: /* @__PURE__ */ o.jsxs(
               b,
               {
                 elevation: 3,
@@ -120,16 +116,16 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                   zIndex: (t) => t.zIndex.modal + 101
                 },
                 children: [
-                  /* @__PURE__ */ i.jsx(
-                    l,
+                  /* @__PURE__ */ o.jsx(
+                    d,
                     {
                       sx: {
                         height: "100%",
                         display: "flex",
                         flexDirection: "column"
                       },
-                      children: /* @__PURE__ */ i.jsx(
-                        l,
+                      children: /* @__PURE__ */ o.jsx(
+                        d,
                         {
                           sx: {
                             flex: 1,
@@ -139,8 +135,8 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                             justifyContent: "center",
                             bgcolor: "background.default"
                           },
-                          children: /* @__PURE__ */ i.jsx(F, { mode: "wait", children: /* @__PURE__ */ i.jsx(
-                            u.div,
+                          children: /* @__PURE__ */ o.jsx(T, { mode: "wait", children: /* @__PURE__ */ o.jsx(
+                            h.div,
                             {
                               style: { position: "relative" },
                               initial: { y: 20, scale: 0.97 },
@@ -150,11 +146,11 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                                 transition: { type: "spring", stiffness: 500, damping: 30, mass: 0.5 }
                               },
                               exit: { y: 20, scale: 0.97, transition: { duration: 0.15 } },
-                              onClick: r,
-                              children: /* @__PURE__ */ i.jsxs(
+                              children: /* @__PURE__ */ o.jsxs(
                                 b,
                                 {
                                   elevation: 6,
+                                  onClick: (t) => t.stopPropagation(),
                                   sx: {
                                     position: "relative",
                                     width: "100%",
@@ -165,9 +161,9 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                                     overflow: "hidden"
                                   },
                                   children: [
-                                    f ? f(o, r) : /* @__PURE__ */ i.jsx(I, { item: o, onClick: r }),
-                                    (o.title || o.desc) && /* @__PURE__ */ i.jsxs(
-                                      l,
+                                    f ? f(i) : /* @__PURE__ */ o.jsx(I, { item: i }),
+                                    (i.title || i.desc) && /* @__PURE__ */ o.jsxs(
+                                      d,
                                       {
                                         sx: {
                                           position: "absolute",
@@ -180,8 +176,8 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                                         },
                                         onClick: (t) => t.stopPropagation(),
                                         children: [
-                                          o.title && /* @__PURE__ */ i.jsx(w, { variant: "h6", sx: { fontWeight: 600, fontSize: { xs: 14, sm: 18, md: 20 } }, children: o.title }),
-                                          o.desc && /* @__PURE__ */ i.jsx(w, { variant: "body2", sx: { opacity: 0.8, mt: 0.5 }, children: o.desc })
+                                          i.title && /* @__PURE__ */ o.jsx(z, { variant: "h6", sx: { fontWeight: 600, fontSize: { xs: 14, sm: 18, md: 20 } }, children: i.title }),
+                                          i.desc && /* @__PURE__ */ o.jsx(z, { variant: "body2", sx: { opacity: 0.8, mt: 0.5 }, children: i.desc })
                                         ]
                                       }
                                     )
@@ -189,28 +185,28 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                                 }
                               )
                             },
-                            o.id
+                            i.id
                           ) })
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ i.jsx(
+                  /* @__PURE__ */ o.jsx(
                     m,
                     {
                       "aria-label": "Close",
-                      onClick: r,
+                      onClick: x,
                       sx: {
                         position: "absolute",
                         top: { xs: 8, sm: 10, md: 12 },
                         right: { xs: 8, sm: 10, md: 12 },
                         zIndex: (t) => t.zIndex.modal + 102
                       },
-                      children: /* @__PURE__ */ i.jsx(M, {})
+                      children: /* @__PURE__ */ o.jsx(F, {})
                     }
                   ),
-                  R && p && /* @__PURE__ */ i.jsxs(
-                    l,
+                  S && p && /* @__PURE__ */ o.jsxs(
+                    d,
                     {
                       sx: {
                         position: "absolute",
@@ -223,21 +219,21 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                         color: "text.primary"
                       },
                       children: [
-                        a + 1,
+                        r + 1,
                         " / ",
                         g
                       ]
                     }
                   ),
-                  p && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                    /* @__PURE__ */ i.jsx(
+                  p && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+                    /* @__PURE__ */ o.jsx(
                       m,
                       {
                         "aria-label": "Previous image",
                         onClick: (t) => {
                           t.stopPropagation(), y();
                         },
-                        disabled: a === 0,
+                        disabled: r === 0,
                         sx: {
                           position: "absolute",
                           left: { xs: 8, sm: 10, md: 12 },
@@ -248,17 +244,17 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                             opacity: 0.5
                           }
                         },
-                        children: /* @__PURE__ */ i.jsx($, {})
+                        children: /* @__PURE__ */ o.jsx($, {})
                       }
                     ),
-                    /* @__PURE__ */ i.jsx(
+                    /* @__PURE__ */ o.jsx(
                       m,
                       {
                         "aria-label": "Next image",
                         onClick: (t) => {
                           t.stopPropagation(), j();
                         },
-                        disabled: a === g - 1,
+                        disabled: r === g - 1,
                         sx: {
                           position: "absolute",
                           right: { xs: 8, sm: 10, md: 12 },
@@ -269,7 +265,7 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                             opacity: 0.5
                           }
                         },
-                        children: /* @__PURE__ */ i.jsx(B, {})
+                        children: /* @__PURE__ */ o.jsx(B, {})
                       }
                     )
                   ] })
@@ -278,16 +274,16 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
             )
           }
         ),
-        S && p && n.length > 1 && /* @__PURE__ */ i.jsx(
-          u.div,
+        E && p && n.length > 1 && /* @__PURE__ */ o.jsx(
+          h.div,
           {
             drag: !0,
             dragMomentum: !1,
             dragElastic: 0.1,
             initial: !1,
             animate: { x: v.x, y: v.y },
-            onDragEnd: (t, d) => {
-              L((x) => ({ x: x.x + d.offset.x, y: x.y + d.offset.y }));
+            onDragEnd: (t, a) => {
+              R((c) => ({ x: c.x + a.offset.x, y: c.y + a.offset.y }));
             },
             style: {
               position: "fixed",
@@ -297,7 +293,7 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
               transform: "translateX(-50%)",
               touchAction: "none"
             },
-            children: /* @__PURE__ */ i.jsx(
+            children: /* @__PURE__ */ o.jsx(
               b,
               {
                 elevation: 8,
@@ -313,11 +309,11 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                   px: 1.5,
                   py: 1
                 },
-                children: /* @__PURE__ */ i.jsx(T, { direction: "row", alignItems: "center", spacing: -1.5, children: n.map((t, d) => /* @__PURE__ */ i.jsxs(
-                  u.div,
+                children: /* @__PURE__ */ o.jsx(L, { direction: "row", alignItems: "center", spacing: -1.5, children: n.map((t, a) => /* @__PURE__ */ o.jsxs(
+                  h.div,
                   {
-                    onClick: (x) => {
-                      x.stopPropagation(), e ? e(t) : h(t);
+                    onClick: (c) => {
+                      c.stopPropagation(), e ? e(t) : u(t);
                     },
                     style: {
                       position: "relative",
@@ -326,16 +322,16 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                       borderRadius: 10,
                       overflow: "hidden",
                       flexShrink: 0,
-                      zIndex: o.id === t.id ? 30 : n.length - d,
-                      border: o.id === t.id ? "2px solid" : void 0,
-                      borderColor: o.id === t.id ? "divider" : void 0,
+                      zIndex: i.id === t.id ? 30 : n.length - a,
+                      border: i.id === t.id ? "2px solid" : void 0,
+                      borderColor: i.id === t.id ? "divider" : void 0,
                       cursor: "pointer"
                     },
-                    initial: { rotate: d % 2 === 0 ? -15 : 15 },
+                    initial: { rotate: a % 2 === 0 ? -15 : 15 },
                     animate: {
-                      scale: o.id === t.id ? 1.2 : 1,
-                      rotate: o.id === t.id ? 0 : d % 2 === 0 ? -15 : 15,
-                      y: o.id === t.id ? -8 : 0
+                      scale: i.id === t.id ? 1.2 : 1,
+                      rotate: i.id === t.id ? 0 : a % 2 === 0 ? -15 : 15,
+                      y: i.id === t.id ? -8 : 0
                     },
                     whileHover: {
                       scale: 1.3,
@@ -345,8 +341,8 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                     },
                     children: [
                       f ? f(t, () => {
-                        e ? e(t) : h(t);
-                      }) : /* @__PURE__ */ i.jsx(
+                        e ? e(t) : u(t);
+                      }) : /* @__PURE__ */ o.jsx(
                         I,
                         {
                           item: t,
@@ -360,19 +356,19 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                           disableVideoControls: !0
                         }
                       ),
-                      /* @__PURE__ */ i.jsx(
-                        l,
+                      /* @__PURE__ */ o.jsx(
+                        d,
                         {
                           sx: {
                             position: "absolute",
                             inset: 0,
-                            background: (x) => `linear-gradient(to bottom, transparent, ${x.palette.action.hover}, ${x.palette.action.selected})`,
+                            background: (c) => `linear-gradient(to bottom, transparent, ${c.palette.action.hover}, ${c.palette.action.selected})`,
                             pointerEvents: "none"
                           }
                         }
                       ),
-                      o.id === t.id && /* @__PURE__ */ i.jsx(
-                        u.div,
+                      i.id === t.id && /* @__PURE__ */ o.jsx(
+                        h.div,
                         {
                           layoutId: "activeGlow",
                           style: {
@@ -400,5 +396,5 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
 };
 export {
   I as DefaultMediaItem,
-  V as default
+  M as default
 };