@solostylist/ui-kit 1.0.172 → 1.0.174

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

@@ -1,42 +1,83 @@
-import { j as d } from "../jsx-runtime-OVHDjVDe.js";
-import * as e from "react";
-import { gray as l } from "../theme/theme-primitives.js";
-import '../assets/stripe-input.css';const m = e.forwardRef(function(i, n) {
-  const { component: s, options: a, ...t } = i, [o, p] = e.useState(null);
-  return e.useImperativeHandle(
-    n,
+import { j as h } from "../jsx-runtime-OVHDjVDe.js";
+import * as o from "react";
+import '../assets/stripe-input.css';const y = {
+  dark: {
+    text: "#ffffff",
+    // rgb(255, 255, 255) - palette.text.primary
+    textSecondary: "#94a0b8",
+    // hsl(220, 20%, 65%) - palette.text.secondary
+    placeholder: "#333b4d99",
+    // hsl(220, 20%, 35%) - palette.divider
+    error: "#910808"
+    // hsl(0, 90%, 30%) - palette.error.main
+  },
+  light: {
+    text: "#202124",
+    // rgb(32, 33, 36) - palette.text.primary
+    textSecondary: "#5e6B78",
+    // hsl(210, 12%, 42%) - palette.text.secondary
+    placeholder: "#c1c7cde6",
+    // hsl(210, 9%, 65%) - palette.divider
+    error: "#f50a1a"
+    // hsl(356, 92%, 50%) - palette.error.main
+  }
+};
+function S() {
+  return typeof window > "u" ? "dark" : document.documentElement.getAttribute("data-mui-color-scheme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+}
+function c() {
+  return y[S()];
+}
+function d(t, n) {
+  return {
+    base: {
+      fontFamily: "Outfit, sans-serif",
+      lineHeight: "1.5",
+      color: n ? t.textSecondary : t.text,
+      "::placeholder": {
+        color: t.placeholder
+      }
+    },
+    invalid: {
+      color: t.error
+    }
+  };
+}
+const g = o.forwardRef(function(n, u) {
+  const { component: l, options: p, ...r } = n, [e, m] = o.useState(null);
+  o.useImperativeHandle(
+    u,
     () => ({
-      focus: () => o.focus()
+      focus: () => e == null ? void 0 : e.focus()
     }),
-    [o]
-  ), /* @__PURE__ */ d.jsx(
-    s,
+    [e]
+  ), o.useEffect(() => {
+    if (!e) return;
+    const b = () => {
+      const a = c();
+      e.update({
+        style: d(a, r.disabled)
+      });
+    }, s = new MutationObserver((a) => {
+      for (const i of a)
+        if (i.attributeName === "data-mui-color-scheme" || i.attributeName === "class" || i.attributeName === "style") {
+          requestAnimationFrame(b);
+          break;
+        }
+    });
+    return s.observe(document.documentElement, { attributes: !0 }), () => s.disconnect();
+  }, [e, r.disabled]);
+  const f = c();
+  return /* @__PURE__ */ h.jsx(
+    l,
     {
-      onReady: p,
+      onReady: m,
       options: {
-        ...a,
-        style: {
-          base: {
-            fontFamily: "Outfit, sans-serif",
-            lineHeight: "1.5",
-            color: "rgb(255, 255, 255)",
-            ...t.disabled && {
-              color: "rgba(255, 255, 255, 0.5)"
-              // for disabled state
-            },
-            "&::placeholder": {
-              color: l[600],
-              ...t.disabled && {
-                color: "rgba(255, 255, 255, 0.5)"
-                // for disabled state
-              }
-            }
-          }
-        },
-        disabled: t.disabled
-        // Pass through the disabled state to Stripe Element
+        ...p,
+        style: d(f, r.disabled),
+        disabled: r.disabled
       },
-      ...t
+      ...r
     }
   );
 });
@@ -45,5 +86,5 @@ try {
 } catch {
 }
 export {
-  m as default
+  g as default
 };

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

@@ -60,7 +60,7 @@ const r = ({
             "& table": { cursor: "col-resize" }
           },
           "& .is-editor-empty:before": {
-            color: "text.secondary",
+            color: "divider",
             content: "attr(data-placeholder)",
             float: "left",
             height: 0,

package/dist/s-theme-provider/s-theme-provider.js

@@ -57,11 +57,11 @@ const o = ({
 };
 o.displayName = "SThemeProvider";
 try {
-  o.displayName = "SThemeProvider", o.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "SThemeProvider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"system"' }, { value: '"light"' }, { value: '"dark"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
+  o.displayName = "SThemeProvider", o.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "SThemeProvider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"light"' }, { value: '"dark"' }, { value: '"system"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
 } catch {
 }
 try {
-  sthemeprovider.displayName = "sthemeprovider", sthemeprovider.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "sthemeprovider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"system"' }, { value: '"light"' }, { value: '"dark"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
+  sthemeprovider.displayName = "sthemeprovider", sthemeprovider.__docgenInfo = { description: "Central theme provider for the design system.", displayName: "sthemeprovider", props: { children: { defaultValue: null, description: "Child components to receive theme context", name: "children", required: !0, type: { name: "ReactNode" } }, disableCustomTheme: { defaultValue: null, description: "Disable custom theme for testing/docs (falls back to no theme)", name: "disableCustomTheme", required: !1, type: { name: "boolean" } }, themeComponents: { defaultValue: null, description: "Additional theme component overrides", name: "themeComponents", required: !1, type: { name: 'Components<Omit<Theme, "components">>' } }, defaultMode: { defaultValue: { value: "system" }, description: "Default color mode (defaults to 'system')", name: "defaultMode", required: !1, type: { name: "enum", value: [{ value: '"light"' }, { value: '"dark"' }, { value: '"system"' }] } }, theme: { defaultValue: null, description: "Custom theme object to merge with internal theme", name: "theme", required: !1, type: { name: "Theme" } } } };
 } catch {
 }
 export {

package/dist/s-theme-switch/s-theme-switch.js

@@ -37,7 +37,7 @@ const M = m(/* @__PURE__ */ e.jsx("path", {
   return /* @__PURE__ */ e.jsx(w, { ref: n, onClick: h, sx: d, children: u ? /* @__PURE__ */ e.jsx(v, {}) : /* @__PURE__ */ e.jsx(M, {}) });
 };
 try {
-  sthemeswitch.displayName = "sthemeswitch", sthemeswitch.__docgenInfo = { description: "", displayName: "sthemeswitch", props: { mode: { defaultValue: null, description: "", name: "mode", required: !1, type: { name: "enum", value: [{ value: '"system"' }, { value: '"light"' }, { value: '"dark"' }] } }, setMode: { defaultValue: null, description: "", name: "setMode", required: !1, type: { name: "((mode: SThemeMode) => void)" } }, sx: { defaultValue: null, description: "", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
+  sthemeswitch.displayName = "sthemeswitch", sthemeswitch.__docgenInfo = { description: "", displayName: "sthemeswitch", props: { mode: { defaultValue: null, description: "", name: "mode", required: !1, type: { name: "enum", value: [{ value: '"light"' }, { value: '"dark"' }, { value: '"system"' }] } }, setMode: { defaultValue: null, description: "", name: "setMode", required: !1, type: { name: "((mode: SThemeMode) => void)" } }, sx: { defaultValue: null, description: "", name: "sx", required: !1, type: { name: "SxProps<Theme>" } } } };
 } catch {
 }
 export {

package/dist/s-zoom-image/index.js

@@ -1,6 +1,6 @@
 import { SZoomImage as r } from "./s-zoom-image.js";
 try {
-  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
+  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
 } catch {
 }
 try {

package/dist/s-zoom-image/s-zoom-image.js

@@ -84,11 +84,11 @@ const o = L.forwardRef(
 );
 o.displayName = "SZoomImage";
 try {
-  o.displayName = "SZoomImage", o.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "SZoomImage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
+  o.displayName = "SZoomImage", o.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "SZoomImage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
 } catch {
 }
 try {
-  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
+  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
 } catch {
 }
 export {

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

@@ -1016,6 +1016,7 @@ export declare const MuiButton: {
                         backgroundColor: string;
                         color: string;
                         borderColor: string;
+                        opacity: number;
                     };
                     '&.MuiButton-loading': {
                         '& .MuiButton-loadingIndicator': {
@@ -1998,6 +1999,7 @@ export declare const MuiButton: {
                         backgroundColor: string;
                         color: string;
                         borderColor: string;
+                        opacity: number;
                     };
                     '&.MuiButton-loading': {
                         '& .MuiButton-loadingIndicator': {
@@ -2980,6 +2982,7 @@ export declare const MuiButton: {
                         backgroundColor: string;
                         color: string;
                         borderColor: string;
+                        opacity: number;
                     };
                     '&.MuiButton-loading': {
                         '& .MuiButton-loadingIndicator': {
@@ -3962,6 +3965,7 @@ export declare const MuiButton: {
                         backgroundColor: string;
                         color: string;
                         borderColor: string;
+                        opacity: number;
                     };
                     '&.MuiButton-loading': {
                         '& .MuiButton-loadingIndicator': {
@@ -4944,6 +4948,7 @@ export declare const MuiButton: {
                         backgroundColor: string;
                         color: string;
                         borderColor: string;
+                        opacity: number;
                     };
                     '&.MuiButton-loading': {
                         '& .MuiButton-loadingIndicator': {
@@ -5926,6 +5931,7 @@ export declare const MuiButton: {
                         backgroundColor: string;
                         color: string;
                         borderColor: string;
+                        opacity: number;
                     };
                     '&.MuiButton-loading': {
                         '& .MuiButton-loadingIndicator': {

package/dist/theme/components/button.js

@@ -1,4 +1,4 @@
-import { brand as u, lightBrand as e, purple as l, lightPurple as p, green as d, lightGreen as c, red as v, lightRed as b, blue as g, lightBlue as y, orange as f, lightOrange as B } from "../theme-primitives.js";
+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]),
@@ -11,12 +11,13 @@ const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n
   "&:active": { filter: "brightness(1.1)" },
   "&.Mui-disabled": {
     backgroundColor: a(r.variant, i[700]),
-    color: i[900],
-    borderColor: r.variant === "outlined" ? i[900] : "transparent"
+    color: i[50],
+    borderColor: r.variant === "outlined" ? i[900] : "transparent",
+    opacity: 0.5
   },
   "&.MuiButton-loading": {
     "& .MuiButton-loadingIndicator": {
-      color: i[900]
+      color: i[50]
     }
   },
   ...n.applyStyles("dark", {
@@ -31,12 +32,13 @@ const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n
     "&:active": { filter: "brightness(1.1)" },
     "&.Mui-disabled": {
       backgroundColor: a(r.variant, o[800]),
-      color: o[900],
-      borderColor: r.variant === "outlined" ? o[900] : "transparent"
+      color: o[100],
+      borderColor: r.variant === "outlined" ? o[900] : "transparent",
+      opacity: 0.5
     },
     "&.MuiButton-loading": {
       "& .MuiButton-loadingIndicator": {
-        color: o[900]
+        color: o[100]
       }
     }
   })
@@ -99,7 +101,7 @@ const a = (n, r) => n === "text" || n === "outlined" ? "transparent" : r, t = (n
             color: "success"
           },
           style: {
-            ...s(n, r, c, d)
+            ...s(n, r, d, c)
           }
         },
         {

package/dist/theme/components/components.js

@@ -7,23 +7,25 @@ import { MuiContainer as p } from "./container.js";
 import { MuiFormControl as u } from "./form-control.js";
 import { MuiPopover as f } from "./popover.js";
 import { MuiRating as M } from "./rating.js";
-import { MuiSlider as n } from "./slider.js";
-import { MuiSvgIcon as e } from "./svg-icon.js";
-import { MuiTooltip as a } from "./tooltip.js";
-const x = {
+import { MuiSkeleton as n } from "./skeleton.js";
+import { MuiSlider as e } from "./slider.js";
+import { MuiSvgIcon as a } from "./svg-icon.js";
+import { MuiTooltip as l } from "./tooltip.js";
+const I = {
   MuiAvatar: r,
   MuiRating: M,
-  MuiSlider: n,
-  MuiSvgIcon: e,
+  MuiSlider: e,
+  MuiSvgIcon: a,
   MuiContainer: p,
   MuiBackdrop: i,
   MuiPopover: f,
   MuiFormControl: u,
   MuiChip: t,
   MuiButton: m,
-  MuiTooltip: a,
-  MuiAlert: o
+  MuiTooltip: l,
+  MuiAlert: o,
+  MuiSkeleton: n
 };
 export {
-  x as components
+  I as components
 };

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

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material';
+export declare const MuiSkeleton: Components<Theme>['MuiSkeleton'];

package/dist/theme/components/skeleton.js

@@ -0,0 +1,10 @@
+const r = {
+  styleOverrides: {
+    root: ({ theme: o }) => ({
+      backgroundColor: (o.vars || o).palette.divider
+    })
+  }
+};
+export {
+  r as MuiSkeleton
+};

package/dist/theme/customizations/inputs.js

@@ -2,7 +2,7 @@ import { j as i } from "../../jsx-runtime-OVHDjVDe.js";
 import { c as l } from "../../createSvgIcon-DxwgGAVe.js";
 import { brand as r, gray as e } from "../theme-primitives.js";
 import { o as p } from "../../outlinedInputClasses-DM19xjo3.js";
-import { g as d } from "../../generateUtilityClasses-BtVDwGrk.js";
+import { g as n } from "../../generateUtilityClasses-BtVDwGrk.js";
 import { s } from "../../svgIconClasses-CBCi8U9g.js";
 import { a as t } from "../../colorManipulator-ep5lERxB.js";
 const u = l(/* @__PURE__ */ i.jsx("path", {
@@ -11,7 +11,7 @@ const u = l(/* @__PURE__ */ i.jsx("path", {
   d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
 }), "CheckRounded"), b = l(/* @__PURE__ */ i.jsx("path", {
   d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1"
-}), "RemoveRounded"), g = d("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge", "fullWidth"]), n = d("MuiToggleButtonGroup", ["root", "selected", "horizontal", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical", "fullWidth", "firstButton", "lastButton", "middleButton"]), C = {
+}), "RemoveRounded"), g = n("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge", "fullWidth"]), d = n("MuiToggleButtonGroup", ["root", "selected", "horizontal", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical", "fullWidth", "firstButton", "lastButton", "middleButton"]), C = {
   MuiButtonBase: {
     defaultProps: {
       disableTouchRipple: !0,
@@ -90,11 +90,11 @@ const u = l(/* @__PURE__ */ i.jsx("path", {
       root: ({ theme: o }) => ({
         borderRadius: "10px",
         boxShadow: `0 4px 16px ${t(e[400], 0.2)}`,
-        [`& .${n.selected}`]: {
+        [`& .${d.selected}`]: {
           color: r[500]
         },
         ...o.applyStyles("dark", {
-          [`& .${n.selected}`]: {
+          [`& .${d.selected}`]: {
             color: "#fff"
           },
           boxShadow: `0 4px 16px ${t(r[700], 0.5)}`
@@ -175,12 +175,12 @@ const u = l(/* @__PURE__ */ i.jsx("path", {
       root: {
         border: "none"
       },
-      input: {
+      input: ({ theme: o }) => ({
         "&::placeholder": {
-          opacity: 0.7,
-          color: e[500]
+          opacity: 1,
+          color: (o.vars || o).palette.divider
         }
-      }
+      })
     }
   },
   MuiAutocomplete: {

package/dist/theme/theme-primitives.js

@@ -330,7 +330,7 @@ const s = m(), r = {
     },
     text: {
       primary: "rgb(32, 33, 36)",
-      secondary: a[500]
+      secondary: a[600]
     },
     action: {
       hover: e(a[300], 0.2),

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.172",
+  "version": "1.0.174",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",