@m4l/styles 0.0.41 → 0.0.43

package/theme/overrides/M4LExtendedComponents/{index.8f5f04ca.js → index.b9151f24.js}

@@ -1,6 +1,6 @@
 import { alpha as t } from "@mui/material/styles";
 import { alpha as e } from "@mui/system";
-import { P as r } from "../../palette.1b577d8c.js";
+import { P as r } from "../../palette.0590e8a6.js";
 const p = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {
@@ -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"
       }
     }
   }
@@ -994,22 +948,126 @@ const p = (o) => ({
 }), y = (o) => ({
   M4LSideBar: {
     styleOverrides: {
+      "&.M4LSideBar-root": {
+        "&.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",
+                flexDirection: "column",
+                height: "100%",
+                position: "relative",
+                borderRight: "1px solid",
+                borderColor: o.palette.state.borderPrimary,
+                backgroundColor: o.palette.background.default,
+                "& .M4LSideBar-contentGroups": {
+                  padding: "32px 12px",
+                  "& .M4LSideBar-wrapperGroup": {
+                    overflow: "visible",
+                    padding: "8px",
+                    borderTop: "1px solid",
+                    borderBottom: "1px solid",
+                    borderColor: o.palette.state.borderSecondary,
+                    height: "fit-content",
+                    width: "100%",
+                    "& .M4LSideBar-navItemRootContent": {
+                      overflow: "hidden",
+                      height: "36px",
+                      padding: "0px 8px",
+                      display: "flex",
+                      alignItems: "center"
+                    }
+                  }
+                },
+                "& .M4LSideBar-footer": {
+                  display: "flex",
+                  padding: "10px 5px",
+                  borderTop: "1px solid",
+                  borderColor: o.palette.state.borderDisable,
+                  justifyContent: "center",
+                  gap: "24px",
+                  alignItems: "center",
+                  height: "48px",
+                  minHeight: "48px",
+                  flexDirection: "row-reverse",
+                  overflow: "hidden",
+                  "& .M4LSideBar-wrapperLogoFooter": {
+                    width: "100%",
+                    height: "100%",
+                    "& .M4LSideBar-containerLogoButtonLogo": {
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center"
+                    }
+                  }
+                }
+              },
+              "& .M4LSideBar-collapseButtonSecondary": {
+                height: "100%",
+                cursor: "pointer"
+              }
+            }
+          }
+        }
+      },
       "&.M4LSideBar-root.M4LSideBar-variantDefault": {
         height: "100%",
-        maxWidth: "220px",
         background: o.palette.background.default,
-        paddingTop: "24px",
-        borderRight: "1.5px solid",
-        borderColor: o.palette.state.borderPrimary,
+        position: "relative",
+        "& .M4LIconButton-sizeSmall": {
+          width: "20px",
+          height: "20px",
+          minWidth: "20px",
+          minHeight: "20px",
+          "& .MuiButtonBase-root": {
+            padding: "0px",
+            width: "20px",
+            height: "20px"
+          }
+        },
+        "&:hover": {
+          "& .M4LSideBar-collapseButton": {
+            opacity: "1!important",
+            transition: "all 0.3s"
+          }
+        },
+        "& .M4LSideBar-collapseButton": {
+          position: "absolute",
+          top: "16px",
+          right: "-8px",
+          borderRadius: "4px",
+          backgroundColor: `${o.palette.background.default}!important`,
+          transition: "all 0.3s",
+          boxShadow: o.customShadows.z1,
+          zIndex: "1"
+        },
+        "&:not(.M4LSideBar-collapsed) .M4LSideBar-collapseButton": {
+          opacity: 0,
+          transition: "all 0.3s"
+        },
         "& .M4LSideBar-subItemActive": {
+          padding: "0px",
           "& .M4LIcon-icon": {
             backgroundColor: `${o.palette.state.focus}!important`
           }
         },
         "&.M4LSideBar-collapsed": {
           "& .M4LSideBar-wrapperSideBar": {
-            width: "52px",
-            transition: "width 0.1s ease",
             "& .M4LSideBar-contentDesktop": {
               "& .M4LSideBar-containerSideBarLogo": {
                 marginTop: "0px",
@@ -1026,15 +1084,12 @@ const p = (o) => ({
             }
           }
         },
-        [o.breakpoints.down("sm")]: {
+        [o.breakpoints.down("md")]: {
           width: "0px",
           height: "0px",
           padding: "0px"
         },
         "& .M4LSideBar-wrapperSideBar": {
-          height: "100%",
-          width: "219px",
-          transition: "width 0.1s ease",
           "& .M4LSideBar-containerSideBarLogo": {
             display: "flex",
             justifyContent: "flex-start",
@@ -1081,7 +1136,6 @@ const p = (o) => ({
             },
             "& .M4LSideBar-wrapperGroup": {
               height: "100%",
-              padding: "0 8px",
               "& .M4LScrollBar-root": {
                 overflow: "hidden",
                 height: "100%",
@@ -1090,6 +1144,8 @@ const p = (o) => ({
               "& .M4LSideBar-wrapperGroupTitle": {
                 height: "28px",
                 padding: "0px 0px 0px 12px",
+                display: "flex",
+                alignItems: "center",
                 "& .M4LTypography-root": {
                   display: "flex",
                   width: "100%",
@@ -1099,7 +1155,8 @@ const p = (o) => ({
                     textOverflow: "ellipsis",
                     textWrap: "nowrap",
                     ...o.typography.paragraphDens,
-                    textTransform: "capitalize"
+                    textTransform: "capitalize",
+                    fontWeight: "700"
                   }
                 }
               },
@@ -1108,7 +1165,7 @@ const p = (o) => ({
                 borderRadius: "4px 0px 0px 4px",
                 justifyContent: "flex-start",
                 flexDirection: "column",
-                gap: "2px",
+                gap: "4px",
                 height: "auto",
                 marginBottom: "2px",
                 "& .M4LSideBar-navItemMainRoot": {
@@ -1124,6 +1181,9 @@ const p = (o) => ({
                   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"
@@ -1153,21 +1213,20 @@ const p = (o) => ({
                     },
                     "&::before": {
                       content: '""',
-                      width: "2px",
-                      height: "100%",
-                      top: "0px",
-                      bottom: "0px",
+                      width: "3px",
+                      height: "50%",
+                      top: "25%",
+                      bottom: "25%",
                       left: "0px",
                       backgroundColor: o.palette.state.focus,
-                      borderRadius: "4px 0px 0px 4px",
+                      borderRadius: "0px 4px 4px 0px",
                       position: "absolute"
                     }
                   }
                 },
                 "& .M4LSideBar-navItemRootContent": {
                   display: "flex",
-                  padding: "4px 8px 4px 8px",
-                  justifyContent: "center",
+                  padding: "12px 8px",
                   borderRadius: "4px 0px 0px 4px",
                   position: "relative",
                   "& .M4LSideBar-navItemRootContentIconTypo": {
@@ -1175,7 +1234,7 @@ const p = (o) => ({
                     gap: "8px",
                     width: "100%",
                     "& .M4LIcon-icon": {
-                      backgroundColor: o.palette.text.primary,
+                      backgroundColor: o.palette.text.secondary,
                       width: "18px",
                       height: "18px"
                     },
@@ -1208,9 +1267,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",
@@ -1218,7 +1278,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
@@ -1228,6 +1291,7 @@ const p = (o) => ({
                     },
                     "& .M4LSideBar-subItemActive": {
                       "& .MuiButtonBase-root": {
+                        padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {}
                         },
@@ -1243,11 +1307,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",
@@ -1278,7 +1343,7 @@ const p = (o) => ({
                   }
                 },
                 "& .MuiCollapse-root": {
-                  marginLeft: "18px"
+                  marginLeft: "8px"
                 }
               }
             },
@@ -1286,30 +1351,15 @@ const p = (o) => ({
               backgroundColor: o.palette.text.primary
             }
           },
-          "& .M4LSideBar-collapseButton": {
-            display: "flex",
-            padding: "12px 44px 12px 14px",
-            borderTop: "1px solid",
-            borderColor: o.palette.state.borderDisable,
-            justifyContent: "flex-end",
-            gap: "24px",
-            alignItems: "center",
-            height: "48px",
-            width: "220px",
-            minHeight: "48px",
-            flexDirection: "row-reverse",
+          "& .M4LSideBar-footer": {
             "& .M4LSideBar-containerLogoButton": {
               display: "flex",
               gap: "14px",
               width: "120px"
             },
             "& .M4LSideBar-containerLogoButtonLogo": {
-              width: "120px",
-              height: "32px",
-              "& .M4LSideBar-containerLogoButtonIcon": {
-                display: "flex",
-                alignItems: "center"
-              }
+              minWidth: "120px",
+              height: "32px"
             }
           }
         }
@@ -1339,14 +1389,12 @@ const p = (o) => ({
             }
           }
         },
-        [o.breakpoints.down("sm")]: {
+        [o.breakpoints.down("md")]: {
           width: "0px",
           height: "0px",
           padding: "0px"
         },
         "& .M4LSideBar-wrapperSideBar": {
-          height: "100%",
-          width: "250px",
           "& .M4LSideBar-containerSideBarLogo": {
             display: "flex",
             justifyContent: "flex-start",
@@ -1384,6 +1432,7 @@ const p = (o) => ({
             flexGrow: "1",
             display: "flex",
             flexDirection: "column",
+            gap: "8px",
             "& .M4LSideBar-contentGroupsLine": {
               display: "flex",
               height: "2px",
@@ -1413,7 +1462,7 @@ const p = (o) => ({
                 justifyContent: "center",
                 flexDirection: "column",
                 padding: "0px 0px 8px 0px",
-                gap: "4px",
+                gap: "0px",
                 "& .M4LSideBar-navItemMainRoot": {
                   backgroundColor: "transparent",
                   borderRadius: "4px",
@@ -1423,7 +1472,10 @@ 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": {
@@ -1519,6 +1571,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
@@ -1528,6 +1582,8 @@ const p = (o) => ({
                     },
                     "& .M4LSideBar-subItemActive": {
                       "& .MuiButtonBase-root": {
+                        paddingLeft: "0px",
+                        padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
                             backgroundColor: `${o.palette.state.focus}!important`
@@ -1542,6 +1598,7 @@ const p = (o) => ({
                       }
                     },
                     "&:hover": {
+                      padding: "0 8px",
                       background: o.palette.state.default
                     }
                   },
@@ -1578,26 +1635,14 @@ const p = (o) => ({
               backgroundColor: o.palette.text.primary
             }
           },
-          "& .M4LSideBar-collapseButton": {
-            display: "flex",
-            paddingTop: "12px",
-            borderTop: "1px solid",
-            borderColor: o.palette.state.hoverDefault,
-            justifyContent: "flex-end",
-            marginRight: "14px",
-            marginLeft: "14px",
-            gap: "40px",
-            alignItems: "center",
-            height: "48px",
-            minHeight: "48px",
-            flexDirection: "row-reverse",
+          "& .M4LSideBar-footer": {
             "& .M4LSideBar-containerLogoButton": {
               display: "flex",
               gap: "14px",
               width: "120px"
             },
             "& .M4LSideBar-containerLogoButtonLogo": {
-              width: "120px",
+              minWidth: "120px",
               height: "32px",
               "& .M4LSideBar-containerLogoButtonIcon": {
                 display: "flex",
@@ -1644,6 +1689,7 @@ const p = (o) => ({
               "& .M4LSideBar-navListSubItemRoot": {
                 "& .M4LSideBar-subItemActive": {
                   "& .MuiButtonBase-root": {
+                    padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
@@ -1656,6 +1702,7 @@ const p = (o) => ({
             "& .M4LSideBar-subItemActive": {
               height: "fit-content",
               "& .MuiButtonBase-root": {
+                padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
                     backgroundColor: `${o.palette.state.focus}!important`
@@ -1675,6 +1722,7 @@ const p = (o) => ({
               backgroundColor: o.palette.text.primary
             },
             "&:hover": {
+              padding: "0 8px",
               background: o.palette.state.default
             }
           }
@@ -1714,6 +1762,7 @@ const p = (o) => ({
               "& .M4LSideBar-navListSubItemRoot": {
                 "& .M4LSideBar-subItemActive": {
                   "& .MuiButtonBase-root": {
+                    padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
@@ -1726,6 +1775,7 @@ const p = (o) => ({
             "& .M4LSideBar-subItemActive": {
               height: "fit-content",
               "& .MuiButtonBase-root": {
+                padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
                     backgroundColor: `${o.palette.state.focus}!important`
@@ -1745,6 +1795,7 @@ const p = (o) => ({
               backgroundColor: o.palette.text.primary
             },
             "&:hover": {
+              padding: "0 8px",
               background: o.palette.state.default
             }
           }
@@ -1771,7 +1822,7 @@ const p = (o) => ({
             height: "100%",
             display: "flex",
             flexDirection: "column",
-            paddingTop: "24px",
+            padding: "8px",
             "& .M4LSideBar-containerSideBarLogo": {
               display: "flex",
               justifyContent: "flex-start",
@@ -1821,7 +1872,6 @@ const p = (o) => ({
               },
               "& .M4LSideBar-wrapperGroup": {
                 height: "100%",
-                padding: "0px 8px",
                 "& .M4LSideBar-wrapperGroupTitle": {
                   height: "28px",
                   padding: "0px 0px 0px 12px",
@@ -1833,7 +1883,7 @@ const p = (o) => ({
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       textWrap: "nowrap",
-                      ...o.typography.bodyDens,
+                      ...o.typography.paragraphDens,
                       textTransform: "capitalize"
                     }
                   }
@@ -1844,7 +1894,7 @@ const p = (o) => ({
                   justifyContent: "flex-start",
                   flexDirection: "column",
                   paddingBottom: "4px",
-                  gap: "4px",
+                  gap: "0px",
                   height: "auto",
                   "& .M4LSideBar-navItemMainRoot": {
                     backgroundColor: "transparent",
@@ -1856,8 +1906,11 @@ 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,
+                      background: o.palette.state.active,
                       "&:hover": {
                         background: t(o.palette.state.active || "#fff", 0.24),
                         cursor: "pointer"
@@ -1948,10 +2001,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
@@ -1961,6 +2017,7 @@ const p = (o) => ({
                       },
                       "& .M4LSideBar-subItemActive": {
                         "& .MuiButtonBase-root": {
+                          padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
                               backgroundColor: `${o.palette.state.focus}!important`
@@ -1975,13 +2032,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",
@@ -2011,7 +2069,7 @@ const p = (o) => ({
                     }
                   },
                   "& .MuiCollapse-root": {
-                    marginLeft: "18px"
+                    marginLeft: "0px"
                   }
                 }
               },
@@ -2019,25 +2077,14 @@ const p = (o) => ({
                 backgroundColor: o.palette.text.primary
               }
             },
-            "& .M4LSideBar-collapseButton": {
-              display: "flex",
-              paddingTop: "12px",
-              borderTop: "1px solid",
-              borderColor: o.palette.state.hoverDefault,
-              justifyContent: "flex-end",
-              marginRight: "14px",
-              marginLeft: "14px",
-              gap: "20px",
-              alignItems: "center",
-              height: "48px",
-              minHeight: "48px",
+            "& .M4LSideBar-footer": {
               "& .M4LSideBar-containerLogoButton": {
                 display: "flex",
                 gap: "14px",
                 width: "120px"
               },
               "& .M4LSideBar-containerLogoButtonLogo": {
-                width: "120px",
+                minWidth: "120px",
                 height: "32px",
                 "& .M4LSideBar-containerLogoButtonIcon": {
                   display: "flex",
@@ -2110,7 +2157,7 @@ const p = (o) => ({
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       textWrap: "nowrap",
-                      fontWeight: "400",
+                      fontWeight: "700",
                       fontSize: "14px !important"
                     }
                   }
@@ -2121,7 +2168,7 @@ const p = (o) => ({
                   justifyContent: "center",
                   flexDirection: "column",
                   padding: "0px 0px 8px 0px",
-                  gap: "4px",
+                  gap: "0",
                   "& .M4LSideBar-navItemMainRoot": {
                     backgroundColor: "transparent",
                     borderRadius: "4px",
@@ -2132,8 +2179,11 @@ const p = (o) => ({
                   },
                   "&.M4LSideBar-itemMainActive": {
                     borderRadius: "4px",
+                    background: o.palette.state.active12,
+                    border: "1px solid",
+                    borderColor: o.palette.state.active12,
                     "& .M4LSideBar-navItemMainRoot": {
-                      background: "transparent",
+                      background: o.palette.state.active12,
                       "&:hover": {
                         background: t(o.palette.state.active || "#fff", 0.24),
                         cursor: "pointer"
@@ -2225,10 +2275,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
@@ -2238,6 +2290,7 @@ const p = (o) => ({
                       },
                       "& .M4LSideBar-subItemActive": {
                         "& .MuiButtonBase-root": {
+                          padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
                               backgroundColor: `${o.palette.state.focus}!important`
@@ -2252,13 +2305,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",
@@ -2372,6 +2426,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": {
@@ -2463,10 +2520,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
@@ -2476,6 +2535,7 @@ const p = (o) => ({
                                   },
                                   "& .M4LSideBar-subItemActive": {
                                     "& .MuiButtonBase-root": {
+                                      padding: "0px",
                                       "& .M4LIcon-root": {
                                         "& .M4LIcon-icon": {
                                           backgroundColor: `${o.palette.state.focus}!important`
@@ -2490,13 +2550,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",
@@ -2526,25 +2587,14 @@ const p = (o) => ({
                             backgroundColor: o.palette.text.primary
                           }
                         },
-                        "& .M4LSideBar-collapseButton": {
-                          display: "flex",
-                          paddingTop: "12px",
-                          borderTop: "1px solid",
-                          borderColor: o.palette.state.hoverDefault,
-                          justifyContent: "flex-end",
-                          marginRight: "14px",
-                          marginLeft: "14px",
-                          gap: "20px",
-                          alignItems: "center",
-                          height: "48px",
-                          minHeight: "48px",
+                        "& .M4LSideBar-footer": {
                           "& .M4LSideBar-containerLogoButton": {
                             display: "flex",
                             gap: "14px",
                             width: "120px"
                           },
                           "& .M4LSideBar-containerLogoButtonLogo": {
-                            width: "120px",
+                            minWidth: "120px",
                             height: "32px",
                             "& .M4LSideBar-containerLogoButtonIcon": {
                               display: "flex",
@@ -2561,25 +2611,14 @@ const p = (o) => ({
                 backgroundColor: o.palette.text.primary
               }
             },
-            "& .M4LSideBar-collapseButton": {
-              display: "flex",
-              paddingTop: "12px",
-              borderTop: "1px solid",
-              borderColor: o.palette.state.hoverDefault,
-              justifyContent: "flex-end",
-              marginRight: "14px",
-              marginLeft: "14px",
-              gap: "20px",
-              alignItems: "center",
-              height: "48px",
-              minHeight: "48px",
+            "& .M4LSideBar-footer": {
               "& .M4LSideBar-containerLogoButton": {
                 display: "flex",
                 gap: "14px",
                 width: "120px"
               },
               "& .M4LSideBar-containerLogoButtonLogo": {
-                width: "120px",
+                minWidth: "120px",
                 height: "32px",
                 "& .M4LSideBar-containerLogoButtonIcon": {
                   display: "flex",
@@ -2592,7 +2631,7 @@ const p = (o) => ({
       }
     }
   }
-}), h = (o) => ({
+}), f = (o) => ({
   M4LAreasAdmin: {
     styleOverrides: {
       "&.M4LAreasAdmin-root": {
@@ -3024,7 +3063,7 @@ const p = (o) => ({
       }
     }
   }
-}), f = (o) => ({
+}), h = (o) => ({
   M4LAreasViewer: {
     styleOverrides: {
       "&.M4LAreasViewer-root": {
@@ -3828,7 +3867,7 @@ const p = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), C = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -4107,7 +4146,7 @@ const p = (o) => ({
       }
     }
   }
-}), C = (o) => ({
+}), m = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -4124,7 +4163,7 @@ const p = (o) => ({
       }
     }
   }
-}), I = (o) => ({
+}), k = (o) => ({
   M4LMasterDetailLayout: {
     styleOverrides: {
       "&.M4LMasterDetailLayout-root": {
@@ -4279,7 +4318,7 @@ const p = (o) => ({
       }
     }
   }
-}), k = (o) => ({
+}), I = (o) => ({
   M4LCommonActions: {
     styleOverrides: {
       "&.M4LCommonActions-root": {
@@ -4643,7 +4682,7 @@ const p = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), P = (o) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -4658,123 +4697,121 @@ const p = (o) => ({
       }
     }
   }
-}), P = (o) => ({
+}), D = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
-        border: "solid 1.3px",
+        border: "solid 1px",
         borderColor: o.palette.state.borderPrimary,
         display: "flex",
         width: "100%",
-        minHeight: "22px !important",
-        height: "24px !important",
+        height: "auto",
         borderRadius: "4px",
-        "& .M4LPeriod-stateReadOnly": {},
-        "& .M4LPeriod-gap": {
-          backgroundColor: "transparent"
-        },
-        "& .M4LIcon-root": {
-          padding: "0 8px",
-          minHeight: "22px",
-          minWidth: "22px",
-          borderLeft: "1.3px solid",
-          borderColor: o.palette.state.borderPrimary
+        transition: "all .2s",
+        [o.breakpoints.down("md")]: {
+          flexDirection: "column"
         },
-        "& .M4LPeriod-containerDateLabel": {
+        "& .M4LPeriod-skeleton": {
           width: "100%",
-          height: "100% !important",
-          padding: "0px 0px 0px 8px",
-          borderRight: "1px solid",
-          borderColor: o.palette.state.borderPrimary
-        },
-        "& .M4LPeriod-containerDateValue": {
           display: "flex",
-          width: "100%",
-          padding: "0px 0px 0px 8px"
-        },
-        "&:not(.M4LPeriod-stateReadOnly).M4LPeriod-variantMonoperiod": {
-          width: "100%",
-          height: "22px",
-          "& .MuiAutocomplete-root": {
+          [o.breakpoints.down("md")]: {
+            flexDirection: "column"
+          },
+          "& .M4LPeriod-skeletonFieldPrimary": {
             width: "100%",
-            height: "22px",
+            paddingLeft: "12px",
+            borderRight: "1px solid",
+            display: "flex",
+            alignItems: "center",
             borderColor: o.palette.state.borderPrimary,
-            "& .MuiFormControl-root": {
-              height: "22px !important",
-              minHeight: "22px !important",
-              width: "100%",
-              borderRight: "solid 1.3px",
-              borderColor: o.palette.state.borderPrimary,
-              "& .MuiInputBase-root": {
-                height: "22px !important",
-                width: "100%",
-                gap: "16px",
-                padding: "0 0 0 8px",
-                background: "transparent",
-                "& .MuiInputBase-input": {
-                  padding: "0",
-                  height: "22px"
-                },
-                "& .MuiAutocomplete-endAdornment": {
-                  position: "relative",
-                  minHeight: "22x",
-                  height: "22px",
-                  "& .MuiButtonBase-root": {
-                    padding: "0",
-                    display: "inline",
-                    margin: "0",
-                    height: "22px !important",
-                    "& .MuiSvgIcon-root": {
-                      height: "22px",
-                      width: "22px"
-                    }
-                  }
-                }
-              }
+            [o.breakpoints.down("md")]: {
+              borderRight: "0",
+              borderBottom: "1px solid",
+              borderColor: o.palette.state.borderPrimary
             }
           },
-          "& .MuiFormControl-root": {
-            height: "22px !important",
-            minHeight: "22px !important",
+          "& .M4LPeriod-skeletonFieldSecondary": {
             width: "100%",
-            "& .MuiInputBase-root": {
-              height: "22px !important",
-              width: "100%",
-              gap: "16px",
-              padding: "0 0 0 8px",
-              background: "transparent",
-              "& .MuiInputBase-input": {
-                padding: "0",
-                height: "22px"
-              }
-            }
+            paddingLeft: "12px",
+            display: "flex",
+            alignItems: "center"
+          }
+        },
+        "&:hover": {
+          borderColor: o.palette.state.hover
+        },
+        "&.M4LPeriod-isFocus": {
+          borderColor: o.palette.state.active
+        },
+        "& .MuiAutocomplete-root": {
+          width: "100%",
+          borderRadius: 0,
+          borderRight: "1px solid",
+          borderColor: o.palette.state.borderPrimary,
+          [o.breakpoints.down("md")]: {
+            borderRight: 0,
+            borderBottom: "1px solid",
+            borderColor: o.palette.state.borderPrimary
+          },
+          "& .MuiInput-root": {
+            backgroundColor: "transparent"
+          },
+          "& .MuiInput-input": {
+            padding: "0"
+          }
+        },
+        "& .MuiTextField-root": {
+          width: "100%",
+          "& .MuiInputBase-root.MuiInput-root": {
+            padding: "0 0 0 12px",
+            height: "100%",
+            backgroundColor: "transparent"
+          }
+        },
+        "&.M4LPeriod-sizeSmall": {
+          "& .MuiAutocomplete-hasPopupIcon": {
+            height: "24px"
           },
           "& .MuiTextField-root": {
+            height: "24px"
+          },
+          "& .M4LPeriod-skeletonFieldPrimary": {
+            height: "24px"
+          },
+          "& .M4LPeriod-skeletonFieldSecondary": {
             width: "100%",
-            minHeight: "22px",
-            height: "fit-content",
-            "& .MuiInputBase-root": {
-              minHeight: "22px",
-              padding: "0 0 0 4px",
-              background: "transparent"
-            },
-            "& .MuiInputBase-root.Mui-focused": {
-              paddingLeft: "4px",
-              borderColor: o.palette.state.active
-            },
-            "& .MuiInputBase-root:hover": {
-              paddingLeft: "4px",
-              background: o.palette.state.active12,
-              padding: "0px 0px 0px 4px"
-            }
+            height: "24px",
+            paddingLeft: "12px"
+          }
+        },
+        "&.M4LPeriod-sizeMedium": {
+          "& .MuiAutocomplete-hasPopupIcon": {
+            height: "36px"
           },
-          "&:hover": {
-            borderColor: o.palette.state.hover,
-            "& .MuiAutocomplete-root": {
-              borderColor: o.palette.state.active12
-            }
+          "& .MuiTextField-root": {
+            height: "36px"
+          },
+          "& .M4LPeriod-skeletonFieldPrimary": {
+            height: "36px"
+          },
+          "& .M4LPeriod-skeletonFieldSecondary": {
+            width: "100%",
+            height: "36px",
+            paddingLeft: "12px"
           }
         },
+        "& .M4LPeriod-containerDateLabel": {
+          width: "100%",
+          height: "100% !important",
+          padding: "0px 0px 0px 8px",
+          borderRight: "1px solid",
+          borderColor: o.palette.state.borderPrimary
+        },
+        "& .M4LPeriod-containerDateValue": {
+          display: "flex",
+          width: "100%",
+          padding: "0px 0px 0px 8px"
+        },
         "&.M4LPeriod-stateError": {
           borderColor: o.palette.state.error.normal,
           boxShadow: o.customShadows.z2,
@@ -4787,7 +4824,6 @@ const p = (o) => ({
             width: "100%",
             background: "transparent",
             "& .MuiInputBase-root:hover": {
-              paddingLeft: "4px",
               background: o.palette.error.opacity,
               height: "100%"
             }
@@ -4803,8 +4839,7 @@ const p = (o) => ({
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.palette.warning.opacity,
-                paddingLeft: "4px"
+                background: o.palette.warning.opacity
               }
             }
           }
@@ -4819,8 +4854,7 @@ const p = (o) => ({
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.palette.success.opacity,
-                paddingLeft: "4px"
+                background: o.palette.success.opacity
               }
             }
           }
@@ -4835,61 +4869,10 @@ const p = (o) => ({
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                paddingLeft: "4px",
                 background: o.palette.info.opacity
               }
             }
           }
-        },
-        [o.breakpoints.down("sm")]: {
-          minHeight: "40px !important",
-          height: "auto !important",
-          "&:not(.M4LPeriod-stateReadOnly).M4LPeriod-variantMonoperiod": {
-            height: "100% !important",
-            minHeight: "38px !important",
-            "& .MuiAutocomplete-root": {
-              height: "100% !important",
-              minHeight: "38px !important",
-              "& .MuiFormControl-root": {
-                height: "100% !important",
-                minHeight: "38px !important",
-                "& .MuiInputBase-root": {
-                  height: "100% !important",
-                  minHeight: "38px !important",
-                  "& .MuiInputBase-input": {
-                    minHeight: "38px !important",
-                    height: "100% !important"
-                  },
-                  "& .MuiAutocomplete-endAdornment": {
-                    minHeight: "38px !important",
-                    height: "100% !important",
-                    "& .MuiButtonBase-root": {
-                      minHeight: "36px !important",
-                      minWidth: "36px !important",
-                      height: "100% !important",
-                      "& .MuiSvgIcon-root": {
-                        minHeight: "24px !important",
-                        minWidth: "24px !important",
-                        height: "100% !important"
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "& .MuiFormControl-root": {
-              height: "100% !important",
-              minHeight: "38px !important",
-              "& .MuiInputBase-root": {
-                height: "100% !important",
-                minHeight: "38px !important",
-                "& .MuiInputBase-input": {
-                  height: "100% !important",
-                  minHeight: "38px !important"
-                }
-              }
-            }
-          }
         }
       }
     }
@@ -5091,7 +5074,7 @@ const p = (o) => ({
       }
     }
   }
-}), O = (o) => ({
+}), z = (o) => ({
   M4LBadge: {
     styleOverrides: {
       "&.M4LBadge-root": {
@@ -5122,7 +5105,7 @@ const p = (o) => ({
       }
     }
   }
-}), z = (o) => ({
+}), V = (o) => ({
   M4LDataGrid: {
     styleOverrides: {
       "&.M4LDataGrid-root": {
@@ -5279,6 +5262,19 @@ const p = (o) => ({
               alignItems: "center",
               textOverflow: "inline",
               gridTemplateColumns: "auto",
+              "& .rdg-text-editor": {
+                textAlign: "inherit",
+                color: o.palette.text.secondary,
+                padding: "0 8px",
+                lineHeight: "var(--rdg-row-height)!important",
+                border: "0",
+                borderTop: "0.5px solid",
+                borderBottom: "1px solid",
+                borderLeft: "0.5px solid",
+                borderRight: "0.5px solid",
+                borderColor: `${o.palette.state.borderDisable}!important`,
+                ...o.typography.body
+              },
               "&.rdg-cell-frozen": {
                 display: "flex",
                 justifyContent: "center",
@@ -5438,7 +5434,7 @@ const p = (o) => ({
       }
     }
   }
-}), V = (o) => ({
+}), O = (o) => ({
   M4LPager: {
     styleOverrides: {
       "&.M4LPager-root": {
@@ -5531,23 +5527,38 @@ const p = (o) => ({
     styleOverrides: {
       "&.M4LCheckBox-root": {
         display: "flex",
-        flexDirection: "column",
-        gap: o.spacing(0.5),
+        gap: "8px",
+        width: "100%",
+        "& .M4LCheckBox-skeleton": {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "36px",
+          height: "36px"
+        },
         "& .MuiTypography-root": {
           color: o.palette.text.primary,
           ...o.typography.body
         },
-        "& .M4LCheckBox-small .MuiButtonBase-root": {
-          width: "20px",
-          height: "20px"
+        "&.M4LCheckBox-small ": {
+          "& .MuiButtonBase-root": {
+            width: "24px",
+            height: "24px"
+          }
         },
         "& .MuiCheckbox-root .MuiSvgIcon-fontSizeSmall": {
           width: "16px",
           height: "16px"
         },
-        "& .M4LCheckBox-medium .MuiButtonBase-root": {
-          width: "24px",
-          height: "24px"
+        "&.M4LCheckBox-medium": {
+          "& .MuiButtonBase-root": {
+            width: "24px",
+            height: "24px"
+          },
+          "& .M4LCheckBox-skeleton": {
+            width: "24px",
+            height: "24px"
+          }
         },
         "& .MuiCheckbox-root .MuiSvgIcon-fontSizeMedium": {
           width: "20px",
@@ -6019,7 +6030,13 @@ const p = (o) => ({
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        overflow: "auto"
+        overflow: "auto",
+        "& .M4LMFLoader-containerLinearProgress": {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center"
+        }
       }
     }
   }
@@ -6421,9 +6438,11 @@ const p = (o) => ({
         alignItems: "center",
         padding: "8px 80px",
         minHeight: "80px",
-        backgroundColor: o.palette.background.neutral,
+        backgroundColor: o.palette.background.default,
         position: "fixed",
         zIndex: "100",
+        borderBottom: "1px solid rgba(9, 30, 66, 0.10)",
+        boxShadow: "rgba(36, 59, 70, 0.12)",
         [o.breakpoints.down("md")]: {
           padding: "8px 24px"
         }
@@ -6459,15 +6478,38 @@ const p = (o) => ({
       }
     }
   }
+}), io = (o) => ({
+  M4LFieldLabel: {
+    styleOverrides: {
+      "&.M4LFieldLabel-root": {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        width: "100%",
+        "& .M4LFieldLabel-mandatory": {
+          marginLeft: "2px",
+          "& .MuiTypography-root": {
+            color: o.palette.error.main
+          }
+        },
+        "& .M4LFieldLabel-tooltip": {
+          marginLeft: "6px",
+          "& .M4LIcon-root .M4LIcon-icon": {
+            backgroundColor: o.palette.info.main
+          }
+        }
+      }
+    }
+  }
 });
 export {
   T as A,
   A as B,
-  P as C,
+  D as C,
   H as D,
   F as E,
   W as F,
-  V as G,
+  O as G,
   j as H,
   G as I,
   N as J,
@@ -6487,30 +6529,31 @@ export {
   eo as X,
   ro as Y,
   ao as Z,
+  io as _,
   p as a,
-  D as b,
+  P as b,
   d as c,
   l as d,
   s as e,
   c as f,
   L as g,
   g as h,
-  O as i,
+  z as i,
   x as j,
-  z as k,
+  V as k,
   u as l,
   b as m,
   M as n,
   y as o,
   w as p,
-  h as q,
-  f as r,
+  f as q,
+  h as r,
   v as s,
-  m as t,
-  C as u,
-  I as v,
+  C as t,
+  m as u,
+  k as v,
   B as w,
-  k as x,
+  I as x,
   S as y,
   R as z
 };