@m4l/styles 0.0.13 → 0.0.14

package/index.js

@@ -1,8 +1,19 @@
-import { alpha as e, useTheme as w } from "@mui/material/styles";
+import { useTheme as S, alpha as e } from "@mui/material/styles";
+import M from "@mui/material/useMediaQuery";
 import { alpha as n } from "@mui/system";
-import { alpha as M } from "@mui/material";
-import { useResponsive as T } from "@m4l/graphics";
-function c(o, r) {
+import { alpha as B } from "@mui/material";
+function $(o, r, a, i) {
+  const u = S(), f = M(u.breakpoints.up(r)), b = M(u.breakpoints.down(r)), v = M(u.breakpoints.between(a, i)), L = M(u.breakpoints.only(r));
+  if (o === "up")
+    return f;
+  if (o === "down")
+    return b;
+  if (o === "between")
+    return v;
+  if (o === "only")
+    return L;
+}
+function g(o, r) {
   return `linear-gradient(to bottom, ${o}, ${r})`;
 }
 const t = {
@@ -138,7 +149,7 @@ const t = {
     80: "#fff0",
     90: "#fff0"
   }
-}, $ = {
+}, D = {
   patronus: {
     4: e(t.patronusBlue[50], 0.04),
     12: e(t.patronusBlue[50], 0.12),
@@ -202,48 +213,48 @@ const t = {
     60: e(t.marbleLight[10], 0.6),
     72: e(t.marbleLight[10], 0.72)
   }
-}, y = {
+}, C = {
   lighter: t.patronusBlue[70],
   light: t.patronusBlue[60],
   main: t.patronusBlue[50],
   dark: t.patronusBlue[40],
   darker: t.patronusBlue[20],
   contrastText: t.marbleLight[10]
-}, D = {
+}, m = {
   lighter: "#fff0",
   light: "#fff0",
   main: "#fff0",
   dark: "#fff0",
   darker: "#fff0"
-}, f = {
+}, h = {
   lighter: "#fff0",
   light: "#fff0",
   main: t.crayonBlue[50],
   dark: "#fff0",
   darker: "#fff0",
   opacity: e(t.crayonBlue[50], 0.08)
-}, v = {
+}, F = {
   lighter: "#fff0",
   light: "#fff0",
   main: t.acidGreen[60],
   dark: "#fff0",
   darker: "#fff0",
   opacity: e(t.acidGreen[60], 0.08)
-}, L = {
+}, I = {
   lighter: "#fff0",
   light: "#fff0",
   main: t.middleYellow[60],
   dark: "#fff0",
   darker: "#fff0",
   opacity: e(t.middleYellow[60], 0.08)
-}, B = {
+}, w = {
   lighter: "#fff0",
   light: "#fff0",
   main: t.flameRed[40],
   dark: "#fff0",
   darker: "#fff0",
   opacity: e(t.flameRed[40], 0.08)
-}, x = {
+}, y = {
   0: "#FFFFFF",
   100: "#F9FAFB",
   200: "#F4F6F8",
@@ -262,63 +273,63 @@ const t = {
   50048: e("#919EAB", 0.48),
   50056: e("#919EAB", 0.56),
   50080: e("#919EAB", 0.8)
-}, m = {
-  primary: c(y.light, y.main),
-  info: c(f.light, f.main),
-  success: c(v.light, v.main),
-  warning: c(L.light, L.main),
-  error: c(B.light, B.main)
 }, z = {
+  primary: g(C.light, C.main),
+  info: g(h.light, h.main),
+  success: g(F.light, F.main),
+  warning: g(I.light, I.main),
+  error: g(w.light, w.main)
+}, H = {
   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"]
-}, H = {
+}, G = {
   normal: t.crayonBlue[50],
   hover: t.crayonBlue[70]
-}, G = {
+}, E = {
   normal: t.acidGreen[60],
   hover: t.acidGreen[70]
-}, E = {
+}, W = {
   normal: t.flameRed[40],
   hover: t.flameRed[60]
-}, W = {
+}, P = {
   normal: t.flameRed[60],
   hover: t.flameRed[70]
-}, P = {
+}, q = {
   default: e(t.coolGrey[50], 0.24),
   transition: e(t.coolGrey[50], 0.08)
 }, l = {
-  info: { ...H },
-  success: { ...G },
-  error: { ...E },
-  warning: { ...W },
-  skeleton: { ...P }
-}, h = {
+  info: { ...G },
+  success: { ...E },
+  error: { ...W },
+  warning: { ...P },
+  skeleton: { ...q }
+}, R = {
   common: { black: "#000", white: "#fff" },
-  primary: { ...y },
+  primary: { ...C },
   state: {
     ...l
   },
   patronus: { ...t },
-  opacity: { ...$ },
-  secondary: { ...D, contrastText: "#fff" },
-  info: { ...f, contrastText: "#fff" },
-  success: { ...v, contrastText: x[800] },
-  warning: { ...L, contrastText: x[800] },
-  error: { ...B, contrastText: "#fff" },
-  grey: x,
-  gradients: m,
-  chart: z,
-  divider: x[50024],
+  opacity: { ...D },
+  secondary: { ...m, contrastText: "#fff" },
+  info: { ...h, contrastText: "#fff" },
+  success: { ...F, contrastText: y[800] },
+  warning: { ...I, contrastText: y[800] },
+  error: { ...w, contrastText: "#fff" },
+  grey: y,
+  gradients: z,
+  chart: H,
+  divider: y[50024],
   action: {
     hoverOpacity: 0.08,
     disabledOpacity: 0.48
   }
 }, s = {
   light: {
-    ...h,
+    ...R,
     mode: "light",
     text: {
       primary: t.ashBlak[10],
@@ -334,7 +345,7 @@ const t = {
     grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
   },
   dark: {
-    ...h,
+    ...R,
     mode: "dark",
     text: {
       primary: t.marbleLight[30],
@@ -349,7 +360,7 @@ const t = {
     },
     grid: { sectionHeader: "#29313A", divider: "#3E464F", rowHover: "#1F262F" }
   }
-}, g = [
+}, x = [
   {
     name: "patronus",
     lighter: t.patronusBlue[70],
@@ -395,21 +406,21 @@ const t = {
     darker: t.blazeOrange[20],
     contrastText: t.marbleLight[10]
   }
-], F = g[0], q = g[1], _ = g[2], N = g[3], j = g[4];
-function b(o) {
+], O = x[0], V = x[1], N = x[2], _ = x[3], j = x[4];
+function k(o) {
   try {
     return {
-      patronus: F,
-      turqui: q,
-      grass: _,
-      candy: N,
+      patronus: O,
+      turqui: V,
+      grass: N,
+      candy: _,
       blaze: j
     }[o];
   } catch {
   }
-  return F;
+  return O;
 }
-const V = (o, r) => {
+const Y = (o, r) => {
   let a = {};
   switch (o) {
     case "patronus":
@@ -535,7 +546,7 @@ const V = (o, r) => {
   }
   return r === "light" ? { ...a.light } : { ...a.dark };
 };
-function Y(o) {
+function U(o) {
   return Math.round(parseFloat(o) * 16);
 }
 function d(o) {
@@ -554,18 +565,18 @@ function p({ sm: o, md: r, lg: a }) {
     }
   };
 }
-function U() {
-  return [...w().breakpoints.keys].reverse().reduce((a, i) => {
-    const k = T("up", i);
-    return !a && k ? i : a;
+function K() {
+  return [...S().breakpoints.keys].reverse().reduce((a, i) => {
+    const u = $("up", i);
+    return !a && u ? i : a;
   }, null) || "xs";
 }
-function ct(o) {
-  const r = w(), a = U(), i = r.breakpoints.up(a === "xl" ? "lg" : a), S = (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(S.fontSize), R = Number(r.typography[o].lineHeight) * C, { fontWeight: O, letterSpacing: A } = r.typography[o];
-  return { fontSize: C, lineHeight: R, fontWeight: O, letterSpacing: A };
+function gt(o) {
+  const r = S(), a = K(), 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], b = U(f.fontSize), v = Number(r.typography[o].lineHeight) * b, { fontWeight: L, letterSpacing: T } = r.typography[o];
+  return { fontSize: b, lineHeight: v, fontWeight: L, letterSpacing: T };
 }
-const K = "Poppins, sans-serif", J = {
-  fontFamily: K,
+const Q = "Poppins, sans-serif", J = {
+  fontFamily: Q,
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
@@ -675,7 +686,7 @@ const K = "Poppins, sans-serif", J = {
     lineHeight: 1.667,
     ...p({ sm: 14, md: 12, lg: 12 })
   }
-}, Q = s.light.grey[500], X = "#000000", I = (o) => {
+}, X = s.light.grey[500], Z = "#000000", A = (o) => {
   const r = e(o, 0.2), a = e(o, 0.14), i = e(o, 0.12);
   return [
     "none",
@@ -704,7 +715,7 @@ const K = "Poppins, sans-serif", J = {
     `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}`
   ];
-}, Z = (o) => {
+}, oo = (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,28 +745,28 @@ const K = "Poppins, sans-serif", J = {
     z4: `0px 8px 16px 4px ${e(t.ashBlak[60], 0.4)}`,
     ...r
   };
-}, oo = {
-  light: I(Q),
-  dark: I(X)
-}, gt = {
+}, to = {
+  light: A(X),
+  dark: A(Z)
+}, xt = {
   typography: J,
   palette: {
     ...s.light,
-    primary: b("patronus"),
-    state: { ...V("patronus", "light") },
-    representative: b("patronus").darker
+    primary: k("patronus"),
+    state: { ...Y("patronus", "light") },
+    representative: k("patronus").darker
   },
   shape: { borderRadius: 8 },
   direction: "rtl",
-  shadows: oo.light,
+  shadows: to.light,
   customShadows: {
-    primary: `0 8px 16px 0 ${M(b("patronus").main, 0.2)}`,
-    ...Z("dark")
+    primary: `0 8px 16px 0 ${B(k("patronus").main, 0.2)}`,
+    ...oo("dark")
   },
   stretch: !0,
   spacing: (o) => `${0.5 * o}rem`
 };
-function to(o) {
+function eo(o) {
   return {
     MuiAvatar: {
       styleOverrides: {
@@ -780,7 +791,7 @@ function to(o) {
     }
   };
 }
-function eo(o) {
+function ro(o) {
   return {
     MuiButton: {
       styleOverrides: {
@@ -833,7 +844,7 @@ function eo(o) {
     }
   };
 }
-function ro(o) {
+function ao(o) {
   return {
     MuiIconButton: {
       styleOverrides: {
@@ -857,7 +868,7 @@ function ro(o) {
     }
   };
 }
-function ao(o) {
+function io(o) {
   return console.log("test theme", o.palette), {
     MuiFab: {
       defaultProps: {
@@ -892,7 +903,7 @@ function ao(o) {
     }
   };
 }
-function io(o) {
+function no(o) {
   return {
     MuiCard: {
       styleOverrides: {
@@ -924,7 +935,7 @@ function io(o) {
     }
   };
 }
-function no(o) {
+function po(o) {
   return {
     MuiTabs: {
       styleOverrides: {
@@ -981,7 +992,7 @@ function no(o) {
     }
   };
 }
-function po(o) {
+function lo(o) {
   return {
     MuiMenuItem: {
       styleOverrides: {
@@ -997,7 +1008,7 @@ function po(o) {
     }
   };
 }
-function lo(o) {
+function so(o) {
   return {
     MuiLink: {
       defaultProps: {
@@ -1013,7 +1024,7 @@ function lo(o) {
     }
   };
 }
-function so(o) {
+function uo(o) {
   return {
     MuiListItemIcon: {
       styleOverrides: {
@@ -1046,7 +1057,7 @@ function so(o) {
     }
   };
 }
-function uo(o) {
+function co(o) {
   return {
     MuiTableRow: {
       styleOverrides: {
@@ -1132,7 +1143,7 @@ function uo(o) {
     }
   };
 }
-function co(o) {
+function go(o) {
   return {
     MuiBadge: {
       styleOverrides: {
@@ -1145,7 +1156,7 @@ function co(o) {
     }
   };
 }
-function go(o) {
+function xo(o) {
   return {
     MuiPaper: {
       defaultProps: {
@@ -1211,7 +1222,7 @@ function go(o) {
     }
   };
 }
-function xo(o) {
+function bo(o) {
   return {
     MuiFormControl: {
       styleOverrides: {
@@ -1293,7 +1304,7 @@ function xo(o) {
     }
   };
 }
-function bo(o) {
+function Mo(o) {
   return {
     MuiInputLabel: {
       styleOverrides: {
@@ -1308,7 +1319,7 @@ function bo(o) {
     }
   };
 }
-function Mo(o) {
+function yo(o) {
   return {
     MuiRadio: {
       styleOverrides: {
@@ -1325,7 +1336,7 @@ function Mo(o) {
     }
   };
 }
-function yo(o) {
+function fo(o) {
   const r = o.palette.mode === "light";
   return {
     MuiDrawer: {
@@ -1343,13 +1354,13 @@ function yo(o) {
         modal: {
           '&[role="presentation"]': {
             "& .MuiDrawer-paperAnchorLeft": {
-              boxShadow: `8px 24px 24px 12px ${M(
+              boxShadow: `8px 24px 24px 12px ${B(
                 o.palette.grey[900],
                 r ? 0.16 : 0.48
               )}`
             },
             "& .MuiDrawer-paperAnchorRight": {
-              boxShadow: `-8px 24px 24px 12px ${M(
+              boxShadow: `-8px 24px 24px 12px ${B(
                 o.palette.grey[900],
                 r ? 0.16 : 0.48
               )}`
@@ -1360,7 +1371,7 @@ function yo(o) {
     }
   };
 }
-function fo(o) {
+function vo(o) {
   return {
     MuiDialog: {
       styleOverrides: {
@@ -1416,7 +1427,7 @@ function fo(o) {
     }
   };
 }
-function vo(o) {
+function Lo(o) {
   const r = o.palette.mode === "light";
   return {
     MuiSlider: {
@@ -1441,7 +1452,7 @@ function vo(o) {
     }
   };
 }
-function Lo(o) {
+function ko(o) {
   const r = o.palette.mode === "light";
   return {
     MuiSwitch: {
@@ -1489,7 +1500,7 @@ function Bo(o) {
     }
   };
 }
-function ko(o) {
+function Co(o) {
   const r = o.palette.mode === "light";
   return {
     MuiTooltip: {
@@ -1504,7 +1515,7 @@ function ko(o) {
     }
   };
 }
-function Co(o) {
+function ho(o) {
   return {
     MuiPopover: {
       styleOverrides: {
@@ -1513,7 +1524,7 @@ function Co(o) {
     }
   };
 }
-function ho(o) {
+function Fo(o) {
   return {
     MuiStepConnector: {
       styleOverrides: {
@@ -1524,7 +1535,7 @@ function ho(o) {
     }
   };
 }
-function Fo(o) {
+function Io(o) {
   return {
     MuiDataGrid: {
       styleOverrides: {
@@ -1621,7 +1632,7 @@ function Fo(o) {
     }
   };
 }
-function Io(o) {
+function wo(o) {
   return {
     MuiSkeleton: {
       defaultProps: {
@@ -1635,7 +1646,7 @@ function Io(o) {
     }
   };
 }
-function wo(o) {
+function So(o) {
   const r = e(o.palette.grey[900], 0.48), a = e(o.palette.grey[900], 1);
   return {
     MuiBackdrop: {
@@ -1655,7 +1666,7 @@ function wo(o) {
     }
   };
 }
-function So(o) {
+function Ro(o) {
   const r = o.palette.mode === "light";
   return {
     MuiLinearProgress: {
@@ -1677,7 +1688,7 @@ function So(o) {
     }
   };
 }
-function Ro(o) {
+function Oo(o) {
   return {
     MuiTimelineDot: {
       styleOverrides: {
@@ -1695,7 +1706,7 @@ function Ro(o) {
     }
   };
 }
-function Oo(o) {
+function Ao(o) {
   return {
     MuiCheckbox: {
       styleOverrides: {
@@ -1714,7 +1725,7 @@ function Oo(o) {
     }
   };
 }
-function Ao(o) {
+function To(o) {
   return {
     MuiAccordion: {
       styleOverrides: {
@@ -1789,7 +1800,7 @@ function Ao(o) {
     }
   };
 }
-function To(o) {
+function $o(o) {
   return {
     MuiTypography: {
       defaultProps: {
@@ -1808,7 +1819,7 @@ function To(o) {
     }
   };
 }
-function $o(o) {
+function Do(o) {
   return {
     MuiPaginationItem: {
       styleOverrides: {
@@ -1842,7 +1853,7 @@ function $o(o) {
     }
   };
 }
-function Do(o) {
+function mo(o) {
   return {
     MuiBreadcrumbs: {
       styleOverrides: {
@@ -1854,7 +1865,7 @@ function Do(o) {
     }
   };
 }
-function mo(o) {
+function zo(o) {
   const r = (a) => ({
     props: { variant: "contained", color: a },
     style: { boxShadow: o.customShadows?.primary }
@@ -1896,7 +1907,7 @@ function mo(o) {
     }
   };
 }
-function zo(o) {
+function Ho(o) {
   return {
     MuiCssBaseline: {
       styleOverrides: {
@@ -1939,7 +1950,7 @@ function zo(o) {
     }
   };
 }
-function Ho(o) {
+function Go(o) {
   return {
     MuiAutocomplete: {
       styleOverrides: {
@@ -1963,7 +1974,7 @@ function Ho(o) {
     }
   };
 }
-const u = (o, r) => ({
+const c = (o, r) => ({
   props: { color: r },
   style: {
     "&:hover": {
@@ -1975,7 +1986,7 @@ const u = (o, r) => ({
     }
   }
 });
-function Go(o) {
+function Eo(o) {
   return {
     MuiToggleButton: {
       variants: [
@@ -1987,12 +1998,12 @@ function Go(o) {
             }
           }
         },
-        u(o, "primary"),
-        u(o, "secondary"),
-        u(o, "info"),
-        u(o, "success"),
-        u(o, "warning"),
-        u(o, "error")
+        c(o, "primary"),
+        c(o, "secondary"),
+        c(o, "info"),
+        c(o, "success"),
+        c(o, "warning"),
+        c(o, "error")
       ]
     },
     MuiToggleButtonGroup: {
@@ -2011,7 +2022,7 @@ function Go(o) {
     }
   };
 }
-function Eo(o) {
+function Wo(o) {
   return {
     MuiFormControlLabel: {
       styleOverrides: {
@@ -2036,7 +2047,7 @@ function Eo(o) {
     }
   };
 }
-function Wo(o) {
+function Po(o) {
   return {
     MuiLoadingButton: {
       styleOverrides: {
@@ -2060,11 +2071,11 @@ function Wo(o) {
     }
   };
 }
-const Po = (o) => ({
+const qo = (o) => ({
   M4LBruceTest: {
     styleOverrides: {}
   }
-}), qo = (o) => ({
+}), Vo = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {
       "&.M4LDynamicFilter-root": {
@@ -2203,7 +2214,7 @@ const Po = (o) => ({
       }
     }
   }
-}), _o = (o) => ({
+}), No = (o) => ({
   M4LRHFTextFieldPassword: {
     styleOverrides: {
       "&.M4LRHFTextFieldPassword-root": {
@@ -2211,7 +2222,7 @@ const Po = (o) => ({
       }
     }
   }
-}), No = (o) => ({
+}), _o = (o) => ({
   M4LRHFTextField: {
     styleOverrides: {
       "&.M4LRHFTextField-root": {
@@ -2389,7 +2400,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Vo = (o) => ({
+}), Yo = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
@@ -2528,13 +2539,13 @@ const Po = (o) => ({
       }
     }
   }
-}), Yo = (o) => ({
+}), Uo = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {}
     }
   }
-}), Uo = (o) => ({
+}), Ko = (o) => ({
   M4LImageButton: {
     styleOverrides: {
       ["&.M4LImageButton-root"]: {
@@ -2576,7 +2587,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Ko = (o) => ({
+}), Qo = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
@@ -2659,7 +2670,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Qo = (o) => ({
+}), Xo = (o) => ({
   M4LRHFCheckbox: {
     styleOverrides: {
       "&.M4LRHFCheckbox-root": {
@@ -2722,7 +2733,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Xo = (o) => ({
+}), Zo = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
       ["&.M4LHelperText-root"]: {
@@ -2741,7 +2752,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Zo = (o) => ({
+}), ot = (o) => ({
   M4LTypography: {
     styleOverrides: {
       ["&.M4LTypography-root"]: {
@@ -2753,7 +2764,7 @@ const Po = (o) => ({
       }
     }
   }
-}), ot = (o) => ({
+}), tt = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
@@ -2956,7 +2967,7 @@ const Po = (o) => ({
       }
     }
   }
-}), tt = (o) => ({
+}), et = (o) => ({
   M4LRHFAutocomplete: {
     styleOverrides: {
       "&.M4LRHFAutocomplete-root": {
@@ -3087,7 +3098,7 @@ const Po = (o) => ({
       }
     }
   }
-}), et = (o) => ({
+}), rt = (o) => ({
   M4LRHFAutocompleteAsync: {
     styleOverrides: {
       "&.M4LRHFAutocompleteAsync-root": {
@@ -3096,7 +3107,7 @@ const Po = (o) => ({
       }
     }
   }
-}), rt = (o) => ({
+}), at = (o) => ({
   M4LoadingButton: {
     styleOverrides: {
       "&.M4LoadingButton-root": {
@@ -3313,7 +3324,7 @@ const Po = (o) => ({
       }
     }
   }
-}), at = (o) => ({
+}), it = (o) => ({
   M4LNavLink: {
     styleOverrides: {
       ["&.M4LNavLink-root"]: {
@@ -3333,7 +3344,7 @@ const Po = (o) => ({
       }
     }
   }
-}), it = (o) => ({
+}), nt = (o) => ({
   M4LSideBar: {
     styleOverrides: {
       "&.M4LSideBar-root": {
@@ -3558,7 +3569,7 @@ const Po = (o) => ({
       }
     }
   }
-}), nt = (o) => ({
+}), pt = (o) => ({
   M4LAreasAdmin: {
     styleOverrides: {
       "&.M4LAreasAdmin-root": {
@@ -3576,80 +3587,125 @@ const Po = (o) => ({
       }
     }
   }
-}), pt = (o) => ({
+}), lt = (o) => ({
   M4LAreasViewer: {
     styleOverrides: {
       "&.M4LAreasViewer-root": {
-        test: "root"
+        test: "root",
+        background: o.palette.background.background,
+        "& .M4LAreasViewer-windowRoot": {
+          background: o.palette.background.neutral,
+          border: "none",
+          boxShadow: o.customShadows.z3,
+          borderRadius: "4px",
+          "& .M4LAreasViewer-windowHeader": {
+            background: o.palette.state.default,
+            padding: "8px",
+            height: "40px",
+            borderRadius: "4px",
+            boxShadow: o.customShadows.z2,
+            borderTop: "2px solid",
+            borderColor: o.palette.state.default,
+            "& .M4LTypography-root .MuiTypography-root": {
+              ...o.typography.paragraph,
+              color: o.palette.text.primary
+            }
+          },
+          "& .M4LAreasViewer-windowContent": {
+            margin: "8px",
+            background: o.palette.background.default,
+            borderRadius: "4px"
+          }
+        },
+        "& .M4LAreasViewer-windowPopupRoot": {
+          background: o.palette.state.default,
+          borderRadius: "4px",
+          border: "1px solid",
+          borderColor: o.palette.state.default,
+          backdropFilter: "blur(8px)",
+          "& .M4LAreasViewer-windowRoot": {
+            margin: "8px",
+            background: o.palette.background.default
+          },
+          "& .M4LAreasViewer-windowHeader": {
+            height: "28px",
+            padding: "0px 8px",
+            boxShadow: "none",
+            "& .M4LTypography-root .MuiTypography-root": {
+              ...o.typography.body,
+              color: o.palette.text.primary
+            }
+          }
+        }
       }
     }
   }
 });
-function xt(o) {
+function bt(o) {
   return Object.assign(
-    ao(o),
-    no(o),
     io(o),
     po(o),
+    no(o),
     lo(o),
-    xo(o),
-    bo(),
-    Mo(o),
-    co(),
     so(o),
+    bo(o),
+    Mo(),
+    yo(o),
+    go(),
     uo(o),
-    go(o),
-    Lo(o),
-    eo(o),
+    co(o),
+    xo(o),
+    ko(o),
     ro(o),
-    fo(o),
-    to(o),
+    ao(o),
     vo(o),
-    yo(o),
-    ho(o),
-    ko(o),
-    Co(),
-    Bo(),
-    Oo(o),
+    eo(o),
+    Lo(o),
+    fo(o),
     Fo(o),
+    Co(o),
+    ho(),
+    Bo(),
+    Ao(o),
     Io(o),
-    Ro(o),
     wo(o),
+    Oo(o),
     So(o),
-    Ao(o),
+    Ro(o),
     To(o),
     $o(o),
-    mo(o),
     Do(o),
-    zo(),
-    Ho(o),
-    Eo(o),
+    zo(o),
+    mo(o),
+    Ho(),
     Go(o),
     Wo(o),
-    rt(o),
-    Po(),
-    qo(o),
-    No(o),
-    _o(),
-    tt(o),
-    et(),
-    jo(o),
-    Vo(o),
-    Yo(),
-    Uo(o),
+    Eo(o),
+    Po(o),
     at(o),
-    Ko(),
+    qo(),
+    Vo(o),
+    _o(o),
+    No(),
+    et(o),
+    rt(),
+    jo(o),
+    Yo(o),
+    Uo(),
+    Ko(o),
+    it(o),
+    Qo(),
     Jo(o),
-    Qo(o),
     Xo(o),
     Zo(o),
     ot(o),
-    it(o),
-    nt(),
-    pt()
+    tt(o),
+    nt(o),
+    pt(),
+    lt(o)
   );
 }
-const bt = {
+const Mt = {
   values: {
     xs: 0,
     sm: 600,
@@ -3657,30 +3713,31 @@ const bt = {
     lg: 1200,
     xl: 1400
   }
-}, Mt = {
+}, yt = {
   mobile: 16,
   desktop: 16
 };
 export {
   t as PATRONUSCOLORS,
   j as blaze,
-  N as candy,
-  g as colorPresets,
-  Z as createCustomShadows,
-  F as defaultPreset,
-  gt as defaultThemeOptions,
-  xt as fnComponentsOverrides,
-  b as getColorPresets,
-  V as getColorState,
-  ct as getFontValue,
-  Mt as globalRemSize,
-  _ as grass,
-  bt as muiBreakpointsValues,
+  _ as candy,
+  x as colorPresets,
+  oo as createCustomShadows,
+  O as defaultPreset,
+  xt as defaultThemeOptions,
+  bt as fnComponentsOverrides,
+  k as getColorPresets,
+  Y as getColorState,
+  gt as getFontValue,
+  yt as globalRemSize,
+  N as grass,
+  Mt as muiBreakpointsValues,
   s as palette,
   d as pxToRem,
-  Y as remToPx,
+  U as remToPx,
   p as responsiveFontSizes,
-  oo as shadows,
-  q as turqui,
-  J as typography
+  to as shadows,
+  V as turqui,
+  J as typography,
+  $ as useResponsive
 };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@m4l/styles",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "UNLICENSED",
   "dependencies": {
-    "@m4l/graphics": "*",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@mui/material": "5.10.4",
-    "@mui/system": "5.10.4",
+    "@mui/x-date-pickers": "6.6.0",
     "react": "^17.0.0 || 18.x",
     "react-dom": "^18.0.0"
   },

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

@@ -1,9 +1,52 @@
 import { Theme } from '@mui/material/styles';
-export declare const M4LAreasViewer: (_theme: Theme) => {
+export declare const M4LAreasViewer: (theme: Theme) => {
     M4LAreasViewer: {
         styleOverrides: {
             '&.M4LAreasViewer-root': {
                 test: string;
+                background: string;
+                "& .M4LAreasViewer-windowRoot": {
+                    background: string;
+                    border: string;
+                    boxShadow: string;
+                    borderRadius: string;
+                    "& .M4LAreasViewer-windowHeader": {
+                        background: string;
+                        padding: string;
+                        height: string;
+                        borderRadius: string;
+                        boxShadow: string;
+                        borderTop: string;
+                        borderColor: string;
+                        "& .M4LTypography-root .MuiTypography-root": {
+                            color: string;
+                        };
+                    };
+                    "& .M4LAreasViewer-windowContent": {
+                        margin: string;
+                        background: string;
+                        borderRadius: string;
+                    };
+                };
+                "& .M4LAreasViewer-windowPopupRoot": {
+                    background: string;
+                    borderRadius: string;
+                    border: string;
+                    borderColor: string;
+                    backdropFilter: string;
+                    "& .M4LAreasViewer-windowRoot": {
+                        margin: string;
+                        background: string;
+                    };
+                    "& .M4LAreasViewer-windowHeader": {
+                        height: string;
+                        padding: string;
+                        boxShadow: string;
+                        "& .M4LTypography-root .MuiTypography-root": {
+                            color: string;
+                        };
+                    };
+                };
             };
         };
     };

package/utils/index.d.ts

@@ -1,3 +1,4 @@
+export { useResponsive } from './useResponsive';
 export * from './getColorPresets';
 export { getColorState } from './getColorState';
 export * from './getFontValue';

package/utils/useResponsive.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoint } from '@mui/material';
+declare type Query = 'up' | 'down' | 'between' | 'only';
+declare type Key = Breakpoint | number;
+declare type Start = Breakpoint | number;
+declare type End = Breakpoint | number;
+export declare function useResponsive(query: Query, key?: Key, start?: Start, end?: End): boolean | undefined;
+export {};