@solostylist/ui-kit 1.0.134 → 1.0.136

package/dist/{Favorite-D-vTz4mw.js → Favorite-DmSF47XC.js}

@@ -1,8 +1,8 @@
 import { j as o } from "./jsx-runtime-OVHDjVDe.js";
 import { c as t } from "./createSvgIcon-Dq42_0tn.js";
-const s = t(/* @__PURE__ */ o.jsx("path", {
+const c = t(/* @__PURE__ */ o.jsx("path", {
   d: "m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"
 }), "Favorite");
 export {
-  s as F
+  c as F
 };

package/dist/main.d.ts

@@ -16,6 +16,8 @@ export { default as SChatInput } from './s-chat-input/index';
 export type { SChatInputProps } from './s-chat-input/index';
 export { default as SChatMessage } from './s-chat-message/index';
 export type { SChatMessageProps } from './s-chat-message/index';
+export { default as SCommentMessage } from './s-comment-message/index';
+export type { SCommentMessageProps } from './s-comment-message/index';
 export { default as STextEditor } from './s-text-editor/index';
 export type { STextEditorProps } from './s-text-editor/index';
 export { default as SCheckbox } from './s-checkbox/index';
@@ -105,6 +107,8 @@ export { default as SLazyImage } from './s-lazy-image/index';
 export type { SLazyImageProps } from './s-lazy-image/index';
 export { default as SImageComparison } from './s-image-comparison/index';
 export type { SImageComparisonProps } from './s-image-comparison/index';
+export { default as SItemNotFound } from './s-item-not-found/index';
+export type { SItemNotFoundProps } from './s-item-not-found/index';
 export { default as SCategoryCard } from './s-category-card/index';
 export type { SCategoryCardProps } from './s-category-card/index';
 export { default as SRadialPulseAnimate } from './s-radial-pulse-animate/index';
@@ -119,5 +123,7 @@ export { default as STextShimmer } from './s-text-shimmer/index';
 export type { STextShimmerProps } from './s-text-shimmer/index';
 export { default as STypewriterText } from './s-typewriter-text/index';
 export type { STypewriterTextProps } from './s-typewriter-text/index';
+export { default as SLanguageSwitcher, SLanguagePopover, defaultLanguageOptions } from './s-language-switcher/index';
+export type { SLanguageSwitcherProps, SLanguagePopoverProps, SLanguageOption } from './s-language-switcher/index';
 export * from './hooks';
 export * from './utils';

package/dist/main.js

@@ -1,4 +1,4 @@
-import { default as a } from "./s-accordion/s-accordion.js";
+import { default as t } from "./s-accordion/s-accordion.js";
 import { default as l } from "./s-action-overlay/s-action-overlay.js";
 import { default as s } from "./s-autocomplete/s-autocomplete.js";
 import { default as S } from "./s-avatar/s-avatar.js";
@@ -7,151 +7,159 @@ import { default as i } from "./s-button-link/s-button-link.js";
 import { default as g } from "./s-carousel/s-carousel.js";
 import { default as T } from "./s-chat-input/s-chat-input.js";
 import { default as v } from "./s-chat-message/s-chat-message.js";
-import { default as b } from "./s-text-editor/s-text-editor.js";
+import { default as b } from "./s-comment-message/s-comment-message.js";
+import { default as M } from "./s-text-editor/s-text-editor.js";
 import "./s-text-editor/s-text-editor-toolbar.js";
 import { default as y } from "./s-checkbox/s-checkbox.js";
-import { default as h } from "./s-chip/s-chip.js";
-import { default as k } from "./s-chips/s-chips.js";
-import { default as F } from "./s-data-table/s-data-table.js";
-import { DialogConfirmProvider as B, default as w, useDialogConfirm as z } from "./s-dialog-confirm/s-dialog-confirm.js";
-import { DialogMessageProvider as R, default as G, useDialogMessage as N } from "./s-dialog-message/s-dialog-message.js";
-import { default as j } from "./s-error/s-error.js";
-import { default as V } from "./s-empty/s-empty.js";
-import { default as H } from "./s-flex-box/s-flex-box.js";
-import { default as Q } from "./s-dialog/s-dialog.js";
-import { default as W } from "./s-file-dropzone/s-file-dropzone.js";
-import { default as Y } from "./s-file-icon/s-file-icon.js";
-import { default as _ } from "./s-i18n-provider/s-i18n-provider.js";
-import { default as ee } from "./s-icon-button/s-icon-button.js";
-import { default as re } from "./s-label/s-label.js";
-import { default as ae } from "./s-multi-select/s-multi-select.js";
-import { default as le } from "./s-no-ssr/s-no-ssr.js";
-import { default as se } from "./s-overlay-scrollbar/s-overlay-scrollbar.js";
-import { default as Se } from "./s-text-field/s-text-field.js";
-import { default as de } from "./s-pagination/s-pagination.js";
-import { default as ie } from "./s-select/s-select.js";
-import { default as ge } from "./s-skeleton/s-skeleton.js";
-import { default as Te } from "./s-tip/s-tip.js";
-import { default as ve } from "./s-text-truncation/s-text-truncation.js";
-import { default as be, SnackbarMessageProvider as De, useSnackbarMessage as ye } from "./s-snackbar-message/s-snackbar-message.js";
-import { default as he } from "./s-form/s-form.js";
-import { SSmartTextField as ke } from "./s-smart-text-field/s-smart-text-field.js";
-import { SCopilotKitProvider as Fe } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
-import { SStripeCVC as Be, SStripeExpiry as we, SStripeNumber as ze, StripeTextField as Ee } from "./s-stripe/s-stripe.js";
-import { default as Ge } from "./s-theme-provider/s-theme-provider.js";
-import { default as Oe } from "./s-theme-switch/s-theme-switch.js";
-import { default as Ke } from "./s-datetime-picker/s-datetime-picker.js";
-import { default as qe } from "./s-date-picker/s-date-picker.js";
-import { default as Je } from "./s-localization-provider/s-localization-provider.js";
-import { default as Ue } from "./s-gradient-icon/s-gradient-icon.js";
-import { default as Xe } from "./s-glow-button/s-glow-button.js";
-import { default as Ze } from "./s-moving-border/s-moving-border.js";
-import { default as $e } from "./s-scroll-reveal/s-scroll-reveal.js";
-import { default as oo } from "./s-spotlight-cursor/s-spotlight-cursor.js";
-import { default as to } from "./s-copyable-text/s-copyable-text.js";
-import { MediaItem as fo, default as lo } from "./s-interactive-gallery/s-interactive-gallery.js";
-import { default as so } from "./s-image-modal/s-image-modal.js";
-import { default as So } from "./s-lazy-image/s-lazy-image.js";
-import { default as uo } from "./s-image-comparison/s-image-comparison.js";
-import { default as no } from "./s-category-card/s-category-card.js";
-import { default as co } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
-import { default as Co } from "./s-rating/s-rating.js";
-import { default as Po } from "./s-review/s-review.js";
-import { default as Do } from "./s-tabs/s-tabs.js";
-import { default as Mo } from "./s-tabs/s-tab.js";
-import { default as Io } from "./s-tabs/s-tab-panel.js";
-import { default as Lo } from "./s-text-shimmer/s-text-shimmer.js";
-import { default as Ao } from "./s-typewriter-text/s-typewriter-text.js";
-import { useDialog as wo } from "./hooks/use-dialog.js";
-import { usePopover as Eo } from "./hooks/use-popover.js";
+import { default as L } from "./s-chip/s-chip.js";
+import { default as F } from "./s-chips/s-chips.js";
+import { default as B } from "./s-data-table/s-data-table.js";
+import { DialogConfirmProvider as z, default as E, useDialogConfirm as R } from "./s-dialog-confirm/s-dialog-confirm.js";
+import { DialogMessageProvider as N, default as O, useDialogMessage as j } from "./s-dialog-message/s-dialog-message.js";
+import { default as V } from "./s-error/s-error.js";
+import { default as H } from "./s-empty/s-empty.js";
+import { default as Q } from "./s-flex-box/s-flex-box.js";
+import { default as W } from "./s-dialog/s-dialog.js";
+import { default as Y } from "./s-file-dropzone/s-file-dropzone.js";
+import { default as _ } from "./s-file-icon/s-file-icon.js";
+import { default as ee } from "./s-i18n-provider/s-i18n-provider.js";
+import { default as re } from "./s-icon-button/s-icon-button.js";
+import { default as te } from "./s-label/s-label.js";
+import { default as le } from "./s-multi-select/s-multi-select.js";
+import { default as se } from "./s-no-ssr/s-no-ssr.js";
+import { default as Se } from "./s-overlay-scrollbar/s-overlay-scrollbar.js";
+import { default as de } from "./s-text-field/s-text-field.js";
+import { default as ie } from "./s-pagination/s-pagination.js";
+import { default as ge } from "./s-select/s-select.js";
+import { default as Te } from "./s-skeleton/s-skeleton.js";
+import { default as ve } from "./s-tip/s-tip.js";
+import { default as be } from "./s-text-truncation/s-text-truncation.js";
+import { default as Me, SnackbarMessageProvider as he, useSnackbarMessage as ye } from "./s-snackbar-message/s-snackbar-message.js";
+import { default as Le } from "./s-form/s-form.js";
+import { SSmartTextField as Fe } 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 ze, SStripeExpiry as Ee, SStripeNumber as Re, StripeTextField as Ge } from "./s-stripe/s-stripe.js";
+import { default as Oe } from "./s-theme-provider/s-theme-provider.js";
+import { default as Ke } from "./s-theme-switch/s-theme-switch.js";
+import { default as qe } from "./s-datetime-picker/s-datetime-picker.js";
+import { default as Je } from "./s-date-picker/s-date-picker.js";
+import { default as Ue } from "./s-localization-provider/s-localization-provider.js";
+import { default as Xe } from "./s-gradient-icon/s-gradient-icon.js";
+import { default as Ze } from "./s-glow-button/s-glow-button.js";
+import { default as $e } from "./s-moving-border/s-moving-border.js";
+import { default as oo } from "./s-scroll-reveal/s-scroll-reveal.js";
+import { default as ao } from "./s-spotlight-cursor/s-spotlight-cursor.js";
+import { default as fo } from "./s-copyable-text/s-copyable-text.js";
+import { MediaItem as mo, default as so } from "./s-interactive-gallery/s-interactive-gallery.js";
+import { default as So } from "./s-image-modal/s-image-modal.js";
+import { default as xo } from "./s-lazy-image/s-lazy-image.js";
+import { default as no } from "./s-image-comparison/s-image-comparison.js";
+import { default as co } from "./s-item-not-found/s-item-not-found.js";
+import { default as Co } from "./s-category-card/s-category-card.js";
+import { default as Po } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
+import { default as Do } from "./s-rating/s-rating.js";
+import { default as ho } from "./s-review/s-review.js";
+import { default as Io } from "./s-tabs/s-tabs.js";
+import { default as ko } from "./s-tabs/s-tab.js";
+import { default as Ao } from "./s-tabs/s-tab-panel.js";
+import { default as wo } from "./s-text-shimmer/s-text-shimmer.js";
+import { default as Eo } from "./s-typewriter-text/s-typewriter-text.js";
+import { SLanguagePopover as Go, default as No, defaultLanguageOptions as Oo } from "./s-language-switcher/s-language-switcher.js";
+import { useDialog as Ko } from "./hooks/use-dialog.js";
+import { usePopover as qo } from "./hooks/use-popover.js";
 import "react";
-import { useScrollAnimation as Go } from "./hooks/use-scroll-animation.js";
-import { formatDatePosted as Oo } from "./utils/dayjs.js";
-import { bytesToSize as Ko } from "./utils/bytes-to-size.js";
-import { LogLevel as qo, Logger as Ho, createLogger as Jo, logger as Qo } from "./utils/logger.js";
-import { default as Wo } from "dayjs";
+import { useScrollAnimation as Jo } from "./hooks/use-scroll-animation.js";
+import { formatDatePosted as Uo } from "./utils/dayjs.js";
+import { bytesToSize as Xo } from "./utils/bytes-to-size.js";
+import { LogLevel as Zo, Logger as _o, createLogger as $o, logger as er } from "./utils/logger.js";
+import { default as rr } from "dayjs";
 export {
-  B as DialogConfirmProvider,
-  R as DialogMessageProvider,
-  qo as LogLevel,
-  Ho as Logger,
-  fo as MediaItem,
-  a as SAccordion,
+  z as DialogConfirmProvider,
+  N as DialogMessageProvider,
+  Zo as LogLevel,
+  _o as Logger,
+  mo as MediaItem,
+  t as SAccordion,
   l as SActionOverlay,
   s as SAutocomplete,
   S as SAvatar,
   d as SButton,
   i as SButtonLink,
   g as SCarousel,
-  no as SCategoryCard,
+  Co as SCategoryCard,
   T as SChatInput,
   v as SChatMessage,
   y as SCheckbox,
-  h as SChip,
-  k as SChips,
-  Fe as SCopilotKitProvider,
-  to as SCopyableText,
-  F as SDataTable,
-  qe as SDatePicker,
-  Ke as SDateTimePicker,
-  Q as SDialog,
-  w as SDialogConfirm,
-  G as SDialogMessage,
-  V as SEmpty,
-  j as SError,
-  W as SFileDropzone,
-  Y as SFileIcon,
-  H as SFlexBox,
-  he as SForm,
-  Xe as SGlowButton,
-  Ue as SGradientIcon,
-  _ as SI18nProvider,
-  ee as SIconButton,
-  uo as SImageComparison,
-  so as SImageModal,
-  lo as SInteractiveGallery,
-  re as SLabel,
-  So as SLazyImage,
-  Je as SLocalizationProvider,
-  Ze as SMovingBorder,
-  ae as SMultiSelect,
-  le as SNoSsr,
-  se as SOverlayScrollbar,
-  de as SPagination,
-  co as SRadialPulseAnimate,
-  Co as SRating,
-  Po as SReview,
-  $e as SScrollReveal,
-  ie as SSelect,
-  ge as SSkeleton,
-  ke as SSmartTextField,
-  be as SSnackbarMessage,
-  oo as SSpotlightCursor,
-  Be as SStripeCVC,
-  we as SStripeExpiry,
-  ze as SStripeNumber,
-  Mo as STab,
-  Io as STabPanel,
-  Do as STabs,
-  b as STextEditor,
-  Se as STextField,
-  Lo as STextShimmer,
-  ve as STextTruncation,
-  Ge as SThemeProvider,
-  Oe as SThemeSwitch,
-  Te as STip,
-  Ao as STypewriterText,
-  De as SnackbarMessageProvider,
-  Ee as StripeTextField,
-  Ko as bytesToSize,
-  Jo as createLogger,
-  Wo as dayjs,
-  Oo as formatDatePosted,
-  Qo as logger,
-  wo as useDialog,
-  z as useDialogConfirm,
-  N as useDialogMessage,
-  Eo as usePopover,
-  Go as useScrollAnimation,
+  L as SChip,
+  F as SChips,
+  b as SCommentMessage,
+  Be as SCopilotKitProvider,
+  fo as SCopyableText,
+  B as SDataTable,
+  Je as SDatePicker,
+  qe as SDateTimePicker,
+  W as SDialog,
+  E as SDialogConfirm,
+  O as SDialogMessage,
+  H as SEmpty,
+  V as SError,
+  Y as SFileDropzone,
+  _ as SFileIcon,
+  Q as SFlexBox,
+  Le as SForm,
+  Ze as SGlowButton,
+  Xe as SGradientIcon,
+  ee as SI18nProvider,
+  re as SIconButton,
+  no as SImageComparison,
+  So as SImageModal,
+  so as SInteractiveGallery,
+  co as SItemNotFound,
+  te as SLabel,
+  Go as SLanguagePopover,
+  No as SLanguageSwitcher,
+  xo as SLazyImage,
+  Ue as SLocalizationProvider,
+  $e as SMovingBorder,
+  le as SMultiSelect,
+  se as SNoSsr,
+  Se as SOverlayScrollbar,
+  ie as SPagination,
+  Po as SRadialPulseAnimate,
+  Do as SRating,
+  ho as SReview,
+  oo as SScrollReveal,
+  ge as SSelect,
+  Te as SSkeleton,
+  Fe as SSmartTextField,
+  Me as SSnackbarMessage,
+  ao as SSpotlightCursor,
+  ze as SStripeCVC,
+  Ee as SStripeExpiry,
+  Re as SStripeNumber,
+  ko as STab,
+  Ao as STabPanel,
+  Io as STabs,
+  M as STextEditor,
+  de as STextField,
+  wo as STextShimmer,
+  be as STextTruncation,
+  Oe as SThemeProvider,
+  Ke as SThemeSwitch,
+  ve as STip,
+  Eo as STypewriterText,
+  he as SnackbarMessageProvider,
+  Ge as StripeTextField,
+  Xo as bytesToSize,
+  $o as createLogger,
+  rr as dayjs,
+  Oo as defaultLanguageOptions,
+  Uo as formatDatePosted,
+  er as logger,
+  Ko as useDialog,
+  R as useDialogConfirm,
+  j as useDialogMessage,
+  qo as usePopover,
+  Jo as useScrollAnimation,
   ye as useSnackbarMessage
 };

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

@@ -21,6 +21,9 @@ export interface SChatMessageProps extends Omit<BoxProps, 'children'> {
     attachments?: ChatAttachment[];
     onAttachmentClick?: (attachment: ChatAttachment) => void;
     onDownload?: (attachment: ChatAttachment) => void;
+    hasError?: boolean;
+    errorMessage?: string;
+    onRetry?: () => void;
 }
 declare const SChatMessage: React.FC<SChatMessageProps>;
 export default SChatMessage;

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

@@ -1,42 +1,49 @@
 import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as v } from "react";
-import { Box as o, Typography as l, Paper as H, IconButton as D } from "@mui/material";
-import S from "../s-avatar/s-avatar.js";
-import L from "../s-image-modal/s-image-modal.js";
-import O from "../s-lazy-image/s-lazy-image.js";
-import { c as z } from "../createSvgIcon-Dq42_0tn.js";
-const R = z(/* @__PURE__ */ r.jsx("path", {
+import { useState as I } from "react";
+import { Box as o, Typography as s, Paper as R, IconButton as b } from "@mui/material";
+import k from "../s-avatar/s-avatar.js";
+import V from "../s-image-modal/s-image-modal.js";
+import U from "../s-lazy-image/s-lazy-image.js";
+import { c as x } from "../createSvgIcon-Dq42_0tn.js";
+const A = x(/* @__PURE__ */ r.jsx("path", {
   d: "M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"
-}), "Download"), U = z(/* @__PURE__ */ r.jsx("path", {
+}), "Download"), P = x(/* @__PURE__ */ r.jsx("path", {
+  d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"
+}), "ErrorOutline"), E = x(/* @__PURE__ */ r.jsx("path", {
   d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z"
-}), "InsertDriveFile"), J = ({
-  message: m,
-  variant: b = "received",
-  timestamp: f,
-  avatar: h,
-  senderName: t,
-  showAvatar: g = !0,
-  showTimestamp: I = !1,
-  maxWidth: w = "70%",
-  attachments: x = [],
-  onAttachmentClick: s,
+}), "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,
+  variant: w = "received",
+  timestamp: g,
+  avatar: u,
+  senderName: l,
+  showAvatar: j = !0,
+  showTimestamp: M = !1,
+  maxWidth: C = "70%",
+  attachments: m = [],
+  onAttachmentClick: t,
   onDownload: n,
-  sx: k,
-  ...M
+  hasError: h = !1,
+  errorMessage: T = "Failed to send message",
+  onRetry: v,
+  sx: B,
+  ...F
 }) => {
-  const [a, u] = v(null), [C, j] = v(!1), i = b === "sent", T = (e) => (typeof e == "string" ? new Date(e) : e).toLocaleTimeString("en-US", {
+  const [a, y] = I(null), [W, z] = I(!1), i = w === "sent", H = (e) => (typeof e == "string" ? new Date(e) : e).toLocaleTimeString("en-US", {
     hour: "2-digit",
     minute: "2-digit",
     hour12: !0
-  }), B = (e) => {
+  }), L = (e) => {
     if (!e) return "";
-    const c = ["Bytes", "KB", "MB", "GB"], p = Math.floor(Math.log(e) / Math.log(1024));
-    return Math.round(e / Math.pow(1024, p) * 100) / 100 + " " + c[p];
-  }, F = (e) => {
-    s ? s(e) : (u(e), j(!0));
-  }, W = (e) => {
-    s ? s(e) : n && n(e);
-  }, d = x.filter((e) => e.type === "image"), y = x.filter((e) => e.type === "file");
+    const d = ["Bytes", "KB", "MB", "GB"], p = Math.floor(Math.log(e) / Math.log(1024));
+    return Math.round(e / Math.pow(1024, p) * 100) / 100 + " " + d[p];
+  }, O = (e) => {
+    t ? t(e) : (y(e), z(!0));
+  }, D = (e) => {
+    t ? t(e) : n && n(e);
+  }, c = m.filter((e) => e.type === "image"), S = m.filter((e) => e.type === "file");
   return /* @__PURE__ */ r.jsxs(
     o,
     {
@@ -46,13 +53,13 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
       gap: 1,
       mb: 1,
       sx: {
-        maxWidth: w,
+        maxWidth: C,
         alignSelf: i ? "flex-end" : "flex-start",
-        ...k
+        ...B
       },
-      ...M,
+      ...F,
       children: [
-        g && !i && /* @__PURE__ */ r.jsx(S, { avatar: h, name: t, size: 36 }),
+        j && !i && /* @__PURE__ */ r.jsx(k, { avatar: u, name: l, size: 36 }),
         /* @__PURE__ */ r.jsxs(
           o,
           {
@@ -62,8 +69,8 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
             gap: 0.5,
             sx: { minWidth: 0 },
             children: [
-              t && !i && /* @__PURE__ */ r.jsx(
-                l,
+              l && !i && /* @__PURE__ */ r.jsx(
+                s,
                 {
                   variant: "caption",
                   sx: {
@@ -72,7 +79,7 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
                     fontWeight: 500,
                     ml: 0.5
                   },
-                  children: t
+                  children: l
                 }
               ),
               /* @__PURE__ */ r.jsxs(
@@ -86,29 +93,32 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
                     backgroundColor: i ? "primary.main" : "",
                     color: i ? "primary.contrastText" : "text.primary",
                     border: i ? "none" : "1px solid",
-                    borderColor: "divider",
+                    borderColor: h ? "error.main" : "divider",
                     ...i && {
                       backgroundColor: "primary.dark"
                     },
+                    ...h && {
+                      opacity: 0.7
+                    },
                     overflow: "hidden"
                   },
                   children: [
-                    d.length > 0 && /* @__PURE__ */ r.jsx(
+                    c.length > 0 && /* @__PURE__ */ r.jsx(
                       o,
                       {
                         sx: {
                           display: "grid",
-                          gridTemplateColumns: d.length === 1 ? "1fr" : "repeat(2, 1fr)",
+                          gridTemplateColumns: c.length === 1 ? "1fr" : "repeat(2, 1fr)",
                           gap: 0.5,
                           p: 0.5
                         },
                         minWidth: 200,
-                        children: d.map((e) => /* @__PURE__ */ r.jsx(
+                        children: c.map((e) => /* @__PURE__ */ r.jsx(
                           o,
                           {
                             sx: {
                               position: "relative",
-                              paddingTop: d.length === 1 ? "66.67%" : "100%",
+                              paddingTop: c.length === 1 ? "66.67%" : "100%",
                               cursor: "pointer",
                               borderRadius: 1.5,
                               overflow: "hidden",
@@ -116,9 +126,9 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
                                 opacity: 0.9
                               }
                             },
-                            onClick: () => F(e),
+                            onClick: () => O(e),
                             children: /* @__PURE__ */ r.jsx(
-                              O,
+                              U,
                               {
                                 src: e.thumbnailUrl || e.url,
                                 alt: e.name || "Image",
@@ -137,8 +147,8 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
                         ))
                       }
                     ),
-                    y.length > 0 && /* @__PURE__ */ r.jsx(o, { sx: { p: 1.5 }, children: y.map((e, c) => /* @__PURE__ */ r.jsxs(
-                      H,
+                    S.length > 0 && /* @__PURE__ */ r.jsx(o, { sx: { p: 1.5 }, children: S.map((e, d) => /* @__PURE__ */ r.jsxs(
+                      R,
                       {
                         variant: "outlined",
                         sx: {
@@ -146,17 +156,17 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
                           alignItems: "center",
                           gap: 1.5,
                           p: 1,
-                          mt: c > 0 ? 1 : 0,
+                          mt: d > 0 ? 1 : 0,
                           cursor: "pointer",
                           backgroundColor: i ? "blackAlpha.zero" : "background.paper",
                           "&:hover": {
                             backgroundColor: i ? "blackAlpha.light" : "action.hover"
                           }
                         },
-                        onClick: () => W(e),
+                        onClick: () => D(e),
                         children: [
                           /* @__PURE__ */ r.jsx(
-                            U,
+                            E,
                             {
                               sx: {
                                 fontSize: 32,
@@ -166,7 +176,7 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
                           ),
                           /* @__PURE__ */ r.jsxs(o, { sx: { flex: 1, minWidth: 0 }, children: [
                             /* @__PURE__ */ r.jsx(
-                              l,
+                              s,
                               {
                                 variant: "body2",
                                 sx: {
@@ -181,19 +191,19 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
                               }
                             ),
                             e.size && /* @__PURE__ */ r.jsx(
-                              l,
+                              s,
                               {
                                 variant: "caption",
                                 sx: {
                                   fontSize: "0.75rem",
                                   color: i ? "whiteAlpha.dark" : "text.secondary"
                                 },
-                                children: B(e.size)
+                                children: L(e.size)
                               }
                             )
                           ] }),
                           n && /* @__PURE__ */ r.jsx(
-                            D,
+                            b,
                             {
                               size: "small",
                               onClick: (p) => {
@@ -202,15 +212,15 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
                               sx: {
                                 color: i ? "primary.contrastText" : "action.active"
                               },
-                              children: /* @__PURE__ */ r.jsx(R, { fontSize: "small" })
+                              children: /* @__PURE__ */ r.jsx(A, { fontSize: "small" })
                             }
                           )
                         ]
                       },
                       e.id
                     )) }),
-                    m && /* @__PURE__ */ r.jsx(o, { sx: { px: 2, py: 1.5, pt: x.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ r.jsx(
-                      l,
+                    f && /* @__PURE__ */ r.jsx(o, { sx: { px: 2, py: 1.5, pt: m.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ r.jsx(
+                      s,
                       {
                         variant: "body2",
                         sx: {
@@ -218,14 +228,14 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
                           lineHeight: 1.4,
                           whiteSpace: "pre-wrap"
                         },
-                        children: m
+                        children: f
                       }
                     ) })
                   ]
                 }
               ),
-              I && f && /* @__PURE__ */ r.jsx(
-                l,
+              M && g && /* @__PURE__ */ r.jsx(
+                s,
                 {
                   variant: "caption",
                   sx: {
@@ -234,19 +244,61 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
                     ml: i ? 0 : 0.5,
                     mr: i ? 0.5 : 0
                   },
-                  children: T(f)
+                  children: H(g)
+                }
+              ),
+              h && /* @__PURE__ */ r.jsxs(
+                o,
+                {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 0.5,
+                  sx: {
+                    color: "error.main",
+                    ml: i ? 0 : 0.5,
+                    mr: i ? 0.5 : 0
+                  },
+                  children: [
+                    /* @__PURE__ */ r.jsx(P, { sx: { fontSize: "0.875rem" } }),
+                    /* @__PURE__ */ r.jsx(
+                      s,
+                      {
+                        variant: "caption",
+                        sx: {
+                          fontSize: "0.75rem",
+                          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" } })
+                      }
+                    )
+                  ]
                 }
               )
             ]
           }
         ),
-        g && i && /* @__PURE__ */ r.jsx(S, { avatar: h, name: t, size: 36 }),
+        j && i && /* @__PURE__ */ r.jsx(k, { avatar: u, name: l, size: 36 }),
         a && /* @__PURE__ */ r.jsx(
-          L,
+          V,
           {
-            isOpen: C,
+            isOpen: W,
             onClose: () => {
-              j(!1), u(null);
+              z(!1), y(null);
             },
             selectedItem: {
               id: a.id,
@@ -263,5 +315,5 @@ const R = z(/* @__PURE__ */ r.jsx("path", {
   );
 };
 export {
-  J as default
+  _ as default
 };

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

@@ -2,7 +2,7 @@ import { j as t } from "../jsx-runtime-OVHDjVDe.js";
 import { useState as u, useEffect as w } from "react";
 import { Box as v, Stack as y, Typography as m, IconButton as W, Button as k, Collapse as H } from "@mui/material";
 import A from "../s-avatar/s-avatar.js";
-import { F as P } from "../Favorite-D-vTz4mw.js";
+import { F as P } from "../Favorite-DmSF47XC.js";
 import { c as I } from "../createSvgIcon-Dq42_0tn.js";
 import { E as V } from "../ExpandMore-mZGpvXf6.js";
 const Y = I(/* @__PURE__ */ t.jsx("path", {

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

@@ -0,0 +1,2 @@
+export { default } from './s-item-not-found';
+export type { SItemNotFoundProps } from './s-item-not-found';

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { BoxProps } from '@mui/material';
+import { SLazyImageProps } from '../s-lazy-image';
+export interface SItemNotFoundProps {
+    message: string;
+    image?: string;
+    boxProps?: BoxProps;
+    lazyImageProps?: Omit<SLazyImageProps, 'src'>;
+}
+declare const SItemNotFound: ({ message, image, boxProps, lazyImageProps }: SItemNotFoundProps) => import("react/jsx-runtime").JSX.Element;
+export default SItemNotFound;

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

@@ -0,0 +1,10 @@
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { Box as n, Typography as i } from "@mui/material";
+import a from "../s-lazy-image/s-lazy-image.js";
+const c = ({ message: e, image: o = "/assets/not-found.svg", boxProps: r, lazyImageProps: s }) => /* @__PURE__ */ t.jsxs(n, { display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column", ...r, children: [
+  /* @__PURE__ */ t.jsx(a, { src: o, width: 220, height: 220, ...s }),
+  /* @__PURE__ */ t.jsx(i, { variant: "h6", color: "text.disabled", children: e })
+] });
+export {
+  c as default
+};

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

@@ -7,9 +7,11 @@ export interface SReviewProps {
     rating: number;
     reviewContent: string;
     datetime: Date | string;
+    images?: string[];
+    userHelpfulVote?: 'yes' | 'no' | null;
     helpfulYes?: number;
     helpfulNo?: number;
-    onHelpfulVote?: (reviewId: string | number, vote: 'yes' | 'no') => void;
+    onHelpfulVote?: (reviewId: string | number, vote: 'yes' | 'no' | null) => void;
     showHelpfulSection?: boolean;
     avatarSize?: number;
     maxRating?: number;

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

@@ -1,86 +1,141 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.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 { c as b } from "../createSvgIcon-Dq42_0tn.js";
-const L = b(/* @__PURE__ */ e.jsx("path", {
+import { useState as g, useEffect as A } from "react";
+import { Box as p, Stack as j, 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", {
   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", {
+}), "ThumbDown"), P = $(/* @__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 = ({
+}), "ThumbUp"), Q = (a) => {
+  const c = /* @__PURE__ */ new Date(), y = typeof a == "string" ? new Date(a) : a, v = c.getTime() - y.getTime(), u = Math.floor(v / 1e3), l = Math.floor(u / 60), s = Math.floor(l / 60), r = Math.floor(s / 24), h = Math.floor(r / 7), m = Math.floor(r / 30), f = Math.floor(r / 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` : r < 7 ? r === 1 ? "1 day ago" : `${r} 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`;
+}, re = ({
   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 = {}
+  userName: c,
+  userAvatar: y,
+  rating: v,
+  reviewContent: u,
+  datetime: l,
+  images: s,
+  userHelpfulVote: r = null,
+  helpfulYes: h = 0,
+  helpfulNo: m = 0,
+  onHelpfulVote: f,
+  showHelpfulSection: k = !0,
+  avatarSize: z = 48,
+  maxRating: D = 5,
+  readOnly: H = !0,
+  sx: L = {}
 }) => {
-  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 }) })
+  const [R, w] = g(h), [V, I] = g(m), [d, M] = g(r), [W, C] = g(!1), [E, b] = g(null), S = (t) => {
+    let n = t;
+    d === t ? (t === "yes" ? w((o) => Math.max(0, o - 1)) : I((o) => Math.max(0, o - 1)), M(null), n = null) : (d === "yes" ? w((o) => Math.max(0, o - 1)) : d === "no" && I((o) => Math.max(0, o - 1)), t === "yes" ? w((o) => o + 1) : I((o) => o + 1), M(t), n = t), f && f(a, n);
+  }, x = (s == null ? void 0 : s.map((t, n) => ({
+    id: `review-${a}-image-${n}`,
+    type: "image",
+    url: t,
+    title: `Review image ${n + 1}`,
+    desc: `Image ${n + 1} from ${c}'s review`
+  }))) || [], O = (t) => {
+    const n = x[t];
+    n && (b(n), C(!0));
+  }, U = () => {
+    C(!1), b(null);
+  }, Y = (t) => {
+    b(t);
+  }, B = Q(l);
+  return A(() => {
+    M(r);
+  }, [r]), /* @__PURE__ */ e.jsxs(p, { sx: { py: 2, ...L }, children: [
+    /* @__PURE__ */ e.jsxs(j, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+      /* @__PURE__ */ e.jsx(N, { avatar: y, name: c, size: z }),
+      /* @__PURE__ */ e.jsxs(p, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(j, { 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 }) })
         ] }),
-        /* @__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(p, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(J, { value: v, 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(j, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: s.map((t, n) => /* @__PURE__ */ e.jsx(
+          G,
+          {
+            src: t,
+            alt: `Review image ${n + 1}`,
+            width: 80,
+            height: 80,
+            variant: "rounded",
+            style: {
+              objectFit: "cover",
+              cursor: "pointer"
+            },
+            onClick: () => O(n),
+            onMouseEnter: (o) => {
+              o.currentTarget.style.opacity = "0.8";
+            },
+            onMouseLeave: (o) => {
+              o.currentTarget.style.opacity = "1";
+            }
+          },
+          n
+        )) }),
+        k && /* @__PURE__ */ e.jsxs(p, { 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.jsxs(j, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
             /* @__PURE__ */ e.jsx(
-              I,
+              T,
               {
                 size: "small",
-                onClick: () => w("yes"),
+                onClick: () => S("yes"),
                 sx: {
-                  color: c === "yes" ? "primary.main" : "text.secondary",
+                  color: d === "yes" ? "primary.main" : "text.secondary",
                   "&:hover": {
                     backgroundColor: "action.hover"
                   }
                 },
-                children: /* @__PURE__ */ e.jsx(R, { fontSize: "small" })
+                children: /* @__PURE__ */ e.jsx(P, { fontSize: "small" })
               }
             ),
-            /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: k }),
+            /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: R }),
             /* @__PURE__ */ e.jsx(
-              I,
+              T,
               {
                 size: "small",
-                onClick: () => w("no"),
+                onClick: () => S("no"),
                 sx: {
-                  color: c === "no" ? "error.main" : "text.secondary",
+                  color: d === "no" ? "error.main" : "text.secondary",
                   ml: 1,
                   "&:hover": {
                     backgroundColor: "action.hover"
                   }
                 },
-                children: /* @__PURE__ */ e.jsx(L, { fontSize: "small" })
+                children: /* @__PURE__ */ e.jsx(K, { fontSize: "small" })
               }
             ),
-            /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: D })
+            /* @__PURE__ */ e.jsx(i, { variant: "caption", color: "text.secondary", children: V })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ e.jsx($, { sx: { mt: 2 } })
+    /* @__PURE__ */ e.jsx(F, { sx: { mt: 2 } }),
+    /* @__PURE__ */ e.jsx(
+      q,
+      {
+        isOpen: W,
+        onClose: U,
+        selectedItem: E,
+        onItemChange: Y,
+        mediaItems: x,
+        showNavigation: x.length > 1,
+        showThumbnailDock: x.length > 1,
+        showCounter: x.length > 1
+      }
+    )
   ] });
 };
 export {
-  q as default
+  re as default
 };

package/dist/s-theme-demo/s-theme-demo.js

@@ -6,7 +6,7 @@ import v from "../s-form/s-form.js";
 import u from "../s-text-field/s-text-field.js";
 import y from "../s-theme-switch/s-theme-switch.js";
 import { c as j } from "../createSvgIcon-Dq42_0tn.js";
-import { F as b } from "../Favorite-D-vTz4mw.js";
+import { F as b } from "../Favorite-DmSF47XC.js";
 const f = j(/* @__PURE__ */ r.jsx("path", {
   d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
 }), "Add"), S = j(/* @__PURE__ */ r.jsx("path", {

package/package.json

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