@m4l/components 9.3.25 → 9.3.27-BE071125-beta.1

package/components/mui_extended/Button/ButtonStyles.js

@@ -1,84 +1,176 @@
 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.primary.focusVisible}`
+    };
+    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}`]: {
+          ...ownerState?.color === "default" && {
+            color: theme.vars.palette.text.primary
+          },
+          ...ownerState?.color !== "default" && {
+            color: ownerState?.paletteColor?.contrastText
+          }
+        },
+        // Color de los adornos laterales
+        "&&& .M4LIcon-icon": {
+          ...ownerState?.color === "default" && {
+            backgroundColor: theme.vars.palette.text.primary
+          },
+          ...ownerState?.color !== "default" && {
+            backgroundColor: ownerState?.paletteColor?.contrastText
+          }
+        },
+        // Estado Hover
+        "&:hover": {
+          backgroundColor: ownerState?.paletteColor?.hover,
+          boxShadow: "unset"
+        },
+        // Estado Active
+        "&:active": {
+          backgroundColor: ownerState?.paletteColor?.active,
+          boxShadow: "unset"
+        },
+        // Estado focus visible
+        "&:focus-visible": {
+          backgroundColor: ownerState?.paletteColor?.active,
+          ...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 +191,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/CheckBox/CheckBox.js

@@ -64,6 +64,7 @@ const CheckBox = forwardRef((props, ref) => {
         ownerState: { ...ownerState },
         size: adjustedSize,
         disabled,
+        ellipsis: true,
         children: inlineText
       }
     )

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

@@ -17,7 +17,7 @@ export interface CircularProgressProps extends Omit<MUICircularProgressProps, 'c
      * Este debe ser un valor de la paleta de colores personalizada (`ComponentPalletColor`),
      * restringido actualmente al color `primary`.
      */
-    color?: Extract<ComponentPalletColor, 'primary'>;
+    color?: ComponentPalletColor;
     /**
      * Tamaño del componente.
      * Solo se aceptan los valores `small` y `medium`, que representan tamaños predefinidos.

package/components/mui_extended/DateTimePicker/slots/DateTimePickerSlots.d.ts

@@ -15,7 +15,7 @@ export declare const PaperStyled: import('@emotion/styled').StyledComponent<Pick
 export declare const PickersCalendarHeaderStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/x-date-pickers').PickersCalendarHeaderProps<unknown> & import('react').RefAttributes<HTMLButtonElement>, keyof import('react').RefAttributes<HTMLButtonElement> | keyof import('@mui/x-date-pickers').PickersCalendarHeaderProps<unknown>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').DateTimePickerOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
-export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "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" | "exportparts" | "part" | "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" | "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" | "instaceDataTestId" | "placement" | "rotationAngle" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "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" | "exportparts" | "part" | "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" | "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" | "instaceDataTestId" | "placement" | "rotationAngle" | "ariaLabel" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').DateTimePickerOwnerState> & Record<string, unknown>) | undefined;
 }, {}, {}>;
 export declare const PickersDayStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/x-date-pickers').PickersDayProps<unknown> & import('react').RefAttributes<HTMLButtonElement>, "value" | "children" | "ref" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "translate" | "className" | "classes" | "sx" | "form" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "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" | "exportparts" | "part" | "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" | "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" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "day" | "disableHighlightToday" | "showDaysOutsideCurrentMonth" | "disableMargin" | "isAnimating" | "onDaySelect" | "outsideCurrentMonth" | "isFirstVisibleCell" | "isLastVisibleCell" | "today"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {

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,

package/components/mui_extended/MenuItem/MenuItem.js

@@ -69,7 +69,7 @@ const MenuItem = (props) => {
         "data-testid": "SkeletonMenuItem",
         width: skeletonWidth,
         ownerState: { ...ownerState },
-        className: MENUITEM_CLASSES.skeleton
+        className: MENUITEM_CLASSES.skeletonMenuItem
       }
     );
   }

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

@@ -17,6 +17,8 @@ const menuItemStyles = {
       paddingLeft: theme.vars.size.baseSpacings.sp4,
       paddingRight: theme.vars.size.baseSpacings.sp4,
       borderRadius: theme.vars.size.borderRadius.r0,
+      borderLeft: theme.vars.size.borderStroke.container,
+      borderLeftColor: "transparent",
       // Estilos base para el texto y el ícono
       "&&& .M4LTypography-root": {
         paddingLeft: theme.vars.size.baseSpacings.sp1,
@@ -46,10 +48,11 @@ const menuItemStyles = {
       //   outlineOffset: theme.vars.size.baseSpacings['sp0-5'],
       // },
       ...ownerState?.selected && {
-        borderLeft: theme.vars.size.borderStroke.container,
         borderLeftColor: paletteColor.enabled
       },
       "& .M4LImage-root": {
+        marginRight: 6,
+        marginLeft: 6,
         ...getHeightSizeStyles(
           theme.generalSettings.isMobile,
           ownerState?.size || "medium",

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

@@ -9,4 +9,4 @@ export declare const MENUITEM_KEY_COMPONENT = "M4LMenuItem";
 /**
  * Inventario de clases CSS para el componente MenuItem
  */
-export declare const MENUITEM_CLASSES: Record<string, string>;
+export declare const MENUITEM_CLASSES: Record<"root" | "menuItemIcon" | "menuItemIconChecked" | "menuItemContainer" | "skeletonMenuItem" | "menuItemTypography", string>;

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

@@ -11,4 +11,4 @@ export declare const NAV_LINK_SPECIFY = "M4lclassCssSpecificity";
 /**
  * Inventario de clases CSS para el componente Typography.
  */
-export declare const classNavLinkRoot: Record<string, string>;
+export declare const classNavLinkRoot: Record<"root" | "typographyStyled" | "skeletonStyled" | "routerNavLinkStyled", string>;