@solostylist/ui-kit 1.0.190 → 1.0.192

package/dist/s-ai-tool-bar/s-ai-tool-bar.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
 /**
  * Possible value types for SAiToolBar inputs
  */
@@ -111,13 +112,17 @@ export interface SAiToolBarProps {
     position?: 'bottom' | 'top';
     /** Use relative positioning within container instead of fixed viewport positioning */
     relative?: boolean;
+    /** Custom styles for the outer container (wrapper) */
+    containerSx?: SxProps<Theme>;
+    /** Custom styles for the inner toolbar box */
+    sx?: SxProps<Theme>;
 }
 /**
  * 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.
  */
 export declare const SAiToolBar: {
-    ({ inputs, onProcess, onReset, onDownload, processing, uploading, inputValues, onInputChange, customActionButtons, hideProcessButton, processButtonDisabled, getInputDisabled, processTooltip, downloadTooltip, resetTooltip, infoTooltip, infoTitle, infoContent, position, relative, }: SAiToolBarProps): React.JSX.Element;
+    ({ inputs, onProcess, onReset, onDownload, processing, uploading, inputValues, onInputChange, customActionButtons, hideProcessButton, processButtonDisabled, getInputDisabled, processTooltip, downloadTooltip, resetTooltip, infoTooltip, infoTitle, infoContent, position, relative, containerSx, sx, }: SAiToolBarProps): React.JSX.Element;
     displayName: string;
 };
 export default SAiToolBar;

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

@@ -1,23 +1,23 @@
 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 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 $ } from "../Close-C-pCw-CD.js";
-import { D as J } from "../Download-D97XSAig.js";
-import { TextField as X, Typography as Q, Box as n, Slider as Y, IconButton as F, Checkbox as Z, Divider as ee, Tooltip as M, Dialog as le, DialogTitle as te, DialogContent as se } from "@mui/material";
-import { createPortal as re } from "react-dom";
-import { SSelect as ne } from "../s-select/s-select.js";
-const oe = S(/* @__PURE__ */ e.jsx("path", {
+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 { createPortal as oe } from "react-dom";
+import { SSelect as ae } from "../s-select/s-select.js";
+const ce = S(/* @__PURE__ */ e.jsx("path", {
   d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8zM5 19l3-4 2 3 3-4 4 5z"
-}), "AddPhotoAlternate"), ae = S(/* @__PURE__ */ e.jsx("path", {
+}), "AddPhotoAlternate"), ie = S(/* @__PURE__ */ e.jsx("path", {
   d: "m19 9 1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25z"
-}), "AutoAwesome"), ce = S(/* @__PURE__ */ e.jsx("path", {
+}), "AutoAwesome"), de = S(/* @__PURE__ */ e.jsx("path", {
   d: "M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6m6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26"
-}), "Autorenew"), ie = S(/* @__PURE__ */ e.jsx("path", {
+}), "Autorenew"), xe = S(/* @__PURE__ */ e.jsx("path", {
   d: "M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"
 }), "InfoOutlined");
-var de = /* @__PURE__ */ ((l) => (l.TEXTAREA = "textarea", l.SLIDER = "slider", l.IMAGE = "image", l.NUMBER = "number", l.SELECT = "select", l.CHECKBOX = "checkbox", l))(de || {});
-const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsx(
-  X,
+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(
+  q,
   {
     value: r,
     onChange: (x) => d(x.target.value),
@@ -31,7 +31,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     fullWidth: !0
   }
 )), z = j.memo((l) => /* @__PURE__ */ e.jsx(
-  Q,
+  Z,
   {
     variant: "caption",
     sx: {
@@ -43,7 +43,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     },
     children: l.label
   }
-)), he = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+)), fe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
   n,
   {
     sx: {
@@ -54,7 +54,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     children: [
       /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsx(
-        X,
+        q,
         {
           type: "number",
           value: r ?? l.defaultValue ?? 0,
@@ -78,7 +78,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       )
     ]
   }
-)), me = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+)), ue = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
   n,
   {
     sx: {
@@ -89,7 +89,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     children: [
       /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsx(
-        ne,
+        ae,
         {
           value: r ?? l.defaultValue ?? "",
           onChange: (x) => d(x.target.value),
@@ -106,7 +106,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       )
     ]
   }
-)), fe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+)), ge = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
   n,
   {
     sx: {
@@ -118,7 +118,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center", height: 36 }, children: [
         /* @__PURE__ */ e.jsx(
-          Y,
+          ee,
           {
             value: r ?? l.defaultValue ?? l.min ?? 0,
             onChange: (x, b) => d(b),
@@ -146,17 +146,17 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       ] })
     ]
   }
-)), ue = j.memo(({ input: l, value: r, onChange: d, disabled: o }) => {
-  const m = j.useRef(null), [i, x] = j.useState([]), [b, D] = j.useState(null), I = l.multiple ?? !1, p = l.maxImages ?? 5;
-  K(() => {
+)), 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;
+  $(() => {
     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 A = URL.createObjectURL(k);
-          c.push(A), f.push(A);
+          const E = URL.createObjectURL(k);
+          c.push(E), f.push(E);
         } else typeof k == "string" && c.push(k);
       }), c;
     })(r)), () => {
@@ -173,7 +173,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
         d(h[0]);
       f.target.value = "";
     }
-  }, E = (f, h) => {
+  }, D = (f, h) => {
     if (f.stopPropagation(), I && Array.isArray(r)) {
       const a = r.filter((y, c) => c !== h);
       d(a.length > 0 ? a : null);
@@ -198,8 +198,8 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     i.map((f, h) => /* @__PURE__ */ e.jsxs(
       n,
       {
-        onMouseEnter: () => D(h),
-        onMouseLeave: () => D(null),
+        onMouseEnter: () => F(h),
+        onMouseLeave: () => F(null),
         sx: {
           width: 50,
           height: 50,
@@ -231,7 +231,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
           !o && b === h && /* @__PURE__ */ e.jsx(
             n,
             {
-              onClick: (a) => E(a, h),
+              onClick: (a) => D(a, h),
               sx: {
                 position: "absolute",
                 top: 0,
@@ -242,7 +242,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ e.jsx(F, { onClick: (a) => E(a, h), children: /* @__PURE__ */ e.jsx($, {}) })
+              children: /* @__PURE__ */ e.jsx(L, { onClick: (a) => D(a, h), children: /* @__PURE__ */ e.jsx(Q, {}) })
             }
           )
         ]
@@ -269,7 +269,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
           }
         },
         children: /* @__PURE__ */ e.jsx(
-          oe,
+          ce,
           {
             sx: {
               fontSize: 20,
@@ -280,7 +280,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
       }
     )
   ] });
-}), ge = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
+}), ye = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, disabled: i }) => /* @__PURE__ */ e.jsxs(
   n,
   {
     sx: {
@@ -292,7 +292,7 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
     children: [
       /* @__PURE__ */ e.jsx(z, { label: l.label }),
       /* @__PURE__ */ e.jsx(
-        Z,
+        le,
         {
           checked: r ?? l.defaultValue ?? !1,
           onChange: (x) => d(x.target.checked),
@@ -306,21 +306,21 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
 )), U = (l) => {
   switch (l.input.type) {
     case "textarea":
-      return /* @__PURE__ */ e.jsx(xe, { ...l });
+      return /* @__PURE__ */ e.jsx(me, { ...l });
     case "number":
-      return /* @__PURE__ */ e.jsx(he, { ...l });
-    case "slider":
       return /* @__PURE__ */ e.jsx(fe, { ...l });
+    case "slider":
+      return /* @__PURE__ */ e.jsx(ge, { ...l });
     case "select":
-      return /* @__PURE__ */ e.jsx(me, { ...l });
+      return /* @__PURE__ */ e.jsx(ue, { ...l });
     case "image":
-      return /* @__PURE__ */ e.jsx(ue, { input: l.input, value: l.value, onChange: l.onChange, disabled: l.disabled });
+      return /* @__PURE__ */ e.jsx(je, { input: l.input, value: l.value, onChange: l.onChange, disabled: l.disabled });
     case "checkbox":
-      return /* @__PURE__ */ e.jsx(ge, { ...l });
+      return /* @__PURE__ */ e.jsx(ye, { ...l });
     default:
       return null;
   }
-}, je = ({
+}, Ie = ({
   inputs: l = [],
   onProcess: r,
   onReset: d,
@@ -329,38 +329,40 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
   uploading: i = !1,
   inputValues: x = {},
   onInputChange: b,
-  customActionButtons: D,
+  customActionButtons: F,
   hideProcessButton: I = !1,
   processButtonDisabled: p = !1,
   getInputDisabled: R,
-  processTooltip: E = "Process",
+  processTooltip: D = "Process",
   downloadTooltip: P = "Download",
   resetTooltip: V = "Reset",
   infoTooltip: f = "Information",
   infoTitle: h = "Tool Information",
   infoContent: a,
   position: y = "bottom",
-  relative: c = !1
+  relative: c = !1,
+  containerSx: k,
+  sx: E
 }) => {
-  const [k, A] = T(!1), W = H(() => l.length === 0 ? !0 : l.every((t) => {
+  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: N, paramInputs: O } = H(() => l.reduce(
+  }), [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),
     {
       imageInputs: [],
       textareaInputs: [],
       paramInputs: []
     }
-  ), [l]), C = L(() => {
-  }, []), w = L(() => {
-  }, []), v = L(
+  ), [l]), C = A(() => {
+  }, []), w = A(() => {
+  }, []), v = A(
     (t, s, g) => {
       b?.(t, s, g);
     },
     [b]
-  ), q = L(() => A(!0), []), G = L(() => A(!1), []), _ = /* @__PURE__ */ e.jsxs(
+  ), K = A(() => W(!0), []), T = A(() => W(!1), []), H = /* @__PURE__ */ e.jsxs(
     n,
     {
       sx: {
@@ -372,7 +374,8 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
         display: c ? "flex" : "block",
         justifyContent: c ? "center" : "initial",
         mt: c && y === "top" ? 2 : 0,
-        mb: c && y === "bottom" ? 2 : 0
+        mb: c && y === "bottom" ? 2 : 0,
+        ...k
       },
       children: [
         /* @__PURE__ */ e.jsxs(
@@ -386,10 +389,11 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
               borderRadius: 2,
               border: 1,
               borderColor: "divider",
-              bgcolor: "background.default"
+              bgcolor: "background.default",
+              ...E
             },
             children: [
-              N.length > 0 && /* @__PURE__ */ e.jsx(n, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: N.map((t) => {
+              _.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,
@@ -466,22 +470,22 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
                     ] })
                   }
                 ),
-                (B.length > 0 || O.length > 0) && /* @__PURE__ */ e.jsx(ee, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, flexShrink: 0 } }),
+                (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: [
-                  D,
-                  a && /* @__PURE__ */ e.jsx(M, { title: f, children: /* @__PURE__ */ e.jsx(F, { onClick: q, children: /* @__PURE__ */ e.jsx(ie, {}) }) }),
-                  /* @__PURE__ */ e.jsx(M, { title: P, children: /* @__PURE__ */ e.jsx(F, { onClick: o, children: /* @__PURE__ */ e.jsx(J, {}) }) }),
-                  /* @__PURE__ */ e.jsx(M, { title: V, children: /* @__PURE__ */ e.jsx(F, { onClick: d, children: /* @__PURE__ */ e.jsx(ce, {}) }) }),
-                  !I && /* @__PURE__ */ e.jsx(M, { title: E, children: /* @__PURE__ */ e.jsx("span", { children: /* @__PURE__ */ e.jsx(
-                    F,
+                  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,
                     {
                       onClick: r,
-                      disabled: p || !W || i || m,
+                      disabled: p || !N || i || m,
                       size: "large",
                       children: /* @__PURE__ */ e.jsx(
-                        ae,
+                        ie,
                         {
-                          color: p || !W || i || m ? "disabled" : "primary"
+                          color: p || !N || i || m ? "disabled" : "primary"
                         }
                       )
                     }
@@ -491,18 +495,18 @@ const xe = j.memo(({ input: l, value: r, onChange: d, onFocus: o, onBlur: m, dis
             ]
           }
         ),
-        a && /* @__PURE__ */ e.jsxs(le, { open: k, onClose: G, maxWidth: "sm", fullWidth: !0, children: [
-          /* @__PURE__ */ e.jsx(te, { children: h }),
-          /* @__PURE__ */ e.jsx(se, { children: a })
+        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 })
         ] })
       ]
     }
   );
-  return !c && typeof window < "u" ? re(_, document.body) : _;
+  return !c && typeof window < "u" ? oe(H, document.body) : H;
 };
-je.displayName = "SAiToolBar";
+Ie.displayName = "SAiToolBar";
 export {
-  je as SAiToolBar,
-  de as SAiToolBarInputType,
-  je as default
+  Ie as SAiToolBar,
+  he as SAiToolBarInputType,
+  Ie as default
 };

package/dist/theme/components/button.d.ts

@@ -1074,6 +1074,7 @@ export declare const MuiButton: {
                         opacity: number;
                     };
                     '&.MuiButton-loading': {
+                        color: string;
                         '& .MuiButton-loadingIndicator': {
                             color: string;
                         };
@@ -2112,6 +2113,7 @@ export declare const MuiButton: {
                         opacity: number;
                     };
                     '&.MuiButton-loading': {
+                        color: string;
                         '& .MuiButton-loadingIndicator': {
                             color: string;
                         };
@@ -3150,6 +3152,7 @@ export declare const MuiButton: {
                         opacity: number;
                     };
                     '&.MuiButton-loading': {
+                        color: string;
                         '& .MuiButton-loadingIndicator': {
                             color: string;
                         };
@@ -4188,6 +4191,7 @@ export declare const MuiButton: {
                         opacity: number;
                     };
                     '&.MuiButton-loading': {
+                        color: string;
                         '& .MuiButton-loadingIndicator': {
                             color: string;
                         };
@@ -5226,6 +5230,7 @@ export declare const MuiButton: {
                         opacity: number;
                     };
                     '&.MuiButton-loading': {
+                        color: string;
                         '& .MuiButton-loadingIndicator': {
                             color: string;
                         };
@@ -6264,6 +6269,7 @@ export declare const MuiButton: {
                         opacity: number;
                     };
                     '&.MuiButton-loading': {
+                        color: string;
                         '& .MuiButton-loadingIndicator': {
                             color: string;
                         };

package/dist/theme/components/button.js

@@ -1,44 +1,46 @@
-import { brand as u, lightBrand as e, purple as l, lightPurple as p, green as c, lightGreen as d, red as v, lightRed as b, blue as g, lightBlue as y, orange as f, lightOrange as B } from "../theme-primitives.js";
-const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n, r, i) => n === "text" || n === "outlined" ? i : r, s = (n, r, i, o) => ({
-  backgroundColor: a(r.variant, i[700]),
-  color: t(r.variant, i[50], i[500]),
-  borderColor: r.variant === "outlined" ? i[300] : "transparent",
+import { brand as u, lightBrand as c, purple as p, lightPurple as e, green as l, lightGreen as d, red as v, lightRed as b, blue as y, lightBlue as g, orange as f, lightOrange as B } from "../theme-primitives.js";
+const o = (i, r) => i === "text" || i === "outlined" ? "transparent" : r, s = (i, r, n) => i === "text" || i === "outlined" ? n : r, t = (i, r, n, a) => ({
+  backgroundColor: o(r.variant, n[700]),
+  color: s(r.variant, n[50], n[500]),
+  borderColor: r.variant === "outlined" ? n[300] : "transparent",
   "&:hover": {
-    backgroundColor: a(r.variant, i[800]),
-    color: t(r.variant, i[100], i[600]),
-    borderColor: r.variant === "outlined" ? i[400] : "transparent"
+    backgroundColor: o(r.variant, n[800]),
+    color: s(r.variant, n[100], n[600]),
+    borderColor: r.variant === "outlined" ? n[400] : "transparent"
   },
   "&:active": { filter: "brightness(1.1)" },
   "&.Mui-disabled": {
-    backgroundColor: a(r.variant, i[700]),
-    color: i[50],
-    borderColor: r.variant === "outlined" ? i[900] : "transparent",
+    backgroundColor: o(r.variant, n[700]),
+    color: n[50],
+    borderColor: r.variant === "outlined" ? n[900] : "transparent",
     opacity: 0.5
   },
   "&.MuiButton-loading": {
+    color: s(r.variant, n[50], n[500]),
     "& .MuiButton-loadingIndicator": {
-      color: i[50]
+      color: s(r.variant, n[50], n[500])
     }
   },
-  ...n.applyStyles("dark", {
-    backgroundColor: a(r.variant, o[800]),
-    color: t(r.variant, o[100], o[500]),
-    borderColor: r.variant === "outlined" ? o[800] : "transparent",
+  ...i.applyStyles("dark", {
+    backgroundColor: o(r.variant, a[800]),
+    color: s(r.variant, a[100], a[500]),
+    borderColor: r.variant === "outlined" ? a[800] : "transparent",
     "&:hover": {
-      backgroundColor: a(r.variant, o[900]),
-      color: t(r.variant, o[50], o[600]),
-      borderColor: r.variant === "outlined" ? o[900] : "transparent"
+      backgroundColor: o(r.variant, a[900]),
+      color: s(r.variant, a[50], a[600]),
+      borderColor: r.variant === "outlined" ? a[900] : "transparent"
     },
     "&:active": { filter: "brightness(1.1)" },
     "&.Mui-disabled": {
-      backgroundColor: a(r.variant, o[800]),
-      color: o[100],
-      borderColor: r.variant === "outlined" ? o[900] : "transparent",
+      backgroundColor: o(r.variant, a[800]),
+      color: a[100],
+      borderColor: r.variant === "outlined" ? a[900] : "transparent",
       opacity: 0.5
     },
     "&.MuiButton-loading": {
+      color: s(r.variant, a[100], a[500]),
       "& .MuiButton-loadingIndicator": {
-        color: o[100]
+        color: s(r.variant, a[100], a[500])
       }
     }
   })
@@ -47,9 +49,9 @@ const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n
     variant: "contained"
   },
   styleOverrides: {
-    root: ({ theme: n, ownerState: r }) => ({
+    root: ({ theme: i, ownerState: r }) => ({
       boxShadow: "none",
-      borderRadius: (n.vars || n).shape.borderRadius,
+      borderRadius: (i.vars || i).shape.borderRadius,
       textTransform: "none",
       transition: "all 0.2s ease-in-out",
       variants: [
@@ -85,7 +87,7 @@ const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n
             color: "primary"
           },
           style: {
-            ...s(n, r, e, u)
+            ...t(i, r, c, u)
           }
         },
         {
@@ -93,7 +95,7 @@ const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n
             color: "secondary"
           },
           style: {
-            ...s(n, r, p, l)
+            ...t(i, r, e, p)
           }
         },
         {
@@ -101,7 +103,7 @@ const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n
             color: "success"
           },
           style: {
-            ...s(n, r, d, c)
+            ...t(i, r, d, l)
           }
         },
         {
@@ -109,7 +111,7 @@ const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n
             color: "error"
           },
           style: {
-            ...s(n, r, b, v)
+            ...t(i, r, b, v)
           }
         },
         {
@@ -117,7 +119,7 @@ const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n
             color: "info"
           },
           style: {
-            ...s(n, r, y, g)
+            ...t(i, r, g, y)
           }
         },
         {
@@ -125,7 +127,7 @@ const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n
             color: "warning"
           },
           style: {
-            ...s(n, r, B, f)
+            ...t(i, r, B, f)
           }
         }
       ]

package/package.json

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