@m4l/components 9.3.19-BE061025-beta.1 → 9.3.19-BE101025-beta.1

package/components/Stepper/subcomponents/StepperFooter/subcomponents/StepperFooterRightActions/index.js

@@ -1,19 +1,29 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useMemo } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { u as useIsLastVisibleValidStep } from "../../../../hooks/useIsLastVisibleValidStep/index.js";
 import { m as StepperFooterRightActionsStyled } from "../../../../slots/StepperSlot.js";
-import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
 import { S as StepperSubmitButton } from "../../../StepperButtons/StepperSubmitButton/index.js";
+import { S as StepperNextButton } from "../../../StepperButtons/StepperNextButton/index.js";
 function StepperFooterRightActions(props) {
   const { children } = props;
   const isLastVisibleValidStep = useIsLastVisibleValidStep();
-  const childrenWithoutNextButton = useMemo(() => {
-    if (!isLastVisibleValidStep) {
-      return children;
-    }
+  const [hasCustomSubmitButton, setHasCustomSubmitButton] = useState(false);
+  useEffect(() => {
+    const hasCustomButton = React.Children.toArray(children).some((child) => {
+      if (React.isValidElement(child)) {
+        return child.type === StepperSubmitButton;
+      }
+      return false;
+    });
+    setHasCustomSubmitButton(hasCustomButton);
+  }, [children]);
+  const filteredChildren = useMemo(() => {
     return React.Children.toArray(children).filter((child) => {
       if (React.isValidElement(child)) {
-        if (child.type === StepperNextButton) {
+        if (!isLastVisibleValidStep && child.type === StepperSubmitButton) {
+          return false;
+        }
+        if (isLastVisibleValidStep && child.type === StepperNextButton) {
           return false;
         }
       }
@@ -21,10 +31,10 @@ function StepperFooterRightActions(props) {
     });
   }, [children, isLastVisibleValidStep]);
   const submitButton = useMemo(() => {
-    return isLastVisibleValidStep ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
-  }, [isLastVisibleValidStep]);
+    return isLastVisibleValidStep && !hasCustomSubmitButton ? /* @__PURE__ */ jsx(StepperSubmitButton, {}) : null;
+  }, [isLastVisibleValidStep, hasCustomSubmitButton]);
   return /* @__PURE__ */ jsxs(StepperFooterRightActionsStyled, { children: [
-    childrenWithoutNextButton,
+    filteredChildren,
     submitButton
   ] });
 }

package/components/Stepper/types.d.ts

@@ -5,6 +5,7 @@ import { ContentAreaSlots, ContentSlots, StepperFooterSlots, StepperSlots } from
 import { STEPPER_PREFIX_NAME } from './constants';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { Step as StepComponent } from './subcomponents/StepperContent/subcomponents/Step';
+import { ButtonProps } from '../mui_extended/Button';
 export type Orientation = 'horizontal' | 'vertical';
 export type IndicatorType = 'number' | 'dot';
 export type FormData = Record<string, string | number | boolean | null | undefined>;
@@ -145,6 +146,12 @@ export interface StepperFooterProps {
 export interface StepperFooterLeftActionsProps {
     children?: ReactNode;
 }
+/**
+ * Props para los botones del Stepper que extienden las props de Button de mui_extended
+ */
+export interface StepperButtonProps extends Omit<ButtonProps, 'label'> {
+    label?: string;
+}
 /**
  * Props del StepperFooterRightActions
  */

package/components/WindowBase/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const WINDOW_BASE_KEY_COMPONENT = "M4LWindowBase";
-export declare const WINDOW_BASE_CLASSES: Record<string, string>;
+export declare const WINDOW_BASE_CLASSES: Record<"wrapperWindowBase" | "contentWindowBase" | "headerContentWindowBase" | "headerTitleWindowBase" | "headerSubTitleWindowBase" | "pointIcon" | "containerTitleSubtitle" | "headerIconWindowBase" | "menuActionsWindowBase" | "iconsWrapperWindowBase" | "headerWindowComponent" | "linearProgressIndeterminate" | "contentEditionInfo" | "windowContainerComponent" | "toastContainer" | "containerLeftActions", string>;

package/components/extended/React-Json-Viewer/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const REACT_JSON_VIEWER_KEY_COMPONENT = "M4LReactJsonViewer";
-export declare const REACT_JSON_VIEWER_CLASSES: Record<string, string>;
+export declare const REACT_JSON_VIEWER_CLASSES: Record<"root", string>;

package/components/extended/React-resizable-panels/SplitLayout.js

@@ -32,7 +32,7 @@ const SplitLayout = (props) => {
               splitPosition
             },
             defaultSize: defaultMasterSize,
-            className: classes.master,
+            className: classes.splitMaster,
             children: firstPartMemo
           }
         ),

package/components/formatters/ChipStatusFormatter/constants.d.ts

@@ -2,4 +2,4 @@
  * Clave del componente ChipStatusFormatter
  */
 export declare const CHIP_STATUS_FORMATTER_KEY_COMPONENT = "M4LChipStatusFormatter";
-export declare const CHIP_STATUS_FORMATTER_CLASSES: Record<string, string>;
+export declare const CHIP_STATUS_FORMATTER_CLASSES: Record<"root" | "columnWrapper", string>;

package/components/formatters/EditLabelFormatter/constants.d.ts

@@ -2,4 +2,4 @@
  * Clave del componente ChipStatusFormatter
  */
 export declare const EDIT_LABEL_FORMATTER_KEY_COMPONENT = "M4LEditLabelFormatter";
-export declare const EDIT_LABEL_FORMATTER_CLASSES: Record<string, string>;
+export declare const EDIT_LABEL_FORMATTER_CLASSES: Record<"root" | "columnWrapper", string>;

package/components/formatters/EditLabelFormatter/slots/EditLabelFormatterSlots.d.ts

@@ -2,3 +2,4 @@
  * componente root del ChipStatusFormatter
  */
 export declare const EditLabelFormatterRootStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../EditLabel').EditLabelProps, keyof import('../../../EditLabel').EditLabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, {}, {}>;
+export declare const EditLabelFormatterColumnWrapperStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;

package/components/formatters/EditLabelFormatter/types.d.ts

@@ -4,7 +4,7 @@ import { EditLabelFormatterSlots as Slots } from './slots/EditLabelFormatterEnum
 import { Theme } from '@mui/material';
 import { EditLabelProps } from '../../EditLabel/types';
 export type ChipStatusKey = string | number;
-export interface EditLabelFormatterProps extends Pick<EditLabelProps, 'label' | 'onChange' | 'size' | 'width' | 'className'> {
+export interface EditLabelFormatterProps extends Pick<EditLabelProps, 'label' | 'onChange' | 'size' | 'fieldWidth' | 'className'> {
     /**
      * Componente personalizado
      */

package/components/hook-form/RHFAutocomplete/types.d.ts

@@ -5,7 +5,7 @@ import { RFHAUTOCOMPLETE_KEY_COMPONENT } from './constants';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { RFHAutocompleteSlots } from './slots';
 import { LabelProps } from '../../Label/types';
-import { AutocompleteProps } from 'src/components/mui_extended/Autocomplete/types';
+import { AutocompleteProps } from '../../mui_extended/Autocomplete/types';
 export type GetOptionString<T> = (option: T | null) => string;
 export type RHFAutocompleteVariants = 'outlined' | 'text';
 export type RHFAutocompleteType = 'text' | 'image';

package/components/hook-form/RHFCheckbox/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const RHF_CHECKBOX_KEY_COMPONENT = "M4LRHFCheckbox";
-export declare const TEXT_FIELD_CLASSES: Record<string, string>;
+export declare const TEXT_FIELD_CLASSES: Record<"root" | "checkBox" | "containerCheckTypography" | "labelComponent", string>;

package/components/hook-form/RHFSelect/constants.d.ts

@@ -5,4 +5,4 @@ export declare const RHFSELECT_COMPONENT_KEY = "RHFSelect";
 /**
  * Clases CSS generadas dinámicamente para el componente RHFSelect.
  */
-export declare const RHFSELECT_CLASSES: Record<string, string>;
+export declare const RHFSELECT_CLASSES: Record<"select" | "root" | "label" | "helperError", string>;

package/components/hook-form/RHFUpload/RHFUploadSingleFile/constants.d.ts

@@ -1,5 +1,29 @@
+import { RHFUploadSingleFileSlots } from './slots/RHFUploadSingleFileEnum';
 export declare const RHF_UPLOAD_SINGLE_FILE_KEY_COMPONENT = "M4LRHFUploadSingleFile";
-export declare const RHF_UPLOAD_SINGLE_FILE_CLASSES: Record<string, string>;
+export declare const RHF_UPLOAD_SINGLE_FILE_COMPLEMENTARY_CLASSES: {
+    root: RHFUploadSingleFileSlots.root;
+    label: RHFUploadSingleFileSlots.label;
+    helperError: RHFUploadSingleFileSlots.helperError;
+    containerDropZone: RHFUploadSingleFileSlots.containerDropZone;
+    dropZone: RHFUploadSingleFileSlots.dropZone;
+    image: RHFUploadSingleFileSlots.image;
+    containerBlockContent: RHFUploadSingleFileSlots.containerBlockContent;
+    blockContentGroup: RHFUploadSingleFileSlots.blockContentGroup;
+    illustrationUpload: RHFUploadSingleFileSlots.illustrationUpload;
+    title: RHFUploadSingleFileSlots.title;
+    description: RHFUploadSingleFileSlots.description;
+    divider: RHFUploadSingleFileSlots.divider;
+    dividerText: RHFUploadSingleFileSlots.dividerText;
+    button: RHFUploadSingleFileSlots.button;
+    containerPreview: RHFUploadSingleFileSlots.containerPreview;
+    containerNameSize: RHFUploadSingleFileSlots.containerNameSize;
+    imagePreview: RHFUploadSingleFileSlots.imagePreview;
+    namePreview: RHFUploadSingleFileSlots.namePreview;
+    sizePreview: RHFUploadSingleFileSlots.sizePreview;
+    closePreview: RHFUploadSingleFileSlots.closePreview;
+    linearProgress: string;
+};
+export declare const RHF_UPLOAD_SINGLE_FILE_CLASSES: Record<"title" | "divider" | "button" | "root" | "label" | "image" | "description" | "helperError" | "containerDropZone" | "dropZone" | "containerBlockContent" | "blockContentGroup" | "illustrationUpload" | "dividerText" | "containerPreview" | "containerNameSize" | "imagePreview" | "namePreview" | "sizePreview" | "closePreview" | "linearProgress", string>;
 export declare const DEFAULT_MAX_FILE_SIZE: number;
 export declare const FILES_ICONS: {
     readonly 'application/pdf': "frontend/components/RHF_upload_single_file/assets/icons/application_pdf.svg";

package/components/hook-form/RHFUpload/RHFUploadSingleFile/constants.js

@@ -1,7 +1,11 @@
 import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
 import { R as RHFUploadSingleFileSlots } from "./slots/RHFUploadSingleFileEnum.js";
 const RHF_UPLOAD_SINGLE_FILE_KEY_COMPONENT = "M4LRHFUploadSingleFile";
-const RHF_UPLOAD_SINGLE_FILE_CLASSES = getComponentClasses(RHF_UPLOAD_SINGLE_FILE_KEY_COMPONENT, RHFUploadSingleFileSlots);
+const RHF_UPLOAD_SINGLE_FILE_COMPLEMENTARY_CLASSES = {
+  linearProgress: "linearProgress-linearProgress",
+  ...RHFUploadSingleFileSlots
+};
+const RHF_UPLOAD_SINGLE_FILE_CLASSES = getComponentClasses(RHF_UPLOAD_SINGLE_FILE_KEY_COMPONENT, RHF_UPLOAD_SINGLE_FILE_COMPLEMENTARY_CLASSES);
 const DEFAULT_MAX_FILE_SIZE = 100 * 1024 * 1024;
 const PATH_ICONS = "frontend/components/RHF_upload_single_file/assets/icons";
 const FILES_ICONS = {

package/components/hook-form/RHFormContext/index.d.ts

@@ -20,7 +20,7 @@ import { CustomFormArguments, FormProviderProps, RHFormProviderRef } from './typ
  * });
  * ```
  */
-export declare function useCustomForm({ validationSchema, values, statusLoad, mode }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
+export declare function useCustomForm({ validationSchema, values, statusLoad, mode, }: CustomFormArguments): import('react-hook-form').UseFormReturn<FieldValues, any, FieldValues>;
 /**
  * Componente que proporciona el contexto de React Hook Form con funcionalidades adicionales.
  *

package/components/hook-form/RHFormContext/index.js

@@ -6,7 +6,12 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { F as FormProviderRoot } from "./styles.js";
 import { R as RHFormProviderUtilityClasses } from "./classes/index.js";
 const classes = RHFormProviderUtilityClasses();
-function useCustomForm({ validationSchema, values, statusLoad, mode }) {
+function useCustomForm({
+  validationSchema,
+  values,
+  statusLoad,
+  mode
+}) {
   const formMethods = useForm({
     resolver: yupResolver(validationSchema),
     defaultValues: values,
@@ -51,7 +56,14 @@ const FormProviderCustom = forwardRef((props, ref) => {
     setError: formMethods.setError,
     unregister: formMethods.unregister
   }), [formMethods, handleSubmit, onSubmit]);
-  return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(FormProviderRoot, { className: clsx(classes.root, className), onSubmit: handleSubmit(onSubmit), children }) });
+  return /* @__PURE__ */ jsx(FormProvider, { ...props, children: /* @__PURE__ */ jsx(
+    FormProviderRoot,
+    {
+      className: clsx(classes.root, className),
+      onSubmit: handleSubmit(onSubmit),
+      children
+    }
+  ) });
 });
 FormProviderCustom.displayName = "FormProviderCustom";
 const RHFormProvider = forwardRef((props, ref) => {

package/components/index.d.ts

@@ -34,6 +34,7 @@ export * from './Loadable';
 export * from './LoadingError';
 export * from './MenuActions';
 export * from './MFIsolationApp';
+export * from './MFIsolationAppStorybook';
 export * from './MFLoader';
 export * from './ImageText';
 export * from './NoItemSelected';

package/components/mui_extended/Autocomplete/hooks/useStartAdornments.d.ts

@@ -6,8 +6,8 @@ export type UseAdornmentsProps<T> = {
     loading?: boolean;
     adjustedSize: 'small' | 'medium';
     getOptionLabelLocal: (option: T) => string;
-    getOptionalStartAdornment: (option: T) => React.ReactNode;
-    getOptionalEndAdornment: (option: T) => React.ReactNode;
+    getOptionalStartAdornment?: (option: T) => React.ReactNode;
+    getOptionalEndAdornment?: (option: T) => React.ReactNode;
     ownerState: AutocompleteOwnerState;
     handleDelete: (option: T) => void;
     getOptionUrlImage?: (option: T) => string;
@@ -17,7 +17,7 @@ export type UseAdornmentsProps<T> = {
     handleRefresh: () => void;
     disabled?: boolean;
     onOpenLocal: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    startAdornment: AutocompleteProps<unknown, true>['startAdornment'];
+    startAdornment?: AutocompleteProps<unknown, true>['startAdornment'];
 };
 /**
  * Hook para el componente Autocomplete local

package/components/mui_extended/Autocomplete/hooks/useStartAdornments.js

@@ -30,8 +30,8 @@ function useStartAdornments(props) {
         onDeleted: () => handleDelete(option),
         disabledDeleteButton: disabled,
         ownerState: { ...ownerState },
-        startIcon: getOptionalStartAdornment(option),
-        endIcon: getOptionalEndAdornment(option)
+        startIcon: getOptionalStartAdornment?.(option),
+        endIcon: getOptionalEndAdornment?.(option)
       },
       `${option}-${index}`
     )) }) });

package/components/mui_extended/Button/Button.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { useTheme } from "@mui/material";
-import clsx from "clsx";
 import { forwardRef } from "react";
+import { B as BUTTON_CLASSES } from "./constants.js";
+import clsx from "clsx";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { S as SkeletonButtonStyled, B as ButtonRootStyled, T as TextButtonStyled, a as ButtonIconStyled } from "./slots/ButtonSlots.js";
 const Button = forwardRef((props, ref) => {
@@ -58,7 +59,8 @@ const Button = forwardRef((props, ref) => {
           alt: "icon",
           size: currentSize,
           disabled,
-          instaceDataTestId
+          instaceDataTestId,
+          className: BUTTON_CLASSES.buttonIcon
         }
       );
     }
@@ -70,7 +72,7 @@ const Button = forwardRef((props, ref) => {
       role: "button",
       startIcon: renderIcon(startIcon, "ButtonStartIcon"),
       endIcon: renderIcon(endIcon, "ButtonEndIcon"),
-      className: clsx(className),
+      className: clsx(className, BUTTON_CLASSES.buttonRoot),
       variant,
       size,
       disabled,
@@ -80,7 +82,16 @@ const Button = forwardRef((props, ref) => {
       ref,
       ...others,
       children: [
-        /* @__PURE__ */ jsx(TextButtonStyled, { ownerState: { ...ownerState }, color: adjustedColor, size: currentSize, children: label }),
+        /* @__PURE__ */ jsx(
+          TextButtonStyled,
+          {
+            ownerState: { ...ownerState },
+            color: adjustedColor,
+            size: currentSize,
+            className: BUTTON_CLASSES.textButton,
+            children: label
+          }
+        ),
         props.children
       ]
     }

package/components/mui_extended/Button/ButtonStyles.js

@@ -1,84 +1,166 @@
 import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { B as BUTTON_CLASSES } from "./constants.js";
 const buttonStyles = {
   /**
    * Styles for the root element of the button component.
    */
-  buttonRoot: ({ theme, ownerState }) => ({
-    display: "flex",
-    flexWrap: "nowrap",
-    alignItems: "center",
-    gap: theme.vars.size.baseSpacings.sp1,
-    padding: `0px ${theme.vars.size.baseSpacings.sp2}`,
-    boxShadow: "none",
-    borderRadius: theme.vars.size.borderRadius["r1-5"],
-    maxWidth: "200px",
-    minWidth: "0",
-    flexShrink: 0,
-    "&:hover": {
-      backgroundColor: ownerState?.color === "default" ? ownerState?.paletteColor?.hover : ownerState?.paletteColor?.hoverOpacity,
-      borderColor: ownerState?.paletteColor?.hover
-    },
-    "&:active": {
-      boxShadow: "none",
-      borderColor: ownerState?.paletteColor?.active,
-      backgroundColor: ownerState?.paletteColor?.activeOpacity
-    },
-    "&:focus-visible": {
-      boxShadow: "none",
-      backgroundColor: ownerState?.paletteColor?.activeOpacity
-    },
-    "&:disabled": {
-      backgroundColor: "none",
-      "&&& .M4LIcon-icon": {
-        backgroundColor: theme.vars.palette.text.disabled
-      },
+  buttonRoot: ({ theme, ownerState }) => {
+    const selectionEffect = {
+      boxShadow: `inset 0px 0px 0px 1px ${theme.vars.palette.border.main}`
+    };
+    return {
+      // Configuración general
+      display: "flex",
+      flexWrap: "nowrap",
+      alignItems: "center",
+      gap: theme.vars.size.baseSpacings.sp1,
+      padding: `0px ${theme.vars.size.baseSpacings.sp2}`,
+      borderRadius: theme.vars.size.borderRadius["r1-5"],
+      maxWidth: "200px",
+      minWidth: "0",
+      flexShrink: 0,
+      border: "unset!important",
+      // Tamaño de altura
+      ...getSizeStyles(
+        theme,
+        ownerState?.size || "medium",
+        "action",
+        (size) => {
+          return {
+            height: "auto!important",
+            minHeight: size
+          };
+        }
+      ),
+      // Variante Contained
       ...ownerState?.variant === "contained" && {
-        backgroundColor: ownerState?.paletteColor?.enabled
-      }
-    },
-    ...ownerState?.variant === "contained" && {
-      backgroundColor: ownerState?.paletteColor?.enabled,
-      "&:hover": {
-        backgroundColor: ownerState?.paletteColor?.hover
+        backgroundColor: ownerState?.paletteColor?.enabled,
+        boxShadow: "unset",
+        // Color del texto
+        [`&&& .${BUTTON_CLASSES.textButton}`]: {
+          color: ownerState?.paletteColor?.contrastText
+        },
+        // Color de los adornos laterales
+        "&&& .M4LIcon-icon": {
+          backgroundColor: ownerState?.paletteColor?.contrastText
+        },
+        // Estado Hover
+        "&:hover": {
+          backgroundColor: ownerState?.paletteColor?.hover,
+          boxShadow: "unset"
+        },
+        // Estado Active
+        "&:active": {
+          backgroundColor: ownerState?.paletteColor?.activeOpacity,
+          boxShadow: "unset"
+        },
+        // Estado focus visible
+        "&:focus-visible": {
+          backgroundColor: ownerState?.paletteColor?.activeOpacity,
+          ...selectionEffect
+        }
       },
-      "&:active": {
-        boxShadow: "none",
-        backgroundColor: ownerState?.paletteColor?.active
-      }
-    },
-    ...ownerState?.variant === "outlined" && {
-      borderColor: ownerState?.paletteColor?.enabled,
-      "&&& .M4LIcon-icon": {
-        backgroundColor: ownerState?.paletteColor?.semanticText
-      }
-    },
-    ...ownerState?.variant === "text" && {
-      color: ownerState?.paletteColor?.semanticText,
-      borderColor: ownerState?.paletteColor?.enabled,
-      "&&& .M4LIcon-icon": {
-        backgroundColor: ownerState?.paletteColor?.semanticText
-      }
-    },
-    "& span": {
-      margin: "0px"
-    },
-    ...getSizeStyles(
-      theme,
-      ownerState?.size || "medium",
-      "action",
-      (size) => {
-        return {
-          height: "auto!important",
-          minHeight: size
-        };
+      // Variante Outlined
+      ...ownerState?.variant === "outlined" && {
+        "&&&": {
+          // Borde
+          ...ownerState?.color === "default" ? {
+            outline: `1px solid ${theme.vars.palette.border.default}`,
+            outlineOffset: "-1px"
+          } : {
+            outline: `1px solid ${ownerState?.paletteColor?.enabled}`,
+            outlineOffset: "-1px"
+          },
+          // Color del texto
+          [`& .${BUTTON_CLASSES.textButton}`]: {
+            ...ownerState?.color === "default" ? {
+              color: theme.vars.palette.text.primary
+            } : {
+              color: ownerState?.paletteColor?.semanticText
+            }
+          },
+          // Color de los adornos laterales
+          "& .M4LIcon-icon": {
+            backgroundColor: ownerState?.paletteColor?.semanticText
+          },
+          // Estado Hover
+          "&:hover": {
+            backgroundColor: ownerState?.paletteColor?.hoverOpacity,
+            outline: `1px solid ${ownerState?.paletteColor?.hover}`,
+            outlineOffset: "-1px",
+            boxShadow: "unset"
+          }
+        },
+        // Estado Active
+        "&&&:active": {
+          backgroundColor: ownerState?.paletteColor?.activeOpacity,
+          outline: `1px solid ${ownerState?.paletteColor?.active}`,
+          outlineOffset: "-1px"
+        },
+        // Estado focus visible
+        "&:focus-visible": {
+          backgroundColor: ownerState?.paletteColor?.activeOpacity,
+          outline: "unset!important",
+          //efecto de selección
+          ...selectionEffect
+        }
+      },
+      // Variante Text
+      ...ownerState?.variant === "text" && {
+        "&&&": {
+          backgroundColor: "unset",
+          outline: "unset",
+          // Color del texto
+          [`& .${BUTTON_CLASSES.textButton}`]: {
+            color: ownerState?.paletteColor?.semanticText
+          },
+          // Color de los adornos laterales
+          "& .M4LIcon-icon": {
+            backgroundColor: ownerState?.paletteColor?.semanticText
+          },
+          // Estado Hover
+          "&:hover": {
+            backgroundColor: ownerState?.paletteColor?.hoverOpacity,
+            boxShadow: "unset"
+          },
+          // Estado Active
+          "&:active": {
+            backgroundColor: ownerState?.paletteColor?.activeOpacity
+          },
+          // Estado focus visible
+          "&:focus-visible": {
+            backgroundColor: ownerState?.paletteColor?.activeOpacity,
+            //efecto de selección
+            ...selectionEffect
+          }
+        }
+      },
+      // Estado deshabilitado
+      "&:disabled": {
+        "&&&": {
+          backgroundColor: "unset",
+          // Color del texto
+          [`& .${BUTTON_CLASSES.textButton}`]: {
+            color: theme.vars.palette.text.disabled
+          },
+          // Color de los adornos laterales
+          "& .M4LIcon-icon": {
+            backgroundColor: theme.vars.palette.text.disabled
+          }
+        }
+      },
+      // Overrides
+      "& span": {
+        margin: "0px"
+      },
+      // Configuración de achura completa
+      ...ownerState?.fullWidth && {
+        width: "100%",
+        maxWidth: "unset",
+        minWidth: "unset"
       }
-    ),
-    ...ownerState?.fullWidth && {
-      width: "100%",
-      maxWidth: "unset",
-      minWidth: "unset"
-    }
-  }),
+    };
+  },
   /**
    * Styles for the text of the button component.
    */
@@ -99,15 +181,6 @@ const buttonStyles = {
       display: "block",
       overflow: "hidden",
       textOverflow: "ellipsis"
-    },
-    ...ownerState.variant === "contained" && {
-      color: ownerState.color === "default" ? ownerState.paletteColor?.semanticText : ownerState.paletteColor?.contrastText
-    },
-    ...(ownerState?.variant === "outlined" || ownerState?.variant === "text") && {
-      color: ownerState?.paletteColor?.semanticText
-    },
-    ...ownerState?.disabled && {
-      color: theme.vars.palette.text.disabled
     }
   }),
   /**

package/components/mui_extended/Button/{constans.d.ts → constants.d.ts}

@@ -6,3 +6,4 @@
  * @default 'M4LButton'
  */
 export declare const BUTTON_KEY_COMPONENT = "M4LButton";
+export declare const BUTTON_CLASSES: Record<"buttonRoot" | "skeletonButton" | "buttonIcon" | "textButton", string>;

package/components/mui_extended/Button/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { B as ButtonSlots } from "./slots/ButtonEnum.js";
+const BUTTON_KEY_COMPONENT = "M4LButton";
+const BUTTON_CLASSES = getComponentClasses(BUTTON_KEY_COMPONENT, ButtonSlots);
+export {
+  BUTTON_CLASSES as B,
+  BUTTON_KEY_COMPONENT as a
+};

package/components/mui_extended/Button/slots/ButtonSlots.js

@@ -1,7 +1,7 @@
 import { Button } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { b as buttonStyles } from "../ButtonStyles.js";
-import { B as BUTTON_KEY_COMPONENT } from "../constans.js";
+import { a as BUTTON_KEY_COMPONENT } from "../constants.js";
 import { B as ButtonSlots } from "./ButtonEnum.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { T as Typography } from "../../Typography/Typography.js";

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

@@ -1,6 +1,6 @@
 import { ButtonProps as MUIButtonProps, PaletteColor, Theme } from '@mui/material';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
-import { BUTTON_KEY_COMPONENT } from './constans';
+import { BUTTON_KEY_COMPONENT } from './constants';
 import { ButtonSlots } from './slots/ButtonEnum';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { ReactNode } from 'react';

package/components/mui_extended/IconButton/constants.d.ts

@@ -2,4 +2,4 @@ export declare const ICON_BUTTON_KEY_COMPONENT = "M4LIconButton";
 /**
  * Inventario de clases CSS para el componente TextField
  */
-export declare const ICON_BUTTON_CLASSES: Record<string, string>;
+export declare const ICON_BUTTON_CLASSES: Record<"text" | "selected" | "contained" | "skeleton" | "icon" | "outline" | "styledMUIIconButton" | "badgeIconButton", string>;

package/components/mui_extended/IconButton/constants.js

@@ -2,7 +2,10 @@ import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js
 import { I as IconButtonSlots } from "./slots/IconButtonEnum.js";
 const ICON_BUTTON_KEY_COMPONENT = "M4LIconButton";
 const IconButtonComplementaryClasses = {
-  selected: "selected"
+  selected: "selected",
+  contained: "contained",
+  outline: "outline",
+  text: "text"
 };
 const IconButtonCombineClasses = {
   ...IconButtonSlots,