@solostylist/ui-kit 1.0.99 → 1.0.100

package/dist/main.d.ts

@@ -97,6 +97,8 @@ export { default as SRadialPulseAnimate } from './s-radial-pulse-animate/index';
 export type { SRadialPulseAnimateProps } from './s-radial-pulse-animate/index';
 export { default as SRating } from './s-rating/index';
 export type { SRatingProps } from './s-rating/index';
+export { default as SReview } from './s-review/index';
+export type { SReviewProps } from './s-review/index';
 export { STabs, STab, STabPanel } from './s-tabs/index';
 export type { STabsProps, STabItem, STabProps, STabPanelProps } from './s-tabs/index';
 export { default as STextShimmer } from './s-text-shimmer/index';

package/dist/main.js

@@ -8,14 +8,14 @@ import { default as n } from "./s-chat-input/s-chat-input.js";
 import { default as c } from "./s-chat-message/s-chat-message.js";
 import { default as C } from "./s-text-editor/s-text-editor.js";
 import "./s-text-editor/s-text-editor-toolbar.js";
-import { default as D } from "./s-checkbox/s-checkbox.js";
-import { default as v } from "./s-chip/s-chip.js";
+import { default as v } from "./s-checkbox/s-checkbox.js";
+import { default as b } from "./s-chip/s-chip.js";
 import { default as I } from "./s-chips/s-chips.js";
 import { default as L } from "./s-data-table/s-data-table.js";
 import { DialogConfirmProvider as y, default as F, useDialogConfirm as B } from "./s-dialog-confirm/s-dialog-confirm.js";
 import { DialogMessageProvider as A, default as E, useDialogMessage as G } from "./s-dialog-message/s-dialog-message.js";
-import { default as R } from "./s-error/s-error.js";
-import { default as w } from "./s-empty/s-empty.js";
+import { default as w } from "./s-error/s-error.js";
+import { default as j } from "./s-empty/s-empty.js";
 import { default as V } from "./s-dialog/s-dialog.js";
 import { default as H } from "./s-file-dropzone/s-file-dropzone.js";
 import { default as O } from "./s-file-icon/s-file-icon.js";
@@ -32,14 +32,14 @@ import { default as Se } from "./s-tip/s-tip.js";
 import { default as ue } from "./s-text-truncation/s-text-truncation.js";
 import { default as ne, SnackbarMessageProvider as ge, useSnackbarMessage as ce } from "./s-snackbar-message/s-snackbar-message.js";
 import { default as Ce } from "./s-form/s-form.js";
-import { SSmartTextField as De } from "./s-smart-text-field/s-smart-text-field.js";
-import { SCopilotKitProvider as ve } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
+import { SSmartTextField as ve } from "./s-smart-text-field/s-smart-text-field.js";
+import { SCopilotKitProvider as be } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
 import { SStripeCVC as Ie, SStripeExpiry as ke, SStripeNumber as Le, StripeTextField as he } from "./s-stripe/s-stripe.js";
 import { default as Fe } from "./s-theme-provider/s-theme-provider.js";
 import { default as ze } from "./s-datetime-picker/s-datetime-picker.js";
 import { default as Ee } from "./s-date-picker/s-date-picker.js";
-import { default as Ne } from "./s-localization-provider/s-localization-provider.js";
-import { default as je } from "./s-gradient-icon/s-gradient-icon.js";
+import { default as Re } from "./s-localization-provider/s-localization-provider.js";
+import { default as Ne } from "./s-gradient-icon/s-gradient-icon.js";
 import { default as Ke } from "./s-glow-button/s-glow-button.js";
 import { default as qe } from "./s-moving-border/s-moving-border.js";
 import { default as Je } from "./s-copyable-text/s-copyable-text.js";
@@ -49,21 +49,22 @@ import { default as Ze } from "./s-lazy-image/s-lazy-image.js";
 import { default as $e } from "./s-image-comparison/s-image-comparison.js";
 import { default as oo } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
 import { default as ao } from "./s-rating/s-rating.js";
-import { default as fo } from "./s-tabs/s-tabs.js";
-import { default as mo } from "./s-tabs/s-tab.js";
-import { default as po } from "./s-tabs/s-tab-panel.js";
-import { default as xo } from "./s-text-shimmer/s-text-shimmer.js";
-import { useDialog as io } from "./hooks/use-dialog.js";
-import { usePopover as go } from "./hooks/use-popover.js";
-import { formatDatePosted as To } from "./utils/dayjs.js";
-import { bytesToSize as Po } from "./utils/bytes-to-size.js";
-import { LogLevel as bo, Logger as vo, createLogger as Mo, logger as Io } from "./utils/logger.js";
-import { default as Lo } from "dayjs";
+import { default as fo } from "./s-review/s-review.js";
+import { default as mo } from "./s-tabs/s-tabs.js";
+import { default as po } from "./s-tabs/s-tab.js";
+import { default as xo } from "./s-tabs/s-tab-panel.js";
+import { default as io } from "./s-text-shimmer/s-text-shimmer.js";
+import { useDialog as go } from "./hooks/use-dialog.js";
+import { usePopover as To } from "./hooks/use-popover.js";
+import { formatDatePosted as Po } from "./utils/dayjs.js";
+import { bytesToSize as Do } from "./utils/bytes-to-size.js";
+import { LogLevel as Mo, Logger as Io, createLogger as ko, logger as Lo } from "./utils/logger.js";
+import { default as yo } from "dayjs";
 export {
   y as DialogConfirmProvider,
   A as DialogMessageProvider,
-  bo as LogLevel,
-  vo as Logger,
+  Mo as LogLevel,
+  Io as Logger,
   Qe as MediaItem,
   a as SAccordion,
   f as SAutocomplete,
@@ -73,10 +74,10 @@ export {
   u as SCarousel,
   n as SChatInput,
   c as SChatMessage,
-  D as SCheckbox,
-  v as SChip,
+  v as SCheckbox,
+  b as SChip,
   I as SChips,
-  ve as SCopilotKitProvider,
+  be as SCopilotKitProvider,
   Je as SCopyableText,
   L as SDataTable,
   Ee as SDatePicker,
@@ -84,13 +85,13 @@ export {
   V as SDialog,
   F as SDialogConfirm,
   E as SDialogMessage,
-  w as SEmpty,
-  R as SError,
+  j as SEmpty,
+  w as SError,
   H as SFileDropzone,
   O as SFileIcon,
   Ce as SForm,
   Ke as SGlowButton,
-  je as SGradientIcon,
+  Ne as SGradientIcon,
   U as SI18nProvider,
   X as SIconButton,
   $e as SImageComparison,
@@ -98,39 +99,40 @@ export {
   Ue as SInteractiveGallery,
   Z as SLabel,
   Ze as SLazyImage,
-  Ne as SLocalizationProvider,
+  Re as SLocalizationProvider,
   qe as SMovingBorder,
   $ as SMultiSelect,
   oe as SNoSsr,
   fe as SPagination,
   oo as SRadialPulseAnimate,
   ao as SRating,
+  fo as SReview,
   me as SSelect,
   pe as SSkeleton,
-  De as SSmartTextField,
+  ve as SSmartTextField,
   ne as SSnackbarMessage,
   Ie as SStripeCVC,
   ke as SStripeExpiry,
   Le as SStripeNumber,
-  mo as STab,
-  po as STabPanel,
-  fo as STabs,
+  po as STab,
+  xo as STabPanel,
+  mo as STabs,
   C as STextEditor,
   ae as STextField,
-  xo as STextShimmer,
+  io as STextShimmer,
   ue as STextTruncation,
   Fe as SThemeProvider,
   Se as STip,
   ge as SnackbarMessageProvider,
   he as StripeTextField,
-  Po as bytesToSize,
-  Mo as createLogger,
-  Lo as dayjs,
-  To as formatDatePosted,
-  Io as logger,
-  io as useDialog,
+  Do as bytesToSize,
+  ko as createLogger,
+  yo as dayjs,
+  Po as formatDatePosted,
+  Lo as logger,
+  go as useDialog,
   B as useDialogConfirm,
   G as useDialogMessage,
-  go as usePopover,
+  To as usePopover,
   ce as useSnackbarMessage
 };

package/dist/s-accordion/s-accordion.js

@@ -7,7 +7,7 @@ import { g as X } from "../generateUtilityClasses-BtVDwGrk.js";
 import { g as Y } from "../colorManipulator-ep5lERxB.js";
 import { u as So } from "../useControlled-nm4pBabJ.js";
 import { s as T } from "../styled-DOEEZAON.js";
-import { T as vo, u as Eo, g as ro, P as wo } from "../Paper-DEq2MLtq.js";
+import { T as Eo, u as vo, g as ro, P as wo } from "../Paper-DEq2MLtq.js";
 import { S as Ro } from "../Stack-GTpsqQv0.js";
 import { T as Ao } from "../Typography-zQXZ4jKl.js";
 const jo = mo(/* @__PURE__ */ s.jsx("path", {
@@ -118,7 +118,7 @@ const No = (e) => {
     collapsedSize: f = "0px",
     component: S,
     easing: $,
-    in: v,
+    in: E,
     onEnter: A,
     onEntered: j,
     onEntering: z,
@@ -129,13 +129,13 @@ const No = (e) => {
     style: m,
     timeout: d = go.standard,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent: N = vo,
+    TransitionComponent: N = Eo,
     ...G
-  } = i, E = {
+  } = i, v = {
     ...i,
     orientation: c,
     collapsedSize: f
-  }, u = No(E), w = Eo(), U = xo(), a = l.useRef(null), g = l.useRef(), C = typeof f == "number" ? `${f}px` : f, O = c === "horizontal", M = O ? "width" : "height", k = l.useRef(null), Z = ho(r, k), R = (n) => (y) => {
+  }, u = No(v), w = vo(), U = xo(), a = l.useRef(null), g = l.useRef(), C = typeof f == "number" ? `${f}px` : f, O = c === "horizontal", M = O ? "width" : "height", k = l.useRef(null), Z = ho(r, k), R = (n) => (y) => {
     if (n) {
       const x = k.current;
       y === void 0 ? n(x) : n(x, y);
@@ -186,7 +186,7 @@ const No = (e) => {
     d === "auto" && U.start(g.current || 0, n), p && p(k.current, n);
   };
   return /* @__PURE__ */ s.jsx(N, {
-    in: v,
+    in: E,
     onEnter: oo,
     onEntered: co,
     onEntering: eo,
@@ -204,7 +204,7 @@ const No = (e) => {
       as: S,
       className: L(u.root, b, {
         entered: u.entered,
-        exited: !v && C === "0px" && u.hidden
+        exited: !E && C === "0px" && u.hidden
       }[n]),
       style: {
         [O ? "minWidth" : "minHeight"]: C,
@@ -212,20 +212,20 @@ const No = (e) => {
       },
       ref: Z,
       ownerState: {
-        ...E,
+        ...v,
         state: n
       },
       ...x,
       children: /* @__PURE__ */ s.jsx(Mo, {
         ownerState: {
-          ...E,
+          ...v,
           state: n
         },
         className: u.wrapper,
         ref: a,
         children: /* @__PURE__ */ s.jsx(Io, {
           ownerState: {
-            ...E,
+            ...v,
             state: n
           },
           className: u.wrapperInner,
@@ -455,7 +455,7 @@ const _ = X("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled
     disabled: f = !1,
     disableGutters: S = !1,
     expanded: $,
-    onChange: v,
+    onChange: E,
     square: A = !1,
     slots: j = {},
     slotProps: z = {},
@@ -468,8 +468,8 @@ const _ = X("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled
     name: "Accordion",
     state: "expanded"
   }), d = l.useCallback((eo) => {
-    m(!c), v && v(eo, !c);
-  }, [c, v, m]), [N, ...G] = l.Children.toArray(p), E = l.useMemo(() => ({
+    m(!c), E && E(eo, !c);
+  }, [c, E, m]), [N, ...G] = l.Children.toArray(p), v = l.useMemo(() => ({
     expanded: c,
     disabled: f,
     disableGutters: S,
@@ -527,7 +527,7 @@ const _ = X("MuiAccordion", ["root", "heading", "rounded", "expanded", "disabled
     children: [/* @__PURE__ */ s.jsx(M, {
       ...k,
       children: /* @__PURE__ */ s.jsx(to.Provider, {
-        value: E,
+        value: v,
         children: N
       })
     }), /* @__PURE__ */ s.jsx(Z, {
@@ -781,7 +781,7 @@ const F = X("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disable
     focusVisibleClassName: f,
     onClick: S,
     slots: $,
-    slotProps: v,
+    slotProps: E,
     ...A
   } = i, {
     disabled: j = !1,
@@ -797,7 +797,7 @@ const F = X("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disable
     disableGutters: z
   }, m = Ho(c), d = {
     slots: $,
-    slotProps: v
+    slotProps: E
   }, [N, G] = I("root", {
     ref: r,
     shouldForwardComponentProp: !0,
@@ -822,7 +822,7 @@ const F = X("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disable
         (C = a.onClick) == null || C.call(a, g), V(g);
       }
     })
-  }), [E, u] = I("content", {
+  }), [v, u] = I("content", {
     className: m.content,
     elementType: Lo,
     externalForwardedProps: d,
@@ -835,7 +835,7 @@ const F = X("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disable
   });
   return /* @__PURE__ */ s.jsxs(N, {
     ...G,
-    children: [/* @__PURE__ */ s.jsx(E, {
+    children: [/* @__PURE__ */ s.jsx(v, {
       ...u,
       children: p
     }), b && /* @__PURE__ */ s.jsx(w, {
@@ -907,7 +907,8 @@ const re = ({ title: e, children: t, startIcon: r, defaultExpanded: i = !1 }) =>
     defaultExpanded: i,
     sx: {
       borderRadius: 1,
-      border: "1px solid var(--s-palette-divider) !important"
+      border: "1px solid",
+      borderColor: "divider"
     },
     elevation: 0,
     children: [

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

@@ -1,27 +1,27 @@
 import { j as r } from "../jsx-runtime-DywqP_6a.js";
 import { forwardRef as F, useState as c, useRef as K, useId as O, useEffect as B } from "react";
-import { Box as s, outlinedInputClasses as T, Popper as W, ClickAwayListener as D } from "@mui/material";
+import { Box as t, outlinedInputClasses as T, Popper as W, ClickAwayListener as D } from "@mui/material";
 import H from "emoji-picker-react";
 import _ from "../s-file-icon/s-file-icon.js";
 import d from "../s-icon-button/s-icon-button.js";
 import q from "../s-text-field/s-text-field.js";
 import { C as G } from "../Close-BSG2-e7H.js";
-import { b as v } from "../createSvgIcon-CS-Z7P80.js";
-const J = v(/* @__PURE__ */ r.jsx("path", {
+import { b as k } from "../createSvgIcon-CS-Z7P80.js";
+const J = k(/* @__PURE__ */ r.jsx("path", {
   d: "m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z"
-}), "ArrowUpward"), N = v(/* @__PURE__ */ r.jsx("path", {
+}), "ArrowUpward"), N = k(/* @__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"), Q = v(/* @__PURE__ */ r.jsx("path", {
+}), "AttachFile"), Q = k(/* @__PURE__ */ r.jsx("path", {
   d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8M12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4m3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5"
 }), "EmojiEmotions"), ae = F(
-  ({ onSubmit: p, onFileSelect: m, disabled: a, acceptedFileTypes: E, maxFileSize: k, ...z }, M) => {
-    const [u, h] = c(""), [l, x] = c([]), [i, f] = c(/* @__PURE__ */ new Map()), [C, g] = c(!1), y = K(null), w = O(), b = (e) => e.type.startsWith("image/"), U = (e) => {
+  ({ onSubmit: p, onFileSelect: m, disabled: a, acceptedFileTypes: E, maxFileSize: C, ...z }, M) => {
+    const [u, h] = c(""), [l, x] = c([]), [i, f] = c(/* @__PURE__ */ new Map()), [v, g] = c(!1), y = K(null), w = O(), b = (e) => e.type.startsWith("image/"), U = (e) => {
       const o = `${e.name}-${e.size}-${e.lastModified}`;
       if (i.has(o))
         return i.get(o);
       if (b(e)) {
         const n = URL.createObjectURL(e);
-        return f((t) => new Map(t).set(o, n)), n;
+        return f((s) => new Map(s).set(o, n)), n;
       }
       return "";
     }, L = (e) => {
@@ -29,28 +29,28 @@ const J = v(/* @__PURE__ */ r.jsx("path", {
     }, $ = (e) => {
       h((o) => o + e.emoji), g(!1);
     }, P = () => {
-      g(!C);
+      g(!v);
     }, R = () => {
       a || u.trim().length === 0 && l.length === 0 || (p == null || p(u, l), h(""), i.forEach((e) => URL.revokeObjectURL(e)), f(/* @__PURE__ */ new Map()), x([]));
     }, S = (e) => {
-      const n = Array.from(e.target.files || []).filter((t) => !(k && t.size > k));
-      x((t) => [...t, ...n]), m == null || m(n), e.target.value = "";
+      const n = Array.from(e.target.files || []).filter((s) => !(C && s.size > C));
+      x((s) => [...s, ...n]), m == null || m(n), e.target.value = "";
     }, V = (e) => {
       const o = l[e];
       if (o && b(o)) {
-        const n = `${o.name}-${o.size}-${o.lastModified}`, t = i.get(n);
-        t && (URL.revokeObjectURL(t), f((j) => {
+        const n = `${o.name}-${o.size}-${o.lastModified}`, s = i.get(n);
+        s && (URL.revokeObjectURL(s), f((j) => {
           const I = new Map(j);
           return I.delete(n), I;
         }));
       }
-      x((n) => n.filter((t, j) => j !== e));
+      x((n) => n.filter((s, j) => j !== e));
     }, A = (e) => {
       e.key === "Enter" && !e.shiftKey && (e.preventDefault(), R());
     };
     return B(() => () => {
       i.forEach((e) => URL.revokeObjectURL(e));
-    }, [i]), /* @__PURE__ */ r.jsxs(s, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
+    }, [i]), /* @__PURE__ */ r.jsxs(t, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
       /* @__PURE__ */ r.jsx(
         q,
         {
@@ -91,25 +91,26 @@ const J = v(/* @__PURE__ */ r.jsx("path", {
           ...z
         }
       ),
-      l.length > 0 && /* @__PURE__ */ r.jsx(s, { mt: 1, children: l.map((e, o) => {
-        const n = b(e), t = e.name.split(".").pop();
+      l.length > 0 && /* @__PURE__ */ r.jsx(t, { mt: 1, children: l.map((e, o) => {
+        const n = b(e), s = e.name.split(".").pop();
         return /* @__PURE__ */ r.jsxs(
-          s,
+          t,
           {
             display: "flex",
             alignItems: "center",
             justifyContent: "space-between",
             sx: {
-              bgcolor: "var(--s-palette-action-hover)",
-              border: "1px solid var(--s-palette-divider)",
+              bgcolor: "background.paper",
+              border: "1px solid",
+              borderColor: "divider",
               borderRadius: 1,
               p: 1,
               mb: 0.5
             },
             children: [
-              /* @__PURE__ */ r.jsxs(s, { display: "flex", alignItems: "center", gap: 1, children: [
+              /* @__PURE__ */ r.jsxs(t, { display: "flex", alignItems: "center", gap: 1, children: [
                 n ? /* @__PURE__ */ r.jsx(
-                  s,
+                  t,
                   {
                     component: "img",
                     src: U(e),
@@ -119,13 +120,14 @@ const J = v(/* @__PURE__ */ r.jsx("path", {
                       height: 40,
                       borderRadius: 1,
                       objectFit: "cover",
-                      border: "1px solid var(--s-palette-divider)"
+                      border: "1px solid",
+                      borderColor: "divider"
                     }
                   }
-                ) : /* @__PURE__ */ r.jsx(_, { extension: t }),
-                /* @__PURE__ */ r.jsxs(s, { children: [
-                  /* @__PURE__ */ r.jsx(s, { component: "span", sx: { fontSize: "0.875rem", fontWeight: 500 }, children: e.name }),
-                  /* @__PURE__ */ r.jsxs(s, { component: "span", sx: { fontSize: "0.75rem", color: "text.secondary", ml: 1 }, children: [
+                ) : /* @__PURE__ */ r.jsx(_, { extension: s }),
+                /* @__PURE__ */ r.jsxs(t, { children: [
+                  /* @__PURE__ */ r.jsx(t, { component: "span", sx: { fontSize: "0.875rem", fontWeight: 500 }, children: e.name }),
+                  /* @__PURE__ */ r.jsxs(t, { component: "span", sx: { fontSize: "0.75rem", color: "text.secondary", ml: 1 }, children: [
                     "(",
                     Math.round(e.size / 1024),
                     " KB)"
@@ -138,8 +140,8 @@ const J = v(/* @__PURE__ */ r.jsx("path", {
           `${e.name}-${o}`
         );
       }) }),
-      /* @__PURE__ */ r.jsxs(s, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 1, children: [
-        /* @__PURE__ */ r.jsxs(s, { display: "flex", gap: 1, children: [
+      /* @__PURE__ */ r.jsxs(t, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 1, children: [
+        /* @__PURE__ */ r.jsxs(t, { display: "flex", gap: 1, children: [
           /* @__PURE__ */ r.jsx(
             "input",
             {
@@ -200,8 +202,8 @@ const J = v(/* @__PURE__ */ r.jsx("path", {
           }
         )
       ] }),
-      /* @__PURE__ */ r.jsx(W, { open: C, anchorEl: y.current, placement: "top-start", sx: { zIndex: 1300 }, children: /* @__PURE__ */ r.jsx(D, { onClickAway: () => g(!1), children: /* @__PURE__ */ r.jsx(
-        s,
+      /* @__PURE__ */ r.jsx(W, { open: v, anchorEl: y.current, placement: "top-start", sx: { zIndex: 1300 }, children: /* @__PURE__ */ r.jsx(D, { onClickAway: () => g(!1), children: /* @__PURE__ */ r.jsx(
+        t,
         {
           sx: {
             border: "1px solid",

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

@@ -1,49 +1,49 @@
-import { j as r } from "../jsx-runtime-DywqP_6a.js";
-import { Box as a, Typography as n } from "@mui/material";
+import { j as e } from "../jsx-runtime-DywqP_6a.js";
+import { Box as o, Typography as n } from "@mui/material";
 import x from "../s-avatar/s-avatar.js";
 const b = ({
   message: d,
-  variant: p = "received",
-  timestamp: o,
+  variant: c = "received",
+  timestamp: a,
   avatar: s,
-  senderName: t,
+  senderName: i,
   showAvatar: l = !0,
   showTimestamp: m = !1,
-  maxWidth: c = "70%",
+  maxWidth: p = "70%",
   sx: f,
   ...g
 }) => {
-  const e = p === "sent", y = (i) => (typeof i == "string" ? new Date(i) : i).toLocaleTimeString("en-US", {
+  const r = c === "sent", h = (t) => (typeof t == "string" ? new Date(t) : t).toLocaleTimeString("en-US", {
     hour: "2-digit",
     minute: "2-digit",
     hour12: !0
   });
-  return /* @__PURE__ */ r.jsxs(
-    a,
+  return /* @__PURE__ */ e.jsxs(
+    o,
     {
       display: "flex",
-      flexDirection: e ? "row-reverse" : "row",
+      flexDirection: r ? "row-reverse" : "row",
       alignItems: "flex-start",
       gap: 1,
       mb: 1,
       sx: {
-        maxWidth: c,
-        alignSelf: e ? "flex-end" : "flex-start",
+        maxWidth: p,
+        alignSelf: r ? "flex-end" : "flex-start",
         ...f
       },
       ...g,
       children: [
-        l && !e && /* @__PURE__ */ r.jsx(x, { avatar: s, name: t, size: 36 }),
-        /* @__PURE__ */ r.jsxs(
-          a,
+        l && !r && /* @__PURE__ */ e.jsx(x, { avatar: s, name: i, size: 36 }),
+        /* @__PURE__ */ e.jsxs(
+          o,
           {
             display: "flex",
             flexDirection: "column",
-            alignItems: e ? "flex-end" : "flex-start",
+            alignItems: r ? "flex-end" : "flex-start",
             gap: 0.5,
             sx: { minWidth: 0 },
             children: [
-              t && !e && /* @__PURE__ */ r.jsx(
+              i && !r && /* @__PURE__ */ e.jsx(
                 n,
                 {
                   variant: "caption",
@@ -53,11 +53,11 @@ const b = ({
                     fontWeight: 500,
                     ml: 0.5
                   },
-                  children: t
+                  children: i
                 }
               ),
-              /* @__PURE__ */ r.jsx(
-                a,
+              /* @__PURE__ */ e.jsx(
+                o,
                 {
                   sx: {
                     display: "inline-block",
@@ -66,14 +66,15 @@ const b = ({
                     borderRadius: 2,
                     wordBreak: "break-word",
                     maxWidth: "100%",
-                    backgroundColor: e ? "primary.main" : "",
-                    color: e ? "primary.contrastText" : "text.primary",
-                    border: e ? "none" : "1px solid var(--s-palette-divider)",
-                    ...e && {
-                      background: "linear-gradient(135deg, var(--s-palette-primary-main) 0%, var(--s-palette-primary-dark) 100%)"
+                    backgroundColor: r ? "primary.main" : "",
+                    color: r ? "primary.contrastText" : "text.primary",
+                    border: r ? "none" : "1px solid",
+                    borderColor: "divider",
+                    ...r && {
+                      backgroundColor: "primary.dark"
                     }
                   },
-                  children: /* @__PURE__ */ r.jsx(
+                  children: /* @__PURE__ */ e.jsx(
                     n,
                     {
                       variant: "body2",
@@ -87,23 +88,23 @@ const b = ({
                   )
                 }
               ),
-              m && o && /* @__PURE__ */ r.jsx(
+              m && a && /* @__PURE__ */ e.jsx(
                 n,
                 {
                   variant: "caption",
                   sx: {
                     color: "text.secondary",
                     fontSize: "0.7rem",
-                    ml: e ? 0 : 0.5,
-                    mr: e ? 0.5 : 0
+                    ml: r ? 0 : 0.5,
+                    mr: r ? 0.5 : 0
                   },
-                  children: y(o)
+                  children: h(a)
                 }
               )
             ]
           }
         ),
-        l && e && /* @__PURE__ */ r.jsx(x, { avatar: s, name: t, size: 36 })
+        l && r && /* @__PURE__ */ e.jsx(x, { avatar: s, name: i, size: 36 })
       ]
     }
   );

package/dist/s-file-dropzone/s-file-dropzone.js

@@ -1,17 +1,17 @@
-import { j as e } from "../jsx-runtime-DywqP_6a.js";
-import * as b from "react";
+import { j as o } from "../jsx-runtime-DywqP_6a.js";
+import * as y from "react";
 import { b as d } from "../createSvgIcon-CS-Z7P80.js";
-import { Avatar as y, Tooltip as C, IconButton as I, Button as z } from "@mui/material";
+import { Avatar as C, Tooltip as v, IconButton as I, Button as z } from "@mui/material";
 import { useDropzone as S } from "react-dropzone";
 import k from "../s-file-icon/s-file-icon.js";
 import w from "../s-form/s-form.js";
 import { bytesToSize as B } from "../utils/bytes-to-size.js";
 import { B as c } from "../Box-Deehc8LF.js";
-import { S as t } from "../Stack-GTpsqQv0.js";
-import { T as o } from "../Typography-zQXZ4jKl.js";
-const D = d(/* @__PURE__ */ e.jsx("path", {
+import { S as e } from "../Stack-GTpsqQv0.js";
+import { T as t } from "../Typography-zQXZ4jKl.js";
+const D = d(/* @__PURE__ */ o.jsx("path", {
   d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), "CloseOutlined"), F = d(/* @__PURE__ */ e.jsx("path", {
+}), "CloseOutlined"), F = d(/* @__PURE__ */ o.jsx("path", {
   d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3M8 13h2.55v3h2.9v-3H16l-4-4z"
 }), "CloudUploadOutlined"), J = ({
   hint: p,
@@ -19,21 +19,22 @@ const D = d(/* @__PURE__ */ e.jsx("path", {
   error: m,
   onRemoveAll: h,
   onUpload: M,
-  onRemove: s,
+  onRemove: n,
   required: u = !1,
   disabledUpload: O = !1,
   isShowBtnRemoveAll: j = !1,
-  ...n
+  ...s
 }) => {
-  var a, l;
-  const { getRootProps: f, getInputProps: g, isDragActive: i } = S(n);
-  return /* @__PURE__ */ e.jsxs(b.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(w, { error: m, label: x, required: u, hint: p, children: /* @__PURE__ */ e.jsxs(
+  var l, a;
+  const { getRootProps: f, getInputProps: g, isDragActive: i } = S(s);
+  return /* @__PURE__ */ o.jsxs(y.Fragment, { children: [
+    /* @__PURE__ */ o.jsx(w, { error: m, label: x, required: u, hint: p, children: /* @__PURE__ */ o.jsxs(
       c,
       {
         sx: {
           alignItems: "center",
-          border: "1px dashed var(--s-palette-divider)",
+          border: "1px dashed",
+          borderColor: "divider",
           borderRadius: 1,
           cursor: "pointer",
           display: "flex",
@@ -43,33 +44,34 @@ const D = d(/* @__PURE__ */ e.jsx("path", {
           p: 4,
           // Visual feedback when files are being dragged over
           ...i && {
-            bgcolor: "var(--s-palette-action-selected)",
+            bgcolor: "action.selected",
             opacity: 0.5
           },
           // Hover effect when not actively dragging
           "&:hover": {
             ...!i && {
-              bgcolor: "var(--s-palette-action-hover)"
+              bgcolor: "action.hover"
             }
           }
         },
         ...f(),
         children: [
-          /* @__PURE__ */ e.jsx("input", { ...g() }),
-          /* @__PURE__ */ e.jsxs(t, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
-            /* @__PURE__ */ e.jsx(
-              y,
+          /* @__PURE__ */ o.jsx("input", { ...g() }),
+          /* @__PURE__ */ o.jsxs(e, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+            /* @__PURE__ */ o.jsx(
+              C,
               {
                 sx: {
-                  border: "1px dashed var(--s-palette-divider)",
-                  color: "var(--s-palette-text-secondary)",
+                  border: "1px dashed",
+                  borderColor: "divider",
+                  color: "text.secondary",
                   backgroundColor: "transparent"
                 },
-                children: /* @__PURE__ */ e.jsx(F, { fontSize: "small" })
+                children: /* @__PURE__ */ o.jsx(F, { fontSize: "small" })
               }
             ),
-            /* @__PURE__ */ e.jsx(t, { spacing: 1, children: /* @__PURE__ */ e.jsxs(o, { color: "text.secondary", variant: "body2", children: [
-              /* @__PURE__ */ e.jsx(o, { component: "span", sx: { textDecoration: "underline" }, variant: "inherit", children: "Click to upload" }),
+            /* @__PURE__ */ o.jsx(e, { spacing: 1, children: /* @__PURE__ */ o.jsxs(t, { color: "text.secondary", variant: "body2", children: [
+              /* @__PURE__ */ o.jsx(t, { component: "span", sx: { textDecoration: "underline" }, variant: "inherit", children: "Click to upload" }),
               " ",
               "or drag and drop your files here"
             ] }) })
@@ -77,35 +79,36 @@ const D = d(/* @__PURE__ */ e.jsx("path", {
         ]
       }
     ) }),
-    (a = n.files) != null && a.length ? /* @__PURE__ */ e.jsxs(t, { mt: 1, spacing: 1, children: [
-      /* @__PURE__ */ e.jsx(t, { component: "ul", spacing: 1, sx: { listStyle: "none", m: 0, p: 0 }, children: (l = n.files) == null ? void 0 : l.map((r) => {
-        const v = r.name.split(".").pop();
-        return /* @__PURE__ */ e.jsxs(
-          t,
+    (l = s.files) != null && l.length ? /* @__PURE__ */ o.jsxs(e, { mt: 1, spacing: 1, children: [
+      /* @__PURE__ */ o.jsx(e, { component: "ul", spacing: 1, sx: { listStyle: "none", m: 0, p: 0 }, children: (a = s.files) == null ? void 0 : a.map((r) => {
+        const b = r.name.split(".").pop();
+        return /* @__PURE__ */ o.jsxs(
+          e,
           {
             component: "li",
             direction: "row",
             spacing: 2,
             sx: {
               alignItems: "center",
-              border: "1px solid var(--s-palette-divider)",
+              border: "1px solid",
+              borderColor: "divider",
               borderRadius: 1,
               flex: "1 1 auto",
               p: 1
             },
             children: [
-              /* @__PURE__ */ e.jsx(k, { extension: v }),
-              /* @__PURE__ */ e.jsxs(c, { sx: { flex: "1 1 auto" }, children: [
-                /* @__PURE__ */ e.jsx(o, { variant: "subtitle2", children: r.name }),
-                /* @__PURE__ */ e.jsx(o, { color: "text.secondary", variant: "body2", children: B(r.size) })
+              /* @__PURE__ */ o.jsx(k, { extension: b }),
+              /* @__PURE__ */ o.jsxs(c, { sx: { flex: "1 1 auto" }, children: [
+                /* @__PURE__ */ o.jsx(t, { variant: "subtitle2", children: r.name }),
+                /* @__PURE__ */ o.jsx(t, { color: "text.secondary", variant: "body2", children: B(r.size) })
               ] }),
-              /* @__PURE__ */ e.jsx(C, { title: "Remove", children: /* @__PURE__ */ e.jsx(
+              /* @__PURE__ */ o.jsx(v, { title: "Remove", children: /* @__PURE__ */ o.jsx(
                 I,
                 {
                   onClick: () => {
-                    s == null || s(r);
+                    n == null || n(r);
                   },
-                  children: /* @__PURE__ */ e.jsx(D, {})
+                  children: /* @__PURE__ */ o.jsx(D, {})
                 }
               ) })
             ]
@@ -113,7 +116,7 @@ const D = d(/* @__PURE__ */ e.jsx("path", {
           r.size
         );
       }) }),
-      /* @__PURE__ */ e.jsx(t, { direction: "row", sx: { alignItems: "center", justifyContent: "flex-end" }, children: j && /* @__PURE__ */ e.jsx(z, { onClick: h, size: "small", type: "button", variant: "text", children: "Remove all" }) })
+      /* @__PURE__ */ o.jsx(e, { direction: "row", sx: { alignItems: "center", justifyContent: "flex-end" }, children: j && /* @__PURE__ */ o.jsx(z, { onClick: h, size: "small", type: "button", variant: "text", children: "Remove all" }) })
     ] }) : null
   ] });
 };

package/dist/s-review/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-review';
+export type { SReviewProps } from './s-review';

package/dist/s-review/index.js

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

package/dist/s-review/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { SxProps } from '@mui/material';
+export interface SReviewProps {
+    id?: string | number;
+    userName: string;
+    userAvatar?: string;
+    rating: number;
+    reviewContent: string;
+    datetime: Date | string;
+    helpfulYes?: number;
+    helpfulNo?: number;
+    onHelpfulVote?: (reviewId: string | number, vote: 'yes' | 'no') => void;
+    showHelpfulSection?: boolean;
+    avatarSize?: number;
+    maxRating?: number;
+    readOnly?: boolean;
+    sx?: SxProps;
+}
+declare const SReview: React.FC<SReviewProps>;
+export default SReview;

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

@@ -0,0 +1,86 @@
+import { j as e } from "../jsx-runtime-DywqP_6a.js";
+import { useState as y } from "react";
+import { Box as d, Stack as v, Typography as i, IconButton as I, Divider as $ } from "@mui/material";
+import C from "../s-avatar/s-avatar.js";
+import V from "../s-rating/s-rating.js";
+import { b } from "../createSvgIcon-CS-Z7P80.js";
+const L = b(/* @__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"), R = b(/* @__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"), U = (a) => {
+  const h = /* @__PURE__ */ new Date(), u = typeof a == "string" ? new Date(a) : a, p = h.getTime() - u.getTime(), x = Math.floor(p / 1e3), t = Math.floor(x / 60), n = Math.floor(t / 60), s = Math.floor(n / 24), r = Math.floor(s / 7), l = Math.floor(s / 30), m = Math.floor(s / 365);
+  return x < 60 ? "just now" : t < 60 ? t === 1 ? "1 minute ago" : `${t} minutes ago` : n < 24 ? n === 1 ? "1 hour ago" : `${n} hours ago` : s < 7 ? s === 1 ? "1 day ago" : `${s} days ago` : r < 4 ? r === 1 ? "1 week ago" : `${r} weeks ago` : l < 12 ? l === 1 ? "1 month ago" : `${l} months ago` : m === 1 ? "1 year ago" : `${m} years ago`;
+}, q = ({
+  id: a = Date.now(),
+  userName: h,
+  userAvatar: u,
+  rating: p,
+  reviewContent: x,
+  datetime: t,
+  helpfulYes: n = 0,
+  helpfulNo: s = 0,
+  onHelpfulVote: r,
+  showHelpfulSection: l = !0,
+  avatarSize: m = 48,
+  maxRating: z = 5,
+  readOnly: S = !0,
+  sx: T = {}
+}) => {
+  const [k, g] = y(n), [D, j] = y(s), [c, M] = y(null), w = (f) => {
+    c === f ? (f === "yes" ? g((o) => Math.max(0, o - 1)) : j((o) => Math.max(0, o - 1)), M(null)) : (c === "yes" ? g((o) => Math.max(0, o - 1)) : c === "no" && j((o) => Math.max(0, o - 1)), f === "yes" ? g((o) => o + 1) : j((o) => o + 1), M(f)), r && r(a, f);
+  }, H = U(t);
+  return /* @__PURE__ */ e.jsxs(d, { sx: { py: 2, ...T }, children: [
+    /* @__PURE__ */ e.jsxs(v, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+      /* @__PURE__ */ e.jsx(C, { avatar: u, name: h, size: m }),
+      /* @__PURE__ */ e.jsxs(d, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(v, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+          /* @__PURE__ */ e.jsx(i, { variant: "subtitle2", fontWeight: "600", children: h }),
+          /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: H }) })
+        ] }),
+        /* @__PURE__ */ e.jsx(d, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(V, { value: p, max: z, readOnly: S, size: "small" }) }),
+        /* @__PURE__ */ e.jsx(i, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: x }),
+        l && /* @__PURE__ */ e.jsxs(d, { children: [
+          /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", sx: { mr: 2 }, children: "Was this review helpful?" }),
+          /* @__PURE__ */ e.jsxs(v, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ e.jsx(
+              I,
+              {
+                size: "small",
+                onClick: () => w("yes"),
+                sx: {
+                  color: c === "yes" ? "primary.main" : "text.secondary",
+                  "&:hover": {
+                    backgroundColor: "action.hover"
+                  }
+                },
+                children: /* @__PURE__ */ e.jsx(R, { fontSize: "small" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: k }),
+            /* @__PURE__ */ e.jsx(
+              I,
+              {
+                size: "small",
+                onClick: () => w("no"),
+                sx: {
+                  color: c === "no" ? "error.main" : "text.secondary",
+                  ml: 1,
+                  "&:hover": {
+                    backgroundColor: "action.hover"
+                  }
+                },
+                children: /* @__PURE__ */ e.jsx(L, { fontSize: "small" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: D })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsx($, { sx: { mt: 2 } })
+  ] });
+};
+export {
+  q as default
+};

package/package.json

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