@m4l/styles 0.0.25 → 0.0.26

package/theme/overrides/M4LExtendedComponents/{index.a0dbf03e.js → index.ebc4ec7a.js}

@@ -8,14 +8,26 @@ const i = (o) => ({
         background: o.palette.background.default,
         boxShadow: o.customShadows.z1,
         padding: "0px",
-        border: "none",
-        overflow: "hidden",
-        height: "36px",
+        border: "1px solid",
+        borderColor: "transparent",
         [o.breakpoints.down("sm")]: {
-          gap: "0px",
-          height: "auto",
-          minHeight: "auto",
-          overflow: "initial"
+          gap: "4px"
+        },
+        "&.M4LDynamicFilter-isEmpty.M4LDynamicFilter-isMobile": {
+          "& .M4LDynamicFilter-wrapperApplyedFilters": {
+            display: "none"
+          }
+        },
+        "&.M4LDynamicFilter-isEmpty": {
+          "& .M4LDynamicFilter-wrapperApplyedFilters": {
+            [o.breakpoints.down("sm")]: {
+              display: "none",
+              height: "100%"
+            },
+            "& .MuiBox-root": {
+              height: "fit-content"
+            }
+          }
         },
         "& .simplebar-content": {
           height: "100%"
@@ -35,6 +47,7 @@ const i = (o) => ({
             width: "100%",
             alignItems: "center",
             maxWidth: "100%",
+            borderRadius: "4px",
             [o.breakpoints.down("sm")]: {
               height: "100%",
               padding: "8px"
@@ -70,6 +83,7 @@ const i = (o) => ({
           maxWidth: "135px",
           width: "100%",
           alignItems: "center",
+          borderRadius: "4px",
           "& > input": {
             border: "1px solid",
             borderColor: o.palette.state.overdefoult,
@@ -110,7 +124,10 @@ const i = (o) => ({
         "& .M4LDynamicFilter-containerApplyedFilters": {
           padding: "2px",
           gap: "4px",
-          height: "auto"
+          height: "fit-content",
+          [o.breakpoints.down("sm")]: {
+            padding: "0px"
+          }
         },
         "& .M4LDynamicFilter-applyedFilter": {
           height: "24px",
@@ -519,6 +536,10 @@ const i = (o) => ({
   M4LPopover: {
     styleOverrides: {
       "&.M4LPopover-root": {
+        minWidth: "unset",
+        minHeight: "unset",
+        width: "100%",
+        height: "100%",
         ".MuiPaper-root": {
           background: o.palette.background.default,
           borderRadius: "6px",
@@ -1271,7 +1292,7 @@ const i = (o) => ({
                       "& .MuiButtonBase-root": {
                         "& .M4LIcon-root": {
                           "& .M4LIcon-icon": {
-                            backgroundColor: o.palette.state.focus
+                            backgroundColor: `${o.palette.state.focus}!important`
                           }
                         }
                       },
@@ -1322,15 +1343,16 @@ const i = (o) => ({
           "& .M4LSideBar-collapseButton": {
             display: "flex",
             paddingTop: "12px",
-            borderTop: "2px solid",
-            borderColor: o.palette.state.default,
-            justifyContent: "center",
+            borderTop: "1px solid",
+            borderColor: o.palette.state.overdefoult,
+            justifyContent: "flex-end",
             marginRight: "14px",
             marginLeft: "14px",
-            gap: "20px",
+            gap: "40px",
             alignItems: "center",
             height: "48px",
             minHeight: "48px",
+            flexDirection: "row-reverse",
             "& .M4LSideBar-containerLogoButton": {
               display: "flex",
               gap: "14px",
@@ -1345,16 +1367,6 @@ const i = (o) => ({
               }
             }
           }
-        },
-        "& .M4LSideBar-contentMobile": {
-          width: "100%",
-          display: "flex",
-          flexDirection: "column",
-          paddingLeft: "14px"
-        },
-        "& .M4LSideBar-contentDesktop": {
-          display: "flex",
-          gap: "20px"
         }
       }
     }
@@ -1362,6 +1374,11 @@ const i = (o) => ({
   M4LSideBarPopover: {
     styleOverrides: {
       "&.M4LSideBar-popover": {
+        "& .M4LSideBar-subItemActive": {
+          "& .M4LIcon-icon": {
+            backgroundColor: `${o.palette.state.focus}!important`
+          }
+        },
         "& .M4LSideBar-navListSubItemRoot": {
           width: "120px",
           height: "fit-content",
@@ -1385,12 +1402,25 @@ const i = (o) => ({
                 textWrap: "nowrap"
               }
             },
+            "& .MuiPaper-root": {
+              "& .M4LSideBar-navListSubItemRoot": {
+                "& .M4LSideBar-subItemActive": {
+                  "& .MuiButtonBase-root": {
+                    "& .M4LIcon-root": {
+                      "& .M4LIcon-icon": {
+                        backgroundColor: o.palette.state.focus
+                      }
+                    }
+                  }
+                }
+              }
+            },
             "& .M4LSideBar-subItemActive": {
               height: "fit-content",
               "& .MuiButtonBase-root": {
                 "& .M4LIcon-root": {
                   "& .M4LIcon-icon": {
-                    backgroundColor: o.palette.state.focus
+                    backgroundColor: `${o.palette.state.focus}!important`
                   }
                 }
               },
@@ -1417,6 +1447,11 @@ const i = (o) => ({
   M4LSideBarDrawer: {
     styleOverrides: {
       "&.M4LSideBar-drawer": {
+        "& .M4LSideBar-subItemActive": {
+          "& .M4LIcon-icon": {
+            backgroundColor: `${o.palette.state.focus}!important`
+          }
+        },
         "& .M4LSideBar-contentMobile": {
           width: "100%",
           height: "100%",
@@ -1449,7 +1484,7 @@ const i = (o) => ({
               "& .M4LImage-root": {
                 position: "relative",
                 background: o.palette.background.default,
-                boxShadow: o.customShadows.z3,
+                boxShadow: o.customShadows.z2,
                 padding: "6px",
                 borderRadius: "6px",
                 minWidth: "50px !important",
@@ -1604,6 +1639,21 @@ const i = (o) => ({
                         }
                       }
                     },
+                    "& .M4LSideBar-subItemActive": {
+                      "& .MuiButtonBase-root": {
+                        "& .M4LIcon-root": {
+                          "& .M4LIcon-icon": {
+                            backgroundColor: `${o.palette.state.focus}!important`
+                          }
+                        }
+                      },
+                      "& .M4LSideBar-navSubItemContentBullet": {
+                        height: "14px",
+                        borderRadius: "4px",
+                        backgroundColor: o.palette.state.focus,
+                        gap: "8px"
+                      }
+                    },
                     "&:hover": {
                       background: o.palette.state.default
                     }
@@ -1644,9 +1694,9 @@ const i = (o) => ({
           "& .M4LSideBar-collapseButton": {
             display: "flex",
             paddingTop: "12px",
-            borderTop: "2px solid",
-            borderColor: o.palette.state.default,
-            justifyContent: "center",
+            borderTop: "1px solid",
+            borderColor: o.palette.state.overdefoult,
+            justifyContent: "flex-end",
             marginRight: "14px",
             marginLeft: "14px",
             gap: "20px",
@@ -1696,7 +1746,10 @@ const i = (o) => ({
           paddingRight: "0px",
           width: "100%",
           maxWidth: "100%",
-          gap: "0px"
+          gap: "0px",
+          borderRadius: "4px",
+          height: "36px",
+          overflow: "hidden"
         },
         "& .M4LAreasAdmin-rootContent": {
           display: "flex",
@@ -1707,7 +1760,8 @@ const i = (o) => ({
           alignItems: "center",
           gap: "8px",
           [o.breakpoints.down("sm")]: {
-            gap: "0px"
+            gap: "0px",
+            borderRadius: "4px"
           },
           "&.M4LAreasAdmin-isFocus": {
             border: "1px solid",
@@ -1788,32 +1842,46 @@ const i = (o) => ({
                 width: "fit-content",
                 justifyContent: "space-between",
                 [o.breakpoints.down("sm")]: {
-                  justifyContent: "space-between",
                   width: "100%",
                   background: "none"
                 },
-                "& .css-jjtu05": {
-                  "& .css-16ugaun": {},
-                  "& .simplebar-wrapper": {
-                    width: "fit-content",
-                    maxWidth: "100%",
-                    "& .simplebar-height-auto-observer-wrapper": {
+                "& .M4LAreasAdmin-areaChipMobileRoot": {
+                  width: "100%",
+                  "& .M4LAreasAdmin-areaChipRoot": {
+                    width: "100%",
+                    paddingLeft: "8px",
+                    display: "flex",
+                    alignItems: "center",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    "& .M4LAreasAdmin-areaChipRoot": {
+                      width: "100%"
+                    }
+                  }
+                }
+              },
+              "& .simplebar-wrapper": {
+                width: "fit-content",
+                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": {
                       width: "fit-content",
                       maxWidth: "100%",
-                      overflow: "auto"
-                    },
-                    "& .simplebar-mask": {
-                      "& .simplebar-offset": {
-                        "& .simplebar-content-wrapper": {
-                          width: "fit-content",
-                          maxWidth: "100%",
-                          overflow: "auto",
-                          "& .simplebar-content": {
-                            width: "fit-content",
-                            overflow: "auto",
-                            gap: "4px"
-                          }
-                        }
+                      overflow: "auto",
+                      "& .simplebar-content": {
+                        width: "fit-content",
+                        overflow: "auto",
+                        gap: "4px"
                       }
                     }
                   }
@@ -1825,10 +1893,20 @@ const i = (o) => ({
                     borderRadius: "4px",
                     overflow: "hidden",
                     width: "fit-content",
+                    cursor: "pointer",
                     [o.breakpoints.down("sm")]: {
                       background: "none",
                       border: "none",
-                      boxShadow: "none"
+                      boxShadow: "none",
+                      width: "100%"
+                    },
+                    "& .M4LAreasAdmin-areaChipEditButton": {
+                      transition: "all ease 0.3s",
+                      opacity: "0"
+                    },
+                    "&:hover .M4LAreasAdmin-areaChipEditButton": {
+                      transition: "all ease 0.3s",
+                      opacity: "1"
                     }
                   }
                 },
@@ -1843,7 +1921,8 @@ const i = (o) => ({
                   borderRadius: "4px",
                   [o.breakpoints.down("sm")]: {
                     backgroundColor: o.palette.background.default,
-                    boxShadow: o.customShadows.z1
+                    boxShadow: o.customShadows.z1,
+                    width: "100%"
                   },
                   "&:hover": {
                     background: o.palette.state.active12
@@ -1874,7 +1953,8 @@ const i = (o) => ({
                   ...o.typography.body,
                   color: o.palette.text.primary,
                   [o.breakpoints.down("sm")]: {
-                    boxShadow: "none"
+                    boxShadow: "none",
+                    width: "100%"
                   },
                   "& .M4LIconButton-root": {
                     background: "transparent",
@@ -2063,8 +2143,9 @@ const i = (o) => ({
             }
           },
           "& .M4LAreasViewer-windowRoot": {
-            background: o.palette.background.neutral,
-            border: "1px solid transparent",
+            background: o.palette.background.background,
+            border: "1px solid",
+            borderColor: o.palette.state.overdefoult,
             boxShadow: o.customShadows.z2,
             borderRadius: "4px",
             display: "flex",
@@ -2096,8 +2177,6 @@ const i = (o) => ({
               borderRadius: "4px",
               border: "none",
               boxShadow: o.customShadows.z1,
-              borderTop: "1px solid",
-              borderColor: o.palette.state.default,
               "& .M4LAreasViewer-windowHeaderContent": {
                 display: "flex",
                 width: "100%",
@@ -2105,12 +2184,14 @@ const i = (o) => ({
                 alignItems: "center",
                 "& .M4LAreasViewer-windowHeaderTitle": {
                   display: "flex",
-                  alignItems: "center"
+                  alignItems: "center",
+                  overflow: "visible"
                 }
               },
               "& .M4LTypography-root .MuiTypography-root": {
                 ...o.typography.paragraph,
-                color: o.palette.text.primary
+                color: o.palette.text.primary,
+                overflow: "visible"
               }
             },
             "& .M4LAreasViewer-windowToastiesContainer": {
@@ -2238,7 +2319,7 @@ const i = (o) => ({
             },
             "& .M4LAreasViewer-windowContent": {
               padding: "8px",
-              backgroundColor: o.palette.background.background,
+              background: o.palette.background.background,
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
@@ -2255,20 +2336,19 @@ const i = (o) => ({
               "& .M4LAreasViewer-windowHeader": {
                 display: "flex",
                 flexDirection: "column",
-                background: o.palette.state.active12,
+                background: o.palette.state.toneOp,
                 gap: "4px",
                 alignItems: "center",
                 position: "relative",
                 padding: "4px 4px 4px 8px",
                 justifyContent: "end",
                 minHeight: "36px",
-                borderTop: "1px solid",
-                borderColor: o.palette.state.borderTop,
                 overflow: "hidden",
                 cursor: "move",
                 height: "36px",
                 "& .M4LTypography-root .MuiTypography-root": {
-                  ...o.typography.paragraphDens
+                  ...o.typography.paragraphDens,
+                  overflow: "visible"
                 },
                 "& .MuiButtonBase-root": {
                   "& .M4LIcon-icon": {
@@ -2344,7 +2424,8 @@ const i = (o) => ({
                 },
                 "& .M4LTypography-root .MuiTypography-root": {
                   ...o.typography.body,
-                  color: o.palette.text.secondary
+                  color: o.palette.text.secondary,
+                  overflow: "visible"
                 }
               }
             },
@@ -2353,7 +2434,7 @@ const i = (o) => ({
               background: o.palette.background.neutral,
               borderRadius: "4px",
               border: "1px solid",
-              borderColor: o.palette.state.default,
+              borderColor: o.palette.state.overdefoult,
               "&:not(.M4LAreasViewer-loading)": {
                 "& .M4LinearProgressIndeterminate-root": {
                   opacity: 0
@@ -2370,12 +2451,10 @@ const i = (o) => ({
                 padding: "4px",
                 "& .M4LAreasViewer-windowRootContainer": {
                   "& .M4LAreasViewer-windowHeader": {
-                    background: o.palette.background.neutral,
+                    background: o.palette.state.default,
                     height: "28px",
                     borderRadius: "4px",
                     boxShadow: o.customShadows.z1,
-                    borderTop: "2px solid",
-                    borderColor: o.palette.state.default,
                     "& .M4LIcon-root": {
                       "& .M4LIcon-icon": {
                         backgroundColor: o.palette.text.primary
@@ -2383,7 +2462,8 @@ const i = (o) => ({
                     },
                     "& .M4LTypography-root .MuiTypography-root": {
                       ...o.typography.body,
-                      color: o.palette.text.primary
+                      color: o.palette.text.primary,
+                      overflow: "visible"
                     }
                   }
                 }
@@ -2402,8 +2482,6 @@ const i = (o) => ({
                   height: "28px",
                   borderRadius: "4px",
                   boxShadow: o.customShadows.z1,
-                  borderTop: "1.5px solid",
-                  borderColor: o.palette.state.borderTop,
                   "& .M4LIcon-root": {
                     "& .M4LIcon-icon": {
                       backgroundColor: o.palette.text.primary
@@ -2411,7 +2489,8 @@ const i = (o) => ({
                   },
                   "& .M4LTypography-root .MuiTypography-root": {
                     ...o.typography.body,
-                    color: o.palette.text.primary
+                    color: o.palette.text.primary,
+                    overflow: "visible"
                   }
                 }
               }
@@ -2423,12 +2502,12 @@ const i = (o) => ({
           boxShadow: o.customShadows.z2,
           display: "flex",
           alignItems: "center",
-          padding: "10px",
+          padding: "8px",
           gap: "8px",
           "& .M4LAreasViewer-panelWindowsButtonContainer": {
             borderRadius: "2px",
-            background: o.palette.background.default,
-            boxShadow: o.customShadows.z2,
+            background: o.palette.state.default,
+            boxShadow: o.customShadows.z1,
             "&.M4LAreasViewer-selected": {
               background: o.palette.state.active,
               "& .M4LIconButton-root": {
@@ -2592,7 +2671,8 @@ const i = (o) => ({
             border: "none",
             "& .M4LTypography-root .MuiTypography-root": {
               ...o.typography.paragraph,
-              color: o.palette.text.primary
+              color: o.palette.text.primary,
+              overflow: "visible"
             },
             "& .M4LAreasViewer-windowHeaderContent": {
               display: "flex",
@@ -2749,7 +2829,7 @@ const i = (o) => ({
       }
     }
   }
-}), k = (o) => ({
+}), v = (o) => ({
   M4LAccountPopover: {
     styleOverrides: {
       "&.M4LAccountPopover-root": {
@@ -2825,13 +2905,13 @@ const i = (o) => ({
               width: "100%",
               borderRadius: "4px",
               padding: "0px 8px",
+              cursor: "pointer",
               "&:hover": {
                 background: o.palette.state.default
               },
               "& .M4LAccountPopover-menuItem": {
                 padding: "4px",
-                borderRadius: "4px",
-                cursor: "pointer"
+                borderRadius: "4px"
               }
             }
           },
@@ -2843,13 +2923,13 @@ const i = (o) => ({
             borderRadius: "4px",
             width: "100%",
             alignItems: "center",
+            cursor: "pointer",
             "&:hover": {
               background: o.palette.state.default
             },
             "& .M4LAccountPopover-logOut": {
               padding: "4px",
               borderRadius: "4px",
-              cursor: "pointer",
               color: o.palette.text.primary,
               ...o.typography.paragraph
             }
@@ -2880,7 +2960,7 @@ const i = (o) => ({
       }
     }
   }
-}), v = (o) => ({
+}), k = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -3117,7 +3197,7 @@ const i = (o) => ({
       }
     }
   }
-}), A = (o) => ({
+}), m = (o) => ({
   M4LTab: {
     styleOverrides: {
       "&.M4LTab-root": {
@@ -3169,7 +3249,7 @@ const i = (o) => ({
       }
     }
   }
-}), m = (o) => ({
+}), A = (o) => ({
   M4LAccordion: {
     styleOverrides: {
       "&.M4LAccordion-root": {
@@ -3221,7 +3301,7 @@ const i = (o) => ({
       }
     }
   }
-}), T = (o) => ({
+}), D = (o) => ({
   M4LRHFormProvider: {
     styleOverrides: {
       "&.M4LRHFormProvider-root": {
@@ -3232,7 +3312,7 @@ const i = (o) => ({
       }
     }
   }
-}), D = (o) => ({
+}), T = (o) => ({
   M4LPeriod: {
     styleOverrides: {
       "&.M4LPeriod-root": {
@@ -3558,7 +3638,7 @@ const i = (o) => ({
       }
     }
   }
-}), V = (o) => ({
+}), F = (o) => ({
   M4LTooltip: {
     styleOverrides: {
       "&.M4LTooltip-root": {
@@ -3583,11 +3663,27 @@ const i = (o) => ({
       }
     }
   }
-}), F = (o) => ({
+}), V = (o) => ({
   M4LBadge: {
     styleOverrides: {
       "&.M4LBadge-root": {
-        test: "root"
+        test: "root",
+        "& .MuiBadge-root": {
+          "& .M4LIconButton-root": {
+            "& .M4LIcon-root .M4LIcon-icon": {}
+          },
+          "& .MuiBadge-badge": {
+            fontWeight: "450",
+            fontSize: "8pt",
+            minWidth: "16px",
+            lineHeight: "1px",
+            textAlign: "center",
+            backgroundColor: o.palette.state.active,
+            height: "16px",
+            top: "14%",
+            right: "16%"
+          }
+        }
       }
     }
   }
@@ -3856,7 +3952,7 @@ const i = (o) => ({
       }
     }
   }
-}), H = (o) => ({
+}), W = (o) => ({
   M4LPager: {
     styleOverrides: {
       "&.M4LPager-root": {
@@ -3946,7 +4042,7 @@ const i = (o) => ({
       }
     }
   }
-}), W = (o) => ({
+}), H = (o) => ({
   M4LCheckBox: {
     styleOverrides: {
       "&.M4LCheckBox-root": {
@@ -4020,7 +4116,7 @@ const i = (o) => ({
         width: "100%",
         height: "auto",
         position: "relative",
-        minHeight: "37px",
+        minHeight: "36px",
         "&:not(:last-of-type)": {
           margin: "unset"
         }
@@ -4051,13 +4147,22 @@ const i = (o) => ({
   M4LScrollBar: {
     styleOverrides: {
       "&.M4LScrollBar-root": {
+        flexGrow: 1,
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
         minHeight: "inherit",
         "& .ScrollbarsCustom-Content": {
-          position: "relative",
-          "& .M4LScrollBar-content": {
-            position: "absolute",
-            inset: 0
-          }
+          position: "relative"
+        },
+        "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before": {
+          background: o.palette.text.disabled,
+          borderRadius: "2px",
+          marginBottom: "40px"
+        },
+        "& .simplebar-track.simplebar-vertical .simplebar-scrollbar:before": {
+          background: o.palette.text.disabled,
+          borderRadius: "2px"
         }
       }
     }
@@ -4072,14 +4177,14 @@ const i = (o) => ({
   }
 });
 export {
-  A,
-  m as B,
-  D as C,
+  m as A,
+  A as B,
+  T as C,
   P as D,
   z as E,
-  V as F,
-  H as G,
-  W as H,
+  F,
+  W as G,
+  H,
   j as I,
   G as J,
   E as K,
@@ -4087,14 +4192,14 @@ export {
   b as M,
   _ as N,
   i as a,
-  T as b,
+  D as b,
   n as c,
   p as d,
   d as e,
   l as f,
   M as g,
   s as h,
-  F as i,
+  V as i,
   c as j,
   O as k,
   u as l,
@@ -4105,8 +4210,8 @@ export {
   y as q,
   w as r,
   h as s,
-  k as t,
-  v as u,
+  v as t,
+  k as u,
   C as v,
   I as w,
   B as x,