@solostylist/ui-kit 1.0.166 → 1.0.168

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

@@ -1,110 +1,111 @@
-import { j as i } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as E, useEffect as j } from "react";
-import { Modal as R, Box as a, Paper as g, Typography as k, IconButton as m, Stack as L } from "@mui/material";
-import { motion as b, AnimatePresence as A } from "framer-motion";
-import D from "../s-lazy-image/s-lazy-image.js";
-import { C as F } from "../Close-BRlEKA2Q.js";
-import { C as T } from "../ChevronLeft-CBuFk2Fh.js";
-import { C as $ } from "../ChevronRight-CnDWPrOm.js";
-const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disableVideoControls: r = !1 }) => s.type === "video" ? /* @__PURE__ */ i.jsx(
-  a,
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { useState as S, useEffect as j } from "react";
+import { Box as s, Modal as M, Paper as y, Typography as k, IconButton as v, Stack as T } from "@mui/material";
+import { motion as x, AnimatePresence as N } from "framer-motion";
+import "../s-lazy-image/index.js";
+import P from "../s-lazy-image/s-lazy-image.js";
+import { C as D } from "../Close-BRlEKA2Q.js";
+import { C as R } from "../ChevronLeft-CBuFk2Fh.js";
+import { C as W } from "../ChevronRight-CnDWPrOm.js";
+const g = ({ item: o, onClick: l, style: d = {}, objectFit: i = "contain", disableVideoControls: n = !1 }) => o.type === "video" ? /* @__PURE__ */ t.jsx(
+  s,
   {
     component: "video",
-    onClick: d,
-    controls: !r,
+    onClick: l,
+    controls: !n,
     sx: {
       width: "100%",
       height: "100%",
-      objectFit: e,
+      objectFit: i,
       bgcolor: "background.paper",
-      ...l
+      ...d
     },
-    children: /* @__PURE__ */ i.jsx("source", { src: s.url, type: "video/mp4" })
+    children: /* @__PURE__ */ t.jsx("source", { src: o.url, type: "video/mp4" })
   }
-) : /* @__PURE__ */ i.jsx(
-  D,
+) : /* @__PURE__ */ t.jsx(
+  P,
   {
-    src: s.url,
-    alt: s.title || "",
-    onClick: d,
+    src: o.url,
+    alt: o.title || "",
+    onClick: l,
     style: {
       width: "100%",
       height: "100%",
-      objectFit: e,
+      objectFit: i,
       backgroundColor: "background.paper",
-      ...l
+      ...d
     }
   }
-), X = ({
-  selectedItem: s,
-  isOpen: d,
-  onClose: l,
-  onItemChange: e,
-  mediaItems: r = [],
-  renderMediaItem: f,
-  showNavigation: z = !0,
-  showThumbnailDock: I = !0,
-  showCounter: P = !0,
-  modalSx: S = {}
+), b = ({
+  selectedItem: o,
+  isOpen: l,
+  onClose: d,
+  onItemChange: i,
+  mediaItems: n = [],
+  renderMediaItem: h,
+  showNavigation: C = !0,
+  showThumbnailDock: _ = !0,
+  showCounter: V = !0,
+  modalSx: q = {}
 }) => {
-  const [C, p] = E(s || null), t = s || C;
+  const [z, u] = S(o || null), a = o || z;
   j(() => {
-    s && p(s);
-  }, [s]);
-  const c = z && r.length > 1 && t, n = t ? r.findIndex((o) => o.id === t.id) : -1, h = r.length, v = () => {
-    if (c && n > 0) {
-      const o = r[n - 1];
-      e ? e(o) : p(o);
+    o && u(o);
+  }, [o]);
+  const p = C && n.length > 1 && a, r = a ? n.findIndex((e) => e.id === a.id) : -1, f = n.length, I = () => {
+    if (p && r > 0) {
+      const e = n[r - 1];
+      i ? i(e) : u(e);
     }
-  }, y = () => {
-    if (c && n < h - 1) {
-      const o = r[n + 1];
-      e ? e(o) : p(o);
+  }, w = () => {
+    if (p && r < f - 1) {
+      const e = n[r + 1];
+      i ? i(e) : u(e);
     }
   };
   return j(() => {
-    const o = (u) => {
-      if (d)
-        switch (u.key) {
+    const e = (c) => {
+      if (l)
+        switch (c.key) {
           case "ArrowLeft":
-            v();
+            I();
             break;
           case "ArrowRight":
-            y();
+            w();
             break;
           case "Escape":
-            l();
+            d();
             break;
         }
     };
-    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
-  }, [d, n, h, c]), !d || !t ? null : /* @__PURE__ */ i.jsx(
-    R,
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [l, r, f, p]), !l || !a ? null : /* @__PURE__ */ t.jsx(
+    M,
     {
-      open: d,
-      onClose: l,
+      open: l,
+      onClose: d,
       sx: {
-        zIndex: (o) => o.zIndex.modal + 100,
-        ...S
+        zIndex: (e) => e.zIndex.modal + 100,
+        ...q
       },
       slotProps: {
         backdrop: {
           sx: {
             backdropFilter: "blur(8px)",
-            zIndex: (o) => o.zIndex.modal + 99
+            zIndex: (e) => e.zIndex.modal + 99
           }
         }
       },
-      children: /* @__PURE__ */ i.jsxs(a, { children: [
-        /* @__PURE__ */ i.jsx(
-          b.div,
+      children: /* @__PURE__ */ t.jsxs(s, { children: [
+        /* @__PURE__ */ t.jsx(
+          x.div,
           {
             initial: { scale: 0.98 },
             animate: { scale: 1 },
             exit: { scale: 0.98 },
             transition: { type: "spring", stiffness: 400, damping: 30 },
-            children: /* @__PURE__ */ i.jsxs(
-              g,
+            children: /* @__PURE__ */ t.jsxs(
+              y,
               {
                 sx: {
                   position: "fixed",
@@ -113,19 +114,19 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
                   minHeight: "100vh",
                   borderRadius: 0,
                   overflow: "hidden",
-                  zIndex: (o) => o.zIndex.modal + 101
+                  zIndex: (e) => e.zIndex.modal + 101
                 },
                 children: [
-                  /* @__PURE__ */ i.jsx(
-                    a,
+                  /* @__PURE__ */ t.jsx(
+                    s,
                     {
                       sx: {
                         height: "100%",
                         display: "flex",
                         flexDirection: "column"
                       },
-                      children: /* @__PURE__ */ i.jsx(
-                        a,
+                      children: /* @__PURE__ */ t.jsx(
+                        s,
                         {
                           sx: {
                             flex: 1,
@@ -135,8 +136,8 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
                             justifyContent: "center",
                             bgcolor: "background.default"
                           },
-                          children: /* @__PURE__ */ i.jsx(A, { mode: "wait", children: /* @__PURE__ */ i.jsx(
-                            b.div,
+                          children: /* @__PURE__ */ t.jsx(N, { mode: "wait", children: /* @__PURE__ */ t.jsx(
+                            x.div,
                             {
                               style: { position: "relative" },
                               initial: { y: 20, scale: 0.97 },
@@ -146,10 +147,10 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
                                 transition: { type: "spring", stiffness: 500, damping: 30, mass: 0.5 }
                               },
                               exit: { y: 20, scale: 0.97, transition: { duration: 0.15 } },
-                              children: /* @__PURE__ */ i.jsxs(
-                                g,
+                              children: /* @__PURE__ */ t.jsxs(
+                                y,
                                 {
-                                  onClick: (o) => o.stopPropagation(),
+                                  onClick: (e) => e.stopPropagation(),
                                   sx: {
                                     position: "relative",
                                     width: "100%",
@@ -160,9 +161,9 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
                                     overflow: "hidden"
                                   },
                                   children: [
-                                    f ? f(t) : /* @__PURE__ */ i.jsx(w, { item: t }),
-                                    (t.title || t.desc) && /* @__PURE__ */ i.jsxs(
-                                      a,
+                                    h ? h(a) : /* @__PURE__ */ t.jsx(g, { item: a }),
+                                    (a.title || a.desc) && /* @__PURE__ */ t.jsxs(
+                                      s,
                                       {
                                         sx: {
                                           position: "absolute",
@@ -170,12 +171,12 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
                                           right: 0,
                                           bottom: 0,
                                           p: { xs: 1.5, sm: 2, md: 3 },
-                                          background: (o) => `linear-gradient(to top, ${(o.vars || o).palette.background.paper}, transparent)`
+                                          background: (e) => `linear-gradient(to top, ${(e.vars || e).palette.background.paper}, transparent)`
                                         },
-                                        onClick: (o) => o.stopPropagation(),
+                                        onClick: (e) => e.stopPropagation(),
                                         children: [
-                                          t.title && /* @__PURE__ */ i.jsx(k, { variant: "h6", sx: { fontWeight: 600, fontSize: { xs: 14, sm: 18, md: 20 } }, children: t.title }),
-                                          t.desc && /* @__PURE__ */ i.jsx(k, { variant: "body2", sx: { opacity: 0.8, mt: 0.5 }, children: t.desc })
+                                          a.title && /* @__PURE__ */ t.jsx(k, { variant: "h6", sx: { fontWeight: 600, fontSize: { xs: 14, sm: 18, md: 20 } }, children: a.title }),
+                                          a.desc && /* @__PURE__ */ t.jsx(k, { variant: "body2", sx: { opacity: 0.8, mt: 0.5 }, children: a.desc })
                                         ]
                                       }
                                     )
@@ -183,87 +184,87 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
                                 }
                               )
                             },
-                            t.id
+                            a.id
                           ) })
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ i.jsx(
-                    m,
+                  /* @__PURE__ */ t.jsx(
+                    v,
                     {
                       "aria-label": "Close",
-                      onClick: l,
+                      onClick: d,
                       sx: {
                         position: "absolute",
                         top: { xs: 8, sm: 10, md: 12 },
                         right: { xs: 8, sm: 10, md: 12 },
-                        zIndex: (o) => o.zIndex.modal + 102
+                        zIndex: (e) => e.zIndex.modal + 102
                       },
-                      children: /* @__PURE__ */ i.jsx(F, {})
+                      children: /* @__PURE__ */ t.jsx(D, {})
                     }
                   ),
-                  P && c && /* @__PURE__ */ i.jsxs(
-                    a,
+                  V && p && /* @__PURE__ */ t.jsxs(
+                    s,
                     {
                       sx: {
                         position: "absolute",
                         top: { xs: 8, sm: 10, md: 12 },
                         left: { xs: 8, sm: 10, md: 12 },
-                        zIndex: (o) => o.zIndex.modal + 102,
+                        zIndex: (e) => e.zIndex.modal + 102,
                         padding: 1,
                         px: 2,
                         fontSize: { xs: 14, sm: 16 },
                         color: "text.primary"
                       },
                       children: [
-                        n + 1,
+                        r + 1,
                         " / ",
-                        h
+                        f
                       ]
                     }
                   ),
-                  c && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                    /* @__PURE__ */ i.jsx(
-                      m,
+                  p && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                    /* @__PURE__ */ t.jsx(
+                      v,
                       {
                         "aria-label": "Previous image",
-                        onClick: (o) => {
-                          o.stopPropagation(), v();
+                        onClick: (e) => {
+                          e.stopPropagation(), I();
                         },
-                        disabled: n === 0,
+                        disabled: r === 0,
                         sx: {
                           position: "absolute",
                           left: { xs: 8, sm: 10, md: 12 },
                           top: "50%",
                           transform: "translateY(-50%)",
-                          zIndex: (o) => o.zIndex.modal + 102,
+                          zIndex: (e) => e.zIndex.modal + 102,
                           "&:disabled": {
                             opacity: 0.5
                           }
                         },
-                        children: /* @__PURE__ */ i.jsx(T, {})
+                        children: /* @__PURE__ */ t.jsx(R, {})
                       }
                     ),
-                    /* @__PURE__ */ i.jsx(
-                      m,
+                    /* @__PURE__ */ t.jsx(
+                      v,
                       {
                         "aria-label": "Next image",
-                        onClick: (o) => {
-                          o.stopPropagation(), y();
+                        onClick: (e) => {
+                          e.stopPropagation(), w();
                         },
-                        disabled: n === h - 1,
+                        disabled: r === f - 1,
                         sx: {
                           position: "absolute",
                           right: { xs: 8, sm: 10, md: 12 },
                           top: "50%",
                           transform: "translateY(-50%)",
-                          zIndex: (o) => o.zIndex.modal + 102,
+                          zIndex: (e) => e.zIndex.modal + 102,
                           "&:disabled": {
                             opacity: 0.5
                           }
                         },
-                        children: /* @__PURE__ */ i.jsx($, {})
+                        children: /* @__PURE__ */ t.jsx(W, {})
                       }
                     )
                   ] })
@@ -272,8 +273,8 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
             )
           }
         ),
-        I && c && r.length > 1 && /* @__PURE__ */ i.jsx(
-          a,
+        _ && p && n.length > 1 && /* @__PURE__ */ t.jsx(
+          s,
           {
             sx: {
               position: "fixed",
@@ -282,8 +283,8 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
               bottom: 16,
               transform: "translateX(-50%)"
             },
-            children: /* @__PURE__ */ i.jsx(
-              g,
+            children: /* @__PURE__ */ t.jsx(
+              y,
               {
                 sx: {
                   position: "relative",
@@ -295,11 +296,11 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
                   px: 1.5,
                   py: 1
                 },
-                children: /* @__PURE__ */ i.jsx(L, { direction: "row", alignItems: "center", spacing: -1.5, children: r.map((o, u) => /* @__PURE__ */ i.jsxs(
-                  b.div,
+                children: /* @__PURE__ */ t.jsx(T, { direction: "row", alignItems: "center", spacing: -1.5, children: n.map((e, c) => /* @__PURE__ */ t.jsxs(
+                  x.div,
                   {
-                    onClick: (x) => {
-                      x.stopPropagation(), e ? e(o) : p(o);
+                    onClick: (m) => {
+                      m.stopPropagation(), i ? i(e) : u(e);
                     },
                     style: {
                       position: "relative",
@@ -308,16 +309,16 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
                       borderRadius: 10,
                       overflow: "hidden",
                       flexShrink: 0,
-                      zIndex: t.id === o.id ? 30 : r.length - u,
-                      border: t.id === o.id ? "1px solid" : void 0,
-                      borderColor: t.id === o.id ? "divider" : void 0,
+                      zIndex: a.id === e.id ? 30 : n.length - c,
+                      border: a.id === e.id ? "1px solid" : void 0,
+                      borderColor: a.id === e.id ? "divider" : void 0,
                       cursor: "pointer"
                     },
-                    initial: { rotate: u % 2 === 0 ? -15 : 15 },
+                    initial: { rotate: c % 2 === 0 ? -15 : 15 },
                     animate: {
-                      scale: t.id === o.id ? 1.2 : 1,
-                      rotate: t.id === o.id ? 0 : u % 2 === 0 ? -15 : 15,
-                      y: t.id === o.id ? -8 : 0
+                      scale: a.id === e.id ? 1.2 : 1,
+                      rotate: a.id === e.id ? 0 : c % 2 === 0 ? -15 : 15,
+                      y: a.id === e.id ? -8 : 0
                     },
                     whileHover: {
                       scale: 1.3,
@@ -326,35 +327,35 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
                       transition: { type: "spring", stiffness: 400, damping: 25 }
                     },
                     children: [
-                      f ? f(o, () => {
-                        e ? e(o) : p(o);
-                      }) : /* @__PURE__ */ i.jsx(
-                        w,
+                      h ? h(e, () => {
+                        i ? i(e) : u(e);
+                      }) : /* @__PURE__ */ t.jsx(
+                        g,
                         {
-                          item: o,
+                          item: e,
                           objectFit: "cover",
                           style: {
                             width: "100%",
                             height: "100%",
                             // Disable pointer events for videos in thumbnails to ensure parent click handler works
-                            pointerEvents: o.type === "video" ? "none" : "auto"
+                            pointerEvents: e.type === "video" ? "none" : "auto"
                           },
                           disableVideoControls: !0
                         }
                       ),
-                      /* @__PURE__ */ i.jsx(
-                        a,
+                      /* @__PURE__ */ t.jsx(
+                        s,
                         {
                           sx: {
                             position: "absolute",
                             inset: 0,
-                            background: (x) => `linear-gradient(to bottom, transparent, ${(x.vars || x).palette.action.hover}, ${(x.vars || x).palette.action.selected})`,
+                            background: (m) => `linear-gradient(to bottom, transparent, ${(m.vars || m).palette.action.hover}, ${(m.vars || m).palette.action.selected})`,
                             pointerEvents: "none"
                           }
                         }
                       ),
-                      t.id === o.id && /* @__PURE__ */ i.jsx(
-                        b.div,
+                      a.id === e.id && /* @__PURE__ */ t.jsx(
+                        x.div,
                         {
                           layoutId: "activeGlow",
                           style: {
@@ -370,7 +371,7 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
                       )
                     ]
                   },
-                  o.id
+                  e.id
                 )) })
               }
             )
@@ -380,7 +381,21 @@ const w = ({ item: s, onClick: d, style: l = {}, objectFit: e = "contain", disab
     }
   );
 };
+b.displayName = "SImageModal";
+try {
+  g.displayName = "DefaultMediaItem", g.__docgenInfo = { description: "Default MediaItem renderer for images and videos", displayName: "DefaultMediaItem", props: {} };
+} catch {
+}
+try {
+  b.displayName = "SImageModal", b.__docgenInfo = { description: "A reusable full-screen modal for displaying media items with navigation features.", displayName: "SImageModal", props: { selectedItem: { defaultValue: null, description: "Currently selected media item to display", name: "selectedItem", required: !1, type: { name: "MediaItemType | null" } }, isOpen: { defaultValue: null, description: "Whether the modal is open", name: "isOpen", required: !0, type: { name: "boolean" } }, onClose: { defaultValue: null, description: "Function to close the modal", name: "onClose", required: !0, type: { name: "() => void" } }, onItemChange: { defaultValue: null, description: "Function to change the selected item (for navigation)", name: "onItemChange", required: !1, type: { name: "((item: MediaItemType) => void)" } }, mediaItems: { defaultValue: { value: "[]" }, description: "Array of all media items for navigation (optional - if provided, enables prev/next navigation)", name: "mediaItems", required: !1, type: { name: "MediaItemType[]" } }, renderMediaItem: { defaultValue: null, description: "Custom component to render media items", name: "renderMediaItem", required: !1, type: { name: "((item: MediaItemType, onClick?: (() => void)) => ReactNode)" } }, showNavigation: { defaultValue: { value: "true" }, description: "Whether to show navigation arrows", name: "showNavigation", required: !1, type: { name: "boolean" } }, showThumbnailDock: { defaultValue: { value: "true" }, description: "Whether to show the thumbnail dock", name: "showThumbnailDock", required: !1, type: { name: "boolean" } }, showCounter: { defaultValue: { value: "true" }, description: "Whether to show the item counter", name: "showCounter", required: !1, type: { name: "boolean" } }, modalSx: { defaultValue: { value: "{}" }, description: "Custom modal styling", name: "modalSx", required: !1, type: { name: "SxProps<Theme>" } } } };
+} catch {
+}
+try {
+  simagemodal.displayName = "simagemodal", simagemodal.__docgenInfo = { description: "A reusable full-screen modal for displaying media items with navigation features.", displayName: "simagemodal", props: { selectedItem: { defaultValue: null, description: "Currently selected media item to display", name: "selectedItem", required: !1, type: { name: "MediaItemType | null" } }, isOpen: { defaultValue: null, description: "Whether the modal is open", name: "isOpen", required: !0, type: { name: "boolean" } }, onClose: { defaultValue: null, description: "Function to close the modal", name: "onClose", required: !0, type: { name: "() => void" } }, onItemChange: { defaultValue: null, description: "Function to change the selected item (for navigation)", name: "onItemChange", required: !1, type: { name: "((item: MediaItemType) => void)" } }, mediaItems: { defaultValue: { value: "[]" }, description: "Array of all media items for navigation (optional - if provided, enables prev/next navigation)", name: "mediaItems", required: !1, type: { name: "MediaItemType[]" } }, renderMediaItem: { defaultValue: null, description: "Custom component to render media items", name: "renderMediaItem", required: !1, type: { name: "((item: MediaItemType, onClick?: (() => void)) => ReactNode)" } }, showNavigation: { defaultValue: { value: "true" }, description: "Whether to show navigation arrows", name: "showNavigation", required: !1, type: { name: "boolean" } }, showThumbnailDock: { defaultValue: { value: "true" }, description: "Whether to show the thumbnail dock", name: "showThumbnailDock", required: !1, type: { name: "boolean" } }, showCounter: { defaultValue: { value: "true" }, description: "Whether to show the item counter", name: "showCounter", required: !1, type: { name: "boolean" } }, modalSx: { defaultValue: { value: "{}" }, description: "Custom modal styling", name: "modalSx", required: !1, type: { name: "SxProps<Theme>" } } } };
+} catch {
+}
 export {
-  w as DefaultMediaItem,
-  X as default
+  g as DefaultMediaItem,
+  b as SImageModal,
+  b as default
 };

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

@@ -1,4 +1,4 @@
-import { default as o } from "./s-item-not-found.js";
+import { SItemNotFound as e } from "./s-item-not-found.js";
 export {
-  o as default
+  e as default
 };

package/dist/s-item-not-found/s-item-not-found.d.ts

@@ -1,10 +1,23 @@
 import { BoxProps } from '@mui/material';
 import { SLazyImageProps } from '../s-lazy-image';
+/**
+ * Props interface for SItemNotFound component
+ */
 export interface SItemNotFoundProps {
+    /** The message text to display below the image */
     message: string;
+    /** Path to the image to display (optional, uses theme-aware default if not provided) */
     image?: string;
+    /** Additional props to pass to the root Box container */
     boxProps?: BoxProps;
+    /** Props to pass to the SLazyImage component for advanced image configuration */
     lazyImageProps?: Omit<SLazyImageProps, 'src'>;
 }
-declare const SItemNotFound: ({ message, image, boxProps, lazyImageProps }: SItemNotFoundProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A flexible empty state component that displays a custom message with an accompanying image.
+ */
+export declare const SItemNotFound: {
+    ({ message, image, boxProps, lazyImageProps }: SItemNotFoundProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SItemNotFound;

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

@@ -1,7 +1,8 @@
 import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { useColorScheme as l, Box as d, Typography as k, SvgIcon as i } from "@mui/material";
-import n from "../s-lazy-image/s-lazy-image.js";
-const x = () => /* @__PURE__ */ t.jsx(i, { sx: { height: "fit-content", width: "fit-content", maxWidth: 220, maxHeight: 220 }, children: /* @__PURE__ */ t.jsxs("svg", { width: "439", height: "326", viewBox: "0 0 439 326", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+import { useColorScheme as d, Box as n, Typography as p, SvgIcon as o } from "@mui/material";
+import "../s-lazy-image/index.js";
+import h from "../s-lazy-image/s-lazy-image.js";
+const m = () => /* @__PURE__ */ t.jsx(o, { sx: { height: "fit-content", width: "fit-content", maxWidth: 220, maxHeight: 220 }, children: /* @__PURE__ */ t.jsxs("svg", { width: "439", height: "326", viewBox: "0 0 439 326", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ t.jsxs("g", { clipPath: "url(#clip0_1173_4088)", children: [
     /* @__PURE__ */ t.jsx(
       "path",
@@ -125,7 +126,7 @@ const x = () => /* @__PURE__ */ t.jsx(i, { sx: { height: "fit-content", width: "
     )
   ] }),
   /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsx("clipPath", { id: "clip0_1173_4088", children: /* @__PURE__ */ t.jsx("rect", { width: "439", height: "326", fill: "white" }) }) })
-] }) }), a = () => /* @__PURE__ */ t.jsx(i, { sx: { height: "fit-content", width: "fit-content", maxWidth: 220, maxHeight: 220 }, children: /* @__PURE__ */ t.jsxs("svg", { width: "439", height: "326", viewBox: "0 0 439 326", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+] }) }), c = () => /* @__PURE__ */ t.jsx(o, { sx: { height: "fit-content", width: "fit-content", maxWidth: 220, maxHeight: 220 }, children: /* @__PURE__ */ t.jsxs("svg", { width: "439", height: "326", viewBox: "0 0 439 326", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ t.jsxs("g", { clipPath: "url(#clip0_595_6559)", children: [
     /* @__PURE__ */ t.jsx(
       "path",
@@ -249,13 +250,23 @@ const x = () => /* @__PURE__ */ t.jsx(i, { sx: { height: "fit-content", width: "
     )
   ] }),
   /* @__PURE__ */ t.jsx("defs", { children: /* @__PURE__ */ t.jsx("clipPath", { id: "clip0_595_6559", children: /* @__PURE__ */ t.jsx("rect", { width: "439", height: "326", fill: "white" }) }) })
-] }) }), c = ({ message: e, image: C, boxProps: s, lazyImageProps: r }) => {
-  const { mode: o } = l(), h = o === "light" ? /* @__PURE__ */ t.jsx(x, {}) : /* @__PURE__ */ t.jsx(a, {});
-  return /* @__PURE__ */ t.jsxs(d, { display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column", ...s, children: [
-    C ? /* @__PURE__ */ t.jsx(n, { src: C, width: 220, height: 220, ...r }) : h,
-    /* @__PURE__ */ t.jsx(k, { variant: "h6", color: "text.disabled", children: e })
+] }) }), i = ({ message: e, image: s, boxProps: r, lazyImageProps: C }) => {
+  const { mode: a } = d(), l = a === "light" ? /* @__PURE__ */ t.jsx(m, {}) : /* @__PURE__ */ t.jsx(c, {});
+  return /* @__PURE__ */ t.jsxs(n, { display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column", ...r, children: [
+    s ? /* @__PURE__ */ t.jsx(h, { src: s, width: 220, height: 220, ...C }) : l,
+    /* @__PURE__ */ t.jsx(p, { variant: "h6", color: "text.disabled", children: e })
   ] });
 };
+i.displayName = "SItemNotFound";
+try {
+  i.displayName = "SItemNotFound", i.__docgenInfo = { description: "A flexible empty state component that displays a custom message with an accompanying image.", displayName: "SItemNotFound", props: { message: { defaultValue: null, description: "The message text to display below the image", name: "message", required: !0, type: { name: "string" } }, image: { defaultValue: null, description: "Path to the image to display (optional, uses theme-aware default if not provided)", name: "image", required: !1, type: { name: "string" } }, boxProps: { defaultValue: null, description: "Additional props to pass to the root Box container", name: "boxProps", required: !1, type: { name: "BoxProps" } }, lazyImageProps: { defaultValue: null, description: "Props to pass to the SLazyImage component for advanced image configuration", name: "lazyImageProps", required: !1, type: { name: 'Omit<SLazyImageProps, "src">' } } } };
+} catch {
+}
+try {
+  sitemnotfound.displayName = "sitemnotfound", sitemnotfound.__docgenInfo = { description: "A flexible empty state component that displays a custom message with an accompanying image.", displayName: "sitemnotfound", props: { message: { defaultValue: null, description: "The message text to display below the image", name: "message", required: !0, type: { name: "string" } }, image: { defaultValue: null, description: "Path to the image to display (optional, uses theme-aware default if not provided)", name: "image", required: !1, type: { name: "string" } }, boxProps: { defaultValue: null, description: "Additional props to pass to the root Box container", name: "boxProps", required: !1, type: { name: "BoxProps" } }, lazyImageProps: { defaultValue: null, description: "Props to pass to the SLazyImage component for advanced image configuration", name: "lazyImageProps", required: !1, type: { name: 'Omit<SLazyImageProps, "src">' } } } };
+} catch {
+}
 export {
-  c as default
+  i as SItemNotFound,
+  i as default
 };

package/dist/s-label/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-label.js";
+import { SLabel as f } from "./s-label.js";
 export {
-  o as default
+  f as default
 };