@solostylist/ui-kit 1.0.174 → 1.0.176

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

@@ -1,37 +1,37 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import g, { useEffect as $, useState as J, useMemo as H, useCallback as q } from "react";
-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 se } from "react-dom";
-import { SSelect as re } from "../s-select/s-select.js";
-const ie = S(/* @__PURE__ */ e.jsx("path", {
+import { j as e } from "../jsx-runtime-tc70JA_2.js";
+import j, { useEffect as K, useState as T, useMemo as H, useCallback as L } from "react";
+import { c as M } from "../createSvgIcon-BKymXuBG.js";
+import { C as $ } from "../Close-DOHlPcFK.js";
+import { D as J } from "../Download-Chao5NQl.js";
+import { TextField as X, Typography as Q, Box as n, Slider as Y, IconButton as z, Checkbox as Z, Divider as ee, Tooltip as E, Dialog as le, DialogTitle as se, DialogContent as te } from "@mui/material";
+import { createPortal as re } from "react-dom";
+import { SSelect as ne } from "../s-select/s-select.js";
+const oe = M(/* @__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", {
+}), "AddPhotoAlternate"), ae = M(/* @__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", {
+}), "AutoAwesome"), ce = M(/* @__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"), ce = S(/* @__PURE__ */ e.jsx("path", {
+}), "Autorenew"), ie = M(/* @__PURE__ */ e.jsx("path", {
   d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
 }), "InfoOutlined");
-var 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,
+var de = /* @__PURE__ */ ((l) => (l.TEXTAREA = "textarea", l.SLIDER = "slider", l.IMAGE = "image", l.NUMBER = "number", l.SELECT = "select", l.CHECKBOX = "checkbox", l))(de || {});
+const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsx(
+  X,
   {
-    value: l,
-    onChange: (c) => u(c.target.value),
-    onFocus: s,
-    onBlur: p,
-    placeholder: t.placeholder || t.label,
-    disabled: d,
+    value: r,
+    onChange: (x) => d(x.target.value),
+    onFocus: o,
+    onBlur: m,
+    placeholder: l.placeholder || l.label,
+    disabled: i,
     multiline: !0,
-    minRows: t.minRows ?? 2,
-    maxRows: t.maxRows ?? 5,
+    minRows: l.minRows ?? 2,
+    maxRows: l.maxRows ?? 5,
     fullWidth: !0
   }
-)), P = g.memo((t) => /* @__PURE__ */ e.jsx(
-  Z,
+)), S = j.memo((l) => /* @__PURE__ */ e.jsx(
+  Q,
   {
     variant: "caption",
     sx: {
@@ -41,10 +41,10 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
       width: "100% !important",
       textAlign: "center"
     },
-    children: t.label
+    children: l.label
   }
-)), pe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
-  a,
+)), he = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+  n,
   {
     sx: {
       width: 120,
@@ -52,22 +52,22 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
       flexDirection: "column"
     },
     children: [
-      /* @__PURE__ */ e.jsx(P, { label: t.label }),
+      /* @__PURE__ */ e.jsx(S, { label: l.label }),
       /* @__PURE__ */ e.jsx(
-        K,
+        X,
         {
           type: "number",
-          value: l ?? t.defaultValue ?? 0,
-          onChange: (c) => u(Number(c.target.value)),
-          onFocus: s,
-          onBlur: p,
-          disabled: d,
+          value: r ?? l.defaultValue ?? 0,
+          onChange: (x) => d(Number(x.target.value)),
+          onFocus: o,
+          onBlur: m,
+          disabled: i,
           size: "small",
           slotProps: {
             htmlInput: {
-              min: t.min,
-              max: t.max,
-              step: t.step
+              min: l.min,
+              max: l.max,
+              step: l.step
             }
           },
           sx: {
@@ -79,8 +79,8 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
       )
     ]
   }
-)), me = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
-  a,
+)), me = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+  n,
   {
     sx: {
       width: 180,
@@ -88,28 +88,28 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
       flexDirection: "column"
     },
     children: [
-      /* @__PURE__ */ e.jsx(P, { label: t.label }),
+      /* @__PURE__ */ e.jsx(S, { label: l.label }),
       /* @__PURE__ */ e.jsx(
-        re,
+        ne,
         {
-          value: l ?? t.defaultValue ?? "",
-          onChange: (c) => u(c.target.value),
-          onFocus: s,
-          onBlur: p,
-          disabled: d,
-          placeholder: t.placeholder,
-          options: t.options || [],
-          optionLabel: t.optionLabel,
-          optionValue: t.optionValue,
-          searchable: t.searchable,
-          searchPlaceholder: t.searchPlaceholder,
+          value: r ?? l.defaultValue ?? "",
+          onChange: (x) => d(x.target.value),
+          onFocus: o,
+          onBlur: m,
+          disabled: i,
+          placeholder: l.placeholder,
+          options: l.options || [],
+          optionLabel: l.optionLabel,
+          optionValue: l.optionValue,
+          searchable: l.searchable,
+          searchPlaceholder: l.searchPlaceholder,
           size: "small"
         }
       )
     ]
   }
-)), he = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
-  a,
+)), fe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+  n,
   {
     sx: {
       width: 160,
@@ -117,25 +117,25 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
       flexDirection: "column"
     },
     children: [
-      /* @__PURE__ */ e.jsx(P, { label: t.label }),
-      /* @__PURE__ */ e.jsxs(a, { sx: { display: "flex", alignItems: "center", height: 36 }, children: [
+      /* @__PURE__ */ e.jsx(S, { label: l.label }),
+      /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", height: 36 }, children: [
         /* @__PURE__ */ e.jsx(
-          ee,
+          Y,
           {
-            value: l ?? t.defaultValue ?? t.min ?? 0,
-            onChange: (c, b) => u(b),
-            onMouseDown: s,
-            onMouseUp: p,
-            disabled: d,
-            min: t.min ?? 0,
-            max: t.max ?? 100,
-            step: t.step ?? 1,
+            value: r ?? l.defaultValue ?? l.min ?? 0,
+            onChange: (x, b) => d(b),
+            onMouseDown: o,
+            onMouseUp: m,
+            disabled: i,
+            min: l.min ?? 0,
+            max: l.max ?? 100,
+            step: l.step ?? 1,
             size: "small",
             sx: { flex: 1 }
           }
         ),
         /* @__PURE__ */ e.jsx(
-          a,
+          n,
           {
             sx: {
               minWidth: 60,
@@ -143,88 +143,87 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
               fontWeight: 500,
               fontSize: "0.875rem"
             },
-            children: l ?? t.defaultValue ?? t.min ?? 0
+            children: r ?? l.defaultValue ?? l.min ?? 0
           }
         )
       ] })
     ]
   }
-)), 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(((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);
-          i.push(T), m.push(T);
-        } else typeof I == "string" && i.push(I);
-      }), i;
-    })(l)), () => {
-      m.forEach((r) => URL.revokeObjectURL(r));
+)), ue = j.memo(({ input: l, value: r, onChange: d, disabled: o }) => {
+  const m = j.useRef(null), [i, x] = j.useState([]), [b, F] = j.useState(null), I = l.multiple ?? !1, p = l.maxImages ?? 5;
+  K(() => {
+    let f = [];
+    return x(((a) => {
+      if (!a) return [];
+      const y = Array.isArray(a) ? a : [a], c = [];
+      return y.forEach((k) => {
+        if (k instanceof File) {
+          const A = URL.createObjectURL(k);
+          c.push(A), f.push(A);
+        } else typeof k == "string" && c.push(k);
+      }), c;
+    })(r)), () => {
+      f.forEach((a) => URL.revokeObjectURL(a));
     };
-  }, [l]);
-  const h = (m) => {
-    const f = m.target.files;
-    if (!(!f || f.length === 0)) {
-      if (j) {
-        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);
+  }, [r]);
+  const R = (f) => {
+    const h = f.target.files;
+    if (!(!h || h.length === 0)) {
+      if (I) {
+        const a = Array.isArray(r) ? r : r instanceof File || typeof r == "string" ? [r] : [], y = Array.from(h).slice(0, p - a.length), c = [...a, ...y];
+        d(c);
       } else
-        u(f[0]);
-      m.target.value = "";
+        d(h[0]);
+      f.target.value = "";
     }
-  }, B = (m, f) => {
-    if (m.stopPropagation(), j && Array.isArray(l)) {
-      const r = l.filter((v, i) => i !== f);
-      u(r.length > 0 ? r : null);
+  }, D = (f, h) => {
+    if (f.stopPropagation(), I && Array.isArray(r)) {
+      const a = r.filter((y, c) => c !== h);
+      d(a.length > 0 ? a : null);
     } else
-      u(null);
-  }, F = () => {
-    var m;
-    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: [
+      d(null);
+  }, P = () => {
+    o || I && i.length >= p || m.current?.click();
+  }, V = I && i.length < p;
+  return /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
     /* @__PURE__ */ e.jsx(
       "input",
       {
-        ref: p,
+        ref: m,
         type: "file",
         accept: "image/*",
-        multiple: j,
-        onChange: h,
-        disabled: s,
+        multiple: I,
+        onChange: R,
+        disabled: o,
         style: { display: "none" }
       }
     ),
-    d.map((m, f) => /* @__PURE__ */ e.jsxs(
-      a,
+    i.map((f, h) => /* @__PURE__ */ e.jsxs(
+      n,
       {
-        onMouseEnter: () => R(f),
-        onMouseLeave: () => R(null),
+        onMouseEnter: () => F(h),
+        onMouseLeave: () => F(null),
         sx: {
           width: 50,
           height: 50,
           border: 1,
-          borderColor: s ? "action.disabled" : "divider",
+          borderColor: o ? "action.disabled" : "divider",
           borderRadius: 1,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          cursor: s ? "not-allowed" : "default",
+          cursor: o ? "not-allowed" : "default",
           position: "relative",
           overflow: "hidden",
           transition: "all 0.2s"
         },
         children: [
           /* @__PURE__ */ e.jsx(
-            a,
+            n,
             {
               component: "img",
-              src: m,
-              alt: `Preview ${f + 1}`,
+              src: f,
+              alt: `Preview ${h + 1}`,
               sx: {
                 width: "100%",
                 height: "100%",
@@ -232,10 +231,10 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
               }
             }
           ),
-          !s && b === f && /* @__PURE__ */ e.jsx(
-            a,
+          !o && b === h && /* @__PURE__ */ e.jsx(
+            n,
             {
-              onClick: (r) => B(r, f),
+              onClick: (a) => D(a, h),
               sx: {
                 position: "absolute",
                 top: 0,
@@ -246,46 +245,46 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ e.jsx(A, { onClick: (r) => B(r, f), children: /* @__PURE__ */ e.jsx(Q, {}) })
+              children: /* @__PURE__ */ e.jsx(z, { onClick: (a) => D(a, h), children: /* @__PURE__ */ e.jsx($, {}) })
             }
           )
         ]
       },
-      f
+      h
     )),
-    (d.length === 0 || L) && /* @__PURE__ */ e.jsx(
-      a,
+    (i.length === 0 || V) && /* @__PURE__ */ e.jsx(
+      n,
       {
-        onClick: F,
+        onClick: P,
         sx: {
           width: 50,
           height: 50,
           border: 1,
-          borderColor: s ? "action.disabled" : "divider",
+          borderColor: o ? "action.disabled" : "divider",
           borderRadius: 1,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          cursor: s ? "not-allowed" : "pointer",
+          cursor: o ? "not-allowed" : "pointer",
           transition: "all 0.2s",
           "&:hover": {
             bgcolor: "action.hover"
           }
         },
         children: /* @__PURE__ */ e.jsx(
-          ie,
+          oe,
           {
             sx: {
               fontSize: 20,
-              color: s ? "action.disabled" : "divider"
+              color: o ? "action.disabled" : "divider"
             }
           }
         )
       }
     )
   ] });
-}), ye = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, disabled: d }) => /* @__PURE__ */ e.jsxs(
-  a,
+}), ge = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+  n,
   {
     sx: {
       display: "flex",
@@ -294,94 +293,94 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
       minWidth: 60
     },
     children: [
-      /* @__PURE__ */ e.jsx(P, { label: t.label }),
+      /* @__PURE__ */ e.jsx(S, { label: l.label }),
       /* @__PURE__ */ e.jsx(
-        te,
+        Z,
         {
-          checked: l ?? t.defaultValue ?? !1,
-          onChange: (c) => u(c.target.checked),
-          onFocus: s,
-          onBlur: p,
-          disabled: d,
+          checked: r ?? l.defaultValue ?? !1,
+          onChange: (x) => d(x.target.checked),
+          onFocus: o,
+          onBlur: m,
+          disabled: i,
           size: "small"
         }
       )
     ]
   }
-)), E = (t) => {
-  switch (t.input.type) {
+)), U = (l) => {
+  switch (l.input.type) {
     case "textarea":
-      return /* @__PURE__ */ e.jsx(fe, { ...t });
+      return /* @__PURE__ */ e.jsx(xe, { ...l });
     case "number":
-      return /* @__PURE__ */ e.jsx(pe, { ...t });
+      return /* @__PURE__ */ e.jsx(he, { ...l });
     case "slider":
-      return /* @__PURE__ */ e.jsx(he, { ...t });
+      return /* @__PURE__ */ e.jsx(fe, { ...l });
     case "select":
-      return /* @__PURE__ */ e.jsx(me, { ...t });
+      return /* @__PURE__ */ e.jsx(me, { ...l });
     case "image":
-      return /* @__PURE__ */ e.jsx(xe, { input: t.input, value: t.value, onChange: t.onChange, disabled: t.disabled });
+      return /* @__PURE__ */ e.jsx(ue, { input: l.input, value: l.value, onChange: l.onChange, disabled: l.disabled });
     case "checkbox":
-      return /* @__PURE__ */ e.jsx(ye, { ...t });
+      return /* @__PURE__ */ e.jsx(ge, { ...l });
     default:
       return null;
   }
-}, N = ({
-  inputs: t = [],
-  onProcess: l,
-  onReset: u,
-  onDownload: s,
-  processing: p = !1,
-  uploading: d = !1,
-  inputValues: c = {},
+}, je = ({
+  inputs: l = [],
+  onProcess: r,
+  onReset: d,
+  onDownload: o,
+  processing: m = !1,
+  uploading: i = !1,
+  inputValues: x = {},
   onInputChange: b,
-  customActionButtons: R,
-  hideProcessButton: j = !1,
-  processButtonDisabled: w = !1,
-  getInputDisabled: h,
-  processTooltip: B = "Process",
-  downloadTooltip: F = "Download",
-  resetTooltip: L = "Reset",
-  infoTooltip: m = "Information",
-  infoTitle: f = "Tool Information",
-  infoContent: r,
-  position: v = "bottom",
-  relative: i = !1
+  customActionButtons: F,
+  hideProcessButton: I = !1,
+  processButtonDisabled: p = !1,
+  getInputDisabled: R,
+  processTooltip: D = "Process",
+  downloadTooltip: P = "Download",
+  resetTooltip: V = "Reset",
+  infoTooltip: f = "Information",
+  infoTitle: h = "Tool Information",
+  infoContent: a,
+  position: y = "bottom",
+  relative: c = !1
 }) => {
-  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: 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),
+  const [k, A] = T(!1), W = H(() => l.length === 0 ? !0 : l.every((s) => {
+    if (!s.required) return !0;
+    const t = x[s.key];
+    return s.type === "textarea" ? t && typeof t == "string" && t.trim() !== "" : s.type === "number" || s.type === "slider" ? t != null : s.type === "select" ? t != null && t !== "" : !0;
+  }), [l, x]), { imageInputs: B, textareaInputs: N, paramInputs: O } = H(() => l.reduce(
+    (s, t) => (t.type === "image" ? s.imageInputs.push(t) : t.type === "textarea" ? s.textareaInputs.push(t) : s.paramInputs.push(t), s),
     {
       imageInputs: [],
       textareaInputs: [],
       paramInputs: []
     }
-  ), [t]), V = q(() => {
-  }, []), k = q(() => {
-  }, []), C = q(
-    (o, n, y) => {
-      b == null || b(o, n, y);
+  ), [l]), C = L(() => {
+  }, []), w = L(() => {
+  }, []), v = L(
+    (s, t, g) => {
+      b?.(s, t, g);
     },
     [b]
-  ), X = q(() => T(!0), []), G = q(() => T(!1), []), U = /* @__PURE__ */ e.jsxs(
-    a,
+  ), q = L(() => A(!0), []), G = L(() => A(!1), []), _ = /* @__PURE__ */ e.jsxs(
+    n,
     {
       sx: {
-        position: i ? "relative" : "fixed",
-        [v]: i ? "auto" : 20,
-        left: i ? "auto" : "50%",
-        transform: i ? "none" : "translateX(-50%)",
-        zIndex: i ? "auto" : 1300,
-        display: i ? "flex" : "block",
-        justifyContent: i ? "center" : "initial",
-        mt: i && v === "top" ? 2 : 0,
-        mb: i && v === "bottom" ? 2 : 0
+        position: c ? "relative" : "fixed",
+        [y]: c ? "auto" : 20,
+        left: c ? "auto" : "50%",
+        transform: c ? "none" : "translateX(-50%)",
+        zIndex: c ? "auto" : 1300,
+        display: c ? "flex" : "block",
+        justifyContent: c ? "center" : "initial",
+        mt: c && y === "top" ? 2 : 0,
+        mb: c && y === "bottom" ? 2 : 0
       },
       children: [
         /* @__PURE__ */ e.jsxs(
-          a,
+          n,
           {
             sx: {
               display: "flex",
@@ -394,30 +393,30 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
               bgcolor: "background.default"
             },
             children: [
-              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(o.key, x),
-                  onFocus: V,
-                  onBlur: k,
-                  disabled: y
-                }) }, o.key) : /* @__PURE__ */ e.jsx(
-                  E,
+              N.length > 0 && /* @__PURE__ */ e.jsx(n, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: N.map((s) => {
+                const t = x[s.key], g = R?.(s.key) ?? !1;
+                return s.renderInput ? /* @__PURE__ */ e.jsx(n, { children: s.renderInput({
+                  value: t,
+                  onChange: (u) => v(s.key, u),
+                  onFocus: C,
+                  onBlur: w,
+                  disabled: g
+                }) }, s.key) : /* @__PURE__ */ e.jsx(
+                  U,
                   {
-                    input: o,
-                    value: n,
-                    onChange: (x) => C(o.key, x),
-                    onFocus: V,
-                    onBlur: k,
-                    disabled: y
+                    input: s,
+                    value: t,
+                    onChange: (u) => v(s.key, u),
+                    onFocus: C,
+                    onBlur: w,
+                    disabled: g
                   },
-                  o.key
+                  s.key
                 );
               }) }),
-              /* @__PURE__ */ e.jsxs(a, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+              /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
                 /* @__PURE__ */ e.jsx(
-                  a,
+                  n,
                   {
                     sx: {
                       display: "flex",
@@ -425,68 +424,68 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
                       gap: 2,
                       flex: 1
                     },
-                    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({
-                          value: n,
-                          onChange: (x) => C(o.key, x),
-                          onFocus: V,
-                          onBlur: k,
-                          disabled: y
-                        }) }, o.key) : /* @__PURE__ */ e.jsx(
-                          E,
+                    children: (B.length > 0 || O.length > 0) && /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "flex-end", gap: 1.5 }, children: [
+                      B.map((s) => {
+                        const t = x[s.key], g = R?.(s.key) ?? !1;
+                        return s.renderInput ? /* @__PURE__ */ e.jsx(n, { children: s.renderInput({
+                          value: t,
+                          onChange: (u) => v(s.key, u),
+                          onFocus: C,
+                          onBlur: w,
+                          disabled: g
+                        }) }, s.key) : /* @__PURE__ */ e.jsx(
+                          U,
                           {
-                            input: o,
-                            value: n,
-                            onChange: (x) => C(o.key, x),
-                            onFocus: V,
-                            onBlur: k,
-                            disabled: y
+                            input: s,
+                            value: t,
+                            onChange: (u) => v(s.key, u),
+                            onFocus: C,
+                            onBlur: w,
+                            disabled: g
                           },
-                          o.key
+                          s.key
                         );
                       }),
-                      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,
-                          onChange: (x) => C(o.key, x),
-                          onFocus: V,
-                          onBlur: k,
-                          disabled: y
-                        }) }, o.key) : /* @__PURE__ */ e.jsx(
-                          E,
+                      O.map((s) => {
+                        const t = x[s.key], g = R?.(s.key) ?? !1;
+                        return s.renderInput ? /* @__PURE__ */ e.jsx(n, { children: s.renderInput({
+                          value: t,
+                          onChange: (u) => v(s.key, u),
+                          onFocus: C,
+                          onBlur: w,
+                          disabled: g
+                        }) }, s.key) : /* @__PURE__ */ e.jsx(
+                          U,
                           {
-                            input: o,
-                            value: n,
-                            onChange: (x) => C(o.key, x),
-                            onFocus: V,
-                            onBlur: k,
-                            disabled: y
+                            input: s,
+                            value: t,
+                            onChange: (u) => v(s.key, u),
+                            onFocus: C,
+                            onBlur: w,
+                            disabled: g
                           },
-                          o.key
+                          s.key
                         );
                       })
                     ] })
                   }
                 ),
-                (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,
-                  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,
+                (B.length > 0 || O.length > 0) && /* @__PURE__ */ e.jsx(ee, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, flexShrink: 0 } }),
+                /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", gap: 0.75, ml: "auto" }, children: [
+                  F,
+                  a && /* @__PURE__ */ e.jsx(E, { title: f, children: /* @__PURE__ */ e.jsx(z, { onClick: q, children: /* @__PURE__ */ e.jsx(ie, {}) }) }),
+                  /* @__PURE__ */ e.jsx(E, { title: P, children: /* @__PURE__ */ e.jsx(z, { onClick: o, children: /* @__PURE__ */ e.jsx(J, {}) }) }),
+                  /* @__PURE__ */ e.jsx(E, { title: V, children: /* @__PURE__ */ e.jsx(z, { onClick: d, children: /* @__PURE__ */ e.jsx(ce, {}) }) }),
+                  !I && /* @__PURE__ */ e.jsx(E, { title: D, children: /* @__PURE__ */ e.jsx("span", { children: /* @__PURE__ */ e.jsx(
+                    z,
                     {
-                      onClick: l,
-                      disabled: w || !O || d || p,
+                      onClick: r,
+                      disabled: p || !W || i || m,
                       size: "large",
                       children: /* @__PURE__ */ e.jsx(
-                        de,
+                        ae,
                         {
-                          color: w || !O || d || p ? "disabled" : "primary"
+                          color: p || !W || i || m ? "disabled" : "primary"
                         }
                       )
                     }
@@ -496,32 +495,18 @@ const fe = g.memo(({ input: t, value: l, onChange: u, onFocus: s, onBlur: p, dis
             ]
           }
         ),
-        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: r })
+        a && /* @__PURE__ */ e.jsxs(le, { open: k, onClose: G, maxWidth: "sm", fullWidth: !0, children: [
+          /* @__PURE__ */ e.jsx(se, { children: h }),
+          /* @__PURE__ */ e.jsx(te, { children: a })
         ] })
       ]
     }
   );
-  return !i && typeof window < "u" ? se(U, document.body) : U;
+  return !c && typeof window < "u" ? re(_, document.body) : _;
 };
-N.displayName = "SAiToolBar";
-try {
-  M.displayName = "SAiToolBarInputType", M.__docgenInfo = { description: "Supported input types for SAiToolBar", displayName: "SAiToolBarInputType", props: {} };
-} catch {
-}
-try {
-  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 {
-}
-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" } } } };
-} catch {
-}
+je.displayName = "SAiToolBar";
 export {
-  N as SAiToolBar,
-  M as SAiToolBarInputType,
-  N as default
+  je as SAiToolBar,
+  de as SAiToolBarInputType,
+  je as default
 };