@m4l/styles 0.0.9 → 0.0.11

package/index.js

@@ -1,11 +1,11 @@
-import { alpha as t, useTheme as R } from "@mui/material/styles";
+import { alpha as e, useTheme as F } from "@mui/material/styles";
 import { alpha as n } from "@mui/system";
-import { alpha as F } from "@mui/material";
+import { alpha as M } from "@mui/material";
 import { useResponsive as $ } from "@m4l/graphics";
-function c(o, e) {
-  return `linear-gradient(to bottom, ${o}, ${e})`;
+function c(o, r) {
+  return `linear-gradient(to bottom, ${o}, ${r})`;
 }
-const r = {
+const t = {
   patronusBlue: {
     10: "#CCE6FF",
     20: "#88BCFF",
@@ -140,76 +140,76 @@ const r = {
   }
 }, A = {
   patronus: {
-    4: t(r.patronusBlue[50], 0.04),
-    12: t(r.patronusBlue[50], 0.12),
-    24: t(r.patronusBlue[50], 0.24),
-    36: t(r.patronusBlue[50], 0.36),
-    48: t(r.patronusBlue[50], 0.48),
-    60: t(r.patronusBlue[50], 0.6),
-    72: t(r.patronusBlue[50], 0.72)
+    4: e(t.patronusBlue[50], 0.04),
+    12: e(t.patronusBlue[50], 0.12),
+    24: e(t.patronusBlue[50], 0.24),
+    36: e(t.patronusBlue[50], 0.36),
+    48: e(t.patronusBlue[50], 0.48),
+    60: e(t.patronusBlue[50], 0.6),
+    72: e(t.patronusBlue[50], 0.72)
   },
   turqui: {
-    4: t(r.turquiBlue[50], 0.04),
-    12: t(r.turquiBlue[50], 0.12),
-    24: t(r.turquiBlue[50], 0.24),
-    36: t(r.turquiBlue[50], 0.36),
-    48: t(r.turquiBlue[50], 0.48),
-    60: t(r.turquiBlue[50], 0.6),
-    72: t(r.turquiBlue[50], 0.72)
+    4: e(t.turquiBlue[50], 0.04),
+    12: e(t.turquiBlue[50], 0.12),
+    24: e(t.turquiBlue[50], 0.24),
+    36: e(t.turquiBlue[50], 0.36),
+    48: e(t.turquiBlue[50], 0.48),
+    60: e(t.turquiBlue[50], 0.6),
+    72: e(t.turquiBlue[50], 0.72)
   },
   grass: {
-    4: t(r.grassGreen[50], 0.04),
-    12: t(r.grassGreen[50], 0.12),
-    24: t(r.grassGreen[50], 0.24),
-    36: t(r.grassGreen[50], 0.36),
-    48: t(r.grassGreen[50], 0.48),
-    60: t(r.grassGreen[50], 0.6),
-    72: t(r.grassGreen[50], 0.72)
+    4: e(t.grassGreen[50], 0.04),
+    12: e(t.grassGreen[50], 0.12),
+    24: e(t.grassGreen[50], 0.24),
+    36: e(t.grassGreen[50], 0.36),
+    48: e(t.grassGreen[50], 0.48),
+    60: e(t.grassGreen[50], 0.6),
+    72: e(t.grassGreen[50], 0.72)
   },
   candy: {
-    4: t(r.candyRed[50], 0.04),
-    12: t(r.candyRed[50], 0.12),
-    24: t(r.candyRed[50], 0.24),
-    36: t(r.candyRed[50], 0.36),
-    48: t(r.candyRed[50], 0.48),
-    60: t(r.candyRed[50], 0.6),
-    72: t(r.candyRed[50], 0.72)
+    4: e(t.candyRed[50], 0.04),
+    12: e(t.candyRed[50], 0.12),
+    24: e(t.candyRed[50], 0.24),
+    36: e(t.candyRed[50], 0.36),
+    48: e(t.candyRed[50], 0.48),
+    60: e(t.candyRed[50], 0.6),
+    72: e(t.candyRed[50], 0.72)
   },
   blaze: {
-    4: t(r.blazeOrange[50], 0.04),
-    12: t(r.blazeOrange[50], 0.12),
-    24: t(r.blazeOrange[50], 0.24),
-    36: t(r.blazeOrange[50], 0.36),
-    48: t(r.blazeOrange[50], 0.48),
-    60: t(r.blazeOrange[50], 0.6),
-    72: t(r.blazeOrange[50], 0.72)
+    4: e(t.blazeOrange[50], 0.04),
+    12: e(t.blazeOrange[50], 0.12),
+    24: e(t.blazeOrange[50], 0.24),
+    36: e(t.blazeOrange[50], 0.36),
+    48: e(t.blazeOrange[50], 0.48),
+    60: e(t.blazeOrange[50], 0.6),
+    72: e(t.blazeOrange[50], 0.72)
   },
   cool: {
-    4: t(r.coolGrey[70], 0.04),
-    12: t(r.coolGrey[70], 0.12),
-    24: t(r.coolGrey[70], 0.24),
-    36: t(r.coolGrey[70], 0.36),
-    48: t(r.coolGrey[70], 0.48),
-    60: t(r.coolGrey[70], 0.6),
-    72: t(r.coolGrey[70], 0.72)
+    4: e(t.coolGrey[70], 0.04),
+    12: e(t.coolGrey[70], 0.12),
+    24: e(t.coolGrey[70], 0.24),
+    36: e(t.coolGrey[70], 0.36),
+    48: e(t.coolGrey[70], 0.48),
+    60: e(t.coolGrey[70], 0.6),
+    72: e(t.coolGrey[70], 0.72)
   },
   marbel: {
-    4: t(r.marbleLight[10], 0.04),
-    12: t(r.marbleLight[10], 0.12),
-    24: t(r.marbleLight[10], 0.24),
-    36: t(r.marbleLight[10], 0.36),
-    48: t(r.marbleLight[10], 0.48),
-    60: t(r.marbleLight[10], 0.6),
-    72: t(r.marbleLight[10], 0.72)
+    4: e(t.marbleLight[10], 0.04),
+    12: e(t.marbleLight[10], 0.12),
+    24: e(t.marbleLight[10], 0.24),
+    36: e(t.marbleLight[10], 0.36),
+    48: e(t.marbleLight[10], 0.48),
+    60: e(t.marbleLight[10], 0.6),
+    72: e(t.marbleLight[10], 0.72)
   }
-}, b = {
-  lighter: r.patronusBlue[70],
-  light: r.patronusBlue[60],
-  main: r.patronusBlue[50],
-  dark: r.patronusBlue[40],
-  darker: r.patronusBlue[20],
-  contrastText: r.marbleLight[10]
-}, T = {
+}, f = {
+  lighter: t.patronusBlue[70],
+  light: t.patronusBlue[60],
+  main: t.patronusBlue[50],
+  dark: t.patronusBlue[40],
+  darker: t.patronusBlue[20],
+  contrastText: t.marbleLight[10]
+}, m = {
   lighter: "#fff0",
   light: "#fff0",
   main: "#fff0",
@@ -218,31 +218,31 @@ const r = {
 }, y = {
   lighter: "#fff0",
   light: "#fff0",
-  main: r.crayonBlue[50],
+  main: t.crayonBlue[50],
   dark: "#fff0",
   darker: "#fff0",
-  opacity: t(r.crayonBlue[50], 0.08)
-}, f = {
+  opacity: e(t.crayonBlue[50], 0.08)
+}, v = {
   lighter: "#fff0",
   light: "#fff0",
-  main: r.acidGreen[60],
+  main: t.acidGreen[60],
   dark: "#fff0",
   darker: "#fff0",
-  opacity: t(r.acidGreen[60], 0.08)
-}, h = {
+  opacity: e(t.acidGreen[60], 0.08)
+}, L = {
   lighter: "#fff0",
   light: "#fff0",
-  main: r.middleYellow[60],
+  main: t.middleYellow[60],
   dark: "#fff0",
   darker: "#fff0",
-  opacity: t(r.middleYellow[60], 0.08)
-}, M = {
+  opacity: e(t.middleYellow[60], 0.08)
+}, B = {
   lighter: "#fff0",
   light: "#fff0",
-  main: r.flameRed[40],
+  main: t.flameRed[40],
   dark: "#fff0",
   darker: "#fff0",
-  opacity: t(r.flameRed[40], 0.08)
+  opacity: e(t.flameRed[40], 0.08)
 }, x = {
   0: "#FFFFFF",
   100: "#F9FAFB",
@@ -254,180 +254,180 @@ const r = {
   700: "#454F5B",
   800: "#212B36",
   900: "#161C24",
-  5008: t("#919EAB", 0.08),
-  50012: t("#919EAB", 0.12),
-  50016: t("#919EAB", 0.16),
-  50024: t("#919EAB", 0.24),
-  50032: t("#919EAB", 0.32),
-  50048: t("#919EAB", 0.48),
-  50056: t("#919EAB", 0.56),
-  50080: t("#919EAB", 0.8)
-}, D = {
-  primary: c(b.light, b.main),
+  5008: e("#919EAB", 0.08),
+  50012: e("#919EAB", 0.12),
+  50016: e("#919EAB", 0.16),
+  50024: e("#919EAB", 0.24),
+  50032: e("#919EAB", 0.32),
+  50048: e("#919EAB", 0.48),
+  50056: e("#919EAB", 0.56),
+  50080: e("#919EAB", 0.8)
+}, z = {
+  primary: c(f.light, f.main),
   info: c(y.light, y.main),
-  success: c(f.light, f.main),
-  warning: c(h.light, h.main),
-  error: c(M.light, M.main)
-}, I = {
+  success: c(v.light, v.main),
+  warning: c(L.light, L.main),
+  error: c(B.light, B.main)
+}, D = {
   violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
   blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
   green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
   yellow: ["#FFE700", "#FFEF5A", "#FFF7AE", "#FFF3D6"],
   red: ["#FF6C40", "#FF8F6D", "#FFBD98", "#FFF2D4"]
-}, z = {
-  normal: r.crayonBlue[50],
-  hover: r.crayonBlue[70]
+}, H = {
+  normal: t.crayonBlue[50],
+  hover: t.crayonBlue[70]
 }, G = {
-  normal: r.acidGreen[60],
-  hover: r.acidGreen[70]
+  normal: t.acidGreen[60],
+  hover: t.acidGreen[70]
 }, E = {
-  normal: r.flameRed[40],
-  hover: r.flameRed[60]
-}, H = {
-  normal: r.flameRed[60],
-  hover: r.flameRed[70]
+  normal: t.flameRed[40],
+  hover: t.flameRed[60]
 }, P = {
-  default: t(r.coolGrey[50], 0.24),
-  transition: t(r.coolGrey[50], 0.08)
+  normal: t.flameRed[60],
+  hover: t.flameRed[70]
+}, W = {
+  default: e(t.coolGrey[50], 0.24),
+  transition: e(t.coolGrey[50], 0.08)
 }, l = {
-  info: { ...z },
+  info: { ...H },
   success: { ...G },
   error: { ...E },
-  warning: { ...H },
-  skeleton: { ...P }
-}, k = {
+  warning: { ...P },
+  skeleton: { ...W }
+}, h = {
   common: { black: "#000", white: "#fff" },
-  primary: { ...b },
+  primary: { ...f },
   state: {
     ...l
   },
-  patronus: { ...r },
+  patronus: { ...t },
   opacity: { ...A },
-  secondary: { ...T, contrastText: "#fff" },
+  secondary: { ...m, contrastText: "#fff" },
   info: { ...y, contrastText: "#fff" },
-  success: { ...f, contrastText: x[800] },
-  warning: { ...h, contrastText: x[800] },
-  error: { ...M, contrastText: "#fff" },
+  success: { ...v, contrastText: x[800] },
+  warning: { ...L, contrastText: x[800] },
+  error: { ...B, contrastText: "#fff" },
   grey: x,
-  gradients: D,
-  chart: I,
+  gradients: z,
+  chart: D,
   divider: x[50024],
   action: {
     hoverOpacity: 0.08,
     disabledOpacity: 0.48
   }
-}, d = {
+}, s = {
   light: {
-    ...k,
+    ...h,
     mode: "light",
     text: {
-      primary: r.ashBlak[10],
-      secondary: r.coolGrey[40],
-      disabled: r.coolGrey[10]
+      primary: t.ashBlak[10],
+      secondary: t.coolGrey[40],
+      disabled: t.coolGrey[10]
     },
     background: {
       paper: "#fff0",
-      default: r.marbleLight[10],
-      neutral: r.marbleLight[30],
-      background: r.marbleLight[50]
+      default: t.marbleLight[10],
+      neutral: t.marbleLight[30],
+      background: t.marbleLight[50]
     },
     grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
   },
   dark: {
-    ...k,
+    ...h,
     mode: "dark",
     text: {
-      primary: r.marbleLight[30],
-      secondary: r.coolGrey[20],
-      disabled: r.coolGrey[50]
+      primary: t.marbleLight[30],
+      secondary: t.coolGrey[20],
+      disabled: t.coolGrey[50]
     },
     background: {
       paper: "#fff0",
-      default: r.ashBlak[10],
-      neutral: r.ashBlak[30],
-      background: r.ashBlak[50]
+      default: t.ashBlak[10],
+      neutral: t.ashBlak[30],
+      background: t.ashBlak[50]
     },
     grid: { sectionHeader: "#29313A", divider: "#3E464F", rowHover: "#1F262F" }
   }
 }, g = [
   {
     name: "patronus",
-    lighter: r.patronusBlue[70],
-    light: r.patronusBlue[60],
-    main: r.patronusBlue[50],
-    dark: r.patronusBlue[40],
-    darker: r.patronusBlue[20],
-    contrastText: r.marbleLight[10]
+    lighter: t.patronusBlue[70],
+    light: t.patronusBlue[60],
+    main: t.patronusBlue[50],
+    dark: t.patronusBlue[40],
+    darker: t.patronusBlue[20],
+    contrastText: t.marbleLight[10]
   },
   {
     name: "turqui",
-    lighter: r.turquiBlue[80],
-    light: r.turquiBlue[60],
-    main: r.turquiBlue[40],
-    dark: r.turquiBlue[50],
-    darker: r.turquiBlue[20],
-    contrastText: r.marbleLight[10]
+    lighter: t.turquiBlue[80],
+    light: t.turquiBlue[60],
+    main: t.turquiBlue[40],
+    dark: t.turquiBlue[50],
+    darker: t.turquiBlue[20],
+    contrastText: t.marbleLight[10]
   },
   {
     name: "grass",
-    lighter: r.grassGreen[80],
-    light: r.grassGreen[50],
-    main: r.grassGreen[60],
-    dark: r.grassGreen[40],
-    darker: r.grassGreen[20],
-    contrastText: r.marbleLight[10]
+    lighter: t.grassGreen[80],
+    light: t.grassGreen[50],
+    main: t.grassGreen[60],
+    dark: t.grassGreen[40],
+    darker: t.grassGreen[20],
+    contrastText: t.marbleLight[10]
   },
   {
     name: "candy",
-    lighter: r.candyRed[70],
-    light: r.candyRed[60],
-    main: r.candyRed[50],
-    dark: r.candyRed[40],
-    darker: r.candyRed[30],
-    contrastText: r.marbleLight[10]
+    lighter: t.candyRed[70],
+    light: t.candyRed[60],
+    main: t.candyRed[50],
+    dark: t.candyRed[40],
+    darker: t.candyRed[30],
+    contrastText: t.marbleLight[10]
   },
   {
     name: "blaze",
-    lighter: r.blazeOrange[80],
-    light: r.blazeOrange[50],
-    main: r.blazeOrange[60],
-    dark: r.blazeOrange[40],
-    darker: r.blazeOrange[20],
-    contrastText: r.marbleLight[10]
+    lighter: t.blazeOrange[80],
+    light: t.blazeOrange[50],
+    main: t.blazeOrange[60],
+    dark: t.blazeOrange[40],
+    darker: t.blazeOrange[20],
+    contrastText: t.marbleLight[10]
   }
-], C = g[0], W = g[1], _ = g[2], q = g[3], N = g[4];
-function ir(o) {
+], I = g[0], q = g[1], N = g[2], j = g[3], _ = g[4];
+function b(o) {
   try {
     return {
-      patronus: C,
-      turqui: W,
-      grass: _,
-      candy: q,
-      blaze: N
+      patronus: I,
+      turqui: q,
+      grass: N,
+      candy: j,
+      blaze: _
     }[o];
   } catch {
   }
-  return C;
+  return I;
 }
-const nr = (o, e) => {
+const V = (o, r) => {
   let a = {};
   switch (o) {
     case "patronus":
       a = {
         light: {
-          active12: n(r.patronusBlue[50], 0.12),
-          active: r.patronusBlue[50],
-          focus: r.patronusBlue[70],
-          hover: r.patronusBlue[60],
-          default: n(r.coolGrey[70], 0.12),
+          active12: n(t?.patronusBlue[50], 0.12),
+          active: t?.patronusBlue[50],
+          focus: t?.patronusBlue[70],
+          hover: t?.patronusBlue[60],
+          default: n(t?.coolGrey[70], 0.12),
           ...l
         },
         dark: {
-          active12: n(r.patronusBlue[50], 0.12),
-          active: r.patronusBlue[50],
-          focus: r.patronusBlue[70],
-          hover: r.patronusBlue[60],
-          default: n(r.marbleLight[10], 0.12),
+          active12: n(t?.patronusBlue[50], 0.12),
+          active: t?.patronusBlue[50],
+          focus: t?.patronusBlue[30],
+          hover: t?.patronusBlue[40],
+          default: n(t?.marbleLight[10], 0.12),
           ...l
         }
       };
@@ -435,19 +435,19 @@ const nr = (o, e) => {
     case "turqui":
       a = {
         light: {
-          active12: n(r.turquiBlue[50], 0.12),
-          active: r.turquiBlue[50],
-          focus: r.turquiBlue[70],
-          hover: r.turquiBlue[60],
-          default: n(r.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(r.patronusBlue[50], 0.12),
-          active: r.patronusBlue[50],
-          focus: r.patronusBlue[30],
-          hover: r.patronusBlue[40],
-          default: n(r.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 nr = (o, e) => {
     case "grass":
       a = {
         light: {
-          active12: n(r.grassGreen[50], 0.12),
-          active: r.grassGreen[50],
-          focus: r.grassGreen[70],
-          hover: r.grassGreen[60],
-          default: n(r.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(r.grassGreen[50], 0.12),
-          active: r.grassGreen[50],
-          focus: r.grassGreen[30],
-          hover: r.grassGreen[40],
-          default: n(r.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 nr = (o, e) => {
     case "candy":
       a = {
         light: {
-          active12: n(r.candyRed[50], 0.12),
-          active: r.candyRed[50],
-          focus: r.candyRed[70],
-          hover: r.candyRed[60],
-          default: n(r.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(r.candyRed[50], 0.12),
-          active: r.candyRed[50],
-          focus: r.candyRed[30],
-          hover: r.candyRed[40],
-          default: n(r.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 nr = (o, e) => {
     case "blaze":
       a = {
         light: {
-          active12: n(r.blazeOrange[50], 0.12),
-          active: r.blazeOrange[50],
-          focus: r.blazeOrange[70],
-          hover: r.blazeOrange[60],
-          default: n(r.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(r.patronusBlue[50], 0.12),
-          active: r.patronusBlue[50],
-          focus: r.patronusBlue[70],
-          hover: r.patronusBlue[60],
-          default: n(r.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,64 +515,64 @@ const nr = (o, e) => {
     default:
       a = {
         light: {
-          active12: n(r.turquiBlue[50], 0.12),
-          active: r.turquiBlue[50],
-          focus: r.turquiBlue[70],
-          hover: r.turquiBlue[60],
-          default: n(r.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(r.patronusBlue[50], 0.12),
-          active: r.patronusBlue[50],
-          focus: r.patronusBlue[30],
-          hover: r.patronusBlue[40],
-          default: n(r.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
         }
       };
       break;
   }
-  return e === "light" ? { ...a.light } : { ...a.dark };
+  return r === "light" ? { ...a.light } : { ...a.dark };
 };
 function Y(o) {
   return Math.round(parseFloat(o) * 16);
 }
-function s(o) {
+function d(o) {
   return `${o / 16}rem`;
 }
-function p({ sm: o, md: e, lg: a }) {
+function p({ sm: o, md: r, lg: a }) {
   return {
     "@media (min-width:0px)": {
       fontSize: `${o}px`
     },
     "@media (min-width:900px)": {
-      fontSize: `${e}px`
+      fontSize: `${r}px`
     },
     "@media (min-width:1200px)": {
       fontSize: `${a}px`
     }
   };
 }
-function j() {
-  return [...R().breakpoints.keys].reverse().reduce((a, i) => {
-    const v = $("up", i);
-    return !a && v ? i : a;
+function U() {
+  return [...F().breakpoints.keys].reverse().reduce((a, i) => {
+    const k = $("up", i);
+    return !a && k ? i : a;
   }, null) || "xs";
 }
-function pr(o) {
-  const e = R(), a = j(), i = e.breakpoints.up(a === "xl" ? "lg" : a), S = (o === "h1" || o === "h2" || o === "h3" || o === "h4" || o === "h5" || o === "h6") && e.typography[o][i] ? e.typography[o][i] : e.typography[o], B = Y(S.fontSize), L = Number(e.typography[o].lineHeight) * B, { fontWeight: O, letterSpacing: w } = e.typography[o];
-  return { fontSize: B, lineHeight: L, fontWeight: O, letterSpacing: w };
+function st(o) {
+  const r = F(), a = U(), i = r.breakpoints.up(a === "xl" ? "lg" : a), w = (o === "h1" || o === "h2" || o === "h3" || o === "h4" || o === "h5" || o === "h6") && r.typography[o][i] ? r.typography[o][i] : r.typography[o], C = Y(w.fontSize), R = Number(r.typography[o].lineHeight) * C, { fontWeight: O, letterSpacing: T } = r.typography[o];
+  return { fontSize: C, lineHeight: R, fontWeight: O, letterSpacing: T };
 }
-const V = "Poppins, sans-serif", U = {
-  fontFamily: V,
+const K = "Poppins, sans-serif", J = {
+  fontFamily: K,
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
   h1: {
     fontWeight: 700,
     lineHeight: 1.5,
-    ...p({ sm: 40, md: 40, lg: 40 })
+    ...p({ sm: 38, md: 40, lg: 40 })
   },
   h2: {
     fontWeight: 700,
@@ -582,7 +582,7 @@ const V = "Poppins, sans-serif", U = {
   h3: {
     fontWeight: 600,
     lineHeight: 1.5,
-    ...p({ sm: 32, md: 32, lg: 32 })
+    ...p({ sm: 30, md: 32, lg: 32 })
   },
   h4: {
     fontWeight: 700,
@@ -592,7 +592,7 @@ const V = "Poppins, sans-serif", U = {
   h5: {
     fontWeight: 600,
     lineHeight: 1.5,
-    ...p({ sm: 24, md: 24, lg: 24 })
+    ...p({ sm: 22, md: 24, lg: 24 })
   },
   h6: {
     fontWeight: 700,
@@ -612,7 +612,7 @@ const V = "Poppins, sans-serif", U = {
   paragraph: {
     fontWeight: 400,
     lineHeight: 1.429,
-    ...p({ sm: 16, md: 20, lg: 20 })
+    ...p({ sm: 16, md: 14, lg: 14 })
   },
   paragraphDens: {
     fontWeight: 600,
@@ -622,12 +622,12 @@ const V = "Poppins, sans-serif", U = {
   subtitle1: {
     fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: s(14)
+    fontSize: d(14)
   },
   subtitle2: {
     fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: s(12)
+    fontSize: d(12)
   },
   body: {
     fontWeight: 400,
@@ -637,37 +637,37 @@ const V = "Poppins, sans-serif", U = {
   bodyDens: {
     fontWeight: 700,
     lineHeight: 1.143,
-    ...p({ sm: 14, md: 12, lg: 12 })
+    ...p({ sm: 16, md: 12, lg: 12 })
   },
   body0: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: s(16)
+    fontSize: d(16)
   },
   body1: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: s(14)
+    fontSize: d(14)
   },
   body2: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: s(12)
+    fontSize: d(12)
   },
   caption: {
     lineHeight: 1.5,
-    fontSize: s(11)
+    fontSize: d(11)
   },
   overline: {
     fontWeight: 700,
     lineHeight: 1.5,
-    fontSize: s(12),
+    fontSize: d(12),
     textTransform: "uppercase"
   },
   button: {
     fontWeight: 700,
     lineHeight: 24 / 14,
-    fontSize: s(14),
+    fontSize: d(14),
     textTransform: "capitalize"
   },
   action: {
@@ -675,72 +675,87 @@ const V = "Poppins, sans-serif", U = {
     lineHeight: 1.667,
     ...p({ sm: 14, md: 12, lg: 12 })
   }
-}, lr = {
-  typography: U
-}, K = d.light.grey[500], J = "#000000", m = (o) => {
-  const e = t(o, 0.2), a = t(o, 0.14), i = t(o, 0.12);
+}, Q = s.light.grey[500], X = "#000000", S = (o) => {
+  const r = e(o, 0.2), a = e(o, 0.14), i = e(o, 0.12);
   return [
     "none",
-    `0px 2px 1px -1px ${e},0px 1px 1px 0px ${a},0px 1px 3px 0px ${i}`,
-    `0px 3px 1px -2px ${e},0px 2px 2px 0px ${a},0px 1px 5px 0px ${i}`,
-    `0px 3px 3px -2px ${e},0px 3px 4px 0px ${a},0px 1px 8px 0px ${i}`,
-    `0px 2px 4px -1px ${e},0px 4px 5px 0px ${a},0px 1px 10px 0px ${i}`,
-    `0px 3px 5px -1px ${e},0px 5px 8px 0px ${a},0px 1px 14px 0px ${i}`,
-    `0px 3px 5px -1px ${e},0px 6px 10px 0px ${a},0px 1px 18px 0px ${i}`,
-    `0px 4px 5px -2px ${e},0px 7px 10px 1px ${a},0px 2px 16px 1px ${i}`,
-    `0px 5px 5px -3px ${e},0px 8px 10px 1px ${a},0px 3px 14px 2px ${i}`,
-    `0px 5px 6px -3px ${e},0px 9px 12px 1px ${a},0px 3px 16px 2px ${i}`,
-    `0px 6px 6px -3px ${e},0px 10px 14px 1px ${a},0px 4px 18px 3px ${i}`,
-    `0px 6px 7px -4px ${e},0px 11px 15px 1px ${a},0px 4px 20px 3px ${i}`,
-    `0px 7px 8px -4px ${e},0px 12px 17px 2px ${a},0px 5px 22px 4px ${i}`,
-    `0px 7px 8px -4px ${e},0px 13px 19px 2px ${a},0px 5px 24px 4px ${i}`,
-    `0px 7px 9px -4px ${e},0px 14px 21px 2px ${a},0px 5px 26px 4px ${i}`,
-    `0px 8px 9px -5px ${e},0px 15px 22px 2px ${a},0px 6px 28px 5px ${i}`,
-    `0px 8px 10px -5px ${e},0px 16px 24px 2px ${a},0px 6px 30px 5px ${i}`,
-    `0px 8px 11px -5px ${e},0px 17px 26px 2px ${a},0px 6px 32px 5px ${i}`,
-    `0px 9px 11px -5px ${e},0px 18px 28px 2px ${a},0px 7px 34px 6px ${i}`,
-    `0px 9px 12px -6px ${e},0px 19px 29px 2px ${a},0px 7px 36px 6px ${i}`,
-    `0px 10px 13px -6px ${e},0px 20px 31px 3px ${a},0px 8px 38px 7px ${i}`,
-    `0px 10px 13px -6px ${e},0px 21px 33px 3px ${a},0px 8px 40px 7px ${i}`,
-    `0px 10px 14px -6px ${e},0px 22px 35px 3px ${a},0px 8px 42px 7px ${i}`,
-    `0px 11px 14px -7px ${e},0px 23px 36px 3px ${a},0px 9px 44px 8px ${i}`,
-    `0px 11px 15px -7px ${e},0px 24px 38px 3px ${a},0px 9px 46px 8px ${i}`
+    `0px 2px 1px -1px ${r},0px 1px 1px 0px ${a},0px 1px 3px 0px ${i}`,
+    `0px 3px 1px -2px ${r},0px 2px 2px 0px ${a},0px 1px 5px 0px ${i}`,
+    `0px 3px 3px -2px ${r},0px 3px 4px 0px ${a},0px 1px 8px 0px ${i}`,
+    `0px 2px 4px -1px ${r},0px 4px 5px 0px ${a},0px 1px 10px 0px ${i}`,
+    `0px 3px 5px -1px ${r},0px 5px 8px 0px ${a},0px 1px 14px 0px ${i}`,
+    `0px 3px 5px -1px ${r},0px 6px 10px 0px ${a},0px 1px 18px 0px ${i}`,
+    `0px 4px 5px -2px ${r},0px 7px 10px 1px ${a},0px 2px 16px 1px ${i}`,
+    `0px 5px 5px -3px ${r},0px 8px 10px 1px ${a},0px 3px 14px 2px ${i}`,
+    `0px 5px 6px -3px ${r},0px 9px 12px 1px ${a},0px 3px 16px 2px ${i}`,
+    `0px 6px 6px -3px ${r},0px 10px 14px 1px ${a},0px 4px 18px 3px ${i}`,
+    `0px 6px 7px -4px ${r},0px 11px 15px 1px ${a},0px 4px 20px 3px ${i}`,
+    `0px 7px 8px -4px ${r},0px 12px 17px 2px ${a},0px 5px 22px 4px ${i}`,
+    `0px 7px 8px -4px ${r},0px 13px 19px 2px ${a},0px 5px 24px 4px ${i}`,
+    `0px 7px 9px -4px ${r},0px 14px 21px 2px ${a},0px 5px 26px 4px ${i}`,
+    `0px 8px 9px -5px ${r},0px 15px 22px 2px ${a},0px 6px 28px 5px ${i}`,
+    `0px 8px 10px -5px ${r},0px 16px 24px 2px ${a},0px 6px 30px 5px ${i}`,
+    `0px 8px 11px -5px ${r},0px 17px 26px 2px ${a},0px 6px 32px 5px ${i}`,
+    `0px 9px 11px -5px ${r},0px 18px 28px 2px ${a},0px 7px 34px 6px ${i}`,
+    `0px 9px 12px -6px ${r},0px 19px 29px 2px ${a},0px 7px 36px 6px ${i}`,
+    `0px 10px 13px -6px ${r},0px 20px 31px 3px ${a},0px 8px 38px 7px ${i}`,
+    `0px 10px 13px -6px ${r},0px 21px 33px 3px ${a},0px 8px 40px 7px ${i}`,
+    `0px 10px 14px -6px ${r},0px 22px 35px 3px ${a},0px 8px 42px 7px ${i}`,
+    `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}`
   ];
-}, sr = (o) => {
-  const e = {
-    info: `0px 2px 8px 0px ${t(r.patronusBlue[50], 0.2)}`,
-    secondary: `0px 2px 8px 0px ${t(d.light.secondary.main, 0.24)}`,
-    success: `0px 2px 8px 0px ${t(r.acidGreen[50], 0.2)}`,
-    warning: `0px 2px 8px 0px ${t(r.middleYellow[50], 0.2)}`,
-    error: `0px 2px 8px 0px ${t(r.flameRed[50], 0.2)}`,
-    card: `0 0 2px 0 ${t(d.light.grey[500], 0.2)}, 0 12px 24px -4px ${t(
-      d.light.grey[500],
+}, 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)}`,
+    success: `0px 2px 8px 0px ${e(t.acidGreen[50], 0.2)}`,
+    warning: `0px 2px 8px 0px ${e(t.middleYellow[50], 0.2)}`,
+    error: `0px 2px 8px 0px ${e(t.flameRed[50], 0.2)}`,
+    card: `0 0 2px 0 ${e(s.light.grey[500], 0.2)}, 0 12px 24px -4px ${e(
+      s.light.grey[500],
       0.12
     )}`,
-    dialog: `-40px 40px 80px -8px ${t(d.light.common.black, 0.24)}`,
-    dropdown: `0 0 2px 0 ${t(d.light.grey[500], 0.24)}, -20px 20px 40px -4px ${t(
-      d.light.grey[500],
+    dialog: `-40px 40px 80px -8px ${e(s.light.common.black, 0.24)}`,
+    dropdown: `0 0 2px 0 ${e(s.light.grey[500], 0.24)}, -20px 20px 40px -4px ${e(
+      s.light.grey[500],
       0.24
     )}`
   };
   return o === "light" ? {
-    z1: `0px 1px 2px ${t(r.coolGrey[70], 0.12)}`,
-    z2: `0px 2px 2px 1px ${t(r.coolGrey[70], 0.12)}`,
-    z3: `0px 4px 8px ${t(r.coolGrey[70], 0.16)}`,
-    z4: `0px 8px 16px 1px ${t(r.coolGrey[70], 0.16)}`,
-    ...e
+    z1: `0px 1px 2px ${e(t.coolGrey[70], 0.12)}`,
+    z2: `0px 2px 2px 1px ${e(t.coolGrey[70], 0.12)}`,
+    z3: `0px 4px 8px ${e(t.coolGrey[70], 0.16)}`,
+    z4: `0px 8px 16px 1px ${e(t.coolGrey[70], 0.16)}`,
+    ...r
   } : {
-    z1: `0px 1px 2px ${t(r.ashBlak[50], 0.4)}`,
-    z2: `0px 2px 2px 1px ${t(r.ashBlak[50], 0.4)}`,
-    z3: `0px 4px 8px 1px ${t(r.ashBlak[60], 0.4)}`,
-    z4: `0px 8px 16px 4px ${t(r.ashBlak[60], 0.4)}`,
-    ...e
+    z1: `0px 1px 2px ${e(t.ashBlak[50], 0.4)}`,
+    z2: `0px 2px 2px 1px ${e(t.ashBlak[50], 0.4)}`,
+    z3: `0px 4px 8px 1px ${e(t.ashBlak[60], 0.4)}`,
+    z4: `0px 8px 16px 4px ${e(t.ashBlak[60], 0.4)}`,
+    ...r
   };
-}, dr = {
-  light: m(K),
-  dark: m(J)
+}, oo = {
+  light: S(Q),
+  dark: S(X)
+}, ut = {
+  typography: J,
+  palette: {
+    ...s.light,
+    primary: b("patronus"),
+    state: { ...V("patronus", "light") },
+    representative: b("patronus").light
+  },
+  shape: { borderRadius: 8 },
+  direction: "rtl",
+  shadows: oo.light,
+  customShadows: {
+    primary: `0 8px 16px 0 ${M(b("patronus").main, 0.2)}`,
+    ...Z("dark")
+  },
+  stretch: !0,
+  spacing: (o) => `${0.5 * o}rem`
 };
-function Q(o) {
+function to(o) {
   return {
     MuiAvatar: {
       styleOverrides: {
@@ -765,7 +780,7 @@ function Q(o) {
     }
   };
 }
-function X(o) {
+function eo(o) {
   return {
     MuiButton: {
       styleOverrides: {
@@ -780,28 +795,28 @@ function X(o) {
         },
         containedInherit: {
           color: o.palette.grey[800],
-          boxShadow: o.customShadows.z1,
+          boxShadow: o.customShadows?.z1,
           "&:hover": {
             backgroundColor: o.palette.grey[400]
           }
         },
         containedPrimary: {
-          boxShadow: o.customShadows.z4
+          boxShadow: o.customShadows?.z4
         },
         containedSecondary: {
-          boxShadow: o.customShadows.secondary
+          boxShadow: o.customShadows?.secondary
         },
         containedInfo: {
-          boxShadow: o.customShadows.info
+          boxShadow: o.customShadows?.info
         },
         containedSuccess: {
-          boxShadow: o.customShadows.success
+          boxShadow: o.customShadows?.success
         },
         containedWarning: {
-          boxShadow: o.customShadows.warning
+          boxShadow: o.customShadows?.warning
         },
         containedError: {
-          boxShadow: o.customShadows.error
+          boxShadow: o.customShadows?.error
         },
         outlinedInherit: {
           border: `1px solid ${o.palette.grey[50032]}`,
@@ -818,7 +833,7 @@ function X(o) {
     }
   };
 }
-function Z(o) {
+function ro(o) {
   return {
     MuiIconButton: {
       styleOverrides: {
@@ -842,7 +857,7 @@ function Z(o) {
     }
   };
 }
-function oo(o) {
+function ao(o) {
   return console.log("test theme", o.palette), {
     MuiFab: {
       defaultProps: {
@@ -850,20 +865,20 @@ function oo(o) {
       },
       styleOverrides: {
         root: {
-          boxShadow: o.customShadows.z4,
+          boxShadow: o.customShadows?.z4,
           "&:hover": {
             boxShadow: "none",
             backgroundColor: o.palette.grey[400]
           }
         },
         primary: {
-          boxShadow: o.customShadows.primary,
+          boxShadow: o.customShadows?.primary,
           "&:hover": {
             backgroundColor: o.palette.primary.dark
           }
         },
         secondary: {
-          boxShadow: o.customShadows.secondary,
+          boxShadow: o.customShadows?.secondary,
           "&:hover": {
             backgroundColor: o.palette.secondary.dark
           }
@@ -877,13 +892,13 @@ function oo(o) {
     }
   };
 }
-function ro(o) {
+function io(o) {
   return {
     MuiCard: {
       styleOverrides: {
         root: {
           position: "relative",
-          boxShadow: o.customShadows.card,
+          boxShadow: o.customShadows?.card,
           borderRadius: Number(o.shape.borderRadius) * 2,
           zIndex: 0
         }
@@ -909,7 +924,7 @@ function ro(o) {
     }
   };
 }
-function to(o) {
+function no(o) {
   return {
     MuiTabs: {
       styleOverrides: {
@@ -966,7 +981,7 @@ function to(o) {
     }
   };
 }
-function eo(o) {
+function po(o) {
   return {
     MuiMenuItem: {
       styleOverrides: {
@@ -982,7 +997,7 @@ function eo(o) {
     }
   };
 }
-function ao(o) {
+function lo(o) {
   return {
     MuiLink: {
       defaultProps: {
@@ -998,7 +1013,7 @@ function ao(o) {
     }
   };
 }
-function io(o) {
+function so(o) {
   return {
     MuiListItemIcon: {
       styleOverrides: {
@@ -1031,7 +1046,7 @@ function io(o) {
     }
   };
 }
-function no(o) {
+function uo(o) {
   return {
     MuiTableRow: {
       styleOverrides: {
@@ -1117,7 +1132,7 @@ function no(o) {
     }
   };
 }
-function po(o) {
+function co(o) {
   return {
     MuiBadge: {
       styleOverrides: {
@@ -1130,7 +1145,7 @@ function po(o) {
     }
   };
 }
-function lo(o) {
+function go(o) {
   return {
     MuiPaper: {
       defaultProps: {
@@ -1196,7 +1211,7 @@ function lo(o) {
     }
   };
 }
-function so(o) {
+function xo(o) {
   return {
     MuiFormControl: {
       styleOverrides: {
@@ -1278,7 +1293,7 @@ function so(o) {
     }
   };
 }
-function uo(o) {
+function bo(o) {
   return {
     MuiInputLabel: {
       styleOverrides: {
@@ -1293,7 +1308,7 @@ function uo(o) {
     }
   };
 }
-function co(o) {
+function Mo(o) {
   return {
     MuiRadio: {
       styleOverrides: {
@@ -1310,23 +1325,303 @@ function co(o) {
     }
   };
 }
-function go(o) {
-  const e = o.palette.mode === "light";
+function fo(o) {
+  const r = o.palette.mode === "light";
   return {
     MuiDrawer: {
       styleOverrides: {
+        root: {
+          "&.M4LSideBar-drawer": {
+            test: "root",
+            "& .MuiPaper-root": {
+              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 ${F(
+              boxShadow: `8px 24px 24px 12px ${M(
                 o.palette.grey[900],
-                e ? 0.16 : 0.48
+                r ? 0.16 : 0.48
               )}`
             },
             "& .MuiDrawer-paperAnchorRight": {
-              boxShadow: `-8px 24px 24px 12px ${F(
+              boxShadow: `-8px 24px 24px 12px ${M(
                 o.palette.grey[900],
-                e ? 0.16 : 0.48
+                r ? 0.16 : 0.48
               )}`
             }
           }
@@ -1335,12 +1630,12 @@ function go(o) {
     }
   };
 }
-function xo(o) {
+function yo(o) {
   return {
     MuiDialog: {
       styleOverrides: {
         paper: {
-          boxShadow: o.customShadows.dialog,
+          boxShadow: o.customShadows?.dialog,
           "&.MuiPaper-rounded": {
             borderRadius: Number(o.shape.borderRadius) * 2
           },
@@ -1391,8 +1686,8 @@ function xo(o) {
     }
   };
 }
-function bo(o) {
-  const e = o.palette.mode === "light";
+function vo(o) {
+  const r = o.palette.mode === "light";
   return {
     MuiSlider: {
       defaultProps: {
@@ -1410,19 +1705,19 @@ function bo(o) {
         },
         valueLabel: {
           borderRadius: 8,
-          backgroundColor: o.palette.grey[e ? 800 : 700]
+          backgroundColor: o.palette.grey[r ? 800 : 700]
         }
       }
     }
   };
 }
-function yo(o) {
-  const e = o.palette.mode === "light";
+function Lo(o) {
+  const r = o.palette.mode === "light";
   return {
     MuiSwitch: {
       styleOverrides: {
         thumb: {
-          boxShadow: o.customShadows.z1
+          boxShadow: o.customShadows?.z1
         },
         track: {
           opacity: 1,
@@ -1432,10 +1727,10 @@ function yo(o) {
           left: 0,
           right: "auto",
           "&:not(:.Mui-checked)": {
-            color: o.palette.grey[e ? 100 : 300]
+            color: o.palette.grey[r ? 100 : 300]
           },
           "&.Mui-checked.Mui-disabled, &.Mui-disabled": {
-            color: o.palette.grey[e ? 400 : 600]
+            color: o.palette.grey[r ? 400 : 600]
           },
           "&.Mui-disabled+.MuiSwitch-track": {
             opacity: 1,
@@ -1446,7 +1741,7 @@ function yo(o) {
     }
   };
 }
-function fo(o) {
+function Bo(o) {
   return {
     MuiSvgIcon: {
       styleOverrides: {
@@ -1464,34 +1759,34 @@ function fo(o) {
     }
   };
 }
-function ho(o) {
-  const e = o.palette.mode === "light";
+function ko(o) {
+  const r = o.palette.mode === "light";
   return {
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
-          backgroundColor: o.palette.grey[e ? 800 : 700]
+          backgroundColor: o.palette.grey[r ? 800 : 700]
         },
         arrow: {
-          color: o.palette.grey[e ? 800 : 700]
+          color: o.palette.grey[r ? 800 : 700]
         }
       }
     }
   };
 }
-function Mo(o) {
+function Co(o) {
   return {
     MuiPopover: {
       styleOverrides: {
         paper: {
-          boxShadow: o.customShadows.dropdown,
+          boxShadow: o.customShadows?.dropdown,
           borderRadius: Number(o.shape.borderRadius) * 1.5
         }
       }
     }
   };
 }
-function vo(o) {
+function ho(o) {
   return {
     MuiStepConnector: {
       styleOverrides: {
@@ -1502,7 +1797,7 @@ function vo(o) {
     }
   };
 }
-function Bo(o) {
+function Io(o) {
   return {
     MuiDataGrid: {
       styleOverrides: {
@@ -1539,7 +1834,7 @@ function Bo(o) {
       styleOverrides: {
         root: {
           "& .MuiDataGrid-gridMenuList": {
-            boxShadow: o.customShadows.z4,
+            boxShadow: o.customShadows?.z4,
             borderRadius: o.shape.borderRadius
           },
           "& .MuiMenuItem-root": {
@@ -1599,7 +1894,7 @@ function Bo(o) {
     }
   };
 }
-function Fo(o) {
+function So(o) {
   return {
     MuiSkeleton: {
       defaultProps: {
@@ -1613,17 +1908,17 @@ function Fo(o) {
     }
   };
 }
-function ko(o) {
-  const e = t(o.palette.grey[900], 0.48), a = t(o.palette.grey[900], 1);
+function Fo(o) {
+  const r = e(o.palette.grey[900], 0.48), a = e(o.palette.grey[900], 1);
   return {
     MuiBackdrop: {
       styleOverrides: {
         root: {
           background: [
             "rgb(22,28,36)",
-            `-moz-linear-gradient(75deg, ${e} 0%, ${a} 100%)`,
-            `-webkit-linear-gradient(75deg, ${e} 0%, ${a} 100%)`,
-            `linear-gradient(75deg, ${e} 0%, ${a} 100%)`
+            `-moz-linear-gradient(75deg, ${r} 0%, ${a} 100%)`,
+            `-webkit-linear-gradient(75deg, ${r} 0%, ${a} 100%)`,
+            `linear-gradient(75deg, ${r} 0%, ${a} 100%)`
           ],
           "&.MuiBackdrop-invisible": {
             background: "transparent"
@@ -1633,8 +1928,8 @@ function ko(o) {
     }
   };
 }
-function Co(o) {
-  const e = o.palette.mode === "light";
+function wo(o) {
+  const r = o.palette.mode === "light";
   return {
     MuiLinearProgress: {
       styleOverrides: {
@@ -1646,7 +1941,7 @@ function Co(o) {
           borderRadius: 4
         },
         colorPrimary: {
-          backgroundColor: o.palette.primary[e ? "lighter" : "darker"]
+          backgroundColor: o.palette.primary[r ? "lighter" : "darker"]
         },
         buffer: {
           backgroundColor: "transparent"
@@ -1655,7 +1950,7 @@ function Co(o) {
     }
   };
 }
-function mo(o) {
+function Ro(o) {
   return {
     MuiTimelineDot: {
       styleOverrides: {
@@ -1673,7 +1968,7 @@ function mo(o) {
     }
   };
 }
-function Ro(o) {
+function Oo(o) {
   return {
     MuiCheckbox: {
       styleOverrides: {
@@ -1692,7 +1987,7 @@ function Ro(o) {
     }
   };
 }
-function So(o) {
+function To(o) {
   return {
     MuiAccordion: {
       styleOverrides: {
@@ -1767,7 +2062,7 @@ function So(o) {
     }
   };
 }
-function Lo(o) {
+function $o(o) {
   return {
     MuiTypography: {
       defaultProps: {
@@ -1786,7 +2081,7 @@ function Lo(o) {
     }
   };
 }
-function Oo(o) {
+function Ao(o) {
   return {
     MuiPaginationItem: {
       styleOverrides: {
@@ -1798,9 +2093,9 @@ function Oo(o) {
         textPrimary: {
           "&.Mui-selected": {
             color: o.palette.primary.main,
-            backgroundColor: t(o.palette.primary.main, 0.08),
+            backgroundColor: e(o.palette.primary.main, 0.08),
             "&:hover, &.Mui-focusVisible": {
-              backgroundColor: `${t(
+              backgroundColor: `${e(
                 o.palette.primary.main,
                 0.24
               )} !important`
@@ -1812,15 +2107,15 @@ function Oo(o) {
         },
         outlinedPrimary: {
           "&.Mui-selected": {
-            backgroundColor: t(o.palette.primary.main, 0.08),
-            border: `1px solid ${t(o.palette.primary.main, 0.24)}`
+            backgroundColor: e(o.palette.primary.main, 0.08),
+            border: `1px solid ${e(o.palette.primary.main, 0.24)}`
           }
         }
       }
     }
   };
 }
-function wo(o) {
+function mo(o) {
   return {
     MuiBreadcrumbs: {
       styleOverrides: {
@@ -1832,24 +2127,24 @@ function wo(o) {
     }
   };
 }
-function $o(o) {
-  const e = (a) => ({
+function zo(o) {
+  const r = (a) => ({
     props: { variant: "contained", color: a },
-    style: { boxShadow: o.customShadows.primary }
+    style: { boxShadow: o.customShadows?.primary }
   });
   return {
     MuiButtonGroup: {
       variants: [
         {
           props: { variant: "contained", color: "inherit" },
-          style: { boxShadow: o.customShadows.z4 }
-        },
-        e("primary"),
-        e("secondary"),
-        e("info"),
-        e("success"),
-        e("warning"),
-        e("error"),
+          style: { boxShadow: o.customShadows?.z4 }
+        },
+        r("primary"),
+        r("secondary"),
+        r("info"),
+        r("success"),
+        r("warning"),
+        r("error"),
         {
           props: { disabled: !0 },
           style: {
@@ -1874,7 +2169,7 @@ function $o(o) {
     }
   };
 }
-function Ao(o) {
+function Do(o) {
   return {
     MuiCssBaseline: {
       styleOverrides: {
@@ -1917,7 +2212,7 @@ function Ao(o) {
     }
   };
 }
-function To(o) {
+function Ho(o) {
   return {
     MuiAutocomplete: {
       styleOverrides: {
@@ -1927,7 +2222,7 @@ function To(o) {
           }
         },
         paper: {
-          boxShadow: o.customShadows.dropdown
+          boxShadow: o.customShadows?.dropdown
         },
         listbox: {
           padding: o.spacing(0, 1),
@@ -1941,19 +2236,19 @@ function To(o) {
     }
   };
 }
-const u = (o, e) => ({
-  props: { color: e },
+const u = (o, r) => ({
+  props: { color: r },
   style: {
     "&:hover": {
-      borderColor: t(o.palette[e].main, 0.48),
-      backgroundColor: t(o.palette[e].main, o.palette.action.hoverOpacity)
+      borderColor: e(o.palette[r].main, 0.48),
+      backgroundColor: e(o.palette[r].main, o.palette.action.hoverOpacity)
     },
     "&.Mui-selected": {
-      borderColor: t(o.palette[e].main, 0.48)
+      borderColor: e(o.palette[r].main, 0.48)
     }
   }
 });
-function Do(o) {
+function Go(o) {
   return {
     MuiToggleButton: {
       variants: [
@@ -1989,7 +2284,7 @@ function Do(o) {
     }
   };
 }
-function Io(o) {
+function Eo(o) {
   return {
     MuiFormControlLabel: {
       styleOverrides: {
@@ -2014,7 +2309,7 @@ function Io(o) {
     }
   };
 }
-function zo(o) {
+function Po(o) {
   return {
     MuiLoadingButton: {
       styleOverrides: {
@@ -2038,56 +2333,335 @@ function zo(o) {
     }
   };
 }
-const Go = (o) => ({
+const Wo = (o) => ({
   M4LBruceTest: {
     styleOverrides: {}
   }
-}), Eo = (o) => ({
+}), qo = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {}
   }
-}), Ho = (o) => ({
+}), No = (o) => ({
   M4LRHFTextFieldPassword: {
     styleOverrides: {
-      ["&.M4LRHFTextFieldPassword-root"]: {
-        [".M4LRHFTextField-root .MuiTextField-root"]: {
-          test: "root",
-          display: "flex",
-          flexDirection: "column",
-          gap: o.spacing(1)
-        }
+      "&.M4LRHFTextFieldPassword-root": {
+        width: "100%"
       }
     }
   }
-}), Po = (o) => ({
+}), jo = (o) => ({
   M4LRHFTextField: {
-    styleOverrides: {}
+    styleOverrides: {
+      "&.M4LRHFTextField-root": {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        gap: "4px",
+        "& .M4LRHFTextField-label": {
+          color: o.palette.text.secondary,
+          transition: "all .5s ease"
+        },
+        "& .MuiInputBase-root": {
+          padding: "0px",
+          "& .MuiInputBase-input": {
+            color: o.palette.text.secondary,
+            padding: "0px",
+            backgroundColor: "transparent",
+            ...o.typography.body
+          },
+          "& .MuiInputAdornment-root": {
+            margin: "0px",
+            padding: "0px"
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.text.secondary,
+            transition: "all .5s ease"
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.palette.text.secondary,
+            borderRadius: "4px",
+            inset: "0px",
+            transition: "all .5s ease",
+            "& legend": {
+              display: "none"
+            }
+          }
+        },
+        "&:hover": {
+          "& .M4LRHFTextField-label": {
+            color: o.palette.state?.hover
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            borderColor: o.palette.state?.hover,
+            boxShadow: `0px 1px 8px ${n(o.palette.primary.main, 0.32)}`
+          },
+          "& .MuiInputBase-input": {
+            color: o.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.state?.hover
+          }
+        },
+        "&.M4LRHFTextField-isFocus": {
+          "& .M4LRHFTextField-label": {
+            color: o.palette.state?.active
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            transition: "all .1s ease",
+            border: "2px solid",
+            borderColor: o.palette.state?.active,
+            boxShadow: `0px 1px 8px ${n(o.palette.primary.main, 0.32)}`
+          },
+          "& .MuiInputBase-input": {
+            color: o.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.state?.active
+          }
+        },
+        "&.M4LRHFTextField-variantError": {
+          "& .M4LRHFTextField-label": {
+            color: o.palette.state?.error.normal
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.palette.state?.error.normal
+          },
+          "& .MuiInputBase-input": {
+            color: o.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.state?.error.normal
+          },
+          "&:hover": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: o.customShadows?.error
+            }
+          },
+          "&.M4LRHFTextField-isFocus": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: o.customShadows?.error
+            }
+          }
+        },
+        "&.M4LRHFTextField-isDisabled": {
+          "& .M4LRHFTextField-label": {
+            color: o.palette.text.disabled
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.palette.text.disabled,
+            backgroundColor: o.palette.state?.default,
+            boxShadow: "none"
+          },
+          "& .MuiInputBase-input": {
+            color: o.palette.text.disabled
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.text.disabled
+          }
+        },
+        "&.M4LRHFTextField-sizeSmall": {
+          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFTextField-skeleton": {
+            height: "24px",
+            padding: "0px 8px"
+          }
+        },
+        "&.M4LRHFTextField-sizeMedium": {
+          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFTextField-skeleton": {
+            height: "28px",
+            padding: "0px 8px"
+          }
+        }
+      }
+    }
   }
-}), Wo = (o) => ({
+}), _o = (o) => ({
   M4LIcon: {
     styleOverrides: {
       ["&.M4LIcon-root"]: {
-        test: "root"
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "fit-content",
+        transition: "transform 0.5s ease-in-out",
+        ".M4LIcon-icon": {
+          backgroundColor: o.palette.text.primary
+        },
+        ".M4LIcon-sizeExtraSmall": {
+          width: "12px",
+          height: "12px"
+        },
+        ".M4LIcon-sizeSmall": {
+          width: "16px",
+          height: "16px"
+        },
+        ".M4LIcon-sizeMedium": {
+          width: "20px",
+          height: "20px"
+        },
+        ".M4LIcon-sizeLarge": {
+          width: "28px",
+          height: "28px"
+        },
+        ".M4LIcon-sizeExtraLarge": {
+          width: "36px",
+          height: "36px"
+        },
+        ".M4LIcon-variantSkeleton": {
+          borderRadius: "4px",
+          backgroundColor: o.palette.state?.skeleton.default
+        }
       }
     }
   }
-}), _o = (o) => ({
+}), Vo = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
-        test: "root"
+        position: "relative",
+        borderRadius: "4px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        transition: "all .5s ease",
+        "& .M4LIcon-root .M4LIcon-icon": {
+          transition: "all .5s ease",
+          backgroundColor: o.palette.text.secondary
+        },
+        "&::before": {
+          boxSizing: "content-box",
+          border: "1px solid",
+          borderColor: o.palette.state?.focus,
+          borderRadius: "3px",
+          position: "absolute",
+          transition: "all .5s ease"
+        },
+        ".M4LIconButton-sizeExtraSmall&::before": {
+          width: "22px",
+          height: "22px"
+        },
+        ".M4LIconButton-sizeSmall&::before": {
+          width: "26px",
+          height: "26px"
+        },
+        ".M4LIconButton-sizeMedium&::before": {
+          width: "30px",
+          height: "30px"
+        },
+        "&.M4LIconButton-sizeExtraSmall": {
+          width: "20px",
+          height: "20px"
+        },
+        "&.M4LIconButton-sizeSmall": {
+          width: "24px",
+          height: "24px"
+        },
+        "&.M4LIconButton-sizeMedium": {
+          width: "28px",
+          height: "28px"
+        },
+        "& .MuiIconButton-root": {
+          position: "static",
+          borderRadius: "4px",
+          padding: "0"
+        },
+        "&.M4LIconButton-variantPrimary:not(&.M4LIconButton-isDisabled)": {
+          backgroundColor: o.palette.state?.default,
+          "&:hover": {
+            backgroundColor: o.palette.state?.hover,
+            "& .M4LIcon-icon": {
+              backgroundColor: "#fff"
+            }
+          },
+          "&:active": {
+            backgroundColor: o.palette.state?.active,
+            transition: "background-color .5s ease",
+            "& .M4LIcon-icon": {
+              backgroundColor: "#fff"
+            }
+          },
+          "&.M4LIconButton-isFocus": {
+            backgroundColor: o.palette.state?.active,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.patronus?.marbleLight[10]
+            },
+            "&::before": {
+              content: "''"
+            }
+          }
+        },
+        "&.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,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.state?.focus
+            }
+          },
+          "&:active": {
+            border: "1px solid",
+            borderColor: o.palette.state?.active,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.state?.active
+            }
+          },
+          "&.M4LIconButton-isFocus": {
+            border: "1px solid",
+            borderColor: o.palette.state?.active,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.state?.active
+            },
+            "&::before": {
+              content: "''"
+            }
+          }
+        },
+        "&.M4LIconButton-variantLine:not(&.M4LIconButton-isDisabled)": {
+          "&:hover": {
+            backgroundColor: o.palette.state?.active12,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.state?.focus
+            }
+          },
+          "&:active": {
+            backgroundColor: "transparent",
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.state?.active
+            }
+          },
+          "&.M4LIconButton-isFocus": {
+            backgroundColor: "transparent",
+            border: "1px solid",
+            borderColor: o.palette.state?.focus,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.state?.active
+            }
+          }
+        },
+        "&.M4LIconButton-isDisabled": {
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.text.disabled
+          }
+        },
+        "&.M4LIconButton-root .MuiSkeleton-root": {
+          borderRadius: "4px"
+        }
       }
     }
   }
-}), qo = (o) => ({
+}), Yo = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
-      ["&.M4LanguagePopover-root"]: {
-        test: "root"
-      }
+      ["&.M4LanguagePopover-root"]: {}
     }
   }
-}), No = (o) => ({
+}), Uo = (o) => ({
   M4LImageButton: {
     styleOverrides: {
       ["&.M4LImageButton-root"]: {
@@ -2129,34 +2703,113 @@ const Go = (o) => ({
       }
     }
   }
-}), Yo = (o) => ({
+}), Ko = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
-        test: "root"
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        "& .M4LImage-img": {
+          opacity: 0,
+          position: "absolute",
+          inset: "0",
+          objectFit: "contain"
+        },
+        "&.M4LImage-loaded .M4LImage-img": {
+          opacity: 1,
+          transition: "opacity .5s",
+          margin: "0 auto"
+        },
+        "& .M4LImage-skeletonImage, & .M4LImage-skeletonCircle": {
+          opacity: 1,
+          position: "absolute",
+          inset: 0
+        },
+        "&.M4LImage-loaded .M4LImage-skeletonImage, &.M4LImage-loaded .M4LImage-skeletonCircle": {
+          opacity: 0,
+          transition: "opacity .3s"
+        },
+        "& .M4LImage-lazyLoad": {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }
       }
     }
   }
-}), jo = (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"
+            }
+          }
+        }
+      },
       ["&.M4LPopover-root"]: {
-        test: "root",
         ".MuiPaper-root": {
           background: o.palette.background.default,
           borderRadius: "6px",
           Padding: "8px",
           margin: "8px 0px 0px 8px",
-          boxShadow: o.customShadows.z3
+          boxShadow: o.customShadows?.z3
+        },
+        "& .M4LanguagePopover-containerItems": {
+          "& .M4LanguagePopover-labelItem": {
+            ...o.typography.body,
+            color: o.palette.text.secondary
+          },
+          "& .MuiButtonBase-root:hover": {
+            backgroundColor: o.palette.state?.active12
+          },
+          "& .MuiButtonBase-root.Mui-selected": {
+            backgroundColor: o.palette.state?.active12,
+            "& .M4LanguagePopover-labelItem": {
+              color: o.palette.state?.active
+            }
+          }
         }
       }
     }
   }
-}), Vo = (o) => ({
+}), Qo = (o) => ({
   M4LRHFCheckbox: {
     styleOverrides: {
-      ["&.M4LRHFCheckbox-root"]: {
-        test: "root",
+      "&.M4LRHFCheckbox-root": {
+        display: "flex",
+        flexDirection: "column",
+        gap: o.spacing(0.5),
         ".M4LRHFCheckbox-checkTypography": {
           display: "flex",
           gap: o.spacing(2),
@@ -2213,18 +2866,30 @@ const Go = (o) => ({
       }
     }
   }
-}), Uo = (o) => ({
+}), Xo = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
-      ["&.M4LErrorLabel-root"]: {
-        test: "root"
+      ["&.M4LHelperText-root"]: {
+        "&.M4LHelperText-variantInfo .MuiTypography-root": {
+          color: o.palette.info.main
+        },
+        "&.M4LHelperText-variantSuccess .MuiTypography-root": {
+          color: o.palette.success.main
+        },
+        "&.M4LHelperText-variantWarning .MuiTypography-root": {
+          color: o.palette.warning.main
+        },
+        "&.M4LHelperText-variantError .MuiTypography-root": {
+          color: o.palette.error.main
+        }
       }
     }
   }
-}), Ko = (o) => ({
+}), Zo = (o) => ({
   M4LTypography: {
     styleOverrides: {
       ["&.M4LTypography-root"]: {
+        color: o.palette.text.primary,
         display: "inline",
         "& .MuiTypography-root": {
           margin: "unset"
@@ -2232,101 +2897,942 @@ const Go = (o) => ({
       }
     }
   }
-}), Jo = (o) => ({
+}), ot = (o) => ({
   M4LButton: {
-    styleOverrides: {}
+    styleOverrides: {
+      "&.M4LButton-root": {
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        "& .M4LButton-skeleton ": {
+          height: "100%!important",
+          borderRadius: "4px"
+        },
+        "& .MuiButtonBase-root": {
+          display: "flex",
+          textTransform: "none",
+          gap: "8px",
+          transition: "all .5s ease",
+          borderRadius: "4px",
+          border: "1px solid transparent",
+          ...o.typography.action,
+          "& .M4LIcon-icon": {
+            transition: "all .5s ease"
+          },
+          "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+            margin: "0px"
+          },
+          "&::before": {
+            inset: "0",
+            border: "1px solid",
+            borderColor: o.palette.state?.focus,
+            borderRadius: "4px",
+            transform: "scale(1.07, 1.36)",
+            position: "absolute",
+            boxSizing: "border-box"
+          }
+        },
+        "&.M4LButton-isDisabled": {
+          "& .MuiButtonBase-root": {
+            color: `${o.palette.text.disabled}!important`,
+            "& .M4LIcon-icon": {
+              backgroundColor: `${o.palette.text.disabled}!important`
+            }
+          },
+          "&.M4LButton-variantContained": {
+            "& .MuiButtonBase-root": {
+              color: o.palette.text.disabled,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.text.disabled
+              },
+              "&:hover": {
+                backgroundColor: o.palette.state?.default,
+                color: o.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.palette.text.disabled,
+                  color: o.palette.text.disabled
+                }
+              },
+              "&:active": {
+                backgroundColor: o.palette.state?.default,
+                color: o.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.palette.text.disabled,
+                  color: o.palette.text.disabled
+                }
+              },
+              "&.Mui-focusVisible": {
+                backgroundColor: o.palette.state?.default,
+                color: o.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.palette.text.disabled,
+                  color: o.palette.text.disabled
+                },
+                "&::before": {
+                  content: "none"
+                }
+              }
+            }
+          }
+        },
+        "&.M4LButton-sizeSmall": {
+          height: "28px",
+          "& .MuiButtonBase-root": {
+            padding: "4px 12px"
+          },
+          "&.M4LButton-skeleton": {
+            height: "28px"
+          }
+        },
+        "&.M4LButton-sizeMedium": {
+          height: "38px",
+          "& .MuiButtonBase-root": {
+            padding: "8px 16px"
+          },
+          "&.M4LButton-skeleton": {
+            height: "38px"
+          }
+        },
+        "&.M4LButton-variantContained": {
+          "& .MuiButtonBase-root": {
+            backgroundColor: o.palette.state?.default,
+            color: o.palette.text.secondary,
+            boxShadow: o.customShadows?.z1,
+            position: "relative",
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.text.secondary
+            },
+            "&:hover": {
+              backgroundColor: o.palette.state?.hover,
+              color: o.palette.patronus?.marbleLight[10],
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.patronus?.marbleLight[10]
+              }
+            },
+            "&:active": {
+              backgroundColor: o.palette.state?.active,
+              color: o.palette.patronus?.marbleLight[10],
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.patronus?.marbleLight[10]
+              }
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: o.palette.state?.active,
+              color: o.palette.patronus?.marbleLight[10],
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.patronus?.marbleLight[10]
+              },
+              "&::before": {
+                content: "''"
+              }
+            }
+          }
+        },
+        "&.M4LButton-variantOutlined": {
+          "& .MuiButtonBase-root": {
+            border: "1px solid",
+            borderColor: o.palette.text.secondary,
+            color: o.palette.text.secondary,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.text.secondary
+            },
+            "&:hover": {
+              borderColor: o.palette.state?.hover,
+              color: o.palette.state?.hover,
+              backgroundColor: o.palette.state?.active12,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.hover
+              }
+            },
+            "&:active": {
+              borderColor: o.palette.state?.active,
+              color: o.palette.state?.active,
+              backgroundColor: "transparent",
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              }
+            },
+            "&.Mui-focusVisible": {
+              borderColor: o.palette.state?.active,
+              color: o.palette.state?.active,
+              backgroundColor: "transparent",
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              },
+              "&::before": {
+                content: "''"
+              }
+            }
+          }
+        },
+        "&.M4LButton-variantText": {
+          "& .MuiButtonBase-root": {
+            color: o.palette.text.secondary,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.text.secondary
+            },
+            "&:hover": {
+              backgroundColor: o.palette.state?.active12,
+              color: o.palette.state?.hover,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.hover
+              }
+            },
+            "&:active": {
+              backgroundColor: "transparent",
+              color: o.palette.state?.active,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              }
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: "transparent",
+              color: o.palette.state?.active,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              },
+              "&:before": {
+                content: "''"
+              }
+            }
+          }
+        }
+      }
+    }
   }
-}), Qo = (o) => ({
+}), tt = (o) => ({
   M4LRHFAutocomplete: {
     styleOverrides: {
-      ["&.M4LRHFAutocomplete-root"]: {
-        test: "root"
+      "&.M4LRHFAutocomplete-root": {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        gap: "4px",
+        "& .M4LRHFAutocomplete-label": {
+          color: o.palette.text.secondary,
+          transition: "all .5s ease"
+        },
+        "& .MuiAutocomplete-endAdornment": {
+          top: "unset"
+        },
+        "& .MuiInputBase-root": {
+          padding: "0px",
+          "& .MuiInputBase-input": {
+            color: o.palette.text.secondary,
+            padding: "0px",
+            backgroundColor: "transparent",
+            ...o.typography.body
+          },
+          "& .MuiInputAdornment-root": {
+            margin: "0px",
+            padding: "0px"
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.text.secondary,
+            transition: "all .5s ease"
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.palette.text.secondary,
+            borderRadius: "4px",
+            inset: "0px",
+            transition: "all .5s ease",
+            "& legend": {
+              display: "none"
+            }
+          }
+        },
+        "&:hover": {
+          "& .M4LRHFAutocomplete-label": {
+            color: o.palette.state?.hover
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            borderColor: o.palette.state?.hover,
+            boxShadow: `0px 1px 8px ${e(o.palette.primary.main, 0.32)}`
+          },
+          "& .MuiInputBase-input": {
+            color: o.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.state?.hover
+          }
+        },
+        "&.M4LRHFAutocomplete-isFocus": {
+          "& .M4LRHFAutocomplete-label": {
+            color: o.palette.state?.active
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            transition: "all .1s ease",
+            border: "2px solid",
+            borderColor: o.palette.state?.active,
+            boxShadow: `0px 1px 8px ${e(o.palette.primary.main, 0.32)}`
+          },
+          "& .MuiInputBase-input": {
+            color: o.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.state?.active
+          }
+        },
+        "&.M4LRHFAutocomplete-variantError": {
+          "& .M4LRHFAutocomplete-label": {
+            color: o.palette.state?.error.normal
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.palette.state?.error.normal
+          },
+          "& .MuiInputBase-input": {
+            color: o.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.state?.error.normal
+          },
+          "&:hover": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: o.customShadows?.error
+            }
+          },
+          "&.M4LRHFAutocomplete-isFocus": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: o.customShadows?.error
+            }
+          }
+        },
+        "&.M4LRHFAutocomplete-isDisabled": {
+          "& .M4LRHFAutocomplete-label": {
+            color: o.palette.text.disabled
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.palette.text.disabled,
+            backgroundColor: o.palette.state?.default,
+            boxShadow: "none"
+          },
+          "& .MuiInputBase-input": {
+            color: o.palette.text.disabled
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.text.disabled
+          }
+        },
+        "&.M4LRHFAutocomplete-sizeSmall": {
+          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFAutocomplete-skeleton": {
+            height: "24px",
+            padding: "0px 8px"
+          }
+        },
+        "&.M4LRHFAutocomplete-sizeMedium": {
+          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFAutocomplete-skeleton": {
+            height: "28px",
+            padding: "0px 8px"
+          }
+        }
       }
     }
   }
-}), Xo = (o) => ({
+}), et = (o) => ({
   M4LRHFAutocompleteAsync: {
     styleOverrides: {
-      ["&.M4LRHFAutocompleteAsync-root"]: {
-        test: "root"
+      "&.M4LRHFAutocompleteAsync-root": {
+        width: "100%"
       }
     }
   }
-}), Zo = (o) => ({
+}), rt = (o) => ({
   M4LoadingButton: {
-    styleOverrides: {}
+    styleOverrides: {
+      "&.M4LoadingButton-root": {
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        "& .MuiLoadingButton-loading": {
+          "& .MuiTypography-root": {
+            color: "transparent"
+          }
+        },
+        "& .MuiCircularProgress-root": {
+          color: o.palette.primary.main
+        },
+        "& .MuiTypography-root": {
+          color: o.palette.text.secondary,
+          transition: "all .5s ease"
+        },
+        "& .M4LoadingButton-skeleton ": {
+          height: "100%!important",
+          borderRadius: "4px"
+        },
+        "& .MuiButtonBase-root": {
+          display: "flex",
+          textTransform: "none",
+          gap: "8px",
+          transition: "all .5s ease",
+          borderRadius: "4px",
+          border: "1px solid transparent",
+          ...o.typography.action,
+          "& .M4LIcon-icon": {
+            transition: "all .5s ease"
+          },
+          "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+            margin: "0px"
+          },
+          "&::before": {
+            inset: "0",
+            border: "1px solid",
+            borderColor: o.palette.state?.focus,
+            borderRadius: "4px",
+            transform: "scale(1.07, 1.36)",
+            position: "absolute",
+            boxSizing: "border-box"
+          }
+        },
+        "&.M4LoadingButton-isDisabled": {
+          "& .MuiButtonBase-root": {
+            color: `${o.palette.text.disabled}!important`,
+            "& .M4LIcon-icon": {
+              backgroundColor: `${o.palette.text.disabled}!important`
+            }
+          },
+          "&.M4LoadingButton-variantContained": {
+            "& .MuiButtonBase-root": {
+              color: o.palette.text.disabled,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.text.disabled
+              },
+              "&:hover": {
+                backgroundColor: o.palette.state?.default,
+                color: o.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.palette.text.disabled,
+                  color: o.palette.text.disabled
+                }
+              },
+              "&:active": {
+                backgroundColor: o.palette.state?.default,
+                color: o.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.palette.text.disabled,
+                  color: o.palette.text.disabled
+                }
+              },
+              "&.Mui-focusVisible": {
+                backgroundColor: o.palette.state?.default,
+                color: o.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.palette.text.disabled,
+                  color: o.palette.text.disabled
+                },
+                "&::before": {
+                  content: "none"
+                }
+              }
+            }
+          }
+        },
+        "&.M4LoadingButton-sizeSmall": {
+          height: "28px",
+          "& .MuiButtonBase-root": {
+            padding: "4px 12px"
+          },
+          "&.M4LoadingButton-skeleton": {
+            height: "28px"
+          }
+        },
+        "&.M4LoadingButton-sizeMedium": {
+          height: "38px",
+          "& .MuiButtonBase-root": {
+            padding: "8px 16px"
+          },
+          "&.M4LoadingButton-skeleton": {
+            height: "38px"
+          }
+        },
+        "&.M4LoadingButton-variantContained": {
+          "& .MuiButtonBase-root": {
+            backgroundColor: o.palette.state?.default,
+            color: o.palette.text.secondary,
+            boxShadow: o.customShadows?.z1,
+            position: "relative",
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.text.secondary
+            },
+            "&:hover": {
+              backgroundColor: o.palette.state?.hover,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.patronus?.marbleLight[10]
+              },
+              "& .MuiTypography-root": {
+                color: o.palette.patronus?.marbleLight[10]
+              }
+            },
+            "&:active": {
+              backgroundColor: o.palette.state?.active,
+              color: o.palette.patronus?.marbleLight[10],
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.patronus?.marbleLight[10]
+              }
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: o.palette.state?.active,
+              color: o.palette.patronus?.marbleLight[10],
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.patronus?.marbleLight[10]
+              },
+              "&::before": {
+                content: "''"
+              }
+            }
+          }
+        },
+        "&.M4LoadingButton-variantOutlined": {
+          "& .MuiButtonBase-root": {
+            border: "1px solid",
+            borderColor: o.palette.text.secondary,
+            color: o.palette.text.secondary,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.text.secondary
+            },
+            "&:hover": {
+              borderColor: o.palette.state?.hover,
+              color: o.palette.state?.hover,
+              backgroundColor: o.palette.state?.active12,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.hover
+              }
+            },
+            "&:active": {
+              borderColor: o.palette.state?.active,
+              color: o.palette.state?.active,
+              backgroundColor: "transparent",
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              }
+            },
+            "&.Mui-focusVisible": {
+              borderColor: o.palette.state?.active,
+              color: o.palette.state?.active,
+              backgroundColor: "transparent",
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              },
+              "&::before": {
+                content: "''"
+              }
+            }
+          }
+        },
+        "&.M4LoadingButton-variantText": {
+          "& .MuiButtonBase-root": {
+            color: o.palette.text.secondary,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.text.secondary
+            },
+            "&:hover": {
+              backgroundColor: o.palette.state?.active12,
+              color: o.palette.state?.hover,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.hover
+              }
+            },
+            "&:active": {
+              backgroundColor: "transparent",
+              color: o.palette.state?.active,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              }
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: "transparent",
+              color: o.palette.state?.active,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              },
+              "&:before": {
+                content: "''"
+              }
+            }
+          }
+        }
+      }
+    }
   }
-}), or = (o) => ({
+}), at = (o) => ({
   M4LNavLink: {
     styleOverrides: {
       ["&.M4LNavLink-root"]: {
-        test: "root"
+        "& .M4LTypography-root": {
+          color: o.palette.primary.main
+        },
+        "&: hover": {
+          "& .M4LTypography-root": {
+            color: o.palette.state?.hover,
+            textDecoration: "underline",
+            textDecorationColor: o.palette.state?.hover
+          }
+        },
+        "& > a": {
+          textDecoration: "none"
+        }
+      }
+    }
+  }
+}), it = (o) => ({
+  M4LSideBar: {
+    styleOverrides: {
+      "&.M4LSideBar-root": {
+        test: "root",
+        height: "100%",
+        width: "fitContent",
+        borderRadius: "4px",
+        display: "flex",
+        background: o.palette.background.neutral,
+        boxSizing: "contentBox",
+        overflow: "hidden",
+        "& .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"
+            }
+          },
+          "& .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": {
+                  "& .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]
+                    },
+                    "&: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"
+            }
+          },
+          "& .MuiPaper-root": {
+            borderRadius: "4px",
+            backgroundColor: o.palette.state.active12,
+            padding: "8px"
+          }
+        }
       }
     }
   }
 });
-function ur(o) {
+function ct(o) {
   return Object.assign(
-    oo(o),
-    to(o),
-    ro(o),
-    eo(o),
     ao(o),
-    so(o),
-    uo(),
-    co(o),
-    po(),
-    io(o),
     no(o),
+    io(o),
+    po(o),
     lo(o),
-    yo(o),
-    X(o),
-    Z(o),
     xo(o),
-    Q(o),
-    bo(o),
+    bo(),
+    Mo(o),
+    co(),
+    so(o),
+    uo(o),
     go(o),
+    Lo(o),
+    eo(o),
+    ro(o),
+    yo(o),
+    to(o),
     vo(o),
+    fo(o),
     ho(o),
-    Mo(o),
-    fo(),
-    Ro(o),
-    Bo(o),
-    Fo(o),
-    mo(o),
     ko(o),
     Co(o),
-    So(o),
-    Lo(o),
+    Bo(),
     Oo(o),
-    $o(o),
+    Io(o),
+    So(o),
+    Ro(o),
+    Fo(o),
     wo(o),
-    Ao(),
     To(o),
-    Io(o),
-    Do(o),
+    $o(o),
+    Ao(o),
     zo(o),
-    Zo(),
-    Go(),
-    Eo(),
-    Po(),
+    mo(o),
+    Do(),
     Ho(o),
-    Qo(),
-    Xo(),
+    Eo(o),
+    Go(o),
+    Po(o),
+    rt(o),
     Wo(),
-    _o(),
     qo(),
-    No(o),
-    or(),
-    Yo(),
     jo(o),
+    No(),
+    tt(o),
+    et(),
+    _o(o),
     Vo(o),
-    Uo(),
+    Yo(),
+    Uo(o),
+    at(o),
     Ko(),
-    Jo()
+    Jo(o),
+    Qo(o),
+    Xo(o),
+    Zo(o),
+    ot(o),
+    it(o)
   );
 }
-const cr = {
+const gt = {
   values: {
     xs: 0,
     sm: 600,
@@ -2334,30 +3840,30 @@ const cr = {
     lg: 1200,
     xl: 1400
   }
-}, gr = {
+}, xt = {
   mobile: 16,
-  desktop: 8
+  desktop: 16
 };
 export {
-  r as PATRONUSCOLORS,
-  N as blaze,
-  q as candy,
+  t as PATRONUSCOLORS,
+  _ as blaze,
+  j as candy,
   g as colorPresets,
-  sr as createCustomShadows,
-  C as defaultPreset,
-  lr as defaultThemeOptions,
-  ur as fnComponentsOverrides,
-  ir as getColorPresets,
-  nr as getColorState,
-  pr as getFontValue,
-  gr as globalRemSize,
-  _ as grass,
-  cr as muiBreakpointsValues,
-  d as palette,
-  s as pxToRem,
+  Z as createCustomShadows,
+  I as defaultPreset,
+  ut as defaultThemeOptions,
+  ct as fnComponentsOverrides,
+  b as getColorPresets,
+  V as getColorState,
+  st as getFontValue,
+  xt as globalRemSize,
+  N as grass,
+  gt as muiBreakpointsValues,
+  s as palette,
+  d as pxToRem,
   Y as remToPx,
   p as responsiveFontSizes,
-  dr as shadows,
-  W as turqui,
-  U as typography
+  oo as shadows,
+  q as turqui,
+  J as typography
 };