@solostylist/ui-kit 1.0.171 → 1.0.173

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

@@ -3,7 +3,7 @@ import g, { useEffect as $, useState as J, useMemo as H, useCallback as q } from
 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 oe, Divider as te, Tooltip as _, Dialog as ne, DialogTitle as le, DialogContent as ae } from "@mui/material";
+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";
 const ie = S(/* @__PURE__ */ e.jsx("path", {
@@ -15,36 +15,35 @@ const ie = S(/* @__PURE__ */ e.jsx("path", {
 }), "InfoOutlined"), ce = S(/* @__PURE__ */ e.jsx("path", {
   d: "M8 5v14l11-7z"
 }), "PlayArrow");
-var N = /* @__PURE__ */ ((o) => (o.TEXTAREA = "textarea", o.SLIDER = "slider", o.IMAGE = "image", o.NUMBER = "number", o.SELECT = "select", o.CHECKBOX = "checkbox", o))(N || {});
-const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsx(
+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(
   K,
   {
     value: l,
     onChange: (c) => u(c.target.value),
     onFocus: r,
     onBlur: p,
-    placeholder: o.placeholder || o.label,
+    placeholder: t.placeholder || t.label,
     disabled: d,
     multiline: !0,
-    minRows: o.minRows ?? 2,
-    maxRows: o.maxRows ?? 5,
+    minRows: t.minRows ?? 2,
+    maxRows: t.maxRows ?? 5,
     fullWidth: !0
   }
-)), P = g.memo((o) => /* @__PURE__ */ e.jsx(
+)), P = g.memo((t) => /* @__PURE__ */ e.jsx(
   Z,
   {
     variant: "caption",
     sx: {
-      color: "text.secondary",
       whiteSpace: "nowrap",
       overflow: "hidden",
       textOverflow: "ellipsis",
       width: "100% !important",
       textAlign: "center"
     },
-    children: o.label
+    children: t.label
   }
-)), pe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
+)), pe = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
   a,
   {
     sx: {
@@ -53,12 +52,12 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
       flexDirection: "column"
     },
     children: [
-      /* @__PURE__ */ e.jsx(P, { label: o.label }),
+      /* @__PURE__ */ e.jsx(P, { label: t.label }),
       /* @__PURE__ */ e.jsx(
         K,
         {
           type: "number",
-          value: l ?? o.defaultValue ?? 0,
+          value: l ?? t.defaultValue ?? 0,
           onChange: (c) => u(Number(c.target.value)),
           onFocus: r,
           onBlur: p,
@@ -66,9 +65,9 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
           size: "small",
           slotProps: {
             htmlInput: {
-              min: o.min,
-              max: o.max,
-              step: o.step
+              min: t.min,
+              max: t.max,
+              step: t.step
             }
           },
           sx: {
@@ -80,7 +79,7 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
       )
     ]
   }
-)), me = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
+)), me = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
   a,
   {
     sx: {
@@ -89,27 +88,27 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
       flexDirection: "column"
     },
     children: [
-      /* @__PURE__ */ e.jsx(P, { label: o.label }),
+      /* @__PURE__ */ e.jsx(P, { label: t.label }),
       /* @__PURE__ */ e.jsx(
         se,
         {
-          value: l ?? o.defaultValue ?? "",
+          value: l ?? t.defaultValue ?? "",
           onChange: (c) => u(c.target.value),
           onFocus: r,
           onBlur: p,
           disabled: d,
-          placeholder: o.placeholder,
-          options: o.options || [],
-          optionLabel: o.optionLabel,
-          optionValue: o.optionValue,
-          searchable: o.searchable,
-          searchPlaceholder: o.searchPlaceholder,
+          placeholder: t.placeholder,
+          options: t.options || [],
+          optionLabel: t.optionLabel,
+          optionValue: t.optionValue,
+          searchable: t.searchable,
+          searchPlaceholder: t.searchPlaceholder,
           size: "small"
         }
       )
     ]
   }
-)), he = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
+)), he = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
   a,
   {
     sx: {
@@ -118,19 +117,19 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
       flexDirection: "column"
     },
     children: [
-      /* @__PURE__ */ e.jsx(P, { label: o.label }),
+      /* @__PURE__ */ e.jsx(P, { label: t.label }),
       /* @__PURE__ */ e.jsxs(a, { sx: { display: "flex", alignItems: "center", height: 36 }, children: [
         /* @__PURE__ */ e.jsx(
           ee,
           {
-            value: l ?? o.defaultValue ?? o.min ?? 0,
+            value: l ?? t.defaultValue ?? t.min ?? 0,
             onChange: (c, b) => u(b),
             onMouseDown: r,
             onMouseUp: p,
             disabled: d,
-            min: o.min ?? 0,
-            max: o.max ?? 100,
-            step: o.step ?? 1,
+            min: t.min ?? 0,
+            max: t.max ?? 100,
+            step: t.step ?? 1,
             size: "small",
             sx: { flex: 1 }
           }
@@ -144,14 +143,14 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
               fontWeight: 500,
               fontSize: "0.875rem"
             },
-            children: l ?? o.defaultValue ?? o.min ?? 0
+            children: l ?? t.defaultValue ?? t.min ?? 0
           }
         )
       ] })
     ]
   }
-)), xe = g.memo(({ input: o, value: l, onChange: u, disabled: r }) => {
-  const p = g.useRef(null), [d, c] = g.useState([]), [b, R] = g.useState(null), j = o.multiple ?? !1, w = o.maxImages ?? 5;
+)), xe = g.memo(({ input: t, value: l, onChange: u, disabled: r }) => {
+  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) => {
@@ -285,7 +284,7 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
       }
     )
   ] });
-}), ye = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
+}), ye = g.memo(({ input: t, value: l, onChange: u, onFocus: r, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
   a,
   {
     sx: {
@@ -295,11 +294,11 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
       minWidth: 60
     },
     children: [
-      /* @__PURE__ */ e.jsx(P, { label: o.label }),
+      /* @__PURE__ */ e.jsx(P, { label: t.label }),
       /* @__PURE__ */ e.jsx(
-        oe,
+        te,
         {
-          checked: l ?? o.defaultValue ?? !1,
+          checked: l ?? t.defaultValue ?? !1,
           onChange: (c) => u(c.target.checked),
           onFocus: r,
           onBlur: p,
@@ -309,25 +308,25 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
       )
     ]
   }
-)), M = (o) => {
-  switch (o.input.type) {
+)), M = (t) => {
+  switch (t.input.type) {
     case "textarea":
-      return /* @__PURE__ */ e.jsx(fe, { ...o });
+      return /* @__PURE__ */ e.jsx(fe, { ...t });
     case "number":
-      return /* @__PURE__ */ e.jsx(pe, { ...o });
+      return /* @__PURE__ */ e.jsx(pe, { ...t });
     case "slider":
-      return /* @__PURE__ */ e.jsx(he, { ...o });
+      return /* @__PURE__ */ e.jsx(he, { ...t });
     case "select":
-      return /* @__PURE__ */ e.jsx(me, { ...o });
+      return /* @__PURE__ */ e.jsx(me, { ...t });
     case "image":
-      return /* @__PURE__ */ e.jsx(xe, { input: o.input, value: o.value, onChange: o.onChange, disabled: o.disabled });
+      return /* @__PURE__ */ e.jsx(xe, { input: t.input, value: t.value, onChange: t.onChange, disabled: t.disabled });
     case "checkbox":
-      return /* @__PURE__ */ e.jsx(ye, { ...o });
+      return /* @__PURE__ */ e.jsx(ye, { ...t });
     default:
       return null;
   }
 }, L = ({
-  inputs: o = [],
+  inputs: t = [],
   onProcess: l,
   onReset: u,
   onDownload: r,
@@ -348,22 +347,22 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
   position: v = "bottom",
   relative: i = !1
 }) => {
-  const [I, T] = J(!1), O = H(() => o.length === 0 ? !0 : o.every((t) => {
-    if (!t.required) return !0;
-    const n = c[t.key];
-    return t.type === "textarea" ? n && typeof n == "string" && n.trim() !== "" : t.type === "number" || t.type === "slider" ? n != null : t.type === "select" ? n != null && n !== "" : !0;
-  }), [o, c]), { imageInputs: z, textareaInputs: W, paramInputs: E } = H(() => o.reduce(
-    (t, n) => (n.type === "image" ? t.imageInputs.push(n) : n.type === "textarea" ? t.textareaInputs.push(n) : t.paramInputs.push(n), t),
+  const [I, T] = J(!1), O = H(() => t.length === 0 ? !0 : t.every((o) => {
+    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(
+    (o, n) => (n.type === "image" ? o.imageInputs.push(n) : n.type === "textarea" ? o.textareaInputs.push(n) : o.paramInputs.push(n), o),
     {
       imageInputs: [],
       textareaInputs: [],
       paramInputs: []
     }
-  ), [o]), V = q(() => {
+  ), [t]), V = q(() => {
   }, []), k = q(() => {
   }, []), C = q(
-    (t, n, y) => {
-      b == null || b(t, n, y);
+    (o, n, y) => {
+      b == null || b(o, n, y);
     },
     [b]
   ), X = q(() => T(!0), []), G = q(() => T(!1), []), U = /* @__PURE__ */ e.jsxs(
@@ -395,25 +394,25 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
               bgcolor: "background.default"
             },
             children: [
-              W.length > 0 && /* @__PURE__ */ e.jsx(a, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: W.map((t) => {
-                const n = c[t.key], y = (h == null ? void 0 : h(t.key)) ?? !1;
-                return t.renderInput ? /* @__PURE__ */ e.jsx(a, { children: t.renderInput({
+              W.length > 0 && /* @__PURE__ */ e.jsx(a, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: W.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,
-                  onChange: (x) => C(t.key, x),
+                  onChange: (x) => C(o.key, x),
                   onFocus: V,
                   onBlur: k,
                   disabled: y
-                }) }, t.key) : /* @__PURE__ */ e.jsx(
+                }) }, o.key) : /* @__PURE__ */ e.jsx(
                   M,
                   {
-                    input: t,
+                    input: o,
                     value: n,
-                    onChange: (x) => C(t.key, x),
+                    onChange: (x) => C(o.key, x),
                     onFocus: V,
                     onBlur: k,
                     disabled: y
                   },
-                  t.key
+                  o.key
                 );
               }) }),
               /* @__PURE__ */ e.jsxs(a, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
@@ -427,52 +426,52 @@ const fe = g.memo(({ input: o, value: l, onChange: u, onFocus: r, onBlur: p, dis
                       flex: 1
                     },
                     children: (z.length > 0 || E.length > 0) && /* @__PURE__ */ e.jsxs(a, { sx: { display: "flex", alignItems: "flex-end", gap: 1.5 }, children: [
-                      z.map((t) => {
-                        const n = c[t.key], y = (h == null ? void 0 : h(t.key)) ?? !1;
-                        return t.renderInput ? /* @__PURE__ */ e.jsx(a, { children: t.renderInput({
+                      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({
                           value: n,
-                          onChange: (x) => C(t.key, x),
+                          onChange: (x) => C(o.key, x),
                           onFocus: V,
                           onBlur: k,
                           disabled: y
-                        }) }, t.key) : /* @__PURE__ */ e.jsx(
+                        }) }, o.key) : /* @__PURE__ */ e.jsx(
                           M,
                           {
-                            input: t,
+                            input: o,
                             value: n,
-                            onChange: (x) => C(t.key, x),
+                            onChange: (x) => C(o.key, x),
                             onFocus: V,
                             onBlur: k,
                             disabled: y
                           },
-                          t.key
+                          o.key
                         );
                       }),
-                      E.map((t) => {
-                        const n = c[t.key], y = (h == null ? void 0 : h(t.key)) ?? !1;
-                        return t.renderInput ? /* @__PURE__ */ e.jsx(a, { children: t.renderInput({
+                      E.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,
-                          onChange: (x) => C(t.key, x),
+                          onChange: (x) => C(o.key, x),
                           onFocus: V,
                           onBlur: k,
                           disabled: y
-                        }) }, t.key) : /* @__PURE__ */ e.jsx(
+                        }) }, o.key) : /* @__PURE__ */ e.jsx(
                           M,
                           {
-                            input: t,
+                            input: o,
                             value: n,
-                            onChange: (x) => C(t.key, x),
+                            onChange: (x) => C(o.key, x),
                             onFocus: V,
                             onBlur: k,
                             disabled: y
                           },
-                          t.key
+                          o.key
                         );
                       })
                     ] })
                   }
                 ),
-                (z.length > 0 || E.length > 0) && /* @__PURE__ */ e.jsx(te, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, flexShrink: 0 } }),
+                (z.length > 0 || E.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, {}) }) }),
@@ -513,12 +512,12 @@ try {
 }
 try {
   L.displayName = "SAiToolBar", L.__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" } } } };
+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: '"bottom"' }, { value: '"top"' }] } }, relative: { defaultValue: { value: "false" }, description: "Use relative positioning within container instead of fixed viewport positioning", name: "relative", required: !1, type: { name: "boolean" } } } };
 } catch {
 }
 try {
   saitoolbar.displayName = "saitoolbar", saitoolbar.__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" } } } };
+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: '"bottom"' }, { value: '"top"' }] } }, relative: { defaultValue: { value: "false" }, description: "Use relative positioning within container instead of fixed viewport positioning", name: "relative", required: !1, type: { name: "boolean" } } } };
 } catch {
 }
 export {

package/dist/s-blur-text/s-blur-text.js

@@ -76,7 +76,7 @@ const M = (r, o) => {
 };
 c.displayName = "SBlurText";
 try {
-  c.displayName = "SBlurText", c.__docgenInfo = { description: "A Typography component that animates text with a blur effect when it comes into view.", displayName: "SBlurText", props: { text: { defaultValue: null, description: "The text content to animate", name: "text", required: !0, type: { name: "string" } }, delay: { defaultValue: { value: "100" }, description: "Delay between animating each segment in milliseconds", name: "delay", required: !1, type: { name: "number" } }, animateBy: { defaultValue: { value: "words" }, description: "Animation granularity - animate by words or individual letters", name: "animateBy", required: !1, type: { name: "enum", value: [{ value: '"words"' }, { value: '"letters"' }] } }, direction: { defaultValue: { value: "top" }, description: "Direction of the blur animation", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }] } }, threshold: { defaultValue: { value: "0.1" }, description: "Intersection observer threshold for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: { value: "0px" }, description: "Intersection observer root margin", name: "rootMargin", required: !1, type: { name: "string" } }, animationFrom: { defaultValue: null, description: "Custom starting animation state", name: "animationFrom", required: !1, type: { name: "Record<string, string | number>" } }, animationTo: { defaultValue: null, description: "Custom ending animation states (array for multi-step animations)", name: "animationTo", required: !1, type: { name: "Record<string, string | number>[]" } }, easing: { defaultValue: { value: "(t) => t" }, description: "Custom easing function for animation timing", name: "easing", required: !1, type: { name: "((t: number) => number)" } }, onAnimationComplete: { defaultValue: null, description: "Callback fired when animation completes", name: "onAnimationComplete", required: !1, type: { name: "(() => void)" } }, stepDuration: { defaultValue: { value: "0.35" }, description: "Duration of each animation step in seconds", name: "stepDuration", required: !1, type: { name: "number" } } } };
+  c.displayName = "SBlurText", c.__docgenInfo = { description: "A Typography component that animates text with a blur effect when it comes into view.", displayName: "SBlurText", props: { text: { defaultValue: null, description: "The text content to animate", name: "text", required: !0, type: { name: "string" } }, delay: { defaultValue: { value: "100" }, description: "Delay between animating each segment in milliseconds", name: "delay", required: !1, type: { name: "number" } }, animateBy: { defaultValue: { value: "words" }, description: "Animation granularity - animate by words or individual letters", name: "animateBy", required: !1, type: { name: "enum", value: [{ value: '"words"' }, { value: '"letters"' }] } }, direction: { defaultValue: { value: "top" }, description: "Direction of the blur animation", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"bottom"' }, { value: '"top"' }] } }, threshold: { defaultValue: { value: "0.1" }, description: "Intersection observer threshold for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: { value: "0px" }, description: "Intersection observer root margin", name: "rootMargin", required: !1, type: { name: "string" } }, animationFrom: { defaultValue: null, description: "Custom starting animation state", name: "animationFrom", required: !1, type: { name: "Record<string, string | number>" } }, animationTo: { defaultValue: null, description: "Custom ending animation states (array for multi-step animations)", name: "animationTo", required: !1, type: { name: "Record<string, string | number>[]" } }, easing: { defaultValue: { value: "(t) => t" }, description: "Custom easing function for animation timing", name: "easing", required: !1, type: { name: "((t: number) => number)" } }, onAnimationComplete: { defaultValue: null, description: "Callback fired when animation completes", name: "onAnimationComplete", required: !1, type: { name: "(() => void)" } }, stepDuration: { defaultValue: { value: "0.35" }, description: "Duration of each animation step in seconds", name: "stepDuration", required: !1, type: { name: "number" } } } };
 } catch {
 }
 export {

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: { 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" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, 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" } } } };
+  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>" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, 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: { 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" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, 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" } } } };
+  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>" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, 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" | "success" | "error" | "info" | "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" | "success" | "error" | "info" | "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: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { 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" | "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<"error" | "primary" | "secondary" | "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: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { 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>" } } } };
 } 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" | "success" | "error" | "info" | "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" | "success" | "error" | "info" | "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: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { 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" | "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<"error" | "primary" | "secondary" | "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: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { 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>" } } } };
 } 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: '"center"' }, { value: '"bottom"' }, { value: '"top"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"center"' }, { value: '"left"' }, { value: '"right"' }] } }, 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>" } } } };
 } 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: '"center"' }, { value: '"bottom"' }, { value: '"top"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"center"' }, { value: '"left"' }, { value: '"right"' }] } }, 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>" } } } };
 } catch {
 }
 export {