@solostylist/ui-kit 1.0.142 → 1.0.144

package/dist/s-action-overlay/s-action-overlay.js

@@ -1,28 +1,28 @@
 import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as _ } from "react";
-import { Box as l, Grid as c } from "@mui/material";
-import b from "../s-icon-button/s-icon-button.js";
-const T = 40, B = 16, R = ({
+import { useState as k } from "react";
+import { Box as a, Grid as f } from "@mui/material";
+import C from "../s-icon-button/s-icon-button.js";
+const _ = 40, B = 16, R = ({
   actions: u,
   maxWidth: d,
   columns: s = 3,
   children: p,
   showOnHover: n = !0,
   visible: o,
-  position: a = "center",
-  backdropColor: x = "divider",
-  backdropOpacity: m = 1,
-  blurAmount: j = 10,
-  borderRadius: v = 0,
+  position: l = "center",
+  backdropColor: x = "background.paper",
+  backdropOpacity: m = 0.9,
+  blurAmount: v = 10,
+  borderRadius: j = 0,
   overlaySx: g,
   onVisibilityChange: e
 }) => {
-  const [I, i] = _(!1), h = o !== void 0 ? o : n && I, y = () => {
+  const [I, i] = k(!1), y = o !== void 0 ? o : n && I, h = () => {
     n && o === void 0 && (i(!0), e == null || e(!0));
   }, A = () => {
     n && o === void 0 && (i(!1), e == null || e(!1));
   }, E = () => {
-    switch (a) {
+    switch (l) {
       case "top-left":
         return { justifyContent: "flex-start", alignItems: "flex-start" };
       case "top-right":
@@ -36,7 +36,7 @@ const T = 40, B = 16, R = ({
         return { justifyContent: "center", alignItems: "center" };
     }
   }, M = () => {
-    switch (a) {
+    switch (l) {
       case "top-left":
         return "flex-start";
       case "top-right":
@@ -49,16 +49,16 @@ const T = 40, B = 16, R = ({
       default:
         return "center";
     }
-  }, k = () => {
+  }, T = () => {
     let t = d;
-    return s && (t = s * T + (s - 1) * B + s * 16), t;
+    return s && (t = s * _ + (s - 1) * B + s * 16), t;
   };
   return (
     // Main container with flex to center the children
-    /* @__PURE__ */ r.jsx(l, { display: "flex", children: /* @__PURE__ */ r.jsxs(l, { position: "relative", onMouseEnter: y, onMouseLeave: A, children: [
+    /* @__PURE__ */ r.jsx(a, { display: "flex", children: /* @__PURE__ */ r.jsxs(a, { position: "relative", onMouseEnter: h, onMouseLeave: A, children: [
       p,
-      h && /* @__PURE__ */ r.jsx(
-        l,
+      y && /* @__PURE__ */ r.jsx(
+        a,
         {
           position: "absolute",
           top: 0,
@@ -69,18 +69,18 @@ const T = 40, B = 16, R = ({
           bgcolor: x,
           sx: {
             opacity: m,
-            backdropFilter: `blur(${j}px)`,
+            backdropFilter: `blur(${v}px)`,
             transform: "translateZ(0)",
             willChange: "transform",
             transition: "opacity 0.2s ease-in-out",
             ...E(),
             ...g
           },
-          borderRadius: v,
-          children: /* @__PURE__ */ r.jsx(c, { container: !0, spacing: 2, justifyContent: M(), maxWidth: k(), children: u.map((t, C) => {
-            var f;
-            return /* @__PURE__ */ r.jsx(c, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ r.jsx(
-              b,
+          borderRadius: j,
+          children: /* @__PURE__ */ r.jsx(f, { container: !0, spacing: 2, justifyContent: M(), maxWidth: T(), children: u.map((t, b) => {
+            var c;
+            return /* @__PURE__ */ r.jsx(f, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ r.jsx(
+              C,
               {
                 tooltipOptions: { title: t.tooltip, placement: "top" },
                 onClick: t.onClick,
@@ -90,17 +90,19 @@ const T = 40, B = 16, R = ({
                 sx: {
                   margin: 1,
                   backgroundColor: t.isActive ? "primary.main" : void 0,
+                  color: t.isActive ? "primary.contrastText" : void 0,
                   transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
                   opacity: t.disabled ? 0.5 : 1,
                   "&:hover": {
-                    backgroundColor: t.isActive ? "primary.dark" : void 0
+                    backgroundColor: t.isActive ? "primary.main" : void 0,
+                    color: t.isActive ? "primary.contrastText" : void 0
                   },
-                  ...(f = t.iconButtonProps) == null ? void 0 : f.sx
+                  ...(c = t.iconButtonProps) == null ? void 0 : c.sx
                 },
                 ...t.iconButtonProps,
                 children: t.icon
               }
-            ) }, `${t.tooltip}-${C}`);
+            ) }, `${t.tooltip}-${b}`);
           }) })
         }
       )

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

@@ -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

@@ -1,140 +1,125 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as I, useEffect as T } from "react";
-import { Box as m, Stack as M, Typography as x, IconButton as P, Button as $, 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__ */ e.jsx("path", {
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+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__ */ e.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__ */ e.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 = (r) => {
-  const c = /* @__PURE__ */ new Date(), d = typeof r == "string" ? new Date(r) : r, h = c.getTime() - d.getTime(), f = Math.floor(h / 1e3), o = Math.floor(f / 60), s = Math.floor(o / 60), t = Math.floor(s / 24), l = Math.floor(t / 7), n = Math.floor(t / 30), a = Math.floor(t / 365);
-  return f < 60 ? "just now" : o < 60 ? o === 1 ? "1 minute ago" : `${o} minutes ago` : s < 24 ? s === 1 ? "1 hour ago" : `${s} hours ago` : t < 7 ? t === 1 ? "1 day ago" : `${t} days ago` : l < 4 ? l === 1 ? "1 week ago" : `${l} weeks ago` : n < 12 ? n === 1 ? "1 month ago" : `${n} months ago` : a === 1 ? "1 year ago" : `${a} years ago`;
-}, U = ({
-  id: r = Date.now(),
-  userName: c,
-  userAvatar: d,
-  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: o = 0,
-  isLiked: s = !1,
-  replies: t = [],
-  totalReplies: l,
-  onLike: n,
+  likes: n = 0,
+  isLiked: o = !1,
+  replies: s = [],
+  totalReplies: h,
+  onLike: r,
   onReply: a,
-  showReplies: p = !0,
-  avatarSize: C = 48,
-  level: z = 0,
-  maxLevel: L = 3,
-  children: w,
-  sx: E = {}
+  onToggleReplies: C,
+  showReplies: u = !0,
+  avatarSize: m = 48,
+  level: b = 0,
+  maxLevel: z = 3,
+  loading: T = !1,
+  children: k,
+  sx: $ = {}
 }) => {
-  const [k, g] = I(o), [j, u] = I(s), [v, R] = I(!1), B = () => {
-    j ? (g((i) => Math.max(0, i - 1)), u(!1)) : (g((i) => i + 1), u(!0)), n && n(r);
-  }, D = () => {
-    a && a(r);
-  }, F = () => {
-    R(!v);
-  }, W = Q(f), y = l ?? t.length, b = y > 0, H = Math.min(z, L) * 2;
-  return T(() => {
-    g(o);
-  }, [o]), T(() => {
-    u(s);
-  }, [s]), /* @__PURE__ */ e.jsxs(m, { sx: { pl: H, py: 1, ...E }, children: [
-    /* @__PURE__ */ e.jsxs(M, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
-      /* @__PURE__ */ e.jsx(Y, { avatar: d, name: c, size: C }),
-      /* @__PURE__ */ e.jsxs(m, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ e.jsxs(M, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
-          /* @__PURE__ */ e.jsx(x, { variant: "subtitle2", fontWeight: "600", children: c }),
-          /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: W }) })
+  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__ */ e.jsx(x, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: h }),
-        /* @__PURE__ */ e.jsxs(M, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ e.jsx(
-            P,
-            {
-              size: "small",
-              onClick: B,
-              sx: {
-                color: j ? "error.main" : "text.secondary",
-                p: 0.5,
-                "&:hover": {
-                  backgroundColor: "action.hover"
-                }
-              },
-              children: j ? /* @__PURE__ */ e.jsx(q, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(K, { fontSize: "small" })
-            }
-          ),
-          k > 0 && /* @__PURE__ */ e.jsx(x, { variant: "caption", color: "text.secondary", children: k }),
-          /* @__PURE__ */ e.jsx(
-            $,
+        /* @__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(
+            q,
             {
               size: "small",
-              startIcon: /* @__PURE__ */ e.jsx(O, { fontSize: "small" }),
-              onClick: D,
-              variant: "text",
+              onClick: W,
               sx: {
-                color: "text.secondary",
-                textTransform: "none",
-                minWidth: "auto",
-                px: 1,
-                py: 0.5,
-                fontSize: "0.75rem",
-                "&:hover": {
-                  backgroundColor: "action.hover"
-                }
+                color: w ? "error.main" : "text.secondary"
               },
-              children: "Reply"
+              children: w ? /* @__PURE__ */ t.jsx(K, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(U, { fontSize: "small" })
             }
           ),
-          b && p && /* @__PURE__ */ e.jsxs(
-            $,
+          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: v ? /* @__PURE__ */ e.jsx(J, { fontSize: "small" }) : /* @__PURE__ */ e.jsx(G, { fontSize: "small" }),
-              onClick: F,
+              startIcon: y ? /* @__PURE__ */ t.jsx(Q, { fontSize: "small" }) : /* @__PURE__ */ t.jsx(O, { fontSize: "small" }),
+              onClick: P,
               variant: "text",
-              sx: {
-                color: "primary.main",
-                textTransform: "none",
-                minWidth: "auto",
-                px: 1,
-                py: 0.5,
-                fontSize: "0.75rem",
-                "&:hover": {
-                  backgroundColor: "action.hover"
-                }
-              },
               children: [
-                y,
+                M,
                 " ",
-                y === 1 ? "reply" : "replies"
+                M === 1 ? "reply" : "replies"
               ]
             }
           )
         ] }),
-        w && /* @__PURE__ */ e.jsx(m, { sx: { mt: 2 }, children: w })
+        k && /* @__PURE__ */ t.jsx(c, { sx: { mt: 2 }, children: k })
       ] })
     ] }),
-    b && p && /* @__PURE__ */ e.jsx(V, { in: v, children: /* @__PURE__ */ e.jsx(m, { sx: { mt: 2 }, children: t.map((i, A) => /* @__PURE__ */ e.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: z + 1,
-        maxLevel: L,
-        onLike: n,
+        ...l,
+        level: b + 1,
+        maxLevel: z,
+        onLike: r,
         onReply: a,
-        showReplies: p,
-        avatarSize: Math.max(32, C - 8)
+        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

@@ -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

@@ -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

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