@m4l/styles 0.0.31 → 0.0.32

package/theme/overrides/M4LRHFComponents/{index.2dbe138a.js → index.e6262889.js}

@@ -1,6 +1,6 @@
 import { alpha as o } from "@mui/system";
 import { alpha as e } from "@mui/material/styles";
-const n = (t) => ({
+const r = (t) => ({
   M4LRHFTextFieldPassword: {
     styleOverrides: {
       "&.M4LRHFTextFieldPassword-root": {
@@ -8,20 +8,21 @@ const n = (t) => ({
       }
     }
   }
-}), r = (t) => ({
+}), n = (t) => ({
   M4LRHFTextField: {
     styleOverrides: {
       "&.M4LRHFTextField-root": {
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        gap: "4px",
+        gap: "2px",
         "&.M4LRHFTextField-variantText": {
           height: "auto",
           "& .MuiFormControl-root": {
+            minHeight: "24px",
             height: "auto",
             "& .MuiInputBase-multiline": {
-              minHeight: "auto",
+              minHeight: "24px",
               height: "auto",
               "& .MuiInputBase-input": {
                 padding: "4px"
@@ -39,6 +40,7 @@ const n = (t) => ({
         },
         "& .MuiInputBase-root": {
           padding: "0px",
+          borderRadius: "4px",
           "& .MuiInputBase-input": {
             color: t.palette.text.secondary,
             padding: "4px 8px",
@@ -55,9 +57,9 @@ const n = (t) => ({
             transition: "all .3s ease"
           },
           "& .MuiOutlinedInput-notchedOutline": {
-            border: "1px solid",
+            border: "1.3px solid",
             padding: "4px",
-            borderColor: t.palette.divider,
+            borderColor: t.palette.state.borderPrimary,
             borderRadius: "4px",
             inset: "0px",
             transition: "all .3s ease",
@@ -72,7 +74,8 @@ const n = (t) => ({
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             borderColor: t.palette.state?.hover,
-            boxShadow: `0px 1px 8px ${o(t.palette.primary.main, 0.32)}`
+            boxShadow: `0px 1px 8px ${o(t.palette.primary.main, 0.32)}`,
+            background: t.palette.state?.active12
           },
           "& .MuiInputBase-input": {
             color: t.palette.text.primary
@@ -89,7 +92,8 @@ const n = (t) => ({
             transition: "all .1s ease",
             border: "2px solid",
             borderColor: t.palette.state?.active,
-            boxShadow: `0px 1px 8px ${o(t.palette.primary.main, 0.32)}`
+            boxShadow: `0px 1px 8px ${o(t.palette.primary.main, 0.32)}`,
+            background: t.palette.state?.active12
           },
           "& .MuiInputBase-input": {
             color: t.palette.text.primary
@@ -104,7 +108,8 @@ const n = (t) => ({
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: t.palette.state?.error.normal
+            borderColor: t.palette.state?.error.normal,
+            background: t.palette.error.opacity
           },
           "& .MuiInputBase-input": {
             color: t.palette.text.primary
@@ -129,7 +134,7 @@ const n = (t) => ({
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: t.palette.text.disabled,
+            borderColor: t.palette.state.borderSecondary,
             backgroundColor: t.palette.state?.default,
             boxShadow: "none"
           },
@@ -142,7 +147,7 @@ const n = (t) => ({
         },
         "&.M4LRHFTextField-sizeSmall": {
           "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFTextField-skeleton": {
-            height: "28px",
+            height: "24px",
             padding: "0px 8px"
           }
         },
@@ -222,7 +227,7 @@ const n = (t) => ({
       }
     }
   }
-}), u = (t) => ({
+}), p = (t) => ({
   M4LRHFAutocomplete: {
     styleOverrides: {
       "&.M4LRHFAutocomplete-root": {
@@ -230,20 +235,22 @@ const n = (t) => ({
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        gap: "4px",
+        gap: "2px",
         "& .MuiAutocomplete-root": {
           height: "auto",
           "& .MuiFormControl-root": {
             height: "100%",
             "& .MuiInputBase-root": {
+              borderColor: t.palette.state.borderPrimary,
               position: "relative",
               height: "100%",
+              gap: "16px",
               "& .MuiInputBase-input": {
                 boxSizing: "border-box",
                 color: t.palette.text.secondary,
                 backgroundColor: "transparent",
-                height: "auto",
-                padding: "2px 2px 2px 8px",
+                height: "100%",
+                padding: "0 0 0 8px",
                 ...t.typography.body
               },
               "& .M4LRHFAutocomplete-iconDown": {},
@@ -295,11 +302,11 @@ const n = (t) => ({
         },
         "& .MuiAutocomplete-root .MuiInputBase-root": {
           padding: "0p 8px",
-          heigth: "100%"
+          height: "100%"
         },
         "&:hover": {
           "& .M4LRHFAutocomplete-label": {
-            color: t.palette.state?.hover
+            color: t.palette.text.secondary
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             borderColor: t.palette.state?.hover,
@@ -318,6 +325,7 @@ const n = (t) => ({
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             transition: "all .1s ease",
+            background: t.palette.state.active12,
             border: "2px solid",
             borderColor: t.palette.state?.active,
             boxShadow: `0px 1px 8px ${e(t.palette.primary.main, 0.32)}`
@@ -360,7 +368,7 @@ const n = (t) => ({
           },
           "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
             border: "1px solid",
-            borderColor: t.palette.text.disabled,
+            borderColor: t.palette.state.borderDisable,
             backgroundColor: t.palette.state?.default,
             boxShadow: "none"
           },
@@ -374,14 +382,31 @@ const n = (t) => ({
         "&.M4LRHFAutocomplete-sizeSmall": {
           [`& .M4LRHFAutocomplete-skeleton,
                           & .MuiAutocomplete-root`]: {
-            height: "28px"
+            "& .M4LImage-root": {
+              width: "24px",
+              height: "24px",
+              marginLeft: "6px"
+            },
+            height: "24px"
           }
         },
         "&.M4LRHFAutocomplete-sizeMedium": {
           [`& .M4LRHFAutocomplete-skeleton,
                           & .MuiAutocomplete-root`]: {
+            "& .M4LImage-root": {
+              width: "28px",
+              height: "28px",
+              marginLeft: "6px"
+            },
             height: "36px"
           }
+        },
+        "&.M4LRHFAutocomplete-imageWidthDefined": {
+          "& .M4LImage-root": {
+            "& .M4LImage-img": {
+              objectPosition: "left"
+            }
+          }
         }
       }
     }
@@ -389,16 +414,94 @@ const n = (t) => ({
   M4LRHFAutocompletePopover: {
     styleOverrides: {
       "&.M4LRHFAutocomplete-popper": {
-        test: "root",
-        position: "fixed",
         zIndex: "1300",
+        "& .MuiAutocomplete-listbox": {
+          padding: "8px",
+          display: "flex",
+          flexDirection: "column",
+          "& .MuiAutocomplete-option": {
+            borderRadius: "unset"
+          },
+          "& .M4LRHFAutocomplete-withImage": {
+            display: "flex",
+            alignItems: "center",
+            cursor: "pointer",
+            "& .M4LImage-root": {
+              height: "100%",
+              width: "auto",
+              alignItems: "start"
+            }
+          }
+        },
+        "& .M4LRHFAutocomplete-withImage": {
+          display: "flex",
+          gap: "8px",
+          "&:hover": {
+            color: t.palette.text.primary,
+            backgroundColor: t.palette.state.active12
+          },
+          "& .M4LImage-root": {
+            width: "auto",
+            height: "100%"
+          }
+        },
+        "&.M4LRHFAutocomplete-sizeSmall": {
+          "& .MuiAutocomplete-listbox": {
+            "& .MuiAutocomplete-option": {
+              height: "24px"
+            },
+            "& .M4LRHFAutocomplete-withImage": {
+              paddingLeft: "4px",
+              height: "24px",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              overflow: "hidden",
+              "& .M4LImage-img": {
+                width: "22px",
+                height: "22px",
+                position: "relative"
+              }
+            }
+          }
+        },
+        "&.M4LRHFAutocomplete-sizeMedium": {
+          "& .MuiAutocomplete-listbox": {
+            "& .MuiAutocomplete-option": {
+              height: "32px"
+            }
+          },
+          "& .M4LRHFAutocomplete-withImage": {
+            paddingLeft: "4px",
+            height: "32px",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            overflow: "hidden",
+            "& .M4LImage-img": {
+              width: "28px",
+              height: "28px",
+              position: "relative"
+            }
+          }
+        },
+        "&.M4LRHFAutocomplete-imageWidthDefined": {
+          "& .M4LImage-img": {
+            minWidth: "24px",
+            objectPostion: "left"
+          }
+        },
         "& .MuiPaper-root": {
-          boxShadow: t.customShadows.z3
+          boxShadow: t.customShadows.z3,
+          "& .MuiAutocomplete-listbox .MuiAutocomplete-option:hover": {
+            color: t.palette.text.primary,
+            backgroundColor: t.palette.state.active12
+          }
         }
       }
     }
   }
-}), p = (t) => ({
+}), d = (t) => ({
   M4LRHFAutocompleteAsync: {
     styleOverrides: {
       "&.M4LRHFAutocompleteAsync-root": {
@@ -407,7 +510,7 @@ const n = (t) => ({
       }
     }
   }
-}), d = (t) => ({
+}), u = (t) => ({
   M4LRHFDateTime: {
     styleOverrides: {
       "&.M4LRHFDateTime-root": {
@@ -415,10 +518,12 @@ const n = (t) => ({
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        gap: "4px",
-        "& .MuiTextField-root": {
-          "& > div:nth-child(1)": {
-            height: "100%"
+        gap: "2px",
+        "& .MuiFormControl-root": {
+          height: "auto",
+          "& .MuiInputBase-root": {
+            padding: "0 4px 0 0",
+            minHeight: "24px"
           }
         },
         "& .M4LRHFTextField-label": {
@@ -630,7 +735,8 @@ const n = (t) => ({
                   width: "56px",
                   height: "56px",
                   minWidth: "56px",
-                  minHeight: "56px"
+                  minHeight: "56px",
+                  paddingBottom: "8px"
                 },
                 "& .M4LRHFUploadImage-containerMessage": {
                   display: "flex",
@@ -650,7 +756,7 @@ const n = (t) => ({
                     display: "flex",
                     justifyContent: "center",
                     ".MuiTypography-root": {
-                      ...t.typography.body,
+                      ...t.typography.paragraph,
                       color: t.palette.text.secondary
                     }
                   },
@@ -665,7 +771,7 @@ const n = (t) => ({
                   "& .M4LButton-root": {
                     display: "flex",
                     justifyContent: "center",
-                    marginTop: "16px"
+                    paddingTop: "8px"
                   }
                 }
               }
@@ -733,14 +839,123 @@ const n = (t) => ({
       }
     }
   }
+}), c = (t) => ({
+  M4LRHFColorPicker: {
+    styleOverrides: {
+      "&.M4LRHFColorPicker-root": {
+        test: "root",
+        "& .M4LRHFColorPicker-containerFieldColor": {
+          display: "flex",
+          alingnItems: "center",
+          justifyContent: "center",
+          gap: "4px",
+          padding: "2px",
+          border: "1.5px solid",
+          borderColor: t.palette.state.borderPrimary,
+          borderRadius: "4px",
+          minHeight: "24px",
+          height: "24px",
+          "& .M4LRHFColorPicker-boxColor": {
+            borderRadius: "4px",
+            height: "18px !important",
+            width: "18px !important"
+          },
+          "& .M4LIcon-root": {
+            minHeight: "18px",
+            minWidth: "18px",
+            cursor: "pointer",
+            borderRadius: "4px"
+          },
+          "& .M4LIcon-root:hover": {
+            background: t.palette.state.overdefoult
+          }
+        }
+      }
+    }
+  },
+  M4LRHFColorPickerPopoverRoot: {
+    styleOverrides: {
+      "&.M4LRHFColorPicker-popoverRoot": {
+        test: "test-popover-root",
+        "& .MuiPaper-root": {
+          background: t.palette.background.default,
+          padding: "8px",
+          border: "1px solid",
+          borderColor: t.palette.state.borderSecondary,
+          borderRadius: "4px",
+          boxShadow: t.customShadows.z4,
+          "& .M4LRHFColorPicker-containerPicker": {
+            background: "transparent",
+            borderRadius: "4px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "24px",
+            "& .sketch-picker": {
+              background: "transparent !important",
+              boxShadow: "none !important",
+              padding: "12px !important",
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              border: "1px solid",
+              borderColor: t.palette.state.borderSecondary,
+              borderRadius: "4px",
+              "& :nth-of-type(-n + 1)": {
+                borderRadius: "4px"
+              },
+              "& .flexbox-fix": {
+                border: "none !important",
+                background: "transparent !important",
+                "& > div": {
+                  "& > div": {
+                    display: "flex",
+                    flexDirection: "column-reverse",
+                    ...t.typography.body,
+                    color: t.palette.text.secondary,
+                    gap: "2px",
+                    padding: "0 important",
+                    "& > input": {
+                      display: "flex",
+                      textAlign: "center !important",
+                      border: "1px solid",
+                      borderColor: t.palette.state.borderPrimary,
+                      borderRadius: "2px",
+                      background: "transparent",
+                      minHeight: "24px",
+                      height: "24px !important",
+                      ...t.typography.body,
+                      color: `${t.palette.text.primary} !important`
+                    },
+                    "& > label": {
+                      display: "flex",
+                      textAlign: "left !important",
+                      ...t.typography.body,
+                      color: `${t.palette.text.secondary} !important`,
+                      padding: "0 !important"
+                    }
+                  }
+                }
+              }
+            },
+            "& .M4LButton-root": {
+              display: "flex",
+              width: "100%",
+              justifyContent: "right"
+            }
+          }
+        }
+      }
+    }
+  }
 });
 export {
-  r as M,
-  n as a,
-  u as b,
-  p as c,
-  d,
+  n as M,
+  r as a,
+  p as b,
+  d as c,
+  u as d,
   s as e,
   M as f,
-  l as g
+  l as g,
+  c as h
 };