npm - @solostylist/ui-kit - Versions diffs - 1.0.143 → 1.0.145 - Mend

@solostylist/ui-kit 1.0.143 → 1.0.145

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/s-chat-message/s-chat-message.js +10 -24
package/dist/s-comment-message/s-comment-message.d.ts +2 -0
package/dist/s-comment-message/s-comment-message.js +90 -70
package/dist/s-review/s-review.d.ts +2 -0
package/dist/s-review/s-review.js +111 -88
package/package.json +1 -1

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

@@ -14,7 +14,7 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
 }), "InsertDriveFile"), G = x(/* @__PURE__ */ r.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"), _ = ({
-  message: f,
+  message: h,
   variant: w = "received",
   timestamp: g,
   avatar: u,
@@ -25,7 +25,7 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
   attachments: m = [],
   onAttachmentClick: t,
   onDownload: n,
-  hasError: h = !1,
+  hasError: f = !1,
   errorMessage: T = "Failed to send message",
   onRetry: v,
   sx: B,
@@ -93,11 +93,11 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
                     backgroundColor: i ? "primary.main" : "",
                     color: i ? "primary.contrastText" : "text.primary",
                     border: i ? "none" : "1px solid",
-                    borderColor: h ? "error.main" : "divider",
+                    borderColor: f ? "error.main" : "divider",
                     ...i && {
                       backgroundColor: "primary.dark"
                     },
-                    ...h && {
+                    ...f && {
                       opacity: 0.7
                     },
                     overflow: "hidden"
@@ -219,7 +219,7 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
                       },
                       e.id
                     )) }),
-                    f && /* @__PURE__ */ r.jsx(o, { sx: { px: 2, py: 1.5, pt: m.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ r.jsx(
+                    h && /* @__PURE__ */ r.jsx(o, { sx: { px: 2, py: 1.5, pt: m.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ r.jsx(
                       s,
                       {
                         variant: "body2",
@@ -228,7 +228,7 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
                           lineHeight: 1.4,
                           whiteSpace: "pre-wrap"
                         },
-                        children: f
+                        children: h
                       }
                     ) })
                   ]
@@ -247,7 +247,7 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
                   children: H(g)
                 }
               ),
-              h && /* @__PURE__ */ r.jsxs(
+              f && /* @__PURE__ */ r.jsxs(
                 o,
                 {
                   display: "flex",
@@ -259,33 +259,19 @@ const A = x(/* @__PURE__ */ r.jsx("path", {
                     mr: i ? 0.5 : 0
                   },
                   children: [
-                    /* @__PURE__ */ r.jsx(P, { sx: { fontSize: "0.875rem" } }),
+                    /* @__PURE__ */ r.jsx(P, { sx: { fontSize: "1rem" } }),
                     /* @__PURE__ */ r.jsx(
                       s,
                       {
                         variant: "caption",
                         sx: {
-                          fontSize: "0.75rem",
+                          fontSize: "0.875rem",
                           fontWeight: 500
                         },
                         children: T
                       }
                     ),
-                    v && /* @__PURE__ */ r.jsx(
-                      b,
-                      {
-                        size: "small",
-                        onClick: v,
-                        sx: {
-                          color: "error.main",
-                          padding: 0.25,
-                          "&:hover": {
-                            backgroundColor: "error.light"
-                          }
-                        },
-                        children: /* @__PURE__ */ r.jsx(G, { sx: { fontSize: "0.875rem" } })
-                      }
-                    )
+                    v && /* @__PURE__ */ r.jsx(b, { size: "small", onClick: v, children: /* @__PURE__ */ r.jsx(G, {}) })
                   ]
                 }
               )

package/dist/s-comment-message/s-comment-message.d.ts CHANGED Viewed

@@ -12,10 +12,12 @@ export interface SCommentMessageProps {
     totalReplies?: number;
     onLike?: (commentId: string | number) => void;
     onReply?: (commentId: string | number, parentId?: string | number) => void;
+    onToggleReplies?: (commentId: string | number) => void;
     showReplies?: boolean;
     avatarSize?: number;
     level?: number;
     maxLevel?: number;
+    loading?: boolean;
     children?: React.ReactNode;
     sx?: SxProps;
 }

package/dist/s-comment-message/s-comment-message.js CHANGED Viewed

@@ -1,105 +1,125 @@
 import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as y, useEffect as E } from "react";
-import { Box as m, Stack as M, Typography as d, IconButton as P, Button as R, Collapse as V } from "@mui/material";
-import Y from "../s-avatar/s-avatar.js";
-import { F as q } from "../Favorite-DmSF47XC.js";
-import { c as S } from "../createSvgIcon-Dq42_0tn.js";
-import { E as G } from "../ExpandMore-mZGpvXf6.js";
-const J = S(/* @__PURE__ */ t.jsx("path", {
+import { useState as S, useEffect as R } from "react";
+import { Box as c, Stack as x, Typography as g, IconButton as q, Button as F, Collapse as G } from "@mui/material";
+import J from "../s-avatar/s-avatar.js";
+import e from "../s-skeleton/s-skeleton.js";
+import { F as K } from "../Favorite-DmSF47XC.js";
+import { c as L } from "../createSvgIcon-Dq42_0tn.js";
+import { E as O } from "../ExpandMore-mZGpvXf6.js";
+const Q = L(/* @__PURE__ */ t.jsx("path", {
   d: "m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
-}), "ExpandLess"), K = S(/* @__PURE__ */ t.jsx("path", {
+}), "ExpandLess"), U = L(/* @__PURE__ */ t.jsx("path", {
   d: "M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3m-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05"
-}), "FavoriteBorder"), O = S(/* @__PURE__ */ t.jsx("path", {
+}), "FavoriteBorder"), X = L(/* @__PURE__ */ t.jsx("path", {
   d: "M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11"
-}), "Reply"), Q = (a) => {
-  const c = /* @__PURE__ */ new Date(), x = typeof a == "string" ? new Date(a) : a, h = c.getTime() - x.getTime(), f = Math.floor(h / 1e3), s = Math.floor(f / 60), o = Math.floor(s / 60), e = Math.floor(o / 24), l = Math.floor(e / 7), n = Math.floor(e / 30), r = Math.floor(e / 365);
-  return f < 60 ? "just now" : s < 60 ? s === 1 ? "1 minute ago" : `${s} minutes ago` : o < 24 ? o === 1 ? "1 hour ago" : `${o} hours ago` : e < 7 ? e === 1 ? "1 day ago" : `${e} days ago` : l < 4 ? l === 1 ? "1 week ago" : `${l} weeks ago` : n < 12 ? n === 1 ? "1 month ago" : `${n} months ago` : r === 1 ? "1 year ago" : `${r} years ago`;
-}, U = ({
-  id: a = Date.now(),
-  userName: c,
-  userAvatar: x,
-  commentContent: h,
+}), "Reply"), Z = (i) => {
+  const d = /* @__PURE__ */ new Date(), j = typeof i == "string" ? new Date(i) : i, p = d.getTime() - j.getTime(), f = Math.floor(p / 1e3), n = Math.floor(f / 60), o = Math.floor(n / 60), s = Math.floor(o / 24), h = Math.floor(s / 7), r = Math.floor(s / 30), a = Math.floor(s / 365);
+  return f < 60 ? "just now" : n < 60 ? n === 1 ? "1 minute ago" : `${n} minutes ago` : o < 24 ? o === 1 ? "1 hour ago" : `${o} hours ago` : s < 7 ? s === 1 ? "1 day ago" : `${s} days ago` : h < 4 ? h === 1 ? "1 week ago" : `${h} weeks ago` : r < 12 ? r === 1 ? "1 month ago" : `${r} months ago` : a === 1 ? "1 year ago" : `${a} years ago`;
+}, _ = ({
+  id: i = Date.now(),
+  userName: d,
+  userAvatar: j,
+  commentContent: p,
   datetime: f,
-  likes: s = 0,
+  likes: n = 0,
   isLiked: o = !1,
-  replies: e = [],
-  totalReplies: l,
-  onLike: n,
-  onReply: r,
-  showReplies: p = !0,
-  avatarSize: L = 48,
-  level: w = 0,
+  replies: s = [],
+  totalReplies: h,
+  onLike: r,
+  onReply: a,
+  onToggleReplies: C,
+  showReplies: u = !0,
+  avatarSize: m = 48,
+  level: b = 0,
   maxLevel: z = 3,
-  children: C,
-  sx: B = {}
+  loading: T = !1,
+  children: k,
+  sx: $ = {}
 }) => {
-  const [$, g] = y(s), [j, u] = y(o), [I, D] = y(!1), T = () => {
-    j ? (g((i) => Math.max(0, i - 1)), u(!1)) : (g((i) => i + 1), u(!0)), n && n(a);
-  }, b = () => {
-    r && r(a);
-  }, F = () => {
-    D(!I);
-  }, H = Q(f), v = l ?? e.length, k = v > 0, W = Math.min(w, z) * 2;
-  return E(() => {
-    g(s);
-  }, [s]), E(() => {
-    u(o);
-  }, [o]), /* @__PURE__ */ t.jsxs(m, { sx: { pl: W, py: 1, ...B }, children: [
-    /* @__PURE__ */ t.jsxs(M, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
-      /* @__PURE__ */ t.jsx(Y, { avatar: x, name: c, size: L }),
-      /* @__PURE__ */ t.jsxs(m, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ t.jsxs(M, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
-          /* @__PURE__ */ t.jsx(d, { variant: "subtitle2", fontWeight: "600", children: c }),
-          /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(d, { variant: "caption", color: "text.secondary", children: H }) })
+  const [E, v] = S(n), [w, I] = S(o), [y, H] = S(!1), W = () => {
+    w ? (v((l) => Math.max(0, l - 1)), I(!1)) : (v((l) => l + 1), I(!0)), r && r(i);
+  }, A = () => {
+    a && a(i);
+  }, P = () => {
+    H(!y), C && C(i);
+  }, V = Z(f), M = h ?? s.length, B = M > 0, D = Math.min(b, z) * 2;
+  return R(() => {
+    v(n);
+  }, [n]), R(() => {
+    I(o);
+  }, [o]), T ? /* @__PURE__ */ t.jsx(c, { sx: { pl: D, py: 1, ...$ }, children: /* @__PURE__ */ t.jsxs(x, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+    /* @__PURE__ */ t.jsx(e, { component: "rounded-avatar", width: m, height: m }),
+    /* @__PURE__ */ t.jsxs(c, { sx: { flex: 1 }, children: [
+      /* @__PURE__ */ t.jsxs(x, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+        /* @__PURE__ */ t.jsx(e, { variant: "text", width: 120, height: 20 }),
+        /* @__PURE__ */ t.jsx(e, { variant: "text", width: 80, height: 16 })
+      ] }),
+      /* @__PURE__ */ t.jsx(e, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
+      /* @__PURE__ */ t.jsx(e, { variant: "text", width: "85%", height: 16, sx: { mb: 0.5 } }),
+      /* @__PURE__ */ t.jsx(e, { variant: "text", width: "70%", height: 16, sx: { mb: 2 } }),
+      /* @__PURE__ */ t.jsxs(x, { direction: "row", spacing: 1, alignItems: "center", children: [
+        /* @__PURE__ */ t.jsx(e, { component: "icon-button" }),
+        /* @__PURE__ */ t.jsx(e, { variant: "text", width: 20, height: 16 }),
+        /* @__PURE__ */ t.jsx(e, { variant: "text", width: 60, height: 32 }),
+        /* @__PURE__ */ t.jsx(e, { variant: "text", width: 80, height: 32 })
+      ] })
+    ] })
+  ] }) }) : /* @__PURE__ */ t.jsxs(c, { sx: { pl: D, py: 1, ...$ }, children: [
+    /* @__PURE__ */ t.jsxs(x, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+      /* @__PURE__ */ t.jsx(J, { avatar: j, name: d, size: m }),
+      /* @__PURE__ */ t.jsxs(c, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ t.jsxs(x, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+          /* @__PURE__ */ t.jsx(g, { variant: "subtitle2", fontWeight: "600", children: d }),
+          /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(g, { variant: "caption", color: "text.secondary", children: V }) })
         ] }),
-        /* @__PURE__ */ t.jsx(d, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: h }),
-        /* @__PURE__ */ t.jsxs(M, { direction: "row", spacing: 1, alignItems: "center", children: [
+        /* @__PURE__ */ t.jsx(g, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: p }),
+        /* @__PURE__ */ t.jsxs(x, { direction: "row", spacing: 1, alignItems: "center", children: [
           /* @__PURE__ */ t.jsx(
-            P,
+            q,
             {
               size: "small",
-              onClick: T,
+              onClick: W,
               sx: {
-                color: j ? "error.main" : "text.secondary"
+                color: w ? "error.main" : "text.secondary"
               },
-              children: j ? /* @__PURE__ */ t.jsx(q, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(K, { fontSize: "small" })
+              children: w ? /* @__PURE__ */ t.jsx(K, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(U, { fontSize: "small" })
             }
           ),
-          $ > 0 && /* @__PURE__ */ t.jsx(d, { variant: "caption", color: "text.secondary", children: $ }),
-          /* @__PURE__ */ t.jsx(R, { size: "small", startIcon: /* @__PURE__ */ t.jsx(O, { fontSize: "small" }), onClick: b, variant: "text", children: "Reply" }),
-          k && p && /* @__PURE__ */ t.jsxs(
-            R,
+          E > 0 && /* @__PURE__ */ t.jsx(g, { variant: "caption", color: "text.secondary", children: E }),
+          /* @__PURE__ */ t.jsx(F, { size: "small", startIcon: /* @__PURE__ */ t.jsx(X, { fontSize: "small" }), onClick: A, variant: "text", children: "Reply" }),
+          B && u && /* @__PURE__ */ t.jsxs(
+            F,
             {
               size: "small",
-              startIcon: I ? /* @__PURE__ */ t.jsx(J, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(G, { fontSize: "small" }),
-              onClick: F,
+              startIcon: y ? /* @__PURE__ */ t.jsx(Q, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(O, { fontSize: "small" }),
+              onClick: P,
               variant: "text",
               children: [
-                v,
+                M,
                 " ",
-                v === 1 ? "reply" : "replies"
+                M === 1 ? "reply" : "replies"
               ]
             }
           )
         ] }),
-        C && /* @__PURE__ */ t.jsx(m, { sx: { mt: 2 }, children: C })
+        k && /* @__PURE__ */ t.jsx(c, { sx: { mt: 2 }, children: k })
       ] })
     ] }),
-    k && p && /* @__PURE__ */ t.jsx(V, { in: I, children: /* @__PURE__ */ t.jsx(m, { sx: { mt: 2 }, children: e.map((i, A) => /* @__PURE__ */ t.jsx(
-      U,
+    B && u && /* @__PURE__ */ t.jsx(G, { in: y, children: /* @__PURE__ */ t.jsx(c, { sx: { mt: 2 }, children: s.map((l, Y) => /* @__PURE__ */ t.jsx(
+      _,
       {
-        ...i,
-        level: w + 1,
+        ...l,
+        level: b + 1,
         maxLevel: z,
-        onLike: n,
-        onReply: r,
-        showReplies: p,
-        avatarSize: Math.max(32, L - 8)
+        onLike: r,
+        onReply: a,
+        showReplies: u,
+        avatarSize: Math.max(32, m - 8)
       },
-      i.id || `reply-${A}`
+      l.id || `reply-${Y}`
     )) }) })
   ] });
 };
 export {
-  U as default
+  _ as default
 };

package/dist/s-review/s-review.d.ts CHANGED Viewed

@@ -16,6 +16,8 @@ export interface SReviewProps {
     avatarSize?: number;
     maxRating?: number;
     readOnly?: boolean;
+    showDivider?: boolean;
+    loading?: boolean;
     sx?: SxProps;
 }
 declare const SReview: React.FC<SReviewProps>;

package/dist/s-review/s-review.js CHANGED Viewed

@@ -1,70 +1,93 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as g, useEffect as A } from "react";
-import { Box as b, Stack as p, Typography as i, IconButton as T, Divider as F } from "@mui/material";
-import N from "../s-avatar/s-avatar.js";
-import q from "../s-image-modal/s-image-modal.js";
-import G from "../s-lazy-image/s-lazy-image.js";
-import J from "../s-rating/s-rating.js";
-import { c as $ } from "../createSvgIcon-Dq42_0tn.js";
-const K = $(/* @__PURE__ */ e.jsx("path", {
+import { useState as j, useEffect as G } from "react";
+import { Box as h, Stack as a, Divider as D, Typography as x, IconButton as H } from "@mui/material";
+import J from "../s-avatar/s-avatar.js";
+import K from "../s-image-modal/s-image-modal.js";
+import P from "../s-lazy-image/s-lazy-image.js";
+import Q from "../s-rating/s-rating.js";
+import r from "../s-skeleton/s-skeleton.js";
+import { c as L } from "../createSvgIcon-Dq42_0tn.js";
+const X = L(/* @__PURE__ */ e.jsx("path", {
   d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2m4 0v12h4V3z"
-}), "ThumbDown"), P = $(/* @__PURE__ */ e.jsx("path", {
+}), "ThumbDown"), Z = L(/* @__PURE__ */ e.jsx("path", {
   d: "M1 21h4V9H1zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73z"
-}), "ThumbUp"), Q = (r) => {
-  const c = /* @__PURE__ */ new Date(), y = typeof r == "string" ? new Date(r) : r, j = c.getTime() - y.getTime(), u = Math.floor(j / 1e3), l = Math.floor(u / 60), s = Math.floor(l / 60), a = Math.floor(s / 24), h = Math.floor(a / 7), m = Math.floor(a / 30), f = Math.floor(a / 365);
-  return u < 60 ? "just now" : l < 60 ? l === 1 ? "1 minute ago" : `${l} minutes ago` : s < 24 ? s === 1 ? "1 hour ago" : `${s} hours ago` : a < 7 ? a === 1 ? "1 day ago" : `${a} days ago` : h < 4 ? h === 1 ? "1 week ago" : `${h} weeks ago` : m < 12 ? m === 1 ? "1 month ago" : `${m} months ago` : f === 1 ? "1 year ago" : `${f} years ago`;
-}, ae = ({
-  id: r = Date.now(),
-  userName: c,
-  userAvatar: y,
-  rating: j,
-  reviewContent: u,
-  datetime: l,
+}), "ThumbUp"), _ = (l) => {
+  const m = /* @__PURE__ */ new Date(), v = typeof l == "string" ? new Date(l) : l, y = m.getTime() - v.getTime(), w = Math.floor(y / 1e3), c = Math.floor(w / 60), s = Math.floor(c / 60), i = Math.floor(s / 24), d = Math.floor(i / 7), f = Math.floor(i / 30), g = Math.floor(i / 365);
+  return w < 60 ? "just now" : c < 60 ? c === 1 ? "1 minute ago" : `${c} minutes ago` : s < 24 ? s === 1 ? "1 hour ago" : `${s} hours ago` : i < 7 ? i === 1 ? "1 day ago" : `${i} days ago` : d < 4 ? d === 1 ? "1 week ago" : `${d} weeks ago` : f < 12 ? f === 1 ? "1 month ago" : `${f} months ago` : g === 1 ? "1 year ago" : `${g} years ago`;
+}, ce = ({
+  id: l = Date.now(),
+  userName: m,
+  userAvatar: v,
+  rating: y,
+  reviewContent: w,
+  datetime: c,
   images: s,
-  userHelpfulVote: a = null,
-  helpfulYes: h = 0,
-  helpfulNo: m = 0,
-  onHelpfulVote: f,
-  showHelpfulSection: k = !0,
-  avatarSize: z = 48,
-  maxRating: D = 5,
-  readOnly: H = !0,
-  sx: L = {}
+  userHelpfulVote: i = null,
+  helpfulYes: d = 0,
+  helpfulNo: f = 0,
+  onHelpfulVote: g,
+  showHelpfulSection: R = !0,
+  avatarSize: I = 48,
+  maxRating: V = 5,
+  readOnly: W = !0,
+  showDivider: S = !0,
+  loading: E = !1,
+  sx: T = {}
 }) => {
-  const [R, v] = g(h), [V, w] = g(m), [d, I] = g(a), [W, C] = g(!1), [E, M] = g(null), S = (t) => {
-    let n = t;
-    d === t ? (t === "yes" ? v((o) => Math.max(0, o - 1)) : w((o) => Math.max(0, o - 1)), I(null), n = null) : (d === "yes" ? v((o) => Math.max(0, o - 1)) : d === "no" && w((o) => Math.max(0, o - 1)), t === "yes" ? v((o) => o + 1) : w((o) => o + 1), I(t), n = t), f && f(r, n);
-  }, x = (s == null ? void 0 : s.map((t, n) => ({
-    id: `review-${r}-image-${n}`,
+  const [O, M] = j(d), [U, b] = j(f), [p, k] = j(i), [Y, $] = j(!1), [B, C] = j(null), z = (n) => {
+    let o = n;
+    p === n ? (n === "yes" ? M((t) => Math.max(0, t - 1)) : b((t) => Math.max(0, t - 1)), k(null), o = null) : (p === "yes" ? M((t) => Math.max(0, t - 1)) : p === "no" && b((t) => Math.max(0, t - 1)), n === "yes" ? M((t) => t + 1) : b((t) => t + 1), k(n), o = n), g && g(l, o);
+  }, u = (s == null ? void 0 : s.map((n, o) => ({
+    id: `review-${l}-image-${o}`,
     type: "image",
-    url: t,
-    title: `Review image ${n + 1}`,
-    desc: `Image ${n + 1} from ${c}'s review`
-  }))) || [], O = (t) => {
-    const n = x[t];
-    n && (M(n), C(!0));
-  }, U = () => {
-    C(!1), M(null);
-  }, Y = (t) => {
-    M(t);
-  }, B = Q(l);
-  return A(() => {
-    I(a);
-  }, [a]), /* @__PURE__ */ e.jsxs(b, { sx: { py: 2, ...L }, children: [
-    /* @__PURE__ */ e.jsxs(p, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
-      /* @__PURE__ */ e.jsx(N, { avatar: y, name: c, size: z }),
-      /* @__PURE__ */ e.jsxs(b, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ e.jsxs(p, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
-          /* @__PURE__ */ e.jsx(i, { variant: "subtitle2", fontWeight: "600", children: c }),
-          /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: B }) })
+    url: n,
+    title: `Review image ${o + 1}`,
+    desc: `Image ${o + 1} from ${m}'s review`
+  }))) || [], A = (n) => {
+    const o = u[n];
+    o && (C(o), $(!0));
+  }, F = () => {
+    $(!1), C(null);
+  }, N = (n) => {
+    C(n);
+  }, q = _(c);
+  return G(() => {
+    k(i);
+  }, [i]), E ? /* @__PURE__ */ e.jsxs(h, { sx: { py: 2, ...T }, children: [
+    /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+      /* @__PURE__ */ e.jsx(r, { component: "rounded-avatar", width: I, height: I }),
+      /* @__PURE__ */ e.jsxs(h, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(a, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "text", width: 120, height: 20 }),
+          /* @__PURE__ */ e.jsx(r, { variant: "text", width: 80, height: 16 })
         ] }),
-        /* @__PURE__ */ e.jsx(b, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(J, { value: j, max: D, readOnly: H, size: "small" }) }),
-        /* @__PURE__ */ e.jsx(i, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: u }),
-        s && s.length > 0 && /* @__PURE__ */ e.jsx(p, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: s.map((t, n) => /* @__PURE__ */ e.jsx(
-          G,
+        /* @__PURE__ */ e.jsx(h, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(r, { variant: "text", width: 100, height: 20 }) }),
+        /* @__PURE__ */ e.jsx(r, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
+        /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ e.jsx(r, { variant: "text", width: 140, height: 16, sx: { mr: 2 } }),
+          /* @__PURE__ */ e.jsx(r, { component: "icon-button" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "text", width: 20, height: 16 }),
+          /* @__PURE__ */ e.jsx(r, { component: "icon-button" }),
+          /* @__PURE__ */ e.jsx(r, { variant: "text", width: 20, height: 16 })
+        ] })
+      ] })
+    ] }),
+    S && /* @__PURE__ */ e.jsx(D, { sx: { mt: 2 } })
+  ] }) : /* @__PURE__ */ e.jsxs(h, { sx: { py: 2, ...T }, children: [
+    /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+      /* @__PURE__ */ e.jsx(J, { avatar: v, name: m, size: I }),
+      /* @__PURE__ */ e.jsxs(h, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(a, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+          /* @__PURE__ */ e.jsx(x, { variant: "subtitle2", fontWeight: "600", children: m }),
+          /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: q }) })
+        ] }),
+        /* @__PURE__ */ e.jsx(h, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(Q, { value: y, max: V, readOnly: W, size: "small" }) }),
+        /* @__PURE__ */ e.jsx(x, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: w }),
+        s && s.length > 0 && /* @__PURE__ */ e.jsx(a, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: s.map((n, o) => /* @__PURE__ */ e.jsx(
+          P,
           {
-            src: t,
-            alt: `Review image ${n + 1}`,
+            src: n,
+            alt: `Review image ${o + 1}`,
             width: 80,
             height: 80,
             variant: "rounded",
@@ -72,68 +95,68 @@ const K = $(/* @__PURE__ */ e.jsx("path", {
               objectFit: "cover",
               cursor: "pointer"
             },
-            onClick: () => O(n),
-            onMouseEnter: (o) => {
-              o.currentTarget.style.opacity = "0.8";
+            onClick: () => A(o),
+            onMouseEnter: (t) => {
+              t.currentTarget.style.opacity = "0.8";
             },
-            onMouseLeave: (o) => {
-              o.currentTarget.style.opacity = "1";
+            onMouseLeave: (t) => {
+              t.currentTarget.style.opacity = "1";
             }
           },
-          n
+          o
         )) }),
-        k && /* @__PURE__ */ e.jsxs(p, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
-          /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", sx: { mr: 2 }, children: "Was this review helpful?" }),
+        R && /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", sx: { mr: 2 }, children: "Was this review helpful?" }),
           /* @__PURE__ */ e.jsx(
-            T,
+            H,
             {
               size: "small",
-              onClick: () => S("yes"),
+              onClick: () => z("yes"),
               sx: {
-                color: d === "yes" ? "primary.main" : "text.secondary",
+                color: p === "yes" ? "primary.main" : "text.secondary",
                 "&:hover": {
                   backgroundColor: "action.hover"
                 }
               },
-              children: /* @__PURE__ */ e.jsx(P, { fontSize: "small" })
+              children: /* @__PURE__ */ e.jsx(Z, { fontSize: "small" })
             }
           ),
-          /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: R }),
+          /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: O }),
           /* @__PURE__ */ e.jsx(
-            T,
+            H,
             {
               size: "small",
-              onClick: () => S("no"),
+              onClick: () => z("no"),
               sx: {
-                color: d === "no" ? "error.main" : "text.secondary",
+                color: p === "no" ? "error.main" : "text.secondary",
                 ml: 1,
                 "&:hover": {
                   backgroundColor: "action.hover"
                 }
               },
-              children: /* @__PURE__ */ e.jsx(K, { fontSize: "small" })
+              children: /* @__PURE__ */ e.jsx(X, { fontSize: "small" })
             }
           ),
-          /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: V })
+          /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: U })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx(F, { sx: { mt: 2 } }),
+    S && /* @__PURE__ */ e.jsx(D, { sx: { mt: 2 } }),
     /* @__PURE__ */ e.jsx(
-      q,
+      K,
       {
-        isOpen: W,
-        onClose: U,
-        selectedItem: E,
-        onItemChange: Y,
-        mediaItems: x,
-        showNavigation: x.length > 1,
-        showThumbnailDock: x.length > 1,
-        showCounter: x.length > 1
+        isOpen: Y,
+        onClose: F,
+        selectedItem: B,
+        onItemChange: N,
+        mediaItems: u,
+        showNavigation: u.length > 1,
+        showThumbnailDock: u.length > 1,
+        showCounter: u.length > 1
       }
     )
   ] });
 };
 export {
-  ae as default
+  ce as default
 };

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.143",
+  "version": "1.0.145",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",