@solostylist/ui-kit 1.0.118 → 1.0.119

package/dist/theme/components/chip.js

@@ -1,17 +1,38 @@
-import { j as $ } from "../../jsx-runtime-OVHDjVDe.js";
-import { chipClasses as o } from "@mui/material";
-import { gray as r, lightGray as a, brand as c, lightBrand as e, purple as p, lightPurple as d, green as b, lightGreen as n, red as s, lightRed as i, orange as y, lightOrange as t, blue as g, lightBlue as C } from "../theme-primitives.js";
-import { C as u } from "../../Close-DlTC3goO.js";
-const h = {
+import { j as p } from "../../jsx-runtime-OVHDjVDe.js";
+import { chipClasses as l } from "@mui/material";
+import { gray as a, lightGray as i, brand as t, lightBrand as n, purple as c, lightPurple as d, green as y, lightGreen as g, red as u, lightRed as b, orange as f, lightOrange as m, blue as x, lightBlue as $ } from "../theme-primitives.js";
+import { C } from "../../Close-DlTC3goO.js";
+const o = (r, e, s) => ({
+  ...r.applyStyles("light", {
+    borderColor: e[700],
+    backgroundColor: e[800],
+    [`& .${l.label}`]: {
+      color: e[200]
+    },
+    [`& .${l.icon}`]: {
+      color: e[300]
+    }
+  }),
+  ...r.applyStyles("dark", {
+    borderColor: s[700],
+    backgroundColor: s[800],
+    [`& .${l.label}`]: {
+      color: s[200]
+    },
+    [`& .${l.icon}`]: {
+      color: s[300]
+    }
+  })
+}), h = {
   defaultProps: {
     size: "small",
-    deleteIcon: /* @__PURE__ */ $.jsx(u, {})
+    deleteIcon: /* @__PURE__ */ p.jsx(C, {})
   },
   styleOverrides: {
-    root: ({ theme: l }) => ({
+    root: ({ theme: r }) => ({
       border: "1px solid",
       borderRadius: "999px",
-      [`& .${o.label}`]: {
+      [`& .${l.label}`]: {
         fontWeight: 500
       },
       variants: [
@@ -20,26 +41,7 @@ const h = {
             color: "default"
           },
           style: {
-            ...l.applyStyles("light", {
-              borderColor: a[700],
-              backgroundColor: a[800],
-              [`& .${o.label}`]: {
-                color: a[200]
-              },
-              [`& .${o.icon}`]: {
-                color: a[300]
-              }
-            }),
-            ...l.applyStyles("dark", {
-              borderColor: r[700],
-              backgroundColor: r[800],
-              [`& .${o.label}`]: {
-                color: r[200]
-              },
-              [`& .${o.icon}`]: {
-                color: r[300]
-              }
-            })
+            ...o(r, i, a)
           }
         },
         {
@@ -47,26 +49,7 @@ const h = {
             color: "primary"
           },
           style: {
-            ...l.applyStyles("light", {
-              borderColor: e[700],
-              backgroundColor: e[800],
-              [`& .${o.label}`]: {
-                color: e[200]
-              },
-              [`& .${o.icon}`]: {
-                color: e[300]
-              }
-            }),
-            ...l.applyStyles("dark", {
-              borderColor: c[700],
-              backgroundColor: c[800],
-              [`& .${o.label}`]: {
-                color: c[200]
-              },
-              [`& .${o.icon}`]: {
-                color: c[300]
-              }
-            })
+            ...o(r, n, t)
           }
         },
         {
@@ -74,26 +57,7 @@ const h = {
             color: "secondary"
           },
           style: {
-            ...l.applyStyles("light", {
-              borderColor: d[700],
-              backgroundColor: d[800],
-              [`& .${o.label}`]: {
-                color: d[200]
-              },
-              [`& .${o.icon}`]: {
-                color: d[300]
-              }
-            }),
-            ...l.applyStyles("dark", {
-              borderColor: p[700],
-              backgroundColor: p[800],
-              [`& .${o.label}`]: {
-                color: p[200]
-              },
-              [`& .${o.icon}`]: {
-                color: p[300]
-              }
-            })
+            ...o(r, d, c)
           }
         },
         {
@@ -101,26 +65,7 @@ const h = {
             color: "success"
           },
           style: {
-            ...l.applyStyles("light", {
-              borderColor: n[700],
-              backgroundColor: n[800],
-              [`& .${o.label}`]: {
-                color: n[200]
-              },
-              [`& .${o.icon}`]: {
-                color: n[300]
-              }
-            }),
-            ...l.applyStyles("dark", {
-              borderColor: b[700],
-              backgroundColor: b[800],
-              [`& .${o.label}`]: {
-                color: b[200]
-              },
-              [`& .${o.icon}`]: {
-                color: b[300]
-              }
-            })
+            ...o(r, g, y)
           }
         },
         {
@@ -128,26 +73,7 @@ const h = {
             color: "error"
           },
           style: {
-            ...l.applyStyles("light", {
-              borderColor: i[700],
-              backgroundColor: i[800],
-              [`& .${o.label}`]: {
-                color: i[200]
-              },
-              [`& .${o.icon}`]: {
-                color: i[300]
-              }
-            }),
-            ...l.applyStyles("dark", {
-              borderColor: s[700],
-              backgroundColor: s[800],
-              [`& .${o.label}`]: {
-                color: s[200]
-              },
-              [`& .${o.icon}`]: {
-                color: s[300]
-              }
-            })
+            ...o(r, b, u)
           }
         },
         {
@@ -155,26 +81,7 @@ const h = {
             color: "warning"
           },
           style: {
-            ...l.applyStyles("light", {
-              borderColor: t[700],
-              backgroundColor: t[800],
-              [`& .${o.label}`]: {
-                color: t[200]
-              },
-              [`& .${o.icon}`]: {
-                color: t[300]
-              }
-            }),
-            ...l.applyStyles("dark", {
-              borderColor: y[800],
-              backgroundColor: y[900],
-              [`& .${o.label}`]: {
-                color: y[200]
-              },
-              [`& .${o.icon}`]: {
-                color: y[300]
-              }
-            })
+            ...o(r, m, f)
           }
         },
         {
@@ -182,47 +89,18 @@ const h = {
             color: "info"
           },
           style: {
-            ...l.applyStyles("light", {
-              borderColor: C[700],
-              backgroundColor: C[800],
-              [`& .${o.label}`]: {
-                color: C[200]
-              },
-              [`& .${o.icon}`]: {
-                color: C[300]
-              }
-            }),
-            ...l.applyStyles("dark", {
-              borderColor: g[700],
-              backgroundColor: g[800],
-              [`& .${o.label}`]: {
-                color: g[200]
-              },
-              [`& .${o.icon}`]: {
-                color: g[300]
-              }
-            })
+            ...o(r, $, x)
           }
         },
         {
           props: { color: "premium" },
           style: {
-            ...l.applyStyles("dark", {
-              borderColor: r[700],
-              backgroundColor: "linear-gradient(90deg, #18181b 0%, #27272a 100%)",
-              [`& .${o.label}`]: {
-                color: r[200]
-              },
-              [`& .${o.icon}`]: {
-                color: r[300]
-              }
-            })
+            border: "none"
           }
         }
       ]
     }),
-    labelSmall: { paddingInline: 12 },
-    colorSecondary: { color: r[500], backgroundColor: r[100] }
+    labelSmall: { paddingInline: 12 }
   }
 };
 export {

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

@@ -12,6 +12,7 @@ export declare const MuiPopover: {
             borderRadius: string | number;
             marginTop: number;
             border: string;
+            borderColor: string;
         };
     };
 };

package/dist/theme/components/popover.js

@@ -1,13 +1,14 @@
-const e = {
+const o = {
   defaultProps: { elevation: 0 },
   styleOverrides: {
     paper: ({ theme: r }) => ({
       borderRadius: (r.vars || r).shape.borderRadius,
       marginTop: 4,
-      border: "1px solid var(--s-palette-divider)"
+      border: "1px solid",
+      borderColor: (r.vars || r).palette.divider
     })
   }
 };
 export {
-  e as MuiPopover
+  o as MuiPopover
 };

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

@@ -1,19 +1,29 @@
+import { Theme } from '../types';
 export declare const MuiTooltip: {
     defaultProps: {
         placement: "top";
         arrow: true;
     };
     styleOverrides: {
-        tooltip: {
-            backgroundColor: "var(--s-palette-background-default)";
+        tooltip: ({ theme }: import('@mui/material').TooltipProps & Record<string, unknown> & {
+            ownerState: import('@mui/material').TooltipProps & Record<string, unknown>;
+        } & {
+            theme: Theme;
+        }) => {
+            backgroundColor: any;
             border: string;
-            color: "var(--s-palette-text-primary)";
+            borderColor: any;
+            color: any;
         };
-        arrow: {
-            color: "var(--s-palette-background-default)";
+        arrow: ({ theme }: import('@mui/material').TooltipProps & Record<string, unknown> & {
+            ownerState: import('@mui/material').TooltipProps & Record<string, unknown>;
+        } & {
+            theme: Theme;
+        }) => {
+            color: any;
             '&::before': {
                 border: string;
-                borderColor: string;
+                borderColor: any;
             };
         };
     };

package/dist/theme/components/tooltip.js

@@ -1,23 +1,24 @@
-const r = {
+const o = {
   defaultProps: {
     placement: "top",
     arrow: !0
   },
   styleOverrides: {
-    tooltip: {
-      backgroundColor: "var(--s-palette-background-default)",
-      border: "1px solid var(--s-palette-divider)",
-      color: "var(--s-palette-text-primary)"
-    },
-    arrow: {
-      color: "var(--s-palette-background-default)",
+    tooltip: ({ theme: r }) => ({
+      backgroundColor: (r.vars || r).palette.background.default,
+      border: "1px solid",
+      borderColor: (r.vars || r).palette.divider,
+      color: (r.vars || r).palette.text.primary
+    }),
+    arrow: ({ theme: r }) => ({
+      color: (r.vars || r).palette.background.default,
       "&::before": {
         border: "1px solid",
-        borderColor: "var(--s-palette-divider)"
+        borderColor: (r.vars || r).palette.divider
       }
-    }
+    })
   }
 };
 export {
-  r as MuiTooltip
+  o as MuiTooltip
 };

package/dist/theme/customizations/data-display.js

@@ -1,7 +1,7 @@
-import { i as e } from "../../iconButtonClasses-qz3jor3M.js";
-import { b as r } from "../../buttonBaseClasses-jCihfot4.js";
+import { i as r } from "../../iconButtonClasses-qz3jor3M.js";
+import { b as a } from "../../buttonBaseClasses-jCihfot4.js";
 import { s as i } from "../../svgIconClasses-CBCi8U9g.js";
-import { t as a } from "../../typographyClasses-C7fhAsUD.js";
+import { t as e } from "../../typographyClasses-C7fhAsUD.js";
 import { a as t } from "../../colorManipulator-ep5lERxB.js";
 const y = {
   MuiList: {
@@ -22,10 +22,10 @@ const y = {
           height: "1rem",
           color: (o.vars || o).palette.text.secondary
         },
-        [`& .${a.root}`]: {
+        [`& .${e.root}`]: {
           fontWeight: 500
         },
-        [`& .${r.root}`]: {
+        [`& .${a.root}`]: {
           display: "flex",
           gap: 8,
           padding: "2px 8px",
@@ -33,15 +33,15 @@ const y = {
           opacity: 0.7,
           "&.Mui-selected": {
             opacity: 1,
-            backgroundColor: t(o.palette.action.selected, 0.3),
+            backgroundColor: t((o.vars || o).palette.action.selected, 0.3),
             [`& .${i.root}`]: {
               color: (o.vars || o).palette.text.primary
             },
             "&:focus-visible": {
-              backgroundColor: t(o.palette.action.selected, 0.3)
+              backgroundColor: t((o.vars || o).palette.action.selected, 0.3)
             },
             "&:hover": {
-              backgroundColor: t(o.palette.action.selected, 0.5)
+              backgroundColor: t((o.vars || o).palette.action.selected, 0.5)
             }
           },
           "&:focus-visible": {
@@ -88,7 +88,7 @@ const y = {
         display: "flex",
         gap: 8,
         marginRight: 6,
-        [`& .${e.root}`]: {
+        [`& .${r.root}`]: {
           minWidth: 0,
           width: 36,
           height: 36

package/dist/theme/customizations/inputs.js

@@ -18,14 +18,6 @@ const u = l(/* @__PURE__ */ i.jsx("path", {
       disableRipple: !0
     },
     styleOverrides: {
-      // root: ({ theme }) => ({
-      //   boxSizing: 'border-box',
-      //   transition: 'all 100ms ease-in',
-      //   '&:focus-visible': {
-      //     outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-      //     outlineOffset: '2px',
-      //   },
-      // }),
       root: {
         boxSizing: "border-box",
         transition: "all 100ms ease-in"
@@ -35,7 +27,7 @@ const u = l(/* @__PURE__ */ i.jsx("path", {
   MuiIconButton: {
     styleOverrides: {
       root: ({ theme: o }) => ({
-        color: "var(--s-palette-text-primary)",
+        color: "inherit",
         boxShadow: "none",
         textTransform: "none",
         fontWeight: o.typography.fontWeightMedium,
@@ -193,10 +185,11 @@ const u = l(/* @__PURE__ */ i.jsx("path", {
   },
   MuiAutocomplete: {
     styleOverrides: {
-      paper: {
+      paper: ({ theme: o }) => ({
         marginTop: 2,
-        border: "1px solid var(--s-palette-divider)"
-      },
+        border: "1px solid",
+        borderColor: (o.vars || o).palette.divider
+      }),
       popupIndicator: {
         background: "none",
         "&:hover": {

package/dist/theme/customizations/surfaces.js

@@ -1,6 +1,6 @@
-import { gray as o } from "../theme-primitives.js";
-import { a as d } from "../../colorManipulator-ep5lERxB.js";
-const e = {
+import { gray as o, lightGray as d } from "../theme-primitives.js";
+import { a as s } from "../../colorManipulator-ep5lERxB.js";
+const t = {
   MuiAccordion: {
     styleOverrides: {
       root: ({ theme: r, ownerState: a }) => ({
@@ -58,7 +58,7 @@ const e = {
       root: ({ theme: r }) => ({
         gap: 16,
         transition: "all 100ms ease",
-        backgroundColor: o[50],
+        backgroundColor: d[100],
         borderRadius: (r.vars || r).shape.borderRadius,
         border: `1px solid ${(r.vars || r).palette.divider}`,
         boxShadow: "none",
@@ -75,7 +75,7 @@ const e = {
               boxShadow: "none",
               background: "rgb(255, 255, 255)",
               ...r.applyStyles("dark", {
-                background: d(o[900], 0.4)
+                background: s(o[900], 0.4)
               })
             }
           }
@@ -107,5 +107,5 @@ const e = {
   }
 };
 export {
-  e as surfacesCustomizations
+  t as surfacesCustomizations
 };

package/dist/theme/theme-primitives.d.ts

@@ -23,6 +23,26 @@ declare module '@mui/material/styles' {
     }
     interface Palette {
         baseShadow: string;
+        blackAlpha: {
+            zero: string;
+            light: string;
+            medium: string;
+            dark: string;
+            full: string;
+        };
+        whiteAlpha: {
+            zero: string;
+            light: string;
+            medium: string;
+            dark: string;
+            full: string;
+        };
+        gradient: {
+            primary: string;
+            secondary: string;
+            indigo: string;
+            sky: string;
+        };
         ui: {
             pulse: {
                 shadowLight: string;
@@ -308,21 +328,14 @@ export declare const colorSchemes: {
             background: {
                 default: string;
                 paper: string;
-                surface: string;
-                elevated: string;
             };
             text: {
                 primary: string;
                 secondary: string;
-                tertiary: string;
-                disabled: string;
             };
             action: {
                 hover: string;
                 selected: string;
-                disabled: string;
-                disabledBackground: string;
-                focus: string;
             };
             baseShadow: string;
         };