@m4l/styles 0.0.30 → 0.0.32

package/theme/overrides/M4LExtendedComponents/{index.e875a5e1.js → index.15f2650a.js}

@@ -1,6 +1,7 @@
 import { alpha as r } from "@mui/material/styles";
 import { alpha as t } from "@mui/system";
-const i = (o) => ({
+import { P as e } from "../../palette.31d770bc.js";
+const p = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {
       "&.M4LDynamicFilter-root": {
@@ -8,7 +9,7 @@ const i = (o) => ({
         background: o.palette.background.default,
         padding: "0px",
         border: "1px solid",
-        borderColor: "transparent",
+        borderColor: o.palette.state.borderPrimary,
         minHeight: "36px",
         height: "36px",
         [o.breakpoints.down("sm")]: {
@@ -39,7 +40,6 @@ const i = (o) => ({
           width: "100%",
           [o.breakpoints.down("sm")]: {
             height: "44px",
-            background: o.palette.background.neutral,
             display: "flex",
             flexDirection: "row",
             alignItems: "center",
@@ -49,6 +49,9 @@ const i = (o) => ({
             width: "100%",
             alignItems: "center",
             maxWidth: "100%",
+            color: o.palette.text.secondary,
+            border: "1px solid",
+            borderColor: "transparent",
             [o.breakpoints.down("sm")]: {
               height: "100%",
               padding: "8px"
@@ -61,13 +64,14 @@ const i = (o) => ({
         "& .M4LDynamicFilter-containerClearFilter": {
           display: "flex",
           flexDirection: "row",
-          gap: "4px",
-          backgroundColor: o.palette.background.neutral,
+          gap: "8px",
           padding: "4px",
           height: "100%",
           alignItems: "center",
           borderTopRightRadius: "4px",
           borderBottomRightRadius: "4px",
+          borderLeft: "1px solid",
+          borderColor: o.palette.state.borderPrimary,
           "& .M4LIconButton-root .M4LDynamicFilter-filterButton": {
             background: o.palette.state.focus
           }
@@ -77,38 +81,38 @@ const i = (o) => ({
           flexDirection: "row",
           gap: "8px",
           padding: "4px 6px 4px 4px",
-          backgroundColor: o.palette.background.neutral,
           height: "100%",
           maxWidth: "135px",
           width: "100%",
           alignItems: "center",
           borderTopLeftRadius: "4px",
           borderBottomLeftRadius: "4px",
+          borderRight: "1px solid",
+          borderColor: o.palette.state.borderPrimary,
           "& > input": {
-            background: "none",
+            background: o.palette.background.default,
             ...o.typography.body,
-            color: o.palette.text.primary,
-            padding: "0px 4px",
+            color: o.palette.text.secondary,
+            border: "1px solid",
+            borderColor: "transparent",
+            padding: "4px 8px",
             width: "100%",
             height: "100%",
-            borderRadius: "2px",
-            border: "unset",
             "&::placeholder": {
               color: o.palette.text.secondary
+            },
+            "&:focus-visible": {
+              color: o.palette.text.secondary,
+              border: "1px solid",
+              borderColor: o.palette.state.active12,
+              background: o.palette.state.active12,
+              BorderRadius: "2px",
+              outline: "none!important"
+            },
+            "&:hover": {
+              borderColor: o.palette.state.toneOp,
+              background: o.palette.state.overdefoult
             }
-          },
-          "& input:focus-visible": {
-            border: "1px solid",
-            borderColor: o.palette.state.active12,
-            background: o.palette.state.active12,
-            BorderRadius: "2px",
-            outline: "none",
-            padding: "0px 4px"
-          },
-          "& input:hover": {
-            border: "1px solid",
-            borderColor: o.palette.state.toneOp,
-            background: o.palette.state.overdefoult
           }
         },
         "& .M4LDynamicFilter-wrapperApplyedFilters": {
@@ -130,6 +134,7 @@ const i = (o) => ({
           }
         },
         "& .M4LDynamicFilter-applyedFilter": {
+          border: "none",
           height: "24px",
           display: "flex",
           alignItems: "center",
@@ -137,8 +142,6 @@ const i = (o) => ({
           background: o.palette.state.default,
           color: o.palette.text.secondary,
           ...o.typography.body,
-          border: "1px solid",
-          borderColor: o.palette.state.default,
           [o.breakpoints.down("sm")]: {
             height: "fit-content"
           },
@@ -197,8 +200,8 @@ const i = (o) => ({
           },
           "& .M4LRHFormProvider-root": {
             gap: "0px",
-            widht: "max-content",
-            minWidht: "220px",
+            width: "max-content",
+            minWidth: "220px",
             height: "fit-content",
             "& .M4LDynamicFilter-popoverFilterHeader": {
               background: o.palette.background.neutral,
@@ -245,7 +248,7 @@ const i = (o) => ({
       }
     }
   }
-}), n = (o) => ({
+}), d = (o) => ({
   M4LIcon: {
     styleOverrides: {
       ["&.M4LIcon-root"]: {
@@ -258,10 +261,10 @@ const i = (o) => ({
           backgroundColor: o.palette.text.primary
         },
         ".M4LIcon-sizeExtraSmall": {
-          width: "12px",
-          height: "12px",
-          minWidth: "12px",
-          minHeight: "12px"
+          width: "14px",
+          height: "14px",
+          minWidth: "14px",
+          minHeight: "14px"
         },
         ".M4LIcon-sizeSmall": {
           width: "16px",
@@ -294,7 +297,7 @@ const i = (o) => ({
       }
     }
   }
-}), p = (o) => ({
+}), l = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
@@ -306,21 +309,21 @@ const i = (o) => ({
         transition: "all .3s ease",
         "& .M4LIcon-root .M4LIcon-icon": {
           transition: "all .3s ease",
-          backgroundColor: o.palette.text.secondary
+          backgroundColor: o.palette.text.primary
         },
         "&::before": {
           boxSizing: "content-box",
           border: "1px solid",
           borderColor: o.palette.state?.focus,
-          borderRadius: "3px",
+          borderRadius: "4px",
           position: "absolute",
           transition: "all .3s ease"
         },
         ".M4LIconButton-sizeExtraSmall&::before": {
-          width: "22px",
-          height: "22px",
-          minWidth: "22px",
-          minHeight: "22px"
+          width: "24px",
+          height: "24px",
+          minWidth: "24px",
+          minHeight: "24px"
         },
         ".M4LIconButton-sizeSmall&::before": {
           width: "26px",
@@ -335,10 +338,10 @@ const i = (o) => ({
           minHeight: "38px"
         },
         "&.M4LIconButton-sizeExtraSmall": {
-          width: "20px",
-          height: "20px",
-          minWidth: "20px",
-          minHeight: "20px"
+          width: "22px",
+          height: "22px",
+          minWidth: "22px",
+          minHeight: "22px"
         },
         "&.M4LIconButton-sizeSmall": {
           width: "24px",
@@ -362,14 +365,14 @@ const i = (o) => ({
           "&:hover": {
             backgroundColor: o.palette.state?.hover,
             "& .M4LIcon-icon": {
-              backgroundColor: "#fff"
+              backgroundColor: o.palette.patronus?.marbleLight[10]
             }
           },
           "&:active": {
             backgroundColor: o.palette.state?.active,
             transition: "background-color .5s ease",
             "& .M4LIcon-icon": {
-              backgroundColor: "#fff"
+              backgroundColor: o.palette.patronus?.marbleLight[10]
             }
           },
           "&.M4LIconButton-isFocus": {
@@ -383,9 +386,9 @@ const i = (o) => ({
           }
         },
         "&.M4LIconButton-variantSecondary:not(&.M4LIconButton-isDisabled)": {
-          borderColor: o.palette.text.secondary,
+          borderColor: o.palette.state.borderDens,
           "& .M4LIcon-icon": {
-            backgroundColor: o.palette.text.secondary
+            backgroundColor: o.palette.text.primary
           },
           "&:hover": {
             border: "1px solid",
@@ -445,13 +448,13 @@ const i = (o) => ({
       }
     }
   }
-}), d = (o) => ({
+}), s = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {}
     }
   }
-}), l = (o) => ({
+}), c = (o) => ({
   M4LImageButton: {
     styleOverrides: {
       ["&.M4LImageButton-root"]: {
@@ -493,7 +496,7 @@ const i = (o) => ({
       }
     }
   }
-}), s = (o) => ({
+}), u = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
@@ -530,7 +533,7 @@ const i = (o) => ({
       }
     }
   }
-}), c = (o) => ({
+}), g = (o) => ({
   M4LPopover: {
     styleOverrides: {
       "&.M4LPopover-root": {
@@ -541,20 +544,32 @@ const i = (o) => ({
         ".MuiPaper-root": {
           background: o.palette.background.default,
           borderRadius: "6px",
-          padding: "8px",
+          padding: "12px",
           boxShadow: o.customShadows.z3,
           width: "auto",
           zIndex: "10000"
         },
         "& .M4LanguagePopover-containerItems": {
+          "& :nth-of-type(-n + 1)": {
+            gap: "8px"
+          },
           "& .M4LanguagePopover-labelItem": {
             ...o.typography.body,
             color: o.palette.text.secondary,
-            borderRadius: "4px"
+            borderRadius: "4px",
+            margin: "0",
+            paddingLeft: "4px"
+          },
+          "& .MuiButtonBase-root": {
+            margin: "0",
+            borderRadius: "4px",
+            padding: "4px",
+            gap: "4px"
           },
           "& .MuiButtonBase-root:hover": {
             backgroundColor: o.palette.state?.active12,
-            borderRadius: "4px"
+            borderRadius: "4px",
+            padding: "4px"
           },
           "& .MuiButtonBase-root.Mui-selected": {
             backgroundColor: o.palette.state?.active12,
@@ -566,7 +581,7 @@ const i = (o) => ({
       }
     }
   }
-}), u = (o) => ({
+}), x = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
       ["&.M4LHelperText-root"]: {
@@ -585,7 +600,7 @@ const i = (o) => ({
       }
     }
   }
-}), g = (o) => ({
+}), b = (o) => ({
   M4LTypography: {
     styleOverrides: {
       ["&.M4LTypography-root"]: {
@@ -597,19 +612,11 @@ const i = (o) => ({
       }
     }
   }
-}), x = (o) => ({
+}), y = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
-        "&.M4LButton-colorError .MuiButtonBase-root": {
-          backgroundColor: `${o.palette.state.error.normal}!important`
-        },
-        "&.M4LButton-colorWarning .MuiButtonBase-root": {
-          backgroundColor: `${o.palette.state.warning.normal}!important`
-        },
-        "&.M4LButton-colorSuccess .MuiButtonBase-root": {
-          backgroundColor: `${o.palette.state.success.normal}!important`
-        },
+        transition: "all 0.2s",
         width: "fit-content",
         display: "flex",
         justifyContent: "center",
@@ -626,6 +633,11 @@ const i = (o) => ({
           borderRadius: "4px",
           border: "1px solid transparent",
           ...o.typography.action,
+          backgroundColor: "#fff0",
+          "&:hover, &:focus": {
+            backgroundColor: "transparent",
+            transition: "all 0.2s"
+          },
           "& .M4LIcon-icon": {
             transition: "all .5s ease"
           },
@@ -650,37 +662,38 @@ const i = (o) => ({
             }
           },
           "&.M4LButton-variantContained": {
-            "& .MuiButtonBase-root": {
+            color: o.palette.text.disabled,
+            backgroundColor: o.palette.state.default,
+            border: "1px solid",
+            borderColor: o.palette.state.borderDisable,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.text.disabled
+            },
+            "&:hover": {
+              backgroundColor: o.palette.state?.default,
               color: o.palette.text.disabled,
               "& .M4LIcon-icon": {
-                backgroundColor: o.palette.text.disabled
-              },
-              "&:hover": {
-                backgroundColor: o.palette.state?.default,
-                color: o.palette.text.disabled,
-                "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.disabled,
-                  color: o.palette.text.disabled
-                }
-              },
-              "&:active": {
-                backgroundColor: o.palette.state?.active,
-                color: o.palette.text.primary,
-                "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.disabled,
-                  color: o.palette.text.disabled
-                }
+                backgroundColor: o.palette.text.disabled,
+                color: o.palette.text.disabled
+              }
+            },
+            "&:active": {
+              backgroundColor: o.palette.state?.active,
+              color: o.palette.text.primary,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.text.disabled,
+                color: o.palette.text.disabled
+              }
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: o.palette.state?.default,
+              color: o.palette.text.disabled,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.text.disabled,
+                color: o.palette.text.disabled
               },
-              "&.Mui-focusVisible": {
-                backgroundColor: o.palette.state?.default,
-                color: o.palette.text.disabled,
-                "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.disabled,
-                  color: o.palette.text.disabled
-                },
-                "&::before": {
-                  content: "none"
-                }
+              "&::before": {
+                content: "none"
               }
             }
           }
@@ -688,58 +701,56 @@ const i = (o) => ({
         "&.M4LButton-sizeSmall": {
           "& .MuiButtonBase-root": {
             padding: "4px 12px",
-            height: "28px",
-            minHeight: "28px"
+            height: "24px",
+            minHeight: "24px"
           },
           "&.M4LButton-skeleton": {
-            height: "28px"
+            height: "24px"
           }
         },
         "&.M4LButton-sizeMedium": {
           "& .MuiButtonBase-root": {
-            padding: "8px 16px",
-            height: "38px",
-            minHeight: "38px"
+            padding: "8px 12px",
+            height: "36px",
+            minHeight: "36px"
           },
           "&.M4LButton-skeleton": {
-            height: "38px"
+            height: "36px"
           }
         },
         "&.M4LButton-variantContained": {
-          "& .MuiButtonBase-root": {
+          backgroundColor: o.palette.state?.active,
+          color: o.palette.patronus?.marbleLight[10],
+          boxShadow: o.customShadows?.z1,
+          position: "relative",
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.patronus?.marbleLight[10]
+          },
+          "&:hover": {
+            backgroundColor: o.palette.state?.hover,
+            color: o.palette.patronus?.marbleLight[10],
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.patronus?.marbleLight[10]
+            }
+          },
+          "&.Mui-focusVisible": {
             backgroundColor: o.palette.state?.active,
             color: o.palette.patronus?.marbleLight[10],
-            boxShadow: o.customShadows?.z1,
-            position: "relative",
             "& .M4LIcon-icon": {
               backgroundColor: o.palette.patronus?.marbleLight[10]
             },
-            "&:hover": {
-              backgroundColor: o.palette.state?.hover,
-              color: o.palette.patronus?.marbleLight[10],
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.patronus?.marbleLight[10]
-              }
-            },
-            "&.Mui-focusVisible": {
-              backgroundColor: o.palette.state?.active,
-              color: o.palette.patronus?.marbleLight[10],
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.patronus?.marbleLight[10]
-              },
-              "&::before": {
-                content: "''"
-              }
+            "&::before": {
+              content: "''"
             }
           }
         },
         "&.M4LButton-variantOutlined": {
           "& .MuiButtonBase-root": {
             border: "1px solid",
-            borderColor: o.palette.state.borderDefault,
+            borderColor: o.palette.state.borderDens,
             color: o.palette.text.primary,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.secondary
+              backgroundColor: o.palette.text.primary
             },
             "&:hover": {
               borderColor: o.palette.state?.hover,
@@ -772,9 +783,9 @@ const i = (o) => ({
         },
         "&.M4LButton-variantText": {
           "& .MuiButtonBase-root": {
-            color: o.palette.text.secondary,
+            color: o.palette.text.primary,
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.secondary
+              backgroundColor: o.palette.text.primary
             },
             "&:hover": {
               backgroundColor: o.palette.state?.active12,
@@ -802,294 +813,90 @@ 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.normal}`,
+          "&:hover": {
+            backgroundColor: `${o.palette.state.error.hover}`
+          }
         },
-        "& .M4LButton-colorError": {
-          backgroundColor: o.palette.state?.error,
-          color: o.palette.patronus?.marbleLight[10],
-          boxShadow: o.customShadows?.error
+        "&.M4LButton-colorWarning": {
+          backgroundColor: `${o.palette.state.warning.normal}`,
+          "&:hover": {
+            backgroundColor: `${o.palette.state.warning.hover}`
+          }
         },
-        "& .M4LButton-colorSuccess": {
-          backgroundColor: o.palette.state?.success,
-          color: o.palette.patronus?.marbleLight[10],
-          boxShadow: o.customShadows?.success
+        "&.M4LButton-colorSuccess": {
+          backgroundColor: `${o.palette.state.success.normal}`,
+          "&:hover": {
+            backgroundColor: `${o.palette.state.success.hover}`
+          }
         }
       }
     }
   }
-}), b = (o) => ({
-  M4LoadingButton: {
+}), M = (o) => ({
+  M4LNavLink: {
     styleOverrides: {
-      "&.M4LoadingButton-root": {
-        width: "auto",
-        display: "flex",
-        justifyContent: "center",
-        "& .MuiLoadingButton-loading": {
-          "& .MuiTypography-root": {
-            color: "transparent"
-          }
-        },
-        "& .MuiCircularProgress-root": {
-          color: "#fff!important"
-        },
-        "& .MuiTypography-root": {
-          color: "#fff",
-          transition: "all .5s ease"
+      ["&.M4LNavLink-root"]: {
+        "& .M4LTypography-root": {
+          color: o.palette.state.active
         },
-        "& .M4LoadingButton-skeleton ": {
-          height: "100%!important",
-          borderRadius: "4px"
+        "&: hover": {
+          "& .M4LTypography-root": {
+            color: o.palette.state?.hover,
+            textDecoration: "underline",
+            textDecorationColor: o.palette.state?.hover
+          }
         },
-        "& .MuiButtonBase-root": {
-          display: "flex",
-          textTransform: "none",
-          gap: "8px",
-          transition: "all .5s ease",
-          borderRadius: "4px",
-          border: "1px solid transparent",
-          ...o.typography.action,
+        "& > a": {
+          textDecoration: "none"
+        }
+      }
+    }
+  }
+}), L = (o) => ({
+  M4LSideBar: {
+    styleOverrides: {
+      "&.M4LSideBar-root": {
+        height: "100%",
+        width: "auto",
+        background: o.palette.background.neutral,
+        paddingTop: "24px",
+        borderRight: "1.5px solid",
+        borderColor: o.palette.state.borderPrimary,
+        "& .M4LSideBar-subItemActive": {
           "& .M4LIcon-icon": {
-            transition: "all .5s ease"
-          },
-          "& .MuiButton-startIcon, & .MuiButton-endIcon": {
-            margin: "0px"
-          },
-          "&::before": {
-            inset: "0",
-            border: "1px solid",
-            borderColor: o.palette.state?.focus,
-            borderRadius: "4px",
-            transform: "scale(1.07, 1.36)",
-            position: "absolute",
-            boxSizing: "border-box"
+            backgroundColor: `${o.palette.state.focus}!important`
           }
         },
-        "&.M4LoadingButton-isDisabled": {
-          "& .MuiButtonBase-root": {
-            color: `${o.palette.text.disabled}!important`,
-            "& .M4LIcon-icon": {
-              backgroundColor: `${o.palette.text.disabled}!important`
-            }
-          },
-          "&.M4LoadingButton-variantContained": {
-            "& .MuiButtonBase-root": {
-              color: o.palette.text.disabled,
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.text.disabled
+        "&.M4LSideBar-collapsed": {
+          "& .M4LSideBar-wrapperSideBar": {
+            width: "50px",
+            "& .M4LSideBar-contentDesktop": {
+              "& .M4LSideBar-contentGroups": {
+                "& .M4LSideBar-itemListMainRoot": {
+                  "& .M4LSideBar-navItemMainRoot": {
+                    display: "flex",
+                    justifyContent: "center",
+                    width: "100%",
+                    "& .M4LSideBar-navItemRootContent": {
+                      padding: "0",
+                      "& .M4LSideBar-navItemRootContentIconTypo": {
+                        width: "24px",
+                        minHeight: "24px",
+                        height: "24px",
+                        minWidth: "24px",
+                        margin: "4px 0 4px 8px",
+                        "& .M4LIcon-root": {}
+                      }
+                    }
+                  }
+                }
               },
-              "&:hover": {
-                backgroundColor: o.palette.state?.default,
-                color: o.palette.text.disabled,
-                "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.disabled,
-                  color: o.palette.text.disabled
-                }
-              },
-              "&:active": {
-                backgroundColor: o.palette.state?.default,
-                color: o.palette.text.disabled,
-                "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.disabled,
-                  color: o.palette.text.disabled
-                }
-              },
-              "&.Mui-focusVisible": {
-                backgroundColor: o.palette.state?.default,
-                color: o.palette.text.disabled,
-                "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.text.disabled,
-                  color: o.palette.text.disabled
-                },
-                "&::before": {
-                  content: "none"
-                }
-              }
-            }
-          }
-        },
-        "&.M4LoadingButton-sizeSmall": {
-          height: "28px",
-          "& .MuiButtonBase-root": {
-            padding: "4px 12px"
-          },
-          "&.M4LoadingButton-skeleton": {
-            height: "28px"
-          }
-        },
-        "&.M4LoadingButton-sizeMedium": {
-          height: "38px",
-          "& .MuiButtonBase-root": {
-            padding: "8px 16px"
-          },
-          "&.M4LoadingButton-skeleton": {
-            height: "38px"
-          }
-        },
-        "&.M4LoadingButton-variantContained": {
-          "& .MuiButtonBase-root": {
-            backgroundColor: o.palette.state?.active,
-            color: o.palette.patronus?.marbleLight[10],
-            boxShadow: o.customShadows?.primary,
-            position: "relative",
-            "& .M4LTypography-root": {
-              "MuiTypography-root": {
-                color: "#fff"
-              }
-            },
-            "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.secondary
-            },
-            "&:hover": {
-              backgroundColor: o.palette.state?.hover,
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.patronus?.marbleLight[10]
-              },
-              "& .MuiTypography-root": {
-                color: "#fff"
-              }
-            },
-            "&:active": {
-              backgroundColor: o.palette.state?.active,
-              color: o.palette.patronus?.marbleLight[10],
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.patronus?.marbleLight[10]
-              }
-            },
-            "&.Mui-focusVisible": {
-              backgroundColor: o.palette.state?.active,
-              color: o.palette.patronus?.marbleLight[10],
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.patronus?.marbleLight[10]
-              },
-              "&::before": {
-                content: "''"
-              }
-            }
-          }
-        },
-        "&.M4LoadingButton-variantOutlined": {
-          "& .MuiButtonBase-root": {
-            border: "1px solid",
-            borderColor: o.palette.text.secondary,
-            color: o.palette.text.secondary,
-            "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.secondary
-            },
-            "&:hover": {
-              borderColor: o.palette.state?.hover,
-              color: o.palette.state?.hover,
-              backgroundColor: o.palette.state?.active12,
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.hover
-              }
-            },
-            "&:active": {
-              borderColor: o.palette.state?.active,
-              color: o.palette.state?.active,
-              backgroundColor: "transparent",
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
-              }
-            },
-            "&.Mui-focusVisible": {
-              borderColor: o.palette.state?.active,
-              color: o.palette.state?.active,
-              backgroundColor: "transparent",
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
-              },
-              "&::before": {
-                content: "''"
-              }
-            }
-          }
-        },
-        "&.M4LoadingButton-variantText": {
-          "& .MuiButtonBase-root": {
-            color: o.palette.text.secondary,
-            "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.secondary
-            },
-            "&:hover": {
-              backgroundColor: o.palette.state?.active12,
-              color: o.palette.state?.hover,
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.hover
-              }
-            },
-            "&:active": {
-              backgroundColor: "transparent",
-              color: o.palette.state?.active,
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
-              }
-            },
-            "&.Mui-focusVisible": {
-              backgroundColor: "transparent",
-              color: o.palette.state?.active,
-              "& .M4LIcon-icon": {
-                backgroundColor: o.palette.state?.active
-              },
-              "&:before": {
-                content: "''"
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}), M = (o) => ({
-  M4LNavLink: {
-    styleOverrides: {
-      ["&.M4LNavLink-root"]: {
-        "& .M4LTypography-root": {
-          color: o.palette.primary.main
-        },
-        "&: hover": {
-          "& .M4LTypography-root": {
-            color: o.palette.state?.hover,
-            textDecoration: "underline",
-            textDecorationColor: o.palette.state?.hover
-          }
-        },
-        "& > a": {
-          textDecoration: "none"
-        }
-      }
-    }
-  }
-}), L = (o) => ({
-  M4LSideBar: {
-    styleOverrides: {
-      "&.M4LSideBar-root": {
-        height: "100%",
-        width: "auto",
-        background: o.palette.background.neutral,
-        paddingLeft: "0",
-        paddingBottom: "14px",
-        "& .M4LSideBar-subItemActive": {
-          "& .M4LIcon-icon": {
-            backgroundColor: `${o.palette.state.focus}!important`
-          }
-        },
-        "&.M4LSideBar-collapsed": {
-          "& .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"
-                  }
+              "& .M4LSideBar-collapseButton": {
+                padding: "12px",
+                "& .M4LSideBar-containerLogoButtonLogo": {
+                  display: "none"
                 }
               }
             }
@@ -1129,10 +936,7 @@ const i = (o) => ({
               },
               "& .M4LImage-root": {
                 position: "relative",
-                background: o.palette.background.default,
-                boxShadow: o.customShadows.z3,
                 padding: "6px",
-                borderRadius: "6px",
                 minWidth: "50px !important",
                 minHeight: "50px !important"
               }
@@ -1152,7 +956,11 @@ const i = (o) => ({
             },
             "& .M4LSideBar-wrapperGroup": {
               height: "100%",
-              paddingLeft: "10px",
+              padding: "0 8px",
+              "& .M4LScrollBar-root": {
+                height: "100%",
+                gap: "8px"
+              },
               "& .M4LSideBar-wrapperGroupTitle": {
                 height: "60px",
                 "& .M4LTypography-root": {
@@ -1197,7 +1005,8 @@ const i = (o) => ({
                       },
                       "& .M4LTypography-root": {
                         "& .MuiTypography-root": {
-                          color: o.palette.state.focus
+                          color: o.palette.state.focus,
+                          ...o.typography.paragraphDens
                         }
                       },
                       "& .M4LSideBar-arrowIconRoot .M4LIcon-icon": {
@@ -1213,10 +1022,11 @@ const i = (o) => ({
                     },
                     "&::before": {
                       content: '""',
-                      width: "4px",
+                      width: "2px",
+                      height: "100%",
                       top: "0px",
                       bottom: "0px",
-                      right: "0px",
+                      left: "0px",
                       backgroundColor: o.palette.state.focus,
                       borderRadius: "4px 0px 0px 4px",
                       position: "absolute"
@@ -1225,7 +1035,7 @@ const i = (o) => ({
                 },
                 "& .M4LSideBar-navItemRootContent": {
                   display: "flex",
-                  padding: "8px",
+                  padding: "8px 8px 8px 12px",
                   justifyContent: "center",
                   borderRadius: "4px 0px 0px 4px",
                   position: "relative",
@@ -1339,13 +1149,11 @@ const i = (o) => ({
           },
           "& .M4LSideBar-collapseButton": {
             display: "flex",
-            paddingTop: "12px",
+            padding: "12px 16px 12px 40px",
             borderTop: "1px solid",
-            borderColor: o.palette.state.overdefoult,
+            borderColor: o.palette.state.borderPrimary,
             justifyContent: "flex-end",
-            marginRight: "14px",
-            marginLeft: "14px",
-            gap: "40px",
+            gap: "24px",
             alignItems: "center",
             height: "48px",
             minHeight: "48px",
@@ -1357,11 +1165,18 @@ const i = (o) => ({
             },
             "& .M4LSideBar-containerLogoButtonLogo": {
               width: "120px",
-              height: "32px",
-              "& .M4LSideBar-containerLogoButtonIcon": {
-                display: "flex",
-                alignItems: "center"
-              }
+              height: "24px",
+              display: "flex",
+              alignItems: "center",
+              background: o.palette.background.default,
+              borderRadius: "4px"
+            },
+            "& .M4LSideBar-containerLogoButtonIcon": {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              width: "40px",
+              height: "24px"
             }
           }
         }
@@ -1522,7 +1337,7 @@ const i = (o) => ({
                 borderRadius: "4px 0px 0px 4px",
                 justifyContent: "center",
                 flexDirection: "column",
-                padding: "0px 0px 8px 0px",
+                padding: "0px 0px 4px 0px",
                 gap: "4px",
                 "& .M4LSideBar-navItemMainRoot": {
                   backgroundColor: "transparent",
@@ -1707,18 +1522,18 @@ const i = (o) => ({
             },
             "& .M4LSideBar-containerLogoButtonLogo": {
               width: "120px",
-              height: "32px",
-              "& .M4LSideBar-containerLogoButtonIcon": {
-                display: "flex",
-                alignItems: "center"
-              }
+              height: "32px"
+            },
+            "& .M4LSideBar-containerLogoButtonIcon": {
+              display: "flex",
+              alignItems: "center"
             }
           }
         }
       }
     }
   }
-}), y = (o) => ({
+}), f = (o) => ({
   M4LAreasAdmin: {
     styleOverrides: {
       "&.M4LAreasAdmin-root": {
@@ -1754,6 +1569,7 @@ const i = (o) => ({
           justifyContent: "center",
           alignItems: "center",
           gap: "4px",
+          padding: "4px",
           [o.breakpoints.down("sm")]: {
             gap: "0px",
             borderRadius: "4px"
@@ -1792,8 +1608,7 @@ const i = (o) => ({
             flexDirection: "row",
             width: "100%",
             overflow: "auto",
-            height: "36px",
-            borderRight: "1px solid",
+            height: "32px",
             borderColor: o.palette.state.overdefoult,
             [o.breakpoints.down("sm")]: {
               background: "none",
@@ -1834,11 +1649,16 @@ const i = (o) => ({
                 display: "flex",
                 flexDirection: "row",
                 width: "fit-content",
+                height: "100%",
                 justifyContent: "space-between",
                 [o.breakpoints.down("sm")]: {
                   width: "100%",
                   background: "none"
                 },
+                "& .simplebar-mask .simplebar-offset ": {
+                  display: "flex",
+                  alignItems: "center"
+                },
                 "& .M4LAreasAdmin-areaContentChips": {
                   display: "flex",
                   width: "fit-content",
@@ -1852,6 +1672,8 @@ const i = (o) => ({
                 },
                 "& .M4LAreasAdmin-areaChipMobileRoot": {
                   width: "100%",
+                  border: "0",
+                  background: o.palette.background.default,
                   "& .M4LAreasAdmin-areaChipRoot": {
                     width: "100%",
                     paddingLeft: "8px",
@@ -1860,6 +1682,8 @@ const i = (o) => ({
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis",
+                    gap: "4px",
+                    background: o.palette.background.default,
                     "& .M4LAreasAdmin-areaChipRoot": {
                       width: "100%"
                     }
@@ -1871,198 +1695,191 @@ const i = (o) => ({
                 maxWidth: "100%",
                 [o.breakpoints.down("sm")]: {
                   width: "100%"
-                },
-                "& .simplebar-height-auto-observer-wrapper": {
-                  width: "fit-content",
-                  maxWidth: "100%",
-                  overflow: "auto"
-                },
-                "& .simplebar-mask": {
-                  "& .simplebar-offset": {
-                    "& .simplebar-content-wrapper": {
+                }
+              },
+              "& .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",
-                      maxWidth: "100%",
-                      overflow: "auto",
-                      "& .simplebar-content": {
-                        width: "fit-content",
-                        overflow: "auto"
-                      }
+                      overflow: "auto"
                     }
                   }
-                },
-                "& .simplebar-content-wrapper": {
+                }
+              },
+              "& .simplebar-content-wrapper": {
+                width: "fit-content",
+                "& .M4LAreasAdmin-areaChipRoot ": {
+                  margin: "0px",
+                  borderRadius: "4px",
+                  overflow: "hidden",
                   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-areaChipEditButton": {
-                      transition: "all ease 0.3s",
-                      opacity: "0"
-                    },
-                    "&:hover .M4LAreasAdmin-areaChipEditButton": {
-                      transition: "all ease 0.3s",
-                      opacity: "1"
-                    }
-                  }
-                },
-                "& .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",
-                    overflow: "hidden",
-                    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",
-                  borderRadius: "0px 0px 0px 0px",
-                  boxShadow: o.customShadows.z2,
-                  ...o.typography.body,
-                  color: o.palette.text.primary,
+                  cursor: "pointer",
                   [o.breakpoints.down("sm")]: {
+                    background: "none",
+                    border: "none",
                     boxShadow: "none",
                     width: "100%"
-                  },
-                  "& .M4LIconButton-root": {
-                    background: "transparent",
-                    backgroundColor: "transparent",
-                    "& .M4LIcon-icon": {}
                   }
+                }
+              },
+              "& .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%"
                 },
-                "& .MuiBox-root": {
-                  display: "flex",
-                  alignItems: "center",
-                  height: "100%"
-                },
-                "& .simplebar-content": {
-                  display: "flex",
-                  alignItems: "center"
+                "&:hover": {
+                  background: o.palette.state.active12
                 },
                 "& .M4LAreasAdmin-areaChipRoot ": {
-                  display: "flex",
-                  background: o.palette.background.default,
-                  borderRadius: "4px 4px 4px 4px",
-                  marginRight: "8px",
-                  minHeight: "26px",
-                  width: "fit-content",
-                  gap: "8px",
-                  paddingLeft: "8px",
-                  alignItems: "center",
+                  margin: "0px",
+                  borderRadius: "4px 0px 0px 4px",
+                  overflow: "hidden",
+                  width: "100%",
+                  position: "relative",
                   [o.breakpoints.down("sm")]: {
                     background: "none",
                     border: "none",
-                    borderColor: "none",
                     boxShadow: "none"
-                  },
-                  "& .M4LAreasAdmin-areaContainerChipEditButton": {
-                    display: "flex",
-                    width: "fit-content"
-                  },
+                  }
+                },
+                "& .M4LAreasAdmin-selected .": {
                   [o.breakpoints.down("sm")]: {
-                    height: "auto"
-                  },
-                  "&.M4LAreasAdmin-selected": {
-                    background: o.palette.state.active,
-                    ...o.typography.body,
-                    color: o.palette.text.primary,
-                    height: "22px",
-                    [o.breakpoints.down("sm")]: {
-                      height: "auto",
-                      background: "none"
-                    },
-                    "& .M4LAreasAdmin-areaChipTitle": {
-                      backgroundColor: "transparent",
-                      border: "none",
-                      textWrap: "nowrap",
-                      width: "auto",
-                      display: "flex",
-                      alignItems: "center",
-                      color: o.palette.patronus?.marbleLight[10],
-                      ...o.typography.action,
-                      [o.breakpoints.down("sm")]: {
-                        display: "inline",
-                        fontSize: "14px",
-                        textOverflow: "ellipsis",
-                        overflow: "hidden",
-                        whiteSpace: "nowrap",
-                        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]}`,
-                        [o.breakpoints.down("sm")]: {
-                          color: o.palette.text.primary
-                        }
-                      }
-                    }
+                    background: "none"
+                  }
+                }
+              },
+              "& .M4LAreasAdmin-areaChipMobileIconContainer": {
+                display: "flex",
+                width: "fit-content",
+                borderLeft: "1px solid",
+                borderColor: o.palette.divider,
+                borderRadius: "0px 0px 0px 0px",
+                boxShadow: o.customShadows.z2,
+                ...o.typography.body,
+                color: o.palette.text.primary,
+                [o.breakpoints.down("sm")]: {
+                  boxShadow: "none"
+                },
+                "& .M4LIconButton-root": {
+                  background: "transparent",
+                  backgroundColor: "transparent",
+                  "& .M4LIcon-icon": {}
+                }
+              },
+              "& .MuiBox-root": {
+                display: "flex",
+                alignItems: "center",
+                height: "100%"
+              },
+              "& .simplebar-content": {
+                display: "flex",
+                alignItems: "center"
+              },
+              "& .M4LAreasAdmin-areaChipRoot ": {
+                display: "flex",
+                background: o.palette.background.default,
+                borderRadius: "4px 4px 4px 4px",
+                minHeight: "24px",
+                width: "fit-content",
+                gap: "4px",
+                paddingLeft: "8px",
+                alignItems: "center",
+                [o.breakpoints.down("sm")]: {
+                  background: "none",
+                  border: "none",
+                  borderColor: "none",
+                  boxShadow: "none"
+                },
+                "&.M4LAreasAdmin-selected": {
+                  background: o.palette.state.active,
+                  ...o.typography.body,
+                  color: o.palette.text.primary,
+                  height: "22px",
+                  [o.breakpoints.down("sm")]: {
+                    height: "auto",
+                    background: "none"
                   },
                   "& .M4LAreasAdmin-areaChipTitle": {
                     backgroundColor: "transparent",
                     border: "none",
                     textWrap: "nowrap",
                     width: "auto",
+                    minWidth: "30px",
+                    justifyContent: "center",
                     display: "flex",
                     alignItems: "center",
-                    color: o.palette.text.secondary,
-                    ...o.typography.body
+                    color: o.palette.patronus?.marbleLight[10],
+                    ...o.typography.action,
+                    [o.breakpoints.down("sm")]: {
+                      display: "inline",
+                      fontSize: "14px",
+                      textOverflow: "ellipsis",
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      flex: "1",
+                      color: o.palette.text.primary
+                    }
                   },
                   "& .M4LIconButton-root": {
-                    display: "flex",
-                    justifyContent: "center",
-                    width: "20px",
-                    height: "20px",
                     [o.breakpoints.down("sm")]: {
                       color: o.palette.text.primary
                     },
-                    "&.M4LIconButton-variantPrimary": {
-                      background: o.palette.state.active,
+                    "& .M4LIcon-icon": {
+                      backgroundColor: `${o.palette.patronus?.marbleLight[10]}`,
                       [o.breakpoints.down("sm")]: {
                         color: o.palette.text.primary
                       }
                     }
                   }
+                },
+                "& .M4LAreasAdmin-areaChipTitle": {
+                  backgroundColor: "transparent",
+                  border: "none",
+                  textWrap: "nowrap",
+                  width: "auto",
+                  minWidth: "30px",
+                  justifyContent: "center",
+                  display: "flex",
+                  alignItems: "center",
+                  color: o.palette.text.secondary,
+                  ...o.typography.action
+                },
+                "& .M4LAreasAdmin-areaContainerChipEditButton": {
+                  display: "flex",
+                  width: "fit-content"
+                },
+                "& .M4LIconButton-root": {
+                  display: "flex",
+                  justifyContent: "center",
+                  width: "20px",
+                  height: "20px",
+                  [o.breakpoints.down("sm")]: {
+                    color: o.palette.text.primary
+                  },
+                  "&.M4LIconButton-variantPrimary": {
+                    background: o.palette.state.active,
+                    [o.breakpoints.down("sm")]: {
+                      color: o.palette.text.primary
+                    }
+                  }
                 }
               }
             }
@@ -2073,7 +1890,9 @@ const i = (o) => ({
             borderRadius: "0px 4px 4px 0px",
             borderColor: o.palette.background.background
           },
-          "& .M4LAreasAdmin-areasAddButton": {},
+          "& .M4LAreasAdmin-areasAddButton": {
+            background: o.palette.state.default
+          },
           "&.M4LAreasAdmin-isMobile": {
             overflow: "hidden",
             boxShadow: o.customShadows.z1,
@@ -2095,11 +1914,9 @@ const i = (o) => ({
         "& .MuiPaper-root": {
           width: "200px",
           "& .M4LRHFormProvider-root": {
-            "& .M4LRHFTextField-root": {
-              paddingBottom: "4px"
-            },
+            "& .M4LRHFTextField-root": {},
             "& .M4LCommonActions-root": {
-              padding: "16px 0 8px 0px"
+              padding: "16px 0 0px 0px"
             }
           }
         }
@@ -2136,12 +1953,12 @@ const i = (o) => ({
         test: "root",
         background: o.palette.background.background,
         "& .M4LGridLayout-gridItemRoot.M4LGridLayout-colapsed-40 .M4LAreasViewer-windowHeader": {
-          minHeight: "36px",
-          height: "36px"
+          minHeight: "38px",
+          height: "38px"
         },
         "& .M4LGridLayout-gridItemRoot.M4LGridLayout-colapsed-48 .M4LAreasViewer-windowHeader": {
-          minHeight: "44px",
-          height: "44px"
+          minHeight: "50px",
+          height: "50px"
         },
         "& .M4LAreasViewer-areaGridLayout": {
           "& .M4LAreasViewer-resizeHandle": {
@@ -2152,10 +1969,11 @@ const i = (o) => ({
             }
           },
           "& .M4LAreasViewer-windowRoot": {
-            background: o.palette.background.background,
-            border: "2px solid",
-            borderColor: o.palette.state.overdefoult,
-            boxShadow: "unset",
+            background: o.palette.background.neutral,
+            border: "1.5px solid",
+            borderTop: "none",
+            borderColor: o.palette.state.borderPrimary,
+            boxShadow: o.customShadows.z2,
             borderRadius: "4px",
             display: "flex",
             "&:not(.M4LAreasViewer-loading)": {
@@ -2168,7 +1986,7 @@ const i = (o) => ({
             },
             "&.react-colapsed": {
               border: "1px solid",
-              borderColor: o.palette.state.borderDefault
+              borderColor: o.palette.state.borderPrimary
             },
             "& .M4LAreasViewer-windowRootContainer": {
               display: "flex",
@@ -2178,16 +1996,13 @@ const i = (o) => ({
               overflow: "hidden"
             },
             "& .M4LAreasViewer-windowHeader": {
+              borderTop: "2px solid",
+              borderColor: o.palette.state.borderPrimary,
               display: "flex",
               flexDirection: "column",
               background: o.palette.background.neutral,
-              padding: "4px 4px 4px 8px",
-              border: "none",
+              padding: "6px 4px 6px 8px",
               boxShadow: o.customShadows.z1,
-              height: "36px",
-              [o.breakpoints.down("sm")]: {
-                height: "44px"
-              },
               "& .M4LAreasViewer-windowHeaderContent": {
                 display: "flex",
                 width: "100%",
@@ -2198,18 +2013,19 @@ const i = (o) => ({
                   alignItems: "center",
                   overflow: "hidden",
                   width: "100%",
-                  padding: "0 12px",
+                  padding: "0 8px",
                   height: "100%",
                   "& .MuiTypography-root": {
                     whiteSpace: "nowrap",
                     overflow: "hidden",
                     textOverflow: "ellipsis",
-                    width: "100%"
+                    width: "100%",
+                    color: o.palette.text.secondary
                   }
                 }
               },
               "& .M4LTypography-root .MuiTypography-root": {
-                ...o.typography.paragraph,
+                ...o.typography.paragraphDens,
                 color: o.palette.text.primary,
                 overflow: "visible"
               }
@@ -2253,7 +2069,7 @@ const i = (o) => ({
                     alignItems: "center",
                     padding: "8px",
                     ...o.typography.body,
-                    color: o.palette.patronus?.ashBlak[60],
+                    color: o.palette.patronus?.onyx[60],
                     position: "relative",
                     "& .MuiLinearProgress-root": {
                       position: "absolute",
@@ -2305,7 +2121,7 @@ const i = (o) => ({
                     "& .M4LAreasViewer-windowToastyButtonsContainer": {
                       background: o.palette.warning.main,
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.patronus?.ashBlak[50]
+                        backgroundColor: o.palette.patronus?.onyx[50]
                       },
                       "& .M4LAreasViewer-pinIn": {
                         background: o.palette.state.warning.hover,
@@ -2322,7 +2138,7 @@ const i = (o) => ({
                     "& .M4LAreasViewer-windowToastyButtonsContainer": {
                       background: o.palette.success.main,
                       "& .M4LIcon-icon": {
-                        backgroundColor: o.palette.patronus?.ashBlak[50]
+                        backgroundColor: o.palette.patronus?.onyx[50]
                       },
                       "& .M4LAreasViewer-pinIn": {
                         background: o.palette.state.success.hover,
@@ -2338,8 +2154,8 @@ const i = (o) => ({
               }
             },
             "& .M4LAreasViewer-windowContent": {
-              padding: "4px",
-              background: o.palette.background.background,
+              padding: "0 12px 12px 12px",
+              background: o.palette.background.neutral,
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
@@ -2348,7 +2164,23 @@ const i = (o) => ({
               flex: "1",
               overflow: "hidden",
               [o.breakpoints.up("sm")]: {
-                padding: "4px"
+                padding: "0 12px 12px 12px"
+              },
+              "& .M4LAreasViewer-containerComponent": {
+                display: "flex",
+                width: "100%",
+                height: "100%",
+                overflow: "auto"
+              },
+              "& .M4LAreasViewer-loaderContainer": {
+                width: "100%",
+                height: "100%",
+                overflow: "auto",
+                display: "flex"
+              },
+              "& .M4LPrintingSystem-root": {
+                position: "relative",
+                margin: "auto"
               },
               "& .M4LAreasViewer-containerLinearProgress": {
                 width: "100%",
@@ -2362,23 +2194,27 @@ const i = (o) => ({
               }
             },
             "&.M4LAreasViewer-selectedWindow": {
-              border: "2px solid",
-              borderColor: t(o.palette.state.active, 0.5),
-              boxShadow: o.customShadows.primary,
+              border: "1.5px solid",
+              borderTop: "none",
+              borderColor: o.palette.state.borderDens,
+              boxShadow: o.customShadows.z3,
               backdropFilter: "blur(100px)",
               "& .M4LAreasViewer-windowHeader": {
+                borderTop: "2px solid",
+                borderColor: o.palette.state.lineTheme,
                 display: "flex",
                 flexDirection: "column",
-                background: o.palette.state.toneOp,
+                background: o.palette.background.neutral,
                 gap: "4px",
                 alignItems: "center",
                 position: "relative",
-                padding: "4px 4px 4px 8px",
+                padding: "6px 4px 6px 8px",
                 justifyContent: "end",
                 overflow: "hidden",
                 cursor: "move",
                 "& .M4LTypography-root .MuiTypography-root": {
-                  ...o.typography.paragraphDens
+                  ...o.typography.paragraphDens,
+                  color: o.palette.text.primary
                 },
                 "& .MuiButtonBase-root": {
                   "& .M4LIcon-icon": {
@@ -2399,8 +2235,14 @@ const i = (o) => ({
             }
           },
           "&.M4LGridLayout-root .M4LGridLayout-maximizeMe": {
+            borderTop: "0",
+            borderLeft: "1.5px solid",
+            borderRight: "1.5px solid",
+            borderBottom: "1.5px solid",
+            borderColor: o.palette.state.borderPrimary,
+            borderRadius: "4px",
             "& .M4LAreasViewer-windowContent": {
-              padding: "4px 0 0 0"
+              padding: "0 12px 12px 12px"
             },
             "& .M4LAreasViewer-selectedWindow": {
               borderColor: "transparent",
@@ -2419,12 +2261,10 @@ const i = (o) => ({
             background: o.palette.state.active12
           },
           "& .M4LAreasViewer-windowPopupRoot": {
-            boxShadow: o.customShadows.z3,
-            padding: "4px",
-            background: o.palette.state.default,
+            boxShadow: o.customShadows.z4,
+            border: "none",
+            background: o.palette.background.default,
             borderRadius: "4px",
-            border: "1px solid",
-            borderColor: o.palette.text.disabled,
             backdropFilter: "blur(8px)",
             "& .M4LIcon-root.custom-handle": {
               "& .M4LIcon-icon": {
@@ -2439,11 +2279,18 @@ const i = (o) => ({
               }
             },
             "& .M4LAreasViewer-windowRootContainer": {
-              background: o.palette.background.neutral,
+              background: o.palette.background.default,
               borderRadius: "4px",
+              border: "2px solid",
+              borderColor: o.palette.state.borderPrimary,
               "& .M4LAreasViewer-windowHeader": {
                 boxShadow: "none",
-                background: o.palette.state.default,
+                borderTopLeftRadius: "4px",
+                borderTopRightRadius: "4px",
+                background: o.palette.background.header,
+                border: "none",
+                height: "36px",
+                minHeight: "36px",
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
                     width: "18px",
@@ -2454,15 +2301,18 @@ const i = (o) => ({
                   }
                 },
                 "& .M4LTypography-root .MuiTypography-root": {
-                  ...o.typography.paragraph,
+                  ...o.typography.paragraphDens,
                   color: o.palette.text.secondary,
                   overflow: "visible"
                 }
+              },
+              "& .M4LAreasViewer-windowContent": {
+                background: o.palette.background.default
               }
             },
             "& .M4LAreasViewer-windowRoot": {
               padding: "4px",
-              background: o.palette.background.neutral,
+              background: o.palette.background.default,
               borderRadius: "4px",
               borderColor: o.palette.state.overdefoult,
               "&:not(.M4LAreasViewer-loading)": {
@@ -2498,20 +2348,20 @@ const i = (o) => ({
               }
             },
             "&.M4LAreasViewer-selectedWindow": {
-              border: "2px solid",
-              borderColor: t(o.palette.state.active, 0.5),
+              border: "none",
               background: o.palette.state.active12,
               boxShadow: o.customShadows.z3,
-              padding: "6px",
               [o.breakpoints.down("sm")]: {
                 padding: "0"
               },
               "& .M4LAreasViewer-windowRootContainer": {
                 boxShadow: o.customShadows.z2,
+                border: "2px solid",
+                borderColor: t(o.palette.state.active, 0.5),
                 "& .M4LAreasViewer-windowHeader": {
-                  background: o.palette.state.skeleton,
-                  borderRadius: "4px",
-                  boxShadow: o.customShadows.z1,
+                  background: o.palette.state.active12,
+                  borderTopLeftRadius: "4px",
+                  borderTopRightRadius: "4px",
                   "& .M4LIcon-root": {
                     "& .M4LIcon-icon": {
                       backgroundColor: o.palette.text.primary
@@ -2529,11 +2379,12 @@ const i = (o) => ({
         },
         "& .M4LAreasViewer-panelWindowsRoot": {
           background: o.palette.background.neutral,
-          boxShadow: o.customShadows.z2,
           display: "flex",
           alignItems: "center",
           padding: "8px",
           gap: "8px",
+          borderLeft: "1.5px solid",
+          borderColor: o.palette.state.borderPrimary,
           "& .M4LAreasViewer-panelWindowsButtonContainer": {
             borderRadius: "2px",
             background: o.palette.state.default,
@@ -2549,60 +2400,6 @@ const i = (o) => ({
               }
             }
           }
-        },
-        "& .M4LAreasViewer-areasLoadingErrorRoot": {
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          alignItems: "center",
-          position: "relative",
-          inset: "0",
-          overflow: "hidden",
-          width: "100%",
-          height: "100%",
-          "& .M4LAreasViewer-areasLoadingError": {
-            display: "flex",
-            padding: "12px",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            gap: "12px",
-            position: "absolute",
-            inset: "0",
-            "& .M4LIcon-root": {
-              display: "flex",
-              padding: "12px",
-              marginBottom: "4px",
-              " .M4LIcon-icon": {
-                width: "100px",
-                height: "100px",
-                backgroundColor: o.palette.state.skeleton.default
-              }
-            },
-            "& .M4LAreasViewer-areasLoadingErrorTitle": {
-              ...o.typography.h3,
-              color: o.palette.text.primary,
-              [o.breakpoints.down("sm")]: {
-                ...o.typography.h5
-              }
-            },
-            "& .M4LAreasViewer-areasLoadingErrorDescription": {
-              ...o.typography.subtitle,
-              color: o.palette.text.secondary
-            },
-            "& .M4LAreasViewer-areasLoadingErrorDivider": {
-              width: "208px",
-              height: "1px",
-              background: o.palette.state.skeleton.default
-            },
-            "& .MuiTypography-paragraph": {
-              ...o.typography.body,
-              color: o.palette.text.primary
-            },
-            "& .MuiButtonBase-root": {
-              marginTop: "4px"
-            }
-          }
         }
       }
     }
@@ -2612,18 +2409,19 @@ const i = (o) => ({
       "&.M4LAreasViewer-windowModalRoot .M4LAreasViewer-windowRoot": {
         borderRadius: "4px",
         boxShadow: o.customShadows.z4,
-        background: o.palette.background.background,
+        background: o.palette.background.default,
+        border: "2px solid",
+        borderColor: o.palette.state.borderDens,
         "& .M4LAreasViewer-windowContent": {
           borderRadius: "4px",
-          boxShadow: o.customShadows.z4,
-          background: o.palette.background.background
+          background: o.palette.background.default
         },
         "& .M4LAreasViewer-windowHeaderTitle": {
           display: "flex",
           alignItems: "center",
           overflow: "auto",
           width: "100%",
-          padding: "0 12px",
+          padding: "0 8px",
           height: "100%",
           "& .MuiTypography-root": {
             whiteSpace: "nowrap",
@@ -2687,7 +2485,7 @@ const i = (o) => ({
           }
         },
         "& .MuiBackdrop-root": {
-          background: t(`${o.palette.patronus?.ashBlak[60]}`, 0.8)
+          background: t(`${o.palette.patronus?.onyx[60]}`, 0.8)
         },
         "&:not(.M4LAreasViewer-loading)": {
           "& .M4LinearProgressIndeterminate-root": {
@@ -2701,7 +2499,7 @@ const i = (o) => ({
           display: "flex",
           flexDirection: "column",
           height: "100%",
-          background: o.palette.background.background,
+          background: o.palette.background.default,
           borderRadius: "4px",
           boxShadow: o.customShadows.z4,
           overflow: "hidden",
@@ -2709,9 +2507,10 @@ const i = (o) => ({
             cursor: "all-scroll",
             display: "flex",
             flexDirection: "column",
-            padding: "4px 4px 4px 8px",
+            padding: "6px 4px 6px 8px",
             borderRadius: "4px",
             border: "none",
+            background: o.palette.state.active12,
             "& .M4LTypography-root .MuiTypography-root": {
               ...o.typography.paragraph,
               color: o.palette.text.primary,
@@ -2724,8 +2523,8 @@ const i = (o) => ({
             }
           },
           "& .M4LAreasViewer-windowContent": {
-            margin: "0 8px 8px 8px",
-            background: o.palette.background.neutral,
+            padding: "0 12px 12px 12px",
+            background: o.palette.background.default,
             borderRadius: "4px",
             display: "flex",
             flexDirection: "column",
@@ -2750,29 +2549,49 @@ const i = (o) => ({
       }
     }
   }
-}), f = (o) => ({
+}), h = (o) => ({
   M4LAppBar: {
     styleOverrides: {
       "&.M4LAppBar-root": {
         display: "flex",
         width: "auto",
         overflow: "hidden",
+        minHeight: "52px",
         height: "52px",
         alignItems: "center",
-        padding: "4px",
+        padding: "8px 16px",
         background: o.palette.background.neutral,
-        borderBottom: "1px solid",
-        borderColor: o.palette.state.overdefoult,
+        borderBottom: "1.5px solid",
+        borderColor: o.palette.state.borderPrimary,
         justifyContent: "space-between",
+        gap: "40px",
         [o.breakpoints.down("sm")]: {
           width: "100%",
           marginLeft: "0",
           gap: "12px"
         },
-        "& .M4LAppBar-containerIconMenuToggle": {
-          display: "flex",
-          alingItems: "center",
-          width: "36px",
+        "& .M4LAppBar-containerLogo": {
+          "& .M4LImage-root": {
+            width: "34px",
+            height: "34px",
+            backgroundColor: o.palette.background.default,
+            borderRadius: "4px",
+            padding: "2px"
+          },
+          "& .M4LAppBar-containerImageTypography": {
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            "& .M4LTypography-root": {
+              textWrap: "nowrap",
+              textTransform: "uppercase"
+            }
+          }
+        },
+        "& .M4LAppBar-containerIconMenuToggle": {
+          display: "flex",
+          alingItems: "center",
+          width: "36px",
           height: "36px",
           minWidth: "36px",
           minHeight: "36px",
@@ -2848,32 +2667,27 @@ const i = (o) => ({
           }
         }
       }
-    },
-    "*css-1gn3ygk": {
-      overflow: "hidden"
     }
   }
-}), h = (o) => ({
+}), v = (o) => ({
   M4LAvatar: {
     styleOverrides: {
       "&.M4LAvatar-root": {
         "& .MuiAvatar-root": {
-          width: "36px",
-          height: "36px",
+          width: "32px",
+          height: "32px",
           borderRadius: "4px",
           padding: "4px",
-          background: o.palette.background.default,
-          color: o.palette.state.active,
+          background: e.blazeOrange[50],
+          color: e.marbleLight[30],
           boxShadow: o.customShadows.z1,
-          borderTop: "1.5px solid",
-          ...o.typography.subtitle,
-          borderColor: o.palette.state.borderTop
+          ...o.typography.subtitle
         },
         test: "root"
       }
     }
   }
-}), v = (o) => ({
+}), k = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -2883,128 +2697,159 @@ const i = (o) => ({
   },
   M4LAccountPopoverPopover: {
     styleOverrides: {
-      "&.M4LAccountPopover-popover": {
+      "& .M4LAccountPopover-popover": {
         display: "flex",
         flexDirection: "column",
         gap: "0px",
+        borderRadius: "6px"
+      },
+      "& .MuiPaper-root": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        padding: "12px",
         borderRadius: "6px",
-        "& .MuiPaper-root": {
+        boxShadow: o.customShadows.z3,
+        background: o.palette.background.default,
+        "& .M4LAccountPopover-containerUserInfo": {
           display: "flex",
           flexDirection: "column",
-          gap: "0px",
-          padding: "12px",
-          borderRadius: "6px",
-          boxShadow: o.customShadows.z3,
-          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": {
+          gap: "8px",
+          "& .M4LAccountPopover-containerUserName": {
             display: "flex",
             flexDirection: "row",
             gap: "4px",
-            padding: "0px 10px",
-            "& .M4LAccountPopover-labelVersion": {
-              color: o.palette.text.secondary,
-              ...o.typography.paragraph,
-              padding: "4px"
+            padding: "0px 4px",
+            "& .M4LIcon-root": {
+              minWidth: "16px",
+              minHeight: "16px"
+            },
+            "& .M4LAccountPopover-labelUserName": {
+              color: o.palette.text.primary,
+              ...o.typography.bodyDens,
+              width: "100%",
+              minHeight: "20px"
             }
           },
-          "& .M4LAccountPopover-containerMenuItems": {
-            borderTop: "2px solid",
-            borderBottom: "2px solid",
-            borderColor: o.palette.state.default,
-            padding: "4px",
-            margin: "12px 0 12px 0",
+          "& .M4LAccountPopover-containerUserEmail": {
             display: "flex",
             flexDirection: "row",
             gap: "4px",
-            "& .M4LAccountPopover-containerSetting": {
-              display: "flex",
-              flexDirection: "row",
-              gap: "4px",
+            padding: "0px 4px",
+            "& .M4LIcon-root": {
+              minWidth: "16px",
+              minHeight: "16px"
+            },
+            "& .M4LAccountPopover-labelUserEmail": {
+              color: o.palette.text.primary,
+              ...o.typography.body,
               width: "100%",
-              borderRadius: "4px",
-              padding: "0px 8px",
-              cursor: "pointer",
-              "&:hover": {
-                background: o.palette.state.default
-              },
-              "& .M4LAccountPopover-menuItem": {
-                padding: "4px",
-                borderRadius: "4px"
-              }
+              minHeight: "20px"
             }
+          }
+        },
+        "& .M4LAccountPopover-containerAppVersion": {
+          display: "flex",
+          flexDirection: "row",
+          gap: "4px",
+          padding: "0px 4px",
+          "& .M4LIcon-root": {
+            minWidth: "16px",
+            minHeight: "16px"
+          },
+          "& .M4LAccountPopover-labelVersion": {
+            color: o.palette.text.secondary,
+            ...o.typography.body,
+            width: "100%",
+            minHeight: "20px"
+          }
+        },
+        "& .M4LAccountPopover-containerMenuItems": {
+          borderTop: "1.5px solid",
+          borderBottom: "1.5px solid",
+          borderColor: o.palette.state.default,
+          padding: "8px 4px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          "& .M4LAccountPopover-containerProgress": {
+            display: "flex",
+            justifyContent: "start",
+            alignItems: "center"
           },
-          "& .M4LAccountPopover-containerlogOut": {
+          "& .M4LAccountPopover-containerSetting": {
             display: "flex",
             flexDirection: "row",
             gap: "4px",
-            padding: "0px 12px",
-            borderRadius: "4px",
             width: "100%",
-            alignItems: "center",
+            borderRadius: "4px",
             cursor: "pointer",
             "&:hover": {
               background: o.palette.state.default
             },
-            "& .M4LAccountPopover-logOut": {
-              padding: "4px",
-              borderRadius: "4px",
+            "& .M4LIcon-root": {
+              minWidth: "16px",
+              minHeight: "16px"
+            },
+            "& .M4LAccountPopover-menuItem": {
               color: o.palette.text.primary,
-              ...o.typography.paragraph
+              ...o.typography.body,
+              borderRadius: "4px",
+              width: "100%",
+              minHeight: "20px"
             }
+          }
+        },
+        "& .M4LAccountPopover-containerlogOut": {
+          display: "flex",
+          flexDirection: "row",
+          gap: "4px",
+          padding: "0 4px",
+          borderRadius: "4px",
+          width: "100%",
+          alignItems: "center",
+          cursor: "pointer",
+          "&:hover": {
+            background: o.palette.state.default
           },
-          "& .M4LPopover-arrowStyle": {
-            display: "none",
-            "& .M4LAccountPopover-containerUserInfo": {
+          "& .M4LIcon-root": {
+            minWidth: "16px",
+            minHeight: "16px"
+          },
+          "& .M4LAccountPopover-logOut": {
+            color: o.palette.text.primary,
+            ...o.typography.body,
+            borderRadius: "4px",
+            width: "100%",
+            minHeight: "20px"
+          }
+        },
+        "& .M4LPopover-arrowStyle": {
+          display: "none",
+          "& .M4LAccountPopover-containerUserInfo": {
+            display: "flex",
+            "& .M4LAccountPopover-containerUserName": {
               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": {}
-            }
+              flexDirection: "row",
+              gap: "4px"
+            },
+            "& .M4LAccountPopover-containerUserEmail": {
+              display: "flex",
+              flexDirection: "row",
+              gap: "4px"
+            },
+            "& .M4LAccountPopover-containerAppVersion": {
+              display: "flex",
+              flexDirection: "row",
+              gap: "4px"
+            },
+            "& .M4LAccountPopover-logOut": {}
           }
         }
       }
     }
   }
-}), k = (o) => ({
+}), C = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -3015,12 +2860,13 @@ const i = (o) => ({
           display: "flex",
           width: "100%",
           height: "100%",
+          overflow: "auto",
           borderRadius: "6px"
         }
       }
     }
   }
-}), C = (o) => ({
+}), I = (o) => ({
   M4LMasterDetailLayout: {
     styleOverrides: {
       "&.M4LMasterDetailLayout-root": {
@@ -3037,14 +2883,25 @@ const i = (o) => ({
           border: "0px",
           borderColor: "transparent",
           borderRadius: "6px",
-          overFlow: "visible"
+          overFlow: "visible",
+          "& .splitter-layout": {
+            gap: "4px"
+          }
+        },
+        "& .M4LSplitLayout-secondPart": {
+          background: o.palette.background.default,
+          borderRadius: "6px",
+          padding: "8px"
         },
-        "& .M4LSplitLayout-secondPart": {},
-        "& .layout-pane-primary": {}
+        "& .layout-pane-primary": {
+          background: o.palette.background.default,
+          borderRadius: "6px",
+          padding: "8px"
+        }
       }
     }
   }
-}), I = (o) => ({
+}), B = (o) => ({
   M4LSplitLayout: {
     styleOverrides: {
       "&.M4LSplitLayout-root": {
@@ -3132,40 +2989,40 @@ const i = (o) => ({
           zIndex: "1"
         },
         "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
-          background: o.palette.state.focus
+          background: o.palette.state.hover
         },
         "& .splitter-layout.splitter-layout-vertical": {
           flexDirection: "column",
           position: "relative",
           "& .layout-splitter:after": {
             content: '""',
-            height: "1px",
+            height: "2px",
             left: "0",
             right: "0",
             position: "absolute",
-            background: o.palette.state.overdefoult
+            background: o.palette.state.borderPrimary
           }
         },
         "& .splitter-layout:not(.splitter-layout-vertical)": {
           "& .layout-splitter:after": {
             content: '""',
-            width: "1px",
+            width: "2px",
             top: "0",
             bottom: "0",
             position: "absolute",
-            background: o.palette.state.overdefoult
+            background: o.palette.state.borderPrimary
           }
         }
       }
     }
   }
-}), B = (o) => ({
+}), m = (o) => ({
   M4LCommonActions: {
     styleOverrides: {
       "&.M4LCommonActions-root": {
-        padding: "16px 0px 8px 0px",
+        padding: "16px 0px 0px 0px",
         display: "flex",
-        gap: "14px",
+        gap: "16px",
         justifyContent: "flex-end",
         width: "100%",
         overflow: "visible"
@@ -3226,28 +3083,113 @@ const i = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), R = (o) => ({
   M4LPropertyValue: {
     styleOverrides: {
       "&.M4LPropertyValue-root": {
         test: "root",
-        "&:hover": {
-          backgroundColor: o.palette.state?.default
+        display: "grid",
+        alignItems: "flex-start",
+        width: "100%",
+        minHeight: "32px",
+        flexDirection: "column",
+        borderBottom: "1px solid",
+        borderColor: o.palette.state.borderDisable,
+        [o.breakpoints.up("sm")]: {
+          gap: "8px",
+          alignItems: "center"
+        },
+        "&.M4LPropertyValue-isMobile": {
+          gridTemplateColumns: "1fr!important",
+          minHeight: "24px"
+        },
+        "&.M4LPropertyValue-variantIsForm": {
+          minHeight: "32px"
+        },
+        "& .M4LPropertyValue-property": {
+          width: "100%",
+          ...o.typography.body,
+          color: o.palette.text.secondary,
+          height: "100%",
+          display: "flex",
+          alignItems: "left",
+          justifyContent: "flex-start",
+          position: "relative",
+          gap: "8px",
+          [o.breakpoints.up("sm")]: {
+            textAlign: "left",
+            justifyContent: "flex-start",
+            alignItems: "center",
+            height: "100%"
+          },
+          overflow: "hidden",
+          overflowWrap: "break-word",
+          "& .M4LTypography-root": {
+            ...o.typography.body,
+            color: o.palette.text.secondary
+          }
+        },
+        "& .M4LPropertyValue-value": {
+          width: "100%",
+          minHeight: "20px",
+          ...o.typography.body,
+          color: o.palette.text.primary,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          marginTop: o.spacing(1),
+          [o.breakpoints.up("sm")]: {
+            marginTop: "0px"
+          },
+          overflowWrap: "break-word",
+          "& .M4LTypography-root": {
+            ...o.typography.body,
+            color: o.palette.text.primary
+          },
+          "& .M4LRHFTextField-root.M4LRHFTextField-sizeSmall": {
+            "& .MuiFormControl-root": {
+              "& .MuiInputBase-root": {
+                borderRadius: "0",
+                background: "transparent",
+                "& .MuiOutlinedInput-notchedOutline": {
+                  border: "0",
+                  borderRadius: "0"
+                }
+              }
+            }
+          },
+          "& .M4LRHFTextField-root.M4LRHFTextField-sizeMedium": {
+            "& .MuiFormControl-root": {
+              "& .MuiInputBase-root": {
+                borderRadius: "0",
+                background: "transparent",
+                "& .MuiOutlinedInput-notchedOutline": {
+                  border: "0",
+                  borderRadius: "0"
+                }
+              }
+            }
+          }
         }
       }
     }
   }
-}), R = (o) => ({
+}), A = (o) => ({
   M4LTab: {
     styleOverrides: {
       "&.M4LTab-root": {
         width: "fit-content",
+        background: o.palette.background.header,
+        borderRadius: "4px 4px 0 0",
         "& .MuiButtonBase-root": {
+          background: o.palette.background.header,
           height: "36px",
           display: "flex",
           flexDirection: "row",
           alignItems: "center",
-          padding: "4px 12px 4px 12px",
+          padding: "4px 16px 4px 8px",
           width: "fit-content",
           minHeight: "fit-content",
           minWidth: "fit-content",
@@ -3286,7 +3228,7 @@ const i = (o) => ({
       }
     }
   }
-}), A = (o) => ({
+}), P = (o) => ({
   M4LAccordion: {
     styleOverrides: {
       "&.M4LAccordion-root": {
@@ -3295,46 +3237,53 @@ const i = (o) => ({
         borderRadius: "4px",
         "& .M4LTypography-root": {
           "& .MuiTypography-root": {
-            ...o.typography.body,
+            ...o.typography.bodyDens,
             color: o.palette.text.primary
           }
         },
         "& .MuiPaper-root": {
           background: o.palette.background.neutral,
           marginBottom: "0px",
-          borderRadius: "4px"
+          borderRadius: "4px",
+          border: "1px solid",
+          borderColor: o.palette.state.borderPrimary
         }
       },
       "& .MuiButtonBase-root": {
-        padding: "4px 8px 4px 8px",
-        borderRadius: "4px 4px 0px 0px",
-        "&:hover": {
-          background: o.palette.state.default
-        },
-        "&.MuiAccordionSummary-root.Mui-expanded": {
-          background: o.palette.state.toneOp,
-          "& .M4LTypography-root": {
-            "& .MuiTypography-root": {
-              ...o.typography.bodyDens,
-              color: o.palette.text?.primary
-            }
-          },
-          "& .MuiAccordionSummary-expandIconWrapper": {
-            transform: "rotate(0deg)"
-          },
-          "& .M4LAccordion-endIcon": {
-            transform: "rotate(90deg)"
-          },
-          "& .M4LIconButton-root": {}
+        padding: "4px 8px",
+        borderRadius: "4px",
+        height: "32px",
+        minHeight: "32px",
+        "&:hover": {},
+        "&.MuiAccordionSummary-root": {
+          background: o.palette.background.default,
+          "& .Mui-expanded": {
+            background: o.palette.state.active12,
+            borderRadius: "4px 4px 0px 0px",
+            height: "32px",
+            minHeight: "32px",
+            "& .M4LTypography-root": {
+              "& .MuiTypography-root": {
+                ...o.typography.bodyDens,
+                color: o.palette.text?.primary
+              }
+            },
+            "& .MuiAccordionSummary-expandIconWrapper": {
+              transform: "rotate(0deg)"
+            },
+            "& .M4LAccordion-endIcon": {
+              transform: "rotate(90deg)"
+            },
+            "& .M4LIconButton-root": {}
+          }
         },
         test: "root"
       },
       "& .MuiCollapse-root": {
         background: o.palette.background.default,
-        borderTop: "1px solid",
-        borderColor: o.palette.state.default,
+        borderColor: o.palette.state.borderPrimary,
         borderRadius: "0px 0px 4px 4px",
-        padding: "0",
+        padding: "8px",
         "& .M4LAccordion-content": {
           "& .M4LPropertyValue-root:last-of-type": {
             borderBottom: "unset"
@@ -3351,8 +3300,9 @@ const i = (o) => ({
         flexDirection: "column",
         width: "100%",
         height: "auto",
+        gap: "8px",
         "& .M4LCommonActions-root": {
-          padding: "16px 16px 8px 0px"
+          padding: "16px 0px 0px 0px"
         }
       }
     }
@@ -3361,74 +3311,88 @@ const i = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
-        border: "solid 1px",
-        borderColor: o.palette.state.overdefoult,
+        border: "solid 1.3px",
+        borderColor: o.palette.state.borderPrimary,
         display: "flex",
         width: "100%",
-        gap: "2px",
+        minHeight: "24px",
+        height: "fit-content",
         borderRadius: "4px",
-        padding: "4px 0 4px 4px",
         "& .M4LPeriod-stateReadOnly": {},
         "& .M4LPeriod-gap": {
           backgroundColor: "transparent"
         },
         "& .M4LIcon-root": {
-          margin: "0px 8px"
+          padding: "0 8px",
+          minHeight: "24px",
+          minWidth: "24px"
         },
         "& .M4LPeriod-containerDateLabel": {
           width: "100%",
-          borderRadius: "2px",
-          border: "solid 1px",
-          borderColor: o.palette.state.overdefoult,
+          borderRight: "solid 1.3px",
+          borderColor: o.palette.state.borderPrimary,
           padding: "0px 0px 0px 8px"
         },
         "& .M4LPeriod-containerDateValue": {
           display: "flex",
           width: "100%",
-          borderRadius: "2px",
-          border: "solid 1px",
-          borderColor: o.palette.state.overdefoult,
+          borderRight: "solid 1.3px",
+          borderColor: o.palette.state.borderPrimary,
           padding: "0px 0px 0px 8px"
         },
         "&:not(.M4LPeriod-stateReadOnly).M4LPeriod-variantMonoperiod": {
           width: "100%",
+          minHeight: "24px",
+          height: "fit-content",
           "& .MuiAutocomplete-root": {
             width: "100%",
-            borderRadius: "2px",
-            borderColor: o.palette.state.borderDefault,
+            minHeight: "24px",
+            height: "fit-content",
+            borderColor: o.palette.state.borderPrimary,
             "& .MuiFormControl-root": {
+              minHeight: "24px",
+              height: "fit-content",
               width: "100%",
-              border: "solid 1px",
-              borderColor: o.palette.state.overdefoult
-            },
-            "& .MuiInputBase-root": {
-              width: "100%",
-              borderRadius: "2px",
-              paddingLeft: "4px",
-              background: "transparent",
-              "& .MuiInputBase-input": {
-                padding: "0px"
+              borderRight: "solid 1.3px",
+              borderColor: o.palette.state.borderPrimary,
+              "& .MuiInputBase-root": {
+                minHeight: "24px",
+                width: "100%",
+                gap: "16px",
+                padding: "0 0 0 8px",
+                background: "transparent",
+                "& .MuiInputBase-input": {
+                  padding: "0"
+                },
+                "& .MuiAutocomplete-endAdornment": {
+                  position: "relative",
+                  minHeight: "24px",
+                  "& .MuiButtonBase-root": {
+                    padding: "0",
+                    display: "inline",
+                    margin: "0",
+                    height: "24px"
+                  }
+                }
               }
             }
           },
           "& .MuiTextField-root": {
             width: "100%",
-            borderRadius: "2px",
-            border: "solid 1px",
-            borderColor: o.palette.state.overdefoult,
+            minHeight: "24px",
+            height: "fit-content",
+            borderRight: "solid 1.3px",
+            borderColor: o.palette.state.borderPrimary,
             "& .MuiInputBase-root": {
-              borderRadius: "2px",
-              paddingLeft: "4px",
+              minHeight: "24px",
+              padding: "0 0 0 4px",
               background: "transparent"
             },
             "& .MuiInputBase-root.Mui-focused": {
-              borderRadius: "2px",
               paddingLeft: "4px",
               borderColor: o.palette.state.active
             },
             "& .MuiInputBase-root:hover": {
-              height: "100%",
-              borderRadius: "2px",
               paddingLeft: "4px",
               background: o.palette.state.active12,
               padding: "0px 0px 0px 4px"
@@ -3453,9 +3417,8 @@ const i = (o) => ({
             width: "100%",
             background: "transparent",
             "& .MuiInputBase-root:hover": {
-              borderRadius: "2px",
               paddingLeft: "4px",
-              background: "transparent",
+              background: o.palette.error.opacity,
               height: "100%"
             }
           }
@@ -3465,14 +3428,13 @@ const i = (o) => ({
           boxShadow: o.customShadows.z2,
           "&.M4LPeriod-stateWarning:hover": {
             borderColor: o.palette.state.warning.normal,
-            background: "transparent",
             boxShadow: o.customShadows.z2,
+            background: "transparent",
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                borderRadius: "2px",
-                paddingLeft: "4px",
-                background: "transparent"
+                background: o.palette.warning.opacity,
+                paddingLeft: "4px"
               }
             }
           }
@@ -3482,14 +3444,13 @@ const i = (o) => ({
           boxShadow: o.customShadows.z2,
           "&.M4LPeriod-stateSuccess:hover": {
             borderColor: o.palette.state.success.normal,
-            background: "transparent",
             boxShadow: o.customShadows.z2,
+            background: "transparent",
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                borderRadius: "2px",
-                paddingLeft: "4px",
-                background: "transparent"
+                background: o.palette.success.opacity,
+                paddingLeft: "4px"
               }
             }
           }
@@ -3504,9 +3465,8 @@ const i = (o) => ({
             "& .MuiTextField-root:hover": {
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                borderRadius: "2px",
                 paddingLeft: "4px",
-                background: "transparent"
+                background: o.palette.info.opacity
               }
             }
           }
@@ -3514,7 +3474,7 @@ const i = (o) => ({
       }
     }
   }
-}), P = (o) => ({
+}), F = (o) => ({
   M4LModalDialog: {
     styleOverrides: {
       "&.M4LModal-root": {
@@ -3531,7 +3491,7 @@ const i = (o) => ({
           maxHeight: "unset",
           background: o.palette.state.active12,
           border: "2px solid",
-          borderColor: o.palette.state.toneOp,
+          borderColor: o.palette.state.borderPrimary,
           boxShadow: o.customShadows.z3,
           [o.breakpoints.down("sm")]: {
             width: "100%",
@@ -3553,11 +3513,11 @@ const i = (o) => ({
             height: "100%",
             overflow: "hidden",
             width: "100%",
-            background: o.palette.background.background,
+            background: o.palette.background.default,
             boxShadow: o.customShadows.z3,
             borderRadius: "4px",
             "& .M4LCommonActions-root": {
-              padding: "16px 0 8px 0px",
+              padding: "16px 0 0 0",
               margin: "0px",
               width: "100%",
               height: "fit-content",
@@ -3573,8 +3533,8 @@ const i = (o) => ({
               alignItems: "center",
               height: "100%",
               width: "100%",
-              padding: "24px 12px 0px 12px",
-              background: o.palette.background.neutral,
+              overflow: "auto",
+              gap: "12px",
               "& .M4LModal-modalContent": {
                 display: "flex",
                 flexDirection: "column",
@@ -3624,55 +3584,38 @@ const i = (o) => ({
               "& .M4LModal-iconCloseHeader": {}
             },
             "& .M4LModal-windowContent": {
-              padding: "0 8px",
+              padding: "24px",
               width: "100%",
               height: "100%",
               display: "flex",
               flexDirection: "column",
               flex: "1",
-              overflow: "hidden",
-              [o.breakpoints.down("sm")]: {
-                padding: "0 8px 8px 8px"
-              }
-            }
-          },
-          "& .react-resizable": {
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center",
-            "& .M4LIcon-root": {
-              "& .M4LIcon-icon": {
-                background: o.palette.text.secondary,
-                boxShadow: o.customShadows.z1
-              }
+              overflow: "hidden"
             }
           }
         }
       }
     }
   }
-}), z = (o) => ({
+}), H = (o) => ({
   M4LPaperForm: {
     styleOverrides: {
       "&.M4LPaperForm-root": {
         padding: "0",
         borderRadius: "4px",
-        boxShadow: o.customShadows.z2,
         background: o.palette.background.default,
         border: "1px solid",
-        borderColor: o.palette.state.default,
+        borderColor: o.palette.state.borderSecondary,
         width: "100%",
         height: "auto",
         "& .M4LPaperForm-headerContainer": {
           width: "100%",
-          height: "36px",
-          minHeight: "36px",
-          padding: "4px 8px",
+          height: "28px",
+          minHeight: "28px",
+          padding: "2px 4px 2px 8px",
           margin: "0px",
           borderRadius: "4px",
-          background: o.palette.state.default,
-          boxShadow: o.customShadows.z1,
+          background: o.palette.background.header,
           borderBottom: "none",
           [o.breakpoints.down("sm")]: {
             height: "44px",
@@ -3691,12 +3634,14 @@ const i = (o) => ({
         "& .M4LPaperForm-content": {
           height: "fit-content",
           width: "100%",
-          padding: "8px 0"
+          padding: "12px",
+          color: o.palette.text.primary,
+          ...o.typography.body
         }
       }
     }
   }
-}), F = (o) => ({
+}), V = (o) => ({
   M4LTooltip: {
     styleOverrides: {
       "&.M4LTooltip-root": {
@@ -3704,24 +3649,20 @@ const i = (o) => ({
         "& .MuiTooltip-tooltip": {
           display: "flex",
           alignItems: "center",
-          background: o.palette.background.default,
+          background: o.palette.info.main,
           borderRadius: "4px",
           boxShadow: o.customShadows.z3,
           padding: "4px 8px",
           height: "fit-content",
           minHeight: "24px",
           width: "fit-content",
-          margin: "4px 2px 2px 2px",
-          marginTop: "0px",
-          color: o.palette.text.primary,
-          borderTop: "1.5px solid",
-          borderColor: o.palette.state.borderTop,
+          color: e.marbleLight[30],
           ...o.typography.body
         }
       }
     }
   }
-}), V = (o) => ({
+}), z = (o) => ({
   M4LBadge: {
     styleOverrides: {
       "&.M4LBadge-root": {
@@ -3737,11 +3678,16 @@ const i = (o) => ({
             width: "16px",
             lineHeight: "1px",
             textAlign: "center",
-            backgroundColor: o.palette.state.active,
+            paddingBottom: "1px",
+            paddingLeft: "7px",
+            borderRadius: "4px",
+            border: "1px solid",
+            borderColor: o.palette.background.default,
+            backgroundColor: o.palette.state.error.normal,
             height: "16px",
             top: "14%",
             right: "16%",
-            color: o.palette.patronus?.marbleLight[10]
+            color: o.palette.patronus?.marbleLight[30]
           }
         }
       }
@@ -3754,21 +3700,21 @@ const i = (o) => ({
         background: o.palette.background.default,
         boxShadow: "unset",
         borderRadius: "4px",
+        border: "1px solid",
+        borderColor: o.palette.state.borderPrimary,
         display: "flex",
         position: "relative",
         flexDirection: "column",
         gap: "4px",
         height: "100%",
-        borderTop: "1.5",
-        borderColor: o.palette.state.borderTop,
         width: "100%",
         "& .M4LDataGrid-actions": {
           ...o.typography.body,
           left: "0px",
           right: "0px",
           top: "0px",
-          height: "36px",
-          padding: "0px 4px 0 8px",
+          height: "42px",
+          padding: "8px",
           display: "flex",
           flexDirection: "row",
           borderRadius: "4px",
@@ -3786,7 +3732,7 @@ const i = (o) => ({
             gap: "8px",
             marginLeft: "12px",
             "& .M4LIconButton-root": {
-              background: o.palette.state.default
+              background: o.palette.background.default
             }
           },
           "& .M4LDataGrid-rowsCount": {
@@ -3796,14 +3742,14 @@ const i = (o) => ({
             "& .M4LDataGrid-rowsCountLabel": {
               ...o.typography.body,
               color: o.palette.text.primary,
-              heigth: "100%"
+              height: "100%"
             },
             "& .M4LDataGrid-rowsCountValue": {
               paddingTop: "4px",
               paddingBottom: "2px",
               paddingLeft: "4px",
               paddingRight: "6px",
-              background: o.palette.state.overdefoult,
+              background: o.palette.background.default,
               borderRadius: "4px"
             }
           },
@@ -3817,11 +3763,13 @@ const i = (o) => ({
           display: "flex",
           flexDirection: "column",
           position: "absolute",
-          top: "36px",
+          top: "42px",
           bottom: "0px",
           left: "0px",
           right: "0px",
           overflow: "hidden",
+          padding: "0 4px",
+          borderRadius: "4px",
           border: "none",
           boxshadow: o.customShadows.z2,
           background: o.palette.background.default,
@@ -3832,6 +3780,7 @@ const i = (o) => ({
             position: "relative",
             height: "100%",
             overflow: "hidden",
+            borderRadius: "4px",
             "& .rdg ": {
               border: "none",
               background: o.palette.background.default,
@@ -3842,9 +3791,8 @@ const i = (o) => ({
               contentVisibility: "unset",
               overflow: "auto",
               padding: "0px",
-              borderColor: "none",
               "--rdg-grid-inline-size": "0px",
-              "--rdg-header-background-color": o.palette.background.background,
+              "--rdg-header-background-color": o.palette.background.header,
               "--rdg-row-selected-background-color": "#D9E9FC",
               "--rdg-row-hover-background-color": "#D9E9FC",
               "--rdg-background-color": o.palette.background.default,
@@ -3857,8 +3805,11 @@ const i = (o) => ({
               ),
               "--rdg-border-color": "none",
               "&:last-child .rdg-cell": {
-                borderBottom: "1px solid !important",
-                borderColor: `${o.palette.background.background}!important`,
+                borderTop: "0",
+                borderBottom: "1px solid",
+                borderLeft: "0",
+                borderRight: "0",
+                borderColor: o.palette.state.borderDisable,
                 test: "bruce"
               }
             },
@@ -3872,7 +3823,7 @@ const i = (o) => ({
               },
               "&:nth-of-type(odd)": {
                 "& .rdg-cell": {
-                  backgroundColor: o.palette.background.neutral
+                  backgroundColor: o.palette.background.default
                 }
               },
               '&[aria-selected="true"] .rdg-cell': {
@@ -3927,7 +3878,7 @@ const i = (o) => ({
               color: o.palette.text.primary
             },
             "& .rdg-cell.rdg-cell-align-left": {
-              textAlign: "center",
+              textAlign: "start",
               display: "inline",
               justifyContent: "center",
               alignItems: "center"
@@ -3947,18 +3898,19 @@ const i = (o) => ({
               borderColor: o.palette.background.neutral
             },
             "& .rdg-header-row": {
-              backgroundColor: o.palette.background.neutral
+              backgroundColor: o.palette.background.header,
+              borderColor: "transparent"
             },
             "& .rdg-header-row .rdg-cell": {
-              fontFamily: o.typography.subtitle,
-              fontWeight: o.typography.subtitle,
-              fontSize: o.typography.subtitle,
+              fontFamily: o.typography.body,
+              fontWeight: o.typography.body,
+              fontSize: o.typography.body,
               color: o.palette.text.primary,
               borderRight: "1px solid",
               boxShadow: "none",
               gridTemplateColumns: "auto",
               borderBottom: "1px solid !important",
-              borderColor: `${o.palette.background.background}!important`,
+              borderColor: `${o.palette.background.default}!important`,
               "&.rdg-cell-frozen-last": {
                 borderColor: o.palette.background.default,
                 "&:after": {
@@ -3967,10 +3919,17 @@ const i = (o) => ({
                 },
                 boxShadow: "var(--rdg-frozen-cell-box-shadow)"
               },
-              "& .rdg-sort-arrow": {
-                width: o.spacing(1),
-                margin: `0 ${o.spacing(0.5)}`
-              }
+              "& .rdg-header-sort-cell": {
+                "& .rdg-header-sort-name + span": {
+                  position: "absolute",
+                  margin: "auto",
+                  right: "5px",
+                  "& .rdg-sort-arrow": {
+                    width: "8px"
+                  }
+                }
+              },
+              "& .rdg-sort-arrow": {}
             },
             "& .rdg-header-row :last-child.rdg-cell": {
               borderTopRightRadius: "0",
@@ -3987,12 +3946,6 @@ const i = (o) => ({
               flexGrow: "1",
               alignItems: "center",
               color: o.palette.text.primary
-            },
-            '& [aria-columnsort="ASC"]': {
-              borderTop: `2px solid ${o.palette.primary.main}`
-            },
-            '& [aria-columnsort="DESC"]': {
-              borderBottom: `2px solid ${o.palette.primary.main}`
             }
           }
         },
@@ -4014,7 +3967,7 @@ const i = (o) => ({
       }
     }
   }
-}), H = (o) => ({
+}), W = (o) => ({
   M4LPager: {
     styleOverrides: {
       "&.M4LPager-root": {
@@ -4032,7 +3985,7 @@ const i = (o) => ({
           alignItems: "center",
           gap: "2px",
           width: "fit-content",
-          background: o.palette.state.default,
+          background: o.palette.background.default,
           borderRadius: "4px",
           [o.breakpoints.down("sm")]: {
             gap: "4px",
@@ -4061,13 +4014,11 @@ const i = (o) => ({
         "& .MuiInputBase-root": {
           padding: "4px 2px 4px 6px",
           borderRadius: "4px",
-          background: o.palette.background.background,
+          background: o.palette.background.default,
           overflow: "hidden",
           minWidth: "fit-content",
           "& .MuiSvgIcon-root": {
-            background: o.palette.background.neutral,
-            borderRight: "1px solid",
-            borderColor: o.palette.background.background
+            background: o.palette.background.default
           }
         },
         "& .M4LPager-skeletonRoot": {
@@ -4104,7 +4055,7 @@ const i = (o) => ({
       }
     }
   }
-}), W = (o) => ({
+}), j = (o) => ({
   M4LCheckBox: {
     styleOverrides: {
       "&.M4LCheckBox-root": {
@@ -4115,51 +4066,52 @@ const i = (o) => ({
           color: o.palette.text.primary,
           ...o.typography.body
         },
-        ".M4LCheckBox-small .MuiButtonBase-root": {
+        "& .M4LCheckBox-small .MuiButtonBase-root": {
           width: "20px",
           height: "20px"
         },
-        ".MuiCheckbox-root .MuiSvgIcon-fontSizeSmall": {
+        "& .MuiCheckbox-root .MuiSvgIcon-fontSizeSmall": {
           width: "16px",
           height: "16px"
         },
-        ".M4LCheckBox-medium .MuiButtonBase-root": {
+        "& .M4LCheckBox-medium .MuiButtonBase-root": {
           width: "24px",
           height: "24px"
         },
-        ".MuiCheckbox-root .MuiSvgIcon-fontSizeMedium": {
+        "& .MuiCheckbox-root .MuiSvgIcon-fontSizeMedium": {
           width: "20px",
           height: "20px"
         },
-        ".MuiButtonBase-root": {
+        "& .MuiButtonBase-root": {
           borderRadius: "4px"
         },
-        ".MuiButtonBase-root:hover": {
-          backgroundColor: o.palette.state?.active12
+        "& .MuiButtonBase-root:hover": {
+          backgroundColor: o.palette.state?.active12,
+          borderRadius: "4px"
         },
-        ".Mui-focusVisible": {
+        "& .Mui-focusVisible": {
           border: "1px solid",
           borderColor: o.palette.state?.focus
         },
-        ".MuiButtonBase-root:hover .MuiSvgIcon-root": {
+        "& .MuiButtonBase-root:hover .MuiSvgIcon-root": {
           fill: o.palette.state?.hover
         },
-        ".M4LCheckBox-checkTypography .MuiTypography-root": {
+        "& .M4LCheckBox-checkTypography .MuiTypography-root": {
           ...o.typography.body
         },
-        ".M4LCheckBox-stateDisabled .MuiSvgIcon-root": {
+        "& .M4LCheckBox-stateDisabled .MuiSvgIcon-root": {
           fill: o.palette.state?.default
         },
-        ".M4LCheckBox-stateDisabled .MuiTypography-root": {
+        "& .M4LCheckBox-stateDisabled .MuiTypography-root": {
           color: o.palette.text.disabled
         },
-        ".MuiButtonBase-root .Mui-focusVisible:focus-visible": {
+        "& .MuiButtonBase-root .Mui-focusVisible:focus-visible": {
           outline: "#fff00"
         }
       }
     }
   }
-}), j = (o) => ({
+}), G = (o) => ({
   M4LStack: {
     styleOverrides: {
       "&.M4LStack-root": {
@@ -4171,7 +4123,7 @@ const i = (o) => ({
       }
     }
   }
-}), G = (o) => ({
+}), N = (o) => ({
   M4LTabs: {
     styleOverrides: {
       "&.M4LTabs-root": {
@@ -4179,11 +4131,27 @@ const i = (o) => ({
         height: "auto",
         position: "relative",
         minHeight: "36px",
-        borderRadius: "0px",
+        borderRadius: "4px 4px 0 0",
+        "& .MuiButtonBase-root": {
+          background: o.palette.background.background,
+          borderRadius: "4px 4px 0 0",
+          "& .MuiSvgIcon-root": {
+            color: o.palette.text.primary
+          }
+        },
+        "& .MuiButtonBase-root:hover": {
+          "& .MuiSvgIcon-root": {
+            color: o.palette.state.active
+          }
+        },
         "& .MuiTabs-scroller": {
+          borderRadius: "4px 4px 0 0",
           "& .MuiTabs-flexContainer": {
             padding: "0px",
-            backgroundColor: "transparent"
+            backgroundColor: "transparent",
+            background: o.palette.background.header,
+            width: "fit-content",
+            borderRadius: "4px 4px 0 0"
           }
         },
         "&:not(:last-of-type)": {
@@ -4252,59 +4220,7 @@ const i = (o) => ({
       }
     }
   }
-}), N = (o) => ({
-  M4LToolkitPage: {
-    styleOverrides: {
-      "&.M4LToolkitPage-root": {
-        display: "flex",
-        flexDirection: "column",
-        overflow: "auto",
-        border: "1px solid",
-        width: "2550px",
-        height: "3300px",
-        padding: "300px"
-      }
-    }
-  }
 }), U = (o) => ({
-  M4LToolkitSection: {
-    styleOverrides: {
-      "&.M4LToolkitSection-root": {
-        width: "100%",
-        height: "auto",
-        display: "flex",
-        border: "1px solid transparent",
-        padding: "10px",
-        gap: "10px",
-        "&.M4LToolkitSection-directionColumn": {
-          flexDirection: "column"
-        },
-        "&.M4LToolkitSection-directionRow": {
-          flexDirection: "row"
-        },
-        "&.M4LToolkitSection-borderBottom": {
-          borderBottomColor: o.palette.state.overdefoult
-        }
-      }
-    }
-  }
-}), X = (o) => ({
-  M4LToolkitDivider: {
-    styleOverrides: {
-      "&.M4LToolkitDivider-root": {
-        backgroundColor: o.palette.state.overdefoult,
-        "&.M4LToolkitDivider-directionHorizontal": {
-          width: "100%",
-          height: "1px"
-        },
-        "&.M4LToolkitDivider-directionVertical": {
-          width: "1px",
-          height: "100%"
-        }
-      }
-    }
-  }
-}), Y = (o) => ({
   M4LTabContent: {
     styleOverrides: {
       "&.M4LTabContent-root": {
@@ -4316,14 +4232,32 @@ const i = (o) => ({
         gap: "4px",
         background: o.palette.background.default,
         borderRadius: "0 0 4px 4px",
-        position: "relative"
+        position: "relative",
+        flex: 1
       }
     }
   }
-}), q = (o) => ({
+}), X = (o) => ({
   M4LMenuActions: {
     styleOverrides: {
       "&.M4LMenuActions-root": {
+        "& .MuiPaper-root": {
+          display: "flex",
+          flexDirection: "column",
+          background: o.palette.background.default,
+          gap: "8px",
+          "& .MuiButtonBase-root": {
+            display: "flex",
+            justifyContent: "center",
+            minHeight: "24px",
+            minWidth: "24px",
+            padding: "0",
+            "& .M4LIcon-root": {},
+            "& .css-hgjo64": {
+              margin: "0"
+            }
+          }
+        },
         "& .M4LMenuActions-itemDelete": {
           color: o.palette.state.error.normal,
           "& .M4LIcon-root .M4LIcon-icon": {
@@ -4333,51 +4267,576 @@ const i = (o) => ({
       }
     }
   }
+}), Y = (o) => ({
+  M4LPrintingSystem: {
+    styleOverrides: {
+      "&.M4LPrintingSystem-root": {
+        position: "absolute",
+        backgroundColor: "#fff",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        overflow: "visible",
+        color: "#5C6A6C",
+        top: 0,
+        left: 0,
+        right: 0,
+        height: "auto",
+        "& .M4LPrintingSystem-pageNodeRoot": {
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          pageBreakBefore: "always",
+          backgroundColor: "#fff"
+        },
+        "& .M4LPrintingSystem-sectionNodeRoot": {
+          display: "flex",
+          overflow: "hidden"
+        },
+        "& .M4LPrintingSystem-headerNodeRoot": {
+          display: "flex",
+          justifyContent: "space-between",
+          overflow: "hidden"
+        },
+        "& .M4LPrintingSystem-footerNodeRoot": {
+          display: "flex",
+          justifyContent: "space-between",
+          overflow: "hidden"
+        },
+        "& .M4LPrintingSystem-textBoxNodeRoot": {
+          height: "auto",
+          "&.M4LPrintingSystem-textBoxNodeVariant-h1": {
+            ...o.typography.h1,
+            fontSize: "18px!important"
+          },
+          "&.M4LPrintingSystem-textBoxNodeVariant-h3": {
+            ...o.typography.subtitle
+          },
+          "&.M4LPrintingSystem-textBoxNodeVariant-body": {
+            ...o.typography.body
+          },
+          "&.M4LPrintingSystem-textBoxNodeVariant-action": {
+            ...o.typography.action
+          }
+        },
+        "& .M4LPrintingSystem-bodyNodeRoot": {
+          display: "flex",
+          flex: "1"
+        },
+        "& .M4LPrintingSystem-paperNodeRoot": {
+          display: "flex",
+          flexDirection: "column",
+          "& .M4LPrintingSystem-paperNodeContainerTitles": {
+            display: "flex",
+            padding: "4px",
+            border: "2px",
+            backgroundColor: "#F0F2F2",
+            "& .M4LPrintingSystem-paperNodeTitle": {
+              ...o.typography.subtitleDens,
+              fontSize: "12px!important",
+              color: "#364040"
+            },
+            "& .M4LPrintingSystem-paperNodeTitleSecondary": {
+              ...o.typography.subtitleDens,
+              fontSize: "12px!important",
+              paddingLeft: "10px",
+              marginLeft: "10px",
+              borderLeft: "1px solid",
+              borderColor: "#A7B4B9"
+            }
+          },
+          "& .M4LPrintingSystem-paperNodeContent": {
+            padding: "8px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px"
+          }
+        },
+        "& .M4LPrintingSystem-propertyValueNodeRoot": {
+          display: "flex",
+          "&.M4LPrintingSystem-propertyValueNodeVertical": {
+            flexDirection: "row",
+            "& .M4LPrintingSystem-propertyValueNodeContent": {
+              padding: "4px 0px 4px 8px"
+            },
+            "& .M4LPrintingSystem-propertyValueNodeTitle": {
+              padding: "4px"
+            }
+          },
+          "&.M4LPrintingSystem-propertyValueNodeHorizontal": {
+            flexDirection: "column",
+            "& .M4LPrintingSystem-propertyValueNodeContent": {
+              padding: "4px 0",
+              border: "unset"
+            },
+            "& .M4LPrintingSystem-propertyValueNodeTitle": {
+              padding: "4px 0"
+            }
+          },
+          "& .M4LPrintingSystem-propertyValueNodeTitle": {
+            ...o.typography.body,
+            color: "#323B3B",
+            borderBottom: "1px solid",
+            borderColor: "#323B3B"
+          },
+          "& .M4LPrintingSystem-propertyValueNodeContent": {
+            ...o.typography.body,
+            width: "100%",
+            borderBottom: "1px solid",
+            borderColor: "#E9EBEB"
+          }
+        },
+        "& .M4LPrintingSystem-dividerNodeRoot": {
+          backgroundColor: o.palette.state.borderDefault,
+          "&.M4LPrintingSystem-dividerNodeVertical": {
+            width: "1px",
+            height: "100%"
+          },
+          "&.M4LPrintingSystem-dividerNodeHorizontal": {
+            height: "1px",
+            width: "100%"
+          }
+        },
+        "& .M4LPrintingSystem-gridNodeRoot": {
+          borderCollapse: "collapse",
+          "& .M4LPrintingSystem-gridNodeTh": {
+            display: "flex",
+            alignItems: "center",
+            padding: "2px 10px",
+            height: "40px",
+            borderRadius: "2px",
+            backgroundColor: "#E1E9EA",
+            flex: "1",
+            ...o.typography.bodyDens,
+            color: "#364040",
+            "&:first-of-type": {
+              borderTopLeftRadius: "10px"
+            },
+            "&:last-of-type": {
+              borderTopRightRadius: "10px",
+              flex: 1
+            }
+          },
+          "& .M4LPrintingSystem-gridNodeTd": {
+            display: "flex",
+            alignItems: "center",
+            padding: "2px 10px",
+            minHeight: "30px",
+            height: "auto",
+            flex: "1",
+            ...o.typography.body,
+            color: "#364040"
+          },
+          "& .M4LPrintingSystem-gridNodeTr": {
+            display: "flex",
+            width: "100%",
+            gap: "2px",
+            "&:nth-of-type(odd) .M4LPrintingSystem-gridNodeTd": {
+              backgroundColor: "#F0F4F4"
+            },
+            "&:nth-of-type(even) .M4LPrintingSystem-gridNodeTd": {
+              backgroundColor: "#F7FCFC"
+            }
+          }
+        },
+        "& .M4LPrintingSystem-chartNodeRoot": {
+          display: "flex",
+          justifyContent: "center",
+          maxHeight: "300px"
+        }
+      }
+    }
+  }
+}), q = (o) => ({
+  M4LFormatter: {
+    styleOverrides: {
+      "&.M4LFormatter-root": {
+        "& .M4LFormatter-booleanFormatterIcon": {
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.text.secondary
+          },
+          "&.M4LFormatter-booleanFormatterCheck": {
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.state.active
+            }
+          }
+        }
+      }
+    }
+  }
+}), J = (o) => ({
+  M4LoadingError: {
+    styleOverrides: {
+      "&.M4LoadingError-root": {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        position: "relative",
+        inset: "0",
+        overflow: "hidden",
+        width: "100%",
+        height: "100%",
+        "& .M4LoadingError-loadingError": {
+          display: "flex",
+          padding: "12px",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "12px",
+          position: "absolute",
+          inset: "0",
+          "& .M4LIcon-root": {
+            display: "flex",
+            padding: "12px",
+            " .M4LIcon-icon": {
+              width: "100px",
+              height: "100px",
+              backgroundColor: o.palette.state.skeleton.default
+            }
+          },
+          "& .M4LoadingError-titleDescription": {
+            textAlign: "center"
+          },
+          "& .M4LoadingError-loadingErrorTitle": {
+            ...o.typography.h5,
+            color: o.palette.text.primary,
+            [o.breakpoints.down("sm")]: {
+              ...o.typography.h5
+            }
+          },
+          "& .M4LoadingError-loadingErrorDescription": {
+            ...o.typography.paragraphDens,
+            color: o.palette.text.secondary
+          },
+          "& .M4LoadingError-loadingErrorDivider": {
+            width: "208px",
+            height: "1px",
+            background: o.palette.state.borderPrimary
+          },
+          "& .MuiTypography-paragraph": {
+            ...o.typography.paragraph,
+            color: o.palette.text.primary
+          },
+          "& .MuiButtonBase-root": {}
+        }
+      }
+    }
+  }
+}), K = (o) => ({
+  M4LMFLoader: {
+    styleOverrides: {
+      "&.M4LMFLoader-root": {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        overflow: "auto"
+      }
+    }
+  }
+}), Q = (o) => ({
+  M4LLoadingButton: {
+    styleOverrides: {
+      "&.M4LLoadingButton-root": {
+        width: "auto",
+        display: "flex",
+        justifyContent: "center",
+        "& .MuiButtonBase-root.MuiLoadingButton-loading": {
+          "& .M4LTypography-root": {
+            opacity: "0"
+          }
+        },
+        "& .MuiCircularProgress-root": {
+          color: `${o.palette.text.primary}!important`
+        },
+        "& .M4LLoadingButton-skeleton ": {
+          height: "100%!important",
+          borderRadius: "4px"
+        },
+        "& .MuiButtonBase-root": {
+          display: "flex",
+          textTransform: "none",
+          gap: "8px",
+          transition: "all .5s ease",
+          borderRadius: "4px",
+          border: "1px solid transparent",
+          ...o.typography.action,
+          "& .M4LIcon-icon": {
+            transition: "all .5s ease"
+          },
+          "& .MuiButton-startIcon, & .MuiButton-endIcon": {
+            margin: "0px"
+          },
+          "&::before": {
+            inset: "0",
+            border: "1px solid",
+            borderColor: o.palette.state?.focus,
+            borderRadius: "4px",
+            transform: "scale(1.07, 1.36)",
+            position: "absolute",
+            boxSizing: "border-box"
+          }
+        },
+        "&.M4LLoadingButton-isDisabled": {
+          "& .MuiButtonBase-root": {
+            color: `${o.palette.text.disabled}!important`,
+            "& .M4LIcon-icon": {
+              backgroundColor: `${o.palette.text.disabled}!important`
+            }
+          },
+          "&.M4LLoadingButton-variantContained": {
+            "& .MuiButtonBase-root": {
+              color: o.palette.text.disabled,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.text.disabled
+              },
+              "&:hover": {
+                backgroundColor: o.palette.state?.default,
+                color: o.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.palette.text.disabled,
+                  color: o.palette.text.disabled
+                }
+              },
+              "&:active": {
+                backgroundColor: o.palette.state?.default,
+                color: o.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.palette.text.disabled,
+                  color: o.palette.text.disabled
+                }
+              },
+              "&.Mui-focusVisible": {
+                backgroundColor: o.palette.state?.default,
+                color: o.palette.text.disabled,
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.palette.text.disabled,
+                  color: o.palette.text.disabled
+                },
+                "&::before": {
+                  content: "none"
+                }
+              }
+            }
+          }
+        },
+        "&.M4LLoadingButton-sizeSmall": {
+          height: "24px",
+          "& .MuiButtonBase-root": {
+            padding: "4px 12px"
+          },
+          "&.M4LLoadingButton-skeleton": {
+            height: "24px"
+          }
+        },
+        "&.M4LLoadingButton-sizeMedium": {
+          height: "38px",
+          "& .MuiButtonBase-root": {
+            padding: "8px 16px"
+          },
+          "&.M4LLoadingButton-skeleton": {
+            height: "38px"
+          }
+        },
+        "&.M4LLoadingButton-variantContained": {
+          "& .MuiCircularProgress-root": {
+            color: "#fff!important"
+          },
+          "& .M4LTypography-root": {
+            "& .MuiTypography-root": {
+              color: o.palette.patronus?.marbleLight[30]
+            }
+          },
+          "& .MuiButtonBase-root": {
+            backgroundColor: o.palette.state?.active,
+            color: o.palette.patronus?.marbleLight[10],
+            boxShadow: o.customShadows?.primary,
+            position: "relative",
+            "& .M4LTypography-root": {
+              "MuiTypography-root": {
+                color: "#fff"
+              }
+            },
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.text.secondary
+            },
+            "&:hover": {
+              backgroundColor: o.palette.state?.hover,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.patronus?.marbleLight[10]
+              },
+              "& .MuiTypography-root": {
+                color: "#fff"
+              }
+            },
+            "&:active": {
+              backgroundColor: o.palette.state?.active,
+              color: o.palette.patronus?.marbleLight[10],
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.patronus?.marbleLight[10]
+              }
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: o.palette.state?.active,
+              color: o.palette.patronus?.marbleLight[10],
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.patronus?.marbleLight[10]
+              },
+              "&::before": {
+                content: "''"
+              }
+            }
+          }
+        },
+        "&.M4LLoadingButton-variantOutlined": {
+          "& .MuiButtonBase-root": {
+            border: "1px solid",
+            borderColor: o.palette.text.secondary,
+            color: o.palette.text.secondary,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.text.secondary
+            },
+            "&:hover": {
+              borderColor: o.palette.state?.hover,
+              color: o.palette.state?.hover,
+              backgroundColor: o.palette.state?.active12,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.hover
+              }
+            },
+            "&:active": {
+              borderColor: o.palette.state?.active,
+              color: o.palette.state?.active,
+              backgroundColor: "transparent",
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              }
+            },
+            "&.Mui-focusVisible": {
+              borderColor: o.palette.state?.active,
+              color: o.palette.state?.active,
+              backgroundColor: "transparent",
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              },
+              "&::before": {
+                content: "''"
+              }
+            }
+          }
+        },
+        "&.M4LLoadingButton-variantText": {
+          "& .MuiButtonBase-root": {
+            color: o.palette.text.secondary,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.text.secondary
+            },
+            "&:hover": {
+              backgroundColor: o.palette.state?.active12,
+              color: o.palette.state?.hover,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.hover
+              }
+            },
+            "&:active": {
+              backgroundColor: "transparent",
+              color: o.palette.state?.active,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              }
+            },
+            "&.Mui-focusVisible": {
+              backgroundColor: "transparent",
+              color: o.palette.state?.active,
+              "& .M4LIcon-icon": {
+                backgroundColor: o.palette.state?.active
+              },
+              "&:before": {
+                content: "''"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}), Z = (o) => ({
+  M4LToastContainer: {
+    styleOverrides: {
+      "&.M4LToastContainer-root": {
+        "& .Toastify__toast": {
+          backgroundColor: o.palette.background.background,
+          "& .Toastify__toast-icon": {
+            display: "none"
+          },
+          "& .Toastify__close-button": {
+            margin: "auto auto",
+            "& > svg": {
+              fill: o.palette.text.secondary
+            }
+          },
+          "& .M4LToastContainer-toastMessageContainer": {
+            display: "flex",
+            gap: "10px",
+            "& .M4LToastContainer-toastMessageInfo": {
+              ...o.typography.body,
+              color: o.palette.text.secondary
+            }
+          },
+          "&.Toastify__toast--error": {}
+        }
+      }
+    }
+  }
 });
 export {
-  R as A,
-  A as B,
+  A,
+  P as B,
   D as C,
-  P as D,
-  z as E,
-  F,
-  H as G,
-  W as H,
-  j as I,
-  G as J,
+  F as D,
+  H as E,
+  V as F,
+  W as G,
+  j as H,
+  G as I,
+  N as J,
   E as K,
   $ as L,
-  b as M,
+  Q as M,
   _ as N,
-  N as O,
-  U as P,
-  X as Q,
-  Y as R,
-  q as S,
-  i as a,
+  U as O,
+  X as P,
+  Y as Q,
+  q as R,
+  J as S,
+  K as T,
+  Z as U,
+  p as a,
   T as b,
-  n as c,
-  p as d,
-  d as e,
-  l as f,
+  d as c,
+  l as d,
+  s as e,
+  c as f,
   M as g,
-  s as h,
-  V as i,
-  c as j,
+  u as h,
+  z as i,
+  g as j,
   O as k,
-  u as l,
-  g as m,
-  x as n,
+  x as l,
+  b as m,
+  y as n,
   L as o,
-  f as p,
-  y as q,
+  h as p,
+  f as q,
   w as r,
-  h as s,
-  v as t,
-  k as u,
-  C as v,
-  I as w,
-  B as x,
+  v as s,
+  k as t,
+  C as u,
+  I as v,
+  B as w,
+  m as x,
   S as y,
-  m as z
+  R as z
 };