@m4l/styles 0.0.41 → 0.0.43

package/theme/overrides/M4LRHFComponents/{index.427e0f0e.js → index.02fada22.js}

@@ -1,6 +1,6 @@
 import { alpha as o } from "@mui/system";
 import { alpha as e } from "@mui/material/styles";
-const r = (t) => ({
+const a = (t) => ({
   M4LRHFTextFieldPassword: {
     styleOverrides: {
       "&.M4LRHFTextFieldPassword-root": {
@@ -16,6 +16,7 @@ const r = (t) => ({
         flexDirection: "column",
         width: "100%",
         gap: "2px",
+        outline: "unset",
         "&.M4LRHFTextField-variantText": {
           height: "auto",
           "& .MuiFormControl-root": {
@@ -170,7 +171,7 @@ const r = (t) => ({
       "&.M4LRHFCheckbox-root": {
         display: "flex",
         flexDirection: "column",
-        gap: t.spacing(0.5),
+        width: "100%",
         [t.breakpoints.down("sm")]: {
           "& .M4LRHFCheckbox-checkTypography": {
             "& .M4LCheckBox-root": {
@@ -189,14 +190,6 @@ const r = (t) => ({
           [t.breakpoints.down("sm")]: {
             gap: t.spacing(1),
             ...t.typography.paragraph
-          },
-          "& .M4LCheckBox-root": {
-            display: "flex",
-            gap: "8px",
-            "& .M4LTypography-root": {
-              display: "flex",
-              alignItems: "center"
-            }
           }
         },
         "& .MuiTypography-root": {
@@ -238,9 +231,6 @@ const r = (t) => ({
         ".M4LRHFCheckbox-stateDisabled .MuiSvgIcon-root": {
           fill: t.palette.state?.default
         },
-        ".M4LRHFCheckbox-stateDisabled .MuiTypography-root": {
-          color: t.palette.text.disabled
-        },
         ".MuiButtonBase-root .Mui-focusVisible:focus-visible": {
           outline: "#FFF00"
         }
@@ -256,6 +246,7 @@ const r = (t) => ({
         flexDirection: "column",
         width: "100%",
         gap: "2px",
+        outline: "unset",
         "& .MuiAutocomplete-root": {
           height: "100%",
           "& .MuiFormControl-root": {
@@ -293,19 +284,15 @@ const r = (t) => ({
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
-            height: `${t.spacing(4.5)}`,
-            border: `1px solid ${t.palette.divider}`,
-            borderRadius: `${t.spacing(1)}`,
-            padding: `0 ${t.spacing(2)}`,
+            border: "1px solid",
+            borderColor: t.palette.divider,
+            borderRadius: "4px",
+            padding: "0 10px",
             overflow: "hidden",
-            [t.breakpoints.down("md")]: {
-              width: "100%"
-            },
-            "& .M4LRHFAutocomplete-skeletonContainerText": {
+            "& .M4LRHFAutocomplete-SkeletonContainerText": {
               width: "100%",
               height: "auto",
-              overflow: "hidden",
-              margin: t.spacing(1.5)
+              overflow: "hidden"
             }
           }
         },
@@ -538,14 +525,49 @@ const r = (t) => ({
         flexDirection: "column",
         width: "100%",
         gap: "2px",
+        outline: "unset",
+        "& .M4LRHFDateTime-skeleton": {
+          display: "flex",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "space-between",
+          border: `1px solid ${t.palette.divider}`,
+          paddingLeft: "12px",
+          borderRadius: "2px",
+          "& .MuiSkeleton-circular": {
+            margin: "4px"
+          }
+        },
+        "&.M4LRHFDateTime-small": {
+          "& .M4LRHFDateTime-skeleton": {
+            height: "24px",
+            "& .MuiSkeleton-circular": {
+              width: "16px",
+              height: "16px"
+            }
+          },
+          "& .MuiFormControl-root": {
+            height: "24px"
+          }
+        },
+        "&.M4LRHFDateTime-medium": {
+          "& .M4LRHFDateTime-skeleton": {
+            height: "36px",
+            "& .MuiSkeleton-circular": {
+              width: "24px",
+              height: "24px"
+            }
+          },
+          "& .MuiFormControl-root": {
+            height: "36px"
+          }
+        },
         "& .MuiFormControl-root": {
-          height: "24px",
           "& .MuiInputBase-root": {
             padding: "0 4px 0 0",
-            minHeight: "24px",
+            height: "100%",
             "& .MuiInputBase-input": {
-              minHeight: "24px",
-              height: "24px"
+              minHeight: "24px"
             }
           }
         },
@@ -557,10 +579,10 @@ const r = (t) => ({
           padding: "0px 8px 0 0",
           "& .MuiInputBase-input": {
             color: t.palette.text.secondary,
-            padding: "1px 8px",
+            padding: "0px 12px",
             backgroundColor: "transparent",
-            ...t.typography.body,
-            height: "100%"
+            height: "100%",
+            ...t.typography.body
           },
           "& .MuiInputAdornment-root": {
             margin: "0px",
@@ -666,18 +688,6 @@ const r = (t) => ({
             backgroundColor: t.palette.text.disabled
           }
         }
-      },
-      [t.breakpoints.down("md")]: {
-        "& .MuiFormControl-root": {
-          height: "36px !important",
-          "& .MuiInputBase-root": {
-            minHeight: "36px !important",
-            "& .MuiInputBase-input": {
-              minHeight: "36px !important",
-              height: "36px !important"
-            }
-          }
-        }
       }
     }
   }
@@ -873,28 +883,42 @@ const r = (t) => ({
   M4LRHFColorPicker: {
     styleOverrides: {
       "&.M4LRHFColorPicker-root": {
-        test: "root",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        outline: "unset",
+        "&.M4LRHFColorPicker-sizeSmall": {
+          "& .M4LRHFColorPicker-containerFieldColor": {
+            "& .M4LRHFColorPicker-boxColor": {
+              width: "20px",
+              height: "20px"
+            }
+          }
+        },
+        "&.M4LRHFColorPicker-sizeMedium": {
+          "& .M4LRHFColorPicker-containerFieldColor": {
+            "& .M4LRHFColorPicker-boxColor": {
+              width: "24px",
+              height: "24px"
+            }
+          }
+        },
+        "& .M4LRHFColorPicker-skeleton": {
+          borderRadius: "4px"
+        },
         "& .M4LRHFColorPicker-containerFieldColor": {
           display: "flex",
-          alingnItems: "center",
+          aligItems: "center",
           justifyContent: "center",
           gap: "4px",
           padding: "2px",
           border: "1.5px solid",
           borderColor: t.palette.state.borderPrimary,
           borderRadius: "4px",
-          minHeight: "24px",
-          height: "24px",
+          width: "fit-content",
           "& .M4LRHFColorPicker-boxColor": {
-            borderRadius: "4px",
-            height: "18px !important",
-            width: "18px !important"
-          },
-          "& .M4LIcon-root": {
-            minHeight: "18px",
-            minWidth: "18px",
-            cursor: "pointer",
-            borderRadius: "4px"
+            cursor: "pointer"
           },
           "& .M4LIcon-root:hover": {
             background: t.palette.state.hoverDefault
@@ -906,7 +930,6 @@ const r = (t) => ({
   M4LRHFColorPickerPopoverRoot: {
     styleOverrides: {
       "&.M4LRHFColorPicker-popoverRoot": {
-        test: "test-popover-root",
         "& .MuiPaper-root": {
           background: t.palette.background.default,
           padding: "8px",
@@ -914,6 +937,7 @@ const r = (t) => ({
           borderColor: t.palette.state.borderSecondary,
           borderRadius: "4px",
           boxShadow: t.customShadows.z4,
+          test: "root",
           "& .M4LRHFColorPicker-containerPicker": {
             background: "transparent",
             borderRadius: "4px",
@@ -931,6 +955,7 @@ const r = (t) => ({
               border: "1px solid",
               borderColor: t.palette.state.borderSecondary,
               borderRadius: "4px",
+              backgroundColor: t.palette.background.default,
               "& :nth-of-type(-n + 1)": {
                 borderRadius: "4px"
               },
@@ -980,7 +1005,7 @@ const r = (t) => ({
 });
 export {
   n as M,
-  r as a,
+  a,
   p as b,
   d as c,
   u as d,

package/theme/overrides/{index.a3e99f67.js → index.fd981495.js}

@@ -1,18 +1,18 @@
-import { F as s, C as o, M as r, L, I as M, a as n, R as i, B as p, b as c, T as l, P as d, S as u, c as g, d as B, D as F, A as P, e as A, f as T, g as C, h as b, i as y, j as S, k as I, l as R, m as v, n as D, o as H, p as k, q as f, r as x, s as w, t as G, u as E, v as V, w as j, x as N, y as O, z as q, E as z } from "./MUIComponents/index.b3f5b7a7.js";
-import { M as U, a as J, b as K, c as Q, d as W, e as X, f as Y, g as Z, h as _, i as $, j as t, k as m, l as e, m as h, n as aa, o as sa, p as oa, q as ra, r as La, s as Ma, t as na, u as ia, v as pa, w as ca, x as la, y as da, z as ua, A as ga, B as Ba, C as Fa, D as Pa, E as Aa, F as Ta, G as Ca, H as ba, I as ya, J as Sa, K as Ia, L as Ra, N as va, O as Da, P as Ha, Q as ka, R as fa, S as xa, T as wa, U as Ga, V as Ea, W as Va, X as ja, Y as Na, Z as Oa } from "./M4LExtendedComponents/index.8f5f04ca.js";
-import { M as qa, a as za, b as Ua, c as Ja, d as Ka, e as Qa, f as Wa, g as Xa, h as Ya } from "./M4LRHFComponents/index.427e0f0e.js";
-function ta(a) {
+import { F as s, C as o, M as r, L, I as M, a as i, R as n, B as l, b as p, T as c, P as d, S as u, c as g, d as B, D as F, A as P, e as A, f as T, g as b, h as C, i as y, j as S, k as I, l as R, m as v, n as D, o as H, p as k, q as f, r as x, s as w, t as G, u as E, v as V, w as j, x as N, y as O, z as q, E as z } from "./MUIComponents/index.b3f5b7a7.js";
+import { M as U, a as J, b as K, c as Q, d as W, e as X, f as Y, g as Z, h as _, i as $, j as t, k as m, l as e, m as h, n as aa, o as sa, p as oa, q as ra, r as La, s as Ma, t as ia, u as na, v as la, w as pa, x as ca, y as da, z as ua, A as ga, B as Ba, C as Fa, D as Pa, E as Aa, F as Ta, G as ba, H as Ca, I as ya, J as Sa, K as Ia, L as Ra, N as va, O as Da, P as Ha, Q as ka, R as fa, S as xa, T as wa, U as Ga, V as Ea, W as Va, X as ja, Y as Na, Z as Oa, _ as qa } from "./M4LExtendedComponents/index.b9151f24.js";
+import { M as za, a as Ua, b as Ja, c as Ka, d as Qa, e as Wa, f as Xa, g as Ya, h as Za } from "./M4LRHFComponents/index.02fada22.js";
+function ma(a) {
   return Object.assign(
     s(a),
     o(a),
     r(a),
     L(a),
     M(a),
-    n(),
-    i(a),
-    p(),
+    i(),
+    n(a),
+    l(),
+    p(a),
     c(a),
-    l(a),
     d(a),
     u(a),
     g(a),
@@ -21,8 +21,8 @@ function ta(a) {
     P(a),
     A(a),
     T(a),
-    C(a),
     b(a),
+    C(a),
     y(),
     S(),
     I(a),
@@ -44,14 +44,14 @@ function ta(a) {
     U(a),
     z(),
     J(a),
-    qa(a),
-    za(),
-    Ua(a),
-    Ja(),
-    Ka(a),
-    K(),
+    za(a),
+    Ua(),
+    Ja(a),
+    Ka(),
     Qa(a),
-    Wa(),
+    K(),
+    Wa(a),
+    Xa(),
     Q(a),
     W(a),
     X(),
@@ -60,7 +60,7 @@ function ta(a) {
     _(),
     $(a),
     t(a),
-    Xa(a),
+    Ya(a),
     m(a),
     e(a),
     h(a),
@@ -70,11 +70,11 @@ function ta(a) {
     ra(a),
     La(a),
     Ma(a),
-    na(a),
-    ia(),
+    ia(a),
+    na(),
+    la(a),
     pa(a),
-    ca(a),
-    la(),
+    ca(),
     da(a),
     ua(a),
     ga(a),
@@ -83,8 +83,8 @@ function ta(a) {
     Pa(a),
     Aa(a),
     Ta(a),
-    Ca(a),
     ba(a),
+    Ca(a),
     ya(),
     Sa(a),
     Ia(),
@@ -96,15 +96,16 @@ function ta(a) {
     fa(a),
     xa(a),
     wa(),
-    Ya(a),
+    Za(a),
     Ga(a),
     Ea(),
     Va(a),
     ja(a),
     Na(a),
-    Oa()
+    Oa(),
+    qa(a)
   );
 }
 export {
-  ta as f
+  ma as f
 };

package/theme/{palette.1b577d8c.js → palette.0590e8a6.js}

@@ -285,14 +285,14 @@ const e = {
   dark: "#fff0",
   darker: "#fff0",
   opacity: r(e.acidGreen[60], 0.08)
-}, l = {
+}, i = {
   lighter: "#fff0",
   light: "#fff0",
   main: e.middleYellow[60],
   dark: "#fff0",
   darker: "#fff0",
   opacity: r(e.middleYellow[60], 0.08)
-}, i = {
+}, l = {
   lighter: "#fff0",
   light: "#fff0",
   main: e.flameRed[40],
@@ -322,18 +322,18 @@ const 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)
-}, A = {
+  warning: F(i.light, i.main),
+  error: F(l.light, l.main)
+}, g = {
   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"]
-}, u = {
+}, A = {
   normal: e.crayonBlue[50],
   hover: e.crayonBlue[70]
-}, g = {
+}, u = {
   normal: e.acidGreen[60],
   hover: e.acidGreen[70]
 }, C = {
@@ -346,8 +346,8 @@ const e = {
   default: r(e.coolGrey[50], 0.24),
   transition: r(e.coolGrey[50], 0.08)
 }, b = {
-  info: { ...u },
-  success: { ...g },
+  info: { ...A },
+  success: { ...u },
   error: { ...C },
   warning: { ...m },
   skeleton: { ...D }
@@ -362,11 +362,11 @@ const e = {
   secondary: { ...c, contrastText: "#fff" },
   info: { ...t, contrastText: "#fff" },
   success: { ...n, contrastText: o[800] },
-  warning: { ...l, contrastText: o[800] },
-  error: { ...i, contrastText: "#fff" },
+  warning: { ...i, contrastText: o[800] },
+  error: { ...l, contrastText: "#fff" },
   grey: o,
   gradients: E,
-  chart: A,
+  chart: g,
   action: {
     hoverOpacity: 0.08,
     disabledOpacity: 0.48
@@ -378,7 +378,8 @@ const e = {
     text: {
       primary: e.onyx[10],
       secondary: e.coolGrey[60],
-      disabled: e.oxford[30]
+      disabled: e.oxford[30],
+      bgPrimary: e.marbleLight[30]
     },
     background: {
       paper: "#fff0",
@@ -396,7 +397,8 @@ const e = {
     text: {
       primary: e.marbleLight[30],
       secondary: e.coolGrey[10],
-      disabled: e.coolGrey[50]
+      disabled: e.coolGrey[50],
+      bgPrimary: e.marbleLight[30]
     },
     background: {
       paper: "#fff0",

package/theme/palette.d.ts

@@ -81,6 +81,7 @@ export declare const palette: {
             readonly primary: string;
             readonly secondary: string;
             readonly disabled: string;
+            readonly bgPrimary: string;
         };
         readonly background: {
             readonly paper: "#fff0";
@@ -247,6 +248,7 @@ export declare const palette: {
             readonly primary: string;
             readonly secondary: string;
             readonly disabled: string;
+            readonly bgPrimary: string;
         };
         readonly background: {
             readonly paper: "#fff0";

package/theme/{shadows.479d005a.js → shadows.86540b18.js}

@@ -1,5 +1,5 @@
 import { alpha as r } from "@mui/material/styles";
-import { p as a, P as e } from "./palette.1b577d8c.js";
+import { p as a, P as e } from "./palette.0590e8a6.js";
 const s = a.light.grey[500], o = "#000000", n = (t) => {
   const p = r(t, 0.2), x = r(t, 0.14), $ = r(t, 0.12);
   return [

package/types/augmentations.d.ts

@@ -48,7 +48,7 @@ declare module '@mui/material/styles/createPalette' {
     }
 
     interface TypeText {
-        medium: string,
+        bgPrimary: string,
     }
     interface PaletteOptions {
         gradients?: GradientsPaletteOptions;

package/utils/{getColorPresets.479f9922.js → getColorPresets.2a91ffaf.js}

@@ -1,4 +1,4 @@
-import { P as r } from "../theme/palette.1b577d8c.js";
+import { P as r } from "../theme/palette.0590e8a6.js";
 const e = [
   {
     name: "patronus",

package/utils/{getColorState.0ad9ea67.js → getColorState.6c23eada.js}

@@ -1,5 +1,5 @@
 import { alpha as a } from "@mui/system";
-import { P as e, O as r, S as o } from "../theme/palette.1b577d8c.js";
+import { P as e, O as r, S as o } from "../theme/palette.0590e8a6.js";
 const u = (i, n) => {
   let t = {};
   switch (i) {