@m4l/styles 0.0.10 → 0.0.11

package/index.js

@@ -1,7 +1,7 @@
-import { alpha as e, useTheme as S } from "@mui/material/styles";
+import { alpha as e, useTheme as F } from "@mui/material/styles";
 import { alpha as n } from "@mui/system";
-import { alpha as b } from "@mui/material";
-import { useResponsive as T } from "@m4l/graphics";
+import { alpha as M } from "@mui/material";
+import { useResponsive as $ } from "@m4l/graphics";
 function c(o, r) {
   return `linear-gradient(to bottom, ${o}, ${r})`;
 }
@@ -138,7 +138,7 @@ const t = {
     80: "#fff0",
     90: "#fff0"
   }
-}, $ = {
+}, A = {
   patronus: {
     4: e(t.patronusBlue[50], 0.04),
     12: e(t.patronusBlue[50], 0.12),
@@ -202,34 +202,34 @@ const t = {
     60: e(t.marbleLight[10], 0.6),
     72: e(t.marbleLight[10], 0.72)
   }
-}, M = {
+}, f = {
   lighter: t.patronusBlue[70],
   light: t.patronusBlue[60],
   main: t.patronusBlue[50],
   dark: t.patronusBlue[40],
   darker: t.patronusBlue[20],
   contrastText: t.marbleLight[10]
-}, A = {
+}, m = {
   lighter: "#fff0",
   light: "#fff0",
   main: "#fff0",
   dark: "#fff0",
   darker: "#fff0"
-}, f = {
+}, y = {
   lighter: "#fff0",
   light: "#fff0",
   main: t.crayonBlue[50],
   dark: "#fff0",
   darker: "#fff0",
   opacity: e(t.crayonBlue[50], 0.08)
-}, y = {
+}, v = {
   lighter: "#fff0",
   light: "#fff0",
   main: t.acidGreen[60],
   dark: "#fff0",
   darker: "#fff0",
   opacity: e(t.acidGreen[60], 0.08)
-}, v = {
+}, L = {
   lighter: "#fff0",
   light: "#fff0",
   main: t.middleYellow[60],
@@ -262,55 +262,55 @@ const t = {
   50048: e("#919EAB", 0.48),
   50056: e("#919EAB", 0.56),
   50080: e("#919EAB", 0.8)
-}, m = {
-  primary: c(M.light, M.main),
-  info: c(f.light, f.main),
-  success: c(y.light, y.main),
-  warning: c(v.light, v.main),
-  error: c(B.light, B.main)
 }, z = {
+  primary: c(f.light, f.main),
+  info: c(y.light, y.main),
+  success: c(v.light, v.main),
+  warning: c(L.light, L.main),
+  error: c(B.light, B.main)
+}, D = {
   violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
   blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
   green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
   yellow: ["#FFE700", "#FFEF5A", "#FFF7AE", "#FFF3D6"],
   red: ["#FF6C40", "#FF8F6D", "#FFBD98", "#FFF2D4"]
-}, D = {
+}, H = {
   normal: t.crayonBlue[50],
   hover: t.crayonBlue[70]
-}, H = {
+}, G = {
   normal: t.acidGreen[60],
   hover: t.acidGreen[70]
-}, G = {
+}, E = {
   normal: t.flameRed[40],
   hover: t.flameRed[60]
-}, E = {
+}, P = {
   normal: t.flameRed[60],
   hover: t.flameRed[70]
-}, P = {
+}, W = {
   default: e(t.coolGrey[50], 0.24),
   transition: e(t.coolGrey[50], 0.08)
 }, l = {
-  info: { ...D },
-  success: { ...H },
-  error: { ...G },
-  warning: { ...E },
-  skeleton: { ...P }
-}, C = {
+  info: { ...H },
+  success: { ...G },
+  error: { ...E },
+  warning: { ...P },
+  skeleton: { ...W }
+}, h = {
   common: { black: "#000", white: "#fff" },
-  primary: { ...M },
+  primary: { ...f },
   state: {
     ...l
   },
   patronus: { ...t },
-  opacity: { ...$ },
-  secondary: { ...A, contrastText: "#fff" },
-  info: { ...f, contrastText: "#fff" },
-  success: { ...y, contrastText: x[800] },
-  warning: { ...v, contrastText: x[800] },
+  opacity: { ...A },
+  secondary: { ...m, contrastText: "#fff" },
+  info: { ...y, contrastText: "#fff" },
+  success: { ...v, contrastText: x[800] },
+  warning: { ...L, contrastText: x[800] },
   error: { ...B, contrastText: "#fff" },
   grey: x,
-  gradients: m,
-  chart: z,
+  gradients: z,
+  chart: D,
   divider: x[50024],
   action: {
     hoverOpacity: 0.08,
@@ -318,7 +318,7 @@ const t = {
   }
 }, s = {
   light: {
-    ...C,
+    ...h,
     mode: "light",
     text: {
       primary: t.ashBlak[10],
@@ -334,7 +334,7 @@ const t = {
     grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
   },
   dark: {
-    ...C,
+    ...h,
     mode: "dark",
     text: {
       primary: t.marbleLight[30],
@@ -395,39 +395,39 @@ const t = {
     darker: t.blazeOrange[20],
     contrastText: t.marbleLight[10]
   }
-], h = g[0], W = g[1], q = g[2], N = g[3], j = g[4];
-function _(o) {
+], I = g[0], q = g[1], N = g[2], j = g[3], _ = g[4];
+function b(o) {
   try {
     return {
-      patronus: h,
-      turqui: W,
-      grass: q,
-      candy: N,
-      blaze: j
+      patronus: I,
+      turqui: q,
+      grass: N,
+      candy: j,
+      blaze: _
     }[o];
   } catch {
   }
-  return h;
+  return I;
 }
-const dt = (o, r) => {
+const V = (o, r) => {
   let a = {};
   switch (o) {
     case "patronus":
       a = {
         light: {
-          active12: n(t.patronusBlue[50], 0.12),
-          active: t.patronusBlue[50],
-          focus: t.patronusBlue[70],
-          hover: t.patronusBlue[60],
-          default: n(t.coolGrey[70], 0.12),
+          active12: n(t?.patronusBlue[50], 0.12),
+          active: t?.patronusBlue[50],
+          focus: t?.patronusBlue[70],
+          hover: t?.patronusBlue[60],
+          default: n(t?.coolGrey[70], 0.12),
           ...l
         },
         dark: {
-          active12: n(t.patronusBlue[50], 0.12),
-          active: t.patronusBlue[50],
-          focus: t.patronusBlue[30],
-          hover: t.patronusBlue[40],
-          default: n(t.marbleLight[10], 0.12),
+          active12: n(t?.patronusBlue[50], 0.12),
+          active: t?.patronusBlue[50],
+          focus: t?.patronusBlue[30],
+          hover: t?.patronusBlue[40],
+          default: n(t?.marbleLight[10], 0.12),
           ...l
         }
       };
@@ -435,19 +435,19 @@ const dt = (o, r) => {
     case "turqui":
       a = {
         light: {
-          active12: n(t.turquiBlue[50], 0.12),
-          active: t.turquiBlue[50],
-          focus: t.turquiBlue[70],
-          hover: t.turquiBlue[60],
-          default: n(t.coolGrey[70], 0.12),
+          active12: n(t?.turquiBlue[50], 0.12),
+          active: t?.turquiBlue[50],
+          focus: t?.turquiBlue[70],
+          hover: t?.turquiBlue[60],
+          default: n(t?.coolGrey[70], 0.12),
           ...l
         },
         dark: {
-          active12: n(t.turquiBlue[50], 0.12),
-          active: t.turquiBlue[50],
-          focus: t.turquiBlue[30],
-          hover: t.turquiBlue[40],
-          default: n(t.marbleLight[10], 0.12),
+          active12: n(t?.turquiBlue[50], 0.12),
+          active: t?.turquiBlue[50],
+          focus: t?.turquiBlue[30],
+          hover: t?.turquiBlue[40],
+          default: n(t?.marbleLight[10], 0.12),
           ...l
         }
       };
@@ -455,19 +455,19 @@ const dt = (o, r) => {
     case "grass":
       a = {
         light: {
-          active12: n(t.grassGreen[50], 0.12),
-          active: t.grassGreen[50],
-          focus: t.grassGreen[70],
-          hover: t.grassGreen[60],
-          default: n(t.coolGrey[70], 0.12),
+          active12: n(t?.grassGreen[50], 0.12),
+          active: t?.grassGreen[50],
+          focus: t?.grassGreen[70],
+          hover: t?.grassGreen[60],
+          default: n(t?.coolGrey[70], 0.12),
           ...l
         },
         dark: {
-          active12: n(t.grassGreen[50], 0.12),
-          active: t.grassGreen[50],
-          focus: t.grassGreen[30],
-          hover: t.grassGreen[40],
-          default: n(t.marbleLight[10], 0.12),
+          active12: n(t?.grassGreen[50], 0.12),
+          active: t?.grassGreen[50],
+          focus: t?.grassGreen[30],
+          hover: t?.grassGreen[40],
+          default: n(t?.marbleLight[10], 0.12),
           ...l
         }
       };
@@ -475,19 +475,19 @@ const dt = (o, r) => {
     case "candy":
       a = {
         light: {
-          active12: n(t.candyRed[50], 0.12),
-          active: t.candyRed[50],
-          focus: t.candyRed[70],
-          hover: t.candyRed[60],
-          default: n(t.coolGrey[70], 0.12),
+          active12: n(t?.candyRed[50], 0.12),
+          active: t?.candyRed[50],
+          focus: t?.candyRed[70],
+          hover: t?.candyRed[60],
+          default: n(t?.coolGrey[70], 0.12),
           ...l
         },
         dark: {
-          active12: n(t.candyRed[50], 0.12),
-          active: t.candyRed[50],
-          focus: t.candyRed[30],
-          hover: t.candyRed[40],
-          default: n(t.marbleLight[10], 0.12),
+          active12: n(t?.candyRed[50], 0.12),
+          active: t?.candyRed[50],
+          focus: t?.candyRed[30],
+          hover: t?.candyRed[40],
+          default: n(t?.marbleLight[10], 0.12),
           ...l
         }
       };
@@ -495,19 +495,19 @@ const dt = (o, r) => {
     case "blaze":
       a = {
         light: {
-          active12: n(t.blazeOrange[50], 0.12),
-          active: t.blazeOrange[50],
-          focus: t.blazeOrange[70],
-          hover: t.blazeOrange[60],
-          default: n(t.coolGrey[70], 0.12),
+          active12: n(t?.blazeOrange[50], 0.12),
+          active: t?.blazeOrange[50],
+          focus: t?.blazeOrange[70],
+          hover: t?.blazeOrange[60],
+          default: n(t?.coolGrey[70], 0.12),
           ...l
         },
         dark: {
-          active12: n(t.blazeOrange[50], 0.12),
-          active: t.blazeOrange[50],
-          focus: t.blazeOrange[30],
-          hover: t.blazeOrange[40],
-          default: n(t.marbleLight[10], 0.12),
+          active12: n(t?.blazeOrange[50], 0.12),
+          active: t?.blazeOrange[50],
+          focus: t?.blazeOrange[30],
+          hover: t?.blazeOrange[40],
+          default: n(t?.marbleLight[10], 0.12),
           ...l
         }
       };
@@ -515,19 +515,19 @@ const dt = (o, r) => {
     default:
       a = {
         light: {
-          active12: n(t.turquiBlue[50], 0.12),
-          active: t.turquiBlue[50],
-          focus: t.turquiBlue[70],
-          hover: t.turquiBlue[60],
-          default: n(t.coolGrey[70], 0.12),
+          active12: n(t?.turquiBlue[50], 0.12),
+          active: t?.turquiBlue[50],
+          focus: t?.turquiBlue[70],
+          hover: t?.turquiBlue[60],
+          default: n(t?.coolGrey[70], 0.12),
           ...l
         },
         dark: {
-          active12: n(t.turquiBlue[50], 0.12),
-          active: t.turquiBlue[50],
-          focus: t.turquiBlue[30],
-          hover: t.turquiBlue[40],
-          default: n(t.marbleLight[10], 0.12),
+          active12: n(t?.turquiBlue[50], 0.12),
+          active: t?.turquiBlue[50],
+          focus: t?.turquiBlue[30],
+          hover: t?.turquiBlue[40],
+          default: n(t?.marbleLight[10], 0.12),
           ...l
         }
       };
@@ -535,7 +535,7 @@ const dt = (o, r) => {
   }
   return r === "light" ? { ...a.light } : { ...a.dark };
 };
-function V(o) {
+function Y(o) {
   return Math.round(parseFloat(o) * 16);
 }
 function d(o) {
@@ -554,18 +554,18 @@ function p({ sm: o, md: r, lg: a }) {
     }
   };
 }
-function Y() {
-  return [...S().breakpoints.keys].reverse().reduce((a, i) => {
-    const L = T("up", i);
-    return !a && L ? i : a;
+function U() {
+  return [...F().breakpoints.keys].reverse().reduce((a, i) => {
+    const k = $("up", i);
+    return !a && k ? i : a;
   }, null) || "xs";
 }
 function st(o) {
-  const r = S(), a = Y(), i = r.breakpoints.up(a === "xl" ? "lg" : a), F = (o === "h1" || o === "h2" || o === "h3" || o === "h4" || o === "h5" || o === "h6") && r.typography[o][i] ? r.typography[o][i] : r.typography[o], k = V(F.fontSize), w = Number(r.typography[o].lineHeight) * k, { fontWeight: R, letterSpacing: O } = r.typography[o];
-  return { fontSize: k, lineHeight: w, fontWeight: R, letterSpacing: O };
+  const r = F(), a = U(), i = r.breakpoints.up(a === "xl" ? "lg" : a), w = (o === "h1" || o === "h2" || o === "h3" || o === "h4" || o === "h5" || o === "h6") && r.typography[o][i] ? r.typography[o][i] : r.typography[o], C = Y(w.fontSize), R = Number(r.typography[o].lineHeight) * C, { fontWeight: O, letterSpacing: T } = r.typography[o];
+  return { fontSize: C, lineHeight: R, fontWeight: O, letterSpacing: T };
 }
-const U = "Poppins, sans-serif", K = {
-  fontFamily: U,
+const K = "Poppins, sans-serif", J = {
+  fontFamily: K,
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
@@ -675,7 +675,7 @@ const U = "Poppins, sans-serif", K = {
     lineHeight: 1.667,
     ...p({ sm: 14, md: 12, lg: 12 })
   }
-}, J = s.light.grey[500], Q = "#000000", I = (o) => {
+}, Q = s.light.grey[500], X = "#000000", S = (o) => {
   const r = e(o, 0.2), a = e(o, 0.14), i = e(o, 0.12);
   return [
     "none",
@@ -704,7 +704,7 @@ const U = "Poppins, sans-serif", K = {
     `0px 11px 14px -7px ${r},0px 23px 36px 3px ${a},0px 9px 44px 8px ${i}`,
     `0px 11px 15px -7px ${r},0px 24px 38px 3px ${a},0px 9px 46px 8px ${i}`
   ];
-}, X = (o) => {
+}, Z = (o) => {
   const r = {
     info: `0px 2px 8px 0px ${e(t.patronusBlue[50], 0.2)}`,
     secondary: `0px 2px 8px 0px ${e(s.light.secondary.main, 0.24)}`,
@@ -734,23 +734,28 @@ const U = "Poppins, sans-serif", K = {
     z4: `0px 8px 16px 4px ${e(t.ashBlak[60], 0.4)}`,
     ...r
   };
-}, Z = {
-  light: I(J),
-  dark: I(Q)
+}, oo = {
+  light: S(Q),
+  dark: S(X)
 }, ut = {
-  typography: K,
-  palette: s.light,
+  typography: J,
+  palette: {
+    ...s.light,
+    primary: b("patronus"),
+    state: { ...V("patronus", "light") },
+    representative: b("patronus").light
+  },
   shape: { borderRadius: 8 },
-  shadows: Z.light,
+  direction: "rtl",
+  shadows: oo.light,
   customShadows: {
-    ...X("light"),
-    primary: `0 8px 16px 0 ${b(
-      _("patronus").main,
-      0.24
-    )}`
-  }
+    primary: `0 8px 16px 0 ${M(b("patronus").main, 0.2)}`,
+    ...Z("dark")
+  },
+  stretch: !0,
+  spacing: (o) => `${0.5 * o}rem`
 };
-function oo(o) {
+function to(o) {
   return {
     MuiAvatar: {
       styleOverrides: {
@@ -775,7 +780,7 @@ function oo(o) {
     }
   };
 }
-function to(o) {
+function eo(o) {
   return {
     MuiButton: {
       styleOverrides: {
@@ -828,7 +833,7 @@ function to(o) {
     }
   };
 }
-function eo(o) {
+function ro(o) {
   return {
     MuiIconButton: {
       styleOverrides: {
@@ -852,7 +857,7 @@ function eo(o) {
     }
   };
 }
-function ro(o) {
+function ao(o) {
   return console.log("test theme", o.palette), {
     MuiFab: {
       defaultProps: {
@@ -887,7 +892,7 @@ function ro(o) {
     }
   };
 }
-function ao(o) {
+function io(o) {
   return {
     MuiCard: {
       styleOverrides: {
@@ -919,7 +924,7 @@ function ao(o) {
     }
   };
 }
-function io(o) {
+function no(o) {
   return {
     MuiTabs: {
       styleOverrides: {
@@ -976,7 +981,7 @@ function io(o) {
     }
   };
 }
-function no(o) {
+function po(o) {
   return {
     MuiMenuItem: {
       styleOverrides: {
@@ -992,7 +997,7 @@ function no(o) {
     }
   };
 }
-function po(o) {
+function lo(o) {
   return {
     MuiLink: {
       defaultProps: {
@@ -1008,7 +1013,7 @@ function po(o) {
     }
   };
 }
-function lo(o) {
+function so(o) {
   return {
     MuiListItemIcon: {
       styleOverrides: {
@@ -1041,7 +1046,7 @@ function lo(o) {
     }
   };
 }
-function so(o) {
+function uo(o) {
   return {
     MuiTableRow: {
       styleOverrides: {
@@ -1127,7 +1132,7 @@ function so(o) {
     }
   };
 }
-function uo(o) {
+function co(o) {
   return {
     MuiBadge: {
       styleOverrides: {
@@ -1140,7 +1145,7 @@ function uo(o) {
     }
   };
 }
-function co(o) {
+function go(o) {
   return {
     MuiPaper: {
       defaultProps: {
@@ -1206,7 +1211,7 @@ function co(o) {
     }
   };
 }
-function go(o) {
+function xo(o) {
   return {
     MuiFormControl: {
       styleOverrides: {
@@ -1288,7 +1293,7 @@ function go(o) {
     }
   };
 }
-function xo(o) {
+function bo(o) {
   return {
     MuiInputLabel: {
       styleOverrides: {
@@ -1303,7 +1308,7 @@ function xo(o) {
     }
   };
 }
-function bo(o) {
+function Mo(o) {
   return {
     MuiRadio: {
       styleOverrides: {
@@ -1320,7 +1325,7 @@ function bo(o) {
     }
   };
 }
-function Mo(o) {
+function fo(o) {
   const r = o.palette.mode === "light";
   return {
     MuiDrawer: {
@@ -1608,13 +1613,13 @@ function Mo(o) {
         modal: {
           '&[role="presentation"]': {
             "& .MuiDrawer-paperAnchorLeft": {
-              boxShadow: `8px 24px 24px 12px ${b(
+              boxShadow: `8px 24px 24px 12px ${M(
                 o.palette.grey[900],
                 r ? 0.16 : 0.48
               )}`
             },
             "& .MuiDrawer-paperAnchorRight": {
-              boxShadow: `-8px 24px 24px 12px ${b(
+              boxShadow: `-8px 24px 24px 12px ${M(
                 o.palette.grey[900],
                 r ? 0.16 : 0.48
               )}`
@@ -1625,7 +1630,7 @@ function Mo(o) {
     }
   };
 }
-function fo(o) {
+function yo(o) {
   return {
     MuiDialog: {
       styleOverrides: {
@@ -1681,7 +1686,7 @@ function fo(o) {
     }
   };
 }
-function yo(o) {
+function vo(o) {
   const r = o.palette.mode === "light";
   return {
     MuiSlider: {
@@ -1706,7 +1711,7 @@ function yo(o) {
     }
   };
 }
-function vo(o) {
+function Lo(o) {
   const r = o.palette.mode === "light";
   return {
     MuiSwitch: {
@@ -1754,7 +1759,7 @@ function Bo(o) {
     }
   };
 }
-function Lo(o) {
+function ko(o) {
   const r = o.palette.mode === "light";
   return {
     MuiTooltip: {
@@ -1769,7 +1774,7 @@ function Lo(o) {
     }
   };
 }
-function ko(o) {
+function Co(o) {
   return {
     MuiPopover: {
       styleOverrides: {
@@ -1781,7 +1786,7 @@ function ko(o) {
     }
   };
 }
-function Co(o) {
+function ho(o) {
   return {
     MuiStepConnector: {
       styleOverrides: {
@@ -1792,7 +1797,7 @@ function Co(o) {
     }
   };
 }
-function ho(o) {
+function Io(o) {
   return {
     MuiDataGrid: {
       styleOverrides: {
@@ -1889,7 +1894,7 @@ function ho(o) {
     }
   };
 }
-function Io(o) {
+function So(o) {
   return {
     MuiSkeleton: {
       defaultProps: {
@@ -1903,7 +1908,7 @@ function Io(o) {
     }
   };
 }
-function So(o) {
+function Fo(o) {
   const r = e(o.palette.grey[900], 0.48), a = e(o.palette.grey[900], 1);
   return {
     MuiBackdrop: {
@@ -1923,7 +1928,7 @@ function So(o) {
     }
   };
 }
-function Fo(o) {
+function wo(o) {
   const r = o.palette.mode === "light";
   return {
     MuiLinearProgress: {
@@ -1945,7 +1950,7 @@ function Fo(o) {
     }
   };
 }
-function wo(o) {
+function Ro(o) {
   return {
     MuiTimelineDot: {
       styleOverrides: {
@@ -1963,7 +1968,7 @@ function wo(o) {
     }
   };
 }
-function Ro(o) {
+function Oo(o) {
   return {
     MuiCheckbox: {
       styleOverrides: {
@@ -1982,7 +1987,7 @@ function Ro(o) {
     }
   };
 }
-function Oo(o) {
+function To(o) {
   return {
     MuiAccordion: {
       styleOverrides: {
@@ -2057,7 +2062,7 @@ function Oo(o) {
     }
   };
 }
-function To(o) {
+function $o(o) {
   return {
     MuiTypography: {
       defaultProps: {
@@ -2076,7 +2081,7 @@ function To(o) {
     }
   };
 }
-function $o(o) {
+function Ao(o) {
   return {
     MuiPaginationItem: {
       styleOverrides: {
@@ -2110,7 +2115,7 @@ function $o(o) {
     }
   };
 }
-function Ao(o) {
+function mo(o) {
   return {
     MuiBreadcrumbs: {
       styleOverrides: {
@@ -2122,7 +2127,7 @@ function Ao(o) {
     }
   };
 }
-function mo(o) {
+function zo(o) {
   const r = (a) => ({
     props: { variant: "contained", color: a },
     style: { boxShadow: o.customShadows?.primary }
@@ -2164,7 +2169,7 @@ function mo(o) {
     }
   };
 }
-function zo(o) {
+function Do(o) {
   return {
     MuiCssBaseline: {
       styleOverrides: {
@@ -2207,7 +2212,7 @@ function zo(o) {
     }
   };
 }
-function Do(o) {
+function Ho(o) {
   return {
     MuiAutocomplete: {
       styleOverrides: {
@@ -2243,7 +2248,7 @@ const u = (o, r) => ({
     }
   }
 });
-function Ho(o) {
+function Go(o) {
   return {
     MuiToggleButton: {
       variants: [
@@ -2279,7 +2284,7 @@ function Ho(o) {
     }
   };
 }
-function Go(o) {
+function Eo(o) {
   return {
     MuiFormControlLabel: {
       styleOverrides: {
@@ -2304,7 +2309,7 @@ function Go(o) {
     }
   };
 }
-function Eo(o) {
+function Po(o) {
   return {
     MuiLoadingButton: {
       styleOverrides: {
@@ -2328,15 +2333,15 @@ function Eo(o) {
     }
   };
 }
-const Po = (o) => ({
+const Wo = (o) => ({
   M4LBruceTest: {
     styleOverrides: {}
   }
-}), Wo = (o) => ({
+}), qo = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {}
   }
-}), qo = (o) => ({
+}), No = (o) => ({
   M4LRHFTextFieldPassword: {
     styleOverrides: {
       "&.M4LRHFTextFieldPassword-root": {
@@ -2344,7 +2349,7 @@ const Po = (o) => ({
       }
     }
   }
-}), No = (o) => ({
+}), jo = (o) => ({
   M4LRHFTextField: {
     styleOverrides: {
       "&.M4LRHFTextField-root": {
@@ -2472,7 +2477,7 @@ const Po = (o) => ({
       }
     }
   }
-}), jo = (o) => ({
+}), _o = (o) => ({
   M4LIcon: {
     styleOverrides: {
       ["&.M4LIcon-root"]: {
@@ -2511,7 +2516,7 @@ const Po = (o) => ({
       }
     }
   }
-}), _o = (o) => ({
+}), Vo = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
@@ -2562,10 +2567,7 @@ const Po = (o) => ({
           borderRadius: "4px",
           padding: "0"
         },
-        ".MuiIconButton-root:hover": {
-          backgroundColor: "transparent"
-        },
-        "&.M4LIconButton-variantPrimary": {
+        "&.M4LIconButton-variantPrimary:not(&.M4LIconButton-isDisabled)": {
           backgroundColor: o.palette.state?.default,
           "&:hover": {
             backgroundColor: o.palette.state?.hover,
@@ -2582,13 +2584,19 @@ const Po = (o) => ({
           },
           "&.M4LIconButton-isFocus": {
             backgroundColor: o.palette.state?.active,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.patronus?.marbleLight[10]
+            },
             "&::before": {
               content: "''"
             }
           }
         },
-        "&.M4LIconButton-variantSecondary": {
+        "&.M4LIconButton-variantSecondary:not(&.M4LIconButton-isDisabled)": {
           borderColor: o.palette.text.secondary,
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.text.secondary
+          },
           "&:hover": {
             border: "1px solid",
             borderColor: o.palette.state?.focus,
@@ -2614,7 +2622,7 @@ const Po = (o) => ({
             }
           }
         },
-        "&.M4LIconButton-variantLine": {
+        "&.M4LIconButton-variantLine:not(&.M4LIconButton-isDisabled)": {
           "&:hover": {
             backgroundColor: o.palette.state?.active12,
             "& .M4LIcon-icon": {
@@ -2647,13 +2655,13 @@ const Po = (o) => ({
       }
     }
   }
-}), Vo = (o) => ({
+}), Yo = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {}
     }
   }
-}), Yo = (o) => ({
+}), Uo = (o) => ({
   M4LImageButton: {
     styleOverrides: {
       ["&.M4LImageButton-root"]: {
@@ -2695,7 +2703,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Uo = (o) => ({
+}), Ko = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
@@ -2732,7 +2740,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Ko = (o) => ({
+}), Jo = (o) => ({
   M4LPopover: {
     styleOverrides: {
       "&.M4LSideBar-popover": {
@@ -2795,7 +2803,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Jo = (o) => ({
+}), Qo = (o) => ({
   M4LRHFCheckbox: {
     styleOverrides: {
       "&.M4LRHFCheckbox-root": {
@@ -2858,7 +2866,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Qo = (o) => ({
+}), Xo = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
       ["&.M4LHelperText-root"]: {
@@ -2877,7 +2885,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Xo = (o) => ({
+}), Zo = (o) => ({
   M4LTypography: {
     styleOverrides: {
       ["&.M4LTypography-root"]: {
@@ -2889,7 +2897,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Zo = (o) => ({
+}), ot = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
@@ -3092,7 +3100,7 @@ const Po = (o) => ({
       }
     }
   }
-}), ot = (o) => ({
+}), tt = (o) => ({
   M4LRHFAutocomplete: {
     styleOverrides: {
       "&.M4LRHFAutocomplete-root": {
@@ -3223,7 +3231,7 @@ const Po = (o) => ({
       }
     }
   }
-}), tt = (o) => ({
+}), et = (o) => ({
   M4LRHFAutocompleteAsync: {
     styleOverrides: {
       "&.M4LRHFAutocompleteAsync-root": {
@@ -3231,7 +3239,7 @@ const Po = (o) => ({
       }
     }
   }
-}), et = (o) => ({
+}), rt = (o) => ({
   M4LoadingButton: {
     styleOverrides: {
       "&.M4LoadingButton-root": {
@@ -3448,7 +3456,7 @@ const Po = (o) => ({
       }
     }
   }
-}), rt = (o) => ({
+}), at = (o) => ({
   M4LNavLink: {
     styleOverrides: {
       ["&.M4LNavLink-root"]: {
@@ -3468,7 +3476,7 @@ const Po = (o) => ({
       }
     }
   }
-}), at = (o) => ({
+}), it = (o) => ({
   M4LSideBar: {
     styleOverrides: {
       "&.M4LSideBar-root": {
@@ -3764,64 +3772,64 @@ const Po = (o) => ({
 });
 function ct(o) {
   return Object.assign(
-    ro(o),
-    io(o),
     ao(o),
     no(o),
+    io(o),
     po(o),
-    go(o),
-    xo(),
-    bo(o),
-    uo(),
     lo(o),
+    xo(o),
+    bo(),
+    Mo(o),
+    co(),
     so(o),
-    co(o),
-    vo(o),
-    to(o),
+    uo(o),
+    go(o),
+    Lo(o),
     eo(o),
-    fo(o),
-    oo(o),
+    ro(o),
     yo(o),
-    Mo(o),
-    Co(o),
-    Lo(o),
+    to(o),
+    vo(o),
+    fo(o),
+    ho(o),
     ko(o),
+    Co(o),
     Bo(),
-    Ro(o),
-    ho(o),
+    Oo(o),
     Io(o),
-    wo(o),
     So(o),
+    Ro(o),
     Fo(o),
-    Oo(o),
+    wo(o),
     To(o),
     $o(o),
-    mo(o),
     Ao(o),
-    zo(),
-    Do(o),
-    Go(o),
+    zo(o),
+    mo(o),
+    Do(),
     Ho(o),
     Eo(o),
-    et(o),
-    Po(),
+    Go(o),
+    Po(o),
+    rt(o),
     Wo(),
-    No(o),
     qo(),
-    ot(o),
-    tt(),
     jo(o),
+    No(),
+    tt(o),
+    et(),
     _o(o),
-    Vo(),
-    Yo(o),
-    rt(o),
-    Uo(),
-    Ko(o),
+    Vo(o),
+    Yo(),
+    Uo(o),
+    at(o),
+    Ko(),
     Jo(o),
     Qo(o),
     Xo(o),
     Zo(o),
-    at(o)
+    ot(o),
+    it(o)
   );
 }
 const gt = {
@@ -3834,28 +3842,28 @@ const gt = {
   }
 }, xt = {
   mobile: 16,
-  desktop: 8
+  desktop: 16
 };
 export {
   t as PATRONUSCOLORS,
-  j as blaze,
-  N as candy,
+  _ as blaze,
+  j as candy,
   g as colorPresets,
-  X as createCustomShadows,
-  h as defaultPreset,
+  Z as createCustomShadows,
+  I as defaultPreset,
   ut as defaultThemeOptions,
   ct as fnComponentsOverrides,
-  _ as getColorPresets,
-  dt as getColorState,
+  b as getColorPresets,
+  V as getColorState,
   st as getFontValue,
   xt as globalRemSize,
-  q as grass,
+  N as grass,
   gt as muiBreakpointsValues,
   s as palette,
   d as pxToRem,
-  V as remToPx,
+  Y as remToPx,
   p as responsiveFontSizes,
-  Z as shadows,
-  W as turqui,
-  K as typography
+  oo as shadows,
+  q as turqui,
+  J as typography
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/graphics": "*",

package/theme/defaultThemeOptions.d.ts

@@ -1,2 +1,5 @@
-import { ThemeOptions } from '@mui/material';
-export declare const defaultThemeOptions: ThemeOptions;
+import { ThemeOptions } from '@mui/material/styles';
+export interface OverrridesThemeOptions extends Omit<ThemeOptions, 'typography'> {
+    typography: any;
+}
+export declare const defaultThemeOptions: OverrridesThemeOptions;

package/theme/overrides/M4LExtendedComponents/M4LIconButton.d.ts

@@ -50,10 +50,7 @@ export declare const M4LIconButton: (theme: Theme) => {
                     borderRadius: string;
                     padding: string;
                 };
-                '.MuiIconButton-root:hover': {
-                    backgroundColor: string;
-                };
-                '&.M4LIconButton-variantPrimary': {
+                '&.M4LIconButton-variantPrimary:not(&.M4LIconButton-isDisabled)': {
                     backgroundColor: string;
                     '&:hover': {
                         backgroundColor: string;
@@ -70,13 +67,19 @@ export declare const M4LIconButton: (theme: Theme) => {
                     };
                     '&.M4LIconButton-isFocus': {
                         backgroundColor: string;
+                        '& .M4LIcon-icon': {
+                            backgroundColor: string | undefined;
+                        };
                         '&::before': {
                             content: string;
                         };
                     };
                 };
-                '&.M4LIconButton-variantSecondary': {
+                '&.M4LIconButton-variantSecondary:not(&.M4LIconButton-isDisabled)': {
                     borderColor: string;
+                    '& .M4LIcon-icon': {
+                        backgroundColor: string;
+                    };
                     '&:hover': {
                         border: string;
                         borderColor: string;
@@ -102,7 +105,7 @@ export declare const M4LIconButton: (theme: Theme) => {
                         };
                     };
                 };
-                '&.M4LIconButton-variantLine': {
+                '&.M4LIconButton-variantLine:not(&.M4LIconButton-isDisabled)': {
                     '&:hover': {
                         backgroundColor: string;
                         '& .M4LIcon-icon': {

package/types/augmentations.d.ts

@@ -49,6 +49,9 @@ declare module '@mui/material/styles/createPalette' {
         gradients?: GradientsPaletteOptions;
         chart?: ChartPaletteOptions;
         grid?: GridPaletteOptions;
+        patronus?: PatronusConstantColors;
+        state: ColorStateOptions;
+        representative: string;
     }
 }
 
@@ -96,6 +99,7 @@ declare module '@mui/material/styles' {
         header: string;
         background: string;
     }
+
 }
 
 declare module '@mui/material/Typography' {