@m4l/styles 0.0.16 → 0.0.18

package/theme/overrides/M4LExtendedComponents/{index.9d7c79cc.js → index.bd713d88.js}

@@ -1,5 +1,6 @@
 import { alpha as t } from "@mui/material/styles";
-const a = (o) => ({
+import { alpha as e } from "@mui/system";
+const i = (o) => ({
   M4LDynamicFilter: {
     styleOverrides: {
       "&.M4LDynamicFilter-root": {
@@ -8,8 +9,7 @@ const a = (o) => ({
         boxShadow: o.customShadows.z2,
         padding: "0px",
         border: "1px solid",
-        borderColor: o.palette.state.default,
-        overflow: "hidden",
+        borderColor: o.palette.background.background,
         "& .M4LDynamicFilter-containerFistRow": {
           height: "32px",
           width: "100%",
@@ -40,19 +40,21 @@ const a = (o) => ({
           width: "100%",
           alignItems: "center",
           "& > input": {
-            border: "none",
+            border: "1px solid",
+            borderColor: o.palette.background.background,
             background: "none",
             ...o.typography.body,
             color: o.palette.text.primary,
             padding: "0px 4px",
             width: "100%",
             height: "100%",
-            BorderRadius: "4px"
+            borderRadius: "2px"
           },
           "& input:focus-visible": {
-            border: "none",
+            border: "1px solid",
+            borderColor: o.palette.state.active12,
             background: o.palette.state.active12,
-            BorderRadius: "4px",
+            BorderRadius: "2px",
             outline: "none",
             padding: "0px 4px"
           }
@@ -87,18 +89,14 @@ const a = (o) => ({
     styleOverrides: {
       "&.M4LDynamicFilter-popoverMenuFields": {
         "& .M4LDynamicFilter-popoverMenuFieldsPaper": {
-          padding: "4px",
-          gap: "4px",
           "& .M4LDynamicFilter-classespopoverLabelMemuItem": {
             ...o.typography.body,
-            color: o.palette.text.secondary,
-            borderRadius: "4px"
+            color: o.palette.text.secondary
           },
           "& .M4LDynamicFilter-popoverMenuFieldsItem:hover": {
             ...o.typography.body,
             color: o.palette.state.hover,
-            background: o.palette.state.default,
-            borderRadius: "4px"
+            background: o.palette.state.default
           }
         }
       }
@@ -107,21 +105,24 @@ const a = (o) => ({
   M4LDynamicFilterPopoverFilter: {
     styleOverrides: {
       "&.M4LDynamicFilter-popoverFilter": {
+        width: "auto",
         "& .M4LDynamicFilter-popoverFilterPaper": {
           padding: "0px",
+          width: "200px",
           "& .M4LPopover-arrowStyle": {
             background: "none"
           },
-          "& .m4l_FormProvider": {
+          "& .M4LRHFormProvider-root": {
             gap: "0px",
-            minWidth: "200px",
+            widht: "100%",
+            minWidht: "220px",
             "& .M4LDynamicFilter-popoverFilterHeader": {
               background: o.palette.state.default,
               display: "flex",
-              gap: "8px",
-              padding: "4px 8px",
+              gap: "4px",
+              padding: "8px",
               borderRadius: "4px",
-              boxShadow: o.customShadows.z1,
+              boxShadow: o.customShadows.z2,
               borderBottom: "0px",
               "& .MuiTypography-root": {
                 ...o.typography.bodyDens,
@@ -140,12 +141,11 @@ const a = (o) => ({
                 gap: "8px"
               }
             },
-            "& .M4LCommonActions-root": {
+            "& .M4LCommonActions-wrapperActions": {
               display: "flex",
               flexDirection: "row",
               gap: "12px",
-              padding: "20px 8px 12px 8px",
-              margin: "0px",
+              padding: "20px 8px 12px 0px",
               ".M4LButton-root": {
                 width: "fit-content"
               }
@@ -155,7 +155,7 @@ const a = (o) => ({
       }
     }
   }
-}), r = (o) => ({
+}), n = (o) => ({
   M4LIcon: {
     styleOverrides: {
       ["&.M4LIcon-root"]: {
@@ -204,7 +204,7 @@ const a = (o) => ({
       }
     }
   }
-}), i = (o) => ({
+}), p = (o) => ({
   M4LIconButton: {
     styleOverrides: {
       ["&.M4LIconButton-root"]: {
@@ -355,7 +355,7 @@ const a = (o) => ({
       }
     }
   }
-}), n = (o) => ({
+}), d = (o) => ({
   M4LanguagePopover: {
     styleOverrides: {
       ["&.M4LanguagePopover-root"]: {}
@@ -403,7 +403,7 @@ const a = (o) => ({
       }
     }
   }
-}), p = (o) => ({
+}), s = (o) => ({
   M4LImage: {
     styleOverrides: {
       ["&.M4LImage-root"]: {
@@ -440,7 +440,7 @@ const a = (o) => ({
       }
     }
   }
-}), d = (o) => ({
+}), c = (o) => ({
   M4LPopover: {
     styleOverrides: {
       ["&.M4LPopover-root"]: {
@@ -469,7 +469,7 @@ const a = (o) => ({
       }
     }
   }
-}), s = (o) => ({
+}), u = (o) => ({
   M4LErrorLabel: {
     styleOverrides: {
       ["&.M4LHelperText-root"]: {
@@ -488,7 +488,7 @@ const a = (o) => ({
       }
     }
   }
-}), c = (o) => ({
+}), x = (o) => ({
   M4LTypography: {
     styleOverrides: {
       ["&.M4LTypography-root"]: {
@@ -500,13 +500,14 @@ const a = (o) => ({
       }
     }
   }
-}), u = (o) => ({
+}), g = (o) => ({
   M4LButton: {
     styleOverrides: {
       "&.M4LButton-root": {
-        width: "100%",
+        width: "fit-content",
         display: "flex",
         justifyContent: "center",
+        ...o.typography.action,
         "& .M4LButton-skeleton ": {
           height: "100%!important",
           borderRadius: "4px"
@@ -579,18 +580,20 @@ const a = (o) => ({
           }
         },
         "&.M4LButton-sizeSmall": {
-          height: "28px",
           "& .MuiButtonBase-root": {
-            padding: "4px 12px"
+            padding: "4px 12px",
+            height: "28px",
+            minHeight: "28px"
           },
           "&.M4LButton-skeleton": {
             height: "28px"
           }
         },
         "&.M4LButton-sizeMedium": {
-          height: "38px",
           "& .MuiButtonBase-root": {
-            padding: "8px 16px"
+            padding: "8px 16px",
+            height: "38px",
+            minHeight: "38px"
           },
           "&.M4LButton-skeleton": {
             height: "38px"
@@ -598,12 +601,12 @@ const a = (o) => ({
         },
         "&.M4LButton-variantContained": {
           "& .MuiButtonBase-root": {
-            backgroundColor: o.palette.state?.default,
-            color: o.palette.text.primary,
-            boxShadow: o.customShadows?.z2,
+            backgroundColor: o.palette.state?.active,
+            color: o.palette.patronus?.marbleLight[10],
+            boxShadow: o.customShadows?.primary,
             position: "relative",
             "& .M4LIcon-icon": {
-              backgroundColor: o.palette.text.primary
+              backgroundColor: o.palette.patronus?.marbleLight[10]
             },
             "&:hover": {
               backgroundColor: o.palette.state?.hover,
@@ -612,13 +615,6 @@ const a = (o) => ({
                 backgroundColor: o.palette.patronus?.marbleLight[10]
               }
             },
-            "&: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],
@@ -634,7 +630,7 @@ const a = (o) => ({
         "&.M4LButton-variantOutlined": {
           "& .MuiButtonBase-root": {
             border: "1px solid",
-            borderColor: o.palette.state.default,
+            borderColor: o.palette.state.borderDefault,
             color: o.palette.text.primary,
             "& .M4LIcon-icon": {
               backgroundColor: o.palette.text.secondary
@@ -703,11 +699,11 @@ const a = (o) => ({
       }
     }
   }
-}), g = (o) => ({
+}), b = (o) => ({
   M4LoadingButton: {
     styleOverrides: {
       "&.M4LoadingButton-root": {
-        width: "100%",
+        width: "auto",
         display: "flex",
         justifyContent: "center",
         "& .MuiLoadingButton-loading": {
@@ -716,10 +712,10 @@ const a = (o) => ({
           }
         },
         "& .MuiCircularProgress-root": {
-          color: o.palette.primary.main
+          color: "#fff!important"
         },
         "& .MuiTypography-root": {
-          color: o.palette.text.secondary,
+          color: "#fff",
           transition: "all .5s ease"
         },
         "& .M4LoadingButton-skeleton ": {
@@ -813,10 +809,15 @@ const a = (o) => ({
         },
         "&.M4LoadingButton-variantContained": {
           "& .MuiButtonBase-root": {
-            backgroundColor: o.palette.state?.default,
-            color: o.palette.text.secondary,
-            boxShadow: o.customShadows?.z1,
+            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
             },
@@ -826,7 +827,7 @@ const a = (o) => ({
                 backgroundColor: o.palette.patronus?.marbleLight[10]
               },
               "& .MuiTypography-root": {
-                color: o.palette.patronus?.marbleLight[10]
+                color: "#fff"
               }
             },
             "&:active": {
@@ -920,7 +921,7 @@ const a = (o) => ({
       }
     }
   }
-}), x = (o) => ({
+}), M = (o) => ({
   M4LNavLink: {
     styleOverrides: {
       ["&.M4LNavLink-root"]: {
@@ -940,7 +941,7 @@ const a = (o) => ({
       }
     }
   }
-}), b = (o) => ({
+}), L = (o) => ({
   M4LSideBar: {
     styleOverrides: {
       "&.M4LSideBar-root": {
@@ -1429,44 +1430,80 @@ const a = (o) => ({
       }
     }
   }
-}), M = (o) => ({
+}), y = (o) => ({
   M4LAreasAdmin: {
     styleOverrides: {
       "&.M4LAreasAdmin-root": {
-        width: "100%",
-        height: "32px",
-        test: "root",
-        borderRadius: "4px",
-        paddingRight: "10px",
+        flex: 1,
+        overflow: "auto",
+        height: "auto",
+        borderRadius: "6px",
+        paddingRight: "4px",
         alignItems: "center",
         background: o.palette.background.default,
         boxShadow: o.customShadows.z2,
-        borderTop: "1px solid",
-        borderColor: o.palette.state.default,
         [o.breakpoints.down("sm")]: {
-          height: "36px"
+          height: "auto"
+        },
+        "& .M4LAreasAdmin-areasAddButton": {
+          backgroundColor: `${o.palette.state.active}!important`,
+          "& .M4LIcon-icon": {
+            backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
+          }
         },
         "& .M4LAreasAdmin-areaIconLayer": {
           background: o.palette.background.neutral,
+          boxShadow: o.customShadows.z2,
           display: "flex",
           justifyContent: "center",
-          width: "32px",
-          height: "32px",
+          width: "36px",
+          height: "36px",
           [o.breakpoints.down("sm")]: {
             height: "36px",
             width: "36px"
+          },
+          "& .M4LIcon-root": {
+            width: "36px"
           }
         },
         "& .M4LAreasAdmin-areaContainerChips": {
           display: "flex",
           overflow: "auto",
           gap: "8px",
-          padding: "0px 0px 0px 8px",
-          width: "100%",
-          justifyContent: "center",
-          height: "100%",
+          padding: "4px 8px 4px 8px",
+          width: "70%",
+          height: "auto",
           alignItems: "center",
-          paddingLeft: "8px",
+          "& .M4LAreasAdmin-areaChipMobileRoot": {
+            display: "flex",
+            overflow: "hidden",
+            width: "100%",
+            backgroundColor: o.palette.state.active,
+            borderRadius: "4px",
+            "& .M4LAreasAdmin-areaChipRoot ": {
+              margin: "0px",
+              borderRadius: "4px 0px 0px 4px",
+              overflow: "hidden",
+              width: "100%"
+            }
+          },
+          "& .M4LAreasAdmin-areaChipMobileIconContainer": {
+            display: "flex",
+            alignItems: "center",
+            borderRadius: "0px 4px 4px 0px",
+            background: o.palette.state.active,
+            ...o.typography.body,
+            color: o.palette.text.primary,
+            "& .M4LIconButton-root": {
+              backgroundColor: `${o.palette.state.active}!important`,
+              borderLeft: "1px solid",
+              borderColor: o.palette.patronus?.marbleLight[10],
+              borderRadius: "0px",
+              "& .M4LIcon-icon": {
+                backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
+              }
+            }
+          },
           "& .MuiBox-root": {
             display: "flex",
             alignItems: "center",
@@ -1474,20 +1511,24 @@ const a = (o) => ({
           },
           "& .simplebar-content": {
             display: "flex",
-            gap: "8px",
             alignItems: "center"
           },
           "& .M4LAreasAdmin-areaChipRoot ": {
             display: "flex",
             boxShadow: o.customShadows.z1,
             borderRadius: "4px 4px 4px 4px",
-            height: "20px",
+            marginRight: "8px",
+            height: "auto",
+            width: "auto",
             gap: "8px",
             paddingLeft: "8px",
             alignItems: "center",
             borderTop: "1px solid",
             borderColor: o.palette.state.default,
             background: o.palette.state.default,
+            "& .M4LAreasAdmin-areaContainerChipEditButton": {
+              display: "flex"
+            },
             [o.breakpoints.down("sm")]: {
               height: "auto"
             },
@@ -1503,21 +1544,19 @@ const a = (o) => ({
                 display: "flex",
                 alignItems: "center",
                 color: o.palette.patronus?.marbleLight[10],
-                ...o.typography.action
+                ...o.typography.action,
+                [o.breakpoints.down("sm")]: {
+                  display: "inline",
+                  fontSize: "14px",
+                  textOverflow: "ellipsis",
+                  overflow: "hidden",
+                  whiteSpace: "nowrap",
+                  flex: "1"
+                }
               },
               "& .M4LIconButton-root": {
                 "& .M4LIcon-icon": {
-                  backgroundColor: o.palette.patronus?.marbleLight[10]
-                },
-                "&:active": {
-                  "& .M4LIcon-icon": {
-                    backgroundColor: o.palette.patronus?.marbleLight[10]
-                  }
-                },
-                "&:hover": {
-                  "& .M4LIcon-icon": {
-                    backgroundColor: o.palette.patronus?.marbleLight[10]
-                  }
+                  backgroundColor: `${o.palette.patronus?.marbleLight[10]}!important`
                 }
               }
             },
@@ -1541,11 +1580,46 @@ const a = (o) => ({
               }
             }
           }
+        },
+        "&.M4LAreasAdmin-isMobile": {
+          "& .M4LAreasAdmin-areaContainerChips": {
+            width: "100%"
+          }
+        }
+      }
+    }
+  },
+  M4LAreasAdminEditPopover: {
+    styleOverrides: {
+      "&.M4LAreasAdmin-areaEditPopover": {
+        "& .MuiPaper-root": {
+          width: "200px"
+        }
+      }
+    }
+  },
+  M4LAreasAdminMobilePopoverOptions: {
+    styleOverrides: {
+      "&.M4LAreasAdmin-areasPopoverMobileOptions": {
+        "& .MuiPaper-root": {
+          "& .M4LButton-root": {
+            marginTop: "8px",
+            "& .MuiButtonBase-root": {
+              textWrap: "nowrap"
+            }
+          }
         }
       }
     }
+  },
+  M4LAreasAdminPopoverListWindows: {
+    styleOverrides: {
+      "&.M4LAreasAdmin-areasPopoverListWindows": {
+        test: "root"
+      }
+    }
   }
-}), L = (o) => ({
+}), f = (o) => ({
   M4LAreasViewer: {
     styleOverrides: {
       "&.M4LAreasViewer-root": {
@@ -1558,6 +1632,11 @@ const a = (o) => ({
             boxShadow: o.customShadows.z2,
             borderRadius: "4px",
             display: "flex",
+            "&:not(.M4LAreasViewer-loading)": {
+              "& .M4LinearProgressIndeterminate-root": {
+                opacity: 0
+              }
+            },
             "& .react-resizable-handle": {
               backgroundColor: "transparent"
             },
@@ -1568,19 +1647,155 @@ const a = (o) => ({
               height: "100%"
             },
             "& .M4LAreasViewer-windowHeader": {
+              display: "flex",
+              flexDirection: "column",
               background: o.palette.state.default,
-              padding: "8px",
-              height: "40px",
+              padding: "4px 4px 4px 8px",
+              height: "36px",
+              minHeight: "36px",
               borderRadius: "4px",
               border: "none",
               boxShadow: o.customShadows.z2,
-              borderTop: "2px solid",
+              borderTop: "1px solid",
               borderColor: o.palette.state.default,
+              "& .M4LAreasViewer-windowHeaderContent": {
+                display: "flex",
+                width: "100%",
+                height: "100%",
+                alignItems: "center",
+                "& .M4LAreasViewer-windowHeaderTitle": {
+                  display: "flex",
+                  alignItems: "center"
+                }
+              },
               "& .M4LTypography-root .MuiTypography-root": {
                 ...o.typography.paragraph,
                 color: o.palette.text.primary
               }
             },
+            "& .M4LAreasViewer-windowToastiesContainer": {
+              padding: "8px",
+              top: "37px",
+              position: "absolute",
+              display: "flex",
+              flexDirection: "column",
+              width: "100%",
+              maxHeight: "fit-content",
+              zIndex: "1000",
+              gap: "2px",
+              background: o.palette.background.default,
+              boxShadow: o.customShadows.z3,
+              "& .M4LAreasViewer-windowToastiesContainerTostys": {
+                boxSizing: "border-box",
+                overflow: "auto",
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
+                maxHeight: "128px",
+                "& .M4LAreasViewer-windowToastyContainer": {
+                  background: o.palette.patronus?.middleYellow[10],
+                  borderRadius: "4px",
+                  padding: "0px 0px 0px 0px",
+                  width: "100%",
+                  boxShadow: o.customShadows.z2,
+                  gap: "4px",
+                  position: "relative",
+                  "& .M4LAreasViewer-windowToastyButtonsContainer": {
+                    padding: "4px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "4px",
+                    borderRadius: "0px 4px 4px 0px"
+                  },
+                  "& .M4LAreasViewer-windowToastyMessage": {
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "8px",
+                    ...o.typography.body,
+                    color: o.palette.patronus?.ashBlak[60],
+                    position: "relative",
+                    "& .MuiLinearProgress-root": {
+                      position: "absolute",
+                      width: "100%",
+                      top: "0px",
+                      left: "0px",
+                      background: o.palette.state.skeleton.default,
+                      "& .MuiLinearProgress-bar1Determinate .MuiLinearProgress-barColorPrimary": {
+                        transform: "translateX(100%)"
+                      }
+                    }
+                  },
+                  "&.M4LAreasViewer-error": {
+                    background: o.palette.patronus?.candyRed[10],
+                    "& .M4LAreasViewer-windowToastyButtonsContainer": {
+                      background: o.palette.error.main,
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.palette.patronus?.marbleLight[40]
+                      },
+                      "& .M4LAreasViewer-pinIn": {
+                        background: o.palette.state.error.hover,
+                        boxShadow: o.customShadows.z1,
+                        border: "none"
+                      },
+                      "& .M4LIconButton-root:hover": {
+                        background: o.palette.state.error.hover
+                      }
+                    }
+                  },
+                  "&.M4LAreasViewer-info": {
+                    background: o.palette.patronus?.crayonBlue[10],
+                    "& .M4LAreasViewer-windowToastyButtonsContainer": {
+                      background: o.palette.info.main,
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.palette.patronus?.marbleLight[40]
+                      },
+                      "& .M4LAreasViewer-pinIn": {
+                        background: o.palette.state.info.hover,
+                        boxShadow: o.customShadows.z1,
+                        border: "none"
+                      },
+                      "& .M4LIconButton-root:hover": {
+                        background: o.palette.state.info.hover
+                      }
+                    }
+                  },
+                  "&.M4LAreasViewer-warning": {
+                    background: o.palette.patronus?.middleYellow[10],
+                    "& .M4LAreasViewer-windowToastyButtonsContainer": {
+                      background: o.palette.warning.main,
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.palette.patronus?.ashBlak[50]
+                      },
+                      "& .M4LAreasViewer-pinIn": {
+                        background: o.palette.state.warning.hover,
+                        boxShadow: o.customShadows.z1,
+                        border: "none"
+                      },
+                      "& .M4LIconButton-root:hover": {
+                        background: o.palette.state.warning.hover
+                      }
+                    }
+                  },
+                  "&.M4LAreasViewer-success ": {
+                    background: o.palette.patronus?.acidGreen[10],
+                    "& .M4LAreasViewer-windowToastyButtonsContainer": {
+                      background: o.palette.success.main,
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.palette.patronus?.ashBlak[50]
+                      },
+                      "& .M4LAreasViewer-pinIn": {
+                        background: o.palette.state.success.hover,
+                        boxShadow: o.customShadows.z1,
+                        border: "none"
+                      },
+                      "& .M4LIconButton-root:hover": {
+                        background: o.palette.state.success.hover
+                      }
+                    }
+                  }
+                }
+              }
+            },
             "& .M4LAreasViewer-windowContent": {
               margin: "8px",
               background: o.palette.background.default,
@@ -1595,43 +1810,86 @@ const a = (o) => ({
               borderColor: o.palette.state.active,
               boxShadow: o.customShadows.primary,
               "& .M4LAreasViewer-windowHeader": {
+                display: "flex",
+                flexDirection: "column",
                 background: o.palette.state.active12,
+                gap: "4px",
+                alignItems: "center",
+                position: "relative",
+                padding: "4px 4px 4px 8px",
+                justifyContent: "end",
+                minHeight: "36px",
+                borderBottom: "1px solid",
+                borderColor: o.palette.divider,
+                overflow: "hidden",
+                cursor: "move",
+                height: "36px",
                 "& .M4LTypography-root .MuiTypography-root": {
                   ...o.typography.paragraphDens
+                },
+                "& .M4LIcon-icon": {
+                  backgroundColor: o.palette.text.primary
                 }
               }
             }
           }
         },
         "& .M4LAreasViewer-panelWindowsRoot": {
+          background: o.palette.background.neutral,
+          boxShadow: o.customShadows.z2,
+          borderRadius: "4px",
+          display: "flex",
+          alignItems: "center",
+          margin: "4px",
+          padding: "4px",
+          gap: "8px",
           "& .M4LAreasViewer-panelWindowsButtonContainer": {
-            border: "1px solid",
-            borderColor: "transparent",
+            borderRadius: "2px",
+            background: o.palette.background.default,
+            boxShadow: o.customShadows.z2,
             "&.M4LAreasViewer-selected": {
-              borderColor: o.palette.state.focus
+              background: o.palette.state.active12,
+              boxShadow: `inset 1px 2px 3px 0 ${e(o.palette.patronus?.ashBlak[50] || "", 0.9)}`
             }
           }
         },
         "& .M4LAreasViewer-windowPopupRoot": {
           boxShadow: o.customShadows.z3,
+          "& .M4LIcon-root.custom-handle": {
+            "& .M4LIcon-icon": {
+              backgroundColor: o.palette.state.skeleton.default,
+              width: "11px",
+              height: "11px",
+              minWidth: "11px",
+              minHeight: "11px",
+              boxShadow: o.customShadows.z1,
+              border: "1px solid",
+              borderColor: o.palette.opacity.cool[24]
+            }
+          },
           "& .M4LAreasViewer-windowRoot": {
-            padding: "8px",
+            padding: "4px",
             background: o.palette.state.default,
             borderRadius: "4px",
             border: "1px solid",
             borderColor: o.palette.state.default,
             backdropFilter: "blur(8px)",
+            "&:not(.M4LAreasViewer-loading)": {
+              "& .M4LinearProgressIndeterminate-root": {
+                opacity: 0
+              }
+            },
             "& > .react-resizable-handle": {
               backgroundColor: "transparent"
             },
             "& .M4LAreasViewer-windowRootContainer": {
-              background: o.palette.background.default,
+              background: o.palette.background.background,
               borderRadius: "4px",
               "& .M4LAreasViewer-windowHeader": {
                 height: "28px",
                 minHeight: "28px",
-                padding: "0px 8px",
                 boxShadow: "none",
+                background: o.palette.background.neutral,
                 "& .M4LTypography-root .MuiTypography-root": {
                   ...o.typography.body,
                   color: o.palette.text.secondary
@@ -1643,10 +1901,9 @@ const a = (o) => ({
               borderColor: o.palette.state.active12,
               background: o.palette.state.active12,
               boxShadow: o.customShadows.z3,
-              padding: "8px",
+              padding: "4px",
               "& .M4LAreasViewer-windowHeader": {
-                background: o.palette.background.background,
-                padding: "8px",
+                background: o.palette.background.neutral,
                 height: "28px",
                 borderRadius: "4px",
                 boxShadow: o.customShadows.z1,
@@ -1660,117 +1917,262 @@ const a = (o) => ({
             }
           }
         },
-        "& .M4LAreasViewer-windowModalRoot": {
-          background: o.palette.background.background,
-          borderRadius: "4px",
-          boxShadow: o.customShadows.z4,
-          "& .M4LAreasViewer-windowRoot": {
-            background: o.palette.background.background,
-            margin: "0px",
-            padding: "0px",
-            borderRadius: "4px",
-            border: "none",
-            "& .react-resizable-handle": {
-              backgroundColor: "transparent"
-            },
-            "& .M4LAreasViewer-windowRootContainer": {
+        "& .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",
-              flexDirection: "column",
-              height: "100%",
-              "& .M4LAreasViewer-windowHeader": {
-                height: "48px",
-                minHeight: "48px",
-                padding: "0px 8px",
-                boxShadow: "none",
-                background: "none",
-                borderColor: "transparent",
-                "& .M4LTypography-root .MuiTypography-root": {
-                  ...o.typography.paragraph,
-                  color: o.palette.text.primary
-                }
-              },
-              "& .M4LAreasViewer-windowContent": {
-                margin: "0px 8px 8px 8px",
-                background: o.palette.background.neutral,
-                borderRadius: "4px",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                flexGrow: "1",
-                height: "100%"
+              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"
+            }
+          }
+        }
+      }
+    }
+  },
+  M4LAreasViewerModal: {
+    styleOverrides: {
+      "&.M4LAreasViewer-windowModalRoot": {
+        borderRadius: "4px",
+        boxShadow: o.customShadows.z4,
+        "& .M4LAreasViewer-windowRoot": {
+          borderRadius: "4px"
+        },
+        "& .M4LIcon-root.custom-handle": {
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.state.skeleton.default,
+            width: "11px",
+            height: "11px",
+            minWidth: "11px",
+            minHeight: "11px",
+            boxShadow: o.customShadows.z1,
+            border: "1px solid",
+            borderColor: o.palette.opacity.cool[24]
+          }
+        },
+        "& .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"
+            }
+          }
+        },
+        "& .MuiBackdrop-root": {
+          background: e(`${o.palette.patronus?.ashBlak[60]}`, 0.8)
+        },
+        "&:not(.M4LAreasViewer-loading)": {
+          "& .M4LinearProgressIndeterminate-root": {
+            opacity: 0
+          }
+        },
+        "& .react-resizable-handle": {
+          backgroundColor: "transparent"
+        },
+        "& .M4LAreasViewer-windowRootContainer": {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          background: o.palette.background.neutral,
+          "& .M4LAreasViewer-windowHeader": {
+            cursor: "all-scroll",
+            display: "flex",
+            flexDirection: "column",
+            padding: "4px 4px 4px 8px",
+            height: "36px",
+            minHeight: "36px",
+            borderRadius: "4px",
+            border: "none",
+            "& .M4LTypography-root .MuiTypography-root": {
+              ...o.typography.paragraph,
+              color: o.palette.text.primary
+            },
+            "& .M4LAreasViewer-windowHeaderContent": {
+              display: "flex",
+              alignItems: "center",
+              height: "100%"
+            }
+          },
+          "& .M4LAreasViewer-windowContent": {
+            margin: "0 8px 8px 8px",
+            background: o.palette.background.default,
+            borderRadius: "4px",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            flexGrow: "1",
+            height: "100%"
+          }
+        }
       }
     }
   }
-}), y = (o) => ({
+}), w = (o) => ({
   M4LAppBar: {
     styleOverrides: {
       "&.M4LAppBar-root": {
         test: "root",
         display: "flex",
         width: "100%",
+        overflow: "hidden",
         height: "48px",
-        padding: "8px",
         alignItems: "center",
-        borderRadius: "4px",
-        background: o.palette.background.neutral,
-        boxShadow: o.customShadows.z2,
+        borderRadius: "6px",
+        padding: "8px",
         borderTop: "1px solid",
         borderColor: o.palette.state.default,
+        background: o.palette.background.neutral,
+        boxShadow: o.customShadows.z2,
+        "& .M4LAppBar-containerIconMenuToggle": {
+          display: "flex",
+          justifyContent: "center",
+          alingItems: "center",
+          width: "52px",
+          height: "52px",
+          minWidth: "52px",
+          minHeight: "52px",
+          alignItems: "center",
+          borderRadius: "4px",
+          borderColor: o.palette.state.default,
+          "& .M4LAppBar-iconMenuToggle": {
+            background: o.palette.background.default,
+            boxShadow: o.customShadows.z2,
+            borderTop: "1px solid",
+            borderColor: o.palette.state.default,
+            width: "36px",
+            height: "36px",
+            minWidth: "36px",
+            minHeight: "36px"
+          }
+        },
         [o.breakpoints.down("sm")]: {
           display: "flex",
           alignItems: "center",
           width: "100%",
-          height: "52px",
-          gap: "8px",
-          background: o.palette.background.background
-        },
-        "& .M4LAppBar-iconMenuToggle": {
+          borderTop: "1px solid",
+          borderColor: o.palette.state.default,
           background: o.palette.background.neutral,
           boxShadow: o.customShadows.z2,
-          width: "36px",
-          height: "36px",
-          minWidth: "36px",
-          minHeight: "36px"
+          paddingRight: "8px",
+          borderRadius: "6px"
         },
         "& .M4LAppBar-containerChilds": {
           display: "flex",
-          width: "100%",
-          gap: "176px",
+          width: "70%",
+          overflow: "visible",
+          alignItems: "center",
+          borderRadius: "4px",
           [o.breakpoints.down("sm")]: {
-            display: "flex",
+            width: "100%",
             alignItems: "center",
-            gap: "16px",
-            widht: "fit-content",
-            padding: "8px",
-            borderRadius: "4px"
-          },
-          "& .M4LIconButton-root": {
-            "&.M4LIconButton-sizeSmall": {
-              backgroundColor: o.palette.state.active,
-              marginLeft: "8px",
-              "& .M4LIcon-icon": {
-                background: o.palette.text.primary
-              }
-            }
+            gap: "8px",
+            borderRadius: "4px 0px 0px 4px",
+            display: "flex"
           },
           "& .M4LAvatar-root": {
-            width: "32px",
-            height: "32px",
+            width: "36px",
+            height: "36px",
             "& .MuiAvatar-root": {
-              width: "32px",
-              height: "32px"
+              width: "36px",
+              height: "36px"
             }
           }
         }
       }
     }
   }
-}), f = (o) => ({
+}), v = (o) => ({
   M4LAvatar: {
     styleOverrides: {
       "&.M4LAvatar-root": {
@@ -1783,22 +2185,60 @@ const a = (o) => ({
       }
     }
   }
-}), v = (o) => ({
+}), h = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
-      "&.M4LAccountPopover-root": {
-        test: "root"
-      }
+      "&.M4LAccountPopover-root": {}
     }
   },
   M4LAccountPopoverPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-popover": {
-        test: "root"
+        test: "root",
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        "& .MuiPaper-root": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          padding: "16px"
+        },
+        "& .M4LAccountPopover-containerAppVersion": {
+          display: "flex",
+          borderBottom: "2px solid",
+          borderColor: o.palette.state.default,
+          paddingBottom: "8px"
+        },
+        "& .M4LAccountPopover-containerMenuItems": {
+          "& .M4LAccountPopover-menuItem": {
+            padding: "4px",
+            borderRadius: "4px",
+            cursor: "pointer",
+            "&:hover": {
+              background: o.palette.state.default
+            }
+          }
+        },
+        "& .M4LAccountPopover-logOut": {
+          borderTop: "2px solid",
+          borderColor: o.palette.state.default,
+          justifyContent: "center",
+          paddingTop: "8px",
+          cursor: "pointer",
+          padding: "4px",
+          borderRadius: "4px",
+          "&:hover": {
+            background: o.palette.state.default
+          }
+        },
+        "& .M4LPopover-arrowStyle": {
+          display: "none"
+        }
       }
     }
   }
-}), w = (o) => ({
+}), k = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -1837,19 +2277,20 @@ const a = (o) => ({
           borderRadius: "6px",
           overFlow: "visible"
         },
-        "& .layout-pane": {
-          boxShadow: o.customShadows.z3,
-          border: "1px solid",
-          borderColor: o.palette.state.default,
-          borderRadius: "6px"
+        "& .M4LSplitLayout-secondPart": {
+          background: o.palette.background.default,
+          borderRadius: "6px",
+          padding: "8px"
         },
-        "#splitMaster": {
-          border: "none"
+        "& .layout-pane-primary": {
+          background: o.palette.background.default,
+          borderRadius: "6px",
+          padding: "8px"
         }
       }
     }
   }
-}), k = (o) => ({
+}), I = (o) => ({
   M4LSplitLayout: {
     styleOverrides: {
       "&.M4LSplitLayout-root": {
@@ -1880,46 +2321,50 @@ const a = (o) => ({
         "& .splitter-layout > .layout-splitter": {
           display: "flex",
           alignItems: "center",
-          backgroundColor: o.palette.divider,
+          backgroundColor: "none",
           boxSizing: "border-box",
           backgroundClip: "padding-box",
-          width: "11px",
-          margin: "0 5px",
-          borderLeft: "5px solid hsla(0, 0%, 100%, 0)",
-          borderRight: "5px solid hsla(0, 0%, 100%, 0)",
+          width: "8px",
+          margin: "0 2px",
+          borderLeft: "4px solid hsla(0, 0%, 5%, 0)",
+          borderRight: "4px solid hsla(0, 0%, 5%, 0)",
           cursor: "col-resize",
           justifyContent: "center",
           height: "100%"
         },
         "& .splitter-layout .layout-splitter:before": {
           content: '""',
-          height: "45px",
+          height: "56px",
           width: "4px",
           top: "calc(50% - 22.5px)",
           position: "absolute",
-          background: o.palette.grey[500],
-          borderRadius: "6px"
+          background: o.palette.text.disabled,
+          borderRadius: "1px"
         },
         "& .splitter-layout > .layout-splitter:hover": {
-          borderLeft: `5px solid ${o.palette.grey[5008]}`,
-          borderRight: `5px solid ${o.palette.grey[5008]}`
+          borderRadius: "2px",
+          borderLeft: "2px",
+          borderRight: "2px",
+          background: o.palette.action.hover
         },
         "& .splitter-layout.splitter-layout-vertical.layout-changing": {
           cursor: "row-resize"
         },
         "& .splitter-layout.splitter-layout-vertical > .layout-splitter": {
-          height: "11px !important",
+          height: "8px !important",
           width: "100% !important",
-          margin: "5px 0",
-          borderTop: "5px solid hsla(0, 0%, 100%, 0)",
-          borderBottom: "5px solid hsla(0, 0%, 100%, 0)",
+          margin: "2px 0",
+          borderTop: "4px solid hsla(0, 0%, 2%, 0)",
+          borderBottom: "4px solid hsla(0, 0%, 2%, 0)",
           cursor: "row-resize"
         },
         "& .splitter-layout.splitter-layout-vertical .layout-splitter:before": {
-          width: "45px !important",
+          width: "56px !important",
           height: "4px !important",
           left: "calc(50% - 22.5px)",
-          top: "unset"
+          top: "unset",
+          background: o.palette.text.disabled,
+          borderRadius: "2px"
         },
         "& .splitter-layout > .layout-splitter:hover:before, .splitter-layout.layout-changing >  .layout-splitter:before": {
           background: o.palette.primary.main
@@ -1928,8 +2373,9 @@ const a = (o) => ({
           flexDirection: "column"
         },
         "& .splitter-layout.splitter-layout-vertical > .layout-splitter:hover": {
-          borderTop: `5px solid ${o.palette.grey[5008]}`,
-          borderBottom: `5px solid ${o.palette.grey[5008]}`
+          borderTop: "2px",
+          borderBottom: "2px",
+          background: o.palette.action.hover
         }
       }
     }
@@ -1938,32 +2384,558 @@ const a = (o) => ({
   M4LCommonActions: {
     styleOverrides: {
       "&.M4LCommonActions-root": {
+        padding: "14px",
+        display: "flex",
+        gap: "14px",
+        justifyContent: "flex-end",
+        width: "100%"
+      }
+    }
+  }
+}), S = (o) => ({
+  M4LinearProgressIndeterminate: {
+    styleOverrides: {
+      "&.M4LinearProgressIndeterminate-root": {
+        width: "100%",
+        position: "absolute",
+        padding: "1px",
+        top: "0",
+        left: "0",
+        "@keyframes borealisBar": {
+          "0%": {
+            left: "0%",
+            right: "100%",
+            width: "0%"
+          },
+          "30%": {
+            left: "0%",
+            right: "75%",
+            width: "60%"
+          },
+          "90%": {
+            right: "0%",
+            left: "50%",
+            width: "25%"
+          },
+          "100%": {
+            left: "100%",
+            right: "0%",
+            width: "0%"
+          }
+        },
+        "&:before": {
+          content: '""',
+          borderRadius: "10px",
+          position: "absolute",
+          top: "-4px",
+          right: "-4px",
+          bottom: "-4px",
+          left: "-4px"
+        },
+        "& .M4LinearProgressIndeterminate-windowLinearProgressBar": {
+          position: "absolute",
+          borderRadius: "10px",
+          top: "0",
+          right: "100%",
+          bottom: "0",
+          left: "0",
+          backgroundColor: o.palette.state.focus,
+          width: "0",
+          animation: "borealisBar 2s linear infinite"
+        }
+      }
+    }
+  }
+}), R = (o) => ({
+  M4LPropertyValue: {
+    styleOverrides: {
+      "&.M4LPropertyValue-root": {
+        test: "root"
+      }
+    }
+  }
+}), A = (o) => ({
+  M4LTab: {
+    styleOverrides: {
+      "&.M4LTab-root": {
+        "& .MuiButtonBase-root": {
+          borderRadius: "4px",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          padding: "4px 12px 4px 8px",
+          height: "fit-content",
+          width: "fit-content",
+          minHeight: "fit-content",
+          minWidth: "fit-content",
+          gap: "8px",
+          ...o.typography.paragraph,
+          color: o.palette.text.primary,
+          "& .M4LIcon-root": {
+            marginBottom: "0"
+          }
+        },
+        "& .MuiButtonBase-root:hover": {
+          background: o.palette.state.default,
+          color: o.palette.state.hover,
+          "& .M4LIcon-icon": {
+            backgroundColor: o.palette.state.hover
+          }
+        },
+        "& .Mui-selected": {
+          background: o.palette.state.active12,
+          border: "1px solid",
+          borderColor: o.palette.state.active12,
+          boxShadow: o.customShadows.z2,
+          "&::before": {
+            content: '""',
+            width: "3px",
+            height: "16px",
+            left: "0px",
+            backgroundColor: o.palette.state.active,
+            borderRadius: "0px 2px 2px 0px",
+            position: "absolute"
+          }
+        }
+      }
+    }
+  }
+}), m = (o) => ({
+  M4LAccordion: {
+    styleOverrides: {
+      "&.M4LAccordion-root": {
+        width: "100%",
+        background: o.palette.background.default,
+        boxShadow: o.customShadows.z2,
+        borderTop: "1px solid",
+        borderColor: o.palette.state.default,
+        borderRadius: "4px",
+        "& .M4LTypography-root": {
+          "& .MuiTypography-root": {
+            ...o.typography.bodyDens,
+            color: o.palette.text.disabled
+          }
+        },
+        "& .MuiPaper-root": {
+          marginBottom: "0px"
+        }
+      },
+      "& .MuiButtonBase-root": {
+        "&.MuiAccordionSummary-root.Mui-expanded": {
+          background: o.palette.state.active12,
+          "& .M4LTypography-root": {
+            "& .MuiTypography-root": {
+              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,
+        boxShadow: o.customShadows.z2,
+        borderTop: "1px solid",
+        borderColor: o.palette.state.default,
+        borderRadius: "4px",
+        padding: "8px",
+        "& .MuiCollapse-wrapper": {
+          padding: "8px",
+          borderRadius: "4px"
+        }
+      }
+    }
+  }
+}), T = (o) => ({
+  M4LRHFormProvider: {
+    styleOverrides: {
+      "&.M4LRHFormProvider-root": {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "auto"
+      }
+    }
+  }
+}), D = (o) => ({
+  M4LPeriod: {
+    styleOverrides: {
+      "&.M4LPeriod-root": {
+        border: "solid 1px",
+        borderColor: o.palette.state.borderDefault,
+        boxShadow: o.customShadows.z2,
+        display: "flex",
+        width: "100%",
+        gap: "2px",
+        borderRadius: "4px",
+        padding: "4px 0 4px 4px",
+        "& .M4LPeriod-stateReadOnly": {},
+        "& .M4LPeriod-gap": {
+          backgroundColor: "transparent"
+        },
+        "& .M4LIcon-root": {
+          margin: "0px 8px"
+        },
+        "& .M4LPeriod-containerDateLabel": {
+          width: "100%",
+          borderRadius: "2px",
+          border: "solid 1px",
+          borderColor: o.palette.state.borderDefault,
+          padding: "0px 0px 0px 8px"
+        },
+        "& .M4LPeriod-containerDateValue": {
+          width: "100%",
+          borderRadius: "2px",
+          border: "solid 1px",
+          borderColor: o.palette.state.borderDefault,
+          padding: "0px 0px 0px 8px"
+        },
+        "&:not(.M4LPeriod-stateReadOnly).M4LPeriod-variantMonoperiod": {
+          width: "100%",
+          "& .MuiAutocomplete-root": {
+            width: "100%",
+            borderRadius: "2px",
+            borderColor: o.palette.state.borderDefault,
+            "& .MuiInputBase-root": {
+              borderRadius: "2px",
+              paddingLeft: "4px",
+              background: "transparent"
+            }
+          },
+          "& .MuiTextField-root": {
+            width: "100%",
+            borderRadius: "2px",
+            border: "solid 1px",
+            borderColor: o.palette.state.borderDefault,
+            "& .MuiInputBase-root": {
+              borderRadius: "2px",
+              paddingLeft: "4px",
+              background: "transparent"
+            },
+            "& .MuiInputBase-root.Mui-focused": {
+              borderRadius: "2px",
+              paddingLeft: "4px",
+              borderColor: o.palette.state.active
+            },
+            "& .MuiInputBase-root:hover": {
+              borderRadius: "2px",
+              paddingLeft: "4px",
+              background: o.palette.state.active12
+            }
+          },
+          "&:hover": {
+            borderColor: o.palette.state.hover,
+            "& .MuiAutocomplete-root": {
+              borderColor: o.palette.state.active12
+            }
+          }
+        },
+        "&.M4LPeriod-stateError": {
+          borderColor: o.palette.state.error.normal,
+          boxShadow: o.customShadows.z2,
+          "&.M4LPeriod-stateError:hover": {
+            borderColor: o.palette.state.error.normal,
+            background: "transparent",
+            boxShadow: o.customShadows.z2
+          },
+          "& .MuiTextField-root:hover": {
+            background: "transparent",
+            "& .MuiInputBase-root:hover": {
+              borderRadius: "2px",
+              paddingLeft: "4px",
+              background: "transparent"
+            }
+          }
+        },
+        "&.M4LPeriod-stateWarning": {
+          borderColor: o.palette.state.warning.normal,
+          boxShadow: o.customShadows.z2,
+          "&.M4LPeriod-stateWarning:hover": {
+            borderColor: o.palette.state.warning.normal,
+            background: "transparent",
+            boxShadow: o.customShadows.z2,
+            "& .MuiTextField-root:hover": {
+              background: "transparent",
+              "& .MuiInputBase-root:hover": {
+                borderRadius: "2px",
+                paddingLeft: "4px",
+                background: "transparent"
+              }
+            }
+          }
+        },
+        "&.M4LPeriod-stateSuccess": {
+          borderColor: o.palette.state.success.normal,
+          boxShadow: o.customShadows.z2,
+          "&.M4LPeriod-stateSuccess:hover": {
+            borderColor: o.palette.state.success.normal,
+            background: "transparent",
+            boxShadow: o.customShadows.z2,
+            "& .MuiTextField-root:hover": {
+              background: "transparent",
+              "& .MuiInputBase-root:hover": {
+                borderRadius: "2px",
+                paddingLeft: "4px",
+                background: "transparent"
+              }
+            }
+          }
+        },
+        "&.M4LPeriod-stateInfo": {
+          borderColor: o.palette.state.info.normal,
+          boxShadow: o.customShadows.z2,
+          "&.M4LPeriod-stateInfo:hover": {
+            borderColor: o.palette.state.info.normal,
+            background: "transparent",
+            boxShadow: o.customShadows.z2,
+            "& .MuiTextField-root:hover": {
+              background: "transparent",
+              "& .MuiInputBase-root:hover": {
+                borderRadius: "2px",
+                paddingLeft: "4px",
+                background: "transparent"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}), P = (o) => ({
+  M4LModalDialog: {
+    styleOverrides: {
+      "&.M4LModal-root": {
+        test: "root",
+        "& .MuiPaper-root": {
+          display: "flex",
+          flexDirection: "column",
+          height: "fit-content",
+          overflow: "hidden",
+          width: "fit-content",
+          borderRadius: "4px",
+          minHeight: "fit-content",
+          minWidth: "fit-content",
+          margin: "0px",
+          background: "transparent",
+          "& .M4LModal-windowBaseRoot": {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%",
+            padding: "12px"
+          },
+          "& .M4LModal-containerWindow": {
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+            overflow: "hidden",
+            width: "100%",
+            gap: "24px",
+            background: o.palette.background.default,
+            boxShadow: o.customShadows.z3,
+            borderRadius: "4px",
+            "& .M4LCommonActions-root": {
+              padding: "12px 12px 12px 0px",
+              margin: "0px",
+              width: "100%",
+              height: "fit-content",
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "flex-end",
+              gap: "12px",
+              background: o.palette.background.neutral
+            },
+            "& .M4LModal-containerMassageIlustration": {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+              width: "100%",
+              padding: "24px 12px 0px 12px",
+              "& .M4LModal-modalContent": {
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "12px",
+                "& .M4LModal-illustrationContainer": {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  marginBottom: "12px",
+                  height: "100px",
+                  width: "100px"
+                },
+                "& .MuiTypography-subtitle": {
+                  ...o.typography.subtitleDens,
+                  color: o.palette.text.primary
+                },
+                "& .M4LModal-messageContainer": {
+                  ...o.typography.body,
+                  color: o.palette.text.primary,
+                  textAlign: "center"
+                }
+              }
+            },
+            "& .M4LModal-headerContainer": {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              minHeight: "36px",
+              borderBottom: `1px solid ${o.palette.divider}`,
+              "& .M4LModal-iconHeader": {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                marginRight: o.spacing(1.5)
+              },
+              "& .M4LModal-titleHeader": {
+                ...o.typography.subtitle1,
+                width: "100%",
+                whiteSpace: "nowrap",
+                textOverflow: "ellipsis",
+                overflow: "hidden"
+              },
+              "& .M4LModal-iconCloseHeader": {}
+            }
+          },
+          "& .react-resizable": {
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            "& .custom-handle-nw": {
+              position: "absolute",
+              top: "0",
+              left: "0"
+            },
+            "& .M4LIcon-root": {
+              "& .M4LIcon-icon": {
+                background: o.palette.text.secondary,
+                boxShadow: o.customShadows.z1
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}), z = (o) => ({
+  M4LPaperForm: {
+    styleOverrides: {
+      "&.M4LPaperForm-root": {
+        margin: "0px 0px 8px 0px",
+        padding: "0",
+        borderRadius: "4px",
+        boxShadow: o.customShadows.z2,
+        background: o.palette.background.default,
+        border: "1px solid",
+        borderColor: o.palette.state.default,
+        width: "100%",
+        height: "auto",
+        "& .M4LPaperForm-headerContainer": {
+          width: "100%",
+          height: "fit-content",
+          minHeight: "28px",
+          padding: "4px 8px",
+          margin: "0px",
+          borderRadius: "4px",
+          background: o.palette.state.default,
+          boxShadow: o.customShadows.z1,
+          borderBottom: "none",
+          "& .M4LPaperForm-iconTitleContainer": {
+            ...o.typography.bodyDens,
+            color: o.palette.text.primary,
+            display: "flex",
+            gap: "8px",
+            "& .M4LPaperForm-iconHeaderContainer": {
+              margin: "0px"
+            }
+          }
+        },
+        "& .M4LPaperForm-content": {
+          height: "fit-content",
+          width: "100%",
+          padding: "12px 8px 8px 8px"
+        }
+      }
+    }
+  }
+}), V = (o) => ({
+  M4LTooltip: {
+    styleOverrides: {
+      "&.M4LTooltip-root": {
+        test: "root",
+        "& .MuiTooltip-tooltip": {
+          display: "flex",
+          alignItems: "center",
+          background: o.palette.background.default,
+          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: "1px solid",
+          borderColor: o.palette.background.background,
+          ...o.typography.body
+        }
+      }
+    }
+  }
+}), F = (o) => ({
+  M4LBadge: {
+    styleOverrides: {
+      "& .M4LBadge-root": {
         test: "root"
       }
     }
   }
 });
 export {
-  g as M,
-  a,
-  r as b,
-  i as c,
-  n as d,
-  l as e,
-  x as f,
-  p as g,
-  d as h,
-  s as i,
+  m as A,
+  D as B,
+  P as C,
+  z as D,
+  V as E,
+  b as M,
+  i as a,
+  T as b,
+  n as c,
+  p as d,
+  d as e,
+  l as f,
+  M as g,
+  s as h,
+  F as i,
   c as j,
   u as k,
-  b as l,
-  y as m,
-  M as n,
-  L as o,
-  f as p,
-  v as q,
-  w as r,
-  C as s,
+  x as l,
+  g as m,
+  L as n,
+  w as o,
+  y as p,
+  f as q,
+  v as r,
+  h as s,
   k as t,
-  B as u
+  C as u,
+  I as v,
+  B as w,
+  S as x,
+  R as y,
+  A as z
 };