@m4l/styles 0.0.34 → 0.0.36

package/theme/overrides/M4LExtendedComponents/{index.e406c71f.js → index.bb252f51.js}

@@ -1,7 +1,11 @@
 import { alpha as e } from "@mui/material/styles";
 import { alpha as t } from "@mui/system";
+import "../../defaultThemeOptions.5e505df7.js";
+import "../../shadows.479d005a.js";
 import { P as r } from "../../palette.1b577d8c.js";
-const p = (o) => ({
+import "../../typography.927a0f62.js";
+import "@mui/material";
+const c = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {
       "&.M4LDynamicFilter-root": {
@@ -10,8 +14,8 @@ const p = (o) => ({
         padding: "0px",
         border: "1px solid",
         borderColor: o.palette.state.borderPrimary,
-        minHeight: "36px",
-        height: "36px",
+        minHeight: "32px",
+        height: "32px",
         [o.breakpoints.down("sm")]: {
           minHeight: "auto",
           height: "auto"
@@ -119,7 +123,7 @@ const p = (o) => ({
             },
             "&:hover": {
               borderColor: o.palette.state.toneOp,
-              background: o.palette.state.overdefoult
+              background: o.palette.state.hoverDefault
             }
           }
         },
@@ -169,12 +173,12 @@ const p = (o) => ({
         "& .M4LDynamicFilter-popoverMenuFieldsPaper": {
           display: "flex",
           flexDirection: "column",
-          padding: "4px",
+          padding: "8px",
           gap: "4px",
           borderRadius: "6px",
           "& .M4LDynamicFilter-popoverMenuFieldsItem": {
-            paddingLeft: "8px",
-            paddingRight: "12px",
+            paddingLeft: "4px",
+            paddingRight: "4px",
             borderRadius: "4px",
             "& .M4LDynamicFilter-classespopoverLabelMemuItem": {
               ...o.typography.body,
@@ -188,6 +192,10 @@ const p = (o) => ({
               padding: "4px 12px 4px 8px",
               boxShadow: o.customShadows.z2
             }
+          },
+          [o.breakpoints.down("md")]: {
+            padding: "12px",
+            gap: "4px"
           }
         }
       }
@@ -200,7 +208,8 @@ const p = (o) => ({
         "& .M4LDynamicFilter-popoverFilterPaper": {
           padding: "0px",
           minWidth: "220px",
-          minHeight: "215px",
+          minHeight: "auto",
+          boxShadow: o.customShadows.z3,
           "& .M4LPopover-arrowStyle": {
             background: "none"
           },
@@ -210,17 +219,21 @@ const p = (o) => ({
             minWidth: "220px",
             height: "fit-content",
             "& .M4LDynamicFilter-popoverFilterHeader": {
-              background: o.palette.background.neutral,
+              background: o.palette.state.default,
               display: "flex",
               gap: "8px",
-              padding: "6px 8px 6px 8px",
+              padding: "4px 4px 4px 8px",
               borderTopLeftRadius: "4px",
               borderTopRightRadius: "4px",
-              boxShadow: "unset",
               borderBottom: "0px",
+              height: "28px",
+              "& .M4LIcon-root": {
+                "& .M4LIcon-icon": {}
+              },
               "& .MuiTypography-root": {
-                ...o.typography.bodyDens,
-                color: o.palette.text.primary
+                ...o.typography.paragraphDens,
+                color: o.palette.text.primary,
+                "& .MuiTypography-root": {}
               }
             },
             "& .M4LDynamicFilter-popoverContainerFields": {
@@ -233,20 +246,57 @@ const p = (o) => ({
                 display: "flex",
                 height: "auto",
                 flexDirection: "column",
-                padding: "8px 8px 0 8px",
-                gap: "8px",
-                [o.breakpoints.down("sm")]: {
-                  gap: "12px"
-                }
+                padding: "12px 12px 0 12px",
+                gap: "8px"
               }
             },
             "& .M4LCommonActions-root": {
               display: "flex",
               flexDirection: "row",
-              gap: "12px",
-              padding: "20px 8px 8px 0px",
+              gap: "16px",
+              padding: "16px 12px 12px 12px",
               ".M4LButton-root": {
-                width: "fit-content"
+                height: "24px"
+              }
+            }
+          }
+        },
+        [o.breakpoints.down("sm")]: {
+          "& .M4LDynamicFilter-popoverFilterPaper": {
+            "& .M4LRHFormProvider-root": {
+              "& .M4LDynamicFilter-popoverFilterHeader": {
+                height: "36px",
+                "& .M4LIcon-root": {
+                  "& .M4LIcon-icon": {}
+                },
+                "& .MuiTypography-root": {
+                  ...o.typography.paragraphDens,
+                  color: o.palette.text.primary,
+                  "& .MuiTypography-root": {}
+                }
+              },
+              "& .M4LDynamicFilter-popoverContainerFields": {
+                height: "fit-content",
+                [`& .M4LDynamicFilter-containerStringFilter,
+                                      & .M4LDynamicFilter-containerBooleanFilter,
+                                      & .M4LDynamicFilter-containerNumberFilter,
+                                      & .M4LDynamicFilter-containerDateTimeFilter
+                                    `]: {
+                  display: "flex",
+                  height: "auto",
+                  flexDirection: "column",
+                  padding: "16px 16px 0 16px",
+                  gap: "12px"
+                }
+              },
+              "& .M4LCommonActions-root": {
+                display: "flex",
+                flexDirection: "row",
+                gap: "16px",
+                padding: "24px 16px 16px 16px",
+                ".M4LButton-root": {
+                  height: "36px"
+                }
               }
             }
           }
@@ -254,7 +304,7 @@ const p = (o) => ({
       }
     }
   }
-}), d = (o) => ({
+}), g = (o) => ({
   M4LIcon: {
     styleOverrides: {
       ["&.M4LIcon-root"]: {
@@ -303,7 +353,7 @@ const p = (o) => ({
       }
     }
   }
-}), l = (o) => ({
+}), x = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
@@ -454,7 +504,7 @@ const p = (o) => ({
       }
     }
   }
-}), s = (o) => ({
+}), u = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {
@@ -475,7 +525,7 @@ const p = (o) => ({
       }
     }
   }
-}), c = (o) => ({
+}), b = (o) => ({
   M4LImageButton: {
     styleOverrides: {
       ["&.M4LImageButton-root"]: {
@@ -529,7 +579,7 @@ const p = (o) => ({
       }
     }
   }
-}), g = (o) => ({
+}), M = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
@@ -566,7 +616,7 @@ const p = (o) => ({
       }
     }
   }
-}), u = (o) => ({
+}), y = (o) => ({
   M4LPopover: {
     styleOverrides: {
       "&.M4LPopover-root": {
@@ -577,31 +627,40 @@ const p = (o) => ({
         ".MuiPaper-root": {
           background: o.palette.background.default,
           borderRadius: "6px",
-          padding: "12px",
-          boxShadow: o.customShadows.z3,
+          padding: "8px",
+          boxShadow: o.customShadows.z4,
           width: "auto",
           zIndex: "10000",
           "& .MuiButtonBase-root": {
             justifyContent: "normal !important",
-            gap: "8px"
+            gap: "12px",
+            minHeight: "24px",
+            padding: "2px 4px",
+            "& .M4LIcon-root": {
+              minHeight: "20px",
+              minWidth: "20px"
+            },
+            "& .M4LDynamicFilter-classespopoverLabelMemuItem": {
+              margin: "0px",
+              height: "100%"
+            }
           }
         },
         "& .M4LanguagePopover-containerItems": {
           "& :nth-of-type(-n + 1)": {
-            gap: "8px"
+            gap: "4px"
           },
           "& .M4LanguagePopover-labelItem": {
             ...o.typography.body,
             color: o.palette.text.secondary,
             borderRadius: "4px",
-            margin: "0",
-            paddingLeft: "4px"
+            margin: "0"
           },
           "& .MuiButtonBase-root": {
             margin: "0",
             borderRadius: "4px",
-            padding: "4px",
-            gap: "4px",
+            padding: "2px 4px",
+            gap: "12px",
             justifyContent: "normal !important"
           },
           "& .MuiButtonBase-root:hover": {
@@ -618,19 +677,28 @@ const p = (o) => ({
         },
         [o.breakpoints.down("md")]: {
           ".MuiPaper-root": {
-            padding: "16px",
-            gap: "16px !important",
+            padding: "12px",
+            gap: "4px",
             "& .MuiButtonBase-root": {
               justifyContent: "normal !important",
               gap: "16px",
+              minHeight: "36px",
+              "& .M4LIcon-root": {
+                minHeight: "28px",
+                minWidth: "28px",
+                "& .M4LIcon-icon": {
+                  minHeight: "20px",
+                  minWidth: "20px"
+                }
+              },
               "& .css-1qhcwcd": {
-                width: "28px !important",
-                height: "28px !important",
+                width: "20px",
+                height: "20px",
                 alignItems: "center",
                 justifyContent: "center",
                 "& .M4LImage-root": {
-                  width: "28px !important",
-                  height: "28px !important"
+                  width: "20px !important",
+                  height: "20px !important"
                 }
               }
             }
@@ -639,7 +707,7 @@ const p = (o) => ({
       }
     }
   }
-}), x = (o) => ({
+}), L = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
       ["&.M4LHelperText-root"]: {
@@ -658,7 +726,7 @@ const p = (o) => ({
       }
     }
   }
-}), b = (o) => ({
+}), h = (o) => ({
   M4LTypography: {
     styleOverrides: {
       ["&.M4LTypography-root"]: {
@@ -670,7 +738,7 @@ const p = (o) => ({
       }
     }
   }
-}), M = (o) => ({
+}), f = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
@@ -899,7 +967,7 @@ const p = (o) => ({
       }
     }
   }
-}), y = (o) => ({
+}), w = (o) => ({
   M4LNavLink: {
     styleOverrides: {
       ["&.M4LNavLink-root"]: {
@@ -919,7 +987,7 @@ const p = (o) => ({
       }
     }
   }
-}), L = (o) => ({
+}), v = (o) => ({
   M4LSideBar: {
     styleOverrides: {
       "&.M4LSideBar-root": {
@@ -936,23 +1004,46 @@ const p = (o) => ({
         },
         "&.M4LSideBar-collapsed": {
           "& .M4LSideBar-wrapperSideBar": {
-            width: "50px",
+            width: "48px",
+            transition: "width 0.1s ease",
             "& .M4LSideBar-contentDesktop": {
               "& .M4LSideBar-contentGroups": {
                 "& .M4LSideBar-itemListMainRoot": {
                   "& .M4LSideBar-navItemMainRoot": {
                     display: "flex",
-                    justifyContent: "center",
+                    justifyContent: "flex-start",
                     width: "100%",
+                    minHeight: "28px",
+                    alignItems: "center",
                     "& .M4LSideBar-navItemRootContent": {
                       padding: "0",
+                      minHeight: "28px",
+                      "::before": {
+                        height: "100%",
+                        width: "2px"
+                      },
                       "& .M4LSideBar-navItemRootContentIconTypo": {
                         width: "24px",
                         minHeight: "24px",
                         height: "24px",
                         minWidth: "24px",
                         margin: "1px 0 1px 8px",
-                        "& .M4LIcon-root": {}
+                        "& .M4LIcon-root": {
+                          paddingTop: "2px",
+                          minWidth: "20px",
+                          minHeight: "20px"
+                        }
+                      }
+                    }
+                  }
+                },
+                "& .M4LSideBar-itemMainActive": {
+                  "& .M4LSideBar-navItemMainRoot": {
+                    "& .M4LSideBar-navItemRootContent": {
+                      "& .M4LSideBar-navItemRootContentIconTypo": {
+                        "& .M4LIcon-root": {
+                          paddingTop: "0px"
+                        }
                       }
                     }
                   }
@@ -960,6 +1051,15 @@ const p = (o) => ({
               },
               "& .M4LSideBar-collapseButton": {
                 padding: "12px",
+                width: "100%",
+                "& .M4LSideBar-containerLogoButtonIcon": {
+                  "& .M4LIconButton-root": {
+                    "& .MuiButtonBase-root": {
+                      height: "24px",
+                      width: "24px"
+                    }
+                  }
+                },
                 "& .M4LSideBar-containerLogoButtonLogo": {
                   display: "none"
                 }
@@ -974,7 +1074,8 @@ const p = (o) => ({
         },
         "& .M4LSideBar-wrapperSideBar": {
           height: "100%",
-          width: "100%",
+          width: "219px",
+          transition: "width 0.1s ease",
           "& .M4LSideBar-containerSideBarLogo": {
             display: "flex",
             justifyContent: "flex-start",
@@ -1028,7 +1129,8 @@ const p = (o) => ({
                 gap: "8px"
               },
               "& .M4LSideBar-wrapperGroupTitle": {
-                height: "60px",
+                height: "28px",
+                padding: "0px 0px 0px 12px",
                 "& .M4LTypography-root": {
                   display: "flex",
                   width: "100%",
@@ -1037,20 +1139,38 @@ const p = (o) => ({
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                     textWrap: "nowrap",
-                    ...o.typography.bodyDens
+                    ...o.typography.paragraphDens,
+                    textTransform: "capitalize"
                   }
                 }
               },
               "& .M4LSideBar-itemListMainRoot": {
                 display: "flex",
                 borderRadius: "4px 0px 0px 4px",
-                justifyContent: "center",
+                justifyContent: "flex-start",
                 flexDirection: "column",
                 gap: "4px",
-                paddingBottom: "4px",
+                height: "auto",
+                marginBottom: "2px",
                 "& .M4LSideBar-navItemMainRoot": {
                   backgroundColor: "transparent",
                   borderRadius: "4px",
+                  "& .M4LSideBar-navItemRootContent": {
+                    "& .M4LSideBar-navItemRootContentIconTypo": {
+                      alignItems: "center",
+                      gap: "16px",
+                      "& .M4LIcon-icon": {
+                        minWidth: "20px",
+                        minHeight: "20px"
+                      },
+                      "& .M4LTypography-root": {
+                        "& .MuiTypography-root": {}
+                      },
+                      "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                        backgroundColor: o.palette.state.focus
+                      }
+                    }
+                  },
                   "&:hover": {
                     background: o.palette.state.default,
                     cursor: "pointer"
@@ -1058,7 +1178,7 @@ const p = (o) => ({
                 },
                 "&.M4LSideBar-itemMainActive": {
                   borderRadius: "4px",
-                  height: "26px",
+                  height: "auto",
                   "& .M4LSideBar-navItemMainRoot": {
                     background: o.palette.state.active12,
                     "&:hover": {
@@ -1067,7 +1187,9 @@ const p = (o) => ({
                     }
                   },
                   "& .M4LSideBar-navItemRootContent": {
+                    alignItems: "center",
                     "& .M4LSideBar-navItemRootContentIconTypo": {
+                      alignItems: "center",
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
                       },
@@ -1103,7 +1225,7 @@ const p = (o) => ({
                 },
                 "& .M4LSideBar-navItemRootContent": {
                   display: "flex",
-                  padding: "4px 8px 4px 12px",
+                  padding: "4px 8px 4px 8px",
                   justifyContent: "center",
                   borderRadius: "4px 0px 0px 4px",
                   position: "relative",
@@ -1166,9 +1288,10 @@ const p = (o) => ({
                     "& .M4LSideBar-subItemActive": {
                       "& .MuiButtonBase-root": {
                         "& .M4LIcon-root": {
-                          "& .M4LIcon-icon": {
-                            backgroundColor: `${o.palette.state.focus}!important`
-                          }
+                          "& .M4LIcon-icon": {}
+                        },
+                        "& .M4LTypography-root": {
+                          "& .MuiTypography-root": {}
                         }
                       },
                       "& .M4LSideBar-navSubItemContentBullet": {
@@ -1185,7 +1308,6 @@ const p = (o) => ({
                   "& .M4LSideBar-navSubItemContentRoot": {
                     gap: "12px",
                     margin: "0px 0px 0px 0px",
-                    padding: "16px",
                     "& .M4LSideBar-navSubItemContentBullet": {
                       minWidth: "5px",
                       minHeight: "5px",
@@ -1203,6 +1325,14 @@ const p = (o) => ({
                         textOverflow: "ellipsis",
                         textWrap: "nowrap"
                       }
+                    },
+                    "&.M4LSideBar-subItemActive.M4LSideBar-navSubItemContentRoot": {
+                      "& .M4LTypography-root": {
+                        color: o.palette.state.active,
+                        "& .MuiTypography-root": {
+                          color: o.palette.state.active
+                        }
+                      }
                     }
                   }
                 },
@@ -1224,7 +1354,7 @@ const p = (o) => ({
             gap: "24px",
             alignItems: "center",
             height: "48px",
-            width: "100%",
+            width: "240px",
             minHeight: "48px",
             flexDirection: "row-reverse",
             "& .M4LSideBar-containerLogoButton": {
@@ -1235,7 +1365,7 @@ const p = (o) => ({
             "& .M4LSideBar-containerLogoButtonLogo": {
               width: "120px",
               height: "24px",
-              display: "flex",
+              display: "none",
               alignItems: "center",
               background: o.palette.background.default,
               borderRadius: "4px"
@@ -1245,7 +1375,13 @@ const p = (o) => ({
               justifyContent: "center",
               alignItems: "center",
               width: "24px",
-              height: "24px"
+              height: "24px",
+              "& .M4LIconButton-root": {
+                "& .MuiButtonBase-root": {
+                  height: "24px",
+                  width: "24px"
+                }
+              }
             }
           }
         }
@@ -1338,6 +1474,7 @@ const p = (o) => ({
           height: "100%",
           display: "flex",
           flexDirection: "column",
+          paddingTop: "24px",
           "& .M4LSideBar-containerSideBarLogo": {
             display: "flex",
             justifyContent: "flex-start",
@@ -1387,9 +1524,10 @@ const p = (o) => ({
             },
             "& .M4LSideBar-wrapperGroup": {
               height: "100%",
-              paddingLeft: "10px",
+              padding: "0px 8px",
               "& .M4LSideBar-wrapperGroupTitle": {
-                height: "60px",
+                height: "28px",
+                padding: "0px 0px 0px 12px",
                 "& .M4LTypography-root": {
                   display: "flex",
                   width: "100%",
@@ -1398,20 +1536,39 @@ const p = (o) => ({
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                     textWrap: "nowrap",
-                    ...o.typography.bodyDens
+                    ...o.typography.bodyDens,
+                    textTransform: "capitalize"
                   }
                 }
               },
               "& .M4LSideBar-itemListMainRoot": {
                 display: "flex",
                 borderRadius: "4px 0px 0px 4px",
-                justifyContent: "center",
+                justifyContent: "flex-start",
                 flexDirection: "column",
-                padding: "0px 0px 4px 0px",
+                paddingBottom: "4px",
                 gap: "4px",
+                height: "auto",
                 "& .M4LSideBar-navItemMainRoot": {
                   backgroundColor: "transparent",
                   borderRadius: "4px",
+                  "& .M4LSideBar-navItemRootContent": {
+                    padding: "8px 8px 8px 12px",
+                    "& .M4LSideBar-navItemRootContentIconTypo": {
+                      alignItems: "center",
+                      gap: "16px",
+                      "& .M4LIcon-icon": {
+                        minWidth: "24px",
+                        minHeight: "24px"
+                      },
+                      "& .M4LTypography-root": {
+                        "& .MuiTypography-root": {}
+                      },
+                      "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
+                        backgroundColor: o.palette.state.focus
+                      }
+                    }
+                  },
                   "&:hover": {
                     background: o.palette.state.default,
                     cursor: "pointer"
@@ -1427,7 +1584,9 @@ const p = (o) => ({
                     }
                   },
                   "& .M4LSideBar-navItemRootContent": {
+                    alignItems: "center",
                     "& .M4LSideBar-navItemRootContentIconTypo": {
+                      alignItems: "center",
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.state.focus
                       },
@@ -1449,10 +1608,10 @@ const p = (o) => ({
                     },
                     "&::before": {
                       content: '""',
-                      width: "4px",
+                      width: "2px",
                       top: "0px",
                       bottom: "0px",
-                      right: "0px",
+                      left: "0px",
                       backgroundColor: o.palette.state.focus,
                       borderRadius: "4px 0px 0px 4px",
                       position: "absolute"
@@ -1577,7 +1736,7 @@ const p = (o) => ({
             display: "flex",
             paddingTop: "12px",
             borderTop: "1px solid",
-            borderColor: o.palette.state.overdefoult,
+            borderColor: o.palette.state.hoverDefault,
             justifyContent: "flex-end",
             marginRight: "14px",
             marginLeft: "14px",
@@ -1603,23 +1762,23 @@ const p = (o) => ({
       }
     }
   }
-}), h = (o) => ({
+}), m = (o) => ({
   M4LAreasAdmin: {
     styleOverrides: {
       "&.M4LAreasAdmin-root": {
         flex: 1,
         display: "flex",
         flexDirection: "row",
-        overflow: "auto",
+        overflow: "hidden",
         height: "auto",
-        borderRadius: "6px",
-        paddingRight: "6px",
+        padding: "0px 12px",
         alignItems: "center",
         justifyContent: "space-between",
-        width: "70%",
-        maxWidth: "fit-content",
+        width: "100%",
         gap: "8px",
-        borderColor: "transparent",
+        borderRight: "1px solid",
+        borderLeft: "1px solid",
+        borderColor: o.palette.state.borderDisable,
         [o.breakpoints.down("sm")]: {
           boxShadow: o.customShadows.z1,
           paddingRight: "0px",
@@ -1628,16 +1787,19 @@ const p = (o) => ({
           gap: "0px",
           borderRadius: "4px",
           height: "100%",
-          overflow: "hidden"
+          overflow: "hidden",
+          borderRight: "0px",
+          borderLeft: "0px",
+          borderColor: "transparent"
         },
         "& .M4LAreasAdmin-rootContent": {
           display: "flex",
-          width: "fit-content",
-          maxWidth: "100%",
+          flexDirection: "row-reverse",
+          width: "100%",
           overflow: "auto",
           justifyContent: "center",
           alignItems: "center",
-          gap: "4px",
+          gap: "8px",
           minHeight: "36px",
           boxShadow: "none",
           [o.breakpoints.down("sm")]: {
@@ -1674,12 +1836,13 @@ const p = (o) => ({
             zIndex: "10000"
           },
           "& .M4LAreasAdmin-areaContainerChipsIcon": {
+            flexGrow: "1",
             display: "flex",
             flexDirection: "row",
             width: "100%",
             overflow: "auto",
-            height: "32px",
-            borderColor: o.palette.state.overdefoult,
+            height: "36px",
+            borderColor: o.palette.state.hoverDefault,
             [o.breakpoints.down("sm")]: {
               background: "none",
               borderRight: "none",
@@ -1706,8 +1869,8 @@ const p = (o) => ({
               overflow: "auto",
               gap: "8px",
               paddingLeft: "0px",
-              paddingRight: "0PX",
-              width: "fit-content",
+              paddingRight: "0px",
+              width: "100%",
               height: "auto",
               alignItems: "center",
               [o.breakpoints.down("sm")]: {
@@ -1718,25 +1881,27 @@ const p = (o) => ({
               "& .M4LAreasAdmin-areaContainerContentChips": {
                 display: "flex",
                 flexDirection: "row",
-                width: "fit-content",
+                width: "100%",
                 height: "100%",
                 justifyContent: "space-between",
                 alignItems: "center",
+                overflow: "visible",
                 [o.breakpoints.down("sm")]: {
                   width: "100%",
-                  background: "none"
-                },
-                "& .simplebar-mask .simplebar-offset ": {
-                  display: "flex",
-                  alignItems: "center"
+                  background: "none",
+                  "&.M4LAreasAdmin-areaContainerContentChips > div": {
+                    borderColor: "transparent"
+                  }
                 },
                 "& .M4LAreasAdmin-areaContentChips": {
                   display: "flex",
                   width: "fit-content",
-                  height: "30px",
+                  height: "auto",
+                  minHeight: "36px",
                   alignItems: "center",
                   gap: "4px",
                   paddingRight: "4px",
+                  overflow: "hidden",
                   [o.breakpoints.down("sm")]: {
                     height: "44px"
                   }
@@ -1761,64 +1926,35 @@ const p = (o) => ({
                   }
                 }
               },
-              "& .simplebar-wrapper": {
-                width: "fit-content",
+              "& .M4LAreasAdmin-areaChipRoot ": {
+                margin: "0px",
+                borderRadius: "4px",
+                overflow: "hidden",
+                width: "100%",
                 maxWidth: "100%",
+                cursor: "pointer",
+                "&:hover": {
+                  background: o.palette.state.hoverDefault
+                },
                 [o.breakpoints.down("sm")]: {
+                  background: "none",
+                  border: "none",
+                  boxShadow: "none",
                   width: "100%"
                 }
               },
-              "& .simplebar-height-auto-observer-wrapper": {
-                width: "fit-content",
-                maxWidth: "100%",
-                overflow: "auto"
-              },
-              "& .simplebar-mask": {
-                "& .simplebar-offset": {
-                  "& .simplebar-content-wrapper": {
-                    width: "fit-content",
-                    maxWidth: "100%",
-                    overflow: "auto",
-                    "& .simplebar-content": {
-                      width: "fit-content",
-                      overflow: "auto"
-                    }
-                  }
-                }
-              },
-              "& .simplebar-content-wrapper": {
-                width: "fit-content",
-                "& .M4LAreasAdmin-areaChipRoot ": {
-                  margin: "0px",
-                  borderRadius: "4px",
-                  overflow: "hidden",
-                  width: "fit-content",
-                  cursor: "pointer",
-                  [o.breakpoints.down("sm")]: {
-                    background: "none",
-                    border: "none",
-                    boxShadow: "none",
-                    width: "100%"
-                  }
-                }
-              },
               "& .M4LAreasAdmin-areaChipMobileRoot": {
                 display: "flex",
                 overflow: "hidden",
                 width: "100%",
                 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,
                   width: "100%"
                 },
-                "&:hover": {
-                  background: o.palette.state.active12
-                },
                 "& .M4LAreasAdmin-areaChipRoot ": {
                   margin: "0px",
                   borderRadius: "4px 0px 0px 4px",
@@ -1852,6 +1988,9 @@ const p = (o) => ({
                 "& .M4LIconButton-root": {
                   background: "transparent",
                   backgroundColor: "transparent",
+                  "&:hover": {
+                    background: o.palette.state.active12
+                  },
                   "& .M4LIcon-icon": {}
                 }
               },
@@ -1860,11 +1999,7 @@ const p = (o) => ({
                 alignItems: "center",
                 height: "100%"
               },
-              "& .simplebar-content": {
-                display: "flex",
-                alignItems: "center"
-              },
-              "& .M4LAreasAdmin-areaChipRoot ": {
+              "& .M4LAreasAdmin-areaChipRoot": {
                 display: "flex",
                 background: o.palette.background.default,
                 borderRadius: "4px 4px 4px 4px",
@@ -1884,9 +2019,15 @@ const p = (o) => ({
                   ...o.typography.body,
                   color: o.palette.text.primary,
                   height: "22px",
+                  "&:hover": {
+                    background: o.palette.state.hover
+                  },
                   [o.breakpoints.down("sm")]: {
                     height: "auto",
-                    background: "none"
+                    background: "none",
+                    "&:hover": {
+                      background: o.palette.state.hoverDefault
+                    }
                   },
                   "& .M4LAreasAdmin-areaChipTitle": {
                     backgroundColor: "transparent",
@@ -1910,6 +2051,9 @@ const p = (o) => ({
                     }
                   },
                   "& .M4LIconButton-root": {
+                    "&:hover": {
+                      background: o.palette.state.active
+                    },
                     [o.breakpoints.down("sm")]: {
                       color: o.palette.text.primary
                     },
@@ -1956,12 +2100,17 @@ const p = (o) => ({
             }
           },
           "& .M4LAreasAdmin-areasPopoverListWindowsIcon": {
-            boxShadow: o.customShadows.z1,
-            borderLeft: "1px solid",
-            borderRadius: "0px 4px 4px 0px",
-            borderColor: o.palette.background.background
+            borderRadius: "4px",
+            "& .MuiButtonBase-root": {
+              width: "100%",
+              height: "28px",
+              borderLeft: "1px solid",
+              borderColor: o.palette.state.borderSecondary,
+              borderRadius: "0px"
+            }
           },
           "& .M4LAreasAdmin-areasAddButton": {
+            flexGrow: "2",
             background: o.palette.state.default
           },
           "&.M4LAreasAdmin-isMobile": {
@@ -1970,7 +2119,6 @@ const p = (o) => ({
             width: "100%",
             "& .M4LAreasAdmin-areaContainerChips": {
               width: "100%",
-              overflow: "hidden",
               background: "none",
               boxShadow: "none"
             }
@@ -1984,10 +2132,41 @@ const p = (o) => ({
       "&.M4LAreasAdmin-areaEditPopover": {
         "& .MuiPaper-root": {
           width: "200px",
+          padding: "12px",
           "& .M4LRHFormProvider-root": {
-            "& .M4LRHFTextField-root": {},
+            gap: "8px",
+            "& .css-l4lb1c": {
+              minHeight: "24px",
+              border: "0px",
+              "& .M4LTypography-root": {
+                height: "100%",
+                "& .MuiTypography-root": {
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center"
+                }
+              },
+              "& .M4LIconButton-root": {
+                "& .MuiButtonBase-root": {
+                  padding: "0px",
+                  justifyContent: "inherit"
+                }
+              }
+            },
+            "& .M4LRHFTextField-root": {
+              "& .MuiFormControl-root": {
+                marginTop: "0px"
+              }
+            },
             "& .M4LCommonActions-root": {
-              padding: "16px 0 0px 0px"
+              padding: "8px 0 0px 0px",
+              "& .M4LButton-root": {
+                padding: "0px",
+                height: "24px",
+                "& .MuiButtonBase-root": {
+                  justifyContent: "center !important"
+                }
+              }
             }
           }
         }
@@ -2017,7 +2196,7 @@ const p = (o) => ({
       }
     }
   }
-}), f = (o) => ({
+}), C = (o) => ({
   M4LAreasViewer: {
     styleOverrides: {
       "&.M4LAreasViewer-root": {
@@ -2311,7 +2490,7 @@ const p = (o) => ({
                 "& .M4LAreasViewer-windowHeaderContent": {
                   "& .M4LIcon-root": {
                     "& .M4LIcon-icon": {
-                      background: o.palette.state.active
+                      background: o.palette.state.focus
                     }
                   },
                   "& .M4LAreasViewer-windowHeaderCancelHandle": {
@@ -2324,7 +2503,7 @@ const p = (o) => ({
                 },
                 "& .M4LTypography-root .MuiTypography-root": {
                   ...o.typography.paragraphDens,
-                  color: o.palette.state.active
+                  color: o.palette.state.focus
                 },
                 "& .MuiButtonBase-root": {
                   "& .M4LIcon-icon": {
@@ -2360,7 +2539,7 @@ const p = (o) => ({
           },
           "&.M4LGridLayout-colapsed ": {
             "& .M4LAreasViewer-windowRoot": {
-              borderColor: o.palette.state.overdefoult,
+              borderColor: o.palette.state.hoverDefault,
               boxShadow: o.customShadows.z1
             }
           },
@@ -2420,7 +2599,7 @@ const p = (o) => ({
               padding: "4px",
               background: o.palette.background.default,
               borderRadius: "4px",
-              borderColor: o.palette.state.overdefoult,
+              borderColor: o.palette.state.hoverDefault,
               "&:not(.M4LAreasViewer-loading)": {
                 "& .M4LinearProgressIndeterminate-root": {
                   opacity: 0
@@ -2671,17 +2850,18 @@ const p = (o) => ({
           minHeight: "11px",
           boxShadow: o.customShadows.z2,
           border: "1px solid",
-          borderColor: o.palette.state.overdefoult
+          borderColor: o.palette.state.hoverDefault
         }
       }
     }
   }
-}), w = (o) => ({
+}), k = (o) => ({
   M4LAppBar: {
     styleOverrides: {
       "&.M4LAppBar-root": {
         display: "flex",
-        width: "auto",
+        width: "100vw",
+        maxWidth: "100vw !important",
         overflow: "hidden",
         minHeight: "52px",
         height: "52px",
@@ -2709,6 +2889,7 @@ const p = (o) => ({
             display: "flex",
             alignItems: "center",
             gap: "12px",
+            width: "163px",
             "& .M4LTypography-root": {
               textWrap: "nowrap",
               textTransform: "uppercase"
@@ -2748,11 +2929,17 @@ const p = (o) => ({
           }
         },
         "& .M4LAppBar-containerChilds": {
+          flexGrow: "1",
           display: "flex",
           flexDirection: "row",
           gap: "12px",
           width: "100%",
           justifyContent: "space-between",
+          overflow: "hidden",
+          alignItems: "center",
+          borderRadius: "4px",
+          background: "none",
+          boxShadow: "none",
           [o.breakpoints.down("sm")]: {
             display: "flex",
             alignItems: "center",
@@ -2762,33 +2949,34 @@ const p = (o) => ({
             background: "none",
             boxShadow: "none",
             paddingRight: "0px",
-            borderRadius: "6px"
+            borderRadius: "6px",
+            gap: "8px"
           },
-          "& .M4LAppBar-containerChilds": {
-            display: "flex",
-            width: "100%",
-            overflow: "visible",
-            alignItems: "center",
-            borderRadius: "4px",
-            background: "none",
-            boxShadow: "none",
-            justifyContent: "space-between",
-            [o.breakpoints.down("sm")]: {
-              width: "100%",
-              alignItems: "center",
-              gap: "8px",
-              borderRadius: "4px 0px 0px 4px",
-              display: "flex",
-              background: "none",
-              boxShadow: "none",
-              borderTop: "0px"
+          "& .M4LanguagePopover-root": {
+            "& .M4LImageButton-root": {
+              "& .MuiButtonBase-root": {
+                width: "28px",
+                height: "28px"
+              }
+            }
+          },
+          "& .M4LAvatar-root": {
+            width: "28px",
+            height: "28px",
+            padding: "4px",
+            "& .MuiAvatar-root": {
+              width: "20px",
+              height: "20px",
+              fontSize: "12px"
             },
-            "& .M4LAvatar-root": {
+            [o.breakpoints.down("sm")]: {
               width: "36px",
               height: "36px",
+              padding: "4px",
               "& .MuiAvatar-root": {
-                width: "36px",
-                height: "36px"
+                width: "28px",
+                height: "28px",
+                fontSize: "15px"
               }
             }
           }
@@ -2796,7 +2984,7 @@ const p = (o) => ({
       }
     }
   }
-}), v = (o) => ({
+}), I = (o) => ({
   M4LAvatar: {
     styleOverrides: {
       "&.M4LAvatar-root": {
@@ -2818,7 +3006,7 @@ const p = (o) => ({
       }
     }
   }
-}), k = (o) => ({
+}), B = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -2837,7 +3025,7 @@ const p = (o) => ({
       "& .MuiPaper-root": {
         display: "flex",
         flexDirection: "column",
-        gap: "8px",
+        gap: "4px",
         padding: "12px",
         borderRadius: "6px",
         boxShadow: o.customShadows.z3,
@@ -2845,12 +3033,12 @@ const p = (o) => ({
         "& .M4LAccountPopover-containerUserInfo": {
           display: "flex",
           flexDirection: "column",
-          gap: "8px",
+          gap: "4px",
           "& .M4LAccountPopover-containerUserName": {
             display: "flex",
             flexDirection: "row",
-            gap: "8px",
-            padding: "0px 4px",
+            gap: "12px",
+            padding: "2px 4px",
             "& .M4LIcon-root": {
               minWidth: "16px",
               minHeight: "16px"
@@ -2867,8 +3055,8 @@ const p = (o) => ({
           "& .M4LAccountPopover-containerUserEmail": {
             display: "flex",
             flexDirection: "row",
-            gap: "8px",
-            padding: "0px 4px",
+            gap: "12px",
+            padding: "2px 4px",
             "& .M4LIcon-root": {
               minWidth: "16px",
               minHeight: "16px"
@@ -2886,8 +3074,8 @@ const p = (o) => ({
         "& .M4LAccountPopover-containerAppVersion": {
           display: "flex",
           flexDirection: "row",
-          gap: "8px",
-          padding: "0px 4px",
+          gap: "12px",
+          padding: "2px 4px",
           "& .M4LIcon-root": {
             minWidth: "16px",
             minHeight: "16px"
@@ -2905,10 +3093,10 @@ const p = (o) => ({
           borderTop: "1.5px solid",
           borderBottom: "1.5px solid",
           borderColor: o.palette.state.default,
-          padding: "8px 4px",
+          padding: "2px 4px",
           display: "flex",
           flexDirection: "column",
-          gap: "8px",
+          gap: "4px",
           "& .M4LAccountPopover-containerProgress": {
             display: "flex",
             justifyContent: "start",
@@ -2917,7 +3105,7 @@ const p = (o) => ({
           "& .M4LAccountPopover-containerSetting": {
             display: "flex",
             flexDirection: "row",
-            gap: "8px",
+            gap: "12px",
             width: "100%",
             borderRadius: "4px",
             cursor: "pointer",
@@ -2942,7 +3130,7 @@ const p = (o) => ({
         "& .M4LAccountPopover-containerlogOut": {
           display: "flex",
           flexDirection: "row",
-          gap: "8px",
+          gap: "12px",
           padding: "0 4px",
           borderRadius: "4px",
           width: "100%",
@@ -2966,74 +3154,110 @@ const p = (o) => ({
           }
         },
         [o.breakpoints.down("md")]: {
-          gap: "16px",
+          gap: "4px",
           padding: "16px !important",
           "& .M4LAccountPopover-containerUserInfo": {
-            gap: "16px",
+            gap: "4px",
             "& .M4LAccountPopover-containerUserName": {
               gap: "16px",
+              padding: "2px 4px",
+              minHeight: "36px",
+              alignItems: "center",
               "& .M4LIcon-root": {
                 minWidth: "20px",
-                minHeight: "24px"
+                height: "100%",
+                "& .M4LIcon-icon": {
+                  minHeight: "20px",
+                  minWidth: "20px"
+                }
               },
               "& .M4LAccountPopover-labelUserName": {
                 width: "100%",
-                minHeight: "20px"
+                height: "100%"
               }
             },
             "& .M4LAccountPopover-containerUserEmail": {
               gap: "16px",
+              padding: "2px 4px",
+              minHeight: "36px",
+              alignItems: "center",
               "& .M4LIcon-root": {
                 minWidth: "20px",
-                minHeight: "20px"
+                height: "100%",
+                "& .M4LIcon-icon": {
+                  minHeight: "20px",
+                  minWidth: "20px"
+                }
               },
               "& .M4LAccountPopover-labelUserEmail": {
                 width: "100%",
-                minHeight: "24px"
+                height: "100%"
               }
             }
           },
           "& .M4LAccountPopover-containerAppVersion": {
             gap: "16px",
+            padding: "2px 4px",
+            minHeight: "36px",
+            alignItems: "center",
             "& .M4LIcon-root": {
               minWidth: "20px",
-              minHeight: "20px"
+              height: "100%",
+              "& .M4LIcon-icon": {
+                minHeight: "20px",
+                minWidth: "20px"
+              }
             },
             "& .M4LAccountPopover-labelVersion": {
               width: "100%",
-              minHeight: "24px"
+              height: "100%"
             }
           },
           "& .M4LAccountPopover-containerMenuItems": {
             gap: "16px",
+            padding: "0px",
             "& .M4LAccountPopover-containerSetting": {
               gap: "16px",
+              padding: "2px 4px",
+              minHeight: "36px",
+              alignItems: "center",
               "&:hover": {
                 background: o.palette.state.default
               },
               "& .M4LIcon-root": {
                 minWidth: "20px",
-                minHeight: "20px"
+                height: "100%",
+                "& .M4LIcon-icon": {
+                  minHeight: "20px",
+                  minWidth: "20px"
+                }
               },
               "& .M4LAccountPopover-menuItem": {
                 width: "100%",
-                minHeight: "24px"
+                height: "100%"
               }
             }
           },
           "& .M4LAccountPopover-containerlogOut": {
             gap: "16px",
             cursor: "pointer",
+            padding: "2px 4px",
+            minHeight: "36px",
+            alignItems: "center",
             "&:hover": {
               background: o.palette.state.default
             },
             "& .M4LIcon-root": {
               minWidth: "20px",
-              minHeight: "20px"
+              height: "100%",
+              "& .M4LIcon-icon": {
+                minHeight: "20px",
+                minWidth: "20px"
+              }
             },
             "& .M4LAccountPopover-logOut": {
               width: "100%",
-              minHeight: "24px"
+              height: "100%"
             }
           }
         },
@@ -3061,7 +3285,7 @@ const p = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), S = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -3078,7 +3302,7 @@ const p = (o) => ({
       }
     }
   }
-}), C = (o) => ({
+}), R = (o) => ({
   M4LMasterDetailLayout: {
     styleOverrides: {
       "&.M4LMasterDetailLayout-root": {
@@ -3111,7 +3335,7 @@ const p = (o) => ({
       }
     }
   }
-}), I = (o) => ({
+}), A = (o) => ({
   M4LSplitLayout: {
     styleOverrides: {
       "&.M4LSplitLayout-root": {
@@ -3123,12 +3347,19 @@ const p = (o) => ({
         "& .M4LSplitLayout-firstPart": {
           position: "relative",
           width: "100%",
-          height: "100%"
+          height: "100%",
+          "& .M4LStack-root": {
+            gap: "8px"
+          }
         },
         "& .M4LSplitLayout-secondPart": {
           position: "relative",
           width: "100%",
-          height: "100%"
+          height: "100%",
+          "& .M4LStack-root": {
+            gap: "8px",
+            overflow: "hidden"
+          }
         },
         "& .splitter-layout": {
           position: "absolute",
@@ -3226,7 +3457,7 @@ const p = (o) => ({
       }
     }
   }
-}), B = (o) => ({
+}), T = (o) => ({
   M4LCommonActions: {
     styleOverrides: {
       "&.M4LCommonActions-root": {
@@ -3239,7 +3470,7 @@ const p = (o) => ({
       }
     }
   }
-}), S = (o) => ({
+}), P = (o) => ({
   M4LinearProgressIndeterminate: {
     styleOverrides: {
       "&.M4LinearProgressIndeterminate-root": {
@@ -3293,7 +3524,7 @@ const p = (o) => ({
       }
     }
   }
-}), R = (o) => ({
+}), D = (o) => ({
   M4LPropertyValue: {
     styleOverrides: {
       "&.M4LPropertyValue-root": {
@@ -3385,19 +3616,19 @@ const p = (o) => ({
             minHeight: "36px",
             height: "auto",
             justifyContent: "center",
-            paddingLeft: "8px"
+            padding: "8px"
           },
           "& .M4LPropertyValue-value": {
             minHeight: "36px",
             height: "auto",
-            padding: "4px 8px",
+            padding: "12px 16px",
             justifyContent: "center"
           }
         }
       }
     }
   }
-}), A = (o) => ({
+}), H = (o) => ({
   M4LTab: {
     styleOverrides: {
       "&.M4LTab-root": {
@@ -3449,7 +3680,7 @@ const p = (o) => ({
       }
     }
   }
-}), P = (o) => ({
+}), F = (o) => ({
   M4LAccordion: {
     styleOverrides: {
       "&.M4LAccordion-root": {
@@ -3471,11 +3702,13 @@ const p = (o) => ({
           border: "1px solid",
           borderColor: o.palette.state.borderPrimary,
           "& .MuiCollapse-root": {
+            padding: "8px",
             "& .MuiCollapse-wrapper": {
               "& .MuiCollapse-wrapperInner": {
                 "& .MuiAccordion-region": {
-                  "$ .M4LAccordion-content": {
+                  "& .M4LAccordion-content": {
                     display: "flex !important",
+                    flexDirection: "column",
                     gap: "8px !important"
                   }
                 }
@@ -3483,14 +3716,14 @@ const p = (o) => ({
             }
           }
         },
-        "& .MuiButtonBase-root": {
+        "& .MuiButtonBase-root.Mui-expanded": {
           padding: "4px 8px",
           borderRadius: "4px",
           height: "24px",
           minHeight: "24px",
           background: "transparent",
           "&.MuiAccordionSummary-root": {
-            Zheight: "28px",
+            height: "28px",
             minHeight: "28px",
             padding: "0",
             "& .M4LAccordion-labelIcon": {
@@ -3529,25 +3762,38 @@ const p = (o) => ({
           },
           test: "root"
         },
-        "& .MuiCollapse-root": {
-          background: o.palette.background.default,
-          borderColor: o.palette.state.borderPrimary,
-          borderRadius: "0px 0px 4px 4px",
-          padding: "8px",
-          "&.MuiButtonBase-root": {
-            padding: "4px 8px !important",
-            background: o.palette.background.neutral,
+        "& .MuiPaper-outlined": {
+          "& .MuiButtonBase-root": {
+            padding: "4px 8px",
+            borderRadius: "4px",
+            height: "24px",
+            minHeight: "24px",
+            background: "transparent",
             "&.MuiAccordionSummary-root": {
-              padding: "4px 8px",
-              background: o.palette.background.neutral
-            }
-          },
-          "& .M4LAccordion-content": {
-            display: "flex !important",
-            flexDirection: "column",
-            gap: "8px !important",
-            "& .M4LPropertyValue-root:last-of-type": {
-              borderBottom: "unset"
+              height: "28px",
+              minHeight: "28px",
+              padding: "0",
+              "&:hover": {
+                background: o.palette.state?.hoverDefault
+              }
+            },
+            "& .MuiCollapse-root": {
+              background: o.palette.background.default,
+              borderColor: o.palette.state.borderPrimary,
+              borderRadius: "0px 0px 4px 4px",
+              padding: "8px",
+              "&.MuiButtonBase-root": {
+                padding: "4px 8px !important",
+                background: o.palette.background.neutral
+              },
+              "& .M4LAccordion-content": {
+                display: "flex !important",
+                flexDirection: "column",
+                gap: "2px",
+                "& .M4LPropertyValue-root:last-of-type": {
+                  borderBottom: "unset"
+                }
+              }
             }
           }
         },
@@ -3575,7 +3821,7 @@ const p = (o) => ({
       }
     }
   }
-}), T = (o) => ({
+}), V = (o) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -3590,7 +3836,7 @@ const p = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), z = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
@@ -3615,7 +3861,9 @@ const p = (o) => ({
         "& .M4LPeriod-containerDateLabel": {
           width: "100%",
           height: "100% !important",
-          padding: "0px 0px 0px 8px"
+          padding: "0px 0px 0px 8px",
+          borderRight: "1px solid",
+          borderColor: o.palette.state.borderPrimary
         },
         "& .M4LPeriod-containerDateValue": {
           display: "flex",
@@ -3824,7 +4072,7 @@ const p = (o) => ({
       }
     }
   }
-}), H = (o) => ({
+}), W = (o) => ({
   M4LModalDialog: {
     styleOverrides: {
       "&.M4LModal-root": {
@@ -3940,14 +4188,18 @@ const p = (o) => ({
               display: "flex",
               flexDirection: "column",
               flex: "1",
-              overflow: "hidden"
+              overflow: "hidden",
+              "& .M4LStack-root": {
+                gap: "8px",
+                overflow: "hidden"
+              }
             }
           }
         }
       }
     }
   }
-}), F = (o) => ({
+}), O = (o) => ({
   M4LPaperForm: {
     styleOverrides: {
       "&.M4LPaperForm-root": {
@@ -3958,6 +4210,9 @@ const p = (o) => ({
         borderColor: o.palette.state.borderSecondary,
         width: "100%",
         height: "auto",
+        "&.M4LPaperForm-isForm .M4LPaperForm-content": {
+          gap: "12px"
+        },
         "& .M4LPaperForm-headerContainer": {
           width: "100%",
           height: "28px",
@@ -3982,6 +4237,8 @@ const p = (o) => ({
           }
         },
         "& .M4LPaperForm-content": {
+          display: "flex",
+          flexDirection: "column",
           height: "fit-content",
           width: "100%",
           padding: "12px",
@@ -3991,7 +4248,7 @@ const p = (o) => ({
       }
     }
   }
-}), V = (o) => ({
+}), j = (o) => ({
   M4LTooltip: {
     styleOverrides: {
       "&.M4LTooltip-root": {
@@ -4012,7 +4269,7 @@ const p = (o) => ({
       }
     }
   }
-}), z = (o) => ({
+}), G = (o) => ({
   M4LBadge: {
     styleOverrides: {
       "&.M4LBadge-root": {
@@ -4043,7 +4300,7 @@ const p = (o) => ({
       }
     }
   }
-}), O = (o) => ({
+}), N = (o) => ({
   M4LDataGrid: {
     styleOverrides: {
       "&.M4LDataGrid-root": {
@@ -4063,8 +4320,9 @@ const p = (o) => ({
           left: "0px",
           right: "0px",
           top: "0px",
-          height: "42px",
-          padding: "8px",
+          height: "32px",
+          minHeight: "32px",
+          padding: "4px 8px",
           display: "flex",
           flexDirection: "row",
           borderRadius: "4px",
@@ -4113,7 +4371,7 @@ const p = (o) => ({
           display: "flex",
           flexDirection: "column",
           position: "absolute",
-          top: "42px",
+          top: "32px",
           bottom: "0px",
           left: "0px",
           right: "0px",
@@ -4130,6 +4388,7 @@ const p = (o) => ({
             position: "relative",
             height: "100%",
             overflow: "hidden",
+            borderRadius: "4px 0px",
             "& .rdg ": {
               border: "none",
               background: o.palette.background.default,
@@ -4154,12 +4413,11 @@ const p = (o) => ({
               ),
               "--rdg-border-color": "none",
               "&:last-child .rdg-cell": {
-                borderTop: "0",
+                borderTop: "0.5px solid",
                 borderBottom: "1px solid",
-                borderLeft: "0",
-                borderRight: "0",
-                borderColor: o.palette.state.borderDisable,
-                test: "bruce"
+                borderLeft: "0.5px solid",
+                borderRight: "0.5px solid",
+                borderColor: o.palette.state.borderDisable
               }
             },
             '& [role="columnheader"]': {
@@ -4224,6 +4482,10 @@ const p = (o) => ({
               ...o.typography.bodyDens,
               lineHeight: "var(--rdg-row-height)!important"
             },
+            '& .rdg-cell[role="columnheader"] [draggable="true"]': {
+              ...o.typography.bodyDens,
+              lineHeight: "var(--rdg-row-height)!important"
+            },
             "& [aria-selected=true]": {
               backgroundColor: o.palette.state.toneOp,
               color: o.palette.text.primary,
@@ -4264,13 +4526,13 @@ const p = (o) => ({
               gridTemplateColumns: "auto",
               borderBottom: "0.5px solid !important",
               borderColor: `${o.palette.state.borderDisable}!important`,
+              '& [draggable="true"]': {
+                fontSize: o.typography.body
+              },
               "&.rdg-cell-frozen-last": {
                 borderColor: o.palette.background.default,
                 boxShadow: "var(--rdg-frozen-cell-box-shadow)",
-                "&:after": {
-                  borderRight: "1.5px solid",
-                  borderColor: o.palette.background.neutral
-                }
+                "&:after": {}
               },
               "& .rdg-header-sort-cell": {
                 "& .rdg-header-sort-name + span": {
@@ -4316,11 +4578,41 @@ const p = (o) => ({
   M4LDataGridActionsFormatter: {
     styleOverrides: {
       "&.M4LDataGrid-actionsFormatter": {
-        test: "root"
+        test: "root",
+        "& .MuiPaper-root": {
+          gap: "4px",
+          "& .MuiButtonBase-root": {
+            minHeight: "24px",
+            padding: "2px 4px",
+            gap: "12px",
+            "& .M4LIcon-root": {
+              minHeight: "20px",
+              minWidth: "20px"
+            }
+          }
+        },
+        [o.breakpoints.down("md")]: {
+          "& .MuiPaper-root": {
+            padding: "12px",
+            "& .MuiButtonBase-root": {
+              minHeight: "36px",
+              padding: "2px 4px",
+              gap: "16px",
+              "& .M4LIcon-root": {
+                minHeight: "28px",
+                minWidth: "28px",
+                "& .M4LIcon-icon": {
+                  minHeight: "20px",
+                  minWidth: "20px"
+                }
+              }
+            }
+          }
+        }
       }
     }
   }
-}), W = (o) => ({
+}), E = (o) => ({
   M4LPager: {
     styleOverrides: {
       "&.M4LPager-root": {
@@ -4408,7 +4700,7 @@ const p = (o) => ({
       }
     }
   }
-}), j = (o) => ({
+}), _ = (o) => ({
   M4LCheckBox: {
     styleOverrides: {
       "&.M4LCheckBox-root": {
@@ -4464,7 +4756,7 @@ const p = (o) => ({
       }
     }
   }
-}), G = (o) => ({
+}), $ = (o) => ({
   M4LStack: {
     styleOverrides: {
       "&.M4LStack-root": {
@@ -4477,7 +4769,7 @@ const p = (o) => ({
       }
     }
   }
-}), N = (o) => ({
+}), U = (o) => ({
   M4LTabs: {
     styleOverrides: {
       "&.M4LTabs-root": {
@@ -4517,7 +4809,7 @@ const p = (o) => ({
       }
     }
   }
-}), E = (o) => ({
+}), q = (o) => ({
   M4LNoItemSelected: {
     styleOverrides: {
       "&.M4LNoItemSelected-root": {
@@ -4537,15 +4829,18 @@ const p = (o) => ({
       }
     }
   }
-}), _ = (o) => ({
+}), Y = (o) => ({
   M4LScrollBar: {
     styleOverrides: {
       "&.M4LScrollBar-root": {
-        flexGrow: 1,
+        flexGrow: "1",
         width: "100%",
         height: "100%",
         overflow: "hidden",
         minHeight: "inherit",
+        "& .simplebar-content": {
+          height: "100%"
+        },
         "& .simplebar-scrollbar.simplebar-visible:before": {
           opacity: "1"
         },
@@ -4569,7 +4864,7 @@ const p = (o) => ({
       }
     }
   }
-}), $ = (o) => ({
+}), J = (o) => ({
   M4LGridLayout: {
     styleOverrides: {
       "&.M4LGridLayout-root": {
@@ -4577,11 +4872,11 @@ const p = (o) => ({
       }
     }
   }
-}), U = (o) => ({
+}), K = (o) => ({
   M4LTabContent: {
     styleOverrides: {
       "&.M4LTabContent-root": {
-        padding: "8px 0px 0px 0px",
+        padding: "0px",
         display: "flex",
         overflow: "hidden",
         height: "100%",
@@ -4590,11 +4885,14 @@ const p = (o) => ({
         background: o.palette.background.default,
         borderRadius: "0 0 4px 4px",
         position: "relative",
-        flex: 1
+        flex: 1,
+        "&.M4LTabContent-root > div": {
+          gap: "8px"
+        }
       }
     }
   }
-}), q = (o) => ({
+}), Q = (o) => ({
   M4LMenuActions: {
     styleOverrides: {
       "&.M4LMenuActions-root": {
@@ -4809,7 +5107,7 @@ const p = (o) => ({
       }
     }
   }
-}), Y = (o) => ({
+}), Z = (o) => ({
   M4LFormatter: {
     styleOverrides: {
       "&.M4LFormatter-root": {
@@ -4826,7 +5124,7 @@ const p = (o) => ({
       }
     }
   }
-}), J = (o) => ({
+}), oo = (o) => ({
   M4LoadingError: {
     styleOverrides: {
       "&.M4LoadingError-root": {
@@ -4885,7 +5183,7 @@ const p = (o) => ({
       }
     }
   }
-}), K = (o) => ({
+}), to = (o) => ({
   M4LMFLoader: {
     styleOverrides: {
       "&.M4LMFLoader-root": {
@@ -4898,7 +5196,7 @@ const p = (o) => ({
       }
     }
   }
-}), Q = (o) => ({
+}), eo = (o) => ({
   M4LLoadingButton: {
     styleOverrides: {
       "&.M4LLoadingButton-root": {
@@ -5130,7 +5428,7 @@ const p = (o) => ({
       }
     }
   }
-}), Z = (o) => ({
+}), ro = (o) => ({
   M4LToastContainer: {
     styleOverrides: {
       "&.M4LToastContainer-root": {
@@ -5208,7 +5506,7 @@ const p = (o) => ({
       }
     }
   }
-}), oo = (o) => ({
+}), ao = (o) => ({
   M4LPDFViewer: {
     styleOverrides: {
       "&.M4LPDFViewer-root": {
@@ -5225,52 +5523,52 @@ const p = (o) => ({
   }
 });
 export {
-  A,
-  P as B,
-  D as C,
-  H as D,
-  F as E,
-  V as F,
-  W as G,
-  j as H,
-  G as I,
-  N as J,
-  E as K,
-  _ as L,
-  Q as M,
-  $ as N,
-  U as O,
-  q as P,
+  H as A,
+  F as B,
+  z as C,
+  W as D,
+  O as E,
+  j as F,
+  E as G,
+  _ as H,
+  $ as I,
+  U as J,
+  q as K,
+  Y as L,
+  eo as M,
+  J as N,
+  K as O,
+  Q as P,
   X as Q,
-  Y as R,
-  J as S,
-  K as T,
-  Z as U,
-  oo as V,
-  p as a,
-  T as b,
-  d as c,
-  l as d,
-  s as e,
-  c as f,
-  y as g,
-  g as h,
-  z as i,
-  u as j,
-  O as k,
-  x as l,
-  b as m,
-  M as n,
-  L as o,
-  w as p,
-  h as q,
-  f as r,
-  v as s,
-  k as t,
-  m as u,
-  C as v,
-  I as w,
-  B as x,
-  S as y,
-  R as z
+  Z as R,
+  oo as S,
+  to as T,
+  ro as U,
+  ao as V,
+  c as a,
+  V as b,
+  g as c,
+  x as d,
+  u as e,
+  b as f,
+  w as g,
+  M as h,
+  G as i,
+  y as j,
+  N as k,
+  L as l,
+  h as m,
+  f as n,
+  v as o,
+  k as p,
+  m as q,
+  C as r,
+  I as s,
+  B as t,
+  S as u,
+  R as v,
+  A as w,
+  T as x,
+  P as y,
+  D as z
 };