@m4l/styles 0.0.20 → 0.0.22

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

@@ -3,10 +3,73 @@ 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;
+                };
                 '& .M4LRHFAutocomplete-label': {
                     color: string;
                     transition: string;
@@ -14,32 +77,9 @@ export declare const M4LRHFAutocomplete: (theme: Theme) => {
                 '& .MuiAutocomplete-endAdornment': {
                     top: string;
                 };
-                '& .MuiInputBase-root': {
+                '& .MuiAutocomplete-root .MuiInputBase-root': {
                     padding: 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;
-                        };
-                    };
+                    heigth: string;
                 };
                 '&:hover': {
                     '& .M4LRHFAutocomplete-label': {
@@ -116,18 +156,26 @@ export declare const M4LRHFAutocomplete: (theme: Theme) => {
                     };
                 };
                 '&.M4LRHFAutocomplete-sizeSmall': {
-                    '& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFAutocomplete-skeleton': {
+                    "& .M4LRHFAutocomplete-skeleton,\n                          & .MuiAutocomplete-root": {
                         height: string;
-                        padding: string;
                     };
                 };
                 '&.M4LRHFAutocomplete-sizeMedium': {
-                    '& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFAutocomplete-skeleton': {
+                    "& .M4LRHFAutocomplete-skeleton,\n                          & .MuiAutocomplete-root": {
                         height: string;
-                        padding: string;
                     };
                 };
             };
         };
     };
+    M4LRHFAutocompletePopover: {
+        styleOverrides: {
+            '&.M4LRHFAutocomplete-popper': {
+                test: string;
+                '& .MuiPaper-root': {
+                    boxShadow: 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.1406e2ed.js → index.0e107243.js}

@@ -26,12 +26,12 @@ const n = (t) => ({
             color: t.palette.text.secondary,
             padding: "4px 8px",
             backgroundColor: "transparent",
-            height: "fit-content",
+            height: "100%",
             ...t.typography.body
           },
           "& .MuiInputAdornment-root": {
             margin: "0px",
-            padding: "0px"
+            padding: "0px 4px 0 0"
           },
           "& .M4LIcon-icon": {
             backgroundColor: t.palette.text.secondary,
@@ -220,10 +220,66 @@ 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"
+        },
         "& .M4LRHFAutocomplete-label": {
           color: t.palette.text.secondary,
           transition: "all .3s ease"
@@ -231,33 +287,9 @@ const n = (t) => ({
         "& .MuiAutocomplete-endAdornment": {
           top: "unset"
         },
-        "& .MuiInputBase-root": {
-          padding: "0px",
-          "& .MuiInputBase-input": {
-            color: t.palette.text.secondary,
-            padding: "4px",
-            backgroundColor: "transparent",
-            ...t.typography.body,
-            heigth: "28px"
-          },
-          "& .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"
-            }
-          }
+        "& .MuiAutocomplete-root .MuiInputBase-root": {
+          padding: "0p 8px",
+          heigth: "100%"
         },
         "&:hover": {
           "& .M4LRHFAutocomplete-label": {
@@ -334,25 +366,36 @@ const n = (t) => ({
           }
         },
         "&.M4LRHFAutocomplete-sizeSmall": {
-          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFAutocomplete-skeleton": {
-            height: "24px",
-            padding: "0px 8px"
+          [`& .M4LRHFAutocomplete-skeleton,
+                          & .MuiAutocomplete-root`]: {
+            height: "28px"
           }
         },
         "&.M4LRHFAutocomplete-sizeMedium": {
-          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFAutocomplete-skeleton": {
-            height: "28px",
-            padding: "0px 8px"
+          [`& .M4LRHFAutocomplete-skeleton,
+                          & .MuiAutocomplete-root`]: {
+            height: "36px"
           }
         }
       }
     }
+  },
+  M4LRHFAutocompletePopover: {
+    styleOverrides: {
+      "&.M4LRHFAutocomplete-popper": {
+        test: "root",
+        "& .MuiPaper-root": {
+          boxShadow: t.customShadows.z3
+        }
+      }
+    }
   }
 }), p = (t) => ({
   M4LRHFAutocompleteAsync: {
     styleOverrides: {
       "&.M4LRHFAutocompleteAsync-root": {
-        width: "100%"
+        width: "100%",
+        height: "auto"
       }
     }
   }

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;
                 };
             };
         };

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

@@ -3,7 +3,9 @@ export default function Button(theme: Theme): {
     MuiButton: {
         styleOverrides: {
             root: {
-                textTransform: string;
+                display: string;
+                flexDirection: string;
+                alignItems: string;
                 '&:hover': {
                     boxShadow: string;
                 };

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

@@ -2,19 +2,25 @@ import { Theme } from '@mui/material/styles';
 export default function Input(theme: Theme): {
     MuiFormControl: {
         styleOverrides: {
-            root: {};
+            root: {
+                [x: string]: string | {
+                    height: number;
+                    minHeight: number;
+                };
+                height: string;
+            };
         };
     };
     MuiInputBase: {
         styleOverrides: {
             root: {
                 borderRadius: string;
+                padding: string;
                 '&.Mui-disabled': {
                     '& svg': {
                         color: string;
                     };
                 };
-                padding: string;
                 '@font-face'?: import("@mui/material/styles/createTypography").Fontface | import("@mui/material/styles/createTypography").Fontface[] | undefined;
                 accentColor?: import("csstype").Property.AccentColor | undefined;
                 alignContent?: import("csstype").Property.AlignContent | undefined;
@@ -172,7 +178,7 @@ export default function Input(theme: Theme): {
                 gridTemplateColumns?: import("csstype").Property.GridTemplateColumns<string | number> | undefined;
                 gridTemplateRows?: import("csstype").Property.GridTemplateRows<string | number> | undefined;
                 hangingPunctuation?: import("csstype").Property.HangingPunctuation | undefined;
-                height?: import("csstype").Property.Height<string | number> | undefined;
+                height: import("csstype").Property.Height<string | number>;
                 hyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
                 hyphenateLimitChars?: import("csstype").Property.HyphenateLimitChars | undefined;
                 hyphens?: import("csstype").Property.Hyphens | undefined;
@@ -870,8 +876,15 @@ export default function Input(theme: Theme): {
                     padding: string;
                 };
                 '& .MuiOutlinedInput-notchedOutline': {
+                    [x: string]: string | number | {
+                        height: number;
+                        minHeight: number;
+                    };
                     borderColor: string;
                     fontSize: string;
+                    height: number;
+                    minHeight: number;
+                    padding: string;
                 };
                 '&.Mui-disabled': {
                     '& .MuiOutlinedInput-notchedOutline': {

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

@@ -17,6 +17,7 @@ export default function Tabs(theme: Theme): {
                         flexDirection: string;
                         alignItems: string;
                         gap: number;
+                        width: string;
                         boxShadow: string;
                         background: string;
                         borderTop: string;
@@ -28,6 +29,7 @@ export default function Tabs(theme: Theme): {
                 };
                 '&.Mui-selected': {
                     color: string;
+                    lineHeight: string;
                 };
                 '&:not(:last-of-type)': {
                     marginRight: string;

package/theme/overrides/MUIComponents/{index.e3d060c3.js → index.d308ce65.js}

@@ -30,7 +30,9 @@ function s(o) {
     MuiButton: {
       styleOverrides: {
         root: {
-          textTransform: "capitalize",
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
           "&:hover": {
             boxShadow: "none"
           }
@@ -78,7 +80,7 @@ function s(o) {
     }
   };
 }
-function u(o) {
+function p(o) {
   return {
     MuiIconButton: {
       styleOverrides: {
@@ -102,8 +104,8 @@ function u(o) {
     }
   };
 }
-function p(o) {
-  return console.log("test theme", o.palette), {
+function u(o) {
+  return {
     MuiFab: {
       defaultProps: {
         color: "primary"
@@ -188,17 +190,19 @@ function g(o) {
               flexDirection: "row",
               alignItems: "center",
               gap: 4,
+              width: "fit-content",
               boxShadow: o.customShadows.z2,
               background: o.palette.background.default,
-              borderTop: "1px solid",
-              borderColor: o.palette.background.background
+              borderTop: "1.5px solid",
+              borderColor: o.palette.state.borderTop
             },
             "& .MuiTabs-indicator": {
               backgroundColor: "transparent"
             }
           },
           "&.Mui-selected": {
-            color: o.palette.text.primary
+            color: o.palette.text.primary,
+            lineHeight: "none"
           },
           "&:not(:last-of-type)": {
             marginRight: o.spacing(5)
@@ -311,7 +315,7 @@ function M(o) {
     }
   };
 }
-function v(o) {
+function x(o) {
   return {
     MuiTableRow: {
       styleOverrides: {
@@ -410,7 +414,7 @@ function f(o) {
     }
   };
 }
-function x(o) {
+function v(o) {
   return {
     MuiPaper: {
       defaultProps: {
@@ -480,22 +484,29 @@ function k(o) {
   return {
     MuiFormControl: {
       styleOverrides: {
-        root: {}
+        root: {
+          height: "28px",
+          [o.breakpoints.down("sm")]: {
+            height: 32,
+            minHeight: 32
+          }
+        }
       }
     },
     MuiInputBase: {
       styleOverrides: {
         root: {
+          height: "auto",
           backgroundColor: o.palette.background.default,
           ...o.typography.body2,
-          borderRadius: o.spacing(1),
+          borderRadius: "2px",
+          padding: "0px",
           "&.Mui-disabled": {
             "& svg": { color: o.palette.text.disabled }
-          },
-          padding: "0px"
+          }
         },
         input: {
-          padding: "4px 8px",
+          padding: "0",
           "&::placeholder": {
             opacity: 1,
             color: o.palette.text.disabled
@@ -543,7 +554,14 @@ function k(o) {
           },
           "& .MuiOutlinedInput-notchedOutline": {
             borderColor: o.palette.grey[50032],
-            fontSize: "0.875rem"
+            fontSize: "0.875rem",
+            height: 28,
+            minHeight: 28,
+            padding: "0px",
+            [o.breakpoints.down("sm")]: {
+              height: 32,
+              minHeight: 32
+            }
           },
           "&.Mui-disabled": {
             "& .MuiOutlinedInput-notchedOutline": {
@@ -625,7 +643,7 @@ function C(o) {
     }
   };
 }
-function O(o) {
+function h(o) {
   return {
     MuiDialog: {
       styleOverrides: {
@@ -681,7 +699,7 @@ function O(o) {
     }
   };
 }
-function B(o) {
+function O(o) {
   const r = o.palette.mode === "light";
   return {
     MuiSlider: {
@@ -706,7 +724,7 @@ function B(o) {
     }
   };
 }
-function h(o) {
+function B(o) {
   const r = o.palette.mode === "light";
   return {
     MuiSwitch: {
@@ -789,7 +807,7 @@ function L(o) {
     }
   };
 }
-function D(o) {
+function m(o) {
   return {
     MuiDataGrid: {
       styleOverrides: {
@@ -886,7 +904,7 @@ function D(o) {
     }
   };
 }
-function m(o) {
+function D(o) {
   return {
     MuiSkeleton: {
       defaultProps: {
@@ -1073,7 +1091,7 @@ function W(o) {
     }
   };
 }
-function F(o) {
+function H(o) {
   return {
     MuiPaginationItem: {
       styleOverrides: {
@@ -1107,7 +1125,7 @@ function F(o) {
     }
   };
 }
-function H(o) {
+function F(o) {
   return {
     MuiBreadcrumbs: {
       styleOverrides: {
@@ -1209,19 +1227,30 @@ function E(o) {
     MuiAutocomplete: {
       styleOverrides: {
         root: {
+          height: "auto",
           "& .MuiInputBase-root": {
-            padding: "0 39px 0px 0"
+            padding: "4px 4px 4px 8px",
+            borderRadius: "4px",
+            minHeight: "28px",
+            [o.breakpoints.down("sm")]: {
+              height: "36px",
+              minHeight: "36px"
+            }
           }
         },
         paper: {
-          boxShadow: o.customShadows?.dropdown
+          boxShadow: o.customShadows.z3
         },
         listbox: {
-          padding: o.spacing(0, 1),
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          padding: "4px",
+          borderRadius: "6px",
           "& .MuiAutocomplete-option": {
-            padding: o.spacing(1),
-            margin: o.spacing(1, 0),
-            borderRadius: o.shape.borderRadius
+            padding: "0px 0 0 8px",
+            borderRadius: "4px",
+            height: "auto"
           }
         }
       }
@@ -1334,39 +1363,39 @@ export {
   l as A,
   f as B,
   c as C,
-  O as D,
+  h as D,
   V as E,
-  p as F,
+  u as F,
   J as G,
   k as I,
   y as L,
   b as M,
-  x as P,
+  v as P,
   S as R,
-  h as S,
+  B as S,
   g as T,
   w as a,
   M as b,
-  v as c,
+  x as c,
   s as d,
-  u as e,
-  B as f,
+  p as e,
+  O as f,
   C as g,
   L as h,
   I as i,
   T as j,
   R as k,
   A as l,
-  D as m,
-  m as n,
+  m,
+  D as n,
   $ as o,
   P as p,
   z as q,
   G as r,
   W as s,
-  F as t,
+  H as t,
   _ as u,
-  H as v,
+  F as v,
   j as w,
   E as x,
   q as y,