@m4l/components 9.1.119 → 9.1.121

package/.storybook/utils/getStylesColorsByMode.d.ts

@@ -25,11 +25,11 @@ export declare const colorsLight: {
         readonly selected: string;
         readonly selectedOpacity: string;
         readonly focusVisible: string;
-        readonly contrastText: string;
         readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
+        readonly contrastText: string;
         readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
@@ -180,11 +180,11 @@ export declare const colorsLight: {
         readonly selected: string;
         readonly selectedOpacity: string;
         readonly focusVisible: string;
-        readonly contrastText: string;
         readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
+        readonly contrastText: string;
         readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
@@ -336,11 +336,11 @@ export declare const colorsDark: {
         readonly selected: string;
         readonly selectedOpacity: string;
         readonly focusVisible: string;
-        readonly contrastText: string;
         readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
+        readonly contrastText: string;
         readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;
@@ -491,11 +491,11 @@ export declare const colorsDark: {
         readonly selected: string;
         readonly selectedOpacity: string;
         readonly focusVisible: string;
-        readonly contrastText: string;
         readonly focus: string;
         readonly light: string;
         readonly dark: string;
         readonly main: string;
+        readonly contrastText: string;
         readonly enabled: string;
         readonly enabledOpacity: string;
         readonly hover: string;

package/components/Chip/Chip.js

@@ -19,6 +19,7 @@ const Chip = forwardRef((props, ref) => {
     hasIconClose = true,
     onClick,
     onDeleted,
+    iconButtonProps,
     className,
     ...others
   } = props;
@@ -27,12 +28,17 @@ const Chip = forwardRef((props, ref) => {
   const { host_static_assets, environment_assets } = useEnvironment();
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const ownerState = {
-    chipSize: adjustedSize,
+    interactive: !!onClick,
+    size: adjustedSize,
     variant,
     color,
     opacity,
     externalColor
   };
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    onDeleted?.(e);
+  };
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(
       SkeletonChipStyled,
@@ -63,10 +69,6 @@ const Chip = forwardRef((props, ref) => {
       );
     }
   };
-  const handleDelete = (e) => {
-    e.stopPropagation();
-    onDeleted?.(e);
-  };
   return /* @__PURE__ */ jsxs(
     ChipRootStyled,
     {
@@ -85,6 +87,7 @@ const Chip = forwardRef((props, ref) => {
         hasIconClose && /* @__PURE__ */ jsx(
           IconButtonStyled,
           {
+            ...iconButtonProps,
             src: iconClose,
             size: adjustedSize,
             ownerState: { ...ownerState },

package/components/Chip/ChipStyles.js

@@ -25,27 +25,30 @@ const chipStyles = {
       },
       ...getHeightSizeStyles(
         theme.generalSettings.isMobile,
-        ownerState.chipSize || "medium",
+        ownerState.size || "medium",
         "base"
       ),
-      "&:hover": {
-        backgroundColor: bgHover
-      },
-      "&:active": {
-        backgroundColor: bgActive
-        // '& .M4LIcon-icon': {
-        //   backgroundColor: color,
-        // },
+      //TODO: OJO no OLVIDAR interactive ************ JUAN
+      ...ownerState.interactive && {
+        "&:hover": {
+          backgroundColor: bgHover
+        },
+        "&:active": {
+          backgroundColor: bgActive
+          // '& .M4LIcon-icon': {
+          //   backgroundColor: color,
+          // },
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: `${theme.vars.size.borderStroke.container} ${theme.vars.palette.border.main}`,
+          backgroundColor: bgActive
+        }
       },
       ...ownerState.variant === "outlined" && {
         border: `${theme.vars.size.borderStroke.container}`,
         borderColor: bgColor
       },
-      "&:focus-visible": {
-        boxShadow: "none",
-        outline: `${theme.vars.size.borderStroke.container} ${theme.vars.palette.border.main}`,
-        backgroundColor: bgActive
-      },
       variants: []
     };
   },
@@ -66,7 +69,7 @@ const chipStyles = {
    */
   iconButton: ({ theme, ownerState }) => ({
     // Estilos específicos para el tamaño small
-    ...ownerState.chipSize === "small" && {
+    ...ownerState.size === "small" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.small.base,
         width: theme.vars.size.mobile.small.base,
@@ -78,7 +81,7 @@ const chipStyles = {
       }
     },
     // Estilos específicos para el tamaño medium
-    ...ownerState.chipSize === "medium" && {
+    ...ownerState.size === "medium" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.medium.base,
         width: theme.vars.size.mobile.medium.base,
@@ -97,7 +100,7 @@ const chipStyles = {
     width: "100%",
     background: theme.vars.palette.skeleton.transition,
     // Estilos específicos para el tamaño small
-    ...ownerState.chipSize === "small" && {
+    ...ownerState.size === "small" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.small.base,
         minHeight: theme.vars.size.mobile.small.base
@@ -107,7 +110,7 @@ const chipStyles = {
       }
     },
     // Estilos específicos para el tamaño medium
-    ...ownerState.chipSize === "medium" && {
+    ...ownerState.size === "medium" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.medium.base,
         minHeight: theme.vars.size.mobile.medium.base

package/components/Chip/slots/ChipSlots.d.ts

@@ -1,16 +1,16 @@
-declare const ChipRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').ChipOwnerState> & Record<string, unknown> & {
+declare const ChipRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').ChipOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-declare const SkeletonChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').ChipOwnerState> & Record<string, unknown> & {
+declare const SkeletonChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').ChipOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').ChipOwnerState> & Record<string, unknown> & {
+declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').ChipOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-declare const TextChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').ChipOwnerState> & Record<string, unknown> & {
+declare const TextChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').ChipOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "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" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('..').ChipOwnerState> & Record<string, unknown> & {
+declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "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" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').ChipOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 export { ChipRootStyled, SkeletonChipStyled, IconStyled, TextChipStyled, IconButtonStyled };

package/components/Chip/types.d.ts

@@ -1,9 +1,10 @@
 import { ChipColor, ComponentPalletColor, Sizes } from '@m4l/styles';
-import { Theme } from '@mui/material';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Theme } from '@mui/material/styles';
 import { EventHandler, ReactNode } from 'react';
 import { CHIP_KEY_COMPONENT } from './constants';
 import { ChipSlots } from './slots';
+import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
 type ChipVariants = 'contained' | 'outlined';
 /**
  * Propiedades del componente `Chip`.
@@ -53,6 +54,10 @@ export interface ChipProps {
      * Function to be executed when the `Chip` is clicked.
      */
     onClick?: () => void;
+    /**
+     * Props for the close icon button.
+     */
+    iconButtonProps?: Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled' | 'src'>;
     /**
      * Function to be executed when the `Chip` is deleted.
      */
@@ -61,14 +66,16 @@ export interface ChipProps {
      * Class name for the `Chip`.
      */
     className?: string;
+    /**
+     * Focusable `Chip`.
+     */
+    focusable?: boolean;
 }
 /**
  * Owner state of the `Chip` used to define internal style and behavior properties.
  */
-export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'externalColor'> {
-    opacity?: boolean;
-    chipSize: ChipProps['size'];
-    color: Exclude<ComponentPalletColor, 'primary'> | 'forest' | 'disabled';
+export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'externalColor' | 'opacity' | 'size' | 'color'> {
+    interactive: boolean;
 }
 /**
  * Defines the types of Slots available for the `Chip`.
@@ -77,5 +84,5 @@ export type ChipSlotsType = keyof typeof ChipSlots;
 /**
  * Styles applicable to the `Chip` using themes and custom slots.
  */
-export type ChipStyles = OverridesStyleRules<ChipSlotsType, typeof CHIP_KEY_COMPONENT, Theme>;
+export type ChipStyles = M4LOverridesStyleRules<ChipSlotsType, typeof CHIP_KEY_COMPONENT, Theme>;
 export {};

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -96,13 +96,12 @@ function DataGridProvider(props) {
     rows,
     rowsCount,
     rowActionsGetter,
-    rowHeights = [28, 32, 36],
-    rowHeaderHeights = [28, 32, 36],
+    rowHeights = [28, 32, 40],
+    rowHeaderHeights = [28, 32, 40],
     initialRowHeightVariant = "compact",
     checkedRows,
     onCheckedRowsChange,
-    rowKeyGetter,
-    classes
+    rowKeyGetter
   } = props;
   const [columnsWidths, setColumnsWidths] = useState(
     /* @__PURE__ */ new Map()
@@ -215,7 +214,6 @@ function DataGridProvider(props) {
         onChangeColumnWidth,
         setRowsCount: setRowFilterCountInternal,
         rowActionsGetter,
-        classes,
         setRowHeightVariant: setCurrentRowHeightInternal,
         onCheckedRowsChange,
         rowKeyGetter

package/components/DataGrid/contexts/DataGridContext/types.d.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { Maybe } from '@m4l/core';
 import { RowKey, RowHeightVariants, GridProps } from '../../types';
-import { Classes } from '../../classes/types';
 export interface IConfigColumn {
     key: string;
     visible: boolean;
@@ -22,14 +21,13 @@ export interface DataGridProviderProps<TRow, TSummaryRow, TKey extends RowKey =
     children: ReactNode;
     remoteConfig?: IGridConfig;
     rowsCount: number;
-    classes: Classes;
 }
 export type RowHeightState = {
     rowHVariant: RowHeightVariants;
     rowHeight: number;
     rowHeaderHeight: number;
 };
-export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends IGridConfig, Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter' | 'classes'> {
+export interface DataGridContextProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> extends IGridConfig, Pick<DataGridProviderProps<TRow, TSummaryRow, TKey>, 'rows' | 'checkedRows' | 'onCheckedRowsChange' | 'rowHeights' | 'rowsCount' | 'rowActionsGetter' | 'rowKeyGetter'> {
     setRowsCount: (newRowsCount: number) => void;
     currentRowHeaderHeight: number;
     currentRowHeight: number;

package/components/DataGrid/contexts/FilterContext/index.d.ts

@@ -6,7 +6,7 @@ type FilterProviderProps = {
     initialActiveFilters: boolean;
 };
 /**
- * TODO: Documentar
+ * Proveedor de contexto para los filtros de la tabla
  */
 declare function FilterProvider({ children, initialActiveFilters }: FilterProviderProps): import("react/jsx-runtime").JSX.Element;
 export { FilterProvider, FilterContext };

package/components/DataGrid/dictionary.d.ts

@@ -6,4 +6,22 @@ export declare const dictionary: {
     LABEL_ACTIONS: string;
     LABEL_ROWS_PER_PAGE: string;
     LABEL_OF: string;
+    DENSITY_COMPACT: string;
+    DENSITY_STANDARD: string;
+    DENSITY_CONFORTABLE: string;
+    DENSITY_TOOLTIP: string;
+    TOOLTIP_FILTER_HIDE: string;
+    TOOLTIP_FILTER_SHOW: string;
+    SETTINGS_COLUMN_NAME: string;
+    SETTINGS_COLUMN_POSITION: string;
+    SETTINGS_COLUMN_VISIBLE: string;
+    SETTINGS_COLUMNS_FROZEN: string;
+    SETTINGS_SEL_COLUMNS: string;
+    SETTINGS_MOVE_FIRST: string;
+    SETTINGS_MOVE_UP: string;
+    SETTINGS_MOVE_LAST: string;
+    SETTINGS_MOVE_DOWN: string;
+    SETTINGS_VISIBLE_ALL: string;
+    SETTINGS_NO_VISIBLE_ALL: string;
+    SETTINGS_RESTORE: string;
 };

package/components/DataGrid/dictionary.js

@@ -6,7 +6,25 @@ function getDataGridComponentsDictionary() {
 const dictionary = {
   LABEL_ACTIONS: "actions",
   LABEL_ROWS_PER_PAGE: "pager.rows_per_page",
-  LABEL_OF: "pager.of"
+  LABEL_OF: "pager.of",
+  DENSITY_COMPACT: `${getDataGridComponentsDictionary()[0]}.density_compact`,
+  DENSITY_STANDARD: `${getDataGridComponentsDictionary()[0]}.density_standard`,
+  DENSITY_CONFORTABLE: `${getDataGridComponentsDictionary()[0]}.density_confortable`,
+  DENSITY_TOOLTIP: `${getDataGridComponentsDictionary()[0]}.tooltip_density`,
+  TOOLTIP_FILTER_HIDE: `${getDataGridComponentsDictionary()[0]}.tooltip_filter_hide`,
+  TOOLTIP_FILTER_SHOW: `${getDataGridComponentsDictionary()[0]}.tooltip_filter_show`,
+  SETTINGS_COLUMN_NAME: `${getDataGridComponentsDictionary()[0]}.settings_column_name`,
+  SETTINGS_COLUMN_POSITION: `${getDataGridComponentsDictionary()[0]}.settings_column_position`,
+  SETTINGS_COLUMN_VISIBLE: `${getDataGridComponentsDictionary()[0]}.settings_column_visible`,
+  SETTINGS_COLUMNS_FROZEN: `${getDataGridComponentsDictionary()[0]}.settings_column_frozen`,
+  SETTINGS_SEL_COLUMNS: `${getDataGridComponentsDictionary()[0]}.settings_sel_columns`,
+  SETTINGS_MOVE_FIRST: `${getDataGridComponentsDictionary()[0]}.settings_move_first`,
+  SETTINGS_MOVE_UP: `${getDataGridComponentsDictionary()[0]}.settings_move_up`,
+  SETTINGS_MOVE_LAST: `${getDataGridComponentsDictionary()[0]}.settings_move_last`,
+  SETTINGS_MOVE_DOWN: `${getDataGridComponentsDictionary()[0]}.settings_move_down`,
+  SETTINGS_VISIBLE_ALL: `${getDataGridComponentsDictionary()[0]}.settings_visible_all`,
+  SETTINGS_NO_VISIBLE_ALL: `${getDataGridComponentsDictionary()[0]}.settings_no_visible_all`,
+  SETTINGS_RESTORE: `${getDataGridComponentsDictionary()[0]}.settings_restore`
 };
 export {
   dictionary as d,

package/components/DataGrid/formatters/ColumnBooleanFormatter/index.d.ts

@@ -1,5 +1,5 @@
 import { ColumnBooleanFormatterProps } from './types';
 /**
- * TODO: Documentar
+ * Función para formatear un booleano en una columna de un DataGrid
  */
 export declare function ColumnBooleanFormatter(props: ColumnBooleanFormatterProps): (obProps: any) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnConcatenatedValueFormatter/index.js

@@ -8,7 +8,7 @@ function ColumnConcatenatedValueFormatter(props) {
       const valueMaybeString = getPropertyByString(obProps, element);
       let fixedValue;
       if (typeof valueMaybeString === "string" || typeof valueMaybeString === "number") {
-        fixedValue = valueMaybeString;
+        fixedValue = valueMaybeString.toString();
       } else {
         fixedValue = "";
       }

package/components/DataGrid/formatters/ColumnDateFormatter/index.d.ts

@@ -1,5 +1,5 @@
 import { ColumnDateFormatterProps } from './types';
 /**
- * TODO: Documentar
+ * Función para formatear una fecha en una columna de un DataGrid
  */
 export declare function ColumnDateFormatter(props: ColumnDateFormatterProps): (obProps: any) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnIconFormatter/index.d.ts

@@ -1,5 +1,5 @@
 import { ColumnIconFormatterProps } from './types';
 /**
- * TODO: Documentar
+ * Función para formatear un icono en una columna de un DataGrid
  */
 export declare function ColumnIconFormatter(props: ColumnIconFormatterProps): (obProps: any) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/formatters/ColumnIconFormatter/index.js

@@ -1,11 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { d as dataGridClasses } from "../../classes/index.js";
 import { I as Icon } from "../../../Icon/Icon.js";
 function ColumnIconFormatter(props) {
   const { getIconUrl } = props;
   return (obProps) => {
     const { iconUrl } = getIconUrl(obProps);
-    return /* @__PURE__ */ jsx("div", { className: dataGridClasses.iconFormatter, children: /* @__PURE__ */ jsx(Icon, { src: iconUrl }) });
+    return /* @__PURE__ */ jsx(Icon, { src: iconUrl });
   };
 }
 export {

package/components/DataGrid/formatters/ColumnInteractiveCheckFormatter/index.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { Checkbox } from "@mui/material";
-import { d as dataGridClasses } from "../../classes/index.js";
 function ColumnInteractiveCheckFormatter(props) {
   const { row, onRowChange, column } = props;
   const handleChange = () => {
@@ -13,8 +12,7 @@ function ColumnInteractiveCheckFormatter(props) {
     {
       size: "small",
       checked: row[column.key] || false,
-      onChange: handleChange,
-      className: dataGridClasses.formatterColumn
+      onChange: handleChange
     }
   );
 }

package/components/DataGrid/formatters/ColumnSetCheckFormatter/index.d.ts

@@ -6,7 +6,4 @@ import { RowKey } from '../../types';
  * acualizando un Set/Setter por medio de un hook generico el cual es invocado con el argumento field para ,
  * sin la necesidad de entrar en edición como lo hace un editor
  */
-/**
- * TODO: Documentar
- */
 export declare function ColumnSetCheckFormatter<Row, TKey extends RowKey = RowKey>(parameters: ColumnSetCheckFormatterProps<Row, TKey>): (props: FormatterProps<Row>) => import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/hooks/useDataGrid.d.ts

@@ -1,6 +1,7 @@
 import { DataGridContextProps } from '../contexts/DataGridContext/types';
 /**
- * TODO: Documentar
+ * Hook para obtener el contexto de DataGrid
+ * @returns DataGridContextProps
  */
 export declare function useDataGrid<TRow, TSummaryRow>(): DataGridContextProps<TRow, TSummaryRow>;
 export default useDataGrid;

package/components/DataGrid/icons.d.ts

@@ -0,0 +1,15 @@
+export declare const pathIcons: {
+    compact: string;
+    standard: string;
+    confortable: string;
+    filter: string;
+    configuration: string;
+    menu: string;
+    moveFirstPlace: string;
+    moveUpPlace: string;
+    moveLastPlace: string;
+    moveDownPlace: string;
+    checkAll: string;
+    uncheckAll: string;
+    restoreColumns: string;
+};

package/components/DataGrid/icons.js

@@ -0,0 +1,18 @@
+const pathIcons = {
+  compact: "frontend/components/data_grid/assets/icons/compact.svg",
+  standard: "frontend/components/data_grid/assets/icons/standard.svg",
+  confortable: "frontend/components/data_grid/assets/icons/confortable.svg",
+  filter: "frontend/components/data_grid/assets/icons/filter.svg",
+  configuration: "frontend/components/data_grid/assets/icons/configuration.svg",
+  menu: "frontend/components/data_grid/assets/icons/menu.svg",
+  moveFirstPlace: "frontend/components/data_grid/assets/icons/move_first_place.svg",
+  moveUpPlace: "frontend/components/data_grid/assets/icons/move_up_place.svg",
+  moveLastPlace: "frontend/components/data_grid/assets/icons/move_last_place.svg",
+  moveDownPlace: "frontend/components/data_grid/assets/icons/move_down_place.svg",
+  checkAll: "frontend/components/data_grid/assets/icons/check_all.svg",
+  uncheckAll: "frontend/components/data_grid/assets/icons/uncheck_all.svg",
+  restoreColumns: "frontend/components/data_grid/assets/icons/restore_columns.svg"
+};
+export {
+  pathIcons as p
+};

package/components/DataGrid/index.d.ts

@@ -1,5 +1,9 @@
 import { DataGridProps, RowKey } from './types';
 /**
- * TODO: Documentar
+ * DataGrid es un componente encargado de mostrar información en una tabla
+ * con funcionalidades de paginación, filtros y acciones.
+ * ### Dependencies:
+ * - **`useResponsiveContainerStore:`** Hook que permite obtener el tamaño del contenedor.
+ * - **`useModuleDictionary:`** Hook que permite manejar la internacionalización de los textos.
  */
 export declare function DataGrid<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: DataGridProps<TRow, TSummaryRow, TKey>): import("react/jsx-runtime").JSX.Element;

package/components/DataGrid/index.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { D as DataGridRoot } from "./styles.js";
 import { T as Table } from "./subcomponents/Table/index.js";
 import { A as Actions } from "./subcomponents/Actions/index.js";
 import { a as FilterProvider } from "./contexts/FilterContext/index.js";
 import { a as DataGridProvider } from "./contexts/DataGridContext/index.js";
 import { T as TEST_PROP_COLUMNS } from "./types.js";
-import { a as dataGridUtilityClasses } from "./classes/index.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
 import { a as getNameDataTestId } from "../../test/getNameDataTestId.js";
 import { D as DATAGRID_PREFIX_NAME } from "./constants.js";
+import { D as DataGridRootStyled } from "./slots/DataGridSlot.js";
+import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 function DataGrid(props) {
   const {
     id,
@@ -28,15 +28,11 @@ function DataGrid(props) {
     onCheckedRowsChange,
     dataTestId = ""
   } = props;
-  const ownerState = {
-    actionsProps,
-    withActions
-  };
-  const classes = dataGridUtilityClasses(ownerState);
+  const classRoot = getComponentSlotRoot(DATAGRID_PREFIX_NAME);
   return /* @__PURE__ */ jsx(
-    DataGridRoot,
+    DataGridRootStyled,
     {
-      className: classes.root,
+      className: classRoot,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_COLUMNS]: JSON.stringify(columns),
         [TEST_PROP_ID]: getNameDataTestId(DATAGRID_PREFIX_NAME, "root", dataTestId)
@@ -55,7 +51,6 @@ function DataGrid(props) {
           onCheckedRowsChange,
           rowKeyGetter,
           rows,
-          classes,
           children: /* @__PURE__ */ jsxs(FilterProvider, { initialActiveFilters: false, children: [
             withActions && actionsProps && /* @__PURE__ */ jsx(
               Actions,

package/components/DataGrid/slots/DataGridEnum.d.ts

@@ -0,0 +1,30 @@
+export declare enum DataGridSlots {
+    datagridRoot = "datagridRoot"
+}
+export declare enum ActionsSlots {
+    actionsRoot = "actionsRoot",
+    actionsConfigContainer = "actionsConfigContainer"
+}
+export declare enum RowsCountSlots {
+    rowsCountRoot = "rowsCountRoot",
+    rowsCountLabel = "rowsCountLabel",
+    rowsCountValue = "rowsCountValue"
+}
+export declare enum TableSlots {
+    tableContaniner = "tableContaniner",
+    tableWrapperDataGrid = "tableWrapperDataGrid",
+    draggableHeaderRoot = "draggableHeaderRoot",
+    draggableWrapperInputBase = "draggableWrapperInputBase",
+    headerInputBase = "headerInputBase",
+    wrapperSkeleton = "wrapperSkeleton",
+    contentModalSetting = "contentModalSetting"
+}
+export declare enum TextEditorSlots {
+    inputTexEditor = "inputTexEditor"
+}
+export declare enum ColumnsConfigSlots {
+    columnsConfigWrapper = "columnsConfigWrapper",
+    columnsConfigSelColumns = "columnsConfigSelColumns",
+    columnsConfigDataGrid = "columnsConfigDataGrid",
+    columnsConfigActios = "columnsConfigActios"
+}