@m4l/styles 0.0.21 → 0.0.23

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

@@ -3,10 +3,70 @@ export declare const M4LRHFAutocomplete: (theme: Theme) => {
     M4LRHFAutocomplete: {
         styleOverrides: {
             '&.M4LRHFAutocomplete-root': {
+                height: string;
                 display: string;
                 flexDirection: string;
                 width: string;
                 gap: string;
+                '& .MuiAutocomplete-root': {
+                    height: string;
+                    '& .MuiFormControl-root': {
+                        height: string;
+                        '& .MuiInputBase-root': {
+                            position: string;
+                            height: string;
+                            '& .MuiInputBase-input': {
+                                boxSizing: string;
+                                color: string;
+                                backgroundColor: string;
+                                height: string;
+                                padding: string;
+                            };
+                            '& .M4LRHFAutocomplete-iconDown': {};
+                            '& .MuiOutlinedInput-notchedOutline': {
+                                inset: string;
+                                height: string;
+                                '& legend': {
+                                    display: string;
+                                };
+                            };
+                        };
+                    };
+                };
+                '& .M4LRHFAutocomplete-skeletonRoot': {
+                    display: string;
+                    flexDirection: string;
+                    gap: string;
+                    width: string;
+                    '& .M4LRHFAutocomplete-skeleton': {
+                        [x: string]: string | {
+                            width: string;
+                            height?: undefined;
+                            overflow?: undefined;
+                            margin?: undefined;
+                        } | {
+                            width: string;
+                            height: string;
+                            overflow: string;
+                            margin: string;
+                        };
+                        width: string;
+                        display: string;
+                        justifyContent: string;
+                        alignItems: string;
+                        height: string;
+                        border: string;
+                        borderRadius: string;
+                        padding: string;
+                        overflow: string;
+                        '& .M4LRHFAutocomplete-skeletonContainerText': {
+                            width: string;
+                            height: string;
+                            overflow: string;
+                            margin: string;
+                        };
+                    };
+                };
                 "& .MuiAutocomplete-root .MuiFormControl-root .MuiInputBase-root": {
                     padding: string;
                 };
@@ -20,30 +80,6 @@ export declare const M4LRHFAutocomplete: (theme: Theme) => {
                 '& .MuiAutocomplete-root .MuiInputBase-root': {
                     padding: string;
                     heigth: string;
-                    '& .MuiInputBase-input': {
-                        heigth: string;
-                        color: string;
-                        padding: string;
-                        backgroundColor: string;
-                    };
-                    '& .MuiInputAdornment-root': {
-                        margin: string;
-                        padding: string;
-                    };
-                    '& .M4LIcon-icon': {
-                        backgroundColor: string;
-                        transition: string;
-                    };
-                    '& .MuiOutlinedInput-notchedOutline': {
-                        border: string;
-                        borderColor: string;
-                        borderRadius: string;
-                        inset: string;
-                        transition: string;
-                        '& legend': {
-                            display: string;
-                        };
-                    };
                 };
                 '&:hover': {
                     '& .M4LRHFAutocomplete-label': {
@@ -120,15 +156,13 @@ export declare const M4LRHFAutocomplete: (theme: Theme) => {
                     };
                 };
                 '&.M4LRHFAutocomplete-sizeSmall': {
-                    '& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFAutocomplete-skeleton': {
-                        heigth: string;
-                        padding: string;
+                    "& .M4LRHFAutocomplete-skeleton,\n                          & .MuiAutocomplete-root": {
+                        height: string;
                     };
                 };
                 '&.M4LRHFAutocomplete-sizeMedium': {
-                    '& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFAutocomplete-skeleton': {
-                        heigth: string;
-                        padding: string;
+                    "& .M4LRHFAutocomplete-skeleton,\n                          & .MuiAutocomplete-root": {
+                        height: string;
                     };
                 };
             };

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

@@ -4,6 +4,7 @@ export declare const M4LRHFAutocompleteAsync: (_theme: Theme) => {
         styleOverrides: {
             '&.M4LRHFAutocompleteAsync-root': {
                 width: string;
+                height: string;
             };
         };
     };

package/theme/overrides/M4LRHFComponents/{index.e3118e8b.js → index.0e107243.js}

@@ -8,7 +8,7 @@ const n = (t) => ({
       }
     }
   }
-}), r = (t) => ({
+}), l = (t) => ({
   M4LRHFTextField: {
     styleOverrides: {
       "&.M4LRHFTextField-root": {
@@ -31,7 +31,7 @@ const n = (t) => ({
           },
           "& .MuiInputAdornment-root": {
             margin: "0px",
-            padding: "0px"
+            padding: "0px 4px 0 0"
           },
           "& .M4LIcon-icon": {
             backgroundColor: t.palette.text.secondary,
@@ -153,7 +153,7 @@ const n = (t) => ({
       }
     }
   }
-}), l = (t) => ({
+}), r = (t) => ({
   M4LRHFCheckbox: {
     styleOverrides: {
       "&.M4LRHFCheckbox-root": {
@@ -220,10 +220,63 @@ const n = (t) => ({
   M4LRHFAutocomplete: {
     styleOverrides: {
       "&.M4LRHFAutocomplete-root": {
+        height: "auto",
         display: "flex",
         flexDirection: "column",
         width: "100%",
         gap: "4px",
+        "& .MuiAutocomplete-root": {
+          height: "auto",
+          "& .MuiFormControl-root": {
+            height: "100%",
+            "& .MuiInputBase-root": {
+              position: "relative",
+              height: "100%",
+              "& .MuiInputBase-input": {
+                boxSizing: "border-box",
+                color: t.palette.text.secondary,
+                backgroundColor: "transparent",
+                height: "auto",
+                padding: "2px 2px 2px 8px",
+                ...t.typography.body
+              },
+              "& .M4LRHFAutocomplete-iconDown": {},
+              "& .MuiOutlinedInput-notchedOutline": {
+                inset: "0",
+                height: "unset",
+                "& legend": {
+                  display: "none"
+                }
+              }
+            }
+          }
+        },
+        "& .M4LRHFAutocomplete-skeletonRoot": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          width: "100%",
+          "& .M4LRHFAutocomplete-skeleton": {
+            width: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            height: `${t.spacing(4.5)}`,
+            border: `1px solid ${t.palette.divider}`,
+            borderRadius: `${t.spacing(1)}`,
+            padding: `0 ${t.spacing(2)}`,
+            overflow: "hidden",
+            [t.breakpoints.down("md")]: {
+              width: "100%"
+            },
+            "& .M4LRHFAutocomplete-skeletonContainerText": {
+              width: "100%",
+              height: "auto",
+              overflow: "hidden",
+              margin: t.spacing(1.5)
+            }
+          }
+        },
         "& .MuiAutocomplete-root .MuiFormControl-root .MuiInputBase-root": {
           padding: "0"
         },
@@ -236,32 +289,7 @@ const n = (t) => ({
         },
         "& .MuiAutocomplete-root .MuiInputBase-root": {
           padding: "0p 8px",
-          heigth: "100%",
-          "& .MuiInputBase-input": {
-            color: t.palette.text.secondary,
-            padding: "4px",
-            backgroundColor: "transparent",
-            ...t.typography.body,
-            heigth: "100%"
-          },
-          "& .MuiInputAdornment-root": {
-            margin: "0px",
-            padding: "0px"
-          },
-          "& .M4LIcon-icon": {
-            backgroundColor: t.palette.text.secondary,
-            transition: "all .3s ease"
-          },
-          "& .MuiOutlinedInput-notchedOutline": {
-            border: "1px solid",
-            borderColor: t.palette.divider,
-            borderRadius: "4px",
-            inset: "0px",
-            transition: "all .3s ease",
-            "& legend": {
-              display: "none"
-            }
-          }
+          heigth: "100%"
         },
         "&:hover": {
           "& .M4LRHFAutocomplete-label": {
@@ -338,15 +366,15 @@ const n = (t) => ({
           }
         },
         "&.M4LRHFAutocomplete-sizeSmall": {
-          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFAutocomplete-skeleton": {
-            heigth: "28px",
-            padding: "0px 0px"
+          [`& .M4LRHFAutocomplete-skeleton,
+                          & .MuiAutocomplete-root`]: {
+            height: "28px"
           }
         },
         "&.M4LRHFAutocomplete-sizeMedium": {
-          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFAutocomplete-skeleton": {
-            heigth: "32px",
-            padding: "0px 8px"
+          [`& .M4LRHFAutocomplete-skeleton,
+                          & .MuiAutocomplete-root`]: {
+            height: "36px"
           }
         }
       }
@@ -366,7 +394,8 @@ const n = (t) => ({
   M4LRHFAutocompleteAsync: {
     styleOverrides: {
       "&.M4LRHFAutocompleteAsync-root": {
-        width: "100%"
+        width: "100%",
+        height: "auto"
       }
     }
   }
@@ -681,12 +710,12 @@ const n = (t) => ({
   }
 });
 export {
-  r as M,
+  l as M,
   n as a,
   u as b,
   p as c,
   d,
   s as e,
   M as f,
-  l as g
+  r as g
 };

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

@@ -3,19 +3,30 @@ export default function Autocomplete(theme: Theme): {
     MuiAutocomplete: {
         styleOverrides: {
             root: {
+                height: string;
                 '& .MuiInputBase-root': {
+                    [x: string]: string | {
+                        height: string;
+                        minHeight: string;
+                    };
                     padding: string;
+                    borderRadius: string;
+                    minHeight: string;
                 };
             };
             paper: {
                 boxShadow: string;
             };
             listbox: {
+                display: string;
+                flexDirection: string;
+                gap: string;
                 padding: string;
+                borderRadius: string;
                 '& .MuiAutocomplete-option': {
                     padding: string;
-                    margin: string;
-                    borderRadius: number;
+                    borderRadius: string;
+                    height: string;
                 };
             };
         };