@solostylist/ui-kit 1.0.197 → 1.0.200

package/dist/s-avatar/s-avatar.js

@@ -6,13 +6,13 @@ const n = ({ avatar: i, name: a, showName: e = !1, size: r = 40, avatarProps: o
     h,
     {
       src: i,
-      alt: a || "Avatar",
+      alt: a ?? "Avatar",
       width: r,
       height: r,
       variant: "circular",
       style: { borderRadius: "50%" }
     }
-  ) : a?.[0] || "A" }),
+  ) : a?.[0] ?? "A" }),
   e && /* @__PURE__ */ t.jsx(d, { variant: "body1", fontSize: 20, children: a })
 ] });
 n.displayName = "SAvatar";

package/dist/s-blur-text/s-blur-text.js

@@ -1,5 +1,5 @@
-import { j as y } from "../jsx-runtime-tc70JA_2.js";
-import { useState as K, useRef as R, useEffect as V, useMemo as b } from "react";
+import { j as m } from "../jsx-runtime-tc70JA_2.js";
+import { useState as K, useRef as R, useEffect as V, useMemo as y } from "react";
 import { Typography as B } from "@mui/material";
 import { motion as D } from "framer-motion";
 const F = (s, a) => {
@@ -14,30 +14,30 @@ const F = (s, a) => {
   direction: o = "top",
   threshold: t = 0.1,
   rootMargin: l = "0px",
-  animationFrom: d,
-  animationTo: h,
-  easing: w = (n) => n,
-  onAnimationComplete: x,
-  stepDuration: j = 0.35,
-  variant: S = "body1",
-  sx: g,
-  ...v
+  animationFrom: b,
+  animationTo: d,
+  easing: h = (n) => n,
+  onAnimationComplete: w,
+  stepDuration: x = 0.35,
+  variant: j = "body1",
+  sx: S,
+  ...g
 }) => {
-  const n = i === "words" ? s.split(" ") : s.split(""), [T, k] = K(!1), c = R(null);
+  const n = i === "words" ? s.split(" ") : s.split(""), [v, T] = K(!1), c = R(null);
   V(() => {
     if (!c.current) return;
     const r = new IntersectionObserver(
       ([e]) => {
-        e.isIntersecting && (k(!0), r.unobserve(c.current));
+        e.isIntersecting && (T(!0), r.unobserve(c.current));
       },
       { threshold: t, rootMargin: l }
     );
     return r.observe(c.current), () => r.disconnect();
   }, [t, l]);
-  const C = b(
+  const k = y(
     () => o === "top" ? { filter: "blur(10px)", opacity: 0, y: -50 } : { filter: "blur(10px)", opacity: 0, y: 50 },
     [o]
-  ), E = b(
+  ), C = y(
     () => [
       {
         filter: "blur(5px)",
@@ -47,20 +47,21 @@ const F = (s, a) => {
       { filter: "blur(0px)", opacity: 1, y: 0 }
     ],
     [o]
-  ), u = d ?? C, f = h ?? E, p = f.length + 1, I = j * (p - 1), O = Array.from({ length: p }, (r, e) => p === 1 ? 0 : e / (p - 1));
-  return /* @__PURE__ */ y.jsx(B, { ref: c, variant: S, sx: g, ...v, children: n.map((r, e) => {
-    const A = F(u, f), m = {
-      duration: I,
-      times: O,
-      delay: e * a / 1e3
+  ), u = b ?? k, f = d ?? C, p = f.length + 1, E = x * (p - 1), I = Array.from({ length: p }, (r, e) => p === 1 ? 0 : e / (p - 1));
+  return /* @__PURE__ */ m.jsx(B, { ref: c, variant: j, sx: S, ...g, children: n.map((r, e) => {
+    const O = F(u, f), A = {
+      duration: E,
+      times: I,
+      delay: e * a / 1e3,
+      ease: h
     };
-    return m.ease = w, /* @__PURE__ */ y.jsxs(
+    return /* @__PURE__ */ m.jsxs(
       D.span,
       {
         initial: u,
-        animate: T ? A : u,
-        transition: m,
-        onAnimationComplete: e === n.length - 1 ? x : void 0,
+        animate: v ? O : u,
+        transition: A,
+        onAnimationComplete: e === n.length - 1 ? w : void 0,
         style: {
           display: "inline-block",
           willChange: "transform, filter, opacity"

package/dist/s-breadcrumbs/s-breadcrumbs.js

@@ -1,6 +1,6 @@
 import { j as o } from "../jsx-runtime-tc70JA_2.js";
 import { forwardRef as f } from "react";
-import { C as i } from "../ChevronRight-5ZX3FodP.js";
+import { C as i } from "../ChevronRight-DbWSr8yz.js";
 import { Breadcrumbs as $, Typography as t, Link as e } from "@mui/material";
 const j = f(
   ({

package/dist/s-carousel/s-carousel.d.ts

@@ -6,13 +6,13 @@ import { default as Slider, Settings } from 'react-slick';
  */
 export interface SCarouselProps extends PropsWithChildren, Settings {
     /** Custom color for the navigation dots */
-    dotColor?: string;
+    readonly dotColor?: string;
     /** Space between slides in pixels */
-    spaceBetween?: number;
+    readonly spaceBetween?: number;
     /** Custom styles for the dots container */
-    dotStyles?: SxProps<Theme>;
+    readonly dotStyles?: SxProps<Theme>;
     /** Custom styles for the arrow buttons */
-    arrowStyles?: SxProps<Theme>;
+    readonly arrowStyles?: SxProps<Theme>;
 }
 /**
  * A carousel component built on react-slick with smooth sliding functionality and customizable navigation.

package/dist/s-carousel/s-carousel.js

@@ -3,7 +3,7 @@ import ue, { forwardRef as nt } from "react";
 import { styled as Me, useTheme as it } from "@mui/material";
 import { c as be, a as ot, g as at } from "../_commonjsHelpers-ByX85dGu.js";
 import { SIconButton as Ue } from "../s-icon-button/s-icon-button.js";
-import { c as Ve } from "../createSvgIcon-DTNHY3_v.js";
+import { c as Ve } from "../createSvgIcon-BkbeLOhM.js";
 import '../assets/s-carousel.css';const lt = Ve(/* @__PURE__ */ oe.jsx("path", {
   d: "M17.77 3.77 16 2 6 12l10 10 1.77-1.77L9.54 12z"
 }), "ArrowBackIosNew"), st = Ve(/* @__PURE__ */ oe.jsx("path", {
@@ -2374,7 +2374,7 @@ const Wt = /* @__PURE__ */ at(At), qt = Me("div", {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  color: (i.vars || i).palette.primary.main,
+  color: (i.vars ?? i).palette.primary.main,
   "& li": {
     width: 13,
     height: 7,
@@ -2384,7 +2384,7 @@ const Wt = /* @__PURE__ */ at(At), qt = Me("div", {
     alignItems: "center",
     justifyContent: "center",
     transition: "all 0.4s",
-    "&.slick-active span": { backgroundColor: (i.vars || i).palette.primary.main },
+    "&.slick-active span": { backgroundColor: (i.vars ?? i).palette.primary.main },
     "&.slick-active": { width: 18 }
   }
 })), Bt = Me("span", {
@@ -2395,7 +2395,7 @@ const Wt = /* @__PURE__ */ at(At), qt = Me("div", {
   borderRadius: 12,
   cursor: "pointer",
   position: "relative",
-  backgroundColor: i || (c.vars || c).palette.divider
+  backgroundColor: i ?? (c.vars ?? c).palette.divider
 }));
 function Xt({ onClick: i, sx: c, className: h }) {
   const O = h?.split(" ").filter((y) => y !== "slick-next").join(" ");

package/dist/s-chat-input/s-chat-input.js

@@ -5,9 +5,9 @@ import q from "emoji-picker-react";
 import { SFileIcon as G } from "../s-file-icon/s-file-icon.js";
 import { SIconButton as d } from "../s-icon-button/s-icon-button.js";
 import { STextField as J } from "../s-text-field/s-text-field.js";
-import { C as Q } from "../Close-C-pCw-CD.js";
-import { c as R } from "../createSvgIcon-DTNHY3_v.js";
-import { A as X } from "../ArrowUpward-JWPHrR6I.js";
+import { C as Q } from "../Close-lHCUMitI.js";
+import { c as R } from "../createSvgIcon-BkbeLOhM.js";
+import { A as X } from "../ArrowUpward-D8eqD-si.js";
 const Y = R(/* @__PURE__ */ r.jsx("path", {
   d: "M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6z"
 }), "AttachFile"), Z = R(/* @__PURE__ */ r.jsx("path", {
@@ -32,7 +32,7 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
     }, k = () => {
       a || p.trim().length === 0 && l.length === 0 || (I?.(p, l), u(""), i.forEach((e) => URL.revokeObjectURL(e)), h(/* @__PURE__ */ new Map()), m([]));
     }, z = (e) => {
-      const n = Array.from(e.target.files || []).filter((t) => !(j && t.size > j));
+      const n = Array.from(e.target.files ?? []).filter((t) => !(j && t.size > j));
       m((t) => [...t, ...n]), E?.(n), e.target.value = "";
     }, K = (e) => {
       const o = l[e];

package/dist/s-chat-message/s-chat-message.js

@@ -1,121 +1,132 @@
 import { j as e } from "../jsx-runtime-tc70JA_2.js";
-import { useState as C } from "react";
-import { Box as r, Typography as t, Paper as V, IconButton as k } from "@mui/material";
-import { SAvatar as M } from "../s-avatar/s-avatar.js";
+import { useState as k } from "react";
+import { Box as s, Typography as n, Paper as V, IconButton as M } from "@mui/material";
+import { SAvatar as F } from "../s-avatar/s-avatar.js";
 import { SImageModal as P } from "../s-image-modal/s-image-modal.js";
 import U from "../s-lazy-image/s-lazy-image.js";
-import { SSkeleton as l } from "../s-skeleton/s-skeleton.js";
-import { c as h } from "../createSvgIcon-DTNHY3_v.js";
-import { f as H, a as q } from "../utils-DJIrqgo5.js";
-import { D as E } from "../Download-D97XSAig.js";
-const G = h(/* @__PURE__ */ e.jsx("path", {
+import { SSkeleton as t } from "../s-skeleton/s-skeleton.js";
+import { c as v } from "../createSvgIcon-BkbeLOhM.js";
+import { f as H, a as q } from "../utils-D1UMIV0b.js";
+import { D as E } from "../Download-BoRQUwCf.js";
+const G = v(/* @__PURE__ */ e.jsx("path", {
   d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"
-}), "ErrorOutline"), J = h(/* @__PURE__ */ e.jsx("path", {
+}), "ErrorOutline"), J = v(/* @__PURE__ */ e.jsx("path", {
   d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z"
-}), "InsertDriveFile"), K = h(/* @__PURE__ */ e.jsx("path", {
+}), "InsertDriveFile"), K = v(/* @__PURE__ */ e.jsx("path", {
   d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"
-}), "Refresh"), Q = ({
-  message: m,
-  variant: F = "received",
-  timestamp: g,
-  avatar: j,
-  senderName: o,
-  showAvatar: n = !0,
-  showTimestamp: u = !1,
-  maxWidth: v = "70%",
-  attachments: f = [],
-  onAttachmentClick: a,
-  onDownload: d,
-  hasError: x = !1,
+}), "Refresh"), Q = ({ isSent: r, showAvatar: d, showTimestamp: x, senderName: p, maxWidth: l, sx: a, ...c }) => /* @__PURE__ */ e.jsxs(
+  s,
+  {
+    display: "flex",
+    flexDirection: r ? "row-reverse" : "row",
+    alignItems: "flex-start",
+    gap: 1,
+    mb: 1,
+    sx: {
+      maxWidth: l,
+      alignSelf: r ? "flex-end" : "flex-start",
+      ...a
+    },
+    ...c,
+    children: [
+      d && !r && /* @__PURE__ */ e.jsx(t, { component: "rounded-avatar", width: 36, height: 36 }),
+      /* @__PURE__ */ e.jsxs(
+        s,
+        {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: r ? "flex-end" : "flex-start",
+          gap: 0.5,
+          sx: { minWidth: 0 },
+          children: [
+            p && !r && /* @__PURE__ */ e.jsx(t, { variant: "text", width: 100, height: 12, sx: { ml: 0.5 } }),
+            /* @__PURE__ */ e.jsxs(
+              s,
+              {
+                sx: {
+                  display: "inline-block",
+                  width: "20rem",
+                  maxWidth: "100%",
+                  overflow: "hidden",
+                  ml: 0.5
+                },
+                children: [
+                  /* @__PURE__ */ e.jsx(t, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
+                  /* @__PURE__ */ e.jsx(t, { variant: "text", width: "85%", height: 16, sx: { mb: 0.5 } }),
+                  /* @__PURE__ */ e.jsx(t, { variant: "text", width: "70%", height: 16 })
+                ]
+              }
+            ),
+            x && /* @__PURE__ */ e.jsx(t, { variant: "text", width: 60, height: 10, sx: { ml: r ? 0 : 0.5, mr: r ? 0.5 : 0 } })
+          ]
+        }
+      ),
+      d && r && /* @__PURE__ */ e.jsx(t, { component: "rounded-avatar", width: 36, height: 36 })
+    ]
+  }
+), X = ({
+  message: r,
+  variant: d = "received",
+  timestamp: x,
+  avatar: p,
+  senderName: l,
+  showAvatar: a = !0,
+  showTimestamp: c = !1,
+  maxWidth: I = "70%",
+  attachments: u = [],
+  onAttachmentClick: f,
+  onDownload: h,
+  hasError: m = !1,
   errorMessage: W = "Failed to send message",
-  onRetry: I,
+  onRetry: y,
   loading: D = !1,
-  sx: y,
-  ...S
+  sx: w,
+  ...b
 }) => {
-  const [p, w] = C(null), [O, b] = C(!1), s = F === "sent", L = (i) => {
-    a ? a(i) : (w(i), b(!0));
+  const [g, z] = k(null), [O, S] = k(!1), o = d === "sent", L = (i) => {
+    f ? f(i) : (z(i), S(!0));
   }, R = (i) => {
-    a ? a(i) : d && d(i);
-  }, c = f.filter((i) => i.type === "image"), z = f.filter((i) => i.type === "file");
-  return D ? /* @__PURE__ */ e.jsxs(
-    r,
+    f ? f(i) : h && h(i);
+  }, j = u.filter((i) => i.type === "image"), C = u.filter((i) => i.type === "file");
+  return D ? /* @__PURE__ */ e.jsx(
+    Q,
     {
-      display: "flex",
-      flexDirection: s ? "row-reverse" : "row",
-      alignItems: "flex-start",
-      gap: 1,
-      mb: 1,
-      sx: {
-        maxWidth: v,
-        alignSelf: s ? "flex-end" : "flex-start",
-        ...y
-      },
-      ...S,
-      children: [
-        n && !s && /* @__PURE__ */ e.jsx(l, { component: "rounded-avatar", width: 36, height: 36 }),
-        /* @__PURE__ */ e.jsxs(
-          r,
-          {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: s ? "flex-end" : "flex-start",
-            gap: 0.5,
-            sx: { minWidth: 0 },
-            children: [
-              o && !s && /* @__PURE__ */ e.jsx(l, { variant: "text", width: 100, height: 12, sx: { ml: 0.5 } }),
-              /* @__PURE__ */ e.jsxs(
-                r,
-                {
-                  sx: {
-                    display: "inline-block",
-                    width: "20rem",
-                    maxWidth: "100%",
-                    overflow: "hidden",
-                    ml: 0.5
-                  },
-                  children: [
-                    /* @__PURE__ */ e.jsx(l, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
-                    /* @__PURE__ */ e.jsx(l, { variant: "text", width: "85%", height: 16, sx: { mb: 0.5 } }),
-                    /* @__PURE__ */ e.jsx(l, { variant: "text", width: "70%", height: 16 })
-                  ]
-                }
-              ),
-              u && /* @__PURE__ */ e.jsx(l, { variant: "text", width: 60, height: 10, sx: { ml: s ? 0 : 0.5, mr: s ? 0.5 : 0 } })
-            ]
-          }
-        ),
-        n && s && /* @__PURE__ */ e.jsx(l, { component: "rounded-avatar", width: 36, height: 36 })
-      ]
+      isSent: o,
+      showAvatar: a,
+      showTimestamp: c,
+      senderName: l,
+      maxWidth: I,
+      sx: w,
+      ...b
     }
   ) : /* @__PURE__ */ e.jsxs(
-    r,
+    s,
     {
       display: "flex",
-      flexDirection: s ? "row-reverse" : "row",
+      flexDirection: o ? "row-reverse" : "row",
       alignItems: "flex-start",
       gap: 1,
       mb: 1,
       sx: {
-        maxWidth: v,
-        alignSelf: s ? "flex-end" : "flex-start",
-        ...y
+        maxWidth: I,
+        alignSelf: o ? "flex-end" : "flex-start",
+        ...w
       },
-      ...S,
+      ...b,
       children: [
-        n && !s && /* @__PURE__ */ e.jsx(M, { avatar: j, name: o, size: 36 }),
+        a && !o && /* @__PURE__ */ e.jsx(F, { avatar: p, name: l, size: 36 }),
         /* @__PURE__ */ e.jsxs(
-          r,
+          s,
           {
             display: "flex",
             flexDirection: "column",
-            alignItems: s ? "flex-end" : "flex-start",
+            alignItems: o ? "flex-end" : "flex-start",
             gap: 0.5,
             sx: { minWidth: 0 },
             children: [
-              o && !s && /* @__PURE__ */ e.jsx(t, { children: o }),
+              l && !o && /* @__PURE__ */ e.jsx(n, { children: l }),
               /* @__PURE__ */ e.jsxs(
-                r,
+                s,
                 {
                   sx: {
                     display: "inline-block",
@@ -123,29 +134,29 @@ const G = h(/* @__PURE__ */ e.jsx("path", {
                     wordBreak: "break-word",
                     maxWidth: "100%",
                     border: "1px solid",
-                    borderColor: x ? "error.main" : "divider",
-                    ...x && {
+                    borderColor: m ? "error.main" : "divider",
+                    ...m && {
                       opacity: 0.7
                     },
                     overflow: "hidden"
                   },
                   children: [
-                    c.length > 0 && /* @__PURE__ */ e.jsx(
-                      r,
+                    j.length > 0 && /* @__PURE__ */ e.jsx(
+                      s,
                       {
                         sx: {
                           display: "grid",
-                          gridTemplateColumns: c.length === 1 ? "1fr" : "repeat(2, 1fr)",
+                          gridTemplateColumns: j.length === 1 ? "1fr" : "repeat(2, 1fr)",
                           gap: 0.5,
                           p: 0.5
                         },
                         minWidth: 200,
-                        children: c.map((i) => /* @__PURE__ */ e.jsx(
-                          r,
+                        children: j.map((i) => /* @__PURE__ */ e.jsx(
+                          s,
                           {
                             sx: {
                               position: "relative",
-                              paddingTop: c.length === 1 ? "66.67%" : "100%",
+                              paddingTop: j.length === 1 ? "66.67%" : "100%",
                               cursor: "pointer",
                               borderRadius: 1.5,
                               overflow: "hidden",
@@ -157,8 +168,8 @@ const G = h(/* @__PURE__ */ e.jsx("path", {
                             children: /* @__PURE__ */ e.jsx(
                               U,
                               {
-                                src: i.thumbnailUrl || i.url,
-                                alt: i.name || "Image",
+                                src: i.thumbnailUrl ?? i.url,
+                                alt: i.name ?? "Image",
                                 width: "100%",
                                 height: "100%",
                                 style: {
@@ -174,7 +185,7 @@ const G = h(/* @__PURE__ */ e.jsx("path", {
                         ))
                       }
                     ),
-                    z.length > 0 && /* @__PURE__ */ e.jsx(r, { sx: { p: 1.5 }, children: z.map((i, T) => /* @__PURE__ */ e.jsxs(
+                    C.length > 0 && /* @__PURE__ */ e.jsx(s, { sx: { p: 1.5 }, children: C.map((i, T) => /* @__PURE__ */ e.jsxs(
                       V,
                       {
                         variant: "outlined",
@@ -189,9 +200,9 @@ const G = h(/* @__PURE__ */ e.jsx("path", {
                         onClick: () => R(i),
                         children: [
                           /* @__PURE__ */ e.jsx(J, { sx: { fontSize: 32 } }),
-                          /* @__PURE__ */ e.jsxs(r, { sx: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ e.jsxs(s, { sx: { flex: 1, minWidth: 0 }, children: [
                             /* @__PURE__ */ e.jsx(
-                              t,
+                              n,
                               {
                                 variant: "body2",
                                 sx: {
@@ -201,16 +212,16 @@ const G = h(/* @__PURE__ */ e.jsx("path", {
                                   textOverflow: "ellipsis",
                                   whiteSpace: "nowrap"
                                 },
-                                children: i.name || "Unnamed File"
+                                children: i.name ?? "Unnamed File"
                               }
                             ),
-                            i.size && /* @__PURE__ */ e.jsx(t, { variant: "caption", children: H(i.size) })
+                            i.size && /* @__PURE__ */ e.jsx(n, { variant: "caption", children: H(i.size) })
                           ] }),
-                          d && /* @__PURE__ */ e.jsx(
-                            k,
+                          h && /* @__PURE__ */ e.jsx(
+                            M,
                             {
                               onClick: (B) => {
-                                B.stopPropagation(), d(i);
+                                B.stopPropagation(), h(i);
                               },
                               children: /* @__PURE__ */ e.jsx(E, {})
                             }
@@ -219,43 +230,43 @@ const G = h(/* @__PURE__ */ e.jsx("path", {
                       },
                       i.id
                     )) }),
-                    m && /* @__PURE__ */ e.jsx(r, { sx: { px: 2, py: 1.5, pt: f.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ e.jsx(
-                      t,
+                    r && /* @__PURE__ */ e.jsx(s, { sx: { px: 2, py: 1.5, pt: u.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ e.jsx(
+                      n,
                       {
                         variant: "body2",
                         sx: {
                           fontSize: "0.875rem",
                           whiteSpace: "pre-wrap",
-                          color: x ? "error.main" : "inherit"
+                          color: m ? "error.main" : "inherit"
                         },
-                        children: m
+                        children: r
                       }
                     ) })
                   ]
                 }
               ),
-              u && g && /* @__PURE__ */ e.jsx(t, { variant: "caption", children: q(g) }),
-              x && /* @__PURE__ */ e.jsxs(r, { display: "flex", alignItems: "center", gap: 0.5, color: "error.main", children: [
+              c && x && /* @__PURE__ */ e.jsx(n, { variant: "caption", children: q(x) }),
+              m && /* @__PURE__ */ e.jsxs(s, { display: "flex", alignItems: "center", gap: 0.5, color: "error.main", children: [
                 /* @__PURE__ */ e.jsx(G, { sx: { fontSize: "1rem" } }),
-                /* @__PURE__ */ e.jsx(t, { color: "inherit", children: W }),
-                I && /* @__PURE__ */ e.jsx(k, { onClick: I, children: /* @__PURE__ */ e.jsx(K, {}) })
+                /* @__PURE__ */ e.jsx(n, { color: "inherit", children: W }),
+                y && /* @__PURE__ */ e.jsx(M, { onClick: y, children: /* @__PURE__ */ e.jsx(K, {}) })
               ] })
             ]
           }
         ),
-        n && s && /* @__PURE__ */ e.jsx(M, { avatar: j, name: o, size: 36 }),
-        p && /* @__PURE__ */ e.jsx(
+        a && o && /* @__PURE__ */ e.jsx(F, { avatar: p, name: l, size: 36 }),
+        g && /* @__PURE__ */ e.jsx(
           P,
           {
             isOpen: O,
             onClose: () => {
-              b(!1), w(null);
+              S(!1), z(null);
             },
             selectedItem: {
-              id: p.id,
+              id: g.id,
               type: "image",
-              url: p.url,
-              title: p.name
+              url: g.url,
+              title: g.name
             },
             showNavigation: !1,
             showThumbnailDock: !1
@@ -265,8 +276,8 @@ const G = h(/* @__PURE__ */ e.jsx("path", {
     }
   );
 };
-Q.displayName = "SChatMessage";
+X.displayName = "SChatMessage";
 export {
-  Q as SChatMessage,
-  Q as default
+  X as SChatMessage,
+  X as default
 };