@m4l/styles 0.0.3 → 0.0.5

package/index.js

@@ -1,46 +1,250 @@
-import { alpha as e, useTheme as S } from "@mui/material/styles";
-import { useResponsive as L } from "@m4l/graphics";
+import { alpha as t, useTheme as m } from "@mui/material/styles";
+import { styled as yr } from "@mui/material/styles";
+import { alpha as n } from "@mui/system";
 import { alpha as F } from "@mui/material";
-function u(o, r) {
-  return `linear-gradient(to bottom, ${o}, ${r})`;
+import { useResponsive as w } from "@m4l/graphics";
+function c(o, e) {
+  return `linear-gradient(to bottom, ${o}, ${e})`;
 }
-const g = {
-  lighter: "#C8FACD",
-  light: "#5BE584",
-  main: "#00AB55",
-  dark: "#007B55",
-  darker: "#005249"
-}, R = {
-  lighter: "#D6E4FF",
-  light: "#84A9FF",
-  main: "#3366FF",
-  dark: "#1939B7",
-  darker: "#091A7A"
-}, x = {
-  lighter: "#D0F2FF",
-  light: "#74CAFF",
-  main: "#1890FF",
-  dark: "#0C53B7",
-  darker: "#04297A"
+const r = {
+  patronusBlue: {
+    10: "#CCE6FF",
+    20: "#88BCFF",
+    30: "#60A7FF",
+    40: "#3891FF",
+    50: "#0064FF",
+    60: "#0039D7",
+    70: "#001AA4",
+    80: "#00086A",
+    90: "#000033"
+  },
+  crayonBlue: {
+    10: "#A5C9FE",
+    20: "#88B7FC",
+    30: "#6AA4F9",
+    40: "#5494F3",
+    50: "#2774E6",
+    60: "#2367CC",
+    70: "#1F5AB3",
+    80: "#1A4D99",
+    90: "#113366"
+  },
+  middleYellow: {
+    10: "#FFFBCE",
+    20: "#FFF79C",
+    30: "#FFF46B",
+    40: "#FFF039",
+    50: "#FFEC08",
+    60: "#E5D400",
+    70: "#9E9200",
+    80: "#696100",
+    90: "#353100"
+  },
+  acidGreen: {
+    10: "#CDFFC2",
+    20: "#A8FF97",
+    30: "#83FF6B",
+    40: "#5EFF40",
+    50: "#39FF14",
+    60: "#47CC2D",
+    70: "#229E0A",
+    80: "#176E05",
+    90: "#0B3D00"
+  },
+  grassGreen: {
+    10: "#FDFFE6",
+    20: "#D0E4A3",
+    30: "#AFDA85",
+    40: "#87D06A",
+    50: "#4BB543",
+    60: "#438C2D",
+    70: "#3A631E",
+    80: "#2A3B11",
+    90: "#0F1206"
+  },
+  candyRed: {
+    10: "#FFD6D6",
+    20: "#EE9B9B",
+    30: "#EB7F7F",
+    40: "#E86463",
+    50: "#D73733",
+    60: "#AE1916",
+    70: "#850502",
+    80: "#5C0500",
+    90: "#330400"
+  },
+  turquiBlue: {
+    10: "#B5D9EA",
+    20: "#92BBCD",
+    30: "#709DB1 ",
+    40: "#4D7E94",
+    50: "#2A6077",
+    60: "#255569",
+    70: "#214A5A",
+    80: "#1C3E4C",
+    90: "#18333D"
+  },
+  blazeOrange: {
+    10: "#F8BE9F",
+    20: "#FAA777",
+    30: "#FC8F50",
+    40: "#FD7828",
+    50: "#FF6000",
+    60: "#DE5300",
+    70: "#BD4600",
+    80: "#9B3900",
+    90: "#6D2A00"
+  },
+  flameRed: {
+    10: "#F4BABA",
+    20: "#F59292",
+    30: "#F66A6A",
+    40: "#F64141",
+    50: "#F71919",
+    60: "#D31616",
+    70: "#AF1212",
+    80: "#8A0F0F",
+    90: "#660C0C"
+  },
+  coolGrey: {
+    10: "#BAC6CC",
+    20: "#A7B4B9",
+    30: "#94A1A6",
+    40: "#818F93",
+    50: "#6E7C80",
+    60: "#5C6A6C",
+    70: "#495859",
+    80: "#364546",
+    90: "#233333"
+  },
+  marbleLight: {
+    10: "#FEFFFF",
+    20: "#F9FBFB",
+    30: "#F4F7F7",
+    40: "#EFF3F4",
+    50: "#EAEFF0",
+    60: "#fff0",
+    70: "#fff0",
+    80: "#fff0",
+    90: "#fff0"
+  },
+  ashBlak: {
+    10: "#2F3737",
+    20: "#2A3232",
+    30: "#252C2C",
+    40: "#212727",
+    50: "#1C2121",
+    60: "#090A0A",
+    70: "#fff0",
+    80: "#fff0",
+    90: "#fff0"
+  }
+}, $ = {
+  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)
+  },
+  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)
+  },
+  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)
+  },
+  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)
+  },
+  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)
+  },
+  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)
+  },
+  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)
+  }
 }, b = {
-  lighter: "#E9FCD4",
-  light: "#AAF27F",
-  main: "#54D62C",
-  dark: "#229A16",
-  darker: "#08660D"
+  lighter: r.patronusBlue[70],
+  light: r.patronusBlue[60],
+  main: r.patronusBlue[50],
+  dark: r.patronusBlue[40],
+  darker: r.patronusBlue[20],
+  contrastText: r.marbleLight[10]
+}, A = {
+  lighter: "#fff0",
+  light: "#fff0",
+  main: "#fff0",
+  dark: "#fff0",
+  darker: "#fff0"
 }, y = {
-  lighter: "#FFF7CD",
-  light: "#FFE16A",
-  main: "#FFC107",
-  dark: "#B78103",
-  darker: "#7A4F01"
+  lighter: "#fff0",
+  light: "#fff0",
+  main: r.crayonBlue[50],
+  dark: "#fff0",
+  darker: "#fff0",
+  opacity: t(r.crayonBlue[50], 0.08)
 }, f = {
-  lighter: "#FFE7D9",
-  light: "#FFA48D",
-  main: "#FF4842",
-  dark: "#B72136",
-  darker: "#7A0C2E"
-}, a = {
+  lighter: "#fff0",
+  light: "#fff0",
+  main: r.acidGreen[60],
+  dark: "#fff0",
+  darker: "#fff0",
+  opacity: t(r.acidGreen[60], 0.08)
+}, h = {
+  lighter: "#fff0",
+  light: "#fff0",
+  main: r.middleYellow[60],
+  dark: "#fff0",
+  darker: "#fff0",
+  opacity: t(r.middleYellow[60], 0.08)
+}, M = {
+  lighter: "#fff0",
+  light: "#fff0",
+  main: r.flameRed[40],
+  dark: "#fff0",
+  darker: "#fff0",
+  opacity: t(r.flameRed[40], 0.08)
+}, x = {
   0: "#FFFFFF",
   100: "#F9FAFB",
   200: "#F4F6F8",
@@ -51,334 +255,475 @@ const g = {
   700: "#454F5B",
   800: "#212B36",
   900: "#161C24",
-  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)
+  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)
 }, T = {
-  primary: u(g.light, g.main),
-  info: u(x.light, x.main),
-  success: u(b.light, b.main),
-  warning: u(y.light, y.main),
-  error: u(f.light, f.main)
+  primary: c(b.light, b.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)
 }, 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"]
-}, c = {
+}, I = {
+  normal: r.crayonBlue[50],
+  hover: r.crayonBlue[70]
+}, z = {
+  normal: r.acidGreen[60],
+  hover: r.acidGreen[70]
+}, G = {
+  normal: r.flameRed[40],
+  hover: r.flameRed[60]
+}, E = {
+  normal: r.flameRed[60],
+  hover: r.flameRed[70]
+}, H = {
+  default: t(r.coolGrey[50], 0.24),
+  transition: t(r.coolGrey[50], 0.08)
+}, l = {
+  info: { ...I },
+  success: { ...z },
+  error: { ...G },
+  warning: { ...E },
+  skeleton: { ...H }
+}, k = {
   common: { black: "#000", white: "#fff" },
-  primary: { ...g, contrastText: "#fff" },
-  secondary: { ...R, contrastText: "#fff" },
-  info: { ...x, contrastText: "#fff" },
-  success: { ...b, contrastText: a[800] },
-  warning: { ...y, contrastText: a[800] },
-  error: { ...f, contrastText: "#fff" },
-  grey: a,
+  primary: { ...b },
+  state: {
+    ...l
+  },
+  patronus: { ...r },
+  opacity: { ...$ },
+  secondary: { ...A, contrastText: "#fff" },
+  info: { ...y, contrastText: "#fff" },
+  success: { ...f, contrastText: x[800] },
+  warning: { ...h, contrastText: x[800] },
+  error: { ...M, contrastText: "#fff" },
+  grey: x,
   gradients: T,
   chart: D,
-  divider: a[50024],
+  divider: x[50024],
   action: {
-    hover: a[5008],
-    selected: a[50016],
-    disabled: a[50080],
-    disabledBackground: a[50024],
-    focus: a[50024],
     hoverOpacity: 0.08,
     disabledOpacity: 0.48
   }
-}, p = {
+}, d = {
   light: {
-    ...c,
+    ...k,
     mode: "light",
-    text: { primary: a[800], secondary: a[700], disabled: a[500] },
+    text: { primary: r.ashBlak[10], secondary: r.coolGrey[40], disabled: r.coolGrey[10] },
     background: {
-      paper: "#fff",
-      default: "#fff",
-      neutral: a[200],
-      autocomplete: a[100],
-      header: "#F6F7F9"
+      paper: "#fff0",
+      default: r.marbleLight[10],
+      neutral: r.marbleLight[30],
+      background: r.marbleLight[50]
     },
-    action: { active: a[600], ...c.action },
     grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
   },
   dark: {
-    ...c,
+    ...k,
     mode: "dark",
-    text: { primary: "#fff", secondary: a[500], disabled: a[600] },
+    text: { primary: r.marbleLight[30], secondary: r.coolGrey[20], disabled: r.coolGrey[50] },
     background: {
-      paper: a[800],
-      default: a[900],
-      neutral: a[50016],
-      autocomplete: a[800],
-      header: "#29313A"
+      paper: "#fff0",
+      default: r.ashBlak[10],
+      neutral: r.ashBlak[30],
+      background: r.ashBlak[50]
     },
-    action: { active: a[500], ...c.action },
     grid: { sectionHeader: "#29313A", divider: "#3E464F", rowHover: "#1F262F" }
   }
-}, l = [
-  {
-    name: "default",
-    ...p.light.primary,
-    LightSelected: "#EBF9F1",
-    LightSelectedHover: "#D6F2E3",
-    DarkSelected: "#142827",
-    DarkSelectedHover: "#12342B"
-  },
+}, g = [
   {
-    name: "purple",
-    lighter: "#EBD6FD",
-    light: "#B985F4",
-    main: "#7635dc",
-    dark: "#431A9E",
-    darker: "#200A69",
-    contrastText: "#fff"
+    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]
   },
   {
-    name: "cyan",
-    lighter: "#D1FFFC",
-    light: "#76F2FF",
-    main: "#1CCAFF",
-    dark: "#0E77B7",
-    darker: "#053D7A",
-    contrastText: p.light.grey[800]
+    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]
   },
   {
-    name: "blue",
-    lighter: "#D1E9FC",
-    light: "#76B0F1",
-    main: "#2065D1",
-    dark: "#103996",
-    darker: "#061B64",
-    contrastText: "#fff"
+    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]
   },
   {
-    name: "orange",
-    lighter: "#FEF4D4",
-    light: "#FED680",
-    main: "#fda92d",
-    dark: "#B66816",
-    darker: "#793908",
-    contrastText: p.light.grey[800]
+    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]
   },
   {
-    name: "red",
-    lighter: "#FFE3D5",
-    light: "#FFC1AC",
-    main: "#FF3030",
-    dark: "#B71833",
-    darker: "#7A0930",
-    contrastText: "#fff"
+    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]
   }
-], A = l[0], I = l[1], z = l[2], P = l[3], E = l[4], H = l[5];
-function W(o) {
+], P = g[0], W = g[1], q = g[2], _ = g[3], N = g[4];
+function ir(o) {
   return {
-    purple: I,
-    cyan: z,
-    blue: P,
-    orange: E,
-    red: H,
-    default: A
+    patronus: P,
+    turqui: W,
+    grass: q,
+    candy: _,
+    blaze: N
   }[o];
 }
-function _(o) {
+const nr = (o, e) => {
+  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),
+          ...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),
+          ...l
+        }
+      };
+      break;
+    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),
+          ...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),
+          ...l
+        }
+      };
+      break;
+    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),
+          ...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),
+          ...l
+        }
+      };
+      break;
+    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),
+          ...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),
+          ...l
+        }
+      };
+      break;
+    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),
+          ...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),
+          ...l
+        }
+      };
+      break;
+    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),
+          ...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),
+          ...l
+        }
+      };
+      break;
+  }
+  return e === "light" ? { ...a.light } : { ...a.dark };
+};
+function Y(o) {
   return Math.round(parseFloat(o) * 16);
 }
-function n(o) {
+function s(o) {
   return `${o / 16}rem`;
 }
-function d({ sm: o, md: r, lg: t }) {
+function p({ sm: o, md: e, lg: a }) {
   return {
-    "@media (min-width:600px)": {
-      fontSize: n(o)
+    "@media (min-width:0px)": {
+      fontSize: `${o}px`
     },
     "@media (min-width:900px)": {
-      fontSize: n(r)
+      fontSize: `${e}px`
     },
     "@media (min-width:1200px)": {
-      fontSize: n(t)
+      fontSize: `${a}px`
     }
   };
 }
-function G() {
-  return [...S().breakpoints.keys].reverse().reduce((t, i) => {
-    const M = L("up", i);
-    return !t && M ? i : t;
+function j() {
+  return [...m().breakpoints.keys].reverse().reduce((a, i) => {
+    const v = w("up", i);
+    return !a && v ? i : a;
   }, null) || "xs";
 }
-function Jo(o) {
-  const r = S(), t = G(), i = r.breakpoints.up(t === "xl" ? "lg" : t), w = (o === "h1" || o === "h2" || o === "h3" || o === "h4" || o === "h5" || o === "h6") && r.typography[o][i] ? r.typography[o][i] : r.typography[o], h = _(w.fontSize), m = Number(r.typography[o].lineHeight) * h, { fontWeight: B, letterSpacing: O } = r.typography[o];
-  return { fontSize: h, lineHeight: m, fontWeight: B, letterSpacing: O };
+function pr(o) {
+  const e = m(), a = j(), i = e.breakpoints.up(a === "xl" ? "lg" : a), R = (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(R.fontSize), S = Number(e.typography[o].lineHeight) * B, { fontWeight: L, letterSpacing: O } = e.typography[o];
+  return { fontSize: B, lineHeight: S, fontWeight: L, letterSpacing: O };
 }
-const N = "Public Sans, sans-serif", Y = {
-  fontFamily: N,
+const V = "Poppins, sans-serif", U = {
+  fontFamily: V,
   fontWeightRegular: 400,
   fontWeightMedium: 600,
   fontWeightBold: 700,
   h1: {
     fontWeight: 700,
-    lineHeight: 80 / 64,
-    fontSize: n(40),
-    letterSpacing: 2,
-    ...d({ sm: 52, md: 58, lg: 64 })
+    lineHeight: 1.5,
+    ...p({ sm: 40, md: 40, lg: 40 })
   },
   h2: {
     fontWeight: 700,
-    lineHeight: 64 / 48,
-    fontSize: n(32),
-    ...d({ sm: 40, md: 44, lg: 48 })
+    lineHeight: 1,
+    ...p({ sm: 40, md: 44, lg: 48 })
   },
   h3: {
-    fontWeight: 700,
+    fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: n(24),
-    ...d({ sm: 26, md: 30, lg: 32 })
+    ...p({ sm: 32, md: 32, lg: 32 })
   },
   h4: {
     fontWeight: 700,
     lineHeight: 1.5,
-    fontSize: n(20),
-    ...d({ sm: 20, md: 24, lg: 24 })
+    ...p({ sm: 20, md: 24, lg: 24 })
   },
   h5: {
-    fontWeight: 700,
+    fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: n(18),
-    ...d({ sm: 19, md: 20, lg: 20 })
+    ...p({ sm: 24, md: 24, lg: 24 })
   },
   h6: {
     fontWeight: 700,
     lineHeight: 28 / 18,
-    fontSize: n(17),
-    ...d({ sm: 18, md: 18, lg: 18 })
+    ...p({ sm: 18, md: 18, lg: 18 })
+  },
+  subtitle: {
+    fontWeight: 400,
+    lineHeight: 1.5,
+    ...p({ sm: 18, md: 16, lg: 16 })
+  },
+  subtitleDens: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    ...p({ sm: 18, md: 16, lg: 16 })
+  },
+  paragraph: {
+    fontWeight: 400,
+    lineHeight: 1.429,
+    ...p({ sm: 16, md: 20, lg: 20 })
+  },
+  paragraphDens: {
+    fontWeight: 600,
+    lineHeight: 1.429,
+    ...p({ sm: 16, md: 14, lg: 14 })
   },
   subtitle1: {
     fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: n(14)
+    fontSize: s(14)
   },
   subtitle2: {
     fontWeight: 600,
     lineHeight: 1.5,
-    fontSize: n(12)
+    fontSize: s(12)
+  },
+  body: {
+    fontWeight: 400,
+    lineHeight: 1.143,
+    ...p({ sm: 14, md: 12, lg: 12 })
+  },
+  bodyDens: {
+    fontWeight: 700,
+    lineHeight: 1.143,
+    ...p({ sm: 14, md: 12, lg: 12 })
   },
   body0: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: n(16)
+    fontSize: s(16)
   },
   body1: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: n(14)
+    fontSize: s(14)
   },
   body2: {
     lineHeight: 1.5,
     fontWeight: 400,
-    fontSize: n(12)
+    fontSize: s(12)
   },
   caption: {
     lineHeight: 1.5,
-    fontSize: n(11)
+    fontSize: s(11)
   },
   overline: {
     fontWeight: 700,
     lineHeight: 1.5,
-    fontSize: n(12),
+    fontSize: s(12),
     textTransform: "uppercase"
   },
   button: {
     fontWeight: 700,
     lineHeight: 24 / 14,
-    fontSize: n(14),
+    fontSize: s(14),
     textTransform: "capitalize"
+  },
+  action: {
+    fontWeight: 500,
+    lineHeight: 1.667,
+    ...p({ sm: 14, md: 12, lg: 12 })
   }
-}, C = p.light.grey[500], $ = "#000000", v = (o) => {
-  const r = e(o, 0.2), t = e(o, 0.14), i = e(o, 0.12);
+}, lr = {
+  typography: U
+}, K = d.light.grey[500], J = "#000000", C = (o) => {
+  const e = t(o, 0.2), a = t(o, 0.14), i = t(o, 0.12);
   return [
     "none",
-    `0px 2px 1px -1px ${r},0px 1px 1px 0px ${t},0px 1px 3px 0px ${i}`,
-    `0px 3px 1px -2px ${r},0px 2px 2px 0px ${t},0px 1px 5px 0px ${i}`,
-    `0px 3px 3px -2px ${r},0px 3px 4px 0px ${t},0px 1px 8px 0px ${i}`,
-    `0px 2px 4px -1px ${r},0px 4px 5px 0px ${t},0px 1px 10px 0px ${i}`,
-    `0px 3px 5px -1px ${r},0px 5px 8px 0px ${t},0px 1px 14px 0px ${i}`,
-    `0px 3px 5px -1px ${r},0px 6px 10px 0px ${t},0px 1px 18px 0px ${i}`,
-    `0px 4px 5px -2px ${r},0px 7px 10px 1px ${t},0px 2px 16px 1px ${i}`,
-    `0px 5px 5px -3px ${r},0px 8px 10px 1px ${t},0px 3px 14px 2px ${i}`,
-    `0px 5px 6px -3px ${r},0px 9px 12px 1px ${t},0px 3px 16px 2px ${i}`,
-    `0px 6px 6px -3px ${r},0px 10px 14px 1px ${t},0px 4px 18px 3px ${i}`,
-    `0px 6px 7px -4px ${r},0px 11px 15px 1px ${t},0px 4px 20px 3px ${i}`,
-    `0px 7px 8px -4px ${r},0px 12px 17px 2px ${t},0px 5px 22px 4px ${i}`,
-    `0px 7px 8px -4px ${r},0px 13px 19px 2px ${t},0px 5px 24px 4px ${i}`,
-    `0px 7px 9px -4px ${r},0px 14px 21px 2px ${t},0px 5px 26px 4px ${i}`,
-    `0px 8px 9px -5px ${r},0px 15px 22px 2px ${t},0px 6px 28px 5px ${i}`,
-    `0px 8px 10px -5px ${r},0px 16px 24px 2px ${t},0px 6px 30px 5px ${i}`,
-    `0px 8px 11px -5px ${r},0px 17px 26px 2px ${t},0px 6px 32px 5px ${i}`,
-    `0px 9px 11px -5px ${r},0px 18px 28px 2px ${t},0px 7px 34px 6px ${i}`,
-    `0px 9px 12px -6px ${r},0px 19px 29px 2px ${t},0px 7px 36px 6px ${i}`,
-    `0px 10px 13px -6px ${r},0px 20px 31px 3px ${t},0px 8px 38px 7px ${i}`,
-    `0px 10px 13px -6px ${r},0px 21px 33px 3px ${t},0px 8px 40px 7px ${i}`,
-    `0px 10px 14px -6px ${r},0px 22px 35px 3px ${t},0px 8px 42px 7px ${i}`,
-    `0px 11px 14px -7px ${r},0px 23px 36px 3px ${t},0px 9px 44px 8px ${i}`,
-    `0px 11px 15px -7px ${r},0px 24px 38px 3px ${t},0px 9px 46px 8px ${i}`
+    `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}`
   ];
-}, k = (o) => {
-  const r = e(o, 0.16);
-  return {
-    z1: `0 1px 2px 0 ${r}`,
-    z8: `0 8px 16px 0 ${r}`,
-    z12: `0 12px 24px -4px ${r}`,
-    z16: `0 16px 32px -4px ${r}`,
-    z20: `0 20px 40px -4px ${r}`,
-    z24: `0 24px 48px 0 ${r}`,
-    primary: `0 8px 16px 0 ${e(p.light.primary.main, 0.24)}`,
-    info: `0 8px 16px 0 ${e(p.light.info.main, 0.24)}`,
-    secondary: `0 8px 16px 0 ${e(p.light.secondary.main, 0.24)}`,
-    success: `0 8px 16px 0 ${e(p.light.success.main, 0.24)}`,
-    warning: `0 8px 16px 0 ${e(p.light.warning.main, 0.24)}`,
-    error: `0 8px 16px 0 ${e(p.light.error.main, 0.24)}`,
-    card: `0 0 2px 0 ${e(o, 0.2)}, 0 12px 24px -4px ${e(o, 0.12)}`,
-    dialog: `-40px 40px 80px -8px ${e(p.light.common.black, 0.24)}`,
-    dropdown: `0 0 2px 0 ${e(o, 0.24)}, -20px 20px 40px -4px ${e(o, 0.24)}`
+}, 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], 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], 0.24)}`
   };
-}, j = {
-  light: k(C),
-  dark: k($)
-}, V = {
-  light: v(C),
-  dark: v($)
-}, Qo = {
-  typography: Y,
-  shadows: V.light,
-  customShadows: {
-    ...j.light,
-    primary: `0 8px 16px 0 ${e(W("default").main, 0.24)}`
-  },
-  palette: {
-    ...p.light,
-    primary: {
-      lighter: "#283829",
-      light: "#26372b",
-      main: "#00AB55",
-      dark: "#007B55",
-      darker: "#005249",
-      LightSelected: "#EBF9F1",
-      LightSelectedHover: "#D6F2E3",
-      DarkSelected: "#142827",
-      DarkSelectedHover: "#12342B"
-    },
-    text: { primary: a[800], secondary: a[700], disabled: a[500] },
-    secondary: {
-      main: "#34ac4e"
-    }
-  }
+  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 ${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
+  };
+}, dr = {
+  light: C(K),
+  dark: C(J)
 };
-function K(o) {
+function Q(o) {
   return {
     MuiAvatar: {
       styleOverrides: {
@@ -403,7 +748,7 @@ function K(o) {
     }
   };
 }
-function U(o) {
+function X(o) {
   return {
     MuiButton: {
       styleOverrides: {
@@ -424,7 +769,7 @@ function U(o) {
           }
         },
         containedPrimary: {
-          boxShadow: o.customShadows.z24
+          boxShadow: o.customShadows.z4
         },
         containedSecondary: {
           boxShadow: o.customShadows.secondary
@@ -456,7 +801,7 @@ function U(o) {
     }
   };
 }
-function q(o) {
+function Z(o) {
   return {
     MuiIconButton: {
       styleOverrides: {
@@ -480,15 +825,15 @@ function q(o) {
     }
   };
 }
-function J(o) {
-  return {
+function oo(o) {
+  return console.log("test theme", o.palette), {
     MuiFab: {
       defaultProps: {
         color: "primary"
       },
       styleOverrides: {
         root: {
-          boxShadow: o.customShadows.z8,
+          boxShadow: o.customShadows.z4,
           "&:hover": {
             boxShadow: "none",
             backgroundColor: o.palette.grey[400]
@@ -515,7 +860,7 @@ function J(o) {
     }
   };
 }
-function Q(o) {
+function ro(o) {
   return {
     MuiCard: {
       styleOverrides: {
@@ -547,7 +892,7 @@ function Q(o) {
     }
   };
 }
-function X(o) {
+function to(o) {
   return {
     MuiTabs: {
       styleOverrides: {
@@ -604,7 +949,7 @@ function X(o) {
     }
   };
 }
-function Z(o) {
+function eo(o) {
   return {
     MuiMenuItem: {
       styleOverrides: {
@@ -620,7 +965,7 @@ function Z(o) {
     }
   };
 }
-function oo(o) {
+function ao(o) {
   return {
     MuiLink: {
       defaultProps: {
@@ -636,7 +981,7 @@ function oo(o) {
     }
   };
 }
-function ro(o) {
+function io(o) {
   return {
     MuiListItemIcon: {
       styleOverrides: {
@@ -669,7 +1014,7 @@ function ro(o) {
     }
   };
 }
-function to(o) {
+function no(o) {
   return {
     MuiTableRow: {
       styleOverrides: {
@@ -755,7 +1100,7 @@ function to(o) {
     }
   };
 }
-function eo(o) {
+function po(o) {
   return {
     MuiBadge: {
       styleOverrides: {
@@ -768,7 +1113,7 @@ function eo(o) {
     }
   };
 }
-function io(o) {
+function lo(o) {
   return {
     MuiPaper: {
       defaultProps: {
@@ -783,13 +1128,58 @@ function io(o) {
       styleOverrides: {
         root: {
           backgroundImage: "none",
-          borderRadius: "2px"
+          backgroundColor: o.palette.background.default,
+          borderRadius: "2px",
+          "& .MuiStack-root .MuiMenuItem-root": {
+            color: o.palette.text.primary,
+            transition: "all .5s",
+            borderRadius: "4px",
+            ...o.typography.action
+          },
+          "& .MuiStack-root .MuiMenuItem-root:hover": {
+            color: o.palette.state?.hover,
+            transition: "all .5s",
+            backgroundColor: o.palette.state?.active12
+          },
+          "& .MuiStack-root .MuiMenuItem-root.Mui-selected": {
+            color: o.palette.state?.active,
+            transition: "all .5s",
+            backgroundColor: o.palette.state?.active12
+          },
+          "& .MuiStack-root .MuiMenuItem-root:focus": {
+            color: o.palette.state?.focus,
+            transition: "all .5s",
+            backgroundColor: o.palette.background.default,
+            boxShadow: `0 0 0 1px ${o.palette.state?.focus}`
+          },
+          "& .MuiAutocomplete-listbox .MuiAutocomplete-option": {
+            color: o.palette.text.primary,
+            transition: "all .5s",
+            borderRadius: "4px",
+            ...o.typography.action
+          },
+          "& .MuiAutocomplete-listbox .MuiAutocomplete-option:hover": {
+            color: o.palette.state?.hover,
+            transition: "all .5s",
+            backgroundColor: o.palette.state?.active12
+          },
+          "& .MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-selected": {
+            color: o.palette.state?.active,
+            transition: "all .5s",
+            backgroundColor: o.palette.state?.active12
+          },
+          "& .MuiAutocomplete-listbox .MuiAutocomplete-option:active": {
+            color: o.palette.state?.focus,
+            transition: "all .5s",
+            backgroundColor: o.palette.background.default,
+            boxShadow: `0 0 0 1px ${o.palette.state?.focus}`
+          }
         }
       }
     }
   };
 }
-function ao(o) {
+function so(o) {
   return {
     MuiFormControl: {
       styleOverrides: {
@@ -871,7 +1261,7 @@ function ao(o) {
     }
   };
 }
-function no(o) {
+function uo(o) {
   return {
     MuiInputLabel: {
       styleOverrides: {
@@ -886,7 +1276,7 @@ function no(o) {
     }
   };
 }
-function po(o) {
+function co(o) {
   return {
     MuiRadio: {
       styleOverrides: {
@@ -903,8 +1293,8 @@ function po(o) {
     }
   };
 }
-function so(o) {
-  const r = o.palette.mode === "light";
+function go(o) {
+  const e = o.palette.mode === "light";
   return {
     MuiDrawer: {
       styleOverrides: {
@@ -913,13 +1303,13 @@ function so(o) {
             "& .MuiDrawer-paperAnchorLeft": {
               boxShadow: `8px 24px 24px 12px ${F(
                 o.palette.grey[900],
-                r ? 0.16 : 0.48
+                e ? 0.16 : 0.48
               )}`
             },
             "& .MuiDrawer-paperAnchorRight": {
               boxShadow: `-8px 24px 24px 12px ${F(
                 o.palette.grey[900],
-                r ? 0.16 : 0.48
+                e ? 0.16 : 0.48
               )}`
             }
           }
@@ -928,7 +1318,7 @@ function so(o) {
     }
   };
 }
-function lo(o) {
+function xo(o) {
   return {
     MuiDialog: {
       styleOverrides: {
@@ -984,8 +1374,8 @@ function lo(o) {
     }
   };
 }
-function uo(o) {
-  const r = o.palette.mode === "light";
+function bo(o) {
+  const e = o.palette.mode === "light";
   return {
     MuiSlider: {
       defaultProps: {
@@ -1003,14 +1393,14 @@ function uo(o) {
         },
         valueLabel: {
           borderRadius: 8,
-          backgroundColor: o.palette.grey[r ? 800 : 700]
+          backgroundColor: o.palette.grey[e ? 800 : 700]
         }
       }
     }
   };
 }
-function co(o) {
-  const r = o.palette.mode === "light";
+function yo(o) {
+  const e = o.palette.mode === "light";
   return {
     MuiSwitch: {
       styleOverrides: {
@@ -1025,10 +1415,10 @@ function co(o) {
           left: 0,
           right: "auto",
           "&:not(:.Mui-checked)": {
-            color: o.palette.grey[r ? 100 : 300]
+            color: o.palette.grey[e ? 100 : 300]
           },
           "&.Mui-checked.Mui-disabled, &.Mui-disabled": {
-            color: o.palette.grey[r ? 400 : 600]
+            color: o.palette.grey[e ? 400 : 600]
           },
           "&.Mui-disabled+.MuiSwitch-track": {
             opacity: 1,
@@ -1039,7 +1429,7 @@ function co(o) {
     }
   };
 }
-function go(o) {
+function fo(o) {
   return {
     MuiSvgIcon: {
       styleOverrides: {
@@ -1057,22 +1447,22 @@ function go(o) {
     }
   };
 }
-function xo(o) {
-  const r = o.palette.mode === "light";
+function ho(o) {
+  const e = o.palette.mode === "light";
   return {
     MuiTooltip: {
       styleOverrides: {
         tooltip: {
-          backgroundColor: o.palette.grey[r ? 800 : 700]
+          backgroundColor: o.palette.grey[e ? 800 : 700]
         },
         arrow: {
-          color: o.palette.grey[r ? 800 : 700]
+          color: o.palette.grey[e ? 800 : 700]
         }
       }
     }
   };
 }
-function bo(o) {
+function Mo(o) {
   return {
     MuiPopover: {
       styleOverrides: {
@@ -1084,7 +1474,7 @@ function bo(o) {
     }
   };
 }
-function yo(o) {
+function vo(o) {
   return {
     MuiStepConnector: {
       styleOverrides: {
@@ -1095,7 +1485,7 @@ function yo(o) {
     }
   };
 }
-function fo(o) {
+function Bo(o) {
   return {
     MuiDataGrid: {
       styleOverrides: {
@@ -1132,7 +1522,7 @@ function fo(o) {
       styleOverrides: {
         root: {
           "& .MuiDataGrid-gridMenuList": {
-            boxShadow: o.customShadows.z20,
+            boxShadow: o.customShadows.z4,
             borderRadius: o.shape.borderRadius
           },
           "& .MuiMenuItem-root": {
@@ -1192,7 +1582,7 @@ function fo(o) {
     }
   };
 }
-function Mo(o) {
+function Fo(o) {
   return {
     MuiSkeleton: {
       defaultProps: {
@@ -1206,17 +1596,17 @@ function Mo(o) {
     }
   };
 }
-function ho(o) {
-  const r = e(o.palette.grey[900], 0.48), t = e(o.palette.grey[900], 1);
+function ko(o) {
+  const e = t(o.palette.grey[900], 0.48), a = t(o.palette.grey[900], 1);
   return {
     MuiBackdrop: {
       styleOverrides: {
         root: {
           background: [
             "rgb(22,28,36)",
-            `-moz-linear-gradient(75deg, ${r} 0%, ${t} 100%)`,
-            `-webkit-linear-gradient(75deg, ${r} 0%, ${t} 100%)`,
-            `linear-gradient(75deg, ${r} 0%, ${t} 100%)`
+            `-moz-linear-gradient(75deg, ${e} 0%, ${a} 100%)`,
+            `-webkit-linear-gradient(75deg, ${e} 0%, ${a} 100%)`,
+            `linear-gradient(75deg, ${e} 0%, ${a} 100%)`
           ],
           "&.MuiBackdrop-invisible": {
             background: "transparent"
@@ -1226,8 +1616,8 @@ function ho(o) {
     }
   };
 }
-function Fo(o) {
-  const r = o.palette.mode === "light";
+function Co(o) {
+  const e = o.palette.mode === "light";
   return {
     MuiLinearProgress: {
       styleOverrides: {
@@ -1239,7 +1629,7 @@ function Fo(o) {
           borderRadius: 4
         },
         colorPrimary: {
-          backgroundColor: o.palette.primary[r ? "lighter" : "darker"]
+          backgroundColor: o.palette.primary[e ? "lighter" : "darker"]
         },
         buffer: {
           backgroundColor: "transparent"
@@ -1248,7 +1638,7 @@ function Fo(o) {
     }
   };
 }
-function vo(o) {
+function mo(o) {
   return {
     MuiTimelineDot: {
       styleOverrides: {
@@ -1266,7 +1656,7 @@ function vo(o) {
     }
   };
 }
-function ko(o) {
+function Ro(o) {
   return {
     MuiCheckbox: {
       styleOverrides: {
@@ -1360,9 +1750,14 @@ function So(o) {
     }
   };
 }
-function Co(o) {
+function Lo(o) {
   return {
     MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          subtitleDens: "span"
+        }
+      },
       styleOverrides: {
         paragraph: {
           marginBottom: o.spacing(2)
@@ -1374,7 +1769,7 @@ function Co(o) {
     }
   };
 }
-function $o(o) {
+function Oo(o) {
   return {
     MuiPaginationItem: {
       styleOverrides: {
@@ -1386,9 +1781,9 @@ function $o(o) {
         textPrimary: {
           "&.Mui-selected": {
             color: o.palette.primary.main,
-            backgroundColor: e(o.palette.primary.main, 0.08),
+            backgroundColor: t(o.palette.primary.main, 0.08),
             "&:hover, &.Mui-focusVisible": {
-              backgroundColor: `${e(
+              backgroundColor: `${t(
                 o.palette.primary.main,
                 0.24
               )} !important`
@@ -1400,8 +1795,8 @@ function $o(o) {
         },
         outlinedPrimary: {
           "&.Mui-selected": {
-            backgroundColor: e(o.palette.primary.main, 0.08),
-            border: `1px solid ${e(o.palette.primary.main, 0.24)}`
+            backgroundColor: t(o.palette.primary.main, 0.08),
+            border: `1px solid ${t(o.palette.primary.main, 0.24)}`
           }
         }
       }
@@ -1420,24 +1815,24 @@ function wo(o) {
     }
   };
 }
-function mo(o) {
-  const r = (t) => ({
-    props: { variant: "contained", color: t },
-    style: { boxShadow: o.customShadows[t] }
+function $o(o) {
+  const e = (a) => ({
+    props: { variant: "contained", color: a },
+    style: { boxShadow: o.customShadows.primary }
   });
   return {
     MuiButtonGroup: {
       variants: [
         {
           props: { variant: "contained", color: "inherit" },
-          style: { boxShadow: o.customShadows.z8 }
-        },
-        r("primary"),
-        r("secondary"),
-        r("info"),
-        r("success"),
-        r("warning"),
-        r("error"),
+          style: { boxShadow: o.customShadows.z4 }
+        },
+        e("primary"),
+        e("secondary"),
+        e("info"),
+        e("success"),
+        e("warning"),
+        e("error"),
         {
           props: { disabled: !0 },
           style: {
@@ -1462,7 +1857,7 @@ function mo(o) {
     }
   };
 }
-function Bo(o) {
+function Ao(o) {
   return {
     MuiCssBaseline: {
       styleOverrides: {
@@ -1505,16 +1900,13 @@ function Bo(o) {
     }
   };
 }
-function Oo(o) {
+function To(o) {
   return {
     MuiAutocomplete: {
       styleOverrides: {
         root: {
           "& .MuiInputBase-root": {
             padding: "0 39px 0px 0"
-          },
-          input: {
-            padding: `${o.spacing(1.5, 1.5)}!important`
           }
         },
         paper: {
@@ -1532,19 +1924,19 @@ function Oo(o) {
     }
   };
 }
-const s = (o, r) => ({
-  props: { color: r },
+const u = (o, e) => ({
+  props: { color: e },
   style: {
     "&:hover": {
-      borderColor: e(o.palette[r].main, 0.48),
-      backgroundColor: e(o.palette[r].main, o.palette.action.hoverOpacity)
+      borderColor: t(o.palette[e].main, 0.48),
+      backgroundColor: t(o.palette[e].main, o.palette.action.hoverOpacity)
     },
     "&.Mui-selected": {
-      borderColor: e(o.palette[r].main, 0.48)
+      borderColor: t(o.palette[e].main, 0.48)
     }
   }
 });
-function Lo(o) {
+function Do(o) {
   return {
     MuiToggleButton: {
       variants: [
@@ -1556,12 +1948,12 @@ function Lo(o) {
             }
           }
         },
-        s(o, "primary"),
-        s(o, "secondary"),
-        s(o, "info"),
-        s(o, "success"),
-        s(o, "warning"),
-        s(o, "error")
+        u(o, "primary"),
+        u(o, "secondary"),
+        u(o, "info"),
+        u(o, "success"),
+        u(o, "warning"),
+        u(o, "error")
       ]
     },
     MuiToggleButtonGroup: {
@@ -1580,7 +1972,7 @@ function Lo(o) {
     }
   };
 }
-function Ro(o) {
+function Io(o) {
   return {
     MuiFormControlLabel: {
       styleOverrides: {
@@ -1605,7 +1997,7 @@ function Ro(o) {
     }
   };
 }
-function To(o) {
+function zo(o) {
   return {
     MuiLoadingButton: {
       styleOverrides: {
@@ -1629,42 +2021,32 @@ function To(o) {
     }
   };
 }
-const Do = (o) => ({
+const Go = (o) => ({
   M4LBruceTest: {
     styleOverrides: {}
   }
-}), Ao = (o) => ({
+}), Eo = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {}
   }
-}), Io = (o) => ({
+}), Ho = (o) => ({
   M4LRHFTextFieldPassword: {
     styleOverrides: {
       ["&.M4LRHFTextFieldPassword-root"]: {
         [".M4LRHFTextField-root .MuiTextField-root"]: {
-          border: "1px solid yellow"
-        },
-        ".MuiInputBase-root": {
-          gap: "20px"
+          test: "root",
+          display: "flex",
+          flexDirection: "column",
+          gap: o.spacing(1)
         }
       }
     }
   }
-}), zo = (o) => ({
+}), Po = (o) => ({
   M4LRHFTextField: {
-    styleOverrides: {
-      ["&.M4LRHFTextField-root"]: {
-        test: "root",
-        ".MuiTextField-root": {
-          border: "1px solid purple"
-        },
-        ".MuiFormLabel-root": {
-          background: "orange"
-        }
-      }
-    }
+    styleOverrides: {}
   }
-}), Po = (o) => ({
+}), Wo = (o) => ({
   M4LIcon: {
     styleOverrides: {
       ["&.M4LIcon-root"]: {
@@ -1672,37 +2054,65 @@ const Do = (o) => ({
       }
     }
   }
-}), Eo = (o) => ({
+}), qo = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
-        test: "root",
-        ".M4LIcon-root": {
-          backgroundColor: "yellow"
-        }
+        test: "root"
       }
     }
   }
-}), Ho = (o) => ({
+}), _o = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {
-        test: "root",
-        ".MuiIconButton-sizeMedium": {
-          border: "1px solid red"
-        }
+        test: "root"
       }
     }
   }
-}), Wo = (o) => ({
+}), No = (o) => ({
   M4LImageButton: {
     styleOverrides: {
       ["&.M4LImageButton-root"]: {
-        test: "root"
+        test: "root",
+        ".MuiButtonBase-root": {
+          display: "flex",
+          padding: "4px",
+          borderRadius: "6px",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        ".M4LImage-root": {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          objectFit: "cover",
+          width: "100%",
+          height: "100%"
+        },
+        ".M4LImage-lazyLoad": {
+          borderRadius: "4px",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        ".M4LImage-img": {
+          borderRadius: "4px"
+        },
+        ".MuiButtonBase-root:hover": {
+          backgroundColor: o.palette.state?.active12
+        },
+        ".MuiButtonBase-root:focus": {
+          backgroundColor: o.palette.state?.active12,
+          border: "1px solid",
+          borderColor: o.palette.state?.focus
+        }
       }
     }
   }
-}), _o = (o) => ({
+}), Yo = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
@@ -1710,26 +2120,83 @@ const Do = (o) => ({
       }
     }
   }
-}), Go = (o) => ({
+}), jo = (o) => ({
   M4LPopover: {
     styleOverrides: {
       ["&.M4LPopover-root"]: {
         test: "root",
         ".MuiPaper-root": {
-          background: "blue"
+          background: o.palette.background.default,
+          borderRadius: "6px",
+          Padding: "8px",
+          margin: "8px 0px 0px 8px",
+          boxShadow: o.customShadows.z3
         }
       }
     }
   }
-}), No = (o) => ({
+}), Vo = (o) => ({
   M4LRHFCheckbox: {
     styleOverrides: {
       ["&.M4LRHFCheckbox-root"]: {
-        test: "root"
+        test: "root",
+        ".M4LRHFCheckbox-checkTypography": {
+          display: "flex",
+          gap: o.spacing(2),
+          [o.breakpoints.down("sm")]: {
+            gap: o.spacing(1),
+            ...o.typography.paragraph
+          }
+        },
+        "& .MuiTypography-root": {
+          color: o.palette.text.primary,
+          ...o.typography.body
+        },
+        ".M4LRHFCheckbox-small .MuiButtonBase-root": {
+          width: "20px",
+          height: "20px"
+        },
+        ".MuiCheckbox-root .MuiSvgIcon-fontSizeSmall": {
+          width: "16px",
+          height: "16px"
+        },
+        ".M4LRHFCheckbox-medium .MuiButtonBase-root": {
+          width: "24px",
+          height: "24px"
+        },
+        ".MuiCheckbox-root .MuiSvgIcon-fontSizeMedium": {
+          width: "20px",
+          height: "20px"
+        },
+        ".MuiButtonBase-root": {
+          borderRadius: "4px"
+        },
+        ".MuiButtonBase-root:hover": {
+          backgroundColor: o.palette.state?.active12
+        },
+        ".Mui-focusVisible": {
+          border: "1px solid",
+          borderColor: o.palette.state?.focus
+        },
+        ".MuiButtonBase-root:hover .MuiSvgIcon-root": {
+          fill: o.palette.state?.hover
+        },
+        ".M4LRHFCheckbox-checkTypography .MuiTypography-root": {
+          ...o.typography.body
+        },
+        ".M4LRHFCheckbox-stateDisabled .MuiSvgIcon-root": {
+          fill: o.palette.state?.default
+        },
+        ".M4LRHFCheckbox-stateDisabled .MuiTypography-root": {
+          color: o.palette.text.disabled
+        },
+        ".MuiButtonBase-root .Mui-focusVisible:focus-visible": {
+          outline: "#fff00"
+        }
       }
     }
   }
-}), Yo = (o) => ({
+}), Uo = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
       ["&.M4LErrorLabel-root"]: {
@@ -1737,99 +2204,144 @@ const Do = (o) => ({
       }
     }
   }
-}), jo = (o) => ({
+}), Ko = (o) => ({
   M4LTypography: {
     styleOverrides: {
       ["&.M4LTypography-root"]: {
-        test: "root"
+        display: "inline",
+        "& .MuiTypography-root": {
+          margin: "unset"
+        }
       }
     }
   }
-}), Vo = (o) => ({
+}), Jo = (o) => ({
   M4LButton: {
+    styleOverrides: {}
+  }
+}), Qo = (o) => ({
+  M4LRHFAutocomplete: {
     styleOverrides: {
-      "&.M4LButton-root": {
-        test: "root",
-        ".MuiButton-root": {
-          border: "4px solid blue"
-        }
+      ["&.M4LRHFAutocomplete-root"]: {
+        test: "root"
+      }
+    }
+  }
+}), Xo = (o) => ({
+  M4LRHFAutocompleteAsync: {
+    styleOverrides: {
+      ["&.M4LRHFAutocompleteAsync-root"]: {
+        test: "root"
+      }
+    }
+  }
+}), Zo = (o) => ({
+  M4LoadingButton: {
+    styleOverrides: {}
+  }
+}), or = (o) => ({
+  M4LNavLink: {
+    styleOverrides: {
+      ["&.M4LNavLink-root"]: {
+        test: "root"
       }
     }
   }
 });
-function Xo(o) {
+function ur(o) {
   return Object.assign(
-    J(o),
-    X(o),
-    Q(o),
-    Z(o),
     oo(o),
-    ao(o),
-    no(),
-    po(o),
-    eo(),
-    ro(o),
     to(o),
-    io(o),
+    ro(o),
+    eo(o),
+    ao(o),
+    so(o),
+    uo(),
     co(o),
-    U(o),
-    q(o),
+    po(),
+    io(o),
+    no(o),
     lo(o),
-    K(o),
-    uo(o),
-    so(o),
     yo(o),
+    X(o),
+    Z(o),
     xo(o),
+    Q(o),
     bo(o),
-    go(),
-    ko(o),
-    fo(o),
-    Mo(o),
+    go(o),
     vo(o),
     ho(o),
+    Mo(o),
+    fo(),
+    Ro(o),
+    Bo(o),
     Fo(o),
-    So(o),
+    mo(o),
+    ko(o),
     Co(o),
+    So(o),
+    Lo(o),
+    Oo(o),
     $o(o),
-    mo(o),
     wo(o),
-    Bo(),
-    Oo(o),
-    Ro(o),
-    Lo(o),
-    To(o),
-    Do(),
     Ao(),
-    zo(),
-    Io(),
-    Po(),
+    To(o),
+    Io(o),
+    Do(o),
+    zo(o),
+    Zo(),
+    Go(),
     Eo(),
-    Ho(),
+    Po(),
+    Ho(o),
+    Qo(),
+    Xo(),
     Wo(),
+    qo(),
     _o(),
-    Go(),
-    No(),
+    No(o),
+    or(),
     Yo(),
-    jo(),
-    Vo()
+    jo(o),
+    Vo(o),
+    Uo(),
+    Ko(),
+    Jo()
   );
 }
+const cr = {
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1400
+  }
+}, gr = {
+  mobile: 16,
+  desktop: 8
+};
 export {
-  P as bluePreset,
-  l as colorPresets,
-  j as customShadows,
-  z as cyanPreset,
-  A as defaultPreset,
-  Qo as defaultThemeOptions,
-  Xo as fnComponentsOverrides,
-  W as getColorPresets,
-  Jo as getFontValue,
-  E as orangePreset,
-  p as palette,
-  I as purplePreset,
-  n as pxToRem,
-  H as redPreset,
-  _ as remToPx,
-  d as responsiveFontSizes,
-  V as shadows
+  r as PATRONUSCOLORS,
+  N as blaze,
+  _ as candy,
+  g as colorPresets,
+  sr as createCustomShadows,
+  P as defaultPreset,
+  lr as defaultThemeOptions,
+  ur as fnComponentsOverrides,
+  ir as getColorPresets,
+  nr as getColorState,
+  pr as getFontValue,
+  gr as globalRemSize,
+  q as grass,
+  cr as muiBreakpointsValues,
+  d as palette,
+  s as pxToRem,
+  Y as remToPx,
+  p as responsiveFontSizes,
+  dr as shadows,
+  yr as styled,
+  W as turqui,
+  U as typography
 };