@solostylist/ui-kit 1.0.172 → 1.0.174

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

@@ -4,24 +4,24 @@ import { c as S } from "../createSvgIcon-DxwgGAVe.js";
 import { C as Q } from "../Close-BRlEKA2Q.js";
 import { D as Y } from "../Download-UsLvGg3y.js";
 import { TextField as K, Typography as Z, Box as a, Slider as ee, IconButton as A, Checkbox as te, Divider as oe, Tooltip as _, Dialog as ne, DialogTitle as le, DialogContent as ae } from "@mui/material";
-import { createPortal as re } from "react-dom";
-import { SSelect as se } from "../s-select/s-select.js";
+import { createPortal as se } from "react-dom";
+import { SSelect as re } from "../s-select/s-select.js";
 const ie = 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"), de = 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"), ue = 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"), ue = S(/* @__PURE__ */ e.jsx("path", {
+}), "Autorenew"), ce = 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"), ce = S(/* @__PURE__ */ e.jsx("path", {
-  d: "M8 5v14l11-7z"
-}), "PlayArrow");
-var N = /* @__PURE__ */ ((t) => (t.TEXTAREA = "textarea", t.SLIDER = "slider", t.IMAGE = "image", t.NUMBER = "number", t.SELECT = "select", t.CHECKBOX = "checkbox", t))(N || {});
-const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsx(
+}), "InfoOutlined");
+var M = /* @__PURE__ */ ((t) => (t.TEXTAREA = "textarea", t.SLIDER = "slider", t.IMAGE = "image", t.NUMBER = "number", t.SELECT = "select", t.CHECKBOX = "checkbox", t))(M || {});
+const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsx(
   K,
   {
     value: l,
     onChange: (c) => u(c.target.value),
-    onFocus: r,
+    onFocus: s,
     onBlur: p,
     placeholder: t.placeholder || t.label,
     disabled: d,
@@ -43,7 +43,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
     },
     children: t.label
   }
-)), pe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
+)), pe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
   a,
   {
     sx: {
@@ -59,7 +59,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
           type: "number",
           value: l ?? t.defaultValue ?? 0,
           onChange: (c) => u(Number(c.target.value)),
-          onFocus: r,
+          onFocus: s,
           onBlur: p,
           disabled: d,
           size: "small",
@@ -79,7 +79,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
       )
     ]
   }
-)), me = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
+)), me = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
   a,
   {
     sx: {
@@ -90,11 +90,11 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
     children: [
       /* @__PURE__ */ e.jsx(P, { label: t.label }),
       /* @__PURE__ */ e.jsx(
-        se,
+        re,
         {
           value: l ?? t.defaultValue ?? "",
           onChange: (c) => u(c.target.value),
-          onFocus: r,
+          onFocus: s,
           onBlur: p,
           disabled: d,
           placeholder: t.placeholder,
@@ -108,7 +108,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
       )
     ]
   }
-)), he = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
+)), he = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
   a,
   {
     sx: {
@@ -124,7 +124,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
           {
             value: l ?? t.defaultValue ?? t.min ?? 0,
             onChange: (c, b) => u(b),
-            onMouseDown: r,
+            onMouseDown: s,
             onMouseUp: p,
             disabled: d,
             min: t.min ?? 0,
@@ -149,13 +149,13 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
       ] })
     ]
   }
-)), xe = g.memo(({ input: t, value: l, onChange: u, disabled: r }) => {
+)), xe = g.memo(({ input: t, value: l, onChange: u, disabled: s }) => {
   const p = g.useRef(null), [d, c] = g.useState([]), [b, R] = g.useState(null), j = t.multiple ?? !1, w = t.maxImages ?? 5;
   $(() => {
     let m = [];
-    return c(((s) => {
-      if (!s) return [];
-      const v = Array.isArray(s) ? s : [s], i = [];
+    return c(((r) => {
+      if (!r) return [];
+      const v = Array.isArray(r) ? r : [r], i = [];
       return v.forEach((I) => {
         if (I instanceof File) {
           const T = URL.createObjectURL(I);
@@ -163,14 +163,14 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
         } else typeof I == "string" && i.push(I);
       }), i;
     })(l)), () => {
-      m.forEach((s) => URL.revokeObjectURL(s));
+      m.forEach((r) => URL.revokeObjectURL(r));
     };
   }, [l]);
   const h = (m) => {
     const f = m.target.files;
     if (!(!f || f.length === 0)) {
       if (j) {
-        const s = Array.isArray(l) ? l : l instanceof File || typeof l == "string" ? [l] : [], v = Array.from(f).slice(0, w - s.length), i = [...s, ...v];
+        const r = Array.isArray(l) ? l : l instanceof File || typeof l == "string" ? [l] : [], v = Array.from(f).slice(0, w - r.length), i = [...r, ...v];
         u(i);
       } else
         u(f[0]);
@@ -178,14 +178,14 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
     }
   }, B = (m, f) => {
     if (m.stopPropagation(), j && Array.isArray(l)) {
-      const s = l.filter((v, i) => i !== f);
-      u(s.length > 0 ? s : null);
+      const r = l.filter((v, i) => i !== f);
+      u(r.length > 0 ? r : null);
     } else
       u(null);
   }, F = () => {
     var m;
-    r || j && d.length >= w || (m = p.current) == null || m.click();
-  }, D = j && d.length < w;
+    s || j && d.length >= w || (m = p.current) == null || m.click();
+  }, L = j && d.length < w;
   return /* @__PURE__ */ e.jsxs(a, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
     /* @__PURE__ */ e.jsx(
       "input",
@@ -195,7 +195,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
         accept: "image/*",
         multiple: j,
         onChange: h,
-        disabled: r,
+        disabled: s,
         style: { display: "none" }
       }
     ),
@@ -208,12 +208,12 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
           width: 50,
           height: 50,
           border: 1,
-          borderColor: r ? "action.disabled" : "divider",
+          borderColor: s ? "action.disabled" : "divider",
           borderRadius: 1,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          cursor: r ? "not-allowed" : "default",
+          cursor: s ? "not-allowed" : "default",
           position: "relative",
           overflow: "hidden",
           transition: "all 0.2s"
@@ -232,10 +232,10 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
               }
             }
           ),
-          !r && b === f && /* @__PURE__ */ e.jsx(
+          !s && b === f && /* @__PURE__ */ e.jsx(
             a,
             {
-              onClick: (s) => B(s, f),
+              onClick: (r) => B(r, f),
               sx: {
                 position: "absolute",
                 top: 0,
@@ -246,14 +246,14 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ e.jsx(A, { onClick: (s) => B(s, f), children: /* @__PURE__ */ e.jsx(Q, {}) })
+              children: /* @__PURE__ */ e.jsx(A, { onClick: (r) => B(r, f), children: /* @__PURE__ */ e.jsx(Q, {}) })
             }
           )
         ]
       },
       f
     )),
-    (d.length === 0 || D) && /* @__PURE__ */ e.jsx(
+    (d.length === 0 || L) && /* @__PURE__ */ e.jsx(
       a,
       {
         onClick: F,
@@ -261,12 +261,12 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
           width: 50,
           height: 50,
           border: 1,
-          borderColor: r ? "action.disabled" : "divider",
+          borderColor: s ? "action.disabled" : "divider",
           borderRadius: 1,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          cursor: r ? "not-allowed" : "pointer",
+          cursor: s ? "not-allowed" : "pointer",
           transition: "all 0.2s",
           "&:hover": {
             bgcolor: "action.hover"
@@ -277,14 +277,14 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
           {
             sx: {
               fontSize: 20,
-              color: r ? "action.disabled" : "text.secondary"
+              color: s ? "action.disabled" : "divider"
             }
           }
         )
       }
     )
   ] });
-}), ye = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
+}), ye = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
   a,
   {
     sx: {
@@ -300,7 +300,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
         {
           checked: l ?? t.defaultValue ?? !1,
           onChange: (c) => u(c.target.checked),
-          onFocus: r,
+          onFocus: s,
           onBlur: p,
           disabled: d,
           size: "small"
@@ -308,7 +308,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
       )
     ]
   }
-)), M = (t) => {
+)), E = (t) => {
   switch (t.input.type) {
     case "textarea":
       return /* @__PURE__ */ e.jsx(fe, { ...t });
@@ -325,11 +325,11 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
     default:
       return null;
   }
-}, L = ({
+}, N = ({
   inputs: t = [],
   onProcess: l,
   onReset: u,
-  onDownload: r,
+  onDownload: s,
   processing: p = !1,
   uploading: d = !1,
   inputValues: c = {},
@@ -340,10 +340,10 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
   getInputDisabled: h,
   processTooltip: B = "Process",
   downloadTooltip: F = "Download",
-  resetTooltip: D = "Reset",
+  resetTooltip: L = "Reset",
   infoTooltip: m = "Information",
   infoTitle: f = "Tool Information",
-  infoContent: s,
+  infoContent: r,
   position: v = "bottom",
   relative: i = !1
 }) => {
@@ -351,7 +351,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
     if (!o.required) return !0;
     const n = c[o.key];
     return o.type === "textarea" ? n && typeof n == "string" && n.trim() !== "" : o.type === "number" || o.type === "slider" ? n != null : o.type === "select" ? n != null && n !== "" : !0;
-  }), [t, c]), { imageInputs: z, textareaInputs: W, paramInputs: E } = H(() => t.reduce(
+  }), [t, c]), { imageInputs: z, textareaInputs: W, paramInputs: D } = H(() => t.reduce(
     (o, n) => (n.type === "image" ? o.imageInputs.push(n) : n.type === "textarea" ? o.textareaInputs.push(n) : o.paramInputs.push(n), o),
     {
       imageInputs: [],
@@ -403,7 +403,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
                   onBlur: k,
                   disabled: y
                 }) }, o.key) : /* @__PURE__ */ e.jsx(
-                  M,
+                  E,
                   {
                     input: o,
                     value: n,
@@ -425,7 +425,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
                       gap: 2,
                       flex: 1
                     },
-                    children: (z.length > 0 || E.length > 0) && /* @__PURE__ */ e.jsxs(a, { sx: { display: "flex", alignItems: "flex-end", gap: 1.5 }, children: [
+                    children: (z.length > 0 || D.length > 0) && /* @__PURE__ */ e.jsxs(a, { sx: { display: "flex", alignItems: "flex-end", gap: 1.5 }, children: [
                       z.map((o) => {
                         const n = c[o.key], y = (h == null ? void 0 : h(o.key)) ?? !1;
                         return o.renderInput ? /* @__PURE__ */ e.jsx(a, { children: o.renderInput({
@@ -435,7 +435,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
                           onBlur: k,
                           disabled: y
                         }) }, o.key) : /* @__PURE__ */ e.jsx(
-                          M,
+                          E,
                           {
                             input: o,
                             value: n,
@@ -447,7 +447,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
                           o.key
                         );
                       }),
-                      E.map((o) => {
+                      D.map((o) => {
                         const n = c[o.key], y = (h == null ? void 0 : h(o.key)) ?? !1;
                         return o.renderInput ? /* @__PURE__ */ e.jsx(a, { children: o.renderInput({
                           value: n,
@@ -456,7 +456,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
                           onBlur: k,
                           disabled: y
                         }) }, o.key) : /* @__PURE__ */ e.jsx(
-                          M,
+                          E,
                           {
                             input: o,
                             value: n,
@@ -471,12 +471,12 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
                     ] })
                   }
                 ),
-                (z.length > 0 || E.length > 0) && /* @__PURE__ */ e.jsx(oe, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, flexShrink: 0 } }),
+                (z.length > 0 || D.length > 0) && /* @__PURE__ */ e.jsx(oe, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, flexShrink: 0 } }),
                 /* @__PURE__ */ e.jsxs(a, { sx: { display: "flex", alignItems: "center", gap: 0.75, ml: "auto" }, children: [
                   R,
-                  s && /* @__PURE__ */ e.jsx(_, { title: m, children: /* @__PURE__ */ e.jsx(A, { onClick: X, children: /* @__PURE__ */ e.jsx(ue, {}) }) }),
-                  /* @__PURE__ */ e.jsx(_, { title: F, children: /* @__PURE__ */ e.jsx(A, { onClick: r, children: /* @__PURE__ */ e.jsx(Y, {}) }) }),
-                  /* @__PURE__ */ e.jsx(_, { title: D, children: /* @__PURE__ */ e.jsx(A, { onClick: u, children: /* @__PURE__ */ e.jsx(de, {}) }) }),
+                  r && /* @__PURE__ */ e.jsx(_, { title: m, children: /* @__PURE__ */ e.jsx(A, { onClick: X, children: /* @__PURE__ */ e.jsx(ce, {}) }) }),
+                  /* @__PURE__ */ e.jsx(_, { title: F, children: /* @__PURE__ */ e.jsx(A, { onClick: s, children: /* @__PURE__ */ e.jsx(Y, {}) }) }),
+                  /* @__PURE__ */ e.jsx(_, { title: L, children: /* @__PURE__ */ e.jsx(A, { onClick: u, children: /* @__PURE__ */ e.jsx(ue, {}) }) }),
                   !j && /* @__PURE__ */ e.jsx(_, { title: B, children: /* @__PURE__ */ e.jsx("span", { children: /* @__PURE__ */ e.jsx(
                     A,
                     {
@@ -484,7 +484,7 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
                       disabled: w || !O || d || p,
                       size: "large",
                       children: /* @__PURE__ */ e.jsx(
-                        ce,
+                        de,
                         {
                           color: w || !O || d || p ? "disabled" : "primary"
                         }
@@ -496,22 +496,22 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, dis
             ]
           }
         ),
-        s && /* @__PURE__ */ e.jsxs(ne, { open: I, onClose: G, maxWidth: "sm", fullWidth: !0, children: [
+        r && /* @__PURE__ */ e.jsxs(ne, { open: I, onClose: G, maxWidth: "sm", fullWidth: !0, children: [
           /* @__PURE__ */ e.jsx(le, { children: f }),
-          /* @__PURE__ */ e.jsx(ae, { children: s })
+          /* @__PURE__ */ e.jsx(ae, { children: r })
         ] })
       ]
     }
   );
-  return !i && typeof window < "u" ? re(U, document.body) : U;
+  return !i && typeof window < "u" ? se(U, document.body) : U;
 };
-L.displayName = "SAiToolBar";
+N.displayName = "SAiToolBar";
 try {
-  N.displayName = "SAiToolBarInputType", N.__docgenInfo = { description: "Supported input types for SAiToolBar", displayName: "SAiToolBarInputType", props: {} };
+  M.displayName = "SAiToolBarInputType", M.__docgenInfo = { description: "Supported input types for SAiToolBar", displayName: "SAiToolBarInputType", props: {} };
 } catch {
 }
 try {
-  L.displayName = "SAiToolBar", L.__docgenInfo = { description: `A dynamic floating toolbar for AI tools with inputs and action buttons.
+  N.displayName = "SAiToolBar", N.__docgenInfo = { description: `A dynamic floating toolbar for AI tools with inputs and action buttons.
 Features multiple input types, built-in validation, and portal rendering for proper z-index handling.`, displayName: "SAiToolBar", props: { inputs: { defaultValue: { value: "[]" }, description: "Configuration for input fields", name: "inputs", required: !1, type: { name: "SAiToolBarInput[]" } }, onProcess: { defaultValue: null, description: "Callback when process button is clicked", name: "onProcess", required: !1, type: { name: "(() => void)" } }, onReset: { defaultValue: null, description: "Callback when reset button is clicked", name: "onReset", required: !1, type: { name: "(() => void)" } }, onDownload: { defaultValue: null, description: "Callback when download button is clicked", name: "onDownload", required: !1, type: { name: "(() => void)" } }, processing: { defaultValue: { value: "false" }, description: "Whether the toolbar is in processing state", name: "processing", required: !1, type: { name: "boolean" } }, uploading: { defaultValue: { value: "false" }, description: "Whether the toolbar is in uploading state", name: "uploading", required: !1, type: { name: "boolean" } }, inputValues: { defaultValue: { value: "{}" }, description: "Input values controlled externally", name: "inputValues", required: !1, type: { name: "Record<string, SAiToolBarValue>" } }, onInputChange: { defaultValue: null, description: "Callback when input values change", name: "onInputChange", required: !1, type: { name: "((key: string, value: SAiToolBarValue, file?: File) => void)" } }, customActionButtons: { defaultValue: null, description: "Custom action buttons between inputs and standard actions", name: "customActionButtons", required: !1, type: { name: "ReactNode" } }, hideProcessButton: { defaultValue: { value: "false" }, description: "Hide the main process button", name: "hideProcessButton", required: !1, type: { name: "boolean" } }, processButtonDisabled: { defaultValue: { value: "false" }, description: "Override to disable the process button", name: "processButtonDisabled", required: !1, type: { name: "boolean" } }, getInputDisabled: { defaultValue: null, description: "Function to check if an input should be disabled", name: "getInputDisabled", required: !1, type: { name: "((inputKey: string) => boolean)" } }, processTooltip: { defaultValue: { value: "Process" }, description: "Tooltip for process button", name: "processTooltip", required: !1, type: { name: "string" } }, downloadTooltip: { defaultValue: { value: "Download" }, description: "Tooltip for download button", name: "downloadTooltip", required: !1, type: { name: "string" } }, resetTooltip: { defaultValue: { value: "Reset" }, description: "Tooltip for reset button", name: "resetTooltip", required: !1, type: { name: "string" } }, infoTooltip: { defaultValue: { value: "Information" }, description: "Tooltip for info button", name: "infoTooltip", required: !1, type: { name: "string" } }, infoTitle: { defaultValue: { value: "Tool Information" }, description: "Info dialog title", name: "infoTitle", required: !1, type: { name: "string" } }, infoContent: { defaultValue: null, description: "Info dialog content", name: "infoContent", required: !1, type: { name: "ReactNode" } }, position: { defaultValue: { value: "bottom" }, description: "Position of the toolbar", name: "position", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }] } }, relative: { defaultValue: { value: "false" }, description: "Use relative positioning within container instead of fixed viewport positioning", name: "relative", required: !1, type: { name: "boolean" } } } };
 } catch {
 }
@@ -521,7 +521,7 @@ Features multiple input types, built-in validation, and portal rendering for pro
 } catch {
 }
 export {
-  L as SAiToolBar,
-  N as SAiToolBarInputType,
-  L as default
+  N as SAiToolBar,
+  M as SAiToolBarInputType,
+  N as default
 };

package/dist/s-breadcrumbs/s-breadcrumbs.js

@@ -39,11 +39,11 @@ const l = b(
 );
 l.displayName = "SBreadcrumbs";
 try {
-  l.displayName = "SBreadcrumbs", l.__docgenInfo = { description: "A breadcrumb navigation component for displaying hierarchical navigation paths.", displayName: "SBreadcrumbs", props: { separator: { defaultValue: { value: '<ChevronRightIcon fontSize="small" />' }, description: "Custom separator element between breadcrumb items", name: "separator", required: !1, type: { name: "ReactNode" } }, sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, linkColor: { defaultValue: { value: "primary.main" }, description: "Color of clickable breadcrumb links", name: "linkColor", required: !1, type: { name: "string" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } } } };
+  l.displayName = "SBreadcrumbs", l.__docgenInfo = { description: "A breadcrumb navigation component for displaying hierarchical navigation paths.", displayName: "SBreadcrumbs", props: { sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, separator: { defaultValue: { value: '<ChevronRightIcon fontSize="small" />' }, description: "Custom separator element between breadcrumb items", name: "separator", required: !1, type: { name: "ReactNode" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } }, linkColor: { defaultValue: { value: "primary.main" }, description: "Color of clickable breadcrumb links", name: "linkColor", required: !1, type: { name: "string" } } } };
 } catch {
 }
 try {
-  sbreadcrumbs.displayName = "sbreadcrumbs", sbreadcrumbs.__docgenInfo = { description: "A breadcrumb navigation component for displaying hierarchical navigation paths.", displayName: "sbreadcrumbs", props: { separator: { defaultValue: { value: '<ChevronRightIcon fontSize="small" />' }, description: "Custom separator element between breadcrumb items", name: "separator", required: !1, type: { name: "ReactNode" } }, sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, linkColor: { defaultValue: { value: "primary.main" }, description: "Color of clickable breadcrumb links", name: "linkColor", required: !1, type: { name: "string" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } } } };
+  sbreadcrumbs.displayName = "sbreadcrumbs", sbreadcrumbs.__docgenInfo = { description: "A breadcrumb navigation component for displaying hierarchical navigation paths.", displayName: "sbreadcrumbs", props: { sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, separator: { defaultValue: { value: '<ChevronRightIcon fontSize="small" />' }, description: "Custom separator element between breadcrumb items", name: "separator", required: !1, type: { name: "ReactNode" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } }, linkColor: { defaultValue: { value: "primary.main" }, description: "Color of clickable breadcrumb links", name: "linkColor", required: !1, type: { name: "string" } } } };
 } catch {
 }
 export {

package/dist/s-button-link/s-button-link.js

@@ -32,11 +32,11 @@ const t = ({
 ] });
 t.displayName = "SButtonLink";
 try {
-  t.displayName = "SButtonLink", t.__docgenInfo = { description: "A flexible link component that combines text and a clickable link element.", displayName: "SButtonLink", props: { beforeText: { defaultValue: { value: "" }, description: "Text or element displayed before the main link", name: "beforeText", required: !1, type: { name: "ReactNode" } }, afterText: { defaultValue: { value: "" }, description: "Text or element displayed after the main link", name: "afterText", required: !1, type: { name: "ReactNode" } }, mainText: { defaultValue: { value: "" }, description: "The main clickable link text or element", name: "mainText", required: !1, type: { name: "ReactNode" } }, href: { defaultValue: { value: "#" }, description: "URL for the link (defaults to '#')", name: "href", required: !1, type: { name: "string" } }, component: { defaultValue: { value: "a" }, description: "Component to render the link as (e.g., RouterLink for client-side routing)", name: "component", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, target: { defaultValue: null, description: "Target attribute for the link (e.g., '_blank' for new tab)", name: "target", required: !1, type: { name: "string" } }, color: { defaultValue: { value: "text.secondary" }, description: "Color of the surrounding text", name: "color", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"primary" | "secondary" | "error" | "info" | "success" | "warning" | "textPrimary" | "textSecondary" | "textDisabled", TypographyPropsColorOverrides>' } }, linkColor: { defaultValue: { value: "undefined" }, description: "Color of the link itself (overrides default link color)", name: "linkColor", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"primary" | "secondary" | "error" | "info" | "success" | "warning" | "textPrimary" | "textSecondary" | "textDisabled", TypographyPropsColorOverrides>' } }, lineHeight: { defaultValue: null, description: "Line height for the typography", name: "lineHeight", required: !1, type: { name: "ResponsiveStyleValue<LineHeight<string | number> | readonly NonNullable<LineHeight<string | number>>[]> | ((theme: Theme) => ResponsiveStyleValue<...>)" } }, variant: { defaultValue: { value: "body2" }, description: "Typography variant for the container text", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, onClick: { defaultValue: null, description: "Click handler for the link", name: "onClick", required: !1, type: { name: "MouseEventHandler<HTMLAnchorElement>" } } } };
+  t.displayName = "SButtonLink", t.__docgenInfo = { description: "A flexible link component that combines text and a clickable link element.", displayName: "SButtonLink", props: { beforeText: { defaultValue: { value: "" }, description: "Text or element displayed before the main link", name: "beforeText", required: !1, type: { name: "ReactNode" } }, afterText: { defaultValue: { value: "" }, description: "Text or element displayed after the main link", name: "afterText", required: !1, type: { name: "ReactNode" } }, mainText: { defaultValue: { value: "" }, description: "The main clickable link text or element", name: "mainText", required: !1, type: { name: "ReactNode" } }, href: { defaultValue: { value: "#" }, description: "URL for the link (defaults to '#')", name: "href", required: !1, type: { name: "string" } }, component: { defaultValue: { value: "a" }, description: "Component to render the link as (e.g., RouterLink for client-side routing)", name: "component", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, target: { defaultValue: null, description: "Target attribute for the link (e.g., '_blank' for new tab)", name: "target", required: !1, type: { name: "string" } }, color: { defaultValue: { value: "text.secondary" }, description: "Color of the surrounding text", name: "color", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"error" | "primary" | "secondary" | "info" | "success" | "warning" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides>' } }, linkColor: { defaultValue: { value: "undefined" }, description: "Color of the link itself (overrides default link color)", name: "linkColor", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"error" | "primary" | "secondary" | "info" | "success" | "warning" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides>' } }, lineHeight: { defaultValue: null, description: "Line height for the typography", name: "lineHeight", required: !1, type: { name: "ResponsiveStyleValue<LineHeight<string | number> | readonly NonNullable<LineHeight<string | number>>[]> | ((theme: Theme) => ResponsiveStyleValue<...>)" } }, variant: { defaultValue: { value: "body2" }, description: "Typography variant for the container text", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, onClick: { defaultValue: null, description: "Click handler for the link", name: "onClick", required: !1, type: { name: "MouseEventHandler<HTMLAnchorElement>" } } } };
 } catch {
 }
 try {
-  sbuttonlink.displayName = "sbuttonlink", sbuttonlink.__docgenInfo = { description: "A flexible link component that combines text and a clickable link element.", displayName: "sbuttonlink", props: { beforeText: { defaultValue: { value: "" }, description: "Text or element displayed before the main link", name: "beforeText", required: !1, type: { name: "ReactNode" } }, afterText: { defaultValue: { value: "" }, description: "Text or element displayed after the main link", name: "afterText", required: !1, type: { name: "ReactNode" } }, mainText: { defaultValue: { value: "" }, description: "The main clickable link text or element", name: "mainText", required: !1, type: { name: "ReactNode" } }, href: { defaultValue: { value: "#" }, description: "URL for the link (defaults to '#')", name: "href", required: !1, type: { name: "string" } }, component: { defaultValue: { value: "a" }, description: "Component to render the link as (e.g., RouterLink for client-side routing)", name: "component", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, target: { defaultValue: null, description: "Target attribute for the link (e.g., '_blank' for new tab)", name: "target", required: !1, type: { name: "string" } }, color: { defaultValue: { value: "text.secondary" }, description: "Color of the surrounding text", name: "color", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"primary" | "secondary" | "error" | "info" | "success" | "warning" | "textPrimary" | "textSecondary" | "textDisabled", TypographyPropsColorOverrides>' } }, linkColor: { defaultValue: { value: "undefined" }, description: "Color of the link itself (overrides default link color)", name: "linkColor", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"primary" | "secondary" | "error" | "info" | "success" | "warning" | "textPrimary" | "textSecondary" | "textDisabled", TypographyPropsColorOverrides>' } }, lineHeight: { defaultValue: null, description: "Line height for the typography", name: "lineHeight", required: !1, type: { name: "ResponsiveStyleValue<LineHeight<string | number> | readonly NonNullable<LineHeight<string | number>>[]> | ((theme: Theme) => ResponsiveStyleValue<...>)" } }, variant: { defaultValue: { value: "body2" }, description: "Typography variant for the container text", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, onClick: { defaultValue: null, description: "Click handler for the link", name: "onClick", required: !1, type: { name: "MouseEventHandler<HTMLAnchorElement>" } } } };
+  sbuttonlink.displayName = "sbuttonlink", sbuttonlink.__docgenInfo = { description: "A flexible link component that combines text and a clickable link element.", displayName: "sbuttonlink", props: { beforeText: { defaultValue: { value: "" }, description: "Text or element displayed before the main link", name: "beforeText", required: !1, type: { name: "ReactNode" } }, afterText: { defaultValue: { value: "" }, description: "Text or element displayed after the main link", name: "afterText", required: !1, type: { name: "ReactNode" } }, mainText: { defaultValue: { value: "" }, description: "The main clickable link text or element", name: "mainText", required: !1, type: { name: "ReactNode" } }, href: { defaultValue: { value: "#" }, description: "URL for the link (defaults to '#')", name: "href", required: !1, type: { name: "string" } }, component: { defaultValue: { value: "a" }, description: "Component to render the link as (e.g., RouterLink for client-side routing)", name: "component", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, target: { defaultValue: null, description: "Target attribute for the link (e.g., '_blank' for new tab)", name: "target", required: !1, type: { name: "string" } }, color: { defaultValue: { value: "text.secondary" }, description: "Color of the surrounding text", name: "color", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"error" | "primary" | "secondary" | "info" | "success" | "warning" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides>' } }, linkColor: { defaultValue: { value: "undefined" }, description: "Color of the link itself (overrides default link color)", name: "linkColor", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"error" | "primary" | "secondary" | "info" | "success" | "warning" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides>' } }, lineHeight: { defaultValue: null, description: "Line height for the typography", name: "lineHeight", required: !1, type: { name: "ResponsiveStyleValue<LineHeight<string | number> | readonly NonNullable<LineHeight<string | number>>[]> | ((theme: Theme) => ResponsiveStyleValue<...>)" } }, variant: { defaultValue: { value: "body2" }, description: "Typography variant for the container text", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, onClick: { defaultValue: null, description: "Click handler for the link", name: "onClick", required: !1, type: { name: "MouseEventHandler<HTMLAnchorElement>" } } } };
 } catch {
 }
 export {

package/dist/s-category-card/s-category-card.js

@@ -107,11 +107,11 @@ try {
 } catch {
 }
 try {
-  i.displayName = "SCategoryCard", i.__docgenInfo = { description: "A stylish category card component that displays an image with an overlaid title.", displayName: "SCategoryCard", props: { image: { defaultValue: null, description: "URL or path to the category image source", name: "image", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Display title for the category shown as overlay text", name: "title", required: !0, type: { name: "string" } }, width: { defaultValue: { value: "250" }, description: "Width of the category card", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "250" }, description: "Height of the category card", name: "height", required: !1, type: { name: "string | number" } }, alt: { defaultValue: { value: "category" }, description: "Alternative text for the image", name: "alt", required: !1, type: { name: "string" } }, titlePosition: { defaultValue: { value: "bottom" }, description: "Position of the title overlay on the image", name: "titlePosition", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }, { value: '"center"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }, { value: '"center"' }] } }, titleVariant: { defaultValue: { value: "body1" }, description: "Typography variant for the title text", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, titleColor: { defaultValue: null, description: "Color of the title text", name: "titleColor", required: !1, type: { name: "string" } }, titleBackgroundColor: { defaultValue: { value: "background.paper" }, description: "Background color of the title overlay", name: "titleBackgroundColor", required: !1, type: { name: "string" } }, titleOpacity: { defaultValue: { value: "1" }, description: "Opacity of the title overlay (0-1)", name: "titleOpacity", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "2" }, description: "Border radius of the card and title overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, disableHoverEffect: { defaultValue: { value: "false" }, description: "Disable the hover zoom effect on the image", name: "disableHoverEffect", required: !1, type: { name: "boolean" } }, hoverScale: { defaultValue: { value: "1.1" }, description: "Scale factor for hover zoom effect", name: "hoverScale", required: !1, type: { name: "number" } }, onClick: { defaultValue: null, description: "Handler called when the card is clicked", name: "onClick", required: !1, type: { name: "((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)" } }, sx: { defaultValue: null, description: "System prop for custom styling of the wrapper", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "System prop for custom styling of the title overlay", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, imageSx: { defaultValue: null, description: "System prop for custom styling of the image", name: "imageSx", required: !1, type: { name: "SxProps<Theme>" } } } };
+  i.displayName = "SCategoryCard", i.__docgenInfo = { description: "A stylish category card component that displays an image with an overlaid title.", displayName: "SCategoryCard", props: { image: { defaultValue: null, description: "URL or path to the category image source", name: "image", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Display title for the category shown as overlay text", name: "title", required: !0, type: { name: "string" } }, width: { defaultValue: { value: "250" }, description: "Width of the category card", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "250" }, description: "Height of the category card", name: "height", required: !1, type: { name: "string | number" } }, alt: { defaultValue: { value: "category" }, description: "Alternative text for the image", name: "alt", required: !1, type: { name: "string" } }, titlePosition: { defaultValue: { value: "bottom" }, description: "Position of the title overlay on the image", name: "titlePosition", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }, { value: '"center"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }, { value: '"center"' }] } }, titleVariant: { defaultValue: { value: "body1" }, description: "Typography variant for the title text", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, titleColor: { defaultValue: null, description: "Color of the title text", name: "titleColor", required: !1, type: { name: "string" } }, titleBackgroundColor: { defaultValue: { value: "background.paper" }, description: "Background color of the title overlay", name: "titleBackgroundColor", required: !1, type: { name: "string" } }, titleOpacity: { defaultValue: { value: "1" }, description: "Opacity of the title overlay (0-1)", name: "titleOpacity", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "2" }, description: "Border radius of the card and title overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, disableHoverEffect: { defaultValue: { value: "false" }, description: "Disable the hover zoom effect on the image", name: "disableHoverEffect", required: !1, type: { name: "boolean" } }, hoverScale: { defaultValue: { value: "1.1" }, description: "Scale factor for hover zoom effect", name: "hoverScale", required: !1, type: { name: "number" } }, onClick: { defaultValue: null, description: "Handler called when the card is clicked", name: "onClick", required: !1, type: { name: "((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)" } }, sx: { defaultValue: null, description: "System prop for custom styling of the wrapper", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "System prop for custom styling of the title overlay", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, imageSx: { defaultValue: null, description: "System prop for custom styling of the image", name: "imageSx", required: !1, type: { name: "SxProps<Theme>" } } } };
 } catch {
 }
 try {
-  scategorycard.displayName = "scategorycard", scategorycard.__docgenInfo = { description: "A stylish category card component that displays an image with an overlaid title.", displayName: "scategorycard", props: { image: { defaultValue: null, description: "URL or path to the category image source", name: "image", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Display title for the category shown as overlay text", name: "title", required: !0, type: { name: "string" } }, width: { defaultValue: { value: "250" }, description: "Width of the category card", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "250" }, description: "Height of the category card", name: "height", required: !1, type: { name: "string | number" } }, alt: { defaultValue: { value: "category" }, description: "Alternative text for the image", name: "alt", required: !1, type: { name: "string" } }, titlePosition: { defaultValue: { value: "bottom" }, description: "Position of the title overlay on the image", name: "titlePosition", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }, { value: '"center"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }, { value: '"center"' }] } }, titleVariant: { defaultValue: { value: "body1" }, description: "Typography variant for the title text", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, titleColor: { defaultValue: null, description: "Color of the title text", name: "titleColor", required: !1, type: { name: "string" } }, titleBackgroundColor: { defaultValue: { value: "background.paper" }, description: "Background color of the title overlay", name: "titleBackgroundColor", required: !1, type: { name: "string" } }, titleOpacity: { defaultValue: { value: "1" }, description: "Opacity of the title overlay (0-1)", name: "titleOpacity", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "2" }, description: "Border radius of the card and title overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, disableHoverEffect: { defaultValue: { value: "false" }, description: "Disable the hover zoom effect on the image", name: "disableHoverEffect", required: !1, type: { name: "boolean" } }, hoverScale: { defaultValue: { value: "1.1" }, description: "Scale factor for hover zoom effect", name: "hoverScale", required: !1, type: { name: "number" } }, onClick: { defaultValue: null, description: "Handler called when the card is clicked", name: "onClick", required: !1, type: { name: "((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)" } }, sx: { defaultValue: null, description: "System prop for custom styling of the wrapper", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "System prop for custom styling of the title overlay", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, imageSx: { defaultValue: null, description: "System prop for custom styling of the image", name: "imageSx", required: !1, type: { name: "SxProps<Theme>" } } } };
+  scategorycard.displayName = "scategorycard", scategorycard.__docgenInfo = { description: "A stylish category card component that displays an image with an overlaid title.", displayName: "scategorycard", props: { image: { defaultValue: null, description: "URL or path to the category image source", name: "image", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Display title for the category shown as overlay text", name: "title", required: !0, type: { name: "string" } }, width: { defaultValue: { value: "250" }, description: "Width of the category card", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "250" }, description: "Height of the category card", name: "height", required: !1, type: { name: "string | number" } }, alt: { defaultValue: { value: "category" }, description: "Alternative text for the image", name: "alt", required: !1, type: { name: "string" } }, titlePosition: { defaultValue: { value: "bottom" }, description: "Position of the title overlay on the image", name: "titlePosition", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }, { value: '"center"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }, { value: '"center"' }] } }, titleVariant: { defaultValue: { value: "body1" }, description: "Typography variant for the title text", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, titleColor: { defaultValue: null, description: "Color of the title text", name: "titleColor", required: !1, type: { name: "string" } }, titleBackgroundColor: { defaultValue: { value: "background.paper" }, description: "Background color of the title overlay", name: "titleBackgroundColor", required: !1, type: { name: "string" } }, titleOpacity: { defaultValue: { value: "1" }, description: "Opacity of the title overlay (0-1)", name: "titleOpacity", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "2" }, description: "Border radius of the card and title overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, disableHoverEffect: { defaultValue: { value: "false" }, description: "Disable the hover zoom effect on the image", name: "disableHoverEffect", required: !1, type: { name: "boolean" } }, hoverScale: { defaultValue: { value: "1.1" }, description: "Scale factor for hover zoom effect", name: "hoverScale", required: !1, type: { name: "number" } }, onClick: { defaultValue: null, description: "Handler called when the card is clicked", name: "onClick", required: !1, type: { name: "((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)" } }, sx: { defaultValue: null, description: "System prop for custom styling of the wrapper", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "System prop for custom styling of the title overlay", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, imageSx: { defaultValue: null, description: "System prop for custom styling of the image", name: "imageSx", required: !1, type: { name: "SxProps<Theme>" } } } };
 } catch {
 }
 export {

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

@@ -234,7 +234,7 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
                 borderColor: "primary.main"
               },
               "&::placeholder": {
-                color: "text.secondary"
+                color: "divider"
               }
             },
             "& .epr-category-nav": {