@m4l/styles 6.3.0 → 6.4.1

package/config.d.ts

@@ -1,4 +1,4 @@
-import { Sizes } from "./theme/sizes";
+import { Sizes } from './theme/sizes';
 export declare const muiBreakpointsValues: {
     values: {
         xs: number;

package/index.js

@@ -1,35 +1,39 @@
-import { D as o, g as a, m as r } from "./config-B8bZIPuH.js";
-import { O as p, g as m } from "./theme/index-DjzBD6sn.js";
-import { c as O, s as x } from "./theme/shadows-BTb924yW.js";
-import { t as g } from "./theme/typography-BSiavZtl.js";
-import { f as S } from "./theme/overrides/index-Bc-JdivL.js";
-import { B as n, a as R, C as T, G as i, p as P } from "./theme/palette-C5yYre7Z.js";
-import { u } from "./utils/useResponsive-DaeQVwlH.js";
-import { D as L, d, g as B } from "./utils/getColorPresets-CJ_S_BFb.js";
-import { g as F, p as h, a as v, r as y } from "./utils/getFontValue-BEO-XID9.js";
-import { g as U } from "./utils/getColorState-D1JKXD4T.js";
+import { D as r, g as s, m as t } from "./config.js";
+import { O as p } from "./theme/ourTheme.js";
+import { c as f, s as x } from "./theme/shadows.js";
+import { t as E } from "./theme/typography.js";
+import { f as S } from "./theme/overrides/index.js";
+import { B as R } from "./theme/palette/baseColors.js";
+import { B as i } from "./theme/palette/baseOpacityColors.js";
+import { C as n } from "./theme/palette/commonColors.js";
+import { G as _ } from "./theme/palette/greyPalette.js";
+import { p as A } from "./theme/palette/presetColors.js";
+import { u as L } from "./utils/useResponsive.js";
+import { D, d as h, g as v } from "./utils/getColorPresets.js";
+import { p as F, r as M, a as U } from "./utils/getFontValue.js";
+import { g as w } from "./utils/getColorState.js";
+import { g as G } from "./utils/getPaletteByPreset.js";
 export {
-  n as BASE_COLORS,
-  R as BASE_OPACITY_COLORS,
-  T as COMMON_COLORS,
-  L as DEFAULT_PRESET,
-  o as DEFAULT_SIZE,
-  i as GREY_PALETTE,
+  R as BASE_COLORS,
+  i as BASE_OPACITY_COLORS,
+  n as COMMON_COLORS,
+  D as DEFAULT_PRESET,
+  r as DEFAULT_SIZE,
+  _ as GREY_PALETTE,
   p as OUR_THEME,
-  O as createCustomShadows,
-  d as defaultPresetColors,
+  f as createCustomShadows,
+  h as defaultPresetColors,
   S as fnComponentsOverrides,
-  B as getColorPresets,
-  U as getColorState,
-  F as getFontValue,
-  m as getPaletteByPreset,
-  a as globalRemSize,
-  r as muiBreakpointsValues,
-  P as presetsOptions,
-  h as pxToRem,
-  v as remToPx,
-  y as responsiveFontSizes,
+  v as getColorPresets,
+  w as getColorState,
+  G as getPaletteByPreset,
+  s as globalRemSize,
+  t as muiBreakpointsValues,
+  A as presetsOptions,
+  F as pxToRem,
+  M as remToPx,
+  U as responsiveFontSizes,
   x as shadows,
-  g as typography,
-  u as useResponsive
+  E as typography,
+  L as useResponsive
 };

package/package.json

@@ -1,19 +1,28 @@
 {
   "name": "@m4l/styles",
-  "version": "6.3.0",
+  "version": "6.4.1",
   "license": "UNLICENSED",
   "author": "m4l team",
   "dependencies": {
-    "@mui/material": "5.15.19",
-    "@mui/x-date-pickers": "6.11.1",
-    "react": "^17.0.0 || 18.x",
+    "@mui/material": "^5.15.19",
+    "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
-  "peerDependencies": {
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "@types/react-dom": "^17.0.0 || ^18.0.0"
+  "resolutions": {
+    "eslint": "^9.0.0",
+    "react": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "vite": "^5.4.7"
+  },
+  "overrides": {
+    "eslint": "^9.0.0",
+    "react": "^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "vite": "^5.4.7"
   },
   "files": [
     "*"
@@ -21,8 +30,8 @@
   "source": "./index.js",
   "main": "./index.js",
   "module": "./index.js",
-  "type": "module",
   "types": "./index.d.ts",
+  "type": "module",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -30,5 +39,6 @@
   "engines": {
     "node": ">=12.0.0"
   },
+  "packageManager": "yarn@4.5.0",
   "private": false
 }

package/theme/breakpoints.d.ts

@@ -0,0 +1,10 @@
+declare const breakpoints: {
+    values: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+};
+export default breakpoints;

package/theme/index.js

@@ -0,0 +1 @@
+

package/theme/ourTheme.js

@@ -0,0 +1,25 @@
+import { createTheme as o, alpha as s } from "@mui/material/styles";
+import { t } from "./typography.js";
+import { s as a, c as r } from "./shadows.js";
+import { S as m } from "./sizes/size.js";
+import { g as p } from "../utils/getPaletteByPreset.js";
+import { g as i } from "../utils/getColorPresets.js";
+const h = o(), e = p("patronus"), P = {
+  ...t,
+  ...a.light,
+  ...e,
+  customShadows: {
+    primary: `0 8px 16px 0 ${s(i("patronus").main, 0.2)}`,
+    ...r("light")
+  },
+  stretch: !0,
+  palette: {
+    ...h.palette,
+    ...e.light
+  },
+  typography: t,
+  size: m
+};
+export {
+  P as O
+};

package/theme/overrides/M4LExtendedComponents/M4LAccordion.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LAccordion: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LAccordion: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LAccordion: {
         styleOverrides: {
             '&.M4LAccordion-root': {

package/theme/overrides/M4LExtendedComponents/M4LAccordion.js

@@ -0,0 +1,145 @@
+const r = (o) => ({
+  M4LAccordion: {
+    styleOverrides: {
+      "&.M4LAccordion-root": {
+        width: "100%",
+        background: o.vars.palette.background.default,
+        borderRadius: "4px",
+        "& .M4LTypography-root": {
+          padding: "4px 8px",
+          display: "flex",
+          alignItems: "center",
+          "& .MuiTypography-root": {
+            ...o.colorSchemes.finalTheme.typography.bodyDens,
+            color: o.vars.palette.text.primary
+          }
+        },
+        "& .MuiPaper-root": {
+          marginBottom: "0px",
+          borderRadius: "4px",
+          border: "1px solid",
+          borderColor: o.vars.palette?.border.default,
+          "& .MuiCollapse-root": {
+            padding: "8px",
+            "& .MuiCollapse-wrapper": {
+              "& .MuiCollapse-wrapperInner": {
+                "& .MuiAccordion-region": {
+                  "& .M4LAccordion-content": {
+                    display: "flex !important",
+                    flexDirection: "column",
+                    gap: "8px !important"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "& .MuiButtonBase-root.Mui-expanded": {
+          padding: "4px 8px",
+          borderRadius: "4px",
+          height: "24px",
+          minHeight: "24px",
+          background: "transparent",
+          "&.MuiAccordionSummary-root": {
+            height: "28px",
+            minHeight: "28px",
+            padding: "0",
+            "& .M4LAccordion-labelIcon": {
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "center",
+              "& .M4LIcon-root": {
+                padding: "4px 0 4px 8px"
+              }
+            },
+            "& .Mui-expanded": {
+              background: o.vars.palette.primary.opacity,
+              height: "28px",
+              minHeight: "28px",
+              "& .MuiButtonBase-root": {
+                "&.MuiAccordionSummary-content": {
+                  borderRadius: "0 0 0 0 !important",
+                  background: o.vars.palette.primary.opacity,
+                  height: "28px",
+                  minHeight: "28px"
+                },
+                "& .M4LTypography-root": {
+                  "& .MuiTypography-root": {
+                    ...o.colorSchemes.finalTheme.typography.bodyDens,
+                    color: o.vars.palette.text?.primary
+                  }
+                },
+                "& .MuiAccordionSummary-expandIconWrapper": {
+                  transform: "rotate(0deg)"
+                },
+                "& .M4LAccordion-endIcon": {
+                  transform: "rotate(90deg)"
+                }
+              }
+            }
+          },
+          test: "root"
+        },
+        "& .MuiPaper-outlined": {
+          "& .MuiButtonBase-root": {
+            padding: "4px 8px",
+            borderRadius: "4px",
+            height: "24px",
+            minHeight: "24px",
+            background: "transparent",
+            "&.MuiAccordionSummary-root": {
+              height: "28px",
+              minHeight: "28px",
+              padding: "0",
+              "&:hover": {
+                background: o.vars.palette.background.hover
+              }
+            },
+            "& .MuiCollapse-root": {
+              background: o.vars.palette.background.default,
+              borderColor: o.vars.palette?.border.default,
+              borderRadius: "0px 0px 4px 4px",
+              padding: "8px",
+              "&.MuiButtonBase-root": {
+                padding: "4px 8px !important",
+                background: o.vars.palette.background.surface
+              },
+              "& .M4LAccordion-content": {
+                display: "flex !important",
+                flexDirection: "column",
+                gap: "2px",
+                "& .M4LPropertyValue-root:last-of-type": {
+                  borderBottom: "unset"
+                }
+              }
+            }
+          }
+        },
+        [o.breakpoints.down("md")]: {
+          "& .MuiButtonBase-root": {
+            height: "36px",
+            minHeight: "36px",
+            "&.MuiAccordionSummary-root": {
+              height: "36px",
+              minHeight: "36px",
+              "& .Mui-expanded": {
+                height: "36px",
+                minHeight: "36px",
+                "& .MuiButtonBase-root": {
+                  "&.MuiAccordionSummary-content": {
+                    height: "36px",
+                    minHeight: "36px"
+                  }
+                }
+              }
+            },
+            test: "root"
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LExtendedComponents/M4LAccountPopover.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LAccountPopover: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LAccountPopover: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LAccountPopover: {
         styleOverrides: {
             '&.M4LAccountPopover-root': {

package/theme/overrides/M4LExtendedComponents/M4LAccountPopover.js

@@ -0,0 +1,283 @@
+const e = (o) => ({
+  M4LAccountPopover: {
+    styleOverrides: {
+      "&.M4LAccountPopover-root": {
+        borderRadius: "6px"
+      }
+    }
+  },
+  M4LAccountPopoverPopover: {
+    styleOverrides: {
+      "& .M4LAccountPopover-popover": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0px",
+        borderRadius: "6px"
+      },
+      "& .MuiPaper-root": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        padding: "12px",
+        borderRadius: "6px",
+        boxShadow: o.customShadows?.z2,
+        background: o.vars.palette.background.default,
+        "& .M4LAccountPopover-containerUserInfo": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          "& .M4LAccountPopover-containerUserName": {
+            display: "flex",
+            flexDirection: "row",
+            gap: "12px",
+            padding: "2px 4px",
+            "& .M4LIcon-root": {
+              minWidth: "16px",
+              minHeight: "16px"
+            },
+            "& .M4LAccountPopover-labelUserName": {
+              color: o.vars.palette.text.primary,
+              ...o.colorSchemes.finalTheme.typography.bodyDens,
+              width: "100%",
+              minHeight: "20px",
+              display: "flex",
+              alignItems: "center"
+            }
+          },
+          "& .M4LAccountPopover-containerUserEmail": {
+            display: "flex",
+            flexDirection: "row",
+            gap: "12px",
+            padding: "2px 4px",
+            "& .M4LIcon-root": {
+              minWidth: "16px",
+              minHeight: "16px"
+            },
+            "& .M4LAccountPopover-labelUserEmail": {
+              color: o.vars.palette.text.primary,
+              ...o.colorSchemes.finalTheme.typography.body,
+              width: "100%",
+              minHeight: "20px",
+              display: "flex",
+              alignItems: "center"
+            }
+          }
+        },
+        "& .M4LAccountPopover-containerAppVersion": {
+          display: "flex",
+          flexDirection: "row",
+          gap: "12px",
+          padding: "2px 4px",
+          "& .M4LIcon-root": {
+            minWidth: "16px",
+            minHeight: "16px"
+          },
+          "& .M4LAccountPopover-labelVersion": {
+            color: o.vars.palette.text.secondary,
+            ...o.colorSchemes.finalTheme.typography.body,
+            width: "100%",
+            minHeight: "20px",
+            display: "flex",
+            alignItems: "center"
+          }
+        },
+        "& .M4LAccountPopover-containerMenuItems": {
+          borderTop: "1.5px solid",
+          borderBottom: "1.5px solid",
+          borderColor: o.vars.palette?.border.default,
+          padding: "2px 4px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          "& .M4LAccountPopover-containerProgress": {
+            display: "flex",
+            justifyContent: "start",
+            alignItems: "center"
+          },
+          "& .M4LAccountPopover-containerSetting": {
+            display: "flex",
+            flexDirection: "row",
+            gap: "12px",
+            width: "100%",
+            borderRadius: "4px",
+            cursor: "pointer",
+            "&:hover": {
+              background: o.vars.palette.background.surface
+            },
+            "& .M4LIcon-root": {
+              minWidth: "16px",
+              minHeight: "16px"
+            },
+            "& .M4LAccountPopover-menuItem": {
+              color: o.vars.palette.text.primary,
+              ...o.colorSchemes.finalTheme.typography.body,
+              borderRadius: "4px",
+              width: "100%",
+              minHeight: "20px",
+              display: "flex",
+              alignItems: "center"
+            }
+          }
+        },
+        "& .M4LAccountPopover-containerlogOut": {
+          display: "flex",
+          flexDirection: "row",
+          gap: "12px",
+          padding: "0 4px",
+          borderRadius: "4px",
+          width: "100%",
+          alignItems: "center",
+          cursor: "pointer",
+          "&:hover": {
+            background: o.vars.palette.background.surface
+          },
+          "& .M4LIcon-root": {
+            minWidth: "16px",
+            minHeight: "16px"
+          },
+          "& .M4LAccountPopover-logOut": {
+            color: o.vars.palette.text.primary,
+            ...o.colorSchemes.finalTheme.typography.body,
+            borderRadius: "4px",
+            width: "100%",
+            minHeight: "20px",
+            display: "flex",
+            alignItems: "center"
+          }
+        },
+        [o.breakpoints.down("md")]: {
+          gap: "4px",
+          padding: "16px !important",
+          "& .M4LAccountPopover-containerUserInfo": {
+            gap: "4px",
+            "& .M4LAccountPopover-containerUserName": {
+              gap: "16px",
+              padding: "2px 4px",
+              minHeight: "36px",
+              alignItems: "center",
+              "& .M4LIcon-root": {
+                minWidth: "20px",
+                height: "100%",
+                "& .M4LIcon-icon": {
+                  minHeight: "20px",
+                  minWidth: "20px"
+                }
+              },
+              "& .M4LAccountPopover-labelUserName": {
+                width: "100%",
+                height: "100%"
+              }
+            },
+            "& .M4LAccountPopover-containerUserEmail": {
+              gap: "16px",
+              padding: "2px 4px",
+              minHeight: "36px",
+              alignItems: "center",
+              "& .M4LIcon-root": {
+                minWidth: "20px",
+                height: "100%",
+                "& .M4LIcon-icon": {
+                  minHeight: "20px",
+                  minWidth: "20px"
+                }
+              },
+              "& .M4LAccountPopover-labelUserEmail": {
+                width: "100%",
+                height: "100%"
+              }
+            }
+          },
+          "& .M4LAccountPopover-containerAppVersion": {
+            gap: "16px",
+            padding: "2px 4px",
+            minHeight: "36px",
+            alignItems: "center",
+            "& .M4LIcon-root": {
+              minWidth: "20px",
+              height: "100%",
+              "& .M4LIcon-icon": {
+                minHeight: "20px",
+                minWidth: "20px"
+              }
+            },
+            "& .M4LAccountPopover-labelVersion": {
+              width: "100%",
+              height: "100%"
+            }
+          },
+          "& .M4LAccountPopover-containerMenuItems": {
+            gap: "16px",
+            padding: "0px",
+            "& .M4LAccountPopover-containerSetting": {
+              gap: "16px",
+              padding: "2px 4px",
+              minHeight: "36px",
+              alignItems: "center",
+              "&:hover": {
+                background: o.vars.palette.background.surface
+              },
+              "& .M4LIcon-root": {
+                minWidth: "20px",
+                height: "100%",
+                "& .M4LIcon-icon": {
+                  minHeight: "20px",
+                  minWidth: "20px"
+                }
+              },
+              "& .M4LAccountPopover-menuItem": {
+                width: "100%",
+                height: "100%"
+              }
+            }
+          },
+          "& .M4LAccountPopover-containerlogOut": {
+            gap: "16px",
+            cursor: "pointer",
+            padding: "2px 4px",
+            minHeight: "36px",
+            alignItems: "center",
+            "&:hover": {
+              background: o.vars.palette.background.surface
+            },
+            "& .M4LIcon-root": {
+              minWidth: "20px",
+              height: "100%",
+              "& .M4LIcon-icon": {
+                minHeight: "20px",
+                minWidth: "20px"
+              }
+            },
+            "& .M4LAccountPopover-logOut": {
+              width: "100%",
+              height: "100%"
+            }
+          }
+        },
+        "& .M4LPopover-arrowStyle": {
+          display: "none",
+          "& .M4LAccountPopover-containerUserInfo": {
+            display: "flex",
+            "& .M4LAccountPopover-containerUserName": {
+              display: "flex",
+              flexDirection: "row",
+              gap: "4px"
+            },
+            "& .M4LAccountPopover-containerUserEmail": {
+              display: "flex",
+              flexDirection: "row",
+              gap: "4px"
+            },
+            "& .M4LAccountPopover-containerAppVersion": {
+              display: "flex",
+              flexDirection: "row",
+              gap: "4px"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  e as M
+};

package/theme/overrides/M4LExtendedComponents/M4LAppBar.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LAppBar: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LAppBar: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LAppBar: {
         styleOverrides: {
             '&.M4LAppBar-root': {