@m4l/components 9.1.59 → 9.1.61

package/components/mui_extended/CheckBox/slots/CheckBoxSlots.js

@@ -3,26 +3,37 @@ import { Checkbox, Skeleton } from "@mui/material";
 import { C as CheckBoxSlots } from "./CheckBoxEnum.js";
 import { C as CHECK_BOX_KEY_COMPONENT } from "../constants.js";
 import { c as checkBoxStyles } from "../CheckBox.styles.js";
-import { L as Label } from "../../../Label/Label.js";
+import { T as Typography } from "../../Typography/Typography.js";
+import { I as Icon } from "../../../Icon/Icon.js";
 const CheckBoxRootStyled = styled("div", {
   name: CHECK_BOX_KEY_COMPONENT,
   slot: CheckBoxSlots.root
-})(checkBoxStyles?.root);
+})(checkBoxStyles.root);
 const MUICheckboxStyled = styled(Checkbox, {
   name: CHECK_BOX_KEY_COMPONENT,
   slot: CheckBoxSlots.muiCheckBox
-})(checkBoxStyles?.muiCheckBox);
-const LabelCheckBoxStyled = styled(Label, {
+})(checkBoxStyles.muiCheckBox);
+const TypographyStyled = styled(Typography, {
   name: CHECK_BOX_KEY_COMPONENT,
-  slot: CheckBoxSlots.labelCheckBox
-})(checkBoxStyles?.labelCheckBox);
+  slot: CheckBoxSlots.typographyStyled
+})(checkBoxStyles.typographyStyled);
 const SkeletonStyled = styled(Skeleton, {
   name: CHECK_BOX_KEY_COMPONENT,
   slot: CheckBoxSlots.skeletonStyled
-})(checkBoxStyles?.skeletonStyled);
+})(checkBoxStyles.skeletonStyled);
+const IconCheckedStyled = styled(Icon, {
+  name: CHECK_BOX_KEY_COMPONENT,
+  slot: CheckBoxSlots.iconChecked
+})(checkBoxStyles.iconChecked);
+const IconStyled = styled(Icon, {
+  name: CHECK_BOX_KEY_COMPONENT,
+  slot: CheckBoxSlots.icon
+})(checkBoxStyles.icon);
 export {
   CheckBoxRootStyled as C,
-  LabelCheckBoxStyled as L,
+  IconCheckedStyled as I,
   MUICheckboxStyled as M,
-  SkeletonStyled as S
+  SkeletonStyled as S,
+  TypographyStyled as T,
+  IconStyled as a
 };

package/components/mui_extended/CheckBox/test/CheckBox.test.d.ts

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

package/components/mui_extended/CheckBox/types.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxProps as MUICheckboxProps, PaletteColor, Theme } from '@mui/material';
+import { CheckboxProps as MUICheckboxProps, Theme } from '@mui/material';
 import { LabelProps } from '../../Label/types';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { CheckBoxSlots } from './slots';
@@ -10,38 +10,31 @@ export type OwnerState = Pick<CheckboxProps, 'size' | 'disabled'>;
  */
 export type CheckBoxVariants = 'standard';
 export interface CheckboxProps extends MUICheckboxProps, Omit<LabelProps, 'label' | 'size'> {
-    label?: string;
-    color?: Extract<ComponentPalletColor, 'primary'>;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    color?: Extract<ComponentPalletColor, 'default'>;
+    inlineText?: string;
 }
 export interface CheckBoxOwnerState {
     /**
-     * Indica si el  CheckBox está deshabilitado.
-     */
-    CheckBoxDisabled?: boolean;
-    /**
-     * Color de la paleta de CheckBox.
+     * Si está checkedo o no.
      */
-    CheckBoxPaletteColor: PaletteColor;
+    checked?: boolean;
     /**
-     * Variante de CheckBox.
-     */
-    CheckBoxVariant?: CheckBoxVariants;
-    /**
-     * Color de la paleta del componente del CheckBox.
+     * Indica si el  CheckBox está deshabilitado.
      */
-    CheckBoxComponentPaletteColor?: ComponentPalletColor;
+    disabled?: boolean;
     /**
      * Tamaño de CheckBox.
      */
-    CheckBoxSizes: Extract<Sizes, 'small' | 'medium'>;
+    size: Extract<Sizes, 'small' | 'medium'>;
     /**
      * Indica si CheckBox es error.
      */
-    CheckBoxError?: boolean;
+    error?: boolean;
     /**
      * Color del campo de CheckBox.
      */
-    CheckBoxColor?: Extract<ComponentPalletColor, 'primary'>;
+    color: Extract<ComponentPalletColor, 'default'>;
 }
 export type CheckBoxSlotsType = keyof typeof CheckBoxSlots;
 export type CheckBoxStyles = OverridesStyleRules<CheckBoxSlotsType, typeof CHECK_BOX_KEY_COMPONENT, Theme>;

package/components/mui_extended/CircularProgress/CircularProgress.d.ts

@@ -1,5 +1,9 @@
 import { CircularProgressProps } from './types';
 /**
  * Componente CircularProgress extendido de MUI
+ * @author Andrés Quintero - automatic
+ * @createdAt 2025-01-08 10:36:40 - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare const CircularProgress: (props: CircularProgressProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Dialog/Dialog.d.ts

@@ -48,7 +48,7 @@ import { DialogProps } from './types';
  * @returns {JSX.Element} Rendered dialog component.
  * @author cesar - automatic
  * @createdAt 2024-11-06 10:50:22 - automatic
- * @updatedAt 2025-01-02 10:02:18 - automatic
- * @updatedUser cesar - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare const Dialog: import('react').ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/components/mui_extended/IconButton/IconButton.styles.js

@@ -2,7 +2,7 @@ const iconButtonStyles = {
   /**
    * TODO: Documentar
    * @updatedUser Andrés Quintero - automatic
-   * @updatedAt 2025-01-02 08:24:32 - automatic
+   * @updatedAt 2025-01-03 11:42:14 - automatic
    * @createdAt 2024-10-22 19:53:39 - automatic
    * @author Bruce Escobar - automatic
    */
@@ -134,7 +134,7 @@ const iconButtonStyles = {
    * Comentado por el momento, falta de documentación en Figma de Badge
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:41:31 - automatic
-   * @updatedAt 2025-01-02 08:24:32 - automatic
+   * @updatedAt 2025-01-03 11:42:14 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   badgeIconButton: () => ({
@@ -175,7 +175,7 @@ const iconButtonStyles = {
    * Slot de contenedor de reactNode
    * @author Andrés Quintero - automatic
    * @createdAt 2024-12-27 08:27:31 - automatic
-   * @updatedAt 2025-01-02 08:24:32 - automatic
+   * @updatedAt 2025-01-03 11:42:14 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   containReact: ({ isSkeleton }) => ({
@@ -187,7 +187,7 @@ const iconButtonStyles = {
    * Slot skeleton con sus estilos de tamaño
    * @author Andrés Quintero - automatic
    * @createdAt 2024-12-27 08:27:31 - automatic
-   * @updatedAt 2025-01-02 08:24:32 - automatic
+   * @updatedAt 2025-01-03 11:42:14 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   skeleton: ({ theme, ownerState }) => ({

package/components/mui_extended/LoadingButton/LoadingButton.d.ts

@@ -3,7 +3,7 @@ import { LoadingButtonProps } from './types';
  * Componente LoadingButton que extiende las props de Button
  * @author Andrés Quintero - automatic
  * @createdAt 2024-12-31 11:23:51 - automatic
- * @updatedAt 2024-12-31 11:23:53 - automatic
+ * @updatedAt 2025-01-03 11:42:14 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export declare const LoadingButton: (props: LoadingButtonProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/LoadingButton/LoadingButton.styles.js

@@ -4,7 +4,7 @@ const loadingButtonStyles = {
    * Componente boton con variantes y paletas de colores.
    * @author Andrés Quintero - automatic
    * @createdAt 2024-12-31 11:23:51 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:14 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   root: ({ ownerState }) => ({
@@ -22,7 +22,7 @@ const loadingButtonStyles = {
    * Incluye tamaños responsivos para diferentes anchos de pantalla y tamaños de botón.
    * @author Andrés Quintero - automatic
    * @createdAt 2024-12-31 11:23:51 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:14 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   skeletonLoadingButton: ({ theme, ownerState }) => ({
@@ -54,7 +54,7 @@ const loadingButtonStyles = {
    * Posiciona el cargador dentro del botón y aplica un color consistente.
    * @author Andrés Quintero - automatic
    * @createdAt 2024-12-31 11:23:51 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:14 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   circularProgress: ({ theme, ownerState }) => ({

package/components/mui_extended/MenuItem/MenuItem.d.ts

@@ -7,7 +7,7 @@ import { MenuItemProps } from './types';
  * @returns
  * @author Bruce Escobar - automatic
  * @createdAt 2024-10-22 19:53:39 - automatic
- * @updatedAt 2024-12-31 11:23:53 - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export declare const MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/MenuItem/MenuItem.styles.js

@@ -3,15 +3,23 @@ const menuItemStyles = {
   /**
    * Estilos para el contenedor de los items del menú
    * @updatedUser Andrés Quintero - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @createdAt 2025-01-08 10:36:40 - automatic
+   * @author Andrés Quintero - automatic
+   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
+   * @createdAt 2025-01-03 11:42:11 - automatic
+   * @author Andrés Quintero - automatic
+   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @createdAt 2024-12-31 11:23:51 - automatic
    * @author Andrés Quintero - automatic
    * @updatedUser Andrés Quintero - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @createdAt 2024-12-30 14:36:06 - automatic
    * @author Andrés Quintero - automatic
    * @updatedUser Andrés Quintero - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @createdAt 2024-12-27 08:28:33 - automatic
    * @author Andrés Quintero - automatic
    */
@@ -99,7 +107,7 @@ const menuItemStyles = {
    * Estilos para el icono de los items del menú
    * @author SebastianM - automatic
    * @createdAt 2024-12-02 19:12:14 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   menuItemIcon: () => ({
@@ -111,7 +119,7 @@ const menuItemStyles = {
    * Estilos para el icono de los items del menú cuando están seleccionados
    * @author SebastianM - automatic
    * @createdAt 2024-12-13 12:45:48 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   menuItemIconChecked: ({ ownerState }) => ({
@@ -125,7 +133,7 @@ const menuItemStyles = {
    * Estilos para la tipografía del menú item
    * @author SebastianM - automatic
    * @createdAt 2024-12-13 12:45:48 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   menuItemTypography: () => ({}),
@@ -142,7 +150,7 @@ const menuItemStyles = {
    * Estilos para el contenedor de los items del menú en skeleton
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 10:38:00 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   skeletonMenuItem: ({ theme, ownerState }) => ({

package/components/mui_extended/Popover/Popover.d.ts

@@ -16,7 +16,7 @@ import { PopoverProps } from './types';
  *  Componente Popover que se utiliza para mostrar información adicional en un área emergente.
  * @author Andrés Quintero - automatic
  * @createdAt 2024-12-27 08:27:31 - automatic
- * @updatedAt 2024-12-31 11:23:53 - automatic
+ * @updatedAt 2025-01-03 11:42:15 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/mui_extended/Select/Select.d.ts

@@ -5,7 +5,7 @@ import { SelectProps } from './types';
  * @returns {JSX.Element} The rendered Select component.
  * @author SebastianM - automatic
  * @createdAt 2024-12-23 10:47:53 - automatic
- * @updatedAt 2024-12-31 11:23:53 - automatic
+ * @updatedAt 2025-01-03 11:42:15 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export declare const Select: (props: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Select/Select.js

@@ -100,7 +100,7 @@ const Select = (props) => {
          * @param {React.KeyboardEvent} event - The key down event.
          * @author SebastianM - automatic
          * @createdAt 2024-12-23 10:47:53 - automatic
-         * @updatedAt 2024-12-31 11:23:53 - automatic
+         * @updatedAt 2025-01-03 11:42:15 - automatic
          * @updatedUser Andrés Quintero - automatic
          */
         onKeyDown: (event) => {

package/components/mui_extended/Select/Select.styles.js

@@ -3,7 +3,7 @@ const selectStyles = {
    * Estilos para el componente Select
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 10:30:26 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   selectRoot: ({ theme, ownerState }) => ({
@@ -191,7 +191,7 @@ const selectStyles = {
    * Estilos para el ícono de la fila
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 10:30:26 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   iconButton: ({ theme }) => ({
@@ -206,7 +206,7 @@ const selectStyles = {
    * @returns {object} The styles for the render option container
    * @author SebastianM - automatic
    * @createdAt 2024-12-18 15:11:13 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   renderOptionContainer: ({ theme, ownerState }) => ({
@@ -236,7 +236,7 @@ const selectStyles = {
    * Styles for the label option
    * @author SebastianM - automatic
    * @createdAt 2024-12-23 10:47:53 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   labelOption: ({ theme }) => ({
@@ -248,7 +248,7 @@ const selectStyles = {
    * @returns {object} The styles for the label placeholder
    * @author SebastianM - automatic
    * @createdAt 2024-12-26 14:16:33 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   labelPlaceholer: ({ theme }) => ({
@@ -261,7 +261,7 @@ const selectStyles = {
    * @returns {object} The styles for the menu options
    * @author SebastianM - automatic
    * @createdAt 2024-12-18 15:11:13 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   menuOptions: ({ theme }) => ({
@@ -274,7 +274,7 @@ const selectStyles = {
    * @returns {object} The styles for the menu item select
    * @author SebastianM - automatic
    * @createdAt 2024-12-26 14:16:33 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   menuItemSelect: ({ theme }) => ({
@@ -285,7 +285,7 @@ const selectStyles = {
    * Styles for the skeleton select component
    * @author SebastianM - automatic
    * @createdAt 2024-12-17 15:54:22 - automatic
-   * @updatedAt 2024-12-31 11:23:53 - automatic
+   * @updatedAt 2025-01-03 11:42:15 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   skeletonSelect: ({ theme, ownerState }) => ({

package/components/mui_extended/Select/types.d.ts

@@ -33,7 +33,7 @@ export type selectOption = {
  * variant - Variante del Select.
  * @author Bruce Escobar - automatic
  * @createdAt 2024-10-22 10:30:26 - automatic
- * @updatedAt 2024-12-31 11:23:53 - automatic
+ * @updatedAt 2025-01-03 11:42:15 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export interface SelectProps extends Omit<MUISelectProps, 'size' | 'onChange' | 'value' | 'error' | 'variant' | 'color'> {

package/components/mui_extended/TextField/TextField.d.ts

@@ -3,7 +3,7 @@ import { TextFieldProps } from './types';
  * Componente TextField extended de MUI-MATERIAL componente de entrada de datos en una interfaz de usuario que permite a los usuarios ingresar y editar texto. Es comúnmente utilizado en formularios y otros contextos donde se requiere la entrada de texto por parte del usuario.
  * @author Bruce Escobar - automatic
  * @createdAt 2024-10-22 19:27:22 - automatic
- * @updatedAt 2024-12-30 14:36:11 - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export declare const TextField: import('react').ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/components/mui_extended/TextField/TextField.styles.js

@@ -6,7 +6,7 @@ const textFieldStyles = {
    * Estilos personalizados para el componente TextField.
    * @author SebastianM - automatic
    * @createdAt 2024-11-29 10:03:37 - automatic
-   * @updatedAt 2024-12-30 14:36:11 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   root: ({ ownerState, theme }) => ({
@@ -127,7 +127,7 @@ const textFieldStyles = {
    * Estilos personalizados para el componente Skeleton.
    * @author SebastianM - automatic
    * @createdAt 2024-11-29 10:03:37 - automatic
-   * @updatedAt 2024-12-30 14:36:11 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   skeleton: ({ ownerState, theme }) => ({

package/components/mui_extended/Typography/Typography.d.ts

@@ -19,7 +19,7 @@ import { TypographyProps } from './types';
  * @returns {JSX.Element} The rendered Typography component.
  * @author Bruce Escobar - automatic
  * @createdAt 2024-10-22 09:41:31 - automatic
- * @updatedAt 2024-10-22 19:27:24 - automatic
- * @updatedUser Bruce Escobar - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare function Typography(props: TypographyProps): import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Typography/Typography.js

@@ -16,16 +16,18 @@ function Typography(props) {
     className,
     dataTestid,
     children,
+    disabled,
     ...other
   } = props;
   const isSkeleton = useModuleSkeleton();
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = {
-    typographyColor: color,
-    typographySize: adjustedSize,
-    typographyskeletonRows: skeletonRows,
-    typographyVariant: variant
+    disabled,
+    color,
+    size: adjustedSize,
+    skeletonRows,
+    variant
   };
   return /* @__PURE__ */ jsx(
     StyledMUITypography,

package/components/mui_extended/Typography/types.d.ts

@@ -41,15 +41,18 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
     dataTestid?: string;
     /** Sirve para vincular un elemento de etiqueta con un elemento de formulario, como un campo de entrada, lo que permite que al hacer clic en el texto de la etiqueta, se active el campo correspondiente*/
     htmlFor?: string | undefined;
+    /** Si esta disabled, el texto pasa a text.disabled */
+    disabled?: boolean;
 }
 /**
  * Define valores de estado necesarios para estilar el componente.
  */
 export interface TypographyOwnerState {
-    typographyColor: TypographyProps['color'];
-    typographyVariant: TypographyProps['variant'];
-    typographySize: TypographyProps['size'];
-    typographyskeletonRows: TypographyProps['skeletonRows'];
+    disabled?: boolean;
+    color: TypographyProps['color'];
+    variant: TypographyProps['variant'];
+    size: TypographyProps['size'];
+    skeletonRows: TypographyProps['skeletonRows'];
 }
 /**
  * Agrupa la lista de slots del componente.
@@ -59,4 +62,4 @@ export type TypographySlotsType = keyof typeof TypographySlots;
  * Define las capacidades de estilos css disponibles para los slots del componente,
  * también asocia la clase TYPOGRAPHY_KEY_COMPONENT a cada slot.
  */
-export type TypographyStyles = Partial<OverridesStyleRules<TypographySlotsType, typeof TYPOGRAPHY_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type TypographyStyles = OverridesStyleRules<TypographySlotsType, typeof TYPOGRAPHY_KEY_COMPONENT, Theme>;

package/components/mui_extended/Typography/typography.styles.js

@@ -5,7 +5,7 @@ const typographyStyles = {
    * Componente extendido de MUI Typography, que permite personalizar los estilos del componente.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:41:31 - automatic
-   * @updatedAt 2024-12-30 14:36:11 - automatic
+   * @updatedAt 2025-01-08 10:36:41 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   root: ({ ownerState, theme }) => ({
@@ -14,27 +14,27 @@ const typographyStyles = {
       // Estilos generales 🌐
       // skeleton spacing when multiple rows 🦴
       fontFamily: theme.typography.fontFamily,
-      ...ownerState.typographyskeletonRows && ownerState.typographyskeletonRows > 1 && {
+      ...ownerState.skeletonRows && ownerState.skeletonRows > 1 && {
         display: "flex",
         flexDirection: "column"
       },
       // Override de estilos generales de MUI 🚫
       // color text.primary 🎨
-      ...ownerState.typographyColor === "text.primary" && {
+      ...ownerState.color === "text.primary" && {
         color: theme.vars.palette.text.primary
       },
       // color text.secondary 🎨
-      ...ownerState.typographyColor === "text.secondary" && {
+      ...ownerState.color === "text.secondary" && {
         color: theme.vars.palette.text.secondary
       },
       // color text.disabled 🎨
-      ...ownerState.typographyColor === "text.disabled" && {
+      ...(ownerState.disabled || ownerState.color === "text.disabled") && {
         color: theme.vars.palette.text.disabled
       },
       ...getTypographyStyles(
         theme.generalSettings.isMobile,
-        ownerState.typographySize || "medium",
-        ownerState.typographyVariant || "body"
+        ownerState.size || "medium",
+        ownerState.variant || "body"
       )
     }
   }),

package/hooks/useFormFocus/index.d.ts

@@ -2,10 +2,14 @@ import { FormFocusHookReturnType } from './types';
 /**
  * useFormFocus: Custom hook creado para facilitar el manejo de estado de interacción de usuario para los
  * componentes de formulario. Aporta los estados Focus, TabSelected y
- *
+ * @createdAt 2025-01-08 10:36:40 - automatic
  */
 /**
  * TODO: Documentar
  * @deprecated no se debe usar, esto era para una metodologia donde en js se manejaba el estado de los componentes
+ * @author Andrés Quintero - automatic
+ * @createdAt 2025-01-08 10:36:40 - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare const useFormFocus: <ElmentType extends HTMLElement>() => FormFocusHookReturnType<ElmentType>;

package/package.json

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

package/test/HostThemeProviderMock.d.ts

@@ -7,7 +7,7 @@ interface HostThemeProviderMockProps {
  * TODO: Documentar
  * @author Andrés Quintero - automatic
  * @createdAt 2024-12-31 11:23:51 - automatic
- * @updatedAt 2024-12-31 11:23:53 - automatic
+ * @updatedAt 2025-01-03 11:42:15 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 declare const HostThemeProviderMock: (props: HostThemeProviderMockProps) => import("react/jsx-runtime").JSX.Element;

package/test/TestAppWrapper.d.ts

@@ -26,7 +26,7 @@ interface TestAppWrapperProps {
  * );
  * @author Cesar Garces - automatic
  * @createdAt 2024-10-25 14:12:46 - automatic
- * @updatedAt 2024-12-31 11:23:53 - automatic
+ * @updatedAt 2025-01-03 11:42:15 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 declare const TestAppWrapper: FC<TestAppWrapperProps>;

package/test/TestFormAutoValidation.d.ts

@@ -1,4 +1,8 @@
 /**
  * Envoltorio para el estado de error
+ * @author Andrés Quintero - automatic
+ * @createdAt 2025-01-08 10:36:40 - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare const TestFormAutoValidation: () => import("react/jsx-runtime").JSX.Element;

package/utils/getHeightSizeStyles.d.ts

@@ -8,5 +8,9 @@ import { Sizes, SizesComponentsTypes } from '@m4l/styles';
  * @param variantSize - Variante de tamaño que se desea aplicar al componente.
  * @param css - Estilos css adicionales o una función que devuelve un objeto de estilos. Si es una función, recibe `heightSize` como argumento.
  * @returns Objeto con los estilos calculados.
+ * @author Andrés Quintero - automatic
+ * @createdAt 2025-01-08 10:36:40 - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare const getHeightSizeStyles: (isMobile: boolean, size: Extract<Sizes, "small" | "medium">, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((heightSize: string | number) => Record<string, any>)) => any;

package/utils/getTypographyStyles.d.ts

@@ -7,5 +7,9 @@ import { FontProperties, Sizes, TypographyVariants } from '@m4l/styles';
  * theme.generalSettings.isMobile.
  * [size]: Formato de tamaño definido por el componente o el contexto de AppearanceComponentProvider, puede ser small,
  * medium o large.
+ * @author Andrés Quintero - automatic
+ * @createdAt 2025-01-08 10:36:40 - automatic
+ * @updatedAt 2025-01-08 10:36:41 - automatic
+ * @updatedUser Andrés Quintero - automatic
  */
 export declare const getTypographyStyles: (isMobile: boolean, size: Extract<Sizes, "small" | "medium">, variant: TypographyVariants) => FontProperties;