@solostylist/ui-kit 1.0.187 → 1.0.189

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

@@ -82,7 +82,6 @@ const k = 40, _ = 16, O = ({
               onClick: t.onClick,
               disabled: t.disabled,
               color: t.color,
-              size: "small",
               sx: {
                 margin: 1,
                 backgroundColor: t.isActive ? "primary.main" : void 0,

package/dist/s-ai-tool-bar/s-ai-tool-bar.js

@@ -1,18 +1,18 @@
 import { j as e } from "../jsx-runtime-tc70JA_2.js";
 import j, { useEffect as K, useState as T, useMemo as H, useCallback as L } from "react";
-import { c as M } from "../createSvgIcon-DTNHY3_v.js";
+import { c as S } from "../createSvgIcon-DTNHY3_v.js";
 import { C as $ } from "../Close-C-pCw-CD.js";
 import { D as J } from "../Download-D97XSAig.js";
-import { TextField as X, Typography as Q, Box as n, Slider as Y, IconButton as z, Checkbox as Z, Divider as ee, Tooltip as E, Dialog as le, DialogTitle as se, DialogContent as te } from "@mui/material";
+import { TextField as X, Typography as Q, Box as n, Slider as Y, IconButton as F, Checkbox as Z, Divider as ee, Tooltip as M, Dialog as le, DialogTitle as te, DialogContent as se } from "@mui/material";
 import { createPortal as re } from "react-dom";
 import { SSelect as ne } from "../s-select/s-select.js";
-const oe = M(/* @__PURE__ */ e.jsx("path", {
+const oe = S(/* @__PURE__ */ e.jsx("path", {
   d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8zM5 19l3-4 2 3 3-4 4 5z"
-}), "AddPhotoAlternate"), ae = M(/* @__PURE__ */ e.jsx("path", {
+}), "AddPhotoAlternate"), ae = S(/* @__PURE__ */ e.jsx("path", {
   d: "m19 9 1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25z"
-}), "AutoAwesome"), ce = M(/* @__PURE__ */ e.jsx("path", {
+}), "AutoAwesome"), ce = S(/* @__PURE__ */ e.jsx("path", {
   d: "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6m6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26"
-}), "Autorenew"), ie = M(/* @__PURE__ */ e.jsx("path", {
+}), "Autorenew"), ie = S(/* @__PURE__ */ e.jsx("path", {
   d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
 }), "InfoOutlined");
 var de = /* @__PURE__ */ ((l) => (l.TEXTAREA = "textarea", l.SLIDER = "slider", l.IMAGE = "image", l.NUMBER = "number", l.SELECT = "select", l.CHECKBOX = "checkbox", l))(de || {});
@@ -30,7 +30,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     maxRows: l.maxRows ?? 5,
     fullWidth: !0
   }
-)), S = j.memo((l) => /* @__PURE__ */ e.jsx(
+)), z = j.memo((l) => /* @__PURE__ */ e.jsx(
   Q,
   {
     variant: "caption",
@@ -52,7 +52,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       flexDirection: "column"
     },
     children: [
-      /* @__PURE__ */ e.jsx(S, { label: l.label }),
+      /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsx(
         X,
         {
@@ -62,7 +62,6 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
           onFocus: o,
           onBlur: m,
           disabled: i,
-          size: "small",
           slotProps: {
             htmlInput: {
               min: l.min,
@@ -88,7 +87,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       flexDirection: "column"
     },
     children: [
-      /* @__PURE__ */ e.jsx(S, { label: l.label }),
+      /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsx(
         ne,
         {
@@ -102,8 +101,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
           optionLabel: l.optionLabel,
           optionValue: l.optionValue,
           searchable: l.searchable,
-          searchPlaceholder: l.searchPlaceholder,
-          size: "small"
+          searchPlaceholder: l.searchPlaceholder
         }
       )
     ]
@@ -117,7 +115,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       flexDirection: "column"
     },
     children: [
-      /* @__PURE__ */ e.jsx(S, { label: l.label }),
+      /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", height: 36 }, children: [
         /* @__PURE__ */ e.jsx(
           Y,
@@ -130,7 +128,6 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
             min: l.min ?? 0,
             max: l.max ?? 100,
             step: l.step ?? 1,
-            size: "small",
             sx: { flex: 1 }
           }
         ),
@@ -150,7 +147,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     ]
   }
 )), ue = j.memo(({ input: l, value: r, onChange: d, disabled: o }) => {
-  const m = j.useRef(null), [i, x] = j.useState([]), [b, F] = j.useState(null), I = l.multiple ?? !1, p = l.maxImages ?? 5;
+  const m = j.useRef(null), [i, x] = j.useState([]), [b, D] = j.useState(null), I = l.multiple ?? !1, p = l.maxImages ?? 5;
   K(() => {
     let f = [];
     return x(((a) => {
@@ -176,7 +173,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
         d(h[0]);
       f.target.value = "";
     }
-  }, D = (f, h) => {
+  }, E = (f, h) => {
     if (f.stopPropagation(), I && Array.isArray(r)) {
       const a = r.filter((y, c) => c !== h);
       d(a.length > 0 ? a : null);
@@ -201,8 +198,8 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     i.map((f, h) => /* @__PURE__ */ e.jsxs(
       n,
       {
-        onMouseEnter: () => F(h),
-        onMouseLeave: () => F(null),
+        onMouseEnter: () => D(h),
+        onMouseLeave: () => D(null),
         sx: {
           width: 50,
           height: 50,
@@ -234,7 +231,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
           !o && b === h && /* @__PURE__ */ e.jsx(
             n,
             {
-              onClick: (a) => D(a, h),
+              onClick: (a) => E(a, h),
               sx: {
                 position: "absolute",
                 top: 0,
@@ -245,7 +242,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ e.jsx(z, { onClick: (a) => D(a, h), children: /* @__PURE__ */ e.jsx($, {}) })
+              children: /* @__PURE__ */ e.jsx(F, { onClick: (a) => E(a, h), children: /* @__PURE__ */ e.jsx($, {}) })
             }
           )
         ]
@@ -293,7 +290,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       minWidth: 60
     },
     children: [
-      /* @__PURE__ */ e.jsx(S, { label: l.label }),
+      /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsx(
         Z,
         {
@@ -301,8 +298,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
           onChange: (x) => d(x.target.checked),
           onFocus: o,
           onBlur: m,
-          disabled: i,
-          size: "small"
+          disabled: i
         }
       )
     ]
@@ -333,11 +329,11 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
   uploading: i = !1,
   inputValues: x = {},
   onInputChange: b,
-  customActionButtons: F,
+  customActionButtons: D,
   hideProcessButton: I = !1,
   processButtonDisabled: p = !1,
   getInputDisabled: R,
-  processTooltip: D = "Process",
+  processTooltip: E = "Process",
   downloadTooltip: P = "Download",
   resetTooltip: V = "Reset",
   infoTooltip: f = "Information",
@@ -346,12 +342,12 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
   position: y = "bottom",
   relative: c = !1
 }) => {
-  const [k, A] = T(!1), W = H(() => l.length === 0 ? !0 : l.every((s) => {
-    if (!s.required) return !0;
-    const t = x[s.key];
-    return s.type === "textarea" ? t && typeof t == "string" && t.trim() !== "" : s.type === "number" || s.type === "slider" ? t != null : s.type === "select" ? t != null && t !== "" : !0;
+  const [k, A] = T(!1), W = H(() => l.length === 0 ? !0 : l.every((t) => {
+    if (!t.required) return !0;
+    const s = x[t.key];
+    return t.type === "textarea" ? s && typeof s == "string" && s.trim() !== "" : t.type === "number" || t.type === "slider" ? s != null : t.type === "select" ? s != null && s !== "" : !0;
   }), [l, x]), { imageInputs: B, textareaInputs: N, paramInputs: O } = H(() => l.reduce(
-    (s, t) => (t.type === "image" ? s.imageInputs.push(t) : t.type === "textarea" ? s.textareaInputs.push(t) : s.paramInputs.push(t), s),
+    (t, s) => (s.type === "image" ? t.imageInputs.push(s) : s.type === "textarea" ? t.textareaInputs.push(s) : t.paramInputs.push(s), t),
     {
       imageInputs: [],
       textareaInputs: [],
@@ -360,8 +356,8 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
   ), [l]), C = L(() => {
   }, []), w = L(() => {
   }, []), v = L(
-    (s, t, g) => {
-      b?.(s, t, g);
+    (t, s, g) => {
+      b?.(t, s, g);
     },
     [b]
   ), q = L(() => A(!0), []), G = L(() => A(!1), []), _ = /* @__PURE__ */ e.jsxs(
@@ -393,25 +389,25 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
               bgcolor: "background.default"
             },
             children: [
-              N.length > 0 && /* @__PURE__ */ e.jsx(n, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: N.map((s) => {
-                const t = x[s.key], g = R?.(s.key) ?? !1;
-                return s.renderInput ? /* @__PURE__ */ e.jsx(n, { children: s.renderInput({
-                  value: t,
-                  onChange: (u) => v(s.key, u),
+              N.length > 0 && /* @__PURE__ */ e.jsx(n, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: N.map((t) => {
+                const s = x[t.key], g = R?.(t.key) ?? !1;
+                return t.renderInput ? /* @__PURE__ */ e.jsx(n, { children: t.renderInput({
+                  value: s,
+                  onChange: (u) => v(t.key, u),
                   onFocus: C,
                   onBlur: w,
                   disabled: g
-                }) }, s.key) : /* @__PURE__ */ e.jsx(
+                }) }, t.key) : /* @__PURE__ */ e.jsx(
                   U,
                   {
-                    input: s,
-                    value: t,
-                    onChange: (u) => v(s.key, u),
+                    input: t,
+                    value: s,
+                    onChange: (u) => v(t.key, u),
                     onFocus: C,
                     onBlur: w,
                     disabled: g
                   },
-                  s.key
+                  t.key
                 );
               }) }),
               /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
@@ -425,46 +421,46 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
                       flex: 1
                     },
                     children: (B.length > 0 || O.length > 0) && /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "flex-end", gap: 1.5 }, children: [
-                      B.map((s) => {
-                        const t = x[s.key], g = R?.(s.key) ?? !1;
-                        return s.renderInput ? /* @__PURE__ */ e.jsx(n, { children: s.renderInput({
-                          value: t,
-                          onChange: (u) => v(s.key, u),
+                      B.map((t) => {
+                        const s = x[t.key], g = R?.(t.key) ?? !1;
+                        return t.renderInput ? /* @__PURE__ */ e.jsx(n, { children: t.renderInput({
+                          value: s,
+                          onChange: (u) => v(t.key, u),
                           onFocus: C,
                           onBlur: w,
                           disabled: g
-                        }) }, s.key) : /* @__PURE__ */ e.jsx(
+                        }) }, t.key) : /* @__PURE__ */ e.jsx(
                           U,
                           {
-                            input: s,
-                            value: t,
-                            onChange: (u) => v(s.key, u),
+                            input: t,
+                            value: s,
+                            onChange: (u) => v(t.key, u),
                             onFocus: C,
                             onBlur: w,
                             disabled: g
                           },
-                          s.key
+                          t.key
                         );
                       }),
-                      O.map((s) => {
-                        const t = x[s.key], g = R?.(s.key) ?? !1;
-                        return s.renderInput ? /* @__PURE__ */ e.jsx(n, { children: s.renderInput({
-                          value: t,
-                          onChange: (u) => v(s.key, u),
+                      O.map((t) => {
+                        const s = x[t.key], g = R?.(t.key) ?? !1;
+                        return t.renderInput ? /* @__PURE__ */ e.jsx(n, { children: t.renderInput({
+                          value: s,
+                          onChange: (u) => v(t.key, u),
                           onFocus: C,
                           onBlur: w,
                           disabled: g
-                        }) }, s.key) : /* @__PURE__ */ e.jsx(
+                        }) }, t.key) : /* @__PURE__ */ e.jsx(
                           U,
                           {
-                            input: s,
-                            value: t,
-                            onChange: (u) => v(s.key, u),
+                            input: t,
+                            value: s,
+                            onChange: (u) => v(t.key, u),
                             onFocus: C,
                             onBlur: w,
                             disabled: g
                           },
-                          s.key
+                          t.key
                         );
                       })
                     ] })
@@ -472,12 +468,12 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
                 ),
                 (B.length > 0 || O.length > 0) && /* @__PURE__ */ e.jsx(ee, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, flexShrink: 0 } }),
                 /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", gap: 0.75, ml: "auto" }, children: [
-                  F,
-                  a && /* @__PURE__ */ e.jsx(E, { title: f, children: /* @__PURE__ */ e.jsx(z, { onClick: q, children: /* @__PURE__ */ e.jsx(ie, {}) }) }),
-                  /* @__PURE__ */ e.jsx(E, { title: P, children: /* @__PURE__ */ e.jsx(z, { onClick: o, children: /* @__PURE__ */ e.jsx(J, {}) }) }),
-                  /* @__PURE__ */ e.jsx(E, { title: V, children: /* @__PURE__ */ e.jsx(z, { onClick: d, children: /* @__PURE__ */ e.jsx(ce, {}) }) }),
-                  !I && /* @__PURE__ */ e.jsx(E, { title: D, children: /* @__PURE__ */ e.jsx("span", { children: /* @__PURE__ */ e.jsx(
-                    z,
+                  D,
+                  a && /* @__PURE__ */ e.jsx(M, { title: f, children: /* @__PURE__ */ e.jsx(F, { onClick: q, children: /* @__PURE__ */ e.jsx(ie, {}) }) }),
+                  /* @__PURE__ */ e.jsx(M, { title: P, children: /* @__PURE__ */ e.jsx(F, { onClick: o, children: /* @__PURE__ */ e.jsx(J, {}) }) }),
+                  /* @__PURE__ */ e.jsx(M, { title: V, children: /* @__PURE__ */ e.jsx(F, { onClick: d, children: /* @__PURE__ */ e.jsx(ce, {}) }) }),
+                  !I && /* @__PURE__ */ e.jsx(M, { title: E, children: /* @__PURE__ */ e.jsx("span", { children: /* @__PURE__ */ e.jsx(
+                    F,
                     {
                       onClick: r,
                       disabled: p || !W || i || m,
@@ -496,8 +492,8 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
           }
         ),
         a && /* @__PURE__ */ e.jsxs(le, { open: k, onClose: G, maxWidth: "sm", fullWidth: !0, children: [
-          /* @__PURE__ */ e.jsx(se, { children: h }),
-          /* @__PURE__ */ e.jsx(te, { children: a })
+          /* @__PURE__ */ e.jsx(te, { children: h }),
+          /* @__PURE__ */ e.jsx(se, { children: a })
         ] })
       ]
     }

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

@@ -13,8 +13,8 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
 }), "AttachFile"), Z = R(/* @__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"), ee = V(
-  ({ onSubmit: I, onFileSelect: E, disabled: a, acceptedFileTypes: S, maxFileSize: b, hideEmojiPicker: M, hideFileAttachment: F, ...z }, U) => {
-    const [p, m] = c(""), [l, u] = c([]), [i, h] = c(/* @__PURE__ */ new Map()), [j, x] = c(!1), v = B(null), C = D(), f = (e) => e.type.startsWith("image/"), $ = (e) => {
+  ({ onSubmit: I, onFileSelect: E, disabled: a, acceptedFileTypes: S, maxFileSize: b, hideEmojiPicker: M, hideFileAttachment: F, ...U }, $) => {
+    const [p, u] = c(""), [l, m] = c([]), [i, h] = c(/* @__PURE__ */ new Map()), [j, x] = c(!1), v = B(null), C = D(), f = (e) => e.type.startsWith("image/"), P = (e) => {
       const o = `${e.name}-${e.size}-${e.lastModified}`;
       if (i.has(o))
         return i.get(o);
@@ -23,17 +23,17 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
         return h((t) => new Map(t).set(o, n)), n;
       }
       return "";
-    }, P = (e) => {
-      m(e.target.value);
     }, L = (e) => {
-      m((o) => o + e.emoji), x(!1);
-    }, A = () => {
+      u(e.target.value);
+    }, A = (e) => {
+      u((o) => o + e.emoji), x(!1);
+    }, O = () => {
       x(!j);
     }, k = () => {
-      a || p.trim().length === 0 && l.length === 0 || (I?.(p, l), m(""), i.forEach((e) => URL.revokeObjectURL(e)), h(/* @__PURE__ */ new Map()), u([]));
-    }, O = (e) => {
+      a || p.trim().length === 0 && l.length === 0 || (I?.(p, l), u(""), i.forEach((e) => URL.revokeObjectURL(e)), h(/* @__PURE__ */ new Map()), m([]));
+    }, z = (e) => {
       const n = Array.from(e.target.files || []).filter((t) => !(b && t.size > b));
-      u((t) => [...t, ...n]), E?.(n), e.target.value = "";
+      m((t) => [...t, ...n]), E?.(n), e.target.value = "";
     }, K = (e) => {
       const o = l[e];
       if (o && f(o)) {
@@ -43,7 +43,7 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
           return y.delete(n), y;
         }));
       }
-      u((n) => n.filter((t, g) => g !== e));
+      m((n) => n.filter((t, g) => g !== e));
     }, T = (e) => {
       e.key === "Enter" && !e.shiftKey && (e.preventDefault(), k());
     };
@@ -56,15 +56,14 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
           placeholder: "Enter your message here...",
           disabled: a,
           value: p,
-          onChange: P,
+          onChange: L,
           onKeyDown: T,
           multiline: !0,
           minRows: 1,
           maxRows: 10,
-          size: "small",
           variant: "outlined",
           fullWidth: !0,
-          inputRef: U,
+          inputRef: $,
           slotProps: {
             input: {
               sx: {
@@ -87,7 +86,7 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
               }
             }
           },
-          ...z
+          ...U
         }
       ),
       l.length > 0 && /* @__PURE__ */ r.jsx(s, { mt: 1, children: l.map((e, o) => {
@@ -112,7 +111,7 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
                   s,
                   {
                     component: "img",
-                    src: $(e),
+                    src: P(e),
                     alt: e.name,
                     sx: {
                       width: 40,
@@ -133,7 +132,7 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
                   ] }) })
                 ] })
               ] }),
-              /* @__PURE__ */ r.jsx(d, { size: "small", onClick: () => K(o), sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ r.jsx(Q, {}) })
+              /* @__PURE__ */ r.jsx(d, { onClick: () => K(o), sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ r.jsx(Q, {}) })
             ]
           },
           `${e.name}-${o}`
@@ -148,7 +147,7 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
                 type: "file",
                 multiple: !0,
                 accept: S,
-                onChange: O,
+                onChange: z,
                 style: { display: "none" },
                 id: `file-attachment-input-${C}`,
                 disabled: a
@@ -159,7 +158,6 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
               {
                 component: "span",
                 disabled: a,
-                size: "small",
                 sx: {
                   transition: "transform 0.3s ease",
                   "&:hover": {
@@ -174,9 +172,8 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
             d,
             {
               ref: v,
-              onClick: A,
+              onClick: O,
               disabled: a,
-              size: "small",
               sx: {
                 transition: "transform 0.3s ease",
                 "&:hover": {
@@ -192,7 +189,6 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
           {
             onClick: k,
             disabled: a,
-            size: "small",
             sx: {
               transition: "transform 0.3s ease",
               "&:hover": {
@@ -296,7 +292,7 @@ const Y = R(/* @__PURE__ */ r.jsx("path", {
           children: /* @__PURE__ */ r.jsx(
             q,
             {
-              onEmojiClick: L,
+              onEmojiClick: A,
               width: 300,
               height: 400,
               searchDisabled: !1,

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

@@ -1,6 +1,6 @@
 import { j as e } from "../jsx-runtime-tc70JA_2.js";
 import { useState as k } from "react";
-import { Box as r, Typography as t, Paper as P, IconButton as B } from "@mui/material";
+import { Box as s, Typography as t, Paper as P, IconButton as B } from "@mui/material";
 import { SSkeleton as l } from "../s-skeleton/s-skeleton.js";
 import { SAvatar as F } from "../s-avatar/s-avatar.js";
 import G from "../s-lazy-image/s-lazy-image.js";
@@ -32,7 +32,7 @@ const q = g(/* @__PURE__ */ e.jsx("path", {
   sx: y,
   ...z
 }) => {
-  const [c, b] = k(null), [O, M] = k(!1), s = D === "sent", T = (i) => (typeof i == "string" ? new Date(i) : i).toLocaleTimeString("en-US", {
+  const [c, b] = k(null), [O, M] = k(!1), r = D === "sent", T = (i) => (typeof i == "string" ? new Date(i) : i).toLocaleTimeString("en-US", {
     hour: "2-digit",
     minute: "2-digit",
     hour12: !0
@@ -46,33 +46,33 @@ const q = g(/* @__PURE__ */ e.jsx("path", {
     a ? a(i) : d && d(i);
   }, h = m.filter((i) => i.type === "image"), C = m.filter((i) => i.type === "file");
   return L ? /* @__PURE__ */ e.jsxs(
-    r,
+    s,
     {
       display: "flex",
-      flexDirection: s ? "row-reverse" : "row",
+      flexDirection: r ? "row-reverse" : "row",
       alignItems: "flex-start",
       gap: 1,
       mb: 1,
       sx: {
         maxWidth: S,
-        alignSelf: s ? "flex-end" : "flex-start",
+        alignSelf: r ? "flex-end" : "flex-start",
         ...y
       },
       ...z,
       children: [
-        n && !s && /* @__PURE__ */ e.jsx(l, { component: "rounded-avatar", width: 36, height: 36 }),
+        n && !r && /* @__PURE__ */ e.jsx(l, { component: "rounded-avatar", width: 36, height: 36 }),
         /* @__PURE__ */ e.jsxs(
-          r,
+          s,
           {
             display: "flex",
             flexDirection: "column",
-            alignItems: s ? "flex-end" : "flex-start",
+            alignItems: r ? "flex-end" : "flex-start",
             gap: 0.5,
             sx: { minWidth: 0 },
             children: [
-              o && !s && /* @__PURE__ */ e.jsx(l, { variant: "text", width: 100, height: 12, sx: { ml: 0.5 } }),
+              o && !r && /* @__PURE__ */ e.jsx(l, { variant: "text", width: 100, height: 12, sx: { ml: 0.5 } }),
               /* @__PURE__ */ e.jsxs(
-                r,
+                s,
                 {
                   sx: {
                     display: "inline-block",
@@ -88,41 +88,41 @@ const q = g(/* @__PURE__ */ e.jsx("path", {
                   ]
                 }
               ),
-              I && /* @__PURE__ */ e.jsx(l, { variant: "text", width: 60, height: 10, sx: { ml: s ? 0 : 0.5, mr: s ? 0.5 : 0 } })
+              I && /* @__PURE__ */ e.jsx(l, { variant: "text", width: 60, height: 10, sx: { ml: r ? 0 : 0.5, mr: r ? 0.5 : 0 } })
             ]
           }
         ),
-        n && s && /* @__PURE__ */ e.jsx(l, { component: "rounded-avatar", width: 36, height: 36 })
+        n && r && /* @__PURE__ */ e.jsx(l, { component: "rounded-avatar", width: 36, height: 36 })
       ]
     }
   ) : /* @__PURE__ */ e.jsxs(
-    r,
+    s,
     {
       display: "flex",
-      flexDirection: s ? "row-reverse" : "row",
+      flexDirection: r ? "row-reverse" : "row",
       alignItems: "flex-start",
       gap: 1,
       mb: 1,
       sx: {
         maxWidth: S,
-        alignSelf: s ? "flex-end" : "flex-start",
+        alignSelf: r ? "flex-end" : "flex-start",
         ...y
       },
       ...z,
       children: [
-        n && !s && /* @__PURE__ */ e.jsx(F, { avatar: v, name: o, size: 36 }),
+        n && !r && /* @__PURE__ */ e.jsx(F, { avatar: v, name: o, size: 36 }),
         /* @__PURE__ */ e.jsxs(
-          r,
+          s,
           {
             display: "flex",
             flexDirection: "column",
-            alignItems: s ? "flex-end" : "flex-start",
+            alignItems: r ? "flex-end" : "flex-start",
             gap: 0.5,
             sx: { minWidth: 0 },
             children: [
-              o && !s && /* @__PURE__ */ e.jsx(t, { children: o }),
+              o && !r && /* @__PURE__ */ e.jsx(t, { children: o }),
               /* @__PURE__ */ e.jsxs(
-                r,
+                s,
                 {
                   sx: {
                     display: "inline-block",
@@ -138,7 +138,7 @@ const q = g(/* @__PURE__ */ e.jsx("path", {
                   },
                   children: [
                     h.length > 0 && /* @__PURE__ */ e.jsx(
-                      r,
+                      s,
                       {
                         sx: {
                           display: "grid",
@@ -148,7 +148,7 @@ const q = g(/* @__PURE__ */ e.jsx("path", {
                         },
                         minWidth: 200,
                         children: h.map((i) => /* @__PURE__ */ e.jsx(
-                          r,
+                          s,
                           {
                             sx: {
                               position: "relative",
@@ -181,7 +181,7 @@ const q = g(/* @__PURE__ */ e.jsx("path", {
                         ))
                       }
                     ),
-                    C.length > 0 && /* @__PURE__ */ e.jsx(r, { sx: { p: 1.5 }, children: C.map((i, p) => /* @__PURE__ */ e.jsxs(
+                    C.length > 0 && /* @__PURE__ */ e.jsx(s, { sx: { p: 1.5 }, children: C.map((i, p) => /* @__PURE__ */ e.jsxs(
                       P,
                       {
                         variant: "outlined",
@@ -196,7 +196,7 @@ const q = g(/* @__PURE__ */ e.jsx("path", {
                         onClick: () => V(i),
                         children: [
                           /* @__PURE__ */ e.jsx(E, { sx: { fontSize: 32 } }),
-                          /* @__PURE__ */ e.jsxs(r, { sx: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ e.jsxs(s, { sx: { flex: 1, minWidth: 0 }, children: [
                             /* @__PURE__ */ e.jsx(
                               t,
                               {
@@ -216,7 +216,6 @@ const q = g(/* @__PURE__ */ e.jsx("path", {
                           d && /* @__PURE__ */ e.jsx(
                             B,
                             {
-                              size: "small",
                               onClick: (f) => {
                                 f.stopPropagation(), d(i);
                               },
@@ -227,7 +226,7 @@ const q = g(/* @__PURE__ */ e.jsx("path", {
                       },
                       i.id
                     )) }),
-                    j && /* @__PURE__ */ e.jsx(r, { sx: { px: 2, py: 1.5, pt: m.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ e.jsx(
+                    j && /* @__PURE__ */ e.jsx(s, { sx: { px: 2, py: 1.5, pt: m.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ e.jsx(
                       t,
                       {
                         variant: "body2",
@@ -243,15 +242,15 @@ const q = g(/* @__PURE__ */ e.jsx("path", {
                 }
               ),
               I && u && /* @__PURE__ */ e.jsx(t, { variant: "caption", children: T(u) }),
-              x && /* @__PURE__ */ e.jsxs(r, { display: "flex", alignItems: "center", gap: 0.5, color: "error.main", children: [
+              x && /* @__PURE__ */ e.jsxs(s, { display: "flex", alignItems: "center", gap: 0.5, color: "error.main", children: [
                 /* @__PURE__ */ e.jsx(q, { sx: { fontSize: "1rem" } }),
                 /* @__PURE__ */ e.jsx(t, { color: "inherit", children: W }),
-                w && /* @__PURE__ */ e.jsx(B, { size: "small", onClick: w, children: /* @__PURE__ */ e.jsx(J, {}) })
+                w && /* @__PURE__ */ e.jsx(B, { onClick: w, children: /* @__PURE__ */ e.jsx(J, {}) })
               ] })
             ]
           }
         ),
-        n && s && /* @__PURE__ */ e.jsx(F, { avatar: v, name: o, size: 36 }),
+        n && r && /* @__PURE__ */ e.jsx(F, { avatar: v, name: o, size: 36 }),
         c && /* @__PURE__ */ e.jsx(
           K,
           {

package/dist/s-code-block/s-code-block.js

@@ -1012,7 +1012,6 @@ const w = {
       u,
       {
         onClick: h,
-        size: "small",
         sx: {
           position: "absolute",
           top: 8,
@@ -1021,7 +1020,7 @@ const w = {
           color: r ? "success.main" : "text.primary",
           backdropFilter: "blur(8px)"
         },
-        children: r ? /* @__PURE__ */ o.jsx(m, { fontSize: "small" }) : /* @__PURE__ */ o.jsx(f, { fontSize: "small" })
+        children: r ? /* @__PURE__ */ o.jsx(m, {}) : /* @__PURE__ */ o.jsx(f, {})
       }
     ),
     /* @__PURE__ */ o.jsx(

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

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

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

@@ -2,9 +2,9 @@ import { j as o } from "../jsx-runtime-tc70JA_2.js";
 import * as g from "react";
 import { c as l } from "../createSvgIcon-DTNHY3_v.js";
 import { Avatar as b, Tooltip as v, IconButton as y, Button as C } from "@mui/material";
-import { useDropzone as z } from "react-dropzone";
-import { bytesToSize as I } from "../utils/bytes-to-size.js";
-import { SForm as S } from "../s-form/s-form.js";
+import { useDropzone as I } from "react-dropzone";
+import { bytesToSize as S } from "../utils/bytes-to-size.js";
+import { SForm as z } from "../s-form/s-form.js";
 import { B as i } from "../Box-p3bpOtdn.js";
 import { S as e } from "../Stack-BlwLEm6H.js";
 import { T as t } from "../Typography-Cum5_Ehu.js";
@@ -25,9 +25,9 @@ const k = l(/* @__PURE__ */ o.jsx("path", {
   isShowBtnRemoveAll: h = !1,
   ...n
 }) => {
-  const { getRootProps: u, getInputProps: j, isDragActive: s } = z(n);
+  const { getRootProps: u, getInputProps: j, isDragActive: s } = I(n);
   return /* @__PURE__ */ o.jsxs(g.Fragment, { children: [
-    /* @__PURE__ */ o.jsx(S, { error: d, label: c, required: m, hint: a, children: /* @__PURE__ */ o.jsxs(
+    /* @__PURE__ */ o.jsx(z, { error: d, label: c, required: m, hint: a, children: /* @__PURE__ */ o.jsxs(
       i,
       {
         sx: {
@@ -99,7 +99,7 @@ const k = l(/* @__PURE__ */ o.jsx("path", {
               /* @__PURE__ */ o.jsx(R, { extension: f }),
               /* @__PURE__ */ o.jsxs(i, { 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: I(r.size) })
+                /* @__PURE__ */ o.jsx(t, { color: "text.secondary", variant: "body2", children: S(r.size) })
               ] }),
               /* @__PURE__ */ o.jsx(v, { title: "Remove", children: /* @__PURE__ */ o.jsx(
                 y,
@@ -115,7 +115,7 @@ const k = l(/* @__PURE__ */ o.jsx("path", {
           r.size
         );
       }) }),
-      /* @__PURE__ */ o.jsx(e, { direction: "row", sx: { alignItems: "center", justifyContent: "flex-end" }, children: h && /* @__PURE__ */ o.jsx(C, { onClick: p, size: "small", type: "button", variant: "text", children: "Remove all" }) })
+      /* @__PURE__ */ o.jsx(e, { direction: "row", sx: { alignItems: "center", justifyContent: "flex-end" }, children: h && /* @__PURE__ */ o.jsx(C, { onClick: p, type: "button", variant: "text", children: "Remove all" }) })
     ] }) : null
   ] });
 };

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

@@ -1,15 +1,15 @@
 import { j as e } from "../jsx-runtime-tc70JA_2.js";
 import { useState as j, useEffect as G } from "react";
-import { Box as h, Stack as r, Divider as D, Typography as m, IconButton as R } from "@mui/material";
+import { Box as h, Stack as r, Divider as R, Typography as m, IconButton as H } from "@mui/material";
 import { SSkeleton as i } from "../s-skeleton/s-skeleton.js";
 import { SAvatar as J } from "../s-avatar/s-avatar.js";
 import { SRating as K } from "../s-rating/s-rating.js";
 import P from "../s-lazy-image/s-lazy-image.js";
-import { c as H } from "../createSvgIcon-DTNHY3_v.js";
+import { c as L } from "../createSvgIcon-DTNHY3_v.js";
 import { SImageModal as Q } from "../s-image-modal/s-image-modal.js";
-const X = H(/* @__PURE__ */ e.jsx("path", {
+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"), Z = H(/* @__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"), _ = (l) => {
   const x = /* @__PURE__ */ new Date(), v = typeof l == "string" ? new Date(l) : l, y = x.getTime() - v.getTime(), w = Math.floor(y / 1e3), c = Math.floor(w / 60), a = Math.floor(c / 60), o = Math.floor(a / 24), d = Math.floor(o / 7), f = Math.floor(o / 30), g = Math.floor(o / 365);
@@ -26,7 +26,7 @@ const X = H(/* @__PURE__ */ e.jsx("path", {
   helpfulYes: d = 0,
   helpfulNo: f = 0,
   onHelpfulVote: g,
-  showHelpfulSection: L = !0,
+  showHelpfulSection: z = !0,
   avatarSize: I = 48,
   maxRating: V = 5,
   readOnly: W = !0,
@@ -34,7 +34,7 @@ const X = H(/* @__PURE__ */ e.jsx("path", {
   loading: E = !1,
   sx: T = {}
 }) => {
-  const [O, M] = j(d), [U, b] = j(f), [p, S] = j(o), [Y, $] = j(!1), [B, k] = j(null), z = (n) => {
+  const [O, M] = j(d), [U, b] = j(f), [p, S] = j(o), [Y, $] = j(!1), [B, k] = j(null), D = (n) => {
     let s = n;
     p === n ? (n === "yes" ? M((t) => Math.max(0, t - 1)) : b((t) => Math.max(0, t - 1)), S(null), s = 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), S(n), s = n), g && g(l, s);
   }, u = a?.map((n, s) => ({
@@ -72,7 +72,7 @@ const X = H(/* @__PURE__ */ e.jsx("path", {
         ] })
       ] })
     ] }),
-    C && /* @__PURE__ */ e.jsx(D, { sx: { mt: 2 } })
+    C && /* @__PURE__ */ e.jsx(R, { sx: { mt: 2 } })
   ] }) : /* @__PURE__ */ e.jsxs(h, { sx: { py: 2, ...T }, children: [
     /* @__PURE__ */ e.jsxs(r, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
       /* @__PURE__ */ e.jsx(J, { avatar: v, name: x, size: I }),
@@ -81,7 +81,7 @@ const X = H(/* @__PURE__ */ e.jsx("path", {
           /* @__PURE__ */ e.jsx(m, { variant: "subtitle2", fontWeight: "600", children: x }),
           /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(m, { variant: "caption", children: q }) })
         ] }),
-        /* @__PURE__ */ e.jsx(h, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(K, { value: y, max: V, readOnly: W, size: "small" }) }),
+        /* @__PURE__ */ e.jsx(h, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(K, { value: y, max: V, readOnly: W }) }),
         /* @__PURE__ */ e.jsx(m, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: w }),
         a && a.length > 0 && /* @__PURE__ */ e.jsx(r, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: a.map((n, s) => /* @__PURE__ */ e.jsx(
           P,
@@ -105,13 +105,12 @@ const X = H(/* @__PURE__ */ e.jsx("path", {
           },
           s
         )) }),
-        L && /* @__PURE__ */ e.jsxs(r, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+        z && /* @__PURE__ */ e.jsxs(r, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
           /* @__PURE__ */ e.jsx(m, { variant: "caption", sx: { mr: 2 }, children: "Was this review helpful?" }),
           /* @__PURE__ */ e.jsx(
-            R,
+            H,
             {
-              size: "small",
-              onClick: () => z("yes"),
+              onClick: () => D("yes"),
               sx: {
                 color: p === "yes" ? "primary.main" : "text.secondary",
                 "&:hover": {
@@ -123,10 +122,9 @@ const X = H(/* @__PURE__ */ e.jsx("path", {
           ),
           /* @__PURE__ */ e.jsx(m, { variant: "caption", children: O }),
           /* @__PURE__ */ e.jsx(
-            R,
+            H,
             {
-              size: "small",
-              onClick: () => z("no"),
+              onClick: () => D("no"),
               sx: {
                 color: p === "no" ? "error.main" : "text.secondary",
                 ml: 1,
@@ -141,7 +139,7 @@ const X = H(/* @__PURE__ */ e.jsx("path", {
         ] })
       ] })
     ] }),
-    C && /* @__PURE__ */ e.jsx(D, { sx: { mt: 2 } }),
+    C && /* @__PURE__ */ e.jsx(R, { sx: { mt: 2 } }),
     /* @__PURE__ */ e.jsx(
       Q,
       {

package/dist/s-select/s-select.js

@@ -7,8 +7,8 @@ const K = E(/* @__PURE__ */ t.jsx("path", {
   d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
 }), "Search"), N = A(
   ({
-    options: l = [],
-    optionLabel: S = "name",
+    options: r = [],
+    optionLabel: m = "name",
     optionValue: y = "id",
     placeholder: x,
     label: C = "",
@@ -17,11 +17,11 @@ const K = E(/* @__PURE__ */ t.jsx("path", {
     variant: R = "outlined",
     simple: w = !1,
     htmlFor: v,
-    searchable: r = !1,
+    searchable: l = !1,
     searchPlaceholder: P = "",
-    ...s
+    ...a
   }, O) => {
-    const g = s.value !== void 0, [V, $] = f(s.multiple ? [] : null), L = g ? s.value : V, [u, h] = f(""), [k, j] = f(!1), a = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[S]), o = (e) => typeof e == "string" || typeof e == "number" ? e : e[y], m = r && u ? l.filter((e) => a(e).toLowerCase().includes(u.toLowerCase())) : l;
+    const g = a.value !== void 0, [V, $] = f(a.multiple ? [] : null), L = g ? a.value : V, [u, h] = f(""), [k, j] = f(!1), s = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[m]), o = (e) => typeof e == "string" || typeof e == "number" ? e : e[y], S = l && u ? r.filter((e) => s(e).toLowerCase().includes(u.toLowerCase())) : r;
     return /* @__PURE__ */ t.jsx(D, { error: b, label: C, required: I, htmlFor: v, children: /* @__PURE__ */ t.jsxs(
       F,
       {
@@ -30,12 +30,12 @@ const K = E(/* @__PURE__ */ t.jsx("path", {
         fullWidth: !0,
         defaultValue: "",
         ref: O,
-        open: r ? k : void 0,
-        onOpen: r ? () => j(!0) : void 0,
-        onClose: r ? () => {
+        open: l ? k : void 0,
+        onOpen: l ? () => j(!0) : void 0,
+        onClose: l ? () => {
           j(!1), h("");
         } : void 0,
-        MenuProps: r ? {
+        MenuProps: l ? {
           autoFocus: !1,
           PaperProps: {
             onKeyDown: (e) => {
@@ -43,36 +43,35 @@ const K = E(/* @__PURE__ */ t.jsx("path", {
             }
           }
         } : void 0,
-        renderValue: s.multiple ? (e) => {
+        renderValue: a.multiple ? (e) => {
           const n = e;
           return n.length === 0 ? /* @__PURE__ */ t.jsx(p, { component: "span", sx: { color: "divider" }, children: x }) : n?.map((i) => {
-            const d = l.find((z) => o(z) === o(i));
-            return d ? a(d) : "";
+            const d = r.find((z) => o(z) === o(i));
+            return d ? s(d) : "";
           }).filter(Boolean).join(", ");
         } : (e) => {
           const n = e;
           if (n == null || n === "")
             return /* @__PURE__ */ t.jsx(p, { component: "span", sx: { color: "divider" }, children: x });
           if (w)
-            return a(n);
-          const i = l.find((d) => o(d) === o(n));
-          return i ? a(i) : "";
+            return s(n);
+          const i = r.find((d) => o(d) === o(n));
+          return i ? s(i) : "";
         },
-        ...s,
-        value: l.length ? L ?? "" : "",
+        ...a,
+        value: r.length ? L ?? "" : "",
         onChange: (e, n) => {
-          if (s.onChange)
-            s.onChange(e, n);
+          if (a.onChange)
+            a.onChange(e, n);
           else if (!g) {
             const i = e.target.value;
             $(i);
           }
         },
         children: [
-          r && /* @__PURE__ */ t.jsx(M, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ t.jsx(
+          l && /* @__PURE__ */ t.jsx(M, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ t.jsx(
             T,
             {
-              size: "small",
               fullWidth: !0,
               autoFocus: !0,
               placeholder: P,
@@ -89,28 +88,28 @@ const K = E(/* @__PURE__ */ t.jsx("path", {
               }
             }
           ) }),
-          r ? m?.length > 0 ? m.map((e, n) => /* @__PURE__ */ t.jsx(
+          l ? S?.length > 0 ? S.map((e, n) => /* @__PURE__ */ t.jsx(
             c,
             {
               disabled: e?.disabled ?? !1,
               value: o(e),
-              children: a(e)
+              children: s(e)
             },
             `${o(e)}-${n}`
-          )) : u ? /* @__PURE__ */ t.jsx(c, { disabled: !0, children: /* @__PURE__ */ t.jsx(p, { sx: { color: "text.secondary", textAlign: "center", width: "100%" }, children: "No results found" }) }) : l?.map((e, n) => /* @__PURE__ */ t.jsx(
+          )) : u ? /* @__PURE__ */ t.jsx(c, { disabled: !0, children: /* @__PURE__ */ t.jsx(p, { sx: { color: "text.secondary", textAlign: "center", width: "100%" }, children: "No results found" }) }) : r?.map((e, n) => /* @__PURE__ */ t.jsx(
             c,
             {
               disabled: e?.disabled ?? !1,
               value: o(e),
-              children: a(e)
+              children: s(e)
             },
             `${o(e)}-${n}`
-          )) : l?.map((e, n) => /* @__PURE__ */ t.jsx(
+          )) : r?.map((e, n) => /* @__PURE__ */ t.jsx(
             c,
             {
               disabled: e?.disabled ?? !1,
               value: o(e),
-              children: a(e)
+              children: s(e)
             },
             `${o(e)}-${n}`
           ))

package/dist/s-two-pane-layout/s-two-pane-layout.d.ts

@@ -46,6 +46,8 @@ export interface STwoPaneLayoutProps {
     sidebarHeaderPadding?: number | string;
     /** Padding for content header. Default: 2 */
     contentHeaderPadding?: number | string;
+    /** Height of header sections to ensure consistent sizing between panes. Default: '40px' */
+    headerHeight?: number | string;
 }
 /**
  * A flexible two-pane layout component with customizable sidebar and content areas.

package/dist/s-two-pane-layout/s-two-pane-layout.js

@@ -1,53 +1,82 @@
 import { j as e } from "../jsx-runtime-tc70JA_2.js";
 import { Box as r } from "@mui/material";
-import { SOverlayScrollbar as p } from "../s-overlay-scrollbar/s-overlay-scrollbar.js";
-import { SFlexBox as C } from "../s-flex-box/s-flex-box.js";
+import { SOverlayScrollbar as a } from "../s-overlay-scrollbar/s-overlay-scrollbar.js";
+import { SFlexBox as I } from "../s-flex-box/s-flex-box.js";
 const R = ({
-  sidebar: o,
-  content: l,
-  sidebarWidth: a = 280,
+  sidebar: x,
+  content: i,
+  sidebarWidth: g = 280,
   height: u = "calc(100vh - 65px)",
   containerSx: v,
   sidebarSx: w,
-  contentSx: g,
-  sidebarHeaderSx: y,
-  contentHeaderSx: B,
-  sidebarScrollSx: i,
+  contentSx: y,
+  sidebarHeaderSx: B,
+  contentHeaderSx: D,
+  sidebarScrollSx: o,
   contentScrollSx: s,
   disableBorder: h = !1,
-  sidebarHeader: d,
-  contentHeader: t,
-  enableSidebarScroll: D = !0,
-  enableContentScroll: f = !1,
-  sidebarPosition: x = "left",
-  sidebarPadding: n = 1,
+  sidebarHeader: t,
+  contentHeader: d,
+  enableSidebarScroll: F = !0,
+  enableContentScroll: n = !1,
+  sidebarPosition: l = "left",
+  sidebarPadding: f = 1,
   contentPadding: c = 1,
-  sidebarHeaderPadding: F = 2,
-  contentHeaderPadding: L = 2
+  sidebarHeaderPadding: L = 2,
+  contentHeaderPadding: C = 2,
+  headerHeight: m = "40px"
 }) => {
-  const j = /* @__PURE__ */ e.jsxs(
+  const p = /* @__PURE__ */ e.jsxs(
     r,
     {
       sx: {
-        width: a,
-        borderRight: !h && x === "left" ? 1 : 0,
-        borderLeft: !h && x === "right" ? 1 : 0,
+        width: g,
+        borderRight: !h && l === "left" ? 1 : 0,
+        borderLeft: !h && l === "right" ? 1 : 0,
         borderColor: "divider",
         display: "flex",
         flexDirection: "column",
         ...w
       },
       children: [
-        d && /* @__PURE__ */ e.jsx(r, { sx: { p: F, borderBottom: 1, borderColor: "divider", ...y }, children: d }),
-        /* @__PURE__ */ e.jsx(r, { sx: { flex: 1, minHeight: 0 }, children: D ? /* @__PURE__ */ e.jsx(p, { children: /* @__PURE__ */ e.jsx(r, { sx: { p: n, ...i }, children: o }) }) : /* @__PURE__ */ e.jsx(r, { sx: { p: n, height: "100%", overflow: "hidden", ...i }, children: o }) })
+        t && /* @__PURE__ */ e.jsx(
+          r,
+          {
+            sx: {
+              p: L,
+              height: m,
+              borderBottom: 1,
+              borderColor: "divider",
+              display: "flex",
+              alignItems: "center",
+              ...B
+            },
+            children: t
+          }
+        ),
+        /* @__PURE__ */ e.jsx(r, { sx: { flex: 1, minHeight: 0 }, children: F ? /* @__PURE__ */ e.jsx(a, { children: /* @__PURE__ */ e.jsx(r, { sx: { p: f, ...o }, children: x }) }) : /* @__PURE__ */ e.jsx(r, { sx: { p: f, height: "100%", overflow: "hidden", ...o }, children: x }) })
       ]
     }
-  ), m = /* @__PURE__ */ e.jsxs(r, { sx: { flex: 1, display: "flex", flexDirection: "column", ...g }, height: "100%", children: [
-    t && /* @__PURE__ */ e.jsx(r, { sx: { p: L, borderBottom: 1, borderColor: "divider", ...B }, children: t }),
-    /* @__PURE__ */ e.jsx(r, { sx: { flex: 1, overflow: f ? "auto" : "hidden" }, children: f ? /* @__PURE__ */ e.jsx(p, { children: /* @__PURE__ */ e.jsx(r, { sx: { p: c, ...s }, children: l }) }) : /* @__PURE__ */ e.jsx(r, { sx: { p: c, height: "100%", ...s }, children: l }) })
+  ), j = /* @__PURE__ */ e.jsxs(r, { sx: { flex: 1, display: "flex", flexDirection: "column", ...y }, height: "100%", children: [
+    d && /* @__PURE__ */ e.jsx(
+      r,
+      {
+        sx: {
+          p: C,
+          height: m,
+          borderBottom: 1,
+          borderColor: "divider",
+          display: "flex",
+          alignItems: "center",
+          ...D
+        },
+        children: d
+      }
+    ),
+    /* @__PURE__ */ e.jsx(r, { sx: { flex: 1, overflow: n ? "auto" : "hidden" }, children: n ? /* @__PURE__ */ e.jsx(a, { children: /* @__PURE__ */ e.jsx(r, { sx: { p: c, ...s }, children: i }) }) : /* @__PURE__ */ e.jsx(r, { sx: { p: c, height: "100%", ...s }, children: i }) })
   ] });
   return /* @__PURE__ */ e.jsx(
-    C,
+    I,
     {
       sx: {
         height: u,
@@ -56,12 +85,12 @@ const R = ({
         overflow: "hidden",
         ...v
       },
-      children: x === "left" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        j,
-        m
-      ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        m,
+      children: l === "left" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        p,
         j
+      ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        j,
+        p
       ] })
     }
   );

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.187",
+  "version": "1.0.189",
   "description": "advanced ui kit for solostylist",
   "type": "module",
   "main": "dist/main.js",