@m4l/styles 0.0.43 → 0.0.45

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

@@ -1,7 +1,11 @@
 import { alpha as t } from "@mui/material/styles";
 import { alpha as e } from "@mui/system";
+import "../../defaultThemeOptions.656b9eff.js";
+import "../../shadows.86540b18.js";
 import { P as r } from "../../palette.0590e8a6.js";
-const p = (o) => ({
+import "../../typography.ed54f014.js";
+import "@mui/material";
+const c = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {
       "&.M4LDynamicFilter-root": {
@@ -300,7 +304,7 @@ const p = (o) => ({
       }
     }
   }
-}), d = (o) => ({
+}), g = (o) => ({
   M4LIcon: {
     styleOverrides: {
       ["&.M4LIcon-root"]: {
@@ -349,7 +353,7 @@ const p = (o) => ({
       }
     }
   }
-}), l = (o) => ({
+}), x = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
@@ -484,7 +488,7 @@ const p = (o) => ({
       }
     }
   }
-}), s = (o) => ({
+}), u = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {
@@ -505,7 +509,7 @@ const p = (o) => ({
       }
     }
   }
-}), c = (o) => ({
+}), b = (o) => ({
   M4LImageButton: {
     styleOverrides: {
       ["&.M4LImageButton-root"]: {
@@ -559,7 +563,7 @@ const p = (o) => ({
       }
     }
   }
-}), g = (o) => ({
+}), M = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
@@ -570,7 +574,7 @@ const p = (o) => ({
       }
     }
   }
-}), x = (o) => ({
+}), L = (o) => ({
   M4LPopover: {
     styleOverrides: {
       "&.M4LPopover-root": {
@@ -661,7 +665,7 @@ const p = (o) => ({
       }
     }
   }
-}), u = (o) => ({
+}), y = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
       ["&.M4LHelperText-root"]: {
@@ -680,7 +684,7 @@ const p = (o) => ({
       }
     }
   }
-}), b = (o) => ({
+}), f = (o) => ({
   M4LTypography: {
     styleOverrides: {
       ["&.M4LTypography-root"]: {
@@ -692,7 +696,7 @@ const p = (o) => ({
       }
     }
   }
-}), M = (o) => ({
+}), h = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
@@ -925,7 +929,7 @@ const p = (o) => ({
       }
     }
   }
-}), L = (o) => ({
+}), w = (o) => ({
   M4LNavLink: {
     styleOverrides: {
       ["&.M4LNavLink-root"]: {
@@ -945,7 +949,7 @@ const p = (o) => ({
       }
     }
   }
-}), y = (o) => ({
+}), v = (o) => ({
   M4LSideBar: {
     styleOverrides: {
       "&.M4LSideBar-root": {
@@ -959,13 +963,11 @@ const p = (o) => ({
             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",
@@ -976,21 +978,29 @@ const p = (o) => ({
                 borderColor: o.palette.state.borderPrimary,
                 backgroundColor: o.palette.background.default,
                 "& .M4LSideBar-contentGroups": {
-                  padding: "32px 12px",
                   "& .M4LSideBar-wrapperGroup": {
-                    overflow: "visible",
-                    padding: "8px",
-                    borderTop: "1px solid",
+                    overflow: "hidden",
+                    padding: "10px",
+                    borderTop: "unset",
                     borderBottom: "1px solid",
                     borderColor: o.palette.state.borderSecondary,
-                    height: "fit-content",
+                    height: "100%",
                     width: "100%",
+                    flex: "1",
+                    "& .M4LSideBar-itemListMainRootContainer": {
+                      display: "flex",
+                      flexDirection: "column",
+                      width: "100%",
+                      height: "auto",
+                      overflow: "hidden"
+                    },
                     "& .M4LSideBar-navItemRootContent": {
                       overflow: "hidden",
                       height: "36px",
                       padding: "0px 8px",
                       display: "flex",
-                      alignItems: "center"
+                      alignItems: "center",
+                      position: "relative"
                     }
                   }
                 },
@@ -1035,7 +1045,6 @@ const p = (o) => ({
           minWidth: "20px",
           minHeight: "20px",
           "& .MuiButtonBase-root": {
-            padding: "0px",
             width: "20px",
             height: "20px"
           }
@@ -1061,7 +1070,6 @@ const p = (o) => ({
           transition: "all 0.3s"
         },
         "& .M4LSideBar-subItemActive": {
-          padding: "0px",
           "& .M4LIcon-icon": {
             backgroundColor: `${o.palette.state.focus}!important`
           }
@@ -1155,8 +1163,7 @@ const p = (o) => ({
                     textOverflow: "ellipsis",
                     textWrap: "nowrap",
                     ...o.typography.paragraphDens,
-                    textTransform: "capitalize",
-                    fontWeight: "700"
+                    textTransform: "capitalize"
                   }
                 }
               },
@@ -1165,7 +1172,7 @@ const p = (o) => ({
                 borderRadius: "4px 0px 0px 4px",
                 justifyContent: "flex-start",
                 flexDirection: "column",
-                gap: "4px",
+                gap: "2px",
                 height: "auto",
                 marginBottom: "2px",
                 "& .M4LSideBar-navItemMainRoot": {
@@ -1177,13 +1184,11 @@ 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"
@@ -1214,12 +1219,12 @@ const p = (o) => ({
                     "&::before": {
                       content: '""',
                       width: "3px",
-                      height: "50%",
-                      top: "25%",
-                      bottom: "25%",
-                      left: "0px",
+                      height: "100%",
+                      top: "0",
+                      bottom: "0",
+                      right: "0px",
                       backgroundColor: o.palette.state.focus,
-                      borderRadius: "0px 4px 4px 0px",
+                      borderRadius: "4px 0px 0px 4px",
                       position: "absolute"
                     }
                   }
@@ -1267,10 +1272,9 @@ const p = (o) => ({
                   paddingLeft: "0px"
                 },
                 "& .M4LSideBar-navListSubItemRoot": {
-                  gap: "8px",
+                  gap: "12px",
                   padding: "0px",
                   "& .M4LSideBar-navSubItemContentRoot ": {
-                    padding: "0px 8px",
                     width: "100%",
                     height: "32px",
                     borderRadius: "4px",
@@ -1278,10 +1282,7 @@ 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
@@ -1291,7 +1292,6 @@ const p = (o) => ({
                     },
                     "& .M4LSideBar-subItemActive": {
                       "& .MuiButtonBase-root": {
-                        padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {}
                         },
@@ -1312,7 +1312,7 @@ const p = (o) => ({
                     }
                   },
                   "& .M4LSideBar-navSubItemContentRoot": {
-                    gap: "8px",
+                    gap: "12px",
                     margin: "0px 0px 0px 0px",
                     "& .M4LSideBar-navSubItemContentBullet": {
                       minWidth: "5px",
@@ -1343,7 +1343,7 @@ const p = (o) => ({
                   }
                 },
                 "& .MuiCollapse-root": {
-                  marginLeft: "8px"
+                  marginLeft: "18px"
                 }
               }
             },
@@ -1432,7 +1432,6 @@ const p = (o) => ({
             flexGrow: "1",
             display: "flex",
             flexDirection: "column",
-            gap: "8px",
             "& .M4LSideBar-contentGroupsLine": {
               display: "flex",
               height: "2px",
@@ -1462,7 +1461,7 @@ const p = (o) => ({
                 justifyContent: "center",
                 flexDirection: "column",
                 padding: "0px 0px 8px 0px",
-                gap: "0px",
+                gap: "4px",
                 "& .M4LSideBar-navItemMainRoot": {
                   backgroundColor: "transparent",
                   borderRadius: "4px",
@@ -1474,8 +1473,6 @@ 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": {
@@ -1571,8 +1568,6 @@ 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
@@ -1582,8 +1577,6 @@ const p = (o) => ({
                     },
                     "& .M4LSideBar-subItemActive": {
                       "& .MuiButtonBase-root": {
-                        paddingLeft: "0px",
-                        padding: "0px",
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
                             backgroundColor: `${o.palette.state.focus}!important`
@@ -1598,7 +1591,6 @@ const p = (o) => ({
                       }
                     },
                     "&:hover": {
-                      padding: "0 8px",
                       background: o.palette.state.default
                     }
                   },
@@ -1689,7 +1681,6 @@ const p = (o) => ({
               "& .M4LSideBar-navListSubItemRoot": {
                 "& .M4LSideBar-subItemActive": {
                   "& .MuiButtonBase-root": {
-                    padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
@@ -1702,7 +1693,6 @@ const p = (o) => ({
             "& .M4LSideBar-subItemActive": {
               height: "fit-content",
               "& .MuiButtonBase-root": {
-                padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
                     backgroundColor: `${o.palette.state.focus}!important`
@@ -1722,7 +1712,6 @@ const p = (o) => ({
               backgroundColor: o.palette.text.primary
             },
             "&:hover": {
-              padding: "0 8px",
               background: o.palette.state.default
             }
           }
@@ -1762,7 +1751,6 @@ const p = (o) => ({
               "& .M4LSideBar-navListSubItemRoot": {
                 "& .M4LSideBar-subItemActive": {
                   "& .MuiButtonBase-root": {
-                    padding: "0px",
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
@@ -1775,7 +1763,6 @@ const p = (o) => ({
             "& .M4LSideBar-subItemActive": {
               height: "fit-content",
               "& .MuiButtonBase-root": {
-                padding: "0px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
                     backgroundColor: `${o.palette.state.focus}!important`
@@ -1795,7 +1782,6 @@ const p = (o) => ({
               backgroundColor: o.palette.text.primary
             },
             "&:hover": {
-              padding: "0 8px",
               background: o.palette.state.default
             }
           }
@@ -1893,7 +1879,7 @@ const p = (o) => ({
                   borderRadius: "4px 0px 0px 4px",
                   justifyContent: "flex-start",
                   flexDirection: "column",
-                  paddingBottom: "4px",
+                  marginBottom: "4px",
                   gap: "0px",
                   height: "auto",
                   "& .M4LSideBar-navItemMainRoot": {
@@ -1907,10 +1893,7 @@ 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.active,
                       "&:hover": {
                         background: t(o.palette.state.active || "#fff", 0.24),
                         cursor: "pointer"
@@ -2001,13 +1984,10 @@ 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
@@ -2017,7 +1997,6 @@ const p = (o) => ({
                       },
                       "& .M4LSideBar-subItemActive": {
                         "& .MuiButtonBase-root": {
-                          padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
                               backgroundColor: `${o.palette.state.focus}!important`
@@ -2032,14 +2011,13 @@ const p = (o) => ({
                         }
                       },
                       "&:hover": {
-                        padding: "0 8px",
                         background: o.palette.state.default
                       }
                     },
                     "& .M4LSideBar-navSubItemContentRoot": {
                       gap: "12px",
                       margin: "0px 0px 0px 0px",
-                      padding: "8px",
+                      padding: "16px",
                       "& .M4LIcon-root": {
                         minHeight: "24px",
                         minWwidth: "24px",
@@ -2069,7 +2047,7 @@ const p = (o) => ({
                     }
                   },
                   "& .MuiCollapse-root": {
-                    marginLeft: "0px"
+                    marginLeft: "18px"
                   }
                 }
               },
@@ -2157,7 +2135,7 @@ const p = (o) => ({
                       overflow: "hidden",
                       textOverflow: "ellipsis",
                       textWrap: "nowrap",
-                      fontWeight: "700",
+                      fontWeight: "400",
                       fontSize: "14px !important"
                     }
                   }
@@ -2168,7 +2146,7 @@ const p = (o) => ({
                   justifyContent: "center",
                   flexDirection: "column",
                   padding: "0px 0px 8px 0px",
-                  gap: "0",
+                  gap: "4px",
                   "& .M4LSideBar-navItemMainRoot": {
                     backgroundColor: "transparent",
                     borderRadius: "4px",
@@ -2180,8 +2158,6 @@ 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": {
@@ -2275,12 +2251,10 @@ 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,7 +2264,6 @@ const p = (o) => ({
                       },
                       "& .M4LSideBar-subItemActive": {
                         "& .MuiButtonBase-root": {
-                          padding: "0px",
                           "& .M4LIcon-root": {
                             "& .M4LIcon-icon": {
                               backgroundColor: `${o.palette.state.focus}!important`
@@ -2305,14 +2278,13 @@ const p = (o) => ({
                         }
                       },
                       "&:hover": {
-                        padding: "0 8px",
                         background: o.palette.state.default
                       }
                     },
                     "& .M4LSideBar-navSubItemContentRoot": {
                       gap: "12px",
                       margin: "0px 0px 0px 0px",
-                      padding: "0px",
+                      padding: "16px",
                       "& .M4LSideBar-navSubItemContentBullet": {
                         minWidth: "5px",
                         minHeight: "5px",
@@ -2427,8 +2399,6 @@ 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": {
@@ -2520,12 +2490,10 @@ 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
@@ -2535,7 +2503,6 @@ const p = (o) => ({
                                   },
                                   "& .M4LSideBar-subItemActive": {
                                     "& .MuiButtonBase-root": {
-                                      padding: "0px",
                                       "& .M4LIcon-root": {
                                         "& .M4LIcon-icon": {
                                           backgroundColor: `${o.palette.state.focus}!important`
@@ -2550,14 +2517,13 @@ const p = (o) => ({
                                     }
                                   },
                                   "&:hover": {
-                                    background: o.palette.state.default,
-                                    padding: "0 8px"
+                                    background: o.palette.state.default
                                   }
                                 },
                                 "& .M4LSideBar-navSubItemContentRoot": {
                                   gap: "12px",
                                   margin: "0px 0px 0px 0px",
-                                  padding: "0px",
+                                  padding: "16px",
                                   "& .M4LSideBar-navSubItemContentBullet": {
                                     minWidth: "5px",
                                     minHeight: "5px",
@@ -2631,7 +2597,7 @@ const p = (o) => ({
       }
     }
   }
-}), f = (o) => ({
+}), C = (o) => ({
   M4LAreasAdmin: {
     styleOverrides: {
       "&.M4LAreasAdmin-root": {
@@ -3063,7 +3029,7 @@ const p = (o) => ({
       }
     }
   }
-}), h = (o) => ({
+}), m = (o) => ({
   M4LAreasViewer: {
     styleOverrides: {
       "&.M4LAreasViewer-root": {
@@ -3078,6 +3044,8 @@ const p = (o) => ({
           height: "50px"
         },
         "& .M4LGridLayout-gridItemRoot": {
+          containerName: "main",
+          containerType: "inline-size",
           "& .react-resizable-handle-nw": {
             top: "0px !important",
             left: "0px !important"
@@ -3722,7 +3690,7 @@ const p = (o) => ({
       }
     }
   }
-}), w = (o) => ({
+}), k = (o) => ({
   M4LAppBar: {
     styleOverrides: {
       "&.M4LAppBar-root": {
@@ -3845,7 +3813,7 @@ const p = (o) => ({
       }
     }
   }
-}), v = (o) => ({
+}), B = (o) => ({
   M4LAvatar: {
     styleOverrides: {
       "&.M4LAvatar-root": {
@@ -3867,7 +3835,7 @@ const p = (o) => ({
       }
     }
   }
-}), C = (o) => ({
+}), I = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -4146,7 +4114,7 @@ const p = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), S = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -4163,7 +4131,7 @@ const p = (o) => ({
       }
     }
   }
-}), k = (o) => ({
+}), R = (o) => ({
   M4LMasterDetailLayout: {
     styleOverrides: {
       "&.M4LMasterDetailLayout-root": {
@@ -4196,7 +4164,7 @@ const p = (o) => ({
       }
     }
   }
-}), B = (o) => ({
+}), T = (o) => ({
   M4LSplitLayout: {
     styleOverrides: {
       "&.M4LSplitLayout-root": {
@@ -4318,7 +4286,7 @@ const p = (o) => ({
       }
     }
   }
-}), I = (o) => ({
+}), A = (o) => ({
   M4LCommonActions: {
     styleOverrides: {
       "&.M4LCommonActions-root": {
@@ -4331,7 +4299,7 @@ const p = (o) => ({
       }
     }
   }
-}), S = (o) => ({
+}), P = (o) => ({
   M4LinearProgressIndeterminate: {
     styleOverrides: {
       "&.M4LinearProgressIndeterminate-root": {
@@ -4385,7 +4353,7 @@ const p = (o) => ({
       }
     }
   }
-}), R = (o) => ({
+}), D = (o) => ({
   M4LPropertyValue: {
     styleOverrides: {
       "&.M4LPropertyValue-root": {
@@ -4426,9 +4394,7 @@ const p = (o) => ({
           "& .M4LTypography-root": {
             ...o.typography.body,
             color: o.palette.text.secondary,
-            fontWeight: "400 !important",
-            maxWidth: "100%",
-            width: "100%"
+            fontWeight: "400 !important"
           }
         },
         "& .M4LPropertyValue-value": {
@@ -4489,7 +4455,7 @@ const p = (o) => ({
       }
     }
   }
-}), T = (o) => ({
+}), H = (o) => ({
   M4LTab: {
     styleOverrides: {
       "&.M4LTab-root": {
@@ -4541,7 +4507,7 @@ const p = (o) => ({
       }
     }
   }
-}), A = (o) => ({
+}), F = (o) => ({
   M4LAccordion: {
     styleOverrides: {
       "&.M4LAccordion-root": {
@@ -4682,7 +4648,7 @@ const p = (o) => ({
       }
     }
   }
-}), P = (o) => ({
+}), W = (o) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -4697,7 +4663,7 @@ const p = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), z = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
@@ -4877,7 +4843,7 @@ const p = (o) => ({
       }
     }
   }
-}), H = (o) => ({
+}), V = (o) => ({
   M4LModalDialog: {
     styleOverrides: {
       "&.M4LModal-root": {
@@ -5004,7 +4970,7 @@ const p = (o) => ({
       }
     }
   }
-}), F = (o) => ({
+}), O = (o) => ({
   M4LPaperForm: {
     styleOverrides: {
       "&.M4LPaperForm-root": {
@@ -5053,7 +5019,7 @@ const p = (o) => ({
       }
     }
   }
-}), W = (o) => ({
+}), j = (o) => ({
   M4LTooltip: {
     styleOverrides: {
       "&.M4LTooltip-root": {
@@ -5074,7 +5040,7 @@ const p = (o) => ({
       }
     }
   }
-}), z = (o) => ({
+}), G = (o) => ({
   M4LBadge: {
     styleOverrides: {
       "&.M4LBadge-root": {
@@ -5105,7 +5071,7 @@ const p = (o) => ({
       }
     }
   }
-}), V = (o) => ({
+}), N = (o) => ({
   M4LDataGrid: {
     styleOverrides: {
       "&.M4LDataGrid-root": {
@@ -5120,6 +5086,19 @@ const p = (o) => ({
         gap: "4px",
         height: "100%",
         width: "100%",
+        ["&.M4LDataGrid-xs"]: {
+          "& .M4LDataGrid-actions": {
+            height: "44px",
+            "& .M4LPager-labelRowsPerPageContainer": {
+              "& .M4LTypography-root": {
+                display: "none"
+              }
+            },
+            "& .M4LPager-labelDisplayRows": {
+              display: "none"
+            }
+          }
+        },
         "& .M4LDataGrid-actions": {
           ...o.typography.body,
           left: "0px",
@@ -5136,7 +5115,7 @@ const p = (o) => ({
           background: o.palette.background.default,
           position: "absolute",
           gap: "8px",
-          [o.breakpoints.down("sm")]: {
+          ["@container main (max-width: 600px)"]: {
             height: "44px"
           },
           "& .M4LDataGrid-actionsConfigContainer": {
@@ -5186,7 +5165,7 @@ const p = (o) => ({
           border: "none",
           boxshadow: o.customShadows.z2,
           background: o.palette.background.default,
-          [o.breakpoints.down("sm")]: {
+          ["@container main (max-width: 600px)"]: {
             top: "44px"
           },
           "& .M4LDataGrid-wrapperDataGridCss": {
@@ -5434,7 +5413,7 @@ const p = (o) => ({
       }
     }
   }
-}), O = (o) => ({
+}), E = (o) => ({
   M4LPager: {
     styleOverrides: {
       "&.M4LPager-root": {
@@ -5442,9 +5421,10 @@ const p = (o) => ({
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
-        justifyContent: "space-between",
         gap: "12px",
         whiteSpace: "nowrap",
+        width: "100%",
+        justifyContent: "space-between",
         "& .M4LPager-pagerActions": {
           display: "flex",
           padding: "2px",
@@ -5454,6 +5434,7 @@ const p = (o) => ({
           width: "fit-content",
           background: o.palette.background.default,
           borderRadius: "4px",
+          margin: "auto",
           [o.breakpoints.down("sm")]: {
             gap: "4px",
             padding: "4px"
@@ -5522,7 +5503,7 @@ const p = (o) => ({
       }
     }
   }
-}), j = (o) => ({
+}), $ = (o) => ({
   M4LCheckBox: {
     styleOverrides: {
       "&.M4LCheckBox-root": {
@@ -5593,7 +5574,7 @@ const p = (o) => ({
       }
     }
   }
-}), G = (o) => ({
+}), _ = (o) => ({
   M4LStack: {
     styleOverrides: {
       "&.M4LStack-root": {
@@ -5606,7 +5587,7 @@ const p = (o) => ({
       }
     }
   }
-}), N = (o) => ({
+}), U = (o) => ({
   M4LTabs: {
     styleOverrides: {
       "&.M4LTabs-root": {
@@ -5646,7 +5627,7 @@ const p = (o) => ({
       }
     }
   }
-}), E = (o) => ({
+}), Y = (o) => ({
   M4LNoItemSelected: {
     styleOverrides: {
       "&.M4LNoItemSelected-root": {
@@ -5666,7 +5647,7 @@ const p = (o) => ({
       }
     }
   }
-}), $ = (o) => ({
+}), q = (o) => ({
   M4LScrollBar: {
     styleOverrides: {
       "&.M4LScrollBar-root": {
@@ -5701,7 +5682,7 @@ const p = (o) => ({
       }
     }
   }
-}), _ = (o) => ({
+}), X = (o) => ({
   M4LGridLayout: {
     styleOverrides: {
       "&.M4LGridLayout-root": {
@@ -5709,7 +5690,7 @@ const p = (o) => ({
       }
     }
   }
-}), U = (o) => ({
+}), J = (o) => ({
   M4LTabContent: {
     styleOverrides: {
       "&.M4LTabContent-root": {
@@ -5729,7 +5710,7 @@ const p = (o) => ({
       }
     }
   }
-}), Y = (o) => ({
+}), K = (o) => ({
   M4LMenuActions: {
     styleOverrides: {
       "&.M4LMenuActions-root": {
@@ -5763,7 +5744,7 @@ const p = (o) => ({
       }
     }
   }
-}), q = (o) => ({
+}), Q = (o) => ({
   M4LPrintingSystem: {
     styleOverrides: {
       "&.M4LPrintingSystem-root": {
@@ -5945,7 +5926,7 @@ const p = (o) => ({
       }
     }
   }
-}), X = (o) => ({
+}), Z = (o) => ({
   M4LFormatter: {
     styleOverrides: {
       "&.M4LFormatter-root": {
@@ -5962,7 +5943,7 @@ const p = (o) => ({
       }
     }
   }
-}), J = (o) => ({
+}), oo = (o) => ({
   M4LoadingError: {
     styleOverrides: {
       "&.M4LoadingError-root": {
@@ -6021,7 +6002,7 @@ const p = (o) => ({
       }
     }
   }
-}), K = (o) => ({
+}), to = (o) => ({
   M4LMFLoader: {
     styleOverrides: {
       "&.M4LMFLoader-root": {
@@ -6040,7 +6021,7 @@ const p = (o) => ({
       }
     }
   }
-}), Q = (o) => ({
+}), eo = (o) => ({
   M4LLoadingButton: {
     styleOverrides: {
       "&.M4LLoadingButton-root": {
@@ -6272,7 +6253,7 @@ const p = (o) => ({
       }
     }
   }
-}), Z = (o) => ({
+}), ro = (o) => ({
   M4LToastContainer: {
     styleOverrides: {
       "&.M4LToastContainer-root": {
@@ -6350,7 +6331,7 @@ const p = (o) => ({
       }
     }
   }
-}), oo = (o) => ({
+}), ao = (o) => ({
   M4LPDFViewer: {
     styleOverrides: {
       "&.M4LPDFViewer-root": {
@@ -6365,7 +6346,7 @@ const p = (o) => ({
       }
     }
   }
-}), to = (o) => ({
+}), io = (o) => ({
   M4LTopBar: {
     styleOverrides: {
       "&.M4LTopBar-root": {
@@ -6428,7 +6409,7 @@ const p = (o) => ({
       }
     }
   }
-}), eo = (o) => ({
+}), no = (o) => ({
   M4LAppBarCommercial: {
     styleOverrides: {
       "&.M4LAppBarCommercial-root": {
@@ -6449,7 +6430,7 @@ const p = (o) => ({
       }
     }
   }
-}), ro = (o) => ({
+}), po = (o) => ({
   M4LSectionCommercial: {
     styleOverrides: {
       "&.M4LSectionCommercial-root": {
@@ -6468,7 +6449,7 @@ const p = (o) => ({
       }
     }
   }
-}), ao = (o) => ({
+}), lo = (o) => ({
   M4LHamburgerMenuCommercial: {
     styleOverrides: {
       "&.M4LHamburgerMenuCommercial-root": {
@@ -6478,7 +6459,7 @@ const p = (o) => ({
       }
     }
   }
-}), io = (o) => ({
+}), so = (o) => ({
   M4LFieldLabel: {
     styleOverrides: {
       "&.M4LFieldLabel-root": {
@@ -6503,57 +6484,57 @@ const p = (o) => ({
   }
 });
 export {
-  T as A,
-  A as B,
-  D as C,
-  H as D,
-  F as E,
-  W as F,
-  O as G,
-  j as H,
-  G as I,
-  N as J,
-  E as K,
-  $ as L,
-  Q as M,
-  _ as N,
-  U as O,
-  Y as P,
-  q as Q,
-  X as R,
-  J as S,
-  K as T,
-  Z as U,
-  oo as V,
-  to as W,
-  eo as X,
-  ro as Y,
-  ao as Z,
-  io as _,
-  p as a,
-  P as b,
-  d as c,
-  l as d,
-  s as e,
-  c as f,
-  L as g,
-  g as h,
-  z as i,
-  x as j,
-  V as k,
-  u as l,
-  b as m,
-  M as n,
-  y as o,
-  w as p,
-  f as q,
-  h as r,
-  v as s,
-  C as t,
-  m as u,
-  k as v,
-  B as w,
-  I as x,
-  S as y,
-  R as z
+  H as A,
+  F as B,
+  z as C,
+  V as D,
+  O as E,
+  j as F,
+  E as G,
+  $ as H,
+  _ as I,
+  U as J,
+  Y as K,
+  q as L,
+  eo as M,
+  X as N,
+  J as O,
+  K as P,
+  Q,
+  Z as R,
+  oo as S,
+  to as T,
+  ro as U,
+  ao as V,
+  io as W,
+  no as X,
+  po as Y,
+  lo as Z,
+  so as _,
+  c as a,
+  W as b,
+  g as c,
+  x as d,
+  u as e,
+  b as f,
+  w as g,
+  M as h,
+  G as i,
+  L as j,
+  N as k,
+  y as l,
+  f as m,
+  h as n,
+  v as o,
+  k as p,
+  C as q,
+  m as r,
+  B as s,
+  I as t,
+  S as u,
+  R as v,
+  T as w,
+  A as x,
+  P as y,
+  D as z
 };