@m4l/styles 7.1.13 → 7.1.14-beta.4

package/theme/overrides/M4LExtendedComponents/M4LPager.js

@@ -1,112 +1,114 @@
-const t = (e) => ({
-  M4LPager: {
-    styleOverrides: {
-      "&.M4LPager-root": {
-        test: "root",
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        whiteSpace: "nowrap",
-        width: "100%",
-        justifyContent: "space-between",
-        // pagerActions
-        "& .M4LPager-pagerActions": {
-          display: "flex",
-          padding: "2px",
-          justifyContent: "center",
-          alignItems: "center",
-          gap: "2px",
-          width: "fit-content",
-          background: e.vars.palette.background.default,
-          borderRadius: "4px",
-          margin: "auto",
-          [e.breakpoints.down("sm")]: {
-            gap: "4px",
-            padding: "4px"
-          },
-          "& .M4LIconButton-root": {
-            width: "20px",
-            height: "20px",
-            minWidth: "20px",
-            minHeight: "20px",
-            [e.breakpoints.down("sm")]: {
-              width: "28px",
-              height: "28px",
-              minWidth: "28px",
-              minHeight: "28px"
-            }
-          }
-        },
-        "& .M4LPager-labelRowsPerPageContainer": {
+const M4LPager = (theme) => {
+  return {
+    M4LPager: {
+      styleOverrides: {
+        "&.M4LPager-root": {
+          test: "root",
           display: "flex",
           flexDirection: "row",
-          justifyContent: "center",
           alignItems: "center",
-          "& .M4LPager-select": {
-            "& .MuiSelect-select": {
-              ...e.colorSchemes.finalTheme.typography.body,
-              color: e.vars.palette.text.primary
+          whiteSpace: "nowrap",
+          width: "100%",
+          justifyContent: "space-between",
+          // pagerActions
+          "& .M4LPager-pagerActions": {
+            display: "flex",
+            padding: "2px",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: "2px",
+            width: "fit-content",
+            background: theme.vars.palette.background.default,
+            borderRadius: "4px",
+            margin: "auto",
+            [theme.breakpoints.down("sm")]: {
+              gap: "4px",
+              padding: "4px"
             },
-            "& .MuiSelect-icon": {
-              right: "0",
-              top: "0",
-              bottom: "0"
+            "& .M4LIconButton-root": {
+              width: "20px",
+              height: "20px",
+              minWidth: "20px",
+              minHeight: "20px",
+              [theme.breakpoints.down("sm")]: {
+                width: "28px",
+                height: "28px",
+                minWidth: "28px",
+                minHeight: "28px"
+              }
             }
-          }
-        },
-        "& .M4LPager-labelDisplayRows": {
-          marginLeft: "12px"
-        },
-        "& .MuiInputBase-root": {
-          padding: "4px 2px 4px 6px",
-          borderRadius: "4px",
-          background: e.vars.palette.background.default,
-          overflow: "hidden",
-          minWidth: "fit-content",
-          "& .MuiSvgIcon-root": {
-            background: e.vars.palette.background.default
-          }
-        },
-        "& .M4LPager-skeletonRoot": {
-          width: "100%",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          marginLeft: e.spacing(3),
-          "& .M4LPager-skeletonRowsPerPage": {
-            display: "grid",
-            gridTemplateColumns: "auto auto",
-            gridGap: e.spacing(1),
-            marginRight: e.spacing(3)
           },
-          "& .M4LPager-skeletonButtonContainer": {
+          "& .M4LPager-labelRowsPerPageContainer": {
             display: "flex",
-            marginLeft: e.spacing(3),
-            "& .M4LPager-skeletonIconButton": {
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            "& .M4LPager-select": {
+              "& .MuiSelect-select": {
+                ...theme.colorSchemes.finalTheme.typography.body,
+                color: theme.vars.palette.text.primary
+              },
+              "& .MuiSelect-icon": {
+                right: "0",
+                top: "0",
+                bottom: "0"
+              }
+            }
+          },
+          "& .M4LPager-labelDisplayRows": {
+            marginLeft: "12px"
+          },
+          "& .MuiInputBase-root": {
+            padding: "4px 2px 4px 6px",
+            borderRadius: "4px",
+            background: theme.vars.palette.background.default,
+            overflow: "hidden",
+            minWidth: "fit-content",
+            "& .MuiSvgIcon-root": {
+              background: theme.vars.palette.background.default
+            }
+          },
+          "& .M4LPager-skeletonRoot": {
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            marginLeft: theme.spacing(3),
+            "& .M4LPager-skeletonRowsPerPage": {
+              display: "grid",
+              gridTemplateColumns: "auto auto",
+              gridGap: theme.spacing(1),
+              marginRight: theme.spacing(3)
+            },
+            "& .M4LPager-skeletonButtonContainer": {
               display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              width: e.spacing(3.75),
-              height: e.spacing(3.75)
+              marginLeft: theme.spacing(3),
+              "& .M4LPager-skeletonIconButton": {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                width: theme.spacing(3.75),
+                height: theme.spacing(3.75)
+              }
             }
           }
         }
       }
-    }
-  },
-  M4LPagerMenuPopover: {
-    styleOverrides: {
-      "&.M4LPager-selectMenuPopover": {
-        "& .MuiList-root": {
-          "& .MuiMenuItem-root": {
-            ...e.colorSchemes.finalTheme.typography.body,
-            color: e.vars.palette.text.primary
+    },
+    M4LPagerMenuPopover: {
+      styleOverrides: {
+        "&.M4LPager-selectMenuPopover": {
+          "& .MuiList-root": {
+            "& .MuiMenuItem-root": {
+              ...theme.colorSchemes.finalTheme.typography.body,
+              color: theme.vars.palette.text.primary
+            }
           }
         }
       }
     }
-  }
-});
+  };
+};
 export {
-  t as M
+  M4LPager as M
 };

package/theme/overrides/M4LExtendedComponents/M4LPaperForm.js

@@ -1,58 +1,60 @@
-const o = (r) => ({
-  M4LPaperForm: {
-    styleOverrides: {
-      "&.M4LPaperForm-root": {
-        padding: "0",
-        borderRadius: "4px",
-        background: r.vars.palette.background.default,
-        border: "1px solid",
-        borderColor: r.vars.palette?.border.secondary,
-        width: "100%",
-        height: "auto",
-        // variante isForm
-        "&.M4LPaperForm-isForm .M4LPaperForm-content": {
-          gap: "12px"
-        },
-        // Header
-        "& .M4LPaperForm-headerContainer": {
-          width: "100%",
-          height: "28px",
-          minHeight: "28px",
-          padding: "2px 4px 2px 8px",
-          margin: "0px",
+const M4LPaperForm = (theme) => {
+  return {
+    M4LPaperForm: {
+      styleOverrides: {
+        "&.M4LPaperForm-root": {
+          padding: "0",
           borderRadius: "4px",
-          background: r.vars.palette.primary.opacity,
-          borderBottom: "none",
-          [r.breakpoints.down("md")]: {
-            height: "36px",
-            minHeight: "36px"
+          background: theme.vars.palette.background.default,
+          border: "1px solid",
+          borderColor: theme.vars.palette?.border.secondary,
+          width: "100%",
+          height: "auto",
+          // variante isForm
+          "&.M4LPaperForm-isForm .M4LPaperForm-content": {
+            gap: "12px"
           },
-          //Title paperForm
-          "& .M4LPaperForm-iconTitleContainer": {
-            ...r.colorSchemes.finalTheme.typography.bodyDens,
-            color: r.vars.palette.text.primary,
-            display: "flex",
-            gap: "8px",
-            //Icon paperForm
-            "& .M4LPaperForm-iconHeaderContainer": {
-              margin: "0px"
+          // Header
+          "& .M4LPaperForm-headerContainer": {
+            width: "100%",
+            height: "28px",
+            minHeight: "28px",
+            padding: "2px 4px 2px 8px",
+            margin: "0px",
+            borderRadius: "4px",
+            background: theme.vars.palette.primary.opacity,
+            borderBottom: "none",
+            [theme.breakpoints.down("md")]: {
+              height: "36px",
+              minHeight: "36px"
+            },
+            //Title paperForm
+            "& .M4LPaperForm-iconTitleContainer": {
+              ...theme.colorSchemes.finalTheme.typography.bodyDens,
+              color: theme.vars.palette.text.primary,
+              display: "flex",
+              gap: "8px",
+              //Icon paperForm
+              "& .M4LPaperForm-iconHeaderContainer": {
+                margin: "0px"
+              }
             }
+          },
+          //Container paperForm
+          "& .M4LPaperForm-content": {
+            display: "flex",
+            flexDirection: "column",
+            height: "fit-content",
+            width: "100%",
+            padding: "12px",
+            color: theme.vars.palette.text.primary,
+            ...theme.colorSchemes.finalTheme.typography.body
           }
-        },
-        //Container paperForm
-        "& .M4LPaperForm-content": {
-          display: "flex",
-          flexDirection: "column",
-          height: "fit-content",
-          width: "100%",
-          padding: "12px",
-          color: r.vars.palette.text.primary,
-          ...r.colorSchemes.finalTheme.typography.body
         }
       }
     }
-  }
-});
+  };
+};
 export {
-  o as M
+  M4LPaperForm as M
 };

package/theme/overrides/M4LExtendedComponents/M4LPeriod.js

@@ -1,184 +1,186 @@
-const r = (o) => ({
-  M4LPeriod: {
-    styleOverrides: {
-      "&.M4LPeriod-root": {
-        border: "solid 1px",
-        borderColor: o.vars.palette?.border.default,
-        display: "flex",
-        width: "100%",
-        height: "auto",
-        borderRadius: "4px",
-        transition: "all .2s",
-        [o.breakpoints.down("md")]: {
-          flexDirection: "column"
-        },
-        "& .M4LPeriod-skeleton": {
-          width: "100%",
+const M4LPeriod = (theme) => {
+  return {
+    M4LPeriod: {
+      styleOverrides: {
+        "&.M4LPeriod-root": {
+          border: "solid 1px",
+          borderColor: theme.vars.palette?.border.default,
           display: "flex",
-          [o.breakpoints.down("md")]: {
+          width: "100%",
+          height: "auto",
+          borderRadius: "4px",
+          transition: "all .2s",
+          [theme.breakpoints.down("md")]: {
             flexDirection: "column"
           },
-          "& .M4LPeriod-skeletonFieldPrimary": {
+          "& .M4LPeriod-skeleton": {
             width: "100%",
-            paddingLeft: "12px",
-            borderRight: "1px solid",
             display: "flex",
-            alignItems: "center",
-            borderColor: o.vars.palette?.border.default,
-            [o.breakpoints.down("md")]: {
-              borderRight: "0",
-              borderBottom: "1px solid",
-              borderColor: o.vars.palette?.border.default
+            [theme.breakpoints.down("md")]: {
+              flexDirection: "column"
+            },
+            "& .M4LPeriod-skeletonFieldPrimary": {
+              width: "100%",
+              paddingLeft: "12px",
+              borderRight: "1px solid",
+              display: "flex",
+              alignItems: "center",
+              borderColor: theme.vars.palette?.border.default,
+              [theme.breakpoints.down("md")]: {
+                borderRight: "0",
+                borderBottom: "1px solid",
+                borderColor: theme.vars.palette?.border.default
+              }
+            },
+            "& .M4LPeriod-skeletonFieldSecondary": {
+              width: "100%",
+              paddingLeft: "12px",
+              display: "flex",
+              alignItems: "center"
             }
           },
-          "& .M4LPeriod-skeletonFieldSecondary": {
-            width: "100%",
-            paddingLeft: "12px",
-            display: "flex",
-            alignItems: "center"
-          }
-        },
-        "&:hover": {
-          borderColor: o.vars.palette.primary.hover
-        },
-        "&.M4LPeriod-isFocus": {
-          borderColor: o.vars.palette.primary.active
-        },
-        "& .MuiAutocomplete-root": {
-          width: "100%",
-          borderRadius: 0,
-          borderRight: "1px solid",
-          borderColor: o.vars.palette?.border.default,
-          [o.breakpoints.down("md")]: {
-            borderRight: 0,
-            borderBottom: "1px solid",
-            borderColor: o.vars.palette?.border.default
+          "&:hover": {
+            borderColor: theme.vars.palette.primary.hover
           },
-          "& .MuiInput-root": {
-            backgroundColor: "transparent"
+          "&.M4LPeriod-isFocus": {
+            borderColor: theme.vars.palette.primary.active
           },
-          "& .MuiInput-input": {
-            padding: "0"
-          }
-        },
-        "& .MuiTextField-root": {
-          width: "100%",
-          "& .MuiInputBase-root.MuiInput-root": {
-            padding: "0 0 0 12px",
-            height: "100%",
-            backgroundColor: "transparent"
-          }
-        },
-        "&.M4LPeriod-sizeSmall": {
-          "& .MuiAutocomplete-hasPopupIcon": {
-            height: "24px"
+          "& .MuiAutocomplete-root": {
+            width: "100%",
+            borderRadius: 0,
+            borderRight: "1px solid",
+            borderColor: theme.vars.palette?.border.default,
+            [theme.breakpoints.down("md")]: {
+              borderRight: 0,
+              borderBottom: "1px solid",
+              borderColor: theme.vars.palette?.border.default
+            },
+            "& .MuiInput-root": {
+              backgroundColor: "transparent"
+            },
+            "& .MuiInput-input": {
+              padding: "0"
+            }
           },
           "& .MuiTextField-root": {
-            height: "24px"
-          },
-          "& .M4LPeriod-skeletonFieldPrimary": {
-            height: "24px"
-          },
-          "& .M4LPeriod-skeletonFieldSecondary": {
             width: "100%",
-            height: "24px",
-            paddingLeft: "12px"
-          }
-        },
-        "&.M4LPeriod-sizeMedium": {
-          "& .MuiAutocomplete-hasPopupIcon": {
-            height: "36px"
+            "& .MuiInputBase-root.MuiInput-root": {
+              padding: "0 0 0 12px",
+              height: "100%",
+              backgroundColor: "transparent"
+            }
           },
-          "& .MuiTextField-root": {
-            height: "36px"
+          "&.M4LPeriod-sizeSmall": {
+            "& .MuiAutocomplete-hasPopupIcon": {
+              height: "24px"
+            },
+            "& .MuiTextField-root": {
+              height: "24px"
+            },
+            "& .M4LPeriod-skeletonFieldPrimary": {
+              height: "24px"
+            },
+            "& .M4LPeriod-skeletonFieldSecondary": {
+              width: "100%",
+              height: "24px",
+              paddingLeft: "12px"
+            }
           },
-          "& .M4LPeriod-skeletonFieldPrimary": {
-            height: "36px"
+          "&.M4LPeriod-sizeMedium": {
+            "& .MuiAutocomplete-hasPopupIcon": {
+              height: "36px"
+            },
+            "& .MuiTextField-root": {
+              height: "36px"
+            },
+            "& .M4LPeriod-skeletonFieldPrimary": {
+              height: "36px"
+            },
+            "& .M4LPeriod-skeletonFieldSecondary": {
+              width: "100%",
+              height: "36px",
+              paddingLeft: "12px"
+            }
           },
-          "& .M4LPeriod-skeletonFieldSecondary": {
+          "& .M4LPeriod-containerDateLabel": {
             width: "100%",
-            height: "36px",
-            paddingLeft: "12px"
-          }
-        },
-        "& .M4LPeriod-containerDateLabel": {
-          width: "100%",
-          height: "100% !important",
-          padding: "0px 0px 0px 8px",
-          borderRight: "1px solid",
-          borderColor: o.vars.palette?.border.default
-        },
-        "& .M4LPeriod-containerDateValue": {
-          display: "flex",
-          width: "100%",
-          padding: "0px 0px 0px 8px"
-        },
-        "&.M4LPeriod-stateError": {
-          borderColor: o.vars.palette.error.main,
-          boxShadow: o.customShadows?.z2,
-          "&.M4LPeriod-stateError:hover": {
-            borderColor: o.vars.palette.error.main,
-            background: "transparent",
-            boxShadow: o.customShadows?.z2
+            height: "100% !important",
+            padding: "0px 0px 0px 8px",
+            borderRight: "1px solid",
+            borderColor: theme.vars.palette?.border.default
           },
-          "& .MuiTextField-root:hover": {
+          "& .M4LPeriod-containerDateValue": {
+            display: "flex",
             width: "100%",
-            background: "transparent",
-            "& .MuiInputBase-root:hover": {
-              background: o.vars.palette.error.opacity,
-              height: "100%"
-            }
-          }
-        },
-        "&.M4LPeriod-stateWarning": {
-          borderColor: o.vars.palette.warning.main,
-          boxShadow: o.customShadows?.z2,
-          "&.M4LPeriod-stateWarning:hover": {
-            borderColor: o.vars.palette.warning.main,
-            boxShadow: o.customShadows?.z2,
-            background: "transparent",
+            padding: "0px 0px 0px 8px"
+          },
+          "&.M4LPeriod-stateError": {
+            borderColor: theme.vars.palette.error.main,
+            boxShadow: theme.customShadows?.z2,
+            "&.M4LPeriod-stateError:hover": {
+              borderColor: theme.vars.palette.error.main,
+              background: "transparent",
+              boxShadow: theme.customShadows?.z2
+            },
             "& .MuiTextField-root:hover": {
+              width: "100%",
               background: "transparent",
               "& .MuiInputBase-root:hover": {
-                background: o.vars.palette.warning.opacity
+                background: theme.vars.palette.error.opacity,
+                height: "100%"
               }
             }
-          }
-        },
-        "&.M4LPeriod-stateSuccess": {
-          borderColor: o.vars.palette.success.main,
-          boxShadow: o.customShadows?.z2,
-          "&.M4LPeriod-stateSuccess:hover": {
-            borderColor: o.vars.palette.success.main,
-            boxShadow: o.customShadows?.z2,
-            background: "transparent",
-            "& .MuiTextField-root:hover": {
+          },
+          "&.M4LPeriod-stateWarning": {
+            borderColor: theme.vars.palette.warning.main,
+            boxShadow: theme.customShadows?.z2,
+            "&.M4LPeriod-stateWarning:hover": {
+              borderColor: theme.vars.palette.warning.main,
+              boxShadow: theme.customShadows?.z2,
               background: "transparent",
-              "& .MuiInputBase-root:hover": {
-                background: o.vars.palette.success.opacity
+              "& .MuiTextField-root:hover": {
+                background: "transparent",
+                "& .MuiInputBase-root:hover": {
+                  background: theme.vars.palette.warning.opacity
+                }
               }
             }
-          }
-        },
-        "&.M4LPeriod-stateInfo": {
-          borderColor: o.vars.palette.info.main,
-          boxShadow: o.customShadows?.z2,
-          "&.M4LPeriod-stateInfo:hover": {
-            borderColor: o.vars.palette.info.main,
-            background: "transparent",
-            boxShadow: o.customShadows?.z2,
-            "& .MuiTextField-root:hover": {
+          },
+          "&.M4LPeriod-stateSuccess": {
+            borderColor: theme.vars.palette.success.main,
+            boxShadow: theme.customShadows?.z2,
+            "&.M4LPeriod-stateSuccess:hover": {
+              borderColor: theme.vars.palette.success.main,
+              boxShadow: theme.customShadows?.z2,
               background: "transparent",
-              "& .MuiInputBase-root:hover": {
-                background: o.vars.palette.info.main
+              "& .MuiTextField-root:hover": {
+                background: "transparent",
+                "& .MuiInputBase-root:hover": {
+                  background: theme.vars.palette.success.opacity
+                }
+              }
+            }
+          },
+          "&.M4LPeriod-stateInfo": {
+            borderColor: theme.vars.palette.info.main,
+            boxShadow: theme.customShadows?.z2,
+            "&.M4LPeriod-stateInfo:hover": {
+              borderColor: theme.vars.palette.info.main,
+              background: "transparent",
+              boxShadow: theme.customShadows?.z2,
+              "& .MuiTextField-root:hover": {
+                background: "transparent",
+                "& .MuiInputBase-root:hover": {
+                  background: theme.vars.palette.info.main
+                }
               }
             }
           }
         }
       }
     }
-  }
-});
+  };
+};
 export {
-  r as M
+  M4LPeriod as M
 };