@m4l/styles 0.0.42 → 0.0.44

package/theme/overrides/M4LExtendedComponents/{index.ad4ae589.js → index.df05e9ba.js}

@@ -371,41 +371,21 @@ const p = (o) => ({
           position: "absolute",
           transition: "all .3s ease"
         },
-        ".M4LIconButton-sizeExtraSmall&::before": {
-          width: "24px",
-          height: "24px",
-          minWidth: "24px",
-          minHeight: "24px"
-        },
-        ".M4LIconButton-sizeSmall&::before": {
-          width: "26px",
-          height: "26px",
-          minWidth: "26px",
-          minHeight: "26px"
-        },
-        ".M4LIconButton-sizeMedium&::before": {
-          width: "38px",
-          height: "38px",
-          minWidth: "38px",
-          minHeight: "38px"
-        },
-        "&.M4LIconButton-sizeExtraSmall": {
-          width: "22px",
-          height: "22px",
-          minWidth: "22px",
-          minHeight: "22px"
-        },
         "&.M4LIconButton-sizeSmall": {
           width: "24px",
           height: "24px",
-          minWidth: "24px",
-          minHeight: "24px"
+          "& .MuiSkeleton-root": {
+            width: "16px",
+            height: "16px"
+          }
         },
         "&.M4LIconButton-sizeMedium": {
           width: "36px",
           height: "36px",
-          minWidth: "36px",
-          minHeight: "36px"
+          "& .MuiSkeleton-root": {
+            width: "20px",
+            height: "20px"
+          }
         },
         "& .MuiIconButton-root": {
           position: "static",
@@ -583,36 +563,10 @@ const p = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
-        position: "relative",
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
-        alignItems: "center",
-        "& .M4LImage-img": {
-          opacity: 0,
-          position: "absolute",
-          inset: "0",
-          objectFit: "contain"
-        },
-        "&.M4LImage-loaded .M4LImage-img": {
-          opacity: 1,
-          transition: "opacity .5s",
-          margin: "0 auto"
-        },
-        "& .M4LImage-skeletonImage, & .M4LImage-skeletonCircle": {
-          opacity: 1,
-          position: "absolute",
-          inset: 0
-        },
-        "&.M4LImage-loaded .M4LImage-skeletonImage, &.M4LImage-loaded .M4LImage-skeletonCircle": {
-          opacity: 0,
-          transition: "opacity .3s"
-        },
-        "& .M4LImage-lazyLoad": {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
-        }
+        alignItems: "center"
       }
     }
   }
@@ -995,23 +949,23 @@ const p = (o) => ({
   M4LSideBar: {
     styleOverrides: {
       "&.M4LSideBar-root": {
-        "&.M4LSideBar-collapsed": {
-          "& .M4LSideBar-wrapperSideBar": {
-            height: "100%",
-            transition: "all 0.3s"
-          }
-        },
+        "&.M4LSideBar-collapsed": {},
         "& .M4LSideBar-wrapperSideBar": {
+          height: "100%",
+          transition: "all 0.3s",
+          width: "240px",
           "& .M4LSideBar-areaExpandMenu": {
             position: "absolute",
             zIndex: "1",
             height: "100%",
             transition: "all 0.3s",
+            width: "240px",
             "& .M4LSideBar-contentDesktop": {
               display: "flex",
               width: "100%",
               height: "100%",
               boxShadow: o.customShadows.z2,
+              transition: "all 0.3s",
               "& .M4LSideBar-containerContentGroupsFooter": {
                 flexGrow: "1",
                 display: "flex",
@@ -1022,11 +976,29 @@ const p = (o) => ({
                 borderColor: o.palette.state.borderPrimary,
                 backgroundColor: o.palette.background.default,
                 "& .M4LSideBar-contentGroups": {
-                  padding: "32px 8px",
                   "& .M4LSideBar-wrapperGroup": {
                     overflow: "hidden",
+                    padding: "10px",
+                    borderTop: "unset",
+                    borderBottom: "1px solid",
+                    borderColor: o.palette.state.borderSecondary,
+                    height: "100%",
+                    width: "100%",
+                    flex: "1",
+                    "& .M4LSideBar-itemListMainRootContainer": {
+                      display: "flex",
+                      flexDirection: "column",
+                      width: "100%",
+                      height: "auto",
+                      overflow: "hidden"
+                    },
                     "& .M4LSideBar-navItemRootContent": {
-                      overflow: "hidden,"
+                      overflow: "hidden",
+                      height: "36px",
+                      padding: "0px 8px",
+                      display: "flex",
+                      alignItems: "center",
+                      position: "relative"
                     }
                   }
                 },
@@ -1071,6 +1043,7 @@ const p = (o) => ({
           minWidth: "20px",
           minHeight: "20px",
           "& .MuiButtonBase-root": {
+            padding: "0px",
             width: "20px",
             height: "20px"
           }
@@ -1096,6 +1069,7 @@ const p = (o) => ({
           transition: "all 0.3s"
         },
         "& .M4LSideBar-subItemActive": {
+          padding: "0px",
           "& .M4LIcon-icon": {
             backgroundColor: `${o.palette.state.focus}!important`
           }
@@ -1189,7 +1163,8 @@ const p = (o) => ({
                     textOverflow: "ellipsis",
                     textWrap: "nowrap",
                     ...o.typography.paragraphDens,
-                    textTransform: "capitalize"
+                    textTransform: "capitalize",
+                    fontWeight: "700"
                   }
                 }
               },
@@ -1198,7 +1173,7 @@ const p = (o) => ({
                 borderRadius: "4px 0px 0px 4px",
                 justifyContent: "flex-start",
                 flexDirection: "column",
-                gap: "2px",
+                gap: "4px",
                 height: "auto",
                 marginBottom: "2px",
                 "& .M4LSideBar-navItemMainRoot": {
@@ -1210,11 +1185,13 @@ const p = (o) => ({
                   }
                 },
                 "&.M4LSideBar-itemMainActive": {
-                  background: o.palette.state.active12,
                   borderRadius: "4px",
                   height: "auto",
                   "& .M4LSideBar-navItemMainRoot": {
                     background: o.palette.state.active12,
+                    border: "1px solid",
+                    borderColor: o.palette.state.active12,
+                    boxShadow: o.shadows[1],
                     "&:hover": {
                       background: t(o.palette.state.active || "#fff", 0.24),
                       cursor: "pointer"
@@ -1244,13 +1221,13 @@ const p = (o) => ({
                     },
                     "&::before": {
                       content: '""',
-                      width: "2px",
+                      width: "3px",
                       height: "100%",
-                      top: "0px",
-                      bottom: "0px",
-                      left: "0px",
+                      top: "0",
+                      bottom: "0",
+                      right: "0px",
                       backgroundColor: o.palette.state.focus,
-                      borderRadius: "4px 0px 0px 4px",
+                      borderRadius: "0px 4px 4px 0px",
                       position: "absolute"
                     }
                   }
@@ -1298,9 +1275,10 @@ const p = (o) => ({
                   paddingLeft: "0px"
                 },
                 "& .M4LSideBar-navListSubItemRoot": {
-                  gap: "12px",
+                  gap: "8px",
                   padding: "0px",
                   "& .M4LSideBar-navSubItemContentRoot ": {
+                    padding: "0px 8px",
                     width: "100%",
                     height: "32px",
                     borderRadius: "4px",
@@ -1308,7 +1286,10 @@ const p = (o) => ({
                     "&.M4LSideBar-subItemCollapseActive": {
                       backgroundColor: o.palette.state.active12,
                       gap: "8px",
+                      border: "1px solid",
+                      borderColor: o.palette.state.active12,
                       "& .MuiButtonBase-root": {
+                        padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
                             backgroundColor: o.palette.state.focus
@@ -1318,6 +1299,7 @@ const p = (o) => ({
                     },
                     "& .M4LSideBar-subItemActive": {
                       "& .MuiButtonBase-root": {
+                        padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {}
                         },
@@ -1333,11 +1315,12 @@ const p = (o) => ({
                       }
                     },
                     "&:hover": {
-                      background: o.palette.state.default
+                      background: o.palette.state.default,
+                      padding: "0 8px"
                     }
                   },
                   "& .M4LSideBar-navSubItemContentRoot": {
-                    gap: "12px",
+                    gap: "8px",
                     margin: "0px 0px 0px 0px",
                     "& .M4LSideBar-navSubItemContentBullet": {
                       minWidth: "5px",
@@ -1368,7 +1351,7 @@ const p = (o) => ({
                   }
                 },
                 "& .MuiCollapse-root": {
-                  marginLeft: "18px"
+                  marginLeft: "8px"
                 }
               }
             },
@@ -1457,6 +1440,7 @@ const p = (o) => ({
             flexGrow: "1",
             display: "flex",
             flexDirection: "column",
+            gap: "8px",
             "& .M4LSideBar-contentGroupsLine": {
               display: "flex",
               height: "2px",
@@ -1486,7 +1470,7 @@ const p = (o) => ({
                 justifyContent: "center",
                 flexDirection: "column",
                 padding: "0px 0px 8px 0px",
-                gap: "4px",
+                gap: "0px",
                 "& .M4LSideBar-navItemMainRoot": {
                   backgroundColor: "transparent",
                   borderRadius: "4px",
@@ -1498,6 +1482,8 @@ const p = (o) => ({
                 "&.M4LSideBar-itemMainActive": {
                   background: o.palette.state.active12,
                   borderRadius: "4px",
+                  border: "1px solid",
+                  borderColor: o.palette.state.borderDisable,
                   "& .M4LSideBar-navItemMainRoot": {
                     background: o.palette.state.active12,
                     "&:hover": {
@@ -1593,6 +1579,8 @@ const p = (o) => ({
                       backgroundColor: o.palette.state.active12,
                       gap: "8px",
                       "& .MuiButtonBase-root": {
+                        paddingLeft: "0",
+                        padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
                             backgroundColor: o.palette.state.focus
@@ -1602,6 +1590,8 @@ const p = (o) => ({
                     },
                     "& .M4LSideBar-subItemActive": {
                       "& .MuiButtonBase-root": {
+                        paddingLeft: "0px",
+                        padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
                             backgroundColor: `${o.palette.state.focus}!important`
@@ -1616,6 +1606,7 @@ const p = (o) => ({
                       }
                     },
                     "&:hover": {
+                      padding: "0 8px",
                       background: o.palette.state.default
                     }
                   },
@@ -1706,6 +1697,7 @@ const p = (o) => ({
               "& .M4LSideBar-navListSubItemRoot": {
                 "& .M4LSideBar-subItemActive": {
                   "& .MuiButtonBase-root": {
+                    padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
@@ -1718,6 +1710,7 @@ const p = (o) => ({
             "& .M4LSideBar-subItemActive": {
               height: "fit-content",
               "& .MuiButtonBase-root": {
+                padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
                     backgroundColor: `${o.palette.state.focus}!important`
@@ -1737,6 +1730,7 @@ const p = (o) => ({
               backgroundColor: o.palette.text.primary
             },
             "&:hover": {
+              padding: "0 8px",
               background: o.palette.state.default
             }
           }
@@ -1776,6 +1770,7 @@ const p = (o) => ({
               "& .M4LSideBar-navListSubItemRoot": {
                 "& .M4LSideBar-subItemActive": {
                   "& .MuiButtonBase-root": {
+                    padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
@@ -1788,6 +1783,7 @@ const p = (o) => ({
             "& .M4LSideBar-subItemActive": {
               height: "fit-content",
               "& .MuiButtonBase-root": {
+                padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
                     backgroundColor: `${o.palette.state.focus}!important`
@@ -1807,6 +1803,7 @@ const p = (o) => ({
               backgroundColor: o.palette.text.primary
             },
             "&:hover": {
+              padding: "0 8px",
               background: o.palette.state.default
             }
           }
@@ -1904,8 +1901,8 @@ const p = (o) => ({
                   borderRadius: "4px 0px 0px 4px",
                   justifyContent: "flex-start",
                   flexDirection: "column",
-                  paddingBottom: "4px",
-                  gap: "4px",
+                  marginBottom: "4px",
+                  gap: "0px",
                   height: "auto",
                   "& .M4LSideBar-navItemMainRoot": {
                     backgroundColor: "transparent",
@@ -1918,8 +1915,9 @@ const p = (o) => ({
                   "&.M4LSideBar-itemMainActive": {
                     borderRadius: "4px",
                     background: o.palette.state.active12,
+                    border: "1px solid",
+                    borderColor: o.palette.state.active12,
                     "& .M4LSideBar-navItemMainRoot": {
-                      background: o.palette.state.active12,
                       "&:hover": {
                         background: t(o.palette.state.active || "#fff", 0.24),
                         cursor: "pointer"
@@ -2010,10 +2008,13 @@ const p = (o) => ({
                       height: "32px",
                       borderRadius: "4px",
                       gap: "8px",
+                      padding: "0px",
                       "&.M4LSideBar-subItemCollapseActive": {
                         backgroundColor: o.palette.state.active12,
                         gap: "8px",
+                        padding: "0px",
                         "& .MuiButtonBase-root": {
+                          padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
                               backgroundColor: o.palette.state.focus
@@ -2023,6 +2024,7 @@ const p = (o) => ({
                       },
                       "& .M4LSideBar-subItemActive": {
                         "& .MuiButtonBase-root": {
+                          padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
                               backgroundColor: `${o.palette.state.focus}!important`
@@ -2037,13 +2039,14 @@ const p = (o) => ({
                         }
                       },
                       "&:hover": {
+                        padding: "0 8px",
                         background: o.palette.state.default
                       }
                     },
                     "& .M4LSideBar-navSubItemContentRoot": {
                       gap: "12px",
                       margin: "0px 0px 0px 0px",
-                      padding: "16px",
+                      padding: "8px",
                       "& .M4LIcon-root": {
                         minHeight: "24px",
                         minWwidth: "24px",
@@ -2073,7 +2076,7 @@ const p = (o) => ({
                     }
                   },
                   "& .MuiCollapse-root": {
-                    marginLeft: "18px"
+                    marginLeft: "0px"
                   }
                 }
               },
@@ -2161,7 +2164,7 @@ const p = (o) => ({
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       textWrap: "nowrap",
-                      fontWeight: "400",
+                      fontWeight: "700",
                       fontSize: "14px !important"
                     }
                   }
@@ -2172,7 +2175,7 @@ const p = (o) => ({
                   justifyContent: "center",
                   flexDirection: "column",
                   padding: "0px 0px 8px 0px",
-                  gap: "4px",
+                  gap: "0",
                   "& .M4LSideBar-navItemMainRoot": {
                     backgroundColor: "transparent",
                     borderRadius: "4px",
@@ -2184,6 +2187,8 @@ const p = (o) => ({
                   "&.M4LSideBar-itemMainActive": {
                     borderRadius: "4px",
                     background: o.palette.state.active12,
+                    border: "1px solid",
+                    borderColor: o.palette.state.active12,
                     "& .M4LSideBar-navItemMainRoot": {
                       background: o.palette.state.active12,
                       "&:hover": {
@@ -2277,10 +2282,12 @@ const p = (o) => ({
                       height: "32px",
                       borderRadius: "4px",
                       gap: "8px",
+                      padding: "0px",
                       "&.M4LSideBar-subItemCollapseActive": {
                         backgroundColor: o.palette.state.active12,
                         gap: "8px",
                         "& .MuiButtonBase-root": {
+                          padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
                               backgroundColor: o.palette.state.focus
@@ -2290,6 +2297,7 @@ const p = (o) => ({
                       },
                       "& .M4LSideBar-subItemActive": {
                         "& .MuiButtonBase-root": {
+                          padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
                               backgroundColor: `${o.palette.state.focus}!important`
@@ -2304,13 +2312,14 @@ const p = (o) => ({
                         }
                       },
                       "&:hover": {
+                        padding: "0 8px",
                         background: o.palette.state.default
                       }
                     },
                     "& .M4LSideBar-navSubItemContentRoot": {
                       gap: "12px",
                       margin: "0px 0px 0px 0px",
-                      padding: "16px",
+                      padding: "0px",
                       "& .M4LSideBar-navSubItemContentBullet": {
                         minWidth: "5px",
                         minHeight: "5px",
@@ -2425,6 +2434,8 @@ const p = (o) => ({
                               "&.M4LSideBar-itemMainActive": {
                                 borderRadius: "4px",
                                 background: o.palette.state.active12,
+                                border: "1px solid",
+                                borderColor: o.palette.state.active12,
                                 "& .M4LSideBar-navItemMainRoot": {
                                   background: o.palette.state.active12,
                                   "&:hover": {
@@ -2516,10 +2527,12 @@ const p = (o) => ({
                                   height: "32px",
                                   borderRadius: "4px",
                                   gap: "8px",
+                                  padding: "0px",
                                   "&.M4LSideBar-subItemCollapseActive": {
                                     backgroundColor: o.palette.state.active12,
                                     gap: "8px",
                                     "& .MuiButtonBase-root": {
+                                      padding: "0px",
                                       "& .M4LIcon-root": {
                                         "& .M4LIcon-icon": {
                                           backgroundColor: o.palette.state.focus
@@ -2529,6 +2542,7 @@ const p = (o) => ({
                                   },
                                   "& .M4LSideBar-subItemActive": {
                                     "& .MuiButtonBase-root": {
+                                      padding: "0px",
                                       "& .M4LIcon-root": {
                                         "& .M4LIcon-icon": {
                                           backgroundColor: `${o.palette.state.focus}!important`
@@ -2543,13 +2557,14 @@ const p = (o) => ({
                                     }
                                   },
                                   "&:hover": {
-                                    background: o.palette.state.default
+                                    background: o.palette.state.default,
+                                    padding: "0 8px"
                                   }
                                 },
                                 "& .M4LSideBar-navSubItemContentRoot": {
                                   gap: "12px",
                                   margin: "0px 0px 0px 0px",
-                                  padding: "16px",
+                                  padding: "0px",
                                   "& .M4LSideBar-navSubItemContentBullet": {
                                     minWidth: "5px",
                                     minHeight: "5px",
@@ -3859,7 +3874,7 @@ const p = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), C = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -4138,7 +4153,7 @@ const p = (o) => ({
       }
     }
   }
-}), C = (o) => ({
+}), m = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -4188,7 +4203,7 @@ const p = (o) => ({
       }
     }
   }
-}), I = (o) => ({
+}), B = (o) => ({
   M4LSplitLayout: {
     styleOverrides: {
       "&.M4LSplitLayout-root": {
@@ -4310,7 +4325,7 @@ const p = (o) => ({
       }
     }
   }
-}), B = (o) => ({
+}), I = (o) => ({
   M4LCommonActions: {
     styleOverrides: {
       "&.M4LCommonActions-root": {
@@ -4674,7 +4689,7 @@ const p = (o) => ({
       }
     }
   }
-}), P = (o) => ({
+}), D = (o) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -4689,7 +4704,7 @@ const p = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), P = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
@@ -6022,7 +6037,13 @@ const p = (o) => ({
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        overflow: "auto"
+        overflow: "auto",
+        "& .M4LMFLoader-containerLinearProgress": {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center"
+        }
       }
     }
   }
@@ -6491,7 +6512,7 @@ const p = (o) => ({
 export {
   T as A,
   A as B,
-  D as C,
+  P as C,
   H as D,
   F as E,
   W as F,
@@ -6517,7 +6538,7 @@ export {
   ao as Z,
   io as _,
   p as a,
-  P as b,
+  D as b,
   d as c,
   l as d,
   s as e,
@@ -6535,11 +6556,11 @@ export {
   f as q,
   h as r,
   v as s,
-  m as t,
-  C as u,
+  C as t,
+  m as u,
   k as v,
-  I as w,
-  B as x,
+  B as w,
+  I as x,
   S as y,
   R as z
 };

package/theme/overrides/M4LRHFComponents/M4LRHFAutocomplete.d.ts

@@ -8,6 +8,7 @@ export declare const M4LRHFAutocomplete: (theme: Theme) => {
                 flexDirection: string;
                 width: string;
                 gap: string;
+                outline: string;
                 '& .MuiAutocomplete-root': {
                     height: string;
                     '& .MuiFormControl-root': {

package/theme/overrides/M4LRHFComponents/M4LRHFColorPicker.d.ts

@@ -7,6 +7,7 @@ export declare const M4LRHFColorPicker: (theme: Theme) => {
                 display: string;
                 flexDirection: string;
                 gap: string;
+                outline: string;
                 '&.M4LRHFColorPicker-sizeSmall': {
                     '& .M4LRHFColorPicker-containerFieldColor': {
                         '& .M4LRHFColorPicker-boxColor': {

package/theme/overrides/M4LRHFComponents/M4LRHFDateTime.d.ts

@@ -8,6 +8,7 @@ export declare const M4LRHFDateTime: (theme: Theme) => {
                 flexDirection: string;
                 width: string;
                 gap: string;
+                outline: string;
                 '& .M4LRHFDateTime-skeleton': {
                     display: string;
                     width: string;

package/theme/overrides/M4LRHFComponents/M4LRHFTextField.d.ts

@@ -7,6 +7,7 @@ export declare const M4LRHFTextField: (theme: Theme) => {
                 flexDirection: string;
                 width: string;
                 gap: string;
+                outline: string;
                 '&.M4LRHFTextField-variantText': {
                     height: string;
                     '& .MuiFormControl-root': {