npm - @m4l/components - Versions diffs - 8.2.0-beta.devManuela.RHFTextField → 8.2.0 - Mend

@m4l/components 8.2.0-beta.devManuela.RHFTextField → 8.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/components/hook-form/RHFTextField/RHFTextField.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useState, useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { useTheme, InputAdornment } from "@mui/material";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
@@ -13,7 +13,7 @@ import { R as RHFTextFieldSlots } from "./slots/RHFTextFieldEnum.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
 const RHFTextField = forwardRef((props, ref) => {
   const {
-    name,
+    name: nameRHF,
     autoComplete = "off",
     skeletonWidth = "100%",
     skeletonHeight = "18px",
@@ -30,32 +30,42 @@ const RHFTextField = forwardRef((props, ref) => {
     color = "primary",
     isInteger = true,
     mandatoryMessage,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     helperText = true,
     ...other
   } = props;
-  const ariaLabelledById = `field-label-${name}`;
+  const ariaLabelledById = `field-label-${nameRHF}`;
   const {
     control,
     formState: { errors }
   } = useFormContext();
+  const [currentVariant, setCurrentVariant] = useState(null);
   const { handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
+  useEffect(() => {
+    if (errors[nameRHF]) {
+      setCurrentVariant("error");
+    } else if (variant) {
+      setCurrentVariant(variant);
+    } else {
+      setCurrentVariant(null);
+    }
+  }, [errors[nameRHF], variant, control]);
   const theme = useTheme();
   const paletteColor = getPropertyByString(
     theme.palette,
-    disabled ? "default" : errors ? "error" : color,
+    disabled ? "default" : color,
     theme.palette.default
   );
   const ownerState = {
-    name,
+    name: nameRHF,
     isInteger,
     paletteColor,
     type: type ?? "text",
     size: !isDesktop ? "medium" : size,
     disabled,
-    variantRHFTextField: RHFvariants,
-    RHFtextFieldError: !!errors[name]
+    variantRHFTextField: RHFvariants
   };
   return (
     /* RHFTextFieldRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides
@@ -69,14 +79,14 @@ const RHFTextField = forwardRef((props, ref) => {
         onBlur: handlerOnBlur,
         onKeyUp: handlerOnKeyUp,
         role: "textbox",
-        htmlFor: name,
+        htmlFor: nameRHF,
         ...getPropDataTestId(RHF_TEXT_FIELD_KEY_COMPONENT, RHFTextFieldSlots.root),
         children: !isSkeleton ? (
           /* controller: Componente usado para suscribir el componente al contexto de hook-form */
           /* @__PURE__ */ jsx(
             Controller,
             {
-              name,
+              name: nameRHF,
               control,
               render: ({ field: { onChange, value, ref: inputRef }, fieldState: { error } }) => {
                 const onInternalChange = (event) => {
@@ -118,8 +128,8 @@ const RHFTextField = forwardRef((props, ref) => {
                       className: "rhf-text-field-root",
                       value: type === "number" ? isNaN(parseFloat(value)) ? "" : value : value || "",
                       inputProps: {
-                        name,
-                        id: name,
+                        name: nameRHF,
+                        id: nameRHF,
                         "aria-labelledby": ariaLabelledById,
                         ...getPropDataTestId(RHF_TEXT_FIELD_KEY_COMPONENT, RHFTextFieldSlots.textField)
                       },
@@ -141,10 +151,10 @@ const RHFTextField = forwardRef((props, ref) => {
                       ...other
                     }
                   ),
-                  error?.message ? /* @__PURE__ */ jsx(
+                  currentVariant ? /* @__PURE__ */ jsx(
                     HelperError,
                     {
-                      message: error.message
+                      message: currentVariant !== "error" ? helperMessage : error?.message
                     }
                   ) : null
                 ] });

package/components/hook-form/RHFTextField/RHFTextField.styles.js CHANGED Viewed

@@ -1,212 +1,265 @@
 const rhfTextFieldStyles = {
   /**
    * Estilos personalizados para el componente RHFTextField.
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @updatedAt 2024-10-22 19:27:23 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   textField: ({ ownerState, theme }) => ({
     "&.rhf-text-field-root": {
       width: "100%",
       padding: 0,
-      borderRadius: theme.vars.size.borderRadius.r1,
-      display: "flex",
-      '& [class*="M4LIcon-icon"]': {
-        backgroundColor: ownerState.paletteColor?.main
+      borderRadius: theme.size.borderRadius.r1,
+      // Condiciones de tamaño Medium en el root
+      ...ownerState.sizes === "medium" && {
+        ...theme.generalSettings.isMobile ? {
+          height: theme.vars.size.mobile.medium.action,
+          width: theme.vars.size.mobile.medium.action
+        } : {
+          height: theme.vars.size.desktop.medium.action,
+          width: theme.vars.size.desktop.medium.action
+        }
+      },
+      // Condiciones de tamaño Small en el root
+      ...ownerState.sizes === "small" && {
+        ...theme.generalSettings.isMobile ? {
+          height: theme.vars.size.mobile.small.action,
+          width: theme.vars.size.mobile.small.action
+        } : {
+          height: theme.vars.size.desktop.medium.action,
+          width: theme.vars.size.desktop.medium.action
+        }
       },
       // Variant Outlined TextField
       ...ownerState.variantRHFTextField === "outlined" && {
         "& .MuiInputBase-root": {
           padding: 0,
           minHeight: 0,
-          height: "inherit",
           paddingLeft: theme.vars.size.baseSpacings.sp1,
           paddingRight: theme.vars.size.baseSpacings.sp1,
-          borderRadius: theme.vars.size.borderRadius.r1,
+          borderRadius: theme.size.borderRadius.r1,
           "& .MuiOutlinedInput-notchedOutline": {
-            minHeight: 0,
             border: theme.vars.size.borderStroke.actionInput,
-            borderColor: ownerState.error ? ownerState.paletteColor?.main : theme.vars.palette.border.default
+            borderColor: theme.vars.palette.border.default
           },
-          //Estilo Hover para primary para el Icono e IconButton
-          "&:hover": {
-            backgroundColor: ownerState.paletteColor?.hoverOpacity
+          //Active para primary para el icono y placeholder
+          "&:active": {
+            ":focus-within": {
+              "&:focus-within .MuiInputBase-input::placeholder": {
+                color: theme.vars.palette.primary.active
+              },
+              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+                backgroundColor: theme.vars.palette.primary.active
+              }
+            }
           },
-          //Estilo Focus para primary para el Icono e IconButton
+          //Estilos de focus primary para el icono y placeholder
           ":focus-within": {
-            borderColor: theme.vars.palette.border.main,
-            '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-              backgroundColor: ownerState.paletteColor?.main
+            "&:focus-within .MuiInputBase-input::placeholder": {
+              color: ownerState.paletteColor?.main
             },
-            '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
+            '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
               backgroundColor: ownerState.paletteColor?.main
             }
           },
-          //Estilo Active para primary para el Icono e IconButton
-          "&:active": {
-            ":focus-within": {
-              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-                backgroundColor: ownerState.paletteColor?.main
-              },
-              '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
-                backgroundColor: ownerState.paletteColor?.main
-              },
-              "&:not(:placeholder-shown)": {
-                color: ownerState.paletteColor?.active
-              }
-            }
+          //Estilos del hover primar
+          "&:hover": {
+            backgroundColor: ownerState.paletteColor?.hoverOpacity
           },
           //Estilos del InputBase
           "& .MuiInputBase-input": {
-            padding: "0px",
-            paddingRight: theme.vars.size.baseSpacings.sp1,
-            paddingLeft: theme.vars.size.baseSpacings.sp1,
-            height: "inherit",
+            ...ownerState.error && {
+              borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default
+            },
             //Estilos del InputBase en hover
             "&:hover ~ .MuiOutlinedInput-notchedOutline": {
               ...ownerState.error && {
                 borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default
               }
             },
-            // Estilos del InputBase en Focus
+            //Estilos del InputBase en Focus
             "&:focus ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.paletteColor?.main
+              borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
             },
-            // Estilos del InputBase en Active
+            //Estilos del InputBase en Active
             "&:active ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.paletteColor?.active
+              borderColor: ownerState.error ? theme.vars.palette.error.active : theme.vars.palette.primary.active
             },
             //Estilos del InputBase en placeholder default
             "&::placeholder": {
-              color: theme.vars.palette.text.secondary
-            },
-            "&:not(:placeholder-shown)": {
-              color: ownerState.textFieldError ? ownerState.paletteColor?.main : theme.vars.palette.text.primary
+              color: theme.vars.palette.text.primary
             }
           },
           //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
           "& .MuiOutlinedInput-input:-webkit-autofill": {
             padding: 0
           },
+          // Historia Error variante Outlined
+          ...ownerState.error && {
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default
+            },
+            //Estilos del hover Error
+            "&:hover": {
+              backgroundColor: theme.vars.palette.error.hoverOpacity,
+              borderColor: ownerState.paletteColor?.main
+            },
+            //Estilos focus Error el icono y placeholder de color error
+            "&:focus-within": {
+              "&:focus-within .MuiInputBase-input::placeholder": {
+                color: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+              },
+              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+                backgroundColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+              }
+            },
+            //Estilos active Error el icono y placeholder de color error
+            "&:active": {
+              "&:focus-within": {
+                "&:focus-within .MuiInputBase-input::placeholder": {
+                  color: theme.vars.palette.error.active
+                },
+                '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+                  backgroundColor: theme.vars.palette.error.active
+                }
+              }
+            }
+          },
           // Historia Disabled para Outlined
           ...ownerState.disabled && {
-            borderColor: theme.vars.palette.border.disabled,
-            pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
+            borderColor: theme.palette.border.disabled,
+            pointerEvents: ownerState.disabled ? "none" : "auto",
             "&:hover": {
-              pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
-            },
-            "& .MuiInputBase-input::placeholder": {
-              color: theme.vars.palette.text.disabled
+              pointerEvents: ownerState.disabled ? "none" : "auto"
             }
           }
         }
       },
-      // Variant Text TextField
+      // Variant Text RHFTextField
       ...ownerState.variantRHFTextField === "text" && {
         borderColor: "transparent",
         "& .MuiInputBase-root": {
           padding: 0,
           minHeight: 0,
-          height: "inherit",
           borderColor: "transparent",
           paddingLeft: theme.vars.size.baseSpacings.sp1,
           paddingRight: theme.vars.size.baseSpacings.sp1,
-          borderRadius: theme.vars.size.borderRadius.r1,
+          borderRadius: theme.size.borderRadius.r1,
           //Estilos para los bordes del campo de texto
           "& .MuiOutlinedInput-notchedOutline": {
-            minHeight: 0,
             border: theme.vars.size.borderStroke.actionInput,
-            borderColor: ownerState.error ? ownerState.paletteColor?.main : theme.vars.palette.border.default,
+            borderColor: theme.vars.palette.border.default,
+            borderTop: theme.vars.palette.primary.main,
             borderLeft: "transparent",
-            borderTop: "transparent",
             borderRight: "transparent"
           },
-          //Estilo Hover para primary para el Icono e IconButton
-          "&:hover": {
-            backgroundColor: ownerState.paletteColor?.hoverOpacity
-          },
-          //Estilo Focus para primary para el Icono e IconButton
+          //Estilo Focus para primary para el icono y placeholder
           ":focus-within": {
-            '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-              backgroundColor: ownerState.paletteColor?.main
+            borderColor: theme.palette.border.main,
+            "&:focus-within .MuiInputBase-input::placeholder": {
+              color: ownerState.paletteColor?.main
             },
-            '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
-              backgroundColor: ownerState.paletteColor?.main
+            '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+              backgroundColor: theme.vars.palette.primary.main
             }
           },
-          //Estilo Active para primary para el Icono e IconButton
+          //Estilo Active para primary para el icono y placeholder
           "&:active": {
             ":focus-within": {
-              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-                backgroundColor: ownerState.paletteColor?.main
-              },
-              '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
-                backgroundColor: ownerState.paletteColor?.main
+              "&:focus-within .MuiInputBase-input::placeholder": {
+                color: theme.vars.palette.primary.active
               },
-              "&:not(:placeholder-shown) .MuiOutlinedInput-notchedOutline": {
-                color: ownerState.textFieldError ? theme.vars.palette.error.main : theme.vars.palette.text.primary
+              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+                backgroundColor: theme.vars.palette.primary.active
               }
             }
           },
+          //Estilos para Hover Text
+          "&:hover": {
+            borderColor: "transparent",
+            backgroundColor: ownerState.paletteColor?.hoverOpacity
+          },
           //Estilos del InputBase
           "& .MuiInputBase-input": {
-            padding: "0px",
-            paddingRight: theme.vars.size.baseSpacings.sp1,
-            paddingLeft: theme.vars.size.baseSpacings.sp1,
-            height: "inherit",
+            "&:hover ~ .MuiOutlinedInput-notchedOutline": {
+              borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+            },
             //Estilo Focus del InputBase
             "&:focus ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.paletteColor?.main
+              borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
             },
             //Estilo Active del InputBase
             "&:active ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.paletteColor?.active
+              borderColor: ownerState.error ? theme.vars.palette.error.active : theme.vars.palette.primary.active,
+              "&:focus-within .MuiInputBase-input::placeholder": {
+                color: theme.vars.palette.primary.active
+              }
             },
-            // Estilos del InputBase en placeholder default
             "&::placeholder": {
-              color: theme.vars.palette.text.secondary
-            },
-            "&:not(:placeholder-shown)": {
-              color: ownerState.textFieldError ? ownerState.paletteColor?.main : theme.vars.palette.text.primary
+              color: theme.vars.palette.text.primary
             }
           },
           //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
           "& .MuiOutlinedInput-input:-webkit-autofill": {
             padding: 0
           },
+          // Historia Error
+          ...ownerState.error && {
+            // Historia Error variante Text
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: theme.vars.palette.border.error,
+              borderTop: theme.vars.palette.border.error,
+              borderLeft: "transparent",
+              borderRight: "transparent",
+              "&:focus": { borderColor: theme.vars.palette.error.main }
+            },
+            //Estilos del hover Error
+            "&:hover": {
+              backgroundColor: theme.vars.palette.error.hoverOpacity
+            },
+            // Estilos focus Error el icono y placeholder de color error
+            "&:focus-within": {
+              borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main,
+              "&:focus-within .MuiInputBase-input::placeholder": {
+                color: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+              },
+              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+                backgroundColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+              }
+            },
+            // Estilos active Error el icono y placeholder de color error
+            "&:active": {
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderColor: theme.vars.palette.error.main
+              },
+              ":focus-within": {
+                "&:focus-within .MuiInputBase-input::placeholder": {
+                  color: theme.vars.palette.error.active
+                },
+                '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+                  backgroundColor: theme.vars.palette.error.active
+                }
+              }
+            }
+          },
           // Historia Disabled
           ...ownerState.disabled && {
             "& .MuiOutlinedInput-notchedOutline": {
-              borderColor: theme.vars.palette.border.disabled,
-              borderTop: theme.vars.palette.border.disabled,
+              borderColor: theme.palette.border.disabled,
+              borderTop: theme.palette.border.disabled,
               borderLeft: "transparent",
               borderRight: "transparent"
             },
-            pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
+            pointerEvents: ownerState.disabled ? "none" : "auto",
             "&:hover": {
-              pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
-            },
-            "& .MuiInputBase-input::placeholder": {
-              color: theme.vars.palette.text.disabled
+              pointerEvents: ownerState.disabled ? "none" : "auto"
             }
           }
         }
       }
     }
   }),
-  /**
-   * Estilos personalizados para el componente Label.
-   */
-  label: ({ theme }) => ({
-    display: "flex",
-    alignItems: "center",
-    color: theme.vars.palette.text.primary,
-    "& .mandatory": {
-      /*  color: theme.vars.palette.error.main, */
-      marginLeft: theme.spacing(0.5)
-    },
-    '& .M4LIcon-icon[class*="M4LIcon-icon"]': {
-      width: "inherit",
-      height: "inherit"
-    }
-  }),
   /**
    * Estilos personalizados para el componente Skeleton.
    * @author Bruce Escobar - automatic

package/components/hook-form/RHFTextField/stories/Error/TextFieldErrorOutlined.stories.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+/**
+ * Error en RHFTextField outlined y text se utiliza para mostrar un campo de texto que indica un estado de error. Esto es útil para proporcionar retroalimentación visual al usuario cuando hay un problema con la entrada de datos.
+ */
+export declare const ErrorOutlined: Story;
+export default meta;

package/components/hook-form/RHFTextField/stories/Error/TextFieldErrorText.stories.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+/**
+ *  Error en RHFTextField outlined y text se utiliza para mostrar un campo de texto que indica un estado de error. Esto es útil para proporcionar retroalimentación visual al usuario cuando hay un problema con la entrada de datos.
+ */
+export declare const ErrorText: Story;
+export default meta;

package/components/hook-form/RHFTextField/stories/Primary/TextFieldOutlined.stories.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+/**
+ * Story for the primary outlined RHFvariants of the TextField component.
+ */
+export declare const PrimaryOutlined: Story;
+export default meta;

package/components/hook-form/RHFTextField/stories/Primary/TextFieldText.stories.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+/**
+ * Story for the primary text variant of the TextField component.
+ */
+export declare const PrimaryText: Story;
+export default meta;

package/components/hook-form/RHFTextField/types.d.ts CHANGED Viewed

@@ -28,7 +28,6 @@ export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputP
     isInteger?: boolean;
     color?: Extract<ComponentPalletColor, 'primary'>;
     RHFvariants?: VariantsRHFTextField;
-    RHFtextFieldError?: boolean;
 }
 export interface RHFTextFieldState extends Pick<RHFTextFieldProps, 'size' | 'disabled'> {
     type: 'password' | 'text';
@@ -40,8 +39,6 @@ export type RHFTextFieldOwnerState = RHFTextFieldProps & {
     componentPaletteColor?: ComponentPalletColor;
     paletteColor: PaletteColor;
     variantRHFTextField?: VariantsRHFTextField;
-    RHFtextFieldError?: boolean;
-    error?: boolean;
 };
 export type RHFTextFieldSlotsType = keyof typeof RHFTextFieldSlots;
 export type RHFTextFieldStyles = Partial<OverridesStyleRules<RHFTextFieldSlotsType, typeof RHF_TEXT_FIELD_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/mui_extended/TextField/slots/TextFieldEnum.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export declare enum TextFieldSlots {
-    root = "root",
+    muiTextFieldStyled = "muiTextFieldStyled",
     textFieldRootStyled = "textFieldRootStyled",
     muiSkeletonStyled = "muiSkeletonStyled"
 }

package/components/mui_extended/TextField/slots/TextFieldSlots.d.ts CHANGED Viewed

@@ -1,13 +1,13 @@
 export declare const MuiTextFieldStyled: import('@emotion/styled').StyledComponent<Pick<{
     variant?: import('@mui/material').TextFieldVariants | undefined;
-} & Omit<import('@mui/material').FilledTextFieldProps | import('@mui/material').OutlinedTextFieldProps | import('@mui/material').StandardTextFieldProps, "variant">, "children" | "value" | "ref" | "title" | "component" | "size" | "name" | "error" | "select" | "rows" | "id" | "type" | "hidden" | "color" | "content" | "style" | "disabled" | "variant" | "margin" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "key" | "autoComplete" | "placeholder" | "required" | "fullWidth" | "inputProps" | "inputRef" | "SelectProps" | "multiline" | "maxRows" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TextFieldOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').TextFieldOwnerState> & Record<string, unknown>;
+} & Omit<import('@mui/material').FilledTextFieldProps | import('@mui/material').OutlinedTextFieldProps | import('@mui/material').StandardTextFieldProps, "variant">, "children" | "value" | "ref" | "title" | "component" | "size" | "name" | "error" | "select" | "rows" | "id" | "type" | "hidden" | "color" | "content" | "style" | "disabled" | "variant" | "margin" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "key" | "autoComplete" | "placeholder" | "required" | "fullWidth" | "inputProps" | "inputRef" | "SelectProps" | "multiline" | "maxRows" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').OwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').OwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const TextFieldRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TextFieldOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').TextFieldOwnerState> & Record<string, unknown>;
+export declare const TextFieldRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').OwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').OwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
 export declare const MuiSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SkeletonOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
-}, "children" | "style" | "variant" | "width" | "height" | "animation" | "sx" | "classes" | "className">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "variant" | "width" | "height" | "translate" | "animation" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TextFieldOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').TextFieldOwnerState> & Record<string, unknown>;
+}, "children" | "style" | "variant" | "width" | "height" | "animation" | "sx" | "classes" | "className">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "variant" | "width" | "height" | "translate" | "animation" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').OwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').OwnerState> & Record<string, unknown>;
 }, {}, {}>;

package/components/mui_extended/TextField/types.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { TextFieldSlots } from './slots/TextFieldEnum';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { TEXT_FIELD_KEY_COMPONENT } from './constants';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { LabelProps } from '../../Label/types';
 /**
  * Variants for the TextField component.
  */
@@ -16,64 +17,19 @@ export type SkeletonVariants = 'rectangular' | 'circular' | 'text';
  * Props for the TextField component.
  *
  */
-export interface TextFieldProps extends Omit<MUITextFieldProps, 'size' | 'color' | 'disabled' | 'variant'> {
-    /**
-     * todo: documentar
-     */
+export interface TextFieldProps extends Omit<MUITextFieldProps, 'size' | 'color' | 'disabled' | 'variant'>, Pick<LabelProps, 'helperMessage' | 'htmlFor' | 'id' | 'mandatory' | 'mandatoryMessage'> {
     dataTestId?: string;
-    /**
-     * Variante del campo de texto.
-     * variant="text"
-     */
     variant?: TextFieldVariants;
-    /**
-     * Indica si el campo de texto está deshabilitado.
-     * disabled={true}
-     */
     disabled?: boolean;
-    /**
-     * Tamaño del campo de texto.
-     * size="medium"
-     */
-    size?: Extract<Sizes, 'small' | 'medium'>;
-    /**
-     * Color del campo de texto.
-     * color="primary"
-     */
+    size?: Sizes;
     color?: Extract<ComponentPalletColor, 'primary'>;
 }
-/**
- * Estado del propietario del campo de texto.
- */
-export interface TextFieldOwnerState {
-    /**
-     * Indica si el campo de texto está deshabilitado.
-     */
-    textFieldDisabled?: boolean;
-    /**
-     * Color de la paleta del campo de texto.
-     */
-    textFieldPaletteColor: PaletteColor;
-    /**
-     * Variante del campo de texto.
-     */
-    textFieldVariant?: TextFieldVariants;
-    /**
-     * Color de la paleta del componente del campo de texto.
-     */
-    textFieldComponentPaletteColor?: ComponentPalletColor;
-    /**
-     * Tamaño del campo de texto.
-     */
-    textFieldSizes: Extract<Sizes, 'small' | 'medium'>;
-    /**
-     * Indica si el campo de texto es error.
-     */
-    textFieldError?: boolean;
-    /**
-     * Color del campo de texto.
-     */
-    textFieldColor?: Extract<ComponentPalletColor, 'primary'>;
-}
+export type OwnerState = Pick<TextFieldProps, 'size' | 'color' | 'disabled' | 'error'> & {
+    disabled?: boolean;
+    paletteColor: PaletteColor;
+    variantTextField?: TextFieldVariants;
+    componentPaletteColor?: ComponentPalletColor;
+};
 export type TextFieldSlotsType = keyof typeof TextFieldSlots;
+export type TextFieldOwnerState = OwnerState;
 export type TextFieldStyles = Partial<OverridesStyleRules<TextFieldSlotsType, typeof TEXT_FIELD_KEY_COMPONENT, Theme> | undefined> | undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "8.2.0-beta.devManuela.RHFTextField",
+  "version": "8.2.0",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

package/test/TestAppWrapper.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import { FC, ReactNode } from 'react';
+interface TestAppWrapperProps {
+    children: ReactNode;
+}
+/**
+ * TestWrapper is a React functional component that provides a consistent testing environment
+ * for components that rely on various context providers.
+ *
+ * It wraps the children components with the following contexts:
+ * - ModuleSkeletonContext: Provides the skeleton loading state for components that require it.
+ * - HostThemeProviderMock: Mocks the theme provider to ensure components are styled correctly during tests.
+ * - AppearanceComponentProvider: Supplies the necessary context for appearance-related components.
+ *
+ * This wrapper is useful for reducing redundancy in tests by encapsulating common providers,
+ * allowing for cleaner and more maintainable test code.
+ * @param {Object} props - The properties passed to the component.
+ * @param {ReactNode} props.children - The child components that will be rendered within the context providers.
+ * @example
+ * // Usage example
+ * render(
+ *   <TestWrapper>
+ *     <MyComponent />
+ *   </TestWrapper>
+ * );
+ * @author Cesar Garces - automatic
+ * @createdAt 2024-10-25 14:12:46 - automatic
+ * @updatedAt 2024-10-25 14:12:46 - automatic
+ * @updatedUser Cesar Garces - automatic
+ */
+declare const TestAppWrapper: FC<TestAppWrapperProps>;
+export default TestAppWrapper;

package/test/utils.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { cleanup, screen, act, fireEvent, within, waitFor, RenderResult } from '@testing-library/react';
-import { describe, expect } from 'vitest';
-import { default as userEvent } from '@testing-library/user-event';
+import { act, cleanup, fireEvent, RenderResult, screen, waitFor, within } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
-import { default as React } from 'react';
+import { default as userEvent, UserEvent } from '@testing-library/user-event';
+import { ReactElement } from 'react';
+import { describe, expect } from 'vitest';
 /**
  * TODO: Documentar
  * @author Juan Escobar - automatic
@@ -10,7 +10,27 @@ import { default as React } from 'react';
  * @updatedAt 2024-10-09 14:12:46 - automatic
  * @updatedUser Juan Escobar - automatic
  */
-declare const customRender: (ui: React.ReactElement, options?: {}) => RenderResult & {
+declare const customRender: (ui: ReactElement, options?: {}) => RenderResult & {
     user: ReturnType<typeof userEvent.setup>;
 };
-export { customRender as render, renderHook, screen, cleanup, act, fireEvent, userEvent, within, waitFor, describe, expect, };
+/**
+ * This function is a wrapper around the render function from @testing-library/react.
+ * Render Material UI components with the TestAppWrapper context.
+ * TestAppWrapper is a React functional component that provides a consistent testing environment
+ * for components that rely on various context providers.
+ * It wraps the children components with the following contexts:
+ * ModuleSkeletonContext, HostThemeProviderMock, and AppearanceComponentProvider.
+ * @param ui - The component to render.
+ * @param options - Additional options to pass to the render function.
+ * @returns The rendered component and the user event object.
+ * @example
+ * // Usage example
+ * const { renderUI, user } = renderMaterialUI(<MyComponent />);
+ * @author Andrés Quintero - automatic
+ * @createdAt 2024-10-09 14:12:46 - automatic
+ * @updatedAt 2024-10-09 14:12:46 - automatic
+ */
+declare const renderMaterialUI: (ui: ReactElement, options?: {}) => RenderResult & {
+    user: UserEvent;
+};
+export { act, cleanup, describe, expect, fireEvent, customRender as render, renderHook, renderMaterialUI, screen, userEvent, waitFor, within, };

package/components/NavLink/tests/index.test.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/components/PropertyValue/tests/index.test.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/components/hook-form/RHFDateTime/test/index.test.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/components/hook-form/RHFTextField/stories/Error/RHFTextFieldErrorOutlined.stories.d.ts DELETED Viewed

@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import { RHFTextField } from '../../..';
-declare const meta: Meta<typeof RHFTextField>;
-type Story = StoryObj<typeof RHFTextField>;
-/**
- * Story for the Error outlined RHFvariants of the TextField component.
- */
-export declare const ErrorOutlined: Story;
-/**
- * Story for the Error outlined RHFvariants of the TextField component whit label props and adorment End
- */
-export declare const ErrorOutlinedAdormentEnd: Story;
-/**
- * Story for the Error outlined RHFvariants of the TextField component whit label props and adorment Start
- */
-export declare const ErrorOutlinedAdormentStart: Story;
-/**
- * Story for the Error outlined RHFvariants of the TextField component whitout adorments.
- */
-export declare const WhitoutAdorments: Story;
-/**
- * Story for the Error outlined RHFvariants of the TextField component whit adorment end.
- */
-export declare const WhitAdormentEnd: Story;
-/**
- * Story for the Error outlined RHFvariants of the TextField component whit adorment start.
- */
-export declare const WhitAdormentStart: Story;
-export default meta;

package/components/hook-form/RHFTextField/stories/Error/RHFTextFieldErrorText.stories.d.ts DELETED Viewed

@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import { RHFTextField } from '../../..';
-declare const meta: Meta<typeof RHFTextField>;
-type Story = StoryObj<typeof RHFTextField>;
-/**
- * Story for the Error Text RHFvariants of the TextField component.
- */
-export declare const ErrorText: Story;
-/**
- * Story for the Error Text RHFvariants of the TextField component whit label props and adorment End
- */
-export declare const ErrorTextAdormentEnd: Story;
-/**
- * Story for the Error Text RHFvariants of the TextField component whit label props and adorment Start
- */
-export declare const ErrorTextAdormentStart: Story;
-/**
- * Story for the Error Text RHFvariants of the TextField component whitout adorments.
- */
-export declare const WhitoutAdorments: Story;
-/**
- * Story for the Error Text RHFvariants of the TextField component whit adorment end.
- */
-export declare const WhitAdormentEnd: Story;
-/**
- * Story for the Error Text RHFvariants of the TextField component whit adorment start.
- */
-export declare const WhitAdormentStart: Story;
-export default meta;

package/components/hook-form/RHFTextField/stories/Primary/RHFTextFieldOutlined.stories.d.ts DELETED Viewed

@@ -1,29 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import { RHFTextField } from '../../..';
-declare const meta: Meta<typeof RHFTextField>;
-type Story = StoryObj<typeof RHFTextField>;
-/**
- * Story for the primary outlined RHFvariants of the TextField component.
- */
-export declare const PrimaryOutlined: Story;
-/**
- * Story for the primary outlined RHFvariants of the TextField component whit label props and adorment End
- */
-export declare const PrimaryOutlinedAdormentEnd: Story;
-/**
- * Story for the primary outlined RHFvariants of the TextField component whit label props and adorment Start
- */
-export declare const PrimaryOutlinedAdormentStart: Story;
-/**
- * Story for the primary outlined RHFvariants of the TextField component whitout adorments.
- */
-export declare const WhitoutAdorments: Story;
-/**
- * Story for the primary outlined RHFvariants of the TextField component whit adorment end.
- */
-export declare const WhitAdormentEnd: Story;
-/**
- * Story for the primary outlined RHFvariants of the TextField component whit adorment start.
- */
-export declare const WhitAdormentStart: Story;
-export default meta;

package/components/hook-form/RHFTextField/stories/Primary/RHFTextFieldText.stories.d.ts DELETED Viewed

@@ -1,32 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import { RHFTextField } from '../../..';
-declare const meta: Meta<typeof RHFTextField>;
-type Story = StoryObj<typeof RHFTextField>;
-/**
- * Story for the primary text variant of the TextField component.
- */
-/**
- * Story for the primary text RHFvariants of the TextField component.
- */
-export declare const PrimaryText: Story;
-/**
- * Story for the primary text RHFvariants of the TextField component whit label props and adorment End
- */
-export declare const PrimaryTextAdormentEnd: Story;
-/**
- * Story for the primary text RHFvariants of the TextField component whit label props and adorment Start
- */
-export declare const PrimaryTextAdormentStart: Story;
-/**
- * Story for the primary text RHFvariants of the TextField component whitout adorments.
- */
-export declare const WhitoutAdorments: Story;
-/**
- * Story for the primary text RHFvariants of the TextField component whit adorment end.
- */
-export declare const WhitAdormentEnd: Story;
-/**
- * Story for the primary text RHFvariants of the TextField component whit adorment start.
- */
-export declare const WhitAdormentStart: Story;
-export default meta;

package/components/hook-form/RHFUpload/RHFUploadImage/tests/index.test.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/components/mui_extended/LoadingButton/tests/index.test.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};