@m4l/styles 0.0.30 → 0.0.32

package/theme/{palette.104051a7.js → palette.31d770bc.js}

@@ -1,5 +1,5 @@
 import { alpha as r } from "@mui/material/styles";
-function a(s, B) {
+function F(s, B) {
   return `linear-gradient(to bottom, ${s}, ${B})`;
 }
 const e = {
@@ -95,7 +95,7 @@ const e = {
     10: "#FFD8D8",
     20: "#F59292",
     30: "#F66A6A",
-    40: "#F64141",
+    40: "#F15B50",
     50: "#F71919",
     60: "#D31616",
     70: "#AF1212",
@@ -127,15 +127,15 @@ const e = {
   marbleLight: {
     10: "#FFFFFF",
     20: "#F7FCFC",
-    30: "#F9FBFB",
+    30: "#F4F5F5",
     40: "#F0F4F4",
-    50: "#EAEFF0",
+    50: "#E6E8EA",
     60: "#E1E9EA",
     70: "#E2E7E9",
     80: "#fff0",
     90: "#fff0"
   },
-  ashBlak: {
+  onyx: {
     10: "#364040",
     20: "#323B3B",
     30: "#2A3232",
@@ -145,8 +145,30 @@ const e = {
     70: "#090A0A",
     80: "#fff0",
     90: "#fff0"
+  },
+  mint: {
+    10: "#9BB4CA",
+    20: "#A1BDD9",
+    30: "#A6C5E2",
+    40: "#BCD6F0",
+    50: "#C8E1F9",
+    60: "#BFDBF8",
+    70: "#C3DEFE",
+    80: "#DFE7F2",
+    90: "#F1F2F4"
+  },
+  oxford: {
+    10: "#F7F8F9",
+    20: "#DCDFE4",
+    30: "#B3B9C4",
+    40: "#8590A2",
+    50: "#758195",
+    60: "#626F86",
+    70: "#44546F",
+    80: "#2C3E5D",
+    90: "#091E42"
   }
-}, c = {
+}, d = {
   patronus: {
     4: r(e.patronusBlue[50], 0.08),
     12: r(e.patronusBlue[50], 0.12),
@@ -218,35 +240,52 @@ const e = {
     48: r(e.marbleLight[10], 0.48),
     60: r(e.marbleLight[10], 0.6),
     72: r(e.marbleLight[10], 0.72)
+  },
+  mint: {
+    4: r(e.mint[40], 0.04),
+    12: r(e.mint[20], 0.08),
+    24: r(e.mint[50], 0.1),
+    36: r(e.mint[30], 0.14),
+    48: r(e.mint[70], 0.18),
+    60: r(e.mint[60], 0.28),
+    72: r(e.mint[10], 0.5)
+  },
+  oxford: {
+    4: r(e.oxford[90], 0.32),
+    12: r(e.oxford[90], 0.04),
+    24: r(e.oxford[90], 0.16),
+    36: r(e.oxford[90], 0.31),
+    48: r(e.oxford[90], 0.49),
+    60: r(e.oxford[90], 0.1)
   }
-}, t = {
+}, a = {
   lighter: e.patronusBlue[60],
   light: e.patronusBlue[40],
   main: e.patronusBlue[50],
   dark: e.patronusBlue[30],
   darker: e.patronusBlue[10],
   contrastText: e.marbleLight[10]
-}, d = {
+}, c = {
   lighter: "#fff0",
   light: "#fff0",
   main: "#fff0",
   dark: "#fff0",
   darker: "#fff0"
-}, o = {
+}, t = {
   lighter: "#fff0",
   light: "#fff0",
   main: e.crayonBlue[50],
   dark: "#fff0",
   darker: "#fff0",
   opacity: r(e.crayonBlue[50], 0.08)
-}, l = {
+}, n = {
   lighter: "#fff0",
   light: "#fff0",
   main: e.acidGreen[60],
   dark: "#fff0",
   darker: "#fff0",
   opacity: r(e.acidGreen[60], 0.08)
-}, n = {
+}, l = {
   lighter: "#fff0",
   light: "#fff0",
   main: e.middleYellow[60],
@@ -260,7 +299,7 @@ const e = {
   dark: "#fff0",
   darker: "#fff0",
   opacity: r(e.flameRed[40], 0.08)
-}, F = {
+}, o = {
   0: "#FFFFFF",
   100: "#F9FAFB",
   200: "#F4F6F8",
@@ -279,13 +318,13 @@ const e = {
   50048: r("#919EAB", 0.48),
   50056: r("#919EAB", 0.56),
   50080: r("#919EAB", 0.8)
+}, E = {
+  primary: F(a.light, a.main),
+  info: F(t.light, t.main),
+  success: F(n.light, n.main),
+  warning: F(l.light, l.main),
+  error: F(i.light, i.main)
 }, u = {
-  primary: a(t.light, t.main),
-  info: a(o.light, o.main),
-  success: a(l.light, l.main),
-  warning: a(n.light, n.main),
-  error: a(i.light, i.main)
-}, g = {
   violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
   blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
   green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
@@ -294,60 +333,61 @@ const e = {
 }, A = {
   normal: e.crayonBlue[50],
   hover: e.crayonBlue[70]
-}, E = {
+}, g = {
   normal: e.acidGreen[60],
   hover: e.acidGreen[70]
 }, C = {
   normal: e.flameRed[40],
   hover: e.flameRed[60]
-}, D = {
+}, m = {
   normal: e.middleYellow[60],
   hover: e.middleYellow[70]
-}, m = {
+}, D = {
   default: r(e.coolGrey[50], 0.24),
   transition: r(e.coolGrey[50], 0.08)
-}, h = {
+}, b = {
   info: { ...A },
-  success: { ...E },
+  success: { ...g },
   error: { ...C },
-  warning: { ...D },
-  skeleton: { ...m }
+  warning: { ...m },
+  skeleton: { ...D }
 }, f = {
   common: { black: "#000", white: "#fff" },
-  primary: { ...t },
+  primary: { ...a },
   state: {
-    ...h
+    ...b
   },
   patronus: { ...e },
-  opacity: { ...c },
-  secondary: { ...d, contrastText: "#fff" },
-  info: { ...o, contrastText: "#fff" },
-  success: { ...l, contrastText: F[800] },
-  warning: { ...n, contrastText: F[800] },
+  opacity: { ...d },
+  secondary: { ...c, contrastText: "#fff" },
+  info: { ...t, contrastText: "#fff" },
+  success: { ...n, contrastText: o[800] },
+  warning: { ...l, contrastText: o[800] },
   error: { ...i, contrastText: "#fff" },
-  grey: F,
-  gradients: u,
-  chart: g,
-  divider: F[50024],
+  grey: o,
+  gradients: E,
+  chart: u,
   action: {
     hoverOpacity: 0.08,
     disabledOpacity: 0.48
   }
-}, p = {
+}, y = {
   light: {
     ...f,
     mode: "light",
     text: {
-      primary: e.ashBlak[10],
+      primary: e.onyx[10],
       secondary: e.coolGrey[60],
-      disabled: e.coolGrey[30]
+      disabled: e.oxford[30]
     },
     background: {
       paper: "#fff0",
-      default: e.marbleLight[20],
-      neutral: e.marbleLight[50],
-      background: e.marbleLight[70]
+      default: e.marbleLight[10],
+      neutral: e.marbleLight[40],
+      background: e.marbleLight[60],
+      header: e.marbleLight[30]
     },
+    divider: e.coolGrey[20],
     grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
   },
   dark: {
@@ -360,15 +400,18 @@ const e = {
     },
     background: {
       paper: "#fff0",
-      default: e.ashBlak[20],
-      neutral: e.ashBlak[30],
-      background: e.ashBlak[50]
+      default: e.onyx[40],
+      neutral: e.onyx[50],
+      background: e.onyx[60],
+      header: e.onyx[30]
     },
+    divider: e.coolGrey[80],
     grid: { sectionHeader: "#29313A", divider: "#3E464F", rowHover: "#1F262F" }
   }
 };
 export {
+  d as O,
   e as P,
-  h as S,
-  p
+  b as S,
+  y as p
 };

package/theme/palette.d.ts

@@ -1,6 +1,6 @@
 export declare type ColorSchema = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
-export declare type PatronusColors = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'ashBlak';
-export declare type PatronusOpacityColors = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'orange' | 'cool' | 'marbel';
+export declare type PatronusColors = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford';
+export declare type PatronusOpacityColors = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'orange' | 'cool' | 'marbel' | 'mint' | 'oxford';
 export interface PatronusColorOptions {
     10: string;
     20: string;
@@ -18,8 +18,8 @@ export interface PatronusOpacityOptions {
     24: string;
     36: string;
     48: string;
-    60: string;
-    72: string;
+    60?: string;
+    72?: string;
 }
 export declare type PatronusConstantColors = Record<PatronusColors, PatronusColorOptions>;
 export declare const PATRONUSCOLORS: PatronusConstantColors;
@@ -87,7 +87,9 @@ export declare const palette: {
             readonly default: string;
             readonly neutral: string;
             readonly background: string;
+            readonly header: string;
         };
+        readonly divider: string;
         readonly grid: {
             readonly sectionHeader: "#F6F7F9";
             readonly divider: "#EDEFF2";
@@ -140,10 +142,14 @@ export declare const palette: {
             coolGrey: PatronusColorOptions;
             brown: PatronusColorOptions;
             marbleLight: PatronusColorOptions;
-            ashBlak: PatronusColorOptions;
+            onyx: PatronusColorOptions;
+            mint: PatronusColorOptions;
+            oxford: PatronusColorOptions;
         };
         readonly opacity: {
             brown: PatronusOpacityOptions;
+            mint: PatronusOpacityOptions;
+            oxford: PatronusOpacityOptions;
             patronus: PatronusOpacityOptions;
             turqui: PatronusOpacityOptions;
             grass: PatronusOpacityOptions;
@@ -230,7 +236,6 @@ export declare const palette: {
             yellow: string[];
             red: string[];
         };
-        readonly divider: string;
         readonly action: {
             hoverOpacity: number;
             disabledOpacity: number;
@@ -248,7 +253,9 @@ export declare const palette: {
             readonly default: string;
             readonly neutral: string;
             readonly background: string;
+            readonly header: string;
         };
+        readonly divider: string;
         readonly grid: {
             readonly sectionHeader: "#29313A";
             readonly divider: "#3E464F";
@@ -301,10 +308,14 @@ export declare const palette: {
             coolGrey: PatronusColorOptions;
             brown: PatronusColorOptions;
             marbleLight: PatronusColorOptions;
-            ashBlak: PatronusColorOptions;
+            onyx: PatronusColorOptions;
+            mint: PatronusColorOptions;
+            oxford: PatronusColorOptions;
         };
         readonly opacity: {
             brown: PatronusOpacityOptions;
+            mint: PatronusOpacityOptions;
+            oxford: PatronusOpacityOptions;
             patronus: PatronusOpacityOptions;
             turqui: PatronusOpacityOptions;
             grass: PatronusOpacityOptions;
@@ -391,7 +402,6 @@ export declare const palette: {
             yellow: string[];
             red: string[];
         };
-        readonly divider: string;
         readonly action: {
             hoverOpacity: number;
             disabledOpacity: number;

package/theme/{shadows.b036a684.js → shadows.9800d84c.js}

@@ -1,7 +1,7 @@
-import { alpha as a } from "@mui/material/styles";
-import { p as e, P as r } from "./palette.104051a7.js";
-const s = e.light.grey[500], n = "#000000", o = (t) => {
-  const p = a(t, 0.2), x = a(t, 0.14), $ = a(t, 0.12);
+import { alpha as o } from "@mui/material/styles";
+import { p as e, P as r } from "./palette.31d770bc.js";
+const a = e.light.grey[500], s = "#000000", n = (t) => {
+  const p = o(t, 0.2), x = o(t, 0.14), $ = o(t, 0.12);
   return [
     "none",
     `0px 2px 1px -1px ${p},0px 1px 1px 0px ${x},0px 1px 3px 0px ${$}`,
@@ -31,39 +31,39 @@ const s = e.light.grey[500], n = "#000000", o = (t) => {
   ];
 }, i = (t) => {
   const p = {
-    info: `0px 2px 8px 0px ${a(r.patronusBlue[50], 0.2)}`,
-    secondary: `0px 2px 8px 0px ${a(e.light.secondary.main, 0.24)}`,
-    success: `0px 2px 8px 0px ${a(r.acidGreen[50], 0.2)}`,
-    warning: `0px 2px 8px 0px ${a(r.middleYellow[50], 0.2)}`,
-    error: `0px 2px 8px 0px ${a(r.flameRed[50], 0.2)}`,
-    card: `0 0 2px 0 ${a(e.light.grey[500], 0.2)}, 0 12px 24px -4px ${a(
+    info: `0px 2px 8px 0px ${o(r.patronusBlue[50], 0.2)}`,
+    secondary: `0px 2px 8px 0px ${o(e.light.secondary.main, 0.24)}`,
+    success: `0px 2px 8px 0px ${o(r.acidGreen[50], 0.2)}`,
+    warning: `0px 2px 8px 0px ${o(r.middleYellow[50], 0.2)}`,
+    error: `0px 2px 8px 0px ${o(r.flameRed[50], 0.2)}`,
+    card: `0 0 2px 0 ${o(e.light.grey[500], 0.2)}, 0 12px 24px -4px ${o(
       e.light.grey[500],
       0.12
     )}`,
-    dialog: `-40px 40px 80px -8px ${a(e.light.common.black, 0.24)}`,
-    dropdown: `0 0 2px 0 ${a(e.light.grey[500], 0.24)}, -20px 20px 40px -4px ${a(
+    dialog: `-40px 40px 80px -8px ${o(e.light.common.black, 0.24)}`,
+    dropdown: `0 0 2px 0 ${o(e.light.grey[500], 0.24)}, -20px 20px 40px -4px ${o(
       e.light.grey[500],
       0.24
     )}`
   };
   return t === "light" ? {
-    z1: `0px 1px 2px ${a(r.coolGrey[70], 0.12)}`,
-    z2: `0px 2px 2px 1px ${a(r.coolGrey[70], 0.12)}`,
-    z3: `0px 4px 8px ${a(r.coolGrey[70], 0.16)}`,
-    z4: `0px 8px 16px 1px ${a(r.coolGrey[70], 0.16)}`,
+    z1: `0px 1px 2px ${o(r.coolGrey[70], 0.12)}`,
+    z2: `0px 2px 2px 1px ${o(r.coolGrey[70], 0.12)}`,
+    z3: `0px 4px 8px ${o(r.coolGrey[70], 0.16)}`,
+    z4: `0px 8px 16px 1px ${o(r.coolGrey[70], 0.16)}`,
     ...p
   } : {
-    z1: `0px 1px 2px ${a(r.ashBlak[50], 0.4)}`,
-    z2: `0px 2px 2px 1px ${a(r.ashBlak[50], 0.4)}`,
-    z3: `0px 4px 8px 1px ${a(r.ashBlak[60], 0.4)}`,
-    z4: `0px 8px 16px 4px ${a(r.ashBlak[60], 0.4)}`,
+    z1: `0px 1px 2px ${o(r.onyx[50], 0.4)}`,
+    z2: `0px 2px 2px 1px ${o(r.onyx[50], 0.4)}`,
+    z3: `0px 4px 8px 1px ${o(r.onyx[60], 0.4)}`,
+    z4: `0px 8px 16px 4px ${o(r.onyx[60], 0.4)}`,
     ...p
   };
-}, h = {
-  light: o(s),
-  dark: o(n)
+}, g = {
+  light: n(a),
+  dark: n(s)
 };
 export {
   i as c,
-  h as s
+  g as s
 };

package/theme/typography.b14a8e35.js

@@ -0,0 +1,122 @@
+import { r as e, p as t } from "../utils/getFontValue.88831637.js";
+const i = "Segoe UI, Poppins, sans-serif", g = {
+  fontFamily: i,
+  fontWeightRegular: 400,
+  fontWeightMedium: 600,
+  fontWeightBold: 700,
+  h1: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    ...e({ sm: 38, md: 40, lg: 40 })
+  },
+  h2: {
+    fontWeight: 600,
+    lineHeight: 1,
+    ...e({ sm: 40, md: 44, lg: 48 })
+  },
+  h3: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    ...e({ sm: 30, md: 32, lg: 32 })
+  },
+  h4: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    ...e({ sm: 20, md: 24, lg: 24 })
+  },
+  h5: {
+    fontWeight: 500,
+    lineHeight: "28px",
+    letterSpacing: "-0.01em",
+    ...e({ sm: 22, md: 24, lg: 24 })
+  },
+  h6: {
+    fontWeight: 500,
+    lineHeight: "24px",
+    letterSpacing: "-0.08em",
+    ...e({ sm: 18, md: 18, lg: 18 })
+  },
+  subtitle: {
+    fontWeight: 400,
+    lineHeight: "20px",
+    letterSpacing: "-0.006em",
+    ...e({ sm: 18, md: 15, lg: 15 })
+  },
+  subtitleDens: {
+    fontWeight: 600,
+    lineHeight: "24px",
+    letterSpacing: "-0.006em",
+    ...e({ sm: 18, md: 15, lg: 15 })
+  },
+  paragraph: {
+    fontWeight: 400,
+    lineHeight: "16px",
+    letterSpacing: "-0.003em",
+    ...e({ sm: 16, md: 13, lg: 13 })
+  },
+  paragraphDens: {
+    fontWeight: 600,
+    lineHeight: "20px",
+    letterSpacing: "-0.003em",
+    ...e({ sm: 16, md: 13, lg: 13 })
+  },
+  subtitle1: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    fontSize: t(14)
+  },
+  subtitle2: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    fontSize: t(12)
+  },
+  body: {
+    fontWeight: 400,
+    lineHeight: "16px",
+    ...e({ sm: 14, md: 11, lg: 11 })
+  },
+  bodyDens: {
+    fontWeight: 600,
+    lineHeight: "16px",
+    ...e({ sm: 14, md: 11, lg: 11 })
+  },
+  body0: {
+    lineHeight: 1.5,
+    fontWeight: 400,
+    fontSize: t(16)
+  },
+  body1: {
+    lineHeight: 1.5,
+    fontWeight: 400,
+    fontSize: t(14)
+  },
+  body2: {
+    lineHeight: 1.5,
+    fontWeight: 400,
+    fontSize: t(12)
+  },
+  caption: {
+    lineHeight: 1.5,
+    fontSize: t(11)
+  },
+  overline: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: t(12),
+    textTransform: "uppercase"
+  },
+  button: {
+    fontWeight: 700,
+    lineHeight: 24 / 14,
+    fontSize: t(14),
+    textTransform: "capitalize"
+  },
+  action: {
+    fontWeight: 600,
+    lineHeight: "16px",
+    ...e({ sm: 14, md: 12, lg: 12 })
+  }
+};
+export {
+  g as t
+};

package/theme/typography.d.ts

@@ -4,6 +4,7 @@ export declare type FontProps = {
     lineHeight: string;
     letterSpacing: string;
 };
+export declare type M4LTypographyVariants = 'h1' | 'h3' | 'h5' | 'subtitle' | 'subtitleDens' | 'paragraph' | 'paragraphDens' | 'body' | 'bodyDens' | 'action';
 export interface TypographyVariants {
     subtitle: FontProps;
     subtitleDens: FontProps;
@@ -14,7 +15,7 @@ export interface TypographyVariants {
     action: FontProps;
 }
 export declare const typography: {
-    readonly fontFamily: "Poppins, sans-serif";
+    readonly fontFamily: "Segoe UI, Poppins, sans-serif";
     readonly fontWeightRegular: 400;
     readonly fontWeightMedium: 600;
     readonly fontWeightBold: 700;
@@ -80,8 +81,9 @@ export declare const typography: {
         readonly '@media (min-width:1200px)': {
             fontSize: string;
         };
-        readonly fontWeight: 600;
-        readonly lineHeight: 1.5;
+        readonly fontWeight: 500;
+        readonly lineHeight: "28px";
+        readonly letterSpacing: "-0.01em";
     };
     readonly h6: {
         readonly '@media (min-width:0px)': {
@@ -93,8 +95,9 @@ export declare const typography: {
         readonly '@media (min-width:1200px)': {
             fontSize: string;
         };
-        readonly fontWeight: 600;
-        readonly lineHeight: number;
+        readonly fontWeight: 500;
+        readonly lineHeight: "24px";
+        readonly letterSpacing: "-0.08em";
     };
     readonly subtitle: {
         readonly '@media (min-width:0px)': {
@@ -107,7 +110,8 @@ export declare const typography: {
             fontSize: string;
         };
         readonly fontWeight: 400;
-        readonly lineHeight: 1.5;
+        readonly lineHeight: "20px";
+        readonly letterSpacing: "-0.006em";
     };
     readonly subtitleDens: {
         readonly '@media (min-width:0px)': {
@@ -120,7 +124,8 @@ export declare const typography: {
             fontSize: string;
         };
         readonly fontWeight: 600;
-        readonly lineHeight: 1.5;
+        readonly lineHeight: "24px";
+        readonly letterSpacing: "-0.006em";
     };
     readonly paragraph: {
         readonly '@media (min-width:0px)': {
@@ -133,7 +138,8 @@ export declare const typography: {
             fontSize: string;
         };
         readonly fontWeight: 400;
-        readonly lineHeight: 1.429;
+        readonly lineHeight: "16px";
+        readonly letterSpacing: "-0.003em";
     };
     readonly paragraphDens: {
         readonly '@media (min-width:0px)': {
@@ -146,7 +152,8 @@ export declare const typography: {
             fontSize: string;
         };
         readonly fontWeight: 600;
-        readonly lineHeight: 1.429;
+        readonly lineHeight: "20px";
+        readonly letterSpacing: "-0.003em";
     };
     readonly subtitle1: {
         readonly fontWeight: 600;
@@ -169,7 +176,7 @@ export declare const typography: {
             fontSize: string;
         };
         readonly fontWeight: 400;
-        readonly lineHeight: 1.143;
+        readonly lineHeight: "16px";
     };
     readonly bodyDens: {
         readonly '@media (min-width:0px)': {
@@ -182,7 +189,7 @@ export declare const typography: {
             fontSize: string;
         };
         readonly fontWeight: 600;
-        readonly lineHeight: 1.143;
+        readonly lineHeight: "16px";
     };
     readonly body0: {
         readonly lineHeight: 1.5;
@@ -225,7 +232,7 @@ export declare const typography: {
         readonly '@media (min-width:1200px)': {
             fontSize: string;
         };
-        readonly fontWeight: 500;
-        readonly lineHeight: 1.667;
+        readonly fontWeight: 600;
+        readonly lineHeight: "16px";
     };
 };

package/types/augmentations.d.ts

@@ -99,7 +99,7 @@ declare module '@mui/material/styles' {
         action: React.CSSProperties;
     }
 
-    interface TypeBackground {
+    interface TypeBackground { 
         neutral: string;
         autofill: string;
         header: string;

package/utils/{getColorPresets.2693301f.js → getColorPresets.9fec9cc2.js}

@@ -1,4 +1,4 @@
-import { P as r } from "../theme/palette.104051a7.js";
+import { P as r } from "../theme/palette.31d770bc.js";
 const e = [
   {
     name: "patronus",