@m4l/styles 0.0.10 → 0.0.12

package/index.js

@@ -1,6 +1,6 @@
-import { alpha as e, useTheme as S } from "@mui/material/styles";
+import { alpha as e, useTheme as w } from "@mui/material/styles";
 import { alpha as n } from "@mui/system";
-import { alpha as b } from "@mui/material";
+import { alpha as M } from "@mui/material";
 import { useResponsive as T } from "@m4l/graphics";
 function c(o, r) {
   return `linear-gradient(to bottom, ${o}, ${r})`;
@@ -202,14 +202,14 @@ const t = {
     60: e(t.marbleLight[10], 0.6),
     72: e(t.marbleLight[10], 0.72)
   }
-}, M = {
+}, y = {
   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 = {
+}, D = {
   lighter: "#fff0",
   light: "#fff0",
   main: "#fff0",
@@ -222,14 +222,14 @@ const t = {
   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],
@@ -263,10 +263,10 @@ const t = {
   50056: e("#919EAB", 0.56),
   50080: e("#919EAB", 0.8)
 }, m = {
-  primary: c(M.light, M.main),
+  primary: c(y.light, y.main),
   info: c(f.light, f.main),
-  success: c(y.light, y.main),
-  warning: c(v.light, v.main),
+  success: c(v.light, v.main),
+  warning: c(L.light, L.main),
   error: c(B.light, B.main)
 }, z = {
   violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
@@ -274,39 +274,39 @@ const t = {
   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 = {
+}, W = {
   normal: t.flameRed[60],
   hover: t.flameRed[70]
 }, P = {
   default: e(t.coolGrey[50], 0.24),
   transition: e(t.coolGrey[50], 0.08)
 }, l = {
-  info: { ...D },
-  success: { ...H },
-  error: { ...G },
-  warning: { ...E },
+  info: { ...H },
+  success: { ...G },
+  error: { ...E },
+  warning: { ...W },
   skeleton: { ...P }
-}, C = {
+}, h = {
   common: { black: "#000", white: "#fff" },
-  primary: { ...M },
+  primary: { ...y },
   state: {
     ...l
   },
   patronus: { ...t },
   opacity: { ...$ },
-  secondary: { ...A, contrastText: "#fff" },
+  secondary: { ...D, contrastText: "#fff" },
   info: { ...f, contrastText: "#fff" },
-  success: { ...y, contrastText: x[800] },
-  warning: { ...v, contrastText: x[800] },
+  success: { ...v, contrastText: x[800] },
+  warning: { ...L, contrastText: x[800] },
   error: { ...B, contrastText: "#fff" },
   grey: x,
   gradients: m,
@@ -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) {
+], F = g[0], q = g[1], _ = g[2], N = g[3], j = g[4];
+function b(o) {
   try {
     return {
-      patronus: h,
-      turqui: W,
-      grass: q,
+      patronus: F,
+      turqui: q,
+      grass: _,
       candy: N,
       blaze: j
     }[o];
   } catch {
   }
-  return h;
+  return F;
 }
-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.04),
           ...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.04),
           ...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,28 +554,28 @@ 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 [...w().breakpoints.keys].reverse().reduce((a, i) => {
+    const k = T("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 };
+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 };
 }
-const U = "Poppins, sans-serif", K = {
-  fontFamily: U,
+const K = "Poppins, sans-serif", J = {
+  fontFamily: K,
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
   h1: {
-    fontWeight: 700,
+    fontWeight: 600,
     lineHeight: 1.5,
     ...p({ sm: 38, md: 40, lg: 40 })
   },
   h2: {
-    fontWeight: 700,
+    fontWeight: 600,
     lineHeight: 1,
     ...p({ sm: 40, md: 44, lg: 48 })
   },
@@ -585,7 +585,7 @@ const U = "Poppins, sans-serif", K = {
     ...p({ sm: 30, md: 32, lg: 32 })
   },
   h4: {
-    fontWeight: 700,
+    fontWeight: 600,
     lineHeight: 1.5,
     ...p({ sm: 20, md: 24, lg: 24 })
   },
@@ -595,7 +595,7 @@ const U = "Poppins, sans-serif", K = {
     ...p({ sm: 22, md: 24, lg: 24 })
   },
   h6: {
-    fontWeight: 700,
+    fontWeight: 600,
     lineHeight: 28 / 18,
     ...p({ sm: 18, md: 18, lg: 18 })
   },
@@ -605,7 +605,7 @@ const U = "Poppins, sans-serif", K = {
     ...p({ sm: 18, md: 16, lg: 16 })
   },
   subtitleDens: {
-    fontWeight: 700,
+    fontWeight: 600,
     lineHeight: 1.5,
     ...p({ sm: 18, md: 16, lg: 16 })
   },
@@ -635,9 +635,9 @@ const U = "Poppins, sans-serif", K = {
     ...p({ sm: 14, md: 12, lg: 12 })
   },
   bodyDens: {
-    fontWeight: 700,
+    fontWeight: 600,
     lineHeight: 1.143,
-    ...p({ sm: 16, md: 12, lg: 12 })
+    ...p({ sm: 14, md: 12, lg: 12 })
   },
   body0: {
     lineHeight: 1.5,
@@ -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", I = (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)
-}, ut = {
-  typography: K,
-  palette: s.light,
+}, oo = {
+  light: I(Q),
+  dark: I(X)
+}, gt = {
+  typography: J,
+  palette: {
+    ...s.light,
+    primary: b("patronus"),
+    state: { ...V("patronus", "light") },
+    representative: b("patronus").darker
+  },
   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: {
@@ -1225,7 +1230,7 @@ function go(o) {
           padding: "0px"
         },
         input: {
-          paddingLeft: "8px",
+          padding: "4px 8px",
           "&::placeholder": {
             opacity: 1,
             color: o.palette.text.disabled
@@ -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 yo(o) {
   const r = o.palette.mode === "light";
   return {
     MuiDrawer: {
@@ -1332,289 +1337,19 @@ function Mo(o) {
               background: o.palette.background.neutral,
               display: "flex",
               flexDirection: "row"
-            },
-            "& .M4LSideBar-containerLogo": {
-              display: "flex",
-              flexDirection: "row",
-              width: "100%",
-              gap: "12px",
-              boxSizing: "contentBox",
-              padding: "16px 0px 0px 8px",
-              position: "absolute",
-              left: "-20px",
-              fitContent: "100%",
-              alignItems: "center",
-              "& .M4LImage-root": {
-                position: "relative",
-                background: o.palette.background.neutral,
-                boxShadow: o.customShadows.z3,
-                padding: "4px",
-                borderRadius: "6px",
-                minWidth: "64px",
-                minHeight: "64px"
-              }
-            },
-            "& .M4LSideBar-contentGroups": {
-              overflow: "hidden",
-              "& .M4LSideBar-wrapperGroup": {
-                padding: "100px 8px 0px 0px",
-                flexDirection: "column",
-                gap: "8px",
-                "& .M4LSideBar-itemListMainRoot": {
-                  display: "flex",
-                  flexDirection: "column",
-                  position: "realative",
-                  "& > .MuiCollapse-root:nth-of-type(2)": {
-                    backgroundColor: "transparent",
-                    top: "-16px"
-                  },
-                  "& .MuiCollapse-root": {
-                    borderRadius: "16px 0px 4px 4px",
-                    padding: "16px 8px 8px 8px",
-                    position: "relative"
-                  },
-                  "&.M4LSideBar-itemMainActive": {
-                    "& > .MuiCollapse-root:nth-of-type(2)": {
-                      backgroundColor: o.palette.state.active12,
-                      top: "-16px"
-                    },
-                    "& .M4LSideBar-navItemMainRoot": {
-                      height: "68px"
-                    },
-                    "& .M4LSideBar-navItemRootContent": {
-                      background: o.palette.representative,
-                      "& .M4LTypography-root .MuiTypography-root": {
-                        color: o.palette.patronus?.marbleLight[10]
-                      },
-                      "& .M4LIcon-root .M4LIcon-icon": {
-                        backgroundColor: o.palette.patronus?.marbleLight[10]
-                      },
-                      "&:hover": {
-                        background: `${o.palette.representative}!important`
-                      }
-                    },
-                    "& .M4LSideBar-navItemMainTriangleTop": {
-                      position: "absolute",
-                      top: "0",
-                      left: "0",
-                      width: "16px",
-                      height: "16px",
-                      overflow: "hidden",
-                      backgroundColor: o.palette.representative,
-                      transform: "rotate(90deg)",
-                      "&::before": {
-                        content: '""',
-                        position: "absolute",
-                        width: "100%",
-                        height: "100%",
-                        backgroundColor: o.palette.background.neutral,
-                        transform: "rotate(180deg)",
-                        inset: "0",
-                        borderTopLeftRadius: "100%",
-                        transformOrigin: "center center"
-                      }
-                    },
-                    "& .M4LSideBar-navItemMainTriangleBottom": {
-                      position: "absolute",
-                      bottom: "0",
-                      left: "0",
-                      width: "16px",
-                      height: "16px",
-                      overflow: "hidden",
-                      background: o.palette.representative,
-                      transform: "rotate(180deg)",
-                      "&::before": {
-                        content: '""',
-                        position: "absolute",
-                        width: "100%",
-                        height: "100%",
-                        backgroundColor: o.palette.background.neutral,
-                        transform: "rotate(180deg)",
-                        inset: "0",
-                        borderTopLeftRadius: "100%",
-                        transformOrigin: "center center"
-                      }
-                    }
-                  },
-                  "& .M4LSideBar-navItemMainRoot": {
-                    ...o.typography.body2,
-                    padding: "0px",
-                    height: "fit-content",
-                    position: "relative",
-                    display: "flex",
-                    alignItems: "center",
-                    textTransform: "capitalize",
-                    overflow: "hidden",
-                    backgroundColor: "transparent",
-                    "& .M4LSideBar-navItemRootContent": {
-                      padding: "8px 16px",
-                      border: "0px",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      display: "flex",
-                      width: "100%",
-                      height: "36px",
-                      boxSizing: "border-box",
-                      borderRadius: "0 4px 4px 0",
-                      overflow: "hidden",
-                      transition: o.transitions.create(["width", "opacity"], {
-                        duration: o.transitions.duration.standard
-                      }),
-                      "&:hover": {
-                        backgroundColor: o.palette.state.active12,
-                        Color: o.palette.text.primary
-                      },
-                      "& .M4LSideBar-navItemRootContentIconTypo": {
-                        display: "flex",
-                        gap: "4px"
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "& .M4LSideBar-lineLeft": {
-              height: "100%",
-              width: "20px",
-              backgroundColor: o.palette.representative
-            },
-            "& .M4LSideBar-contentDesktop, & .M4LSideBar-contentMobile": {
-              position: "relative",
-              width: "100%",
-              flexGrow: "1",
-              display: "flex",
-              "& .M4LSideBar-collapseButton": {
-                width: "100%",
-                padding: "0px",
-                "& .M4LSideBar-containerLogoButton": {
-                  width: "100%",
-                  height: "68px",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  "& .M4LSideBar-containerLogoButtonLogo": {
-                    width: "100%",
-                    height: "100%",
-                    padding: "12px 30px"
-                  },
-                  "& .M4LSideBar-containerLogoButtonIcon": {
-                    width: "auto",
-                    height: "100%",
-                    position: "relative",
-                    display: "flex",
-                    alignItems: "center",
-                    "& .M4LIconButton-root": {
-                      width: "36px",
-                      height: "36px",
-                      borderRadius: "0px 4px 4px 0px",
-                      backgroundColor: o.palette.state.focus,
-                      "&:hover": {
-                        backgroundColor: o.palette.state.focus
-                      },
-                      "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.patronus?.marbleLight[10]
-                      }
-                    },
-                    "& .M4LSideBar-collapseButtontriangleTop": {
-                      position: "absolute",
-                      top: "0",
-                      left: "0",
-                      width: "16px",
-                      height: "16px",
-                      overflow: "hidden",
-                      backgroundColor: o.palette.state.focus,
-                      transform: "rotate(90deg)",
-                      "&::before": {
-                        content: '""',
-                        position: "absolute",
-                        width: "100%",
-                        height: "100%",
-                        backgroundColor: o.palette.background.neutral,
-                        transform: "rotate(180deg)",
-                        inset: "0",
-                        borderTopLeftRadius: "100%",
-                        transformOrigin: "center center"
-                      }
-                    },
-                    "& .M4LSideBar-collapseButtontriangleBottom": {
-                      position: "absolute",
-                      bottom: "0",
-                      left: "0",
-                      width: "16px",
-                      height: "16px",
-                      ocontainerLogoButtonIconerflow: "hidden",
-                      background: o.palette.state.focus,
-                      transform: "rotate(180deg)",
-                      "&::before": {
-                        content: '""',
-                        position: "absolute",
-                        width: "100%",
-                        height: "100%",
-                        backgroundColor: o.palette.background.neutral,
-                        transform: "rotate(180deg)",
-                        inset: "0",
-                        borderTopLeftRadius: "100%",
-                        transformOrigin: "center center"
-                      }
-                    }
-                  }
-                },
-                "& .M4LImage-root": {
-                  display: "flex",
-                  position: "relative",
-                  padding: "8px",
-                  width: "130px",
-                  height: "44px",
-                  boxShadow: "inset 0px 4px 4px rgba(0, 0, 0, 0.25)",
-                  opacity: "30%"
-                }
-              }
-            },
-            "& .MuiCollapse-wrapperInner": {
-              display: "flex",
-              flexDirection: "column",
-              gap: "16px"
-            },
-            "& .M4LSideBar-navListSubItemRoot:hover": {
-              padding: "4px 8px",
-              borderRadius: "4px",
-              backgroundColor: o.palette.state.active12
-            },
-            "& .M4LSideBar-navListSubItemRoot": {
-              padding: "4px 8px",
-              borderRadius: "4px",
-              "& .M4LSideBar-subItemActive": {
-                "& .M4LSideBar-navSubItemContentBullet": {
-                  borderRadius: "5px",
-                  height: "10px",
-                  backgroundColor: o.palette.state.focus
-                }
-              },
-              "& .MuiButtonBase-root": {
-                gap: "4px",
-                "&:hover": {
-                  backgroundColor: "transparent"
-                }
-              },
-              "& .M4LSideBar-navSubItemContentBullet": {
-                width: "4px",
-                height: "4px",
-                borderRadius: "100%",
-                backgroundColor: o.palette.text.secondary,
-                margin: "6px"
-              }
             }
           }
         },
         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
               )}`
@@ -1681,7 +1416,7 @@ function fo(o) {
     }
   };
 }
-function yo(o) {
+function vo(o) {
   const r = o.palette.mode === "light";
   return {
     MuiSlider: {
@@ -1706,7 +1441,7 @@ function yo(o) {
     }
   };
 }
-function vo(o) {
+function Lo(o) {
   const r = o.palette.mode === "light";
   return {
     MuiSwitch: {
@@ -1754,7 +1489,7 @@ function Bo(o) {
     }
   };
 }
-function Lo(o) {
+function ko(o) {
   const r = o.palette.mode === "light";
   return {
     MuiTooltip: {
@@ -1769,19 +1504,16 @@ function Lo(o) {
     }
   };
 }
-function ko(o) {
+function Co(o) {
   return {
     MuiPopover: {
       styleOverrides: {
-        paper: {
-          boxShadow: o.customShadows?.dropdown,
-          borderRadius: Number(o.shape.borderRadius) * 1.5
-        }
+        paper: {}
       }
     }
   };
 }
-function Co(o) {
+function ho(o) {
   return {
     MuiStepConnector: {
       styleOverrides: {
@@ -1792,7 +1524,7 @@ function Co(o) {
     }
   };
 }
-function ho(o) {
+function Fo(o) {
   return {
     MuiDataGrid: {
       styleOverrides: {
@@ -1903,7 +1635,7 @@ function Io(o) {
     }
   };
 }
-function So(o) {
+function wo(o) {
   const r = e(o.palette.grey[900], 0.48), a = e(o.palette.grey[900], 1);
   return {
     MuiBackdrop: {
@@ -1923,7 +1655,7 @@ function So(o) {
     }
   };
 }
-function Fo(o) {
+function So(o) {
   const r = o.palette.mode === "light";
   return {
     MuiLinearProgress: {
@@ -1945,7 +1677,7 @@ function Fo(o) {
     }
   };
 }
-function wo(o) {
+function Ro(o) {
   return {
     MuiTimelineDot: {
       styleOverrides: {
@@ -1963,7 +1695,7 @@ function wo(o) {
     }
   };
 }
-function Ro(o) {
+function Oo(o) {
   return {
     MuiCheckbox: {
       styleOverrides: {
@@ -1982,7 +1714,7 @@ function Ro(o) {
     }
   };
 }
-function Oo(o) {
+function Ao(o) {
   return {
     MuiAccordion: {
       styleOverrides: {
@@ -2110,7 +1842,7 @@ function $o(o) {
     }
   };
 }
-function Ao(o) {
+function Do(o) {
   return {
     MuiBreadcrumbs: {
       styleOverrides: {
@@ -2207,7 +1939,7 @@ function zo(o) {
     }
   };
 }
-function Do(o) {
+function Ho(o) {
   return {
     MuiAutocomplete: {
       styleOverrides: {
@@ -2243,7 +1975,7 @@ const u = (o, r) => ({
     }
   }
 });
-function Ho(o) {
+function Go(o) {
   return {
     MuiToggleButton: {
       variants: [
@@ -2279,7 +2011,7 @@ function Ho(o) {
     }
   };
 }
-function Go(o) {
+function Eo(o) {
   return {
     MuiFormControlLabel: {
       styleOverrides: {
@@ -2304,7 +2036,7 @@ function Go(o) {
     }
   };
 }
-function Eo(o) {
+function Wo(o) {
   return {
     MuiLoadingButton: {
       styleOverrides: {
@@ -2332,11 +2064,146 @@ const Po = (o) => ({
   M4LBruceTest: {
     styleOverrides: {}
   }
-}), Wo = (o) => ({
+}), qo = (o) => ({
   M4LDynamicFilter: {
-    styleOverrides: {}
+    styleOverrides: {
+      "&.M4LDynamicFilter-root": {
+        borderRadius: "4px",
+        background: o.palette.background.default,
+        boxShadow: o.customShadows.z2,
+        padding: "0px",
+        border: "none",
+        borderTop: "1px solid",
+        borderColor: o.palette.state.default,
+        overflow: "hidden",
+        "& .M4LDynamicFilter-containerFistRow": {
+          height: "32px",
+          width: "100%",
+          "& .M4LDynamicFilter-containerInputFilter": {
+            width: "100%",
+            alignItems: "center",
+            maxWidth: "100%"
+          }
+        },
+        "&.M4LDynamicFilter-isInvalid": {
+          borderColor: o.palette.state.error.normal
+        },
+        "& .M4LDynamicFilter-containerClearFilter": {
+          display: "flex",
+          flexDirection: "row",
+          gap: "4px",
+          backgroundColor: o.palette.background.neutral,
+          padding: "4px"
+        },
+        "& .M4LDynamicFilter-containerInputFilter": {
+          display: "flex",
+          flexDirection: "row",
+          gap: "8px",
+          padding: "4px",
+          backgroundColor: o.palette.background.neutral,
+          height: "100%",
+          maxWidth: "135px",
+          width: "100%",
+          alignItems: "center",
+          "& > input": {
+            border: "none",
+            background: "none",
+            ...o.typography.body,
+            color: o.palette.text.primary,
+            padding: "0px 4px",
+            width: "100%",
+            BorderRadius: "4px"
+          },
+          "& input:focus-visible": {
+            border: "none",
+            background: o.palette.state.active12,
+            BorderRadius: "4px",
+            outline: "none",
+            padding: "0px 4px"
+          }
+        },
+        "& .M4LDynamicFilter-wrapperApplyedFilters": {
+          borderLeft: "none",
+          height: "29px"
+        },
+        "& .M4LDynamicFilter-containerApplyedFilters": {
+          padding: "2px"
+        },
+        "& .M4LDynamicFilter-applyedFilter": {
+          borderRadius: "4px",
+          background: o.palette.state.default,
+          boxShadow: o.customShadows.z2,
+          color: o.palette.text.secondary,
+          ...o.typography.body,
+          border: "none",
+          borderTop: "1px solid",
+          borderColor: o.palette.state.default,
+          "& .css-5ca9fi": {
+            ...o.typography.body
+          },
+          "& .css-1wytxsy": {
+            ...o.typography.body
+          }
+        },
+        "& .M4LDynamicFilter-popoverFilterPaper": {
+          background: o.palette.background.default,
+          borderRadius: "6px",
+          minWidth: "200px",
+          boxShadow: o.customShadows.z3,
+          borderTop: "1px solid",
+          borderColor: o.palette.state.default,
+          padding: "0px!important",
+          "& .M4LPopover-arrowStyle": {
+            background: "none"
+          },
+          "& .m4l_FormProvider": {
+            gap: "0px",
+            "& .M4LDynamicFilter-popoverFilterHeader": {
+              background: o.palette.state.default,
+              display: "flex",
+              gap: "4px",
+              padding: "8px",
+              borderRadius: "4px",
+              boxShadow: o.customShadows.z2,
+              borderBottom: "0px",
+              borderTop: "2px solid",
+              borderColor: o.palette.state.default,
+              "& .MuiTypography-root": {
+                ...o.typography.bodyDens,
+                color: o.palette.text.primary
+              }
+            },
+            "& .M4LDynamicFilter-popoverContainerFields": {
+              padding: "0px 12px"
+            },
+            "& #WrapperStandarActions": {
+              display: "flex",
+              flexDirection: "row",
+              gap: "12px",
+              padding: "16px 8px 12px 0px",
+              ".M4LButton-root": {
+                width: "fit-content"
+              }
+            }
+          }
+        },
+        "& .M4LDynamicFilter-popoverMenuFields": {
+          borderTop: "1px solid",
+          borderColor: o.palette.state.default,
+          "& .M4LDynamicFilter-classespopoverLabelMemuItem": {
+            ...o.typography.body,
+            color: o.palette.text.secondary
+          },
+          "& .M4LDynamicFilter-popoverMenuFieldsItem:hover": {
+            ...o.typography.body,
+            color: o.palette.state.hover,
+            background: o.palette.state.default
+          }
+        }
+      }
+    }
   }
-}), qo = (o) => ({
+}), _o = (o) => ({
   M4LRHFTextFieldPassword: {
     styleOverrides: {
       "&.M4LRHFTextFieldPassword-root": {
@@ -2370,14 +2237,15 @@ const Po = (o) => ({
           },
           "& .M4LIcon-icon": {
             backgroundColor: o.palette.text.secondary,
-            transition: "all .5s ease"
+            transition: "all .3s ease"
           },
           "& .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: o.palette.text.secondary,
+            padding: "4px",
+            borderColor: o.palette.divider,
             borderRadius: "4px",
             inset: "0px",
-            transition: "all .5s ease",
+            transition: "all .3s ease",
             "& legend": {
               display: "none"
             }
@@ -2486,23 +2354,33 @@ const Po = (o) => ({
         },
         ".M4LIcon-sizeExtraSmall": {
           width: "12px",
-          height: "12px"
+          height: "12px",
+          minWidth: "12px",
+          minHeight: "12px"
         },
         ".M4LIcon-sizeSmall": {
           width: "16px",
-          height: "16px"
+          height: "16px",
+          minWidth: "16px",
+          minHeight: "16px"
         },
         ".M4LIcon-sizeMedium": {
           width: "20px",
-          height: "20px"
+          height: "20px",
+          minWidth: "20px",
+          minHeight: "20px"
         },
         ".M4LIcon-sizeLarge": {
           width: "28px",
-          height: "28px"
+          height: "28px",
+          minWidth: "28px",
+          minHeight: "28px"
         },
         ".M4LIcon-sizeExtraLarge": {
           width: "36px",
-          height: "36px"
+          height: "36px",
+          minWidth: "36px",
+          minHeight: "36px"
         },
         ".M4LIcon-variantSkeleton": {
           borderRadius: "4px",
@@ -2511,7 +2389,7 @@ const Po = (o) => ({
       }
     }
   }
-}), _o = (o) => ({
+}), Vo = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
@@ -2562,10 +2440,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 +2457,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 +2495,7 @@ const Po = (o) => ({
             }
           }
         },
-        "&.M4LIconButton-variantLine": {
+        "&.M4LIconButton-variantLine:not(&.M4LIconButton-isDisabled)": {
           "&:hover": {
             backgroundColor: o.palette.state?.active12,
             "& .M4LIcon-icon": {
@@ -2647,13 +2528,13 @@ const Po = (o) => ({
       }
     }
   }
-}), Vo = (o) => ({
+}), Yo = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {}
     }
   }
-}), Yo = (o) => ({
+}), Uo = (o) => ({
   M4LImageButton: {
     styleOverrides: {
       ["&.M4LImageButton-root"]: {
@@ -2695,7 +2576,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Uo = (o) => ({
+}), Ko = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
@@ -2732,50 +2613,33 @@ const Po = (o) => ({
       }
     }
   }
-}), Ko = (o) => ({
+}), Jo = (o) => ({
   M4LPopover: {
     styleOverrides: {
-      "&.M4LSideBar-popover": {
-        "& .MuiPaper-root": {
-          boxShadow: o.customShadows.z4,
-          "& .M4LSideBar-navListSubItemRoot:hover": {
-            padding: "4px 8px",
-            borderRadius: "4px",
-            backgroundColor: o.palette.state.active12
-          },
-          "& .M4LSideBar-navListSubItemRoot": {
-            padding: "4px 8px",
-            borderRadius: "4px",
-            "& .M4LSideBar-subItemActive": {
-              "& .M4LSideBar-navSubItemContentBullet": {
-                borderRadius: "5px",
-                height: "10px",
-                backgroundColor: o.palette.state.focus
-              }
-            },
-            "& .MuiButtonBase-root": {
-              gap: "4px",
-              "&:hover": {
-                backgroundColor: "transparent"
-              }
-            },
-            "& .M4LSideBar-navSubItemContentBullet": {
-              width: "4px",
-              height: "4px",
-              borderRadius: "100%",
-              backgroundColor: o.palette.text.secondary,
-              margin: "6px"
-            }
-          }
+      "&.M4LDynamicFilter-popoverMenuFields": {
+        "& .M4LDynamicFilter-popoverMenuFieldsPaper": {
+          borderRadius: "6px",
+          background: o.palette.background.default,
+          padding: "4px",
+          boxShadow: o.customShadows.z3,
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px"
+        },
+        "& .M4LDynamicFilter-popoverMenuFieldsItem": {
+          borderRadius: "4px",
+          padding: "2px 8px",
+          display: "flex",
+          flexDirection: "row",
+          gap: "4px"
         }
       },
       ["&.M4LPopover-root"]: {
         ".MuiPaper-root": {
           background: o.palette.background.default,
           borderRadius: "6px",
-          Padding: "8px",
-          margin: "8px 0px 0px 8px",
-          boxShadow: o.customShadows?.z3
+          padding: "8px",
+          boxShadow: o.customShadows.z3
         },
         "& .M4LanguagePopover-containerItems": {
           "& .M4LanguagePopover-labelItem": {
@@ -2795,7 +2659,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Jo = (o) => ({
+}), Qo = (o) => ({
   M4LRHFCheckbox: {
     styleOverrides: {
       "&.M4LRHFCheckbox-root": {
@@ -2858,7 +2722,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Qo = (o) => ({
+}), Xo = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
       ["&.M4LHelperText-root"]: {
@@ -2877,7 +2741,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Xo = (o) => ({
+}), Zo = (o) => ({
   M4LTypography: {
     styleOverrides: {
       ["&.M4LTypography-root"]: {
@@ -2889,7 +2753,7 @@ const Po = (o) => ({
       }
     }
   }
-}), Zo = (o) => ({
+}), ot = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
@@ -2946,8 +2810,8 @@ const Po = (o) => ({
                 }
               },
               "&:active": {
-                backgroundColor: o.palette.state?.default,
-                color: o.palette.text.disabled,
+                backgroundColor: o.palette.state?.active,
+                color: o.palette.text.primary,
                 "& .M4LIcon-icon": {
                   backgroundColor: o.palette.text.disabled,
                   color: o.palette.text.disabled
@@ -2988,11 +2852,11 @@ const Po = (o) => ({
         "&.M4LButton-variantContained": {
           "& .MuiButtonBase-root": {
             backgroundColor: o.palette.state?.default,
-            color: o.palette.text.secondary,
-            boxShadow: o.customShadows?.z1,
+            color: o.palette.text.primary,
+            boxShadow: o.customShadows?.z2,
             position: "relative",
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.secondary
+              backgroundColor: o.palette.text.primary
             },
             "&:hover": {
               backgroundColor: o.palette.state?.hover,
@@ -3023,8 +2887,8 @@ const Po = (o) => ({
         "&.M4LButton-variantOutlined": {
           "& .MuiButtonBase-root": {
             border: "1px solid",
-            borderColor: o.palette.text.secondary,
-            color: o.palette.text.secondary,
+            borderColor: o.palette.state.default,
+            color: o.palette.text.primary,
             "& .M4LIcon-icon": {
               backgroundColor: o.palette.text.secondary
             },
@@ -3092,7 +2956,7 @@ const Po = (o) => ({
       }
     }
   }
-}), ot = (o) => ({
+}), tt = (o) => ({
   M4LRHFAutocomplete: {
     styleOverrides: {
       "&.M4LRHFAutocomplete-root": {
@@ -3102,7 +2966,7 @@ const Po = (o) => ({
         gap: "4px",
         "& .M4LRHFAutocomplete-label": {
           color: o.palette.text.secondary,
-          transition: "all .5s ease"
+          transition: "all .3s ease"
         },
         "& .MuiAutocomplete-endAdornment": {
           top: "unset"
@@ -3111,7 +2975,7 @@ const Po = (o) => ({
           padding: "0px",
           "& .MuiInputBase-input": {
             color: o.palette.text.secondary,
-            padding: "0px",
+            padding: "4px",
             backgroundColor: "transparent",
             ...o.typography.body
           },
@@ -3121,14 +2985,14 @@ const Po = (o) => ({
           },
           "& .M4LIcon-icon": {
             backgroundColor: o.palette.text.secondary,
-            transition: "all .5s ease"
+            transition: "all .3s ease"
           },
           "& .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: o.palette.text.secondary,
+            borderColor: o.palette.divider,
             borderRadius: "4px",
             inset: "0px",
-            transition: "all .5s ease",
+            transition: "all .3s ease",
             "& legend": {
               display: "none"
             }
@@ -3223,15 +3087,16 @@ const Po = (o) => ({
       }
     }
   }
-}), tt = (o) => ({
+}), et = (o) => ({
   M4LRHFAutocompleteAsync: {
     styleOverrides: {
       "&.M4LRHFAutocompleteAsync-root": {
-        width: "100%"
+        width: "100%",
+        padding: "4px"
       }
     }
   }
-}), et = (o) => ({
+}), rt = (o) => ({
   M4LoadingButton: {
     styleOverrides: {
       "&.M4LoadingButton-root": {
@@ -3448,7 +3313,7 @@ const Po = (o) => ({
       }
     }
   }
-}), rt = (o) => ({
+}), at = (o) => ({
   M4LNavLink: {
     styleOverrides: {
       ["&.M4LNavLink-root"]: {
@@ -3468,363 +3333,323 @@ const Po = (o) => ({
       }
     }
   }
-}), at = (o) => ({
+}), it = (o) => ({
   M4LSideBar: {
     styleOverrides: {
       "&.M4LSideBar-root": {
-        test: "root",
         height: "100%",
-        width: "fitContent",
-        borderRadius: "4px",
-        display: "flex",
+        width: "auto",
         background: o.palette.background.neutral,
-        boxSizing: "contentBox",
-        overflow: "hidden",
+        paddingLeft: "14px",
+        paddingBottom: "14px",
+        boxShadow: o.customShadows.z3,
+        [o.breakpoints.down("sm")]: {
+          width: "0px",
+          height: "0px",
+          padding: "0px"
+        },
         "& .M4LSideBar-wrapperSideBar": {
-          display: "flex",
-          "& .M4LSideBar-containerLogo": {
-            display: "flex",
-            flexDirection: "row",
-            width: "100%",
-            gap: "12px",
-            boxSizing: "contentBox",
-            padding: "16px 0px 0px 8px",
-            position: "absolute",
-            left: "-20px",
-            fitContent: "100%",
-            alignItems: "center",
-            "& .M4LImage-root": {
-              position: "relative",
-              background: o.palette.background.neutral,
-              boxShadow: o.customShadows.z3,
-              padding: "4px",
-              borderRadius: "6px",
-              minWidth: "64px",
-              minHeight: "64px"
+          height: "100%",
+          "& .M4LSideBar-containerSideBarLogo": {
+            marginRight: "14px",
+            "& .M4LSideBar-containerLogo": {
+              height: "128px",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              fitContent: "100%",
+              boxSizing: "contentBox",
+              paddingTop: "24px",
+              paddingBottom: "28px",
+              gap: "12px",
+              "& .M4LTypography-root": {
+                display: "flex",
+                justifyContent: "center",
+                width: "100%",
+                "& .MuiTypography-root": {
+                  with: "100%",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  textWrap: "nowrap"
+                }
+              },
+              "& .M4LImage-root": {
+                position: "relative",
+                background: o.palette.background.default,
+                boxShadow: o.customShadows.z3,
+                padding: "6px",
+                borderRadius: "6px"
+              }
             }
           },
           "& .M4LSideBar-contentGroups": {
             overflow: "hidden",
+            flexGrow: "1",
+            display: "flex",
+            flexDirection: "column",
+            "& .M4LSideBar-contentGroupsLine": {
+              display: "flex",
+              height: "2px",
+              marginRight: "14px",
+              backgroundColor: o.palette.state.default
+            },
             "& .M4LSideBar-wrapperGroup": {
-              padding: "100px 8px 0px 0px",
-              flexDirection: "column",
-              gap: "8px",
+              height: "100%",
+              "& .M4LSideBar-wrapperGroupTitle": {
+                padding: "20px",
+                height: "60px",
+                "& .M4LTypography-root": {
+                  display: "flex",
+                  width: "100%",
+                  "& .MuiTypography-root": {
+                    with: "100%",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    textWrap: "nowrap"
+                  }
+                }
+              },
               "& .M4LSideBar-itemListMainRoot": {
                 display: "flex",
+                borderRadius: "4px 0px 0px 4px",
+                justifyContent: "center",
                 flexDirection: "column",
-                position: "realative",
-                "& > .MuiCollapse-root:nth-of-type(2)": {
+                gap: "8px",
+                "& .M4LSideBar-navItemMainRoot": {
                   backgroundColor: "transparent",
-                  top: "-16px"
-                },
-                "& .MuiCollapse-root": {
-                  borderRadius: "16px 0px 4px 4px",
-                  padding: "16px 8px 8px 8px",
-                  position: "relative"
+                  "&:hover": {
+                    background: o.palette.state.default
+                  }
                 },
                 "&.M4LSideBar-itemMainActive": {
                   "& .M4LSideBar-navItemMainRoot": {
-                    height: "68px"
-                  },
-                  "& > .MuiCollapse-root:nth-of-type(2)": {
-                    backgroundColor: o.palette.state.active12,
-                    top: "-16px"
-                  },
-                  "& .M4LSideBar-navItemRootContent": {
-                    background: o.palette.representative,
-                    "& .M4LTypography-root .MuiTypography-root": {
-                      color: o.palette.patronus?.marbleLight[10]
-                    },
-                    "& .M4LIcon-root .M4LIcon-icon": {
-                      backgroundColor: o.palette.patronus?.marbleLight[10]
-                    },
+                    background: o.palette.state.active12,
                     "&:hover": {
-                      background: `${o.palette.representative}!important`
+                      background: e(o.palette.state.active || "#fff", 0.18)
                     }
                   },
-                  "& .M4LSideBar-navItemMainTriangleTop": {
-                    position: "absolute",
-                    top: "0",
-                    left: "0",
-                    width: "16px",
-                    height: "16px",
-                    overflow: "hidden",
-                    backgroundColor: o.palette.representative,
-                    transform: "rotate(90deg)",
-                    "&::before": {
-                      content: '""',
-                      position: "absolute",
-                      width: "100%",
-                      height: "100%",
-                      backgroundColor: o.palette.background.neutral,
-                      transform: "rotate(180deg)",
-                      inset: "0",
-                      borderTopLeftRadius: "100%",
-                      transformOrigin: "center center"
-                    }
-                  },
-                  "& .M4LSideBar-navItemMainTriangleBottom": {
-                    position: "absolute",
-                    bottom: "0",
-                    left: "0",
-                    width: "16px",
-                    height: "16px",
-                    overflow: "hidden",
-                    background: o.palette.representative,
-                    transform: "rotate(180deg)",
+                  "& .M4LSideBar-navItemRootContent": {
+                    "& .M4LSideBar-navItemRootContentIconTypo": {
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.palette.state.focus
+                      },
+                      "& .MuiTypography-root": {
+                        color: o.palette.state.focus
+                      },
+                      "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                        backgroundColor: o.palette.state.focus
+                      }
+                    },
                     "&::before": {
                       content: '""',
-                      position: "absolute",
-                      width: "100%",
-                      height: "100%",
-                      backgroundColor: o.palette.background.neutral,
-                      transform: "rotate(180deg)",
-                      inset: "0",
-                      borderTopLeftRadius: "100%",
-                      transformOrigin: "center center"
+                      width: "5px",
+                      top: "0px",
+                      bottom: "0px",
+                      right: "0px",
+                      backgroundColor: o.palette.state.focus,
+                      borderRadius: "4px 0px 0px 4px",
+                      position: "absolute"
                     }
                   }
                 },
-                "& .M4LSideBar-navItemMainRoot": {
-                  ...o.typography.body2,
-                  padding: "0px",
-                  height: "fit-content",
-                  position: "relative",
+                "& .M4LSideBar-navItemRootContent": {
                   display: "flex",
-                  alignItems: "center",
-                  textTransform: "capitalize",
-                  overflow: "hidden",
-                  backgroundColor: "transparent",
-                  "& .M4LSideBar-navItemRootContent": {
-                    padding: "8px 16px",
-                    border: "0px",
-                    justifyContent: "space-between",
-                    alignItems: "center",
+                  padding: "8px",
+                  justifyContent: "center",
+                  borderRadius: "4px 0px 0px 4px",
+                  position: "relative",
+                  "& .M4LSideBar-navItemRootContentIconTypo": {
                     display: "flex",
+                    gap: "8px",
                     width: "100%",
-                    height: "36px",
-                    boxSizing: "border-box",
-                    borderRadius: "0 4px 4px 0",
-                    overflow: "hidden",
-                    transition: o.transitions.create(["width", "opacity"], {
-                      duration: o.transitions.duration.standard
-                    }),
-                    "&:hover": {
-                      backgroundColor: o.palette.state.active12,
-                      Color: o.palette.text.primary
+                    "& .M4LIcon-icon": {
+                      backgroundColor: o.palette.text.secondary
                     },
-                    "& .M4LSideBar-navItemRootContentIconTypo": {
-                      display: "flex",
-                      gap: "4px"
+                    "& .MuiTypography-root": {
+                      ...o.typography.paragraphDens,
+                      color: o.palette.text.secondary
+                    },
+                    "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                      backgroundColor: o.palette.text.secondary
                     }
                   }
-                }
-              }
-            }
-          },
-          "& .M4LSideBar-lineLeft": {
-            height: "100%",
-            width: "20px",
-            backgroundColor: o.palette.representative
-          },
-          "& .M4LSideBar-contentDesktop, & .M4LSideBar-contentMobile": {
-            position: "relative",
-            width: "100%",
-            flexGrow: "1",
-            display: "flex",
-            "& .M4LSideBar-collapseButton": {
-              width: "100%",
-              padding: "0px",
-              "& .M4LSideBar-containerLogoButton": {
-                width: "100%",
-                height: "68px",
-                justifyContent: "space-between",
-                alignItems: "center",
-                "& .M4LSideBar-containerLogoButtonLogo": {
-                  width: "100%",
-                  height: "100%",
-                  padding: "12px 30px"
                 },
-                "& .M4LSideBar-containerLogoButtonIcon": {
-                  width: "auto",
-                  height: "100%",
-                  position: "relative",
-                  display: "flex",
-                  alignItems: "center",
-                  "& .M4LIconButton-root": {
-                    width: "36px",
-                    height: "36px",
-                    borderRadius: "0px 4px 4px 0px",
-                    backgroundColor: o.palette.state.focus,
-                    "&:hover": {
-                      backgroundColor: o.palette.state.focus
+                "& .M4LSideBar-navListSubItemRoot": {
+                  "& .M4LSideBar-navSubItemContentRoot ": {
+                    "&.M4LSideBar-subItemCollapseActive": {
+                      backgroundColor: o.palette.state.active12
                     },
-                    "& .M4LIcon-icon": {
-                      backgroundColor: o.palette.patronus?.marbleLight[10]
-                    }
-                  },
-                  "& .M4LSideBar-collapseButtontriangleTop": {
-                    position: "absolute",
-                    top: "0",
-                    left: "0",
-                    width: "16px",
-                    height: "16px",
-                    overflow: "hidden",
-                    backgroundColor: o.palette.state.focus,
-                    transform: "rotate(90deg)",
-                    "&::before": {
-                      content: '""',
-                      position: "absolute",
-                      width: "100%",
-                      height: "100%",
-                      backgroundColor: o.palette.background.neutral,
-                      transform: "rotate(180deg)",
-                      inset: "0",
-                      borderTopLeftRadius: "100%",
-                      transformOrigin: "center center"
+                    "&.M4LSideBar-subItemActive": {
+                      "& .M4LSideBar-navSubItemContentBullet": {
+                        height: "14px",
+                        borderRadius: "10px",
+                        backgroundColor: o.palette.state.focus
+                      }
+                    },
+                    "&:hover": {
+                      background: o.palette.state.default
                     }
                   },
-                  "& .M4LSideBar-collapseButtontriangleBottom": {
-                    position: "absolute",
-                    bottom: "0",
-                    left: "0",
-                    width: "16px",
-                    height: "16px",
-                    ocontainerLogoButtonIconerflow: "hidden",
-                    background: o.palette.state.focus,
-                    transform: "rotate(180deg)",
-                    "&::before": {
-                      content: '""',
-                      position: "absolute",
+                  "& .M4LSideBar-navSubItemContentRoot": {
+                    gap: "12px",
+                    margin: "0px 0px 1px 0px",
+                    padding: "16px",
+                    "& .M4LSideBar-navSubItemContentBullet": {
+                      minWidth: "5px",
+                      minHeight: "5px",
+                      borderRadius: "50%",
+                      backgroundColor: o.palette.text.primary
+                    },
+                    "& .M4LTypography-root": {
+                      display: "flex",
                       width: "100%",
-                      height: "100%",
-                      backgroundColor: o.palette.background.neutral,
-                      transform: "rotate(180deg)",
-                      inset: "0",
-                      borderTopLeftRadius: "100%",
-                      transformOrigin: "center center"
+                      "& .MuiTypography-root": {
+                        ...o.typography.paragraph,
+                        color: o.palette.text.secondary,
+                        with: "100%",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        textWrap: "nowrap"
+                      }
                     }
                   }
+                },
+                "& .MuiCollapse-root": {
+                  marginLeft: "28px"
                 }
-              },
-              "& .M4LImage-root": {
-                display: "flex",
-                position: "relative",
-                padding: "8px",
-                width: "130px",
-                height: "44px",
-                boxShadow: "inset 0px 4px 4px rgba(0, 0, 0, 0.25)",
-                opacity: "30%"
               }
+            },
+            "& .M4LIcon-root .M4LIcon-icon": {
+              backgroundColor: o.palette.text.disabled
             }
           },
-          "& .MuiCollapse-wrapperInner": {
+          "& .M4LSideBar-collapseButton": {
             display: "flex",
-            flexDirection: "column",
-            gap: "16px"
-          },
-          "& .M4LSideBar-navListSubItemRoot:hover": {
-            padding: "4px 8px",
-            borderRadius: "4px",
-            backgroundColor: o.palette.state.active12
-          },
-          "& .M4LSideBar-navListSubItemRoot": {
-            padding: "4px 8px",
-            borderRadius: "4px",
-            "& .M4LSideBar-subItemActive": {
-              "& .M4LSideBar-navSubItemContentBullet": {
-                borderRadius: "5px",
-                height: "10px",
-                backgroundColor: o.palette.state.focus
-              }
-            },
-            "& .MuiButtonBase-root": {
-              gap: "4px",
-              "&:hover": {
-                backgroundColor: "transparent"
+            paddingTop: "14px",
+            borderTop: "2px solid",
+            borderColor: o.palette.state.default,
+            justifyContent: "center",
+            marginRight: "14px",
+            gap: "15px",
+            "& .M4LSideBar-containerLogoButton": {
+              display: "flex",
+              gap: "14px",
+              "& .M4LSideBar-containerLogoButtonLogo": {
+                width: "120px",
+                height: "40px"
+              },
+              "& .M4LSideBar-containerLogoButtonIcon": {
+                display: "flex",
+                alignItems: "center"
               }
-            },
-            "& .M4LSideBar-navSubItemContentBullet": {
-              width: "4px",
-              height: "4px",
-              borderRadius: "100%",
-              backgroundColor: o.palette.text.secondary,
-              margin: "6px"
             }
-          },
-          "& .MuiPaper-root": {
-            borderRadius: "4px",
-            backgroundColor: o.palette.state.active12,
-            padding: "8px"
           }
+        },
+        "& .M4LSideBar-contentMobile": {
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          paddingLeft: "14px"
+        },
+        "& .M4LSideBar-contentDesktop": {
+          display: "flex"
         }
       }
     }
   }
+}), nt = (o) => ({
+  M4LAreasAdmin: {
+    styleOverrides: {
+      "&.M4LAreasAdmin-root": {
+        width: "100%",
+        "& .M4LAreasAdmin-areaContainerChips": {
+          display: "flex",
+          overflow: "auto",
+          width: "100%",
+          "& .M4LAreasAdmin-areaChipRoot": {
+            "& .M4LAreasAdmin-areaChipTitle": {
+              textWrap: "nowrap"
+            }
+          }
+        }
+      }
+    }
+  }
+}), pt = (o) => ({
+  M4LAreasViewer: {
+    styleOverrides: {
+      "&.M4LAreasViewer-root": {
+        test: "root"
+      }
+    }
+  }
 });
-function ct(o) {
+function xt(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),
+    ro(o),
     fo(o),
-    oo(o),
+    to(o),
+    vo(o),
     yo(o),
-    Mo(o),
-    Co(o),
-    Lo(o),
+    ho(o),
     ko(o),
+    Co(),
     Bo(),
-    Ro(o),
-    ho(o),
+    Oo(o),
+    Fo(o),
     Io(o),
+    Ro(o),
     wo(o),
     So(o),
-    Fo(o),
-    Oo(o),
+    Ao(o),
     To(o),
     $o(o),
     mo(o),
-    Ao(o),
-    zo(),
     Do(o),
-    Go(o),
+    zo(),
     Ho(o),
     Eo(o),
-    et(o),
+    Go(o),
+    Wo(o),
+    rt(o),
     Po(),
-    Wo(),
+    qo(o),
     No(o),
-    qo(),
-    ot(o),
-    tt(),
+    _o(),
+    tt(o),
+    et(),
     jo(o),
-    _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),
+    nt(),
+    pt()
   );
 }
-const gt = {
+const bt = {
   values: {
     xs: 0,
     sm: 600,
@@ -3832,30 +3657,30 @@ const gt = {
     lg: 1200,
     xl: 1400
   }
-}, xt = {
+}, Mt = {
   mobile: 16,
-  desktop: 8
+  desktop: 16
 };
 export {
   t as PATRONUSCOLORS,
   j as blaze,
   N as candy,
   g as colorPresets,
-  X as createCustomShadows,
-  h as defaultPreset,
-  ut as defaultThemeOptions,
-  ct as fnComponentsOverrides,
-  _ as getColorPresets,
-  dt as getColorState,
-  st as getFontValue,
-  xt as globalRemSize,
-  q as grass,
-  gt as muiBreakpointsValues,
+  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,
   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
 };