@solostylist/ui-kit 1.0.197 → 1.0.200

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

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