@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LRHFComponents/M4LRHFDateTime.js

@@ -0,0 +1,184 @@
+const t = (o) => ({
+  M4LRHFDateTime: {
+    styleOverrides: {
+      "&.M4LRHFDateTime-root": {
+        test: "root",
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        gap: "2px",
+        outline: "unset",
+        "& .M4LRHFDateTime-skeleton": {
+          display: "flex",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "space-between",
+          border: `1px solid ${o.vars.palette.divider}`,
+          paddingLeft: "12px",
+          borderRadius: "2px",
+          "& .MuiSkeleton-circular": {
+            margin: "4px"
+          }
+        },
+        "&.M4LRHFDateTime-small": {
+          "& .M4LRHFDateTime-skeleton": {
+            height: "24px",
+            "& .MuiSkeleton-circular": {
+              width: "16px",
+              height: "16px"
+            }
+          },
+          "& .MuiFormControl-root": {
+            height: "24px"
+          }
+        },
+        "&.M4LRHFDateTime-medium": {
+          "& .M4LRHFDateTime-skeleton": {
+            height: "36px",
+            "& .MuiSkeleton-circular": {
+              width: "24px",
+              height: "24px"
+            }
+          },
+          "& .MuiFormControl-root": {
+            height: "36px"
+          }
+        },
+        /* General properties */
+        "& .MuiFormControl-root": {
+          "& .MuiInputBase-root": {
+            padding: "0 4px 0 0",
+            height: "100%",
+            "& .MuiInputBase-input": {
+              minHeight: "24px"
+            }
+          }
+        },
+        "& .M4LRHFTextField-label": {
+          color: o.vars.palette.text.secondary,
+          transition: "all .5s ease"
+        },
+        "& .MuiInputBase-root.MuiInputBase-formControl": {
+          padding: "0px 8px 0 0",
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.secondary,
+            padding: "0px 12px",
+            backgroundColor: "transparent",
+            height: "100%",
+            ...o.colorSchemes.finalTheme.typography.body
+          },
+          "& .MuiInputAdornment-root": {
+            margin: "0px",
+            padding: "0px",
+            width: "16px",
+            height: "auto",
+            position: "relative",
+            maxWidth: "16px",
+            minWidth: "16px",
+            display: "flex",
+            flex: "1",
+            overflow: "hidden",
+            "& .MuiButtonBase-root": {
+              padding: "0px",
+              backgroundColor: "transparent"
+            }
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.text.secondary,
+            transition: "all .3s ease"
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            padding: "4px",
+            borderColor: o.vars.palette.divider,
+            borderRadius: "4px",
+            inset: "0px",
+            transition: "all .3s ease",
+            "& legend": {
+              display: "none"
+            }
+          }
+        },
+        /* State hover */
+        "&:hover": {
+          "& .M4LTypography-root": {
+            color: o.vars.palette.primary?.hover
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            borderColor: o.vars.palette.primary?.hover
+          },
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.primary?.hover
+          }
+        },
+        /* State focus and active */
+        "&.M4LRHFDateTime-isFocus": {
+          "& .M4LTypography-root": {
+            color: o.vars.palette.primary.focusActive
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            transition: "all .1s ease",
+            border: "2px solid",
+            borderColor: o.vars.palette.primary.focusActive
+          },
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.primary.focusActive
+          }
+        },
+        /* State error */
+        "&.M4LRHFTextField-variantError": {
+          "& .M4LRHFTextField-label": {
+            color: o.vars.palette.error.main
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.vars.palette.error.main
+          },
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.error.main
+          },
+          "&:hover": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: o.customShadows?.error
+            }
+          },
+          "&.M4LRHFTextField-isFocus": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: o.customShadows?.error
+            }
+          }
+        },
+        /* State disabled */
+        "&.M4LRHFTextField-isDisabled": {
+          "& .M4LRHFTextField-label": {
+            color: o.vars.palette.text.disabled
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.vars.palette.text.disabled,
+            backgroundColor: o.vars.palette.background?.default,
+            boxShadow: "none"
+          },
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.disabled
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.text.disabled
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  t as M
+};

package/theme/overrides/M4LRHFComponents/M4LRHFPeriod.js

@@ -0,0 +1,12 @@
+const r = (e) => ({
+  M4LRHFPeriod: {
+    styleOverrides: {
+      "&.M4LRHFPeriod-root": {
+        test: "root"
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LRHFComponents/M4LRHFTextField.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LRHFTextField: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LRHFTextField: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LRHFTextField: {
         styleOverrides: {
             '&.M4LRHFTextField-root': {

package/theme/overrides/M4LRHFComponents/M4LRHFTextField.js

@@ -0,0 +1,175 @@
+import { alpha as e } from "@mui/system";
+const r = (t) => ({
+  M4LRHFTextField: {
+    styleOverrides: {
+      "&.M4LRHFTextField-root": {
+        /* Root styles */
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        gap: "2px",
+        outline: "unset",
+        /* General properties */
+        "&.M4LRHFTextField-variantText": {
+          height: "auto",
+          "& .MuiFormControl-root": {
+            minHeight: "24px",
+            height: "auto",
+            "& .MuiInputBase-multiline": {
+              minHeight: "24px",
+              height: "auto",
+              "& .MuiInputBase-input": {
+                padding: "4px"
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                height: "100%",
+                padding: "4px"
+              }
+            }
+          }
+        },
+        "& .M4LRHFTextField-label": {
+          color: t.vars.palette.text.secondary,
+          transition: "all .5s ease"
+        },
+        "& .MuiInputBase-root": {
+          padding: "0px",
+          borderRadius: "4px",
+          "& .MuiInputBase-input": {
+            color: t.vars.palette.text.secondary,
+            padding: "4px 8px",
+            backgroundColor: "transparent",
+            height: "100%",
+            ...t.colorSchemes.finalTheme.typography.body
+          },
+          "& .MuiInputAdornment-root": {
+            margin: "0px",
+            padding: "0px 4px 0 0"
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: t.vars.palette.text.secondary,
+            transition: "all .3s ease"
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1.3px solid",
+            padding: "4px",
+            borderColor: t.vars.palette?.border.default,
+            borderRadius: "4px",
+            inset: "0px",
+            transition: "all .3s ease",
+            "& legend": {
+              display: "none"
+            }
+          }
+        },
+        /* State hover */
+        "&:hover": {
+          "& .M4LRHFTextField-label": {
+            color: t.vars.palette.primary?.hover
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            borderColor: t.vars.palette.primary?.hover,
+            boxShadow: `0px 1px 8px ${e(
+              t.colorSchemes.finalTheme.palette.primary.main,
+              0.32
+            )}`,
+            background: t.vars.palette.primary.opacity
+          },
+          "& .MuiInputBase-input": {
+            color: t.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: t.vars.palette.primary?.hover
+          }
+        },
+        /* State focus and active */
+        "&.M4LRHFTextField-isFocus": {
+          "& .M4LRHFTextField-label": {
+            color: t.vars.palette.primary.focusActive
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            transition: "all .1s ease",
+            border: "2px solid",
+            borderColor: t.vars.palette.primary.focusActive,
+            boxShadow: `0px 1px 8px ${e(
+              t.colorSchemes.finalTheme.palette.primary.main,
+              0.32
+            )}`,
+            background: t.vars.palette.primary.opacity
+          },
+          "& .MuiInputBase-input": {
+            color: t.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: t.vars.palette.primary.focusActive
+          }
+        },
+        /* State error */
+        "&.M4LRHFTextField-variantError": {
+          "& .M4LRHFTextField-label": {
+            color: t.vars.palette.error.main
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: t.vars.palette.error.main,
+            background: t.vars.palette.error.opacity
+          },
+          "& .MuiInputBase-input": {
+            color: t.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: t.vars.palette.error.main
+          },
+          "&:hover": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: t.customShadows?.error
+            }
+          },
+          "&.M4LRHFTextField-isFocus": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: t.customShadows?.error
+            }
+          }
+        },
+        /* State disabled */
+        "&.M4LRHFTextField-isDisabled": {
+          "& .M4LRHFTextField-label": {
+            color: t.vars.palette.text.disabled
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: t.vars.palette?.border.secondary,
+            backgroundColor: t.vars.palette.background?.default,
+            boxShadow: "none"
+          },
+          "& .MuiInputBase-input": {
+            color: t.vars.palette.text.disabled
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: t.vars.palette.text.disabled
+          }
+        },
+        /* Sizes */
+        "&.M4LRHFTextField-sizeSmall": {
+          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFTextField-skeleton": {
+            height: "24px",
+            padding: "0px 8px"
+          }
+        },
+        "&.M4LRHFTextField-sizeMedium": {
+          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFTextField-skeleton": {
+            height: "36px",
+            padding: "0px 8px"
+          },
+          "& .MuiInputBase-multiline": {
+            minHeight: "36px",
+            height: "100%"
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LRHFComponents/M4LRHFTextFieldPassword.js

@@ -0,0 +1,12 @@
+const s = (e) => ({
+  M4LRHFTextFieldPassword: {
+    styleOverrides: {
+      "&.M4LRHFTextFieldPassword-root": {
+        width: "100%"
+      }
+    }
+  }
+});
+export {
+  s as M
+};

package/theme/overrides/M4LRHFComponents/M4LRHFUploadImage.d.ts

@@ -87,28 +87,28 @@ export declare const M4LRHFUploadImage: (theme: Omit<Theme, "palette" | "applySt
                                     flexDirection: string;
                                     gap: string;
                                     width: string;
-                                    "& .M4LRHFUploadImage-containerTitle": {
+                                    '& .M4LRHFUploadImage-containerTitle': {
                                         display: string;
                                         justifyContent: string;
-                                        ".MuiTypography-subtitle": {
+                                        '.MuiTypography-subtitle': {
                                             color: string;
                                         };
                                     };
-                                    "& .M4LRHFUploadImage-containerDescription": {
+                                    '& .M4LRHFUploadImage-containerDescription': {
                                         display: string;
                                         justifyContent: string;
-                                        ".MuiTypography-root": {
+                                        '.MuiTypography-root': {
                                             color: string;
                                         };
                                     };
-                                    "& .M4LRHFUploadImage-containerConditions": {
+                                    '& .M4LRHFUploadImage-containerConditions': {
                                         display: string;
                                         justifyContent: string;
-                                        ".MuiTypography-root": {
+                                        '.MuiTypography-root': {
                                             color: string;
                                         };
                                     };
-                                    "& .M4LButton-root": {
+                                    '& .M4LButton-root': {
                                         display: string;
                                         justifyContent: string;
                                         marginTop: string;
@@ -129,7 +129,7 @@ export declare const M4LRHFUploadImage: (theme: Omit<Theme, "palette" | "applySt
                     WebkitMask: string;
                 };
             };
-            "&.M4LRHFUploadImage-hasFile": {
+            '&.M4LRHFUploadImage-hasFile': {
                 '& .M4LRHFUploadImage-placeHolder': {
                     opacity: string;
                     overflor: string;
@@ -150,16 +150,16 @@ export declare const M4LRHFUploadImage: (theme: Omit<Theme, "palette" | "applySt
                             opacity: string;
                         };
                         '& .M4LRHFUploadImage-containerMessage': {
-                            "& .M4LRHFUploadImage-containerTitle": {
+                            '& .M4LRHFUploadImage-containerTitle': {
                                 opacity: string;
                             };
-                            "& .M4LRHFUploadImage-containerDescription": {
+                            '& .M4LRHFUploadImage-containerDescription': {
                                 opacity: string;
                             };
-                            "& .M4LRHFUploadImage-containerConditions": {
+                            '& .M4LRHFUploadImage-containerConditions': {
                                 opacity: string;
                             };
-                            "& .M4LButton-root": {
+                            '& .M4LButton-root': {
                                 display: string;
                                 justifyContent: string;
                                 marginTop: string;

package/theme/overrides/M4LRHFComponents/M4LRHFUploadImage.js

@@ -0,0 +1,188 @@
+const i = (t) => ({
+  M4LRHFUploadImage: {
+    styleOverrides: {
+      "&.M4LRHFUploadImage-root": {
+        width: "fit-content",
+        height: "fit-content",
+        "& .M4LRHFUploadImage-containerUploadImage": {
+          width: "100%",
+          height: "100%",
+          minHeight: "200px",
+          minWidth: t.spacing(20),
+          position: "relative",
+          borderRadius: "4px",
+          padding: "8px",
+          boxShadow: t.customShadows?.z2,
+          background: t.vars.palette.background.default,
+          "& .M4LRHFUploadImage-dropZoneStyle": {
+            zIndex: 0,
+            width: "fit-content",
+            height: "fit-content",
+            outline: "none",
+            padding: "12px",
+            display: "flex",
+            overflow: "hidden",
+            borderRadius: "4px",
+            position: "relative",
+            inset: "0",
+            alignItems: "center",
+            justifyContent: "center",
+            background: t.vars.palette.background.surface,
+            "& > *": {
+              width: "100%",
+              height: "100%"
+            },
+            "&:hover": {
+              background: t.vars.palette.primary.opacity,
+              border: "1px solid",
+              borderColor: t.vars.palette.primary.opacity,
+              cursor: "pointer",
+              "& .placeholder": {
+                zIndex: 9
+              }
+            },
+            "& .M4LRHFUploadImage-containerFileImage": {
+              width: "100%",
+              height: "100%",
+              position: "absolute",
+              padding: "12px"
+            },
+            "& .M4LRHFUploadImage-placeHolder": {
+              overflor: "hidden",
+              display: "flex",
+              justifyContent: "center",
+              position: "relative",
+              zIndex: "22",
+              inset: "0",
+              width: "100%",
+              height: "100%",
+              overflow: "hidden",
+              transition: t.transitions.create("opacity", {
+                easing: t.transitions.easing.easeInOut,
+                duration: t.transitions.duration.shorter
+              }),
+              "&:hover": {
+                opacity: 1
+              },
+              "& .M4LRHFUploadImage-containerUploadBoddy": {
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                width: "100%",
+                height: "100%",
+                gap: "0",
+                position: "relative",
+                overflow: "hidden",
+                // Icono de carga
+                "& .M4LRHFUploadImage-containerBodyImage": {
+                  display: "flex",
+                  justifyContent: "center",
+                  width: "56px",
+                  height: "56px",
+                  minWidth: "56px",
+                  minHeight: "56px",
+                  paddingBottom: "8px"
+                },
+                "& .M4LRHFUploadImage-containerMessage": {
+                  display: "flex",
+                  justifyContent: "center",
+                  flexDirection: "column",
+                  gap: "8px",
+                  width: "100%",
+                  "& .M4LRHFUploadImage-containerTitle": {
+                    display: "flex",
+                    justifyContent: "center",
+                    ".MuiTypography-subtitle": {
+                      ...t.colorSchemes.finalTheme.typography.paragraphDens,
+                      color: t.vars.palette.text.primary
+                    }
+                  },
+                  "& .M4LRHFUploadImage-containerDescription": {
+                    display: "flex",
+                    justifyContent: "center",
+                    ".MuiTypography-root": {
+                      ...t.colorSchemes.finalTheme.typography.paragraph,
+                      color: t.vars.palette.text.secondary
+                    }
+                  },
+                  "& .M4LRHFUploadImage-containerConditions": {
+                    display: "flex",
+                    justifyContent: "center",
+                    ".MuiTypography-root": {
+                      ...t.colorSchemes.finalTheme.typography.body,
+                      color: t.vars.palette.text.secondary
+                    }
+                  },
+                  "& .M4LButton-root": {
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: "8px"
+                  }
+                }
+              }
+            }
+          }
+        },
+        // Skeleton
+        "& .M4LRHFUploadImage-skeleton": {
+          maskPosition: "center!important",
+          maskRepeat: "no-repeat!important",
+          WebkitMaskRepeat: "no-repeat!important",
+          border: `1px dashed ${t.vars.palette.divider}`,
+          width: "100%",
+          height: "100%",
+          mask: "url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')",
+          WebkitMask: "url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==')"
+        }
+      },
+      // Imagen cargada
+      "&.M4LRHFUploadImage-hasFile": {
+        "& .M4LRHFUploadImage-placeHolder": {
+          opacity: "0",
+          overflor: "hidden",
+          display: "flex",
+          justifyContent: "center",
+          position: "relative",
+          zIndex: "22",
+          inset: "0",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          transition: t.transitions.create("opacity", {
+            easing: t.transitions.easing.easeInOut,
+            duration: t.transitions.duration.shorter
+          }),
+          "&:hover": {
+            opacity: 1
+          },
+          // Comportamiento Hover imagen cargada
+          "& .M4LRHFUploadImage-containerUploadBoddy": {
+            "& .M4LRHFUploadImage-containerBodyImage": {
+              opacity: "0"
+            },
+            "& .M4LRHFUploadImage-containerMessage": {
+              "& .M4LRHFUploadImage-containerTitle": {
+                opacity: "0"
+              },
+              "& .M4LRHFUploadImage-containerDescription": {
+                opacity: "0"
+              },
+              "& .M4LRHFUploadImage-containerConditions": {
+                opacity: "0"
+              },
+              "& .M4LButton-root": {
+                display: "flex",
+                justifyContent: "center",
+                marginTop: "16px"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  i as M
+};

package/theme/overrides/MUIComponents/Accordion.d.ts

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export default function Accordion(theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme): {
+export default function Accordion(theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme): {
     MuiAccordion: {
         styleOverrides: {
             root: {
@@ -67,7 +67,7 @@ export default function Accordion(theme: Omit<Theme, "palette" | "applyStyles">
                 '&.Mui-expanded': {
                     margin: string;
                 };
-                '@font-face'?: import("@mui/material/styles/createTypography").Fontface | import("@mui/material/styles/createTypography").Fontface[] | undefined;
+                '@font-face'?: import('@mui/material/styles/createTypography').Fontface | import('@mui/material/styles/createTypography').Fontface[];
                 accentColor?: import("csstype").Property.AccentColor | undefined;
                 alignContent?: import("csstype").Property.AlignContent | undefined;
                 alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -443,7 +443,7 @@ export default function Accordion(theme: Omit<Theme, "palette" | "applyStyles">
                 writingMode?: import("csstype").Property.WritingMode | undefined;
                 zIndex?: import("csstype").Property.ZIndex | undefined;
                 zoom?: import("csstype").Property.Zoom | undefined;
-                all?: import("csstype").Globals | undefined;
+                all?: import("csstype").Property.All | undefined;
                 animation?: import("csstype").Property.Animation<string & {}> | undefined;
                 animationRange?: import("csstype").Property.AnimationRange<string | number> | undefined;
                 background?: import("csstype").Property.Background<string | number> | undefined;