@m4l/components 9.3.12-BE010925-beta.1 → 9.3.12-BE090925-beta.1

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

@@ -73,6 +73,7 @@ export declare const colorsLight: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
@@ -277,6 +278,7 @@ export declare const colorsLight: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
@@ -482,6 +484,7 @@ export declare const colorsDark: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {
@@ -686,6 +689,7 @@ export declare const colorsDark: {
         readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
+        readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
         readonly primary: {
             readonly outlined: {

package/components/Card/helpers/getSizeSpacing.d.ts

@@ -1,8 +1,7 @@
 import { CardProps } from '../types';
-import { Theme } from '@mui/material';
 /**
  * Obtiene el tamaño del gap de la tarjeta.
- * @param spacing - El gap de la tarjeta.
+ * @param gap - El gap de la tarjeta.
  * @returns El tamaño del gap de la tarjeta.
  */
-export declare const getSizeSpacing: (spacing: CardProps["gap"] | number | undefined | null, theme: Theme) => string | number;
+export declare const getSizeSpacing: (gap: CardProps["gap"] | number | undefined | null) => number;

package/components/Card/types.d.ts

@@ -2,8 +2,6 @@ import { Theme } from '@mui/material';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
 import { CARD_KEY } from './constants';
 import { CardSlots } from './slots/CardEnum';
-import { Density } from '@m4l/styles';
-export type SpacingsCard = number | keyof Density;
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Contenido de la tarjeta.
@@ -16,11 +14,11 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Espacio entre los elementos de la tarjeta.
      */
-    gap?: SpacingsCard;
+    gap?: number | 'compact' | 'standard' | 'comfortable';
     /**
      * Espacio entre los elementos de la tarjeta.
      */
-    padding?: SpacingsCard;
+    padding?: number | 'compact' | 'standard' | 'comfortable';
     /**
      * Dirección de la tarjeta.
      */
@@ -49,9 +47,9 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 export type CardSlotsType = keyof typeof CardSlots;
 export type CardOwnerState = {
     variant: CardProps['variant'];
-    CardGap: CardProps['gap'];
+    gap: CardProps['gap'];
     height: CardProps['height'];
-    CardPadding: CardProps['padding'];
+    padding: CardProps['padding'];
     direction: CardProps['direction'];
     onClick: boolean;
     justifyContent: CardProps['justifyContent'];

package/components/MenuActions/MenuActions.js

@@ -4,9 +4,10 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
 import { P as Popover } from "../mui_extended/Popover/Popover.js";
 import { M as MenuItem } from "../mui_extended/MenuItem/MenuItem.js";
-import { I as ICON_PATH, a as ICONS, M as MENU_ACTIONS_ } from "./constants.js";
+import { I as ICON_PATH, a as ICONS, M as MENU_ACTIONS_, b as MENU_ACTIONS_CLASSES } from "./constants.js";
 import { a as getMenuActionsDictionary, D as DICTIONARY } from "./dictionary.js";
 import { M as MenuDivider } from "../mui_extended/MenuDivider/MenuDivider.js";
+import clsx from "clsx";
 import { M as MenuListStyled, a as MenuLoaderStyled, R as RootStyled, I as IconButtonStyled, H as HeaderMenuActionsStyled, F as FooterMenuActionsStyled } from "./slots/MenuActionsSlots.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/CircularProgress.js";
 function MenuActions(props) {
@@ -128,7 +129,7 @@ function MenuActions(props) {
       endListElement && endListElement
     ] });
   }, [menuActions, header, size, footer, endListElement, objItem, getLabel, actionKey, handleClick]);
-  return /* @__PURE__ */ jsxs(RootStyled, { className, ownerState: { ownerState }, children: [
+  return /* @__PURE__ */ jsxs(RootStyled, { className: clsx(className, MENU_ACTIONS_CLASSES.root, ownerState.selected && MENU_ACTIONS_CLASSES.selected), ownerState: { ownerState }, children: [
     /* @__PURE__ */ jsx(
       IconButtonStyled,
       {

package/components/MenuActions/MenuActions.styles.js

@@ -38,7 +38,7 @@ const menuActionsStyles = {
     "& active": {
       backgroundColor: theme.vars.palette[ownerState?.paletteColor ?? "default"].selectedOpacity
     },
-    '& [class*="M4LIcon-icon"]': {
+    "& .M4LIcon-icon": {
       backgroundColor: ownerState?.selected ? theme.vars.palette[ownerState?.paletteColor ?? "default"].selected : void 0
     }
   }),

package/components/MenuActions/constants.d.ts

@@ -20,3 +20,4 @@ export declare const MENU_ACTIONS_EMPTY = "menu_action_empty";
  * Prefijo de la clave que se utiliza cuando un ítem del menú está cargando en React.
  */
 export declare const MENU_ACTIONS_ = "menu_action_";
+export declare const MENU_ACTIONS_CLASSES: Record<string, string>;

package/components/MenuActions/constants.js

@@ -1,12 +1,23 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { M as MenuActionsSlots } from "./slots/MenuActionsEnum.js";
 const ICON_PATH = "frontend/components/menu_actions/assets/icons";
 const ICONS = {
   MENU: "menu.svg"
 };
 const MENU_ACTIONS_KEY_COMPONENT = "M4LMenuActions";
 const MENU_ACTIONS_ = "menu_action_";
+const MenuActionsComplementaryClasses = {
+  selected: "selected"
+};
+const MENU_ACTIONS_COMBINATE_CLASSES = {
+  ...MenuActionsSlots,
+  ...MenuActionsComplementaryClasses
+};
+const MENU_ACTIONS_CLASSES = getComponentClasses(MENU_ACTIONS_KEY_COMPONENT, MENU_ACTIONS_COMBINATE_CLASSES);
 export {
   ICON_PATH as I,
   MENU_ACTIONS_ as M,
   ICONS as a,
-  MENU_ACTIONS_KEY_COMPONENT as b
+  MENU_ACTIONS_CLASSES as b,
+  MENU_ACTIONS_KEY_COMPONENT as c
 };

package/components/MenuActions/slots/MenuActionsSlots.js

@@ -1,6 +1,6 @@
 import { MenuList } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { b as MENU_ACTIONS_KEY_COMPONENT } from "../constants.js";
+import { c as MENU_ACTIONS_KEY_COMPONENT } from "../constants.js";
 import { m as menuActionsStyles } from "../MenuActions.styles.js";
 import { M as MenuActionsSlots } from "./MenuActionsEnum.js";
 import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";

package/components/WindowBase/WindowBase.styles.js

@@ -291,7 +291,7 @@ const windowBaseStyles = {
           }
         }
       },
-      "&.MuiButtonBase-root:not(:hover, :active, :focus) .M4LIcon-root .M4LIcon-icon": {
+      "&.MuiButtonBase-root:not(:hover, :active, :focus, .M4LIconButton-selected) .M4LIcon-root .M4LIcon-icon": {
         backgroundColor: `${theme.vars.palette.text.disabled} !important`
       }
     },

package/components/index.d.ts

@@ -4,7 +4,6 @@ export * from './AppBar';
 export * from './AppBar/AppBar';
 export * from './areas';
 export * from './BaseModule';
-export * from './Card';
 export * from './Chip';
 export * from './commercial';
 export * from './CommonActions/';

package/components/mui_extended/Badge/Badge.styles.js

@@ -24,11 +24,13 @@ const badgeStyles = {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.baseSpacings.sp5,
         width: ownerState?.displayBadgeContent ? "26px" : theme.vars.size.baseSpacings.sp5,
-        right: ownerState?.displayBadgeContent ? 4 : 0
+        right: ownerState?.displayBadgeContent ? 0 : 2,
+        top: ownerState?.displayBadgeContent ? 0 : 2
       } : {
         height: theme.vars.size.baseSpacings["sp3-5"],
         width: ownerState?.displayBadgeContent ? "23px" : theme.vars.size.baseSpacings["sp3-5"],
-        right: ownerState?.displayBadgeContent ? 4 : 0
+        right: ownerState?.displayBadgeContent ? 0 : 2,
+        top: ownerState?.displayBadgeContent ? 0 : 2
       },
       // Estilos para variantes
       ...ownerState?.BadgeVariant === "dot" && {

package/components/mui_extended/IconButton/IconButton.js

@@ -88,7 +88,12 @@ const IconButton = forwardRef((props, ref) => {
           color,
           role: "button",
           ...other,
-          className: clsx(ICON_BUTTON_CLASSES[variant], ICON_BUTTON_CLASSES.styledMUIIconButton, className),
+          className: clsx(
+            ICON_BUTTON_CLASSES[variant],
+            ICON_BUTTON_CLASSES.styledMUIIconButton,
+            selected && ICON_BUTTON_CLASSES.selected,
+            className
+          ),
           children: renderIcon(icon || src)
         }
       )
@@ -104,7 +109,12 @@ const IconButton = forwardRef((props, ref) => {
       "data-testid": "IconButtonRoot",
       color,
       ...other,
-      className: clsx(ICON_BUTTON_CLASSES[variant], ICON_BUTTON_CLASSES.styledMUIIconButton, className),
+      className: clsx(
+        ICON_BUTTON_CLASSES[variant],
+        ICON_BUTTON_CLASSES.styledMUIIconButton,
+        selected && ICON_BUTTON_CLASSES.selected,
+        className
+      ),
       children: renderIcon(icon || src)
     }
   );

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

@@ -13,7 +13,7 @@ const iconButtonStyles = {
         overflow: "hidden",
         cursor: ownerState?.disabled ? "not-allowed" : "pointer",
         color: theme.vars.palette.text.primary,
-        borderRadius: theme.size.borderRadius.r1,
+        borderRadius: theme.size.borderRadius["r1-5"],
         pointerEvents: ownerState?.disabled ? "none" : "auto",
         display: ownerState?.isSkeleton ? "none" : "flex",
         justifyContent: "center",
@@ -47,24 +47,24 @@ const iconButtonStyles = {
           // Estilos para la variante contained
           ...ownerState?.variant === "contained" && {
             // 🎯 Color de fondo según variante y color del componente
-            backgroundColor: ownerState?.variant === "contained" ? ownerState?.color === "error" ? paletteColor.active : ownerState?.color === "default" ? theme.vars.palette.primary.selected : paletteColor.selected : ownerState?.color === "error" ? paletteColor.activeOpacity : paletteColor.selectedOpacity,
+            backgroundColor: ownerState?.variant === "contained" ? ownerState?.color === "error" ? paletteColor.active : ownerState?.color === "default" ? theme.vars.palette.primary.selected : ownerState?.color === "success" ? theme.vars.palette.success.selected : paletteColor.selected : ownerState?.color === "error" ? paletteColor.activeOpacity : paletteColor.selectedOpacity,
             "&&& .M4LIcon-icon": {
               backgroundColor: ownerState?.variant === "contained" ? theme.vars.palette.primary.contrastText : paletteColor.semanticText
             }
           },
           // Estilos para la variante text
           ...ownerState.variant === "outline" && {
-            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.activeOpacity : paletteColor.activeOpacity,
+            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.selectedOpacity : paletteColor.selectedOpacity,
             border: theme.vars.size.borderStroke.actionInput,
             borderColor: ownerState.color === "default" ? theme.vars.palette.primary.active : paletteColor.active,
             "&&& .M4LIcon-icon": {
-              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : paletteColor.selected
+              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : ownerState.color === "warning" ? paletteColor.active : paletteColor.selected
             }
           },
           ...ownerState.variant === "text" && {
-            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.activeOpacity : paletteColor.activeOpacity,
+            backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.selectedOpacity : paletteColor.selectedOpacity,
             "&&& .M4LIcon-icon": {
-              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : paletteColor.selected
+              backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : ownerState.color === "warning" ? paletteColor.active : paletteColor.selected
             }
           }
         } : {
@@ -128,7 +128,7 @@ const iconButtonStyles = {
             backgroundColor: paletteColor.enabled,
             // 🖼️ Color del icono
             "&&& .M4LIcon-icon": {
-              backgroundColor: paletteColor.semanticText
+              backgroundColor: ownerState?.color === "default" ? paletteColor.semanticText : paletteColor.contrastText
             },
             // 🖱️ Estado Hover
             "&:hover": {

package/components/mui_extended/IconButton/constants.js

@@ -1,7 +1,14 @@
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { I as IconButtonSlots } from "./slots/IconButtonEnum.js";
 const ICON_BUTTON_KEY_COMPONENT = "M4LIconButton";
-const ICON_BUTTON_CLASSES = getComponentClasses(ICON_BUTTON_KEY_COMPONENT, IconButtonSlots);
+const IconButtonComplementaryClasses = {
+  selected: "selected"
+};
+const IconButtonCombineClasses = {
+  ...IconButtonSlots,
+  ...IconButtonComplementaryClasses
+};
+const ICON_BUTTON_CLASSES = getComponentClasses(ICON_BUTTON_KEY_COMPONENT, IconButtonCombineClasses);
 export {
   ICON_BUTTON_CLASSES as I,
   ICON_BUTTON_KEY_COMPONENT as a

package/components/mui_extended/Typography/Typography.js

@@ -18,7 +18,6 @@ function Typography(props) {
     children,
     disabled,
     ellipsis = false,
-    fontFamily = "inter",
     ...other
   } = props;
   const isSkeleton = useModuleSkeleton();
@@ -31,8 +30,7 @@ function Typography(props) {
     skeletonRows,
     variant,
     skeleton: isSkeleton,
-    ellipsis,
-    fontFamily
+    ellipsis
   };
   return /* @__PURE__ */ jsx(
     StyledMUITypography,

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

@@ -47,10 +47,6 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
      * Si se activa, el texto se corta y se muestra un elipsis.
      */
     ellipsis?: boolean;
-    /**
-     * Familia de fuentes a usar para el componente.
-     */
-    fontFamily?: 'inter' | 'jura';
 }
 /**
  * Define valores de estado necesarios para estilar el componente.
@@ -63,7 +59,6 @@ export interface TypographyOwnerState {
     skeletonRows: TypographyProps['skeletonRows'];
     skeleton: boolean;
     ellipsis: TypographyProps['ellipsis'];
-    fontFamily: TypographyProps['fontFamily'];
 }
 /**
  * Agrupa la lista de slots del componente.

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

@@ -8,7 +8,6 @@ const typographyStyles = {
   root: ({ ownerState, theme }) => ({
     margin: 0,
     cursor: "default",
-    fontFamily: ownerState?.fontFamily === "jura" ? "Jura" : "Inter",
     "&.M4lclassCssSpecificity": {
       // Estilos generales 🌐
       // skeleton spacing when multiple rows 🦴

package/index.js

@@ -18,8 +18,7 @@ import { a as a2, A as A6 } from "./components/areas/contexts/AreasContext/index
 import { u } from "./components/areas/hooks/useAreas/index.js";
 import { A as A7, a as a3, L as L2, b as b2, g as g3 } from "./components/areas/dictionary.js";
 import { B } from "./components/BaseModule/BaseModule.js";
-import { C } from "./components/Card/Card.js";
-import { C as C2 } from "./components/Chip/Chip.js";
+import { C } from "./components/Chip/Chip.js";
 import { A as A8 } from "./components/commercial/AppBarCommercial/index.js";
 import { H } from "./components/commercial/HamburgerMenu/HamburgerMenu.js";
 import { T } from "./components/commercial/TopBar/TopBar.js";
@@ -30,32 +29,32 @@ import { A as A11 } from "./components/CommonActions/components/ActionIntro/Acti
 import { A as A12 } from "./components/CommonActions/components/ActionFormCancel/ActionFormCancel.js";
 import { A as A13 } from "./components/CommonActions/components/ActionFormIntro/ActionFormIntro.js";
 import { D, d, g as g4 } from "./components/CommonActions/dictionary.js";
-import { C as C3 } from "./components/ContainerFlow/ContainerFlow.js";
+import { C as C2 } from "./components/ContainerFlow/ContainerFlow.js";
 import { D as D2 } from "./components/DataGrid/DataGrid.js";
 import { g as g5 } from "./components/DataGrid/dictionary.js";
 import { N, T as T2 } from "./components/DataGrid/subcomponents/editors/TextEditor/index.js";
 import { g as g6 } from "./components/DataGrid/utils/getDataGridRowsFromSet.js";
 import { b as b3, a as a4, e } from "./components/DataGrid/constants.js";
-import { C as C4 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
+import { C as C3 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
 import { u as u2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js";
-import { C as C5 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
+import { C as C4 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
 import { u as u3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.js";
-import { C as C6 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
+import { C as C5 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
 import { u as u4 } from "./components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
-import { C as C7 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
-import { C as C8 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
+import { C as C6 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
+import { C as C7 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
 import { u as u5 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
-import { C as C9 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
+import { C as C8 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
 import { u as u6 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
-import { C as C10 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
+import { C as C9 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
 import { u as u7 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
-import { C as C11 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
+import { C as C10 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
 import { u as u8 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
-import { C as C12 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
+import { C as C11 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
 import { u as u9 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
-import { C as C13 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
+import { C as C12 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
 import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
-import { C as C14 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
+import { C as C13 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
 import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
 import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
 import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
@@ -78,7 +77,7 @@ import { R as R3 } from "./components/extended/React-Json-Viewer/ReactJsonViewer
 import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
 import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
 import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
-import { C as C15 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
+import { C as C14 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
 import { B as B4 } from "./components/mui_extended/Badge/Badge.js";
 import { L as L3 } from "./components/mui_extended/LinearProgress/index.js";
 import { L as L4 } from "./components/mui_extended/LinkWithRoute/index.js";
@@ -88,7 +87,7 @@ import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
 import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
 import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
 import { B as B5 } from "./components/mui_extended/Button/Button.js";
-import { C as C16 } from "./components/mui_extended/CheckBox/CheckBox.js";
+import { C as C15 } from "./components/mui_extended/CheckBox/CheckBox.js";
 import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
 import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
 import { S as S4 } from "./components/mui_extended/Select/Select.js";
@@ -116,10 +115,10 @@ import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatt
 import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
 import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
-import { C as C17, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
+import { C as C16, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
 import { P as P4, u as u12 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
 import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
-import { C as C18 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
+import { C as C17 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
 import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { g as g18 } from "./components/formatters/dictionary.js";
@@ -252,24 +251,23 @@ export {
   B2 as BoxIcon,
   B3 as Breadcrumbs,
   B5 as Button,
-  C as Card,
-  C16 as CheckBox,
-  C2 as Chip,
-  C18 as ChipStatusFormatter,
-  C15 as CircularProgress,
-  C4 as ColumnBooleanFormatter,
-  C14 as ColumnChipStatusFormatter,
-  C5 as ColumnConcatenatedValueFormatter,
-  C6 as ColumnDateFormatter,
-  C7 as ColumnIconFormatter,
-  C8 as ColumnInteractiveCheckFormatter,
-  C9 as ColumnNestedValueFormatter,
-  C10 as ColumnPointsFormatter,
-  C11 as ColumnPriceFormatter,
-  C12 as ColumnSetCheckFormatter,
-  C13 as ColumnUncertaintyFormatter,
-  C17 as ConcatenatedFormatter,
-  C3 as ContainerFlow,
+  C15 as CheckBox,
+  C as Chip,
+  C17 as ChipStatusFormatter,
+  C14 as CircularProgress,
+  C3 as ColumnBooleanFormatter,
+  C13 as ColumnChipStatusFormatter,
+  C4 as ColumnConcatenatedValueFormatter,
+  C5 as ColumnDateFormatter,
+  C6 as ColumnIconFormatter,
+  C7 as ColumnInteractiveCheckFormatter,
+  C8 as ColumnNestedValueFormatter,
+  C9 as ColumnPointsFormatter,
+  C10 as ColumnPriceFormatter,
+  C11 as ColumnSetCheckFormatter,
+  C12 as ColumnUncertaintyFormatter,
+  C16 as ConcatenatedFormatter,
+  C2 as ContainerFlow,
   b3 as DATAGRID_ROW_HEADER_HEIGHTS,
   a4 as DATAGRID_ROW_HEIGHTS,
   e as DATAGRID_SEMANTIC_WIDTHS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.3.12-BE010925-beta.1",
+  "version": "9.3.12-BE090925-beta.1",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {
@@ -11,8 +11,8 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@hookform/resolvers": "2.9.11",
     "@m4l/core": "^2.0.0",
-    "@m4l/graphics": "7.1.4-BE010925-beta.1",
-    "@m4l/styles": "7.1.33-BE010925-beta.1",
+    "@m4l/graphics": "^7.0.0",
+    "@m4l/styles": "^7.0.0",
     "@microlink/react-json-view": "^1.23.3",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",

package/storybook/components/extended/mui/IconButton/IconButton.stories.d.ts

@@ -36,4 +36,7 @@ export declare const WithBadgeDot: Story;
  * Story for IconButton with skeleton.
  */
 export declare const WithSkeleton: Story;
+export declare const allColorsContained: Story;
+export declare const allColorsOutlined: Story;
+export declare const allColorsText: Story;
 export default meta;

package/components/Card/Card.js

@@ -1,49 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { C as CardRootStyled } from "./slots/CardSlots.js";
-import { C as CARD_CLASSES } from "./constants.js";
-import clsx from "clsx";
-const Card = (props) => {
-  const {
-    className,
-    variant = "text",
-    gap,
-    height = "auto",
-    children,
-    direction = "row",
-    justifyContent = "center",
-    alignItems = "center",
-    selected = false,
-    padding,
-    ...others
-  } = props;
-  const ownerState = {
-    variant,
-    CardGap: gap,
-    height,
-    direction,
-    onClick: !!props.onClick,
-    justifyContent,
-    alignItems,
-    selected,
-    CardPadding: padding
-  };
-  return /* @__PURE__ */ jsx(
-    CardRootStyled,
-    {
-      ownerState,
-      className: clsx(
-        CARD_CLASSES.root,
-        variant === "outlined" && CARD_CLASSES.outlined,
-        variant === "text" && CARD_CLASSES.text,
-        selected && CARD_CLASSES.selected,
-        className
-      ),
-      role: "card",
-      ...others,
-      children
-    }
-  );
-};
-export {
-  Card as C
-};

package/components/Card/Card.styles.js

@@ -1,56 +0,0 @@
-import { g as getSizeSpacing } from "./helpers/getSizeSpacing.js";
-const cardStyles = {
-  /**
-   * Estilos para el contenedor principal del card.
-   */
-  root: ({ theme, ownerState }) => {
-    const gap = getSizeSpacing(ownerState?.CardGap, theme);
-    const padding = getSizeSpacing(ownerState?.CardPadding, theme);
-    return {
-      display: "flex",
-      justifyContent: ownerState?.justifyContent ?? "center",
-      alignItems: ownerState?.alignItems ?? "center",
-      flexDirection: ownerState?.direction ?? "column",
-      gap,
-      padding,
-      transition: "all 0.2s ease-in-out",
-      width: "100%",
-      outline: "unset!important",
-      borderRadius: theme.vars.size.borderRadius.r2,
-      backgroundColor: theme.palette.background.paper,
-      height: ownerState?.height ?? "auto",
-      minHeight: ownerState?.height ?? "auto",
-      maxHeight: ownerState?.height ?? "auto",
-      overflow: "hidden",
-      ...ownerState?.onClick && {
-        cursor: "pointer",
-        "&:hover": {
-          backgroundColor: theme.vars.palette.background.base
-        },
-        "&:active": {
-          backgroundColor: theme.vars.palette.default.activeOpacity
-        },
-        "&:focus-visible, &:focus-within": {
-          border: theme.vars.size.borderStroke.container,
-          borderColor: `${theme.vars.palette.primary.focusVisible}!important`,
-          outline: "unset!important"
-        }
-      },
-      ...ownerState?.variant === "outlined" && {
-        border: theme.vars.size.borderStroke.container,
-        borderColor: theme.vars.palette.border.disabled
-      },
-      ...ownerState?.variant === "text" && {
-        border: theme.vars.size.borderStroke.container,
-        borderColor: "transparent"
-      },
-      ...ownerState?.selected && {
-        border: theme.vars.size.borderStroke.container,
-        borderColor: theme.vars.palette.primary.enabled
-      }
-    };
-  }
-};
-export {
-  cardStyles as c
-};

package/components/Card/constants.js

@@ -1,17 +0,0 @@
-import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
-import { C as CardSlots } from "./slots/CardEnum.js";
-const CARD_KEY = "M4LCard";
-const CARD_VARIANTS = {
-  text: "text",
-  outlined: "outlined"
-};
-const COMBINED_CLASSES = {
-  ...CARD_VARIANTS,
-  ...CardSlots,
-  selected: "selected"
-};
-const CARD_CLASSES = getComponentClasses(CARD_KEY, COMBINED_CLASSES);
-export {
-  CARD_CLASSES as C,
-  CARD_KEY as a
-};

package/components/Card/helpers/getSizeSpacing.js

@@ -1,10 +0,0 @@
-const getSizeSpacing = (spacing, theme) => {
-  if (typeof spacing === "number") {
-    return spacing;
-  }
-  const densityKey = spacing ?? "standard";
-  return theme.vars.size.density[densityKey];
-};
-export {
-  getSizeSpacing as g
-};

package/components/Card/index.js

@@ -1 +0,0 @@
-

package/components/Card/slots/CardEnum.js

@@ -1,7 +0,0 @@
-var CardSlots = /* @__PURE__ */ ((CardSlots2) => {
-  CardSlots2["root"] = "root";
-  return CardSlots2;
-})(CardSlots || {});
-export {
-  CardSlots as C
-};

package/components/Card/slots/CardSlots.js

@@ -1,11 +0,0 @@
-import { styled } from "@mui/material/styles";
-import { a as CARD_KEY } from "../constants.js";
-import { C as CardSlots } from "./CardEnum.js";
-import { c as cardStyles } from "../Card.styles.js";
-const CardRootStyled = styled("div", {
-  name: CARD_KEY,
-  slot: CardSlots.root
-})(cardStyles?.root);
-export {
-  CardRootStyled as C
-};