@m4l/styles 0.0.17 → 0.0.18

package/theme/overrides/M4LExtendedComponents/{index.39bae580.js → index.bd713d88.js}

@@ -505,9 +505,9 @@ const i = (o) => ({
     styleOverrides: {
       "&.M4LButton-root": {
         width: "fit-content",
-        minWidth: "78px",
         display: "flex",
         justifyContent: "center",
+        ...o.typography.action,
         "& .M4LButton-skeleton ": {
           height: "100%!important",
           borderRadius: "4px"
@@ -703,7 +703,7 @@ const i = (o) => ({
   M4LoadingButton: {
     styleOverrides: {
       "&.M4LoadingButton-root": {
-        width: "100%",
+        width: "auto",
         display: "flex",
         justifyContent: "center",
         "& .MuiLoadingButton-loading": {
@@ -712,10 +712,10 @@ const i = (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 ": {
@@ -809,10 +809,15 @@ const i = (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
             },
@@ -822,7 +827,7 @@ const i = (o) => ({
                 backgroundColor: o.palette.patronus?.marbleLight[10]
               },
               "& .MuiTypography-root": {
-                color: o.palette.patronus?.marbleLight[10]
+                color: "#fff"
               }
             },
             "&:active": {
@@ -936,7 +941,7 @@ const i = (o) => ({
       }
     }
   }
-}), y = (o) => ({
+}), L = (o) => ({
   M4LSideBar: {
     styleOverrides: {
       "&.M4LSideBar-root": {
@@ -1425,7 +1430,7 @@ const i = (o) => ({
       }
     }
   }
-}), L = (o) => ({
+}), y = (o) => ({
   M4LAreasAdmin: {
     styleOverrides: {
       "&.M4LAreasAdmin-root": {
@@ -1473,6 +1478,8 @@ const i = (o) => ({
             display: "flex",
             overflow: "hidden",
             width: "100%",
+            backgroundColor: o.palette.state.active,
+            borderRadius: "4px",
             "& .M4LAreasAdmin-areaChipRoot ": {
               margin: "0px",
               borderRadius: "4px 0px 0px 4px",
@@ -1487,12 +1494,11 @@ const i = (o) => ({
             background: o.palette.state.active,
             ...o.typography.body,
             color: o.palette.text.primary,
-            [o.breakpoints.down("sm")]: {
-              borderLeft: "1px solid",
-              borderColor: `${o.palette.patronus?.marbleLight[10]}!important`
-            },
             "& .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`
               }
@@ -1574,6 +1580,11 @@ const i = (o) => ({
               }
             }
           }
+        },
+        "&.M4LAreasAdmin-isMobile": {
+          "& .M4LAreasAdmin-areaContainerChips": {
+            width: "100%"
+          }
         }
       }
     }
@@ -1586,6 +1597,27 @@ const i = (o) => ({
         }
       }
     }
+  },
+  M4LAreasAdminMobilePopoverOptions: {
+    styleOverrides: {
+      "&.M4LAreasAdmin-areasPopoverMobileOptions": {
+        "& .MuiPaper-root": {
+          "& .M4LButton-root": {
+            marginTop: "8px",
+            "& .MuiButtonBase-root": {
+              textWrap: "nowrap"
+            }
+          }
+        }
+      }
+    }
+  },
+  M4LAreasAdminPopoverListWindows: {
+    styleOverrides: {
+      "&.M4LAreasAdmin-areasPopoverListWindows": {
+        test: "root"
+      }
+    }
   }
 }), f = (o) => ({
   M4LAreasViewer: {
@@ -1851,12 +1883,13 @@ const i = (o) => ({
               backgroundColor: "transparent"
             },
             "& .M4LAreasViewer-windowRootContainer": {
-              background: o.palette.background.default,
+              background: o.palette.background.background,
               borderRadius: "4px",
               "& .M4LAreasViewer-windowHeader": {
                 height: "28px",
                 minHeight: "28px",
                 boxShadow: "none",
+                background: o.palette.background.neutral,
                 "& .M4LTypography-root .MuiTypography-root": {
                   ...o.typography.body,
                   color: o.palette.text.secondary
@@ -1870,7 +1903,7 @@ const i = (o) => ({
               boxShadow: o.customShadows.z3,
               padding: "4px",
               "& .M4LAreasViewer-windowHeader": {
-                background: o.palette.background.background,
+                background: o.palette.background.neutral,
                 height: "28px",
                 borderRadius: "4px",
                 boxShadow: o.customShadows.z1,
@@ -1910,11 +1943,11 @@ const i = (o) => ({
               " .M4LIcon-icon": {
                 width: "100px",
                 height: "100px",
-                backgroundColor: o.palette.text.secondary
+                backgroundColor: o.palette.state.skeleton.default
               }
             },
             "& .M4LAreasViewer-areasLoadingErrorTitle": {
-              ...o.typography.h5,
+              ...o.typography.h3,
               color: o.palette.text.primary,
               [o.breakpoints.down("sm")]: {
                 ...o.typography.h5
@@ -1987,11 +2020,11 @@ const i = (o) => ({
               " .M4LIcon-icon": {
                 width: "100px",
                 height: "100px",
-                backgroundColor: o.palette.text.secondary
+                backgroundColor: o.palette.state.skeleton.default
               }
             },
             "& .M4LAreasViewer-areasLoadingErrorTitle": {
-              ...o.typography.h5,
+              ...o.typography.h3,
               color: o.palette.text.primary,
               [o.breakpoints.down("sm")]: {
                 ...o.typography.h5
@@ -2073,9 +2106,14 @@ const i = (o) => ({
         display: "flex",
         width: "100%",
         overflow: "hidden",
-        height: "auto",
+        height: "48px",
         alignItems: "center",
         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",
@@ -2111,11 +2149,12 @@ const i = (o) => ({
         },
         "& .M4LAppBar-containerChilds": {
           display: "flex",
-          width: "100%",
+          width: "70%",
           overflow: "visible",
           alignItems: "center",
           borderRadius: "4px",
           [o.breakpoints.down("sm")]: {
+            width: "100%",
             alignItems: "center",
             gap: "8px",
             borderRadius: "4px 0px 0px 4px",
@@ -2199,7 +2238,7 @@ const i = (o) => ({
       }
     }
   }
-}), C = (o) => ({
+}), k = (o) => ({
   M4LModuleLayout: {
     styleOverrides: {
       "&.M4LModuleLayout-root": {
@@ -2219,7 +2258,7 @@ const i = (o) => ({
       }
     }
   }
-}), k = (o) => ({
+}), C = (o) => ({
   M4LMasterDetailLayout: {
     styleOverrides: {
       "&.M4LMasterDetailLayout-root": {
@@ -2345,7 +2384,11 @@ const i = (o) => ({
   M4LCommonActions: {
     styleOverrides: {
       "&.M4LCommonActions-root": {
-        padding: "14px 0"
+        padding: "14px",
+        display: "flex",
+        gap: "14px",
+        justifyContent: "flex-end",
+        width: "100%"
       }
     }
   }
@@ -2526,6 +2569,7 @@ const i = (o) => ({
       "&.M4LPeriod-root": {
         border: "solid 1px",
         borderColor: o.palette.state.borderDefault,
+        boxShadow: o.customShadows.z2,
         display: "flex",
         width: "100%",
         gap: "2px",
@@ -2594,10 +2638,14 @@ const i = (o) => ({
         },
         "&.M4LPeriod-stateError": {
           borderColor: o.palette.state.error.normal,
+          boxShadow: o.customShadows.z2,
           "&.M4LPeriod-stateError:hover": {
-            borderColor: o.palette.state.error.normal
+            borderColor: o.palette.state.error.normal,
+            background: "transparent",
+            boxShadow: o.customShadows.z2
           },
-          "& .MuiTextField-root": {
+          "& .MuiTextField-root:hover": {
+            background: "transparent",
             "& .MuiInputBase-root:hover": {
               borderRadius: "2px",
               paddingLeft: "4px",
@@ -2606,13 +2654,55 @@ const i = (o) => ({
           }
         },
         "&.M4LPeriod-stateWarning": {
-          borderColor: o.palette.state.warning.normal
+          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
+          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
+          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"
+              }
+            }
+          }
         }
       }
     }
@@ -2633,91 +2723,106 @@ const i = (o) => ({
           minWidth: "fit-content",
           margin: "0px",
           background: "transparent",
-          "& .react-resizable": {
+          "& .M4LModal-windowBaseRoot": {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%",
+            padding: "12px"
+          },
+          "& .M4LModal-containerWindow": {
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "center",
-            height: "292px",
-            width: "250px",
-            minHeight: "292px",
-            minWidth: "250px",
-            "& .custom-handle-nw": {
-              position: "absolute",
-              top: "0",
-              left: "0"
+            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-containerWindow": {
+            "& .M4LModal-containerMassageIlustration": {
               display: "flex",
               flexDirection: "column",
               justifyContent: "center",
               alignItems: "center",
-              height: "fit-content",
-              overflow: "hidden",
-              width: "fit-content",
-              minWidth: "250px",
-              padding: "0px",
-              gap: "24px",
-              background: o.palette.background.default,
-              boxShadow: o.customShadows.z3,
-              borderRadius: "4px",
-              "& .M4LCommonActions-root": {
-                padding: "12px 12px 12px 0px",
-                margin: "0px",
-                width: "100%",
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "flex-end",
-                gap: "12px",
-                background: o.palette.background.neutral
-              },
-              "& .M4LModal-containerMassageIlustration": {
+              height: "100%",
+              width: "100%",
+              padding: "24px 12px 0px 12px",
+              "& .M4LModal-modalContent": {
                 display: "flex",
                 flexDirection: "column",
-                height: "fit-content",
-                width: "fit-content",
-                padding: "24px 12px 0px 12px",
-                "& .M4LModal-modalContent": {
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "12px",
+                "& .M4LModal-illustrationContainer": {
                   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
-                  }
+                  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": {
+              }
+            },
+            "& .M4LModal-headerContainer": {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              minHeight: "36px",
+              borderBottom: `1px solid ${o.palette.divider}`,
+              "& .M4LModal-iconHeader": {
                 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": {}
+                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
               }
             }
           }
@@ -2729,7 +2834,6 @@ const i = (o) => ({
   M4LPaperForm: {
     styleOverrides: {
       "&.M4LPaperForm-root": {
-        test: "root",
         margin: "0px 0px 8px 0px",
         padding: "0",
         borderRadius: "4px",
@@ -2738,7 +2842,7 @@ const i = (o) => ({
         border: "1px solid",
         borderColor: o.palette.state.default,
         width: "100%",
-        height: "100%",
+        height: "auto",
         "& .M4LPaperForm-headerContainer": {
           width: "100%",
           height: "fit-content",
@@ -2761,7 +2865,7 @@ const i = (o) => ({
         },
         "& .M4LPaperForm-content": {
           height: "fit-content",
-          width: "fit-content",
+          width: "100%",
           padding: "12px 8px 8px 8px"
         }
       }
@@ -2792,12 +2896,21 @@ const i = (o) => ({
       }
     }
   }
+}), F = (o) => ({
+  M4LBadge: {
+    styleOverrides: {
+      "& .M4LBadge-root": {
+        test: "root"
+      }
+    }
+  }
 });
 export {
-  D as A,
-  P as B,
-  z as C,
-  V as D,
+  m as A,
+  D as B,
+  P as C,
+  z as D,
+  V as E,
   b as M,
   i as a,
   T as b,
@@ -2807,22 +2920,22 @@ export {
   l as f,
   M as g,
   s as h,
-  c as i,
-  u as j,
-  x as k,
-  g as l,
-  y as m,
-  w as n,
-  L as o,
-  f as p,
-  v as q,
-  h as r,
-  C as s,
+  F as i,
+  c as j,
+  u as k,
+  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,
-  I as u,
-  B as v,
-  S as w,
-  R as x,
-  A as y,
-  m as z
+  C as u,
+  I as v,
+  B as w,
+  S as x,
+  R as y,
+  A as z
 };