@m4l/styles 0.0.22 → 0.0.24

package/theme/overrides/M4LExtendedComponents/{index.28d622ba.js → index.83dad55c.js}

@@ -6,13 +6,15 @@ const i = (o) => ({
       "&.M4LDynamicFilter-root": {
         borderRadius: "4px",
         background: o.palette.background.default,
-        boxShadow: o.customShadows.z2,
+        boxShadow: o.customShadows.z1,
         padding: "0px",
-        border: "1px solid",
-        borderColor: o.palette.background.background,
+        border: "none",
         overflow: "hidden",
+        height: "35px",
+        marginBottom: "8px",
         [o.breakpoints.down("sm")]: {
-          gap: "0px"
+          gap: "0px",
+          height: "auto"
         },
         "& .M4LDynamicFilter-containerFistRow": {
           height: "32px",
@@ -30,7 +32,8 @@ const i = (o) => ({
             alignItems: "center",
             maxWidth: "100%",
             [o.breakpoints.down("sm")]: {
-              height: "44px"
+              height: "100%",
+              padding: "8px"
             }
           }
         },
@@ -41,8 +44,10 @@ const i = (o) => ({
           display: "flex",
           flexDirection: "row",
           gap: "4px",
-          backgroundColor: o.palette.background.neutral,
+          backgroundColor: o.palette.background.background,
           padding: "4px",
+          height: "100%",
+          alignItems: "center",
           [o.breakpoints.down("sm")]: {
             gap: "12px",
             padding: "8px"
@@ -52,15 +57,15 @@ const i = (o) => ({
           display: "flex",
           flexDirection: "row",
           gap: "8px",
-          padding: "4px",
-          backgroundColor: o.palette.background.neutral,
+          padding: "4px 6px 4px 4px",
+          backgroundColor: o.palette.background.background,
           height: "100%",
           maxWidth: "135px",
           width: "100%",
           alignItems: "center",
           "& > input": {
             border: "1px solid",
-            borderColor: o.palette.background.background,
+            borderColor: o.palette.background.default,
             background: "none",
             ...o.typography.body,
             color: o.palette.text.primary,
@@ -96,7 +101,6 @@ const i = (o) => ({
           color: o.palette.text.secondary,
           ...o.typography.body,
           border: "none",
-          borderTop: "1px solid",
           borderColor: o.palette.state.default,
           "& .css-5ca9fi": {
             ...o.typography.body
@@ -489,7 +493,8 @@ const i = (o) => ({
 }), c = (o) => ({
   M4LPopover: {
     styleOverrides: {
-      ["&.M4LPopover-root"]: {
+      "&.M4LPopover-root": {
+        zIndex: "unset",
         ".MuiPaper-root": {
           background: o.palette.background.default,
           borderRadius: "6px",
@@ -500,10 +505,12 @@ const i = (o) => ({
         "& .M4LanguagePopover-containerItems": {
           "& .M4LanguagePopover-labelItem": {
             ...o.typography.body,
-            color: o.palette.text.secondary
+            color: o.palette.text.secondary,
+            borderRadius: "4px"
           },
           "& .MuiButtonBase-root:hover": {
-            backgroundColor: o.palette.state?.active12
+            backgroundColor: o.palette.state?.active12,
+            borderRadius: "4px"
           },
           "& .MuiButtonBase-root.Mui-selected": {
             backgroundColor: o.palette.state?.active12,
@@ -550,6 +557,16 @@ const i = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
+        "&.M4LButton-colorError .MuiButtonBase-root": {
+          backgroundColor: `${o.palette.state.error.normal}!important`,
+          test: "bruce button"
+        },
+        "&.M4LButton-colorWarning .MuiButtonBase-root": {
+          backgroundColor: `${o.palette.state.warning.normal}!important`
+        },
+        "&.M4LButton-colorSuccess .MuiButtonBase-root": {
+          backgroundColor: `${o.palette.state.success.normal}!important`
+        },
         width: "fit-content",
         display: "flex",
         justifyContent: "center",
@@ -649,7 +666,7 @@ const i = (o) => ({
           "& .MuiButtonBase-root": {
             backgroundColor: o.palette.state?.active,
             color: o.palette.patronus?.marbleLight[10],
-            boxShadow: o.customShadows?.primary,
+            boxShadow: o.customShadows?.z1,
             position: "relative",
             "& .M4LIcon-icon": {
               backgroundColor: o.palette.patronus?.marbleLight[10]
@@ -741,6 +758,21 @@ const i = (o) => ({
               }
             }
           }
+        },
+        "& .M4LButton-colorWarning": {
+          backgroundColor: o.palette.state?.warning,
+          color: o.palette.patronus?.marbleLight[10],
+          boxShadow: o.customShadows?.warning
+        },
+        "& .M4LButton-colorError": {
+          backgroundColor: o.palette.state?.error,
+          color: o.palette.patronus?.marbleLight[10],
+          boxShadow: o.customShadows?.error
+        },
+        "& .M4LButton-colorSuccess": {
+          backgroundColor: o.palette.state?.success,
+          color: o.palette.patronus?.marbleLight[10],
+          boxShadow: o.customShadows?.success
         }
       }
     }
@@ -994,14 +1026,26 @@ const i = (o) => ({
         height: "100%",
         width: "auto",
         background: o.palette.background.neutral,
-        paddingLeft: "14px",
+        paddingLeft: "0",
         paddingBottom: "14px",
         boxShadow: o.customShadows.z3,
         "&.M4LSideBar-collapsed": {
-          "& .M4LImage-root": {
-            minWidth: "44px !important",
-            minHeight: "44px !important",
-            background: "red"
+          "& .M4LSideBar-wrapperSideBar": {
+            width: "50px",
+            "& .M4LSideBar-contentDesktop": {
+              "& .M4LSideBar-containerSideBarLogo": {
+                marginTop: "0px",
+                "& .M4LSideBar-containerLogo": {
+                  gap: "24px",
+                  paddingLeft: "24px",
+                  width: "100%",
+                  "& .M4LImage-root": {
+                    minWidth: "40px !important",
+                    minHeight: "40px !important"
+                  }
+                }
+              }
+            }
           }
         },
         [o.breakpoints.down("sm")]: {
@@ -1011,18 +1055,21 @@ const i = (o) => ({
         },
         "& .M4LSideBar-wrapperSideBar": {
           height: "100%",
+          width: "250px",
           "& .M4LSideBar-containerSideBarLogo": {
             display: "flex",
             justifyContent: "flex-start",
+            marginTop: "12px",
             "& .M4LSideBar-containerLogo": {
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
               fitContent: "100%",
               boxSizing: "contentBox",
-              paddingTop: "24px",
-              paddingBottom: "28px",
-              gap: "24px",
+              paddingTop: "8px",
+              paddingBottom: "8px",
+              gap: "16px",
+              paddingLeft: "24px",
               "& .M4LTypography-root": {
                 display: "flex",
                 width: "100%",
@@ -1038,7 +1085,9 @@ const i = (o) => ({
                 background: o.palette.background.default,
                 boxShadow: o.customShadows.z3,
                 padding: "6px",
-                borderRadius: "6px"
+                borderRadius: "6px",
+                minWidth: "50px !important",
+                minHeight: "50px !important"
               }
             }
           },
@@ -1051,12 +1100,13 @@ const i = (o) => ({
               display: "flex",
               height: "2px",
               marginRight: "14px",
-              backgroundColor: o.palette.state.default
+              marginLeft: "14px",
+              backgroundColor: "none"
             },
             "& .M4LSideBar-wrapperGroup": {
               height: "100%",
+              paddingLeft: "10px",
               "& .M4LSideBar-wrapperGroupTitle": {
-                padding: "20px",
                 height: "60px",
                 "& .M4LTypography-root": {
                   display: "flex",
@@ -1075,14 +1125,17 @@ const i = (o) => ({
                 justifyContent: "center",
                 flexDirection: "column",
                 padding: "0px 0px 8px 0px",
+                gap: "4px",
                 "& .M4LSideBar-navItemMainRoot": {
                   backgroundColor: "transparent",
+                  borderRadius: "4px",
                   "&:hover": {
                     background: o.palette.state.default,
                     cursor: "pointer"
                   }
                 },
                 "&.M4LSideBar-itemMainActive": {
+                  borderRadius: "4px",
                   "& .M4LSideBar-navItemMainRoot": {
                     background: o.palette.state.active12,
                     "&:hover": {
@@ -1095,13 +1148,22 @@ const i = (o) => ({
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
                       },
-                      "& .MuiTypography-root": {
-                        color: o.palette.state.focus
+                      "& .M4LTypography-root": {
+                        "& .MuiTypography-root": {
+                          color: o.palette.state.focus
+                        }
                       },
                       "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
                       }
                     },
+                    "& .M4LSideBar-arrowIconRoot": {
+                      "& .M4LIcon-root": {
+                        "& .M4LIcon-icon": {
+                          backgroundColor: o.palette.state.focus
+                        }
+                      }
+                    },
                     "&::before": {
                       content: '""',
                       width: "5px",
@@ -1125,15 +1187,17 @@ const i = (o) => ({
                     gap: "8px",
                     width: "100%",
                     "& .M4LIcon-icon": {
-                      backgroundColor: o.palette.text.secondary
+                      backgroundColor: o.palette.text.primary,
+                      width: "18px",
+                      height: "18px"
                     },
                     "& .M4LTypography-root": {
                       display: "flex",
                       flexGrow: "1",
                       overflow: "hidden",
                       "& .MuiTypography-root": {
-                        ...o.typography.paragraphDens,
-                        color: o.palette.text.secondary,
+                        ...o.typography.paragraph,
+                        color: o.palette.text.primary,
                         textWrap: "nowrap",
                         textOverflow: "ellipsis",
                         display: "block",
@@ -1141,11 +1205,27 @@ const i = (o) => ({
                       }
                     },
                     "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
-                      backgroundColor: o.palette.text.secondary
+                      backgroundColor: o.palette.text.primary
+                    }
+                  },
+                  "& .M4LSideBar-arrowIconRoot": {
+                    "& .M4LIcon-root": {
+                      "& .M4LIcon-icon": {
+                        background: o.palette.text.primary
+                      }
                     }
                   }
                 },
+                "& .M4LSideBar-containerListSubItem": {
+                  paddingLeft: "0px",
+                  "&:hover": {
+                    background: o.palette.state.overdefoult,
+                    borderRadius: "4px"
+                  }
+                },
                 "& .M4LSideBar-navListSubItemRoot": {
+                  gap: "12px",
+                  padding: "0px",
                   "& .M4LSideBar-navSubItemContentRoot ": {
                     width: "100%",
                     height: "36px",
@@ -1169,7 +1249,7 @@ const i = (o) => ({
                   },
                   "& .M4LSideBar-navSubItemContentRoot": {
                     gap: "12px",
-                    margin: "0px 0px 8px 0px",
+                    margin: "0px 0px 0px 0px",
                     padding: "16px",
                     "& .M4LSideBar-navSubItemContentBullet": {
                       minWidth: "5px",
@@ -1182,7 +1262,7 @@ const i = (o) => ({
                       width: "100%",
                       "& .MuiTypography-root": {
                         ...o.typography.paragraph,
-                        color: o.palette.text.secondary,
+                        color: o.palette.text.primary,
                         with: "100%",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
@@ -1197,24 +1277,27 @@ const i = (o) => ({
               }
             },
             "& .M4LIcon-root .M4LIcon-icon": {
-              backgroundColor: o.palette.text.disabled
+              backgroundColor: o.palette.text.primary
             }
           },
           "& .M4LSideBar-collapseButton": {
             display: "flex",
             paddingTop: "14px",
             borderTop: "2px solid",
-            borderColor: o.palette.state.default,
+            borderColor: o.palette.state.overdefoult,
             justifyContent: "center",
             marginRight: "14px",
-            gap: "15px",
+            marginLeft: "14px",
+            gap: "20px",
+            alignItems: "center",
             "& .M4LSideBar-containerLogoButton": {
               display: "flex",
               gap: "14px",
-              "& .M4LSideBar-containerLogoButtonLogo": {
-                width: "120px",
-                height: "40px"
-              },
+              width: "120px"
+            },
+            "& .M4LSideBar-containerLogoButtonLogo": {
+              width: "120px",
+              height: "40px",
               "& .M4LSideBar-containerLogoButtonIcon": {
                 display: "flex",
                 alignItems: "center"
@@ -1229,7 +1312,8 @@ const i = (o) => ({
           paddingLeft: "14px"
         },
         "& .M4LSideBar-contentDesktop": {
-          display: "flex"
+          display: "flex",
+          gap: "20px"
         }
       }
     }
@@ -1238,10 +1322,13 @@ const i = (o) => ({
     styleOverrides: {
       "&.M4LSideBar-popover": {
         "& .M4LSideBar-navListSubItemRoot": {
+          width: "120px",
+          height: "fit-content",
           "& .M4LSideBar-navSubItemContentRoot": {
-            gap: "12px",
-            margin: "0px 0px 8px 0px",
-            padding: "16px",
+            gap: "8px",
+            padding: "8px",
+            height: "fit-content",
+            borderRadius: "4px",
             "&.M4LSideBar-subItemCollapseActive": {
               backgroundColor: o.palette.state.active12
             },
@@ -1258,6 +1345,7 @@ const i = (o) => ({
               }
             },
             "&.M4LSideBar-subItemActive": {
+              height: "fit-content",
               "& .M4LSideBar-navSubItemContentBullet": {
                 height: "14px",
                 borderRadius: "10px",
@@ -1288,6 +1376,7 @@ const i = (o) => ({
           flexDirection: "column",
           "& .M4LSideBar-containerSideBarLogo": {
             marginRight: "14px",
+            marginTop: "0px",
             "& .M4LSideBar-containerLogo": {
               height: "128px",
               display: "flex",
@@ -1327,11 +1416,13 @@ const i = (o) => ({
             "& .M4LSideBar-contentGroupsLine": {
               display: "flex",
               height: "2px",
-              marginRight: "14px",
-              backgroundColor: o.palette.state.default
+              marginRight: "8px",
+              marginLeft: "8px",
+              backgroundColor: o.palette.background.background
             },
             "& .M4LSideBar-wrapperGroup": {
               height: "100%",
+              paddingLeft: "16px",
               "& .M4LSideBar-wrapperGroupTitle": {
                 padding: "20px",
                 height: "60px",
@@ -1352,21 +1443,32 @@ const i = (o) => ({
                 justifyContent: "center",
                 flexDirection: "column",
                 padding: "0px 0px 8px 0px",
-                "& .M4LSideBar-navItemMainRoot": {
-                  backgroundColor: "transparent",
-                  "&:hover": {
-                    background: o.palette.state.default
+                gap: "4px",
+                "&.M4LSideBar-navItemMainRoot": {
+                  borderRadius: "4px 0px 0px 4px",
+                  "& .M4LSideBar-navItemMainRoot": {
+                    backgroundColor: "transparent",
+                    "&:hover": {
+                      background: o.palette.state.default
+                    }
                   }
                 },
                 "&.M4LSideBar-itemMainActive": {
+                  color: o.palette.state.active12,
+                  gap: "4px",
                   "& .M4LSideBar-navItemMainRoot": {
                     background: o.palette.state.active12,
+                    padding: "40px",
                     "&:hover": {
                       background: t(o.palette.state.active || "#fff", 0.18)
                     }
                   },
                   "& .M4LSideBar-navItemRootContent": {
                     "& .M4LSideBar-navItemRootContentIconTypo": {
+                      display: "flex",
+                      gap: "8px",
+                      width: "100%",
+                      alignItems: "center",
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
                       },
@@ -1444,9 +1546,10 @@ const i = (o) => ({
                     "& .M4LTypography-root": {
                       display: "flex",
                       width: "100%",
+                      flexGrow: "1",
                       "& .MuiTypography-root": {
                         ...o.typography.paragraph,
-                        color: o.palette.text.secondary,
+                        color: o.palette.text.primary,
                         with: "100%",
                         overflow: "hidden",
                         textOverflow: "ellipsis",
@@ -1463,27 +1566,6 @@ const i = (o) => ({
             "& .M4LIcon-root .M4LIcon-icon": {
               backgroundColor: o.palette.text.disabled
             }
-          },
-          "& .M4LSideBar-collapseButton": {
-            display: "flex",
-            paddingTop: "14px",
-            borderTop: "2px solid",
-            borderColor: o.palette.state.default,
-            justifyContent: "center",
-            marginRight: "14px",
-            gap: "15px",
-            "& .M4LSideBar-containerLogoButton": {
-              display: "flex",
-              gap: "14px",
-              "& .M4LSideBar-containerLogoButtonLogo": {
-                width: "120px",
-                height: "40px"
-              },
-              "& .M4LSideBar-containerLogoButtonIcon": {
-                display: "flex",
-                alignItems: "center"
-              }
-            }
           }
         }
       }
@@ -1502,18 +1584,28 @@ const i = (o) => ({
         paddingRight: "6px",
         alignItems: "center",
         background: o.palette.background.default,
-        boxShadow: o.customShadows.z2,
         justifyContent: "space-between",
         width: "fit-content",
         maxWidth: "fit-content",
         gap: "8px",
-        borderTop: "1.5px solid",
-        borderColor: o.palette.state.borderTop,
+        border: "1px solid",
+        borderColor: "transparent",
+        boxShadow: o.customShadows.z2,
+        [o.breakpoints.down("sm")]: {
+          boxShadow: o.customShadows.z2
+        },
+        "&.M4LAreasAdmin-isFocus": {
+          border: "1px solid",
+          borderColor: o.palette.primary.main
+        },
         [o.breakpoints.down("sm")]: {
           height: "auto",
-          background: "none",
+          background: o.palette.background.default,
+          boxShadow: o.customShadows.z2,
           width: "100%",
-          maxWidth: "100%"
+          maxWidth: "100%",
+          paddingRight: "0px",
+          borderRadius: "4px"
         },
         "*::-webkit-scrollbar": {
           width: "8px",
@@ -1537,6 +1629,11 @@ const i = (o) => ({
           height: "36px",
           borderRight: "1px solid",
           borderColor: o.palette.state.overdefoult,
+          [o.breakpoints.down("sm")]: {
+            background: "none",
+            borderRight: "none",
+            paddingLeft: "0px"
+          },
           "& .M4LAreasAdmin-areaIconLayer": {
             background: o.palette.background.neutral,
             boxShadow: o.customShadows.z2,
@@ -1557,10 +1654,14 @@ const i = (o) => ({
             display: "flex",
             overflow: "auto",
             gap: "8px",
-            padding: "0",
+            paddingLeft: "0px",
+            paddingRight: "0PX",
             width: "fit-content",
             height: "auto",
             alignItems: "center",
+            [o.breakpoints.down("sm")]: {
+              background: "none"
+            },
             "& .M4LAreasAdmin-areaContainerContentChips": {
               display: "flex",
               flexDirection: "row",
@@ -1568,7 +1669,8 @@ const i = (o) => ({
               justifyContent: "space-between",
               [o.breakpoints.down("sm")]: {
                 justifyContent: "space-between",
-                width: "100%"
+                width: "100%",
+                background: "none"
               },
               "& .css-jjtu05": {
                 "& .css-16ugaun": {},
@@ -1602,38 +1704,59 @@ const i = (o) => ({
                   margin: "0px",
                   borderRadius: "4px",
                   overflow: "hidden",
-                  width: "fit-content"
+                  width: "fit-content",
+                  [o.breakpoints.down("sm")]: {
+                    background: "none",
+                    border: "none",
+                    boxShadow: "none"
+                  }
                 }
               },
               "& .M4LAreasAdmin-areaChipMobileRoot": {
                 display: "flex",
                 overflow: "hidden",
                 width: "100%",
-                backgroundColor: o.palette.state.active,
+                backgroundColor: o.palette.state.default,
+                boxShadow: o.customShadows.z2,
+                borderTop: "1.5px solid",
+                borderColor: o.palette.state.borderTop,
                 borderRadius: "4px",
+                [o.breakpoints.down("sm")]: {
+                  backgroundColor: o.palette.background.default,
+                  boxShadow: o.customShadows.z1
+                },
+                "&:hover": {
+                  background: o.palette.state.active12
+                },
                 "& .M4LAreasAdmin-areaChipRoot ": {
                   margin: "0px",
                   borderRadius: "4px 0px 0px 4px",
                   overflow: "hidden",
-                  width: "100%"
+                  width: "100%",
+                  position: "relative",
+                  [o.breakpoints.down("sm")]: {
+                    background: "none",
+                    border: "none",
+                    boxShadow: "none"
+                  }
+                },
+                "& .M4LAreasAdmin-selected .": {
+                  [o.breakpoints.down("sm")]: {
+                    background: "none"
+                  }
                 }
               },
               "& .M4LAreasAdmin-areaChipMobileIconContainer": {
                 display: "flex",
                 width: "fit-content",
-                alignItems: "center",
-                borderRadius: "0px 4px 4px 0px",
-                background: o.palette.state.active,
+                borderRadius: "0px 0px 0px 0px",
+                boxShadow: o.customShadows.z2,
                 ...o.typography.body,
                 color: o.palette.text.primary,
                 "& .M4LIconButton-root": {
-                  backgroundColor: `${o.palette.state.active}!important`,
-                  borderLeft: "1px solid",
-                  borderColor: o.palette.patronus?.marbleLight[10],
-                  borderRadius: "0px",
-                  "& .M4LIcon-icon": {
-                    backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
-                  }
+                  background: "transparent",
+                  backgroundColor: "transparent",
+                  "& .M4LIcon-icon": {}
                 }
               },
               "& .MuiBox-root": {
@@ -1658,6 +1781,12 @@ const i = (o) => ({
                 border: "1px solid",
                 borderColor: o.palette.state.default,
                 background: o.palette.state.default,
+                [o.breakpoints.down("sm")]: {
+                  background: "none",
+                  border: "none",
+                  borderColor: "none",
+                  boxShadow: "none"
+                },
                 "& .M4LAreasAdmin-areaContainerChipEditButton": {
                   display: "flex",
                   width: "fit-content"
@@ -1671,7 +1800,8 @@ const i = (o) => ({
                   color: o.palette.text.primary,
                   height: "22px",
                   [o.breakpoints.down("sm")]: {
-                    height: "auto"
+                    height: "auto",
+                    background: "none"
                   },
                   "& .M4LAreasAdmin-areaChipTitle": {
                     backgroundColor: "transparent",
@@ -1688,12 +1818,19 @@ const i = (o) => ({
                       textOverflow: "ellipsis",
                       overflow: "hidden",
                       whiteSpace: "nowrap",
-                      flex: "1"
+                      flex: "1",
+                      color: o.palette.text.primary
                     }
                   },
                   "& .M4LIconButton-root": {
+                    [o.breakpoints.down("sm")]: {
+                      color: o.palette.text.primary
+                    },
                     "& .M4LIcon-icon": {
-                      backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
+                      backgroundColor: `${o.palette.patronus?.marbleLight[10]}`,
+                      [o.breakpoints.down("sm")]: {
+                        color: o.palette.text.primary
+                      }
                     }
                   }
                 },
@@ -1712,8 +1849,14 @@ const i = (o) => ({
                   justifyContent: "center",
                   width: "20px",
                   height: "20px",
+                  [o.breakpoints.down("sm")]: {
+                    color: o.palette.text.primary
+                  },
                   "&.M4LIconButton-variantPrimary": {
-                    background: o.palette.state.active
+                    background: o.palette.state.active,
+                    [o.breakpoints.down("sm")]: {
+                      color: o.palette.text.primary
+                    }
                   }
                 }
               }
@@ -1723,12 +1866,15 @@ const i = (o) => ({
         "& .M4LAreasAdmin-areasAddButton": {
           backgroundColor: `${o.palette.state.active}!important`,
           "& .M4LIcon-icon": {
-            backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
+            backgroundColor: `${o.palette.patronus?.marbleLight[10]}`,
+            [o.breakpoints.down("sm")]: {
+              color: o.palette.text.primary
+            }
           }
         },
         "&.M4LAreasAdmin-isMobile": {
           overflow: "hidden",
-          boxShadow: "none",
+          boxShadow: o.customShadows.z1,
           width: "100%",
           "& .M4LAreasAdmin-areaContainerChips": {
             width: "100%",
@@ -1744,7 +1890,7 @@ const i = (o) => ({
     styleOverrides: {
       "&.M4LAreasAdmin-areaEditPopover": {
         "& .MuiPaper-root": {
-          width: "100%"
+          width: "200px"
         }
       }
     }
@@ -1755,8 +1901,10 @@ const i = (o) => ({
         "& .MuiPaper-root": {
           "& .M4LButton-root": {
             marginTop: "8px",
+            borderRadius: "4px",
             "& .MuiButtonBase-root": {
-              textWrap: "nowrap"
+              textWrap: "nowrap",
+              borderRadius: "4px"
             }
           }
         }
@@ -1770,7 +1918,7 @@ const i = (o) => ({
       }
     }
   }
-}), f = (o) => ({
+}), w = (o) => ({
   M4LAreasViewer: {
     styleOverrides: {
       "&.M4LAreasViewer-root": {
@@ -1778,7 +1926,7 @@ const i = (o) => ({
         background: o.palette.background.background,
         "& .M4LAreasViewer-areaGridLayout": {
           "& .M4LAreasViewer-windowRoot": {
-            background: o.palette.background.neutral,
+            background: o.palette.state.default,
             border: "none",
             boxShadow: o.customShadows.z2,
             borderRadius: "4px",
@@ -1952,7 +2100,7 @@ const i = (o) => ({
               }
             },
             "& .M4LAreasViewer-windowContent": {
-              margin: "8px",
+              margin: "8px 6px 6px 6px",
               background: "none",
               borderRadius: "4px",
               display: "flex",
@@ -1964,6 +2112,7 @@ const i = (o) => ({
               border: "1px solid",
               borderColor: o.palette.state.active,
               boxShadow: o.customShadows.primary,
+              backdropFilter: "blur(100px)",
               "& .M4LAreasViewer-windowHeader": {
                 display: "flex",
                 flexDirection: "column",
@@ -1993,8 +2142,6 @@ const i = (o) => ({
                   }
                 },
                 "& .MuiButtonBase-root:hover": {
-                  background: o.palette.state.default,
-                  color: o.palette.state.hover,
                   "& .M4LIcon-icon": {
                     backgroundColor: o.palette.state.hover
                   }
@@ -2002,13 +2149,30 @@ const i = (o) => ({
               }
             }
           },
+          "&.M4LGridLayout-root .M4LGridLayout-maximizeMe ": {
+            "& .M4LAreasViewer-selectedWindow": {
+              border: "1px solid",
+              borderColor: o.palette.state.active12,
+              boxShadow: o.customShadows.z2
+            }
+          },
+          "&. M4LGridLayout-colapsed ": {
+            "& .M4LAreasViewer-windowRoot": {
+              border: "1px solid",
+              borderColor: o.palette.state.overdefoult,
+              boxShadow: o.customShadows.z1
+            }
+          },
+          "&. react-draggable": {
+            background: o.palette.state.active12
+          },
           "& .M4LAreasViewer-windowPopupRoot": {
             boxShadow: o.customShadows.z3,
             padding: "4px",
             background: o.palette.state.default,
             borderRadius: "4px",
             border: "1px solid",
-            borderColor: o.palette.state.default,
+            borderColor: o.palette.text.disabled,
             backdropFilter: "blur(8px)",
             "& .M4LIcon-root.custom-handle": {
               "& .M4LIcon-icon": {
@@ -2032,6 +2196,10 @@ const i = (o) => ({
                 background: o.palette.state.default,
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
+                    width: "18px",
+                    height: "18px",
+                    minWidth: "18px",
+                    minHeight: "18px",
                     backgroundColor: o.palette.text.secondary
                   }
                 },
@@ -2317,7 +2485,7 @@ const i = (o) => ({
       }
     }
   }
-}), w = (o) => ({
+}), f = (o) => ({
   M4LAppBar: {
     styleOverrides: {
       "&.M4LAppBar-root": {
@@ -2328,10 +2496,8 @@ const i = (o) => ({
         alignItems: "center",
         borderRadius: "6px",
         padding: "4px 8px 4px 8px",
-        borderTop: "1.5px solid",
         borderColor: o.palette.state.borderTop,
         background: o.palette.background.neutral,
-        boxShadow: o.customShadows.z2,
         justifyContent: "space-between",
         marginLeft: "4px",
         [o.breakpoints.down("sm")]: {
@@ -2385,8 +2551,7 @@ const i = (o) => ({
             background: "none",
             boxShadow: "none",
             paddingRight: "0px",
-            borderRadius: "6px",
-            overflow: "hidden"
+            borderRadius: "6px"
           },
           "& .M4LAppBar-containerChilds": {
             display: "flex",
@@ -2431,13 +2596,21 @@ const i = (o) => ({
           width: "36px",
           height: "36px",
           borderRadius: "4px",
-          background: o.palette.patronus?.blazeOrange[40]
+          padding: "4px",
+          background: o.palette.background.default,
+          color: o.palette.state.active,
+          boxShadow: o.customShadows.z2,
+          borderTop: "1.5px solid",
+          borderColor: o.palette.state.borderTop,
+          [o.breakpoints.down("sm")]: {
+            boxShadow: o.customShadows.z1
+          }
         },
         test: "root"
       }
     }
   }
-}), v = (o) => ({
+}), k = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -2448,55 +2621,119 @@ const i = (o) => ({
   M4LAccountPopoverPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-popover": {
-        test: "root",
         display: "flex",
         flexDirection: "column",
-        gap: "8px",
+        gap: "0px",
         borderRadius: "6px",
         "& .MuiPaper-root": {
           display: "flex",
           flexDirection: "column",
-          gap: "8px",
-          padding: "8px",
+          gap: "0px",
+          padding: "12px",
           borderRadius: "6px",
           boxShadow: o.customShadows.z3,
-          background: o.palette.background.background
-        },
-        "& .M4LAccountPopover-containerAppVersion": {
-          display: "flex",
-          borderBottom: "2px solid",
-          borderColor: o.palette.state.default,
-          padding: "4px 4px 8px 4px"
-        },
-        "& .M4LAccountPopover-containerMenuItems": {
-          "& .M4LAccountPopover-menuItem": {
+          background: o.palette.background.default,
+          "& .M4LAccountPopover-containerUserInfo": {
+            display: "flex",
+            flexDirection: "column",
+            "& .M4LAccountPopover-containerUserName": {
+              display: "flex",
+              flexDirection: "row",
+              gap: "4px",
+              padding: "0px 10px",
+              "& .M4LAccountPopover-labelUserName": {
+                color: o.palette.text.primary,
+                ...o.typography.paragraphDens,
+                padding: "4px"
+              }
+            },
+            "& .M4LAccountPopover-containerUserEmail": {
+              display: "flex",
+              flexDirection: "row",
+              gap: "4px",
+              padding: "0px 10px",
+              "& .M4LAccountPopover-labelUserEmail": {
+                color: o.palette.text.primary,
+                ...o.typography.paragraph,
+                padding: "4px"
+              }
+            }
+          },
+          "& .M4LAccountPopover-containerAppVersion": {
+            display: "flex",
+            flexDirection: "row",
+            gap: "4px",
+            padding: "0px 10px",
+            "& .M4LAccountPopover-labelVersion": {
+              color: o.palette.text.secondary,
+              ...o.typography.paragraph,
+              padding: "4px"
+            }
+          },
+          "& .M4LAccountPopover-containerMenuItems": {
+            borderTop: "2px solid",
+            borderBottom: "2px solid",
+            borderColor: o.palette.state.overdefoult,
             padding: "4px",
-            borderRadius: "4px",
+            margin: "12px 0 12px 0",
+            display: "flex",
+            flexDirection: "row",
+            gap: "4px",
+            "& .M4LAccountPopover-containerSetting": {
+              display: "flex",
+              flexDirection: "row",
+              gap: "4px",
+              width: "100%",
+              borderRadius: "4px",
+              padding: "0px 8px",
+              "&:hover": {
+                background: o.palette.state.default
+              },
+              "& .M4LAccountPopover-menuItem": {
+                padding: "4px",
+                borderRadius: "4px",
+                cursor: "pointer"
+              }
+            }
+          },
+          "& .M4LAccountPopover-logOut": {
+            justifyContent: "center",
             cursor: "pointer",
+            color: o.palette.text.primary,
+            ...o.typography.paragraph,
+            padding: "4px",
+            borderRadius: "4px",
             "&:hover": {
               background: o.palette.state.default
             }
+          },
+          "& .M4LPopover-arrowStyle": {
+            display: "none",
+            "& .M4LAccountPopover-containerUserInfo": {
+              display: "flex",
+              "& .M4LAccountPopover-containerUserName": {
+                display: "flex",
+                flexDirection: "row",
+                gap: "4px"
+              },
+              "& .M4LAccountPopover-containerUserEmail": {
+                display: "flex",
+                flexDirection: "row",
+                gap: "4px"
+              },
+              "& .M4LAccountPopover-containerAppVersion": {
+                display: "flex",
+                flexDirection: "row",
+                gap: "4px"
+              },
+              "& .M4LAccountPopover-logOut": {}
+            }
           }
-        },
-        "& .M4LAccountPopover-logOut": {
-          borderTop: "2px solid",
-          borderColor: o.palette.state.default,
-          justifyContent: "center",
-          paddingTop: "8px",
-          cursor: "pointer",
-          padding: "4px",
-          borderRadius: "4px",
-          "&:hover": {
-            background: o.palette.state.default
-          }
-        },
-        "& .M4LPopover-arrowStyle": {
-          display: "none"
         }
       }
     }
   }
-}), k = (o) => ({
+}), v = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -2507,10 +2744,7 @@ const i = (o) => ({
           display: "flex",
           width: "100%",
           height: "100%",
-          boxShadow: o.customShadows.z2,
-          background: o.palette.background.neutral,
-          border: "1px solid",
-          borderColor: o.palette.state.default,
+          boxShadow: o.customShadows.z1,
           borderRadius: "6px"
         }
       }
@@ -2529,21 +2763,19 @@ const i = (o) => ({
           width: "100%",
           height: "100%",
           boxShadow: "none",
-          background: o.palette.background.neutral,
+          background: "none",
           border: "0px",
           borderColor: "transparent",
           borderRadius: "6px",
           overFlow: "visible"
         },
         "& .M4LSplitLayout-secondPart": {
-          background: o.palette.background.default,
           borderRadius: "6px",
-          padding: "8px"
+          padding: "0"
         },
         "& .layout-pane-primary": {
-          background: o.palette.background.default,
           borderRadius: "6px",
-          padding: "8px"
+          padding: "0"
         }
       }
     }
@@ -2583,7 +2815,7 @@ const i = (o) => ({
           boxSizing: "border-box",
           backgroundClip: "padding-box",
           width: "8px",
-          margin: "0 2px",
+          margin: "0 0.5px",
           borderLeft: "4px solid hsla(0, 0%, 5%, 0)",
           borderRight: "4px solid hsla(0, 0%, 5%, 0)",
           cursor: "col-resize",
@@ -2596,7 +2828,7 @@ const i = (o) => ({
           width: "4px",
           top: "calc(50% - 22.5px)",
           position: "absolute",
-          background: o.palette.text.disabled,
+          background: o.palette.state.active,
           borderRadius: "1px"
         },
         "& .splitter-layout > .layout-splitter:hover": {
@@ -2611,7 +2843,7 @@ const i = (o) => ({
         "& .splitter-layout.splitter-layout-vertical > .layout-splitter": {
           height: "8px !important",
           width: "100% !important",
-          margin: "2px 0",
+          margin: "4px 0",
           borderTop: "4px solid hsla(0, 0%, 2%, 0)",
           borderBottom: "4px solid hsla(0, 0%, 2%, 0)",
           cursor: "row-resize"
@@ -2621,11 +2853,11 @@ const i = (o) => ({
           height: "4px !important",
           left: "calc(50% - 22.5px)",
           top: "unset",
-          background: o.palette.text.disabled,
+          background: o.palette.state.active,
           borderRadius: "2px"
         },
         "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
-          background: o.palette.primary.main
+          background: o.palette.state.focus
         },
         "& .splitter-layout.splitter-layout-vertical": {
           flexDirection: "column"
@@ -2718,6 +2950,7 @@ const i = (o) => ({
     styleOverrides: {
       "&.M4LTab-root": {
         width: "fit-content",
+        borderRadius: "4px",
         "& .MuiButtonBase-root": {
           borderRadius: "4px",
           display: "flex",
@@ -2747,37 +2980,37 @@ const i = (o) => ({
           background: o.palette.state.active12,
           border: "1px solid",
           borderColor: o.palette.state.active12,
-          boxShadow: o.customShadows.z2,
           ...o.typography.bodyDens,
           color: o.palette.text.primary,
           lineHeight: "none",
           "&::before": {
             content: '""',
-            width: "3px",
-            height: "16px",
-            left: "0px",
+            width: "95%",
+            height: "2px",
+            left: "1.5px",
+            bottom: "0px",
             backgroundColor: o.palette.state.active,
-            borderRadius: "0px 2px 2px 0px",
+            borderRadius: "2px 2px 0px 0px",
             position: "absolute"
           }
         }
       }
     }
   }
-}), T = (o) => ({
+}), m = (o) => ({
   M4LAccordion: {
     styleOverrides: {
       "&.M4LAccordion-root": {
         width: "100%",
         background: o.palette.background.default,
         boxShadow: o.customShadows.z2,
-        borderTop: "1px solid",
-        borderColor: o.palette.state.default,
+        borderTop: "1.5px solid",
+        borderColor: o.palette.state.borderTop,
         borderRadius: "4px",
         "& .M4LTypography-root": {
           "& .MuiTypography-root": {
             ...o.typography.bodyDens,
-            color: o.palette.text.disabled
+            color: o.palette.text.secondary
           }
         },
         "& .MuiPaper-root": {
@@ -2785,6 +3018,7 @@ const i = (o) => ({
         }
       },
       "& .MuiButtonBase-root": {
+        padding: "4px 8px 4px 8px",
         "&.MuiAccordionSummary-root.Mui-expanded": {
           background: o.palette.state.active12,
           "& .M4LTypography-root": {
@@ -2816,7 +3050,7 @@ const i = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), T = (o) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -2827,13 +3061,12 @@ const i = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), D = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
         border: "solid 1px",
-        borderColor: o.palette.state.borderDefault,
-        boxShadow: o.customShadows.z2,
+        borderColor: o.palette.state.overdefoult,
         display: "flex",
         width: "100%",
         gap: "2px",
@@ -2850,14 +3083,15 @@ const i = (o) => ({
           width: "100%",
           borderRadius: "2px",
           border: "solid 1px",
-          borderColor: o.palette.state.borderDefault,
+          borderColor: o.palette.state.overdefoult,
           padding: "0px 0px 0px 8px"
         },
         "& .M4LPeriod-containerDateValue": {
+          display: "flex",
           width: "100%",
           borderRadius: "2px",
           border: "solid 1px",
-          borderColor: o.palette.state.borderDefault,
+          borderColor: o.palette.state.overdefoult,
           padding: "0px 0px 0px 8px"
         },
         "&:not(.M4LPeriod-stateReadOnly).M4LPeriod-variantMonoperiod": {
@@ -2866,17 +3100,26 @@ const i = (o) => ({
             width: "100%",
             borderRadius: "2px",
             borderColor: o.palette.state.borderDefault,
+            "& .MuiFormControl-root": {
+              width: "100%",
+              border: "solid 1px",
+              borderColor: o.palette.state.overdefoult
+            },
             "& .MuiInputBase-root": {
+              width: "100%",
               borderRadius: "2px",
               paddingLeft: "4px",
-              background: "transparent"
+              background: "transparent",
+              "& .MuiInputBase-input": {
+                padding: "0px"
+              }
             }
           },
           "& .MuiTextField-root": {
             width: "100%",
             borderRadius: "2px",
             border: "solid 1px",
-            borderColor: o.palette.state.borderDefault,
+            borderColor: o.palette.state.overdefoult,
             "& .MuiInputBase-root": {
               borderRadius: "2px",
               paddingLeft: "4px",
@@ -2888,9 +3131,11 @@ const i = (o) => ({
               borderColor: o.palette.state.active
             },
             "& .MuiInputBase-root:hover": {
+              height: "100%",
               borderRadius: "2px",
               paddingLeft: "4px",
-              background: o.palette.state.active12
+              background: o.palette.state.active12,
+              padding: "0px 0px 0px 4px"
             }
           },
           "&:hover": {
@@ -2909,11 +3154,13 @@ const i = (o) => ({
             boxShadow: o.customShadows.z2
           },
           "& .MuiTextField-root:hover": {
+            width: "100%",
             background: "transparent",
             "& .MuiInputBase-root:hover": {
               borderRadius: "2px",
               paddingLeft: "4px",
-              background: "transparent"
+              background: "transparent",
+              height: "100%"
             }
           }
         },
@@ -2971,7 +3218,7 @@ const i = (o) => ({
       }
     }
   }
-}), z = (o) => ({
+}), P = (o) => ({
   M4LModalDialog: {
     styleOverrides: {
       "&.M4LModal-root": {
@@ -2979,14 +3226,19 @@ const i = (o) => ({
         "& .MuiPaper-root": {
           display: "flex",
           flexDirection: "column",
-          height: "fit-content",
           overflow: "hidden",
-          width: "fit-content",
           borderRadius: "4px",
-          minHeight: "fit-content",
-          minWidth: "fit-content",
           margin: "0px",
           background: "transparent",
+          width: "auto",
+          height: "auto",
+          maxWidth: "unset",
+          maxHeight: "unset",
+          [o.breakpoints.down("sm")]: {
+            width: "100%",
+            height: "100%",
+            maxHeight: "100%"
+          },
           "& .M4LModal-windowBaseRoot": {
             display: "flex",
             flexDirection: "column",
@@ -3094,7 +3346,7 @@ const i = (o) => ({
       }
     }
   }
-}), P = (o) => ({
+}), z = (o) => ({
   M4LPaperForm: {
     styleOverrides: {
       "&.M4LPaperForm-root": {
@@ -3172,32 +3424,60 @@ const i = (o) => ({
   M4LDataGrid: {
     styleOverrides: {
       "&.M4LDataGrid-root": {
-        test: "root",
+        background: o.palette.background.default,
+        boxShadow: o.customShadows.z2,
+        borderRadius: "4px",
+        padding: "4px",
+        display: "flex",
+        position: "relative",
+        flexDirection: "column",
+        gap: "4px",
+        height: "100%",
+        borderTop: "1.5",
+        borderColor: o.palette.state.borderTop,
+        width: "100%",
         "& .M4LDataGrid-actions": {
-          ...o.typography.caption,
-          position: "absolute",
+          ...o.typography.body,
           left: "0px",
           right: "0px",
           top: "0px",
-          height: o.spacing(5.5),
-          padding: 0,
+          padding: "8px",
           display: "flex",
           flexDirection: "row",
+          borderRadius: "4px",
           alignItems: "center",
-          justifyContent: "flex-end",
-          [o.breakpoints.up("sm")]: {
-            padding: o.spacing(0, 1.5)
+          justifyContent: "space-between",
+          background: o.palette.background.default,
+          position: "absolute",
+          gap: "8px",
+          "& .M4LDataGrid-actionsConfigContainer": {
+            display: "flex",
+            flexDirection: "row",
+            gap: "8px",
+            marginLeft: "12px",
+            "& .M4LIconButton-root": {
+              background: o.palette.state.default,
+              boxShadow: o.customShadows.z1,
+              borderTop: "1.5px solid",
+              borderColor: o.palette.state.borderTop
+            }
           },
           "& .M4LDataGrid-rowsCount": {
             display: "flex",
-            "& .M4LDataGrid-rowsCountLabel": {},
+            gap: "8px",
+            alignItems: "center",
+            "& .M4LDataGrid-rowsCountLabel": {
+              ...o.typography.body,
+              color: o.palette.text.primary,
+              heigth: "100%"
+            },
             "& .M4LDataGrid-rowsCountValue": {
-              marginLeft: o.spacing(2),
-              paddingTop: "2px",
+              paddingTop: "4px",
               paddingBottom: "2px",
               paddingLeft: "4px",
-              paddingRight: "4px",
-              border: `1px solid ${o.palette.divider}`
+              paddingRight: "6px",
+              background: o.palette.state.overdefoult,
+              borderRadius: "4px"
             }
           },
           "& .M4LDataGrid-actionFilter": {},
@@ -3212,31 +3492,43 @@ const i = (o) => ({
           left: "0px",
           right: "0px",
           overflow: "hidden",
+          borderRadius: "4px",
+          border: "none",
+          boxshadow: o.customShadows.z2,
+          background: o.palette.background.default,
+          padding: "4px",
+          [o.breakpoints.down("sm")]: {
+            top: "54px"
+          },
           "& .M4LDataGrid-wrapperDataGridCss": {
-            position: "absolute",
-            bottom: "0px",
-            top: "0px",
-            left: "0px",
-            right: "0px",
+            position: "relative",
+            height: "100%",
+            overflow: "hidden",
             "& .rdg ": {
+              border: "none",
+              background: o.palette.background.default,
+              gridColumnGap: "0px",
+              gridRowGap: "0px",
               userSelect: "initial",
               height: "100%",
               contentVisibility: "unset",
-              overflow: "scroll",
-              borderRadius: "5px",
+              overflow: "auto",
+              borderRadius: "4px",
+              padding: "0px",
+              borderColor: "none",
               "--rdg-grid-inline-size": "0px",
-              "--rdg-header-background-color": o.palette.grid?.sectionHeader,
-              "--rdg-row-selected-background-color": o.palette.state.hover,
-              "--rdg-row-hover-background-color": o.palette.grid?.rowHover,
+              "--rdg-header-background-color": o.palette.background.background,
+              "--rdg-row-selected-background-color": "#D9E9FC",
+              "--rdg-row-hover-background-color": "#D9E9FC",
               "--rdg-background-color": o.palette.background.default,
-              "--rdg-selection-color": o.palette.primary.main,
-              "--row-selected-hover-background-color": o.palette.mode === "light" ? o.palette.primary.LightSelectedHover : o.palette.primary.DarkSelectedHover,
+              "--rdg-selection-color": o.palette.state.active,
+              "--row-selected-hover-background-color": (o.palette.mode === "light", o.palette.state.toneOp),
               "--rdg-checkbox-color": o.palette.primary.main,
               "--rdg-checkbox-focus-color": t(
                 o.palette.primary.main,
                 o.palette.action.selectedOpacity
               ),
-              "--rdg-border-color": o.palette.divider
+              "--rdg-border-color": "none"
             },
             "& .rdg::-webkit-scrollbar": {
               width: "6px",
@@ -3260,34 +3552,63 @@ const i = (o) => ({
               justifyContent: "center",
               alignItems: "center"
             },
+            "& .rdg-row": {
+              '&[aria-selected="false"] .rdg-cell': {
+                backgroundColor: o.palette.background.default
+              },
+              "&:nth-of-type(odd)": {
+                "& .rdg-cell": {
+                  backgroundColor: o.palette.background.neutral
+                }
+              },
+              '&[aria-selected="true"] .rdg-cell': {
+                backgroundColor: o.palette.state.toneOp
+              },
+              "&:hover": {
+                "& .rdg-cell": {
+                  backgroundColor: `${o.palette.state.toneOp}!important`
+                }
+              },
+              backgroundColor: "transparent"
+            },
             "& .rdg-cell": {
               fontFamily: o.typography.body2.fontFamily,
               fontWeight: o.typography.body2.fontWeight,
               fontSize: o.typography.body2.fontSize,
               color: o.palette.text.secondary,
-              borderBottom: `1px solid ${o.palette.divider}`,
-              borderRight: "0px solid transparent",
-              position: "relative",
+              borderBottom: "0px solid transparent",
+              borderRight: "0.5px solid transparent",
+              borderColor: o.palette.background.background,
+              display: "inline",
+              justifyContent: "center",
+              alignItems: "center",
+              textOverflow: "inline",
+              gridTemplateColumns: "auto",
               "&.rdg-cell-frozen": {
-                position: "sticky"
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
               },
               "&:after": {
                 content: '""',
-                borderRight: `1px solid ${o.palette.divider}`,
+                borderRight: `0px solid ${o.palette.divider}`,
                 position: "absolute",
                 right: "0px",
-                top: "25%",
-                bottom: "25%"
+                height: "100%"
               },
               "& .m4l_icon": {
                 height: "100%"
               }
             },
             "& [aria-selected=true]": {
-              backgroundColor: o.palette.state.active
+              backgroundColor: o.palette.state.toneOp,
+              color: o.palette.text.primary
             },
             "& .rdg-cell.rdg-cell-align-left": {
-              textAlign: "left"
+              textAlign: "center",
+              display: "inline",
+              justifyContent: "center",
+              alignItems: "center"
             },
             "& .rdg-cell.rdg-cell-align-center": {
               textAlign: "center"
@@ -3300,18 +3621,24 @@ const i = (o) => ({
               boxShadow: "none"
             },
             "& .rdg-row :last-child:after": {
-              borderRight: "0px solid transparent"
+              borderRight: "0px solid",
+              borderColor: o.palette.background.neutral
             },
             "& .rdg-header-row .rdg-cell": {
-              fontFamily: o.typography.subtitle2.fontFamily,
-              fontWeight: o.typography.subtitle2.fontWeight,
-              fontSize: o.typography.subtitle2.fontSize,
+              fontFamily: o.typography.subtitle,
+              fontWeight: o.typography.subtitle,
+              fontSize: o.typography.subtitle,
               color: o.palette.text.primary,
-              borderRight: "0px solid transparent",
+              borderRight: "0.52px solid",
+              borderColor: o.palette.background.default,
               boxShadow: "none",
+              gridTemplateColumns: "auto",
               "&.rdg-cell-frozen-last": {
+                borderRight: "0px solid",
+                borderColor: o.palette.background.default,
                 "&:after": {
-                  borderRight: "0px solid transparent"
+                  borderRight: "1.5px solid",
+                  borderColor: o.palette.background.neutral
                 },
                 boxShadow: "var(--rdg-frozen-cell-box-shadow)"
               },
@@ -3321,14 +3648,14 @@ const i = (o) => ({
               }
             },
             "& .rdg-header-row :last-child.rdg-cell": {
-              borderTopRightRadius: "5px",
+              borderTopRightRadius: "4px",
               "&:after": {
                 borderRight: "0px solid transparent"
               }
             },
             "& .filter_cell_div": {
-              paddingLeft: o.spacing(0.5),
-              paddingRight: o.spacing(0.5)
+              paddingLeft: "8px",
+              paddingRight: "8px"
             },
             "& .rdg-header-sort-cell": {
               width: "100%",
@@ -3361,11 +3688,63 @@ const i = (o) => ({
       }
     }
   }
-}), H = (o) => ({
+}), W = (o) => ({
   M4LPager: {
     styleOverrides: {
       "&.M4LPager-root": {
         test: "root",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "12px",
+        whiteSpace: "nowrap",
+        "& .M4LPager-pagerActions": {
+          display: "flex",
+          padding: "2px",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "2px",
+          width: "fit-content",
+          background: o.palette.state.default,
+          boxShadow: o.customShadows.z1,
+          borderRadius: "4px",
+          borderTop: "1.5px solid",
+          borderColor: o.palette.state.borderTop,
+          [o.breakpoints.down("sm")]: {
+            gap: "4px",
+            padding: "4px"
+          },
+          "& .M4LIconButton-root": {
+            width: "20px",
+            height: "20px",
+            minWidth: "20px",
+            minHeight: "20px",
+            [o.breakpoints.down("sm")]: {
+              width: "28px",
+              height: "28px",
+              minWidth: "28px",
+              minHeight: "28px"
+            }
+          }
+        },
+        "& .M4LPager-labelRowsPerPageContainer": {
+          display: "flex",
+          flexDirection: "row",
+          gap: "8px",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        "& .MuiInputBase-root": {
+          padding: "4px 2px 4px 6px",
+          borderRadius: "4px",
+          background: o.palette.background.background,
+          overflow: "hidden",
+          minWidth: "fit-content",
+          "& .MuiSvgIcon-root": {
+            background: o.palette.state.default
+          }
+        },
         "& .M4LPager-skeletonRoot": {
           width: "100%",
           display: "flex",
@@ -3392,8 +3771,15 @@ const i = (o) => ({
         }
       }
     }
+  },
+  M4LPagerMenuPopover: {
+    styleOverrides: {
+      "&.M4LPager-selectMenuPopover": {
+        test: "root"
+      }
+    }
   }
-}), W = (o) => ({
+}), H = (o) => ({
   M4LCheckBox: {
     styleOverrides: {
       "&.M4LCheckBox-root": {
@@ -3451,16 +3837,16 @@ const i = (o) => ({
 });
 export {
   A,
-  T as B,
-  m as C,
-  z as D,
-  P as E,
+  m as B,
+  D as C,
+  P as D,
+  z as E,
   F,
-  H as G,
-  W as H,
+  W as G,
+  H,
   b as M,
   i as a,
-  D as b,
+  T as b,
   n as c,
   p as d,
   d as e,
@@ -3474,12 +3860,12 @@ export {
   x as m,
   g as n,
   y as o,
-  w as p,
+  f as p,
   L as q,
-  f as r,
+  w as r,
   h as s,
-  v as t,
-  k as u,
+  k as t,
+  v as u,
   C as v,
   I as w,
   B as x,