@m4l/components 9.1.131 → 9.1.132

package/components/Chip/Chip.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import clsx from "clsx";
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import { C as CHIP_CLASSES } from "./constants.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
-import { S as SkeletonChipStyled, C as ChipRootStyled, T as TextChipStyled, I as IconButtonStyled, a as IconStyled } from "./slots/ChipSlots.js";
+import { I as IconStyled, S as SkeletonChipStyled, C as ChipRootStyled, T as TextChipStyled, a as IconButtonStyled } from "./slots/ChipSlots.js";
 const Chip = forwardRef((props, ref) => {
   const {
     endIcon,
@@ -26,30 +26,16 @@ const Chip = forwardRef((props, ref) => {
   const isSkeleton = useModuleSkeleton();
   const { host_static_assets, environment_assets } = useEnvironment();
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const ownerState = {
+  const ownerState = useMemo(() => ({
     interactive: !!onClick,
     size: adjustedSize,
+    chipSize: adjustedSize,
     variant,
     color,
     opacity,
     externalColor
-  };
-  const handleDelete = (e) => {
-    e.stopPropagation();
-    onDeleted?.(e);
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(
-      SkeletonChipStyled,
-      {
-        "data-testid": "SkeletonButton",
-        width: skeletonWidth,
-        ownerState: { ...ownerState }
-      }
-    );
-  }
-  const iconClose = `${host_static_assets}/${environment_assets}/frontend/components/chip/assets/icons/closeSmall.svg`;
-  const renderIcon = (icon, instaceDataTestId) => {
+  }), [adjustedSize, variant, color, opacity, externalColor, onClick]);
+  const renderIcon = useMemo(() => (icon, instaceDataTestId) => {
     if (!icon) {
       return null;
     }
@@ -59,7 +45,6 @@ const Chip = forwardRef((props, ref) => {
       return /* @__PURE__ */ jsx(
         IconStyled,
         {
-          color,
           ownerState: { ...ownerState },
           src: icon,
           size: adjustedSize,
@@ -67,6 +52,21 @@ const Chip = forwardRef((props, ref) => {
         }
       );
     }
+  }, [ownerState, adjustedSize]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      SkeletonChipStyled,
+      {
+        "data-testid": "SkeletonButton",
+        width: skeletonWidth,
+        ownerState: { ...ownerState }
+      }
+    );
+  }
+  const iconClose = `${host_static_assets}/${environment_assets}/frontend/components/chip/assets/icons/closeSmall.svg`;
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    onDeleted?.(e);
   };
   return /* @__PURE__ */ jsxs(
     ChipRootStyled,

package/components/Chip/ChipStyles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const getColors = (theme, ownerState) => {
   const keyColor = ownerState.variant === "contained" ? ownerState.color + "Contained" : ownerState.color + "Outlined";
   const finalPalette = ownerState.externalColor ? ownerState.externalColor : theme.vars.palette.chips[keyColor ?? "default"];
@@ -24,11 +24,8 @@ const chipStyles = {
       cursor: "pointer",
       color,
       backgroundColor: !(ownerState.variant === "outlined") ? bgColor : "transparent",
-      // '& .M4LIcon-icon': {
-      //   backgroundColor: `${color} !important`,
-      // },
-      ...getHeightSizeStyles(
-        theme.generalSettings.isMobile,
+      ...getSizeStyles(
+        theme,
         ownerState.size || "medium",
         "base"
       ),
@@ -81,30 +78,16 @@ const chipStyles = {
       "& .M4LIcon-icon": {
         backgroundColor: `${color} !important`
       },
-      // Estilos específicos para el tamaño small
-      ...ownerState.size === "small" && {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.small.base,
-          width: theme.vars.size.mobile.small.base,
-          minHeight: theme.vars.size.mobile.small.base
-        } : {
-          height: theme.vars.size.desktop.small.base,
-          width: theme.vars.size.desktop.small.base,
-          minHeight: theme.vars.size.desktop.small.base
-        }
-      },
-      // Estilos específicos para el tamaño medium
-      ...ownerState.size === "medium" && {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.medium.base,
-          width: theme.vars.size.mobile.medium.base,
-          minHeight: theme.vars.size.mobile.medium.base
-        } : {
-          height: theme.vars.size.desktop.medium.base,
-          width: theme.vars.size.desktop.medium.base,
-          minHeight: theme.vars.size.desktop.medium.base
-        }
-      }
+      ...getSizeStyles(
+        theme,
+        ownerState.size || "medium",
+        "base",
+        (size) => ({
+          height: size,
+          width: size,
+          minHeight: size
+        })
+      )
     };
   },
   /**
@@ -113,26 +96,15 @@ const chipStyles = {
   skeletonChip: ({ theme, ownerState }) => ({
     width: "100%",
     background: theme.vars.palette.skeleton.transition,
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.base,
-        minHeight: theme.vars.size.mobile.small.base
-      } : {
-        height: theme.vars.size.desktop.small.base,
-        minHeight: theme.vars.size.desktop.small.base
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.base,
-        minHeight: theme.vars.size.mobile.medium.base
-      } : {
-        height: theme.vars.size.desktop.medium.base,
-        minHeight: theme.vars.size.desktop.medium.base
-      }
-    }
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "base",
+      (size) => ({
+        height: size,
+        minHeight: size
+      })
+    )
   })
 };
 export {

package/components/Chip/slots/ChipSlots.js

@@ -28,8 +28,8 @@ const IconButtonStyled = styled(IconButton, {
 })(chipStyles?.iconButton);
 export {
   ChipRootStyled as C,
-  IconButtonStyled as I,
+  IconStyled as I,
   SkeletonChipStyled as S,
   TextChipStyled as T,
-  IconStyled as a
+  IconButtonStyled as a
 };

package/components/Chip/types.d.ts

@@ -63,7 +63,7 @@ export interface ChipProps {
      */
     className?: string;
     /**
-     * Focusable `Chip`.
+     * If the `Chip` is focusable.
      */
     focusable?: boolean;
 }

package/components/DynamicSort/DynamicSort.styles.js

@@ -1,6 +1,6 @@
 import { c as containerQuery } from "../../utils/containerQuery.js";
 import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
-import { a as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const CONTAINER_QUERY_NAME = "dynamic";
 const dynamicSortStyles = {
   /**
@@ -55,13 +55,12 @@ const dynamicSortStyles = {
     overflow: "hidden",
     ...getSizeStyles(
       theme,
-      theme.generalSettings.isMobile,
       ownerState.size || "medium",
       "container",
-      (height) => ({
-        height,
-        minHeight: height,
-        maxHeight: height
+      (size) => ({
+        height: size,
+        minHeight: size,
+        maxHeight: size
       })
     ),
     maxWidth: "135px",
@@ -81,13 +80,12 @@ const dynamicSortStyles = {
   inputSortInput: ({ theme, ownerState }) => ({
     ...getSizeStyles(
       theme,
-      theme.generalSettings.isMobile,
       ownerState.size || "medium",
       "action",
-      (height) => ({
-        height,
-        minHeight: height,
-        maxHeight: height
+      (size) => ({
+        height: size,
+        minHeight: size,
+        maxHeight: size
       })
     ),
     ...getTypographyStyles(
@@ -314,13 +312,12 @@ const dynamicSortStyles = {
     marginRight: theme.vars.size.baseSpacings.sp2,
     ...getSizeStyles(
       theme,
-      theme.generalSettings.isMobile,
       ownerState.size || "medium",
       "base",
-      (height) => ({
-        height,
-        minHeight: height,
-        maxHeight: height
+      (size) => ({
+        height: size,
+        minHeight: size,
+        maxHeight: size
       })
     )
   })

package/components/Icon/Icon.js

@@ -17,16 +17,21 @@ const Icon = (props) => {
     className,
     placement = "bottom",
     instaceDataTestId,
-    disabled
+    disabled,
+    selected,
+    enabledSelected
   } = props;
   const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const isSkeleton = useModuleSkeleton();
   const ownerState = {
-    iconSize: currentSize,
-    iconColor: color,
-    iconSrc: src,
-    iconDisabled: disabled,
-    iconRotationAngle: rotationAngle,
+    size: adjustedSize,
+    color,
+    src,
+    disabled,
+    rotationAngle,
+    selected,
+    enabledSelected,
     isSkeleton
   };
   const classKey = getComponentClasses(ICON_KEY_COMPONENT, IconSlots);
@@ -38,6 +43,7 @@ const Icon = (props) => {
         title: tooltipContent,
         ownerState: { ...ownerState },
         placement,
+        size: adjustedSize,
         ...getPropDataTestId(ICON_PREFIX, IconSlots.tooltip, instaceDataTestId),
         children: /* @__PURE__ */ jsx(
           RootStyled,
@@ -74,7 +80,7 @@ const Icon = (props) => {
         )
       }
     ),
-    isSkeleton && /* @__PURE__ */ jsx(IconSkeletonStyled, { className: classKey.iconSkeleton, role: "icon-skeleton", variant: "rectangular", ownerState: { ...ownerState } })
+    isSkeleton && /* @__PURE__ */ jsx(IconSkeletonStyled, { className: classKey.iconSkeleton, role: "icon-skeleton", size: adjustedSize, variant: "rectangular", ownerState: { ...ownerState } })
   ] });
 };
 export {

package/components/Icon/Icon.styles.js

@@ -14,7 +14,7 @@ const iconStyles = {
     alignItems: "center",
     width: "fit-content",
     transition: "transform 0.5s ease-in-out",
-    ...ownerState.iconSize === "medium" && {
+    ...ownerState.size === "medium" && {
       ...theme.generalSettings.isMobile ? {
         width: theme.vars.size.mobile.medium.base,
         height: theme.vars.size.mobile.medium.base
@@ -23,7 +23,7 @@ const iconStyles = {
         height: theme.vars.size.desktop.medium.base
       }
     },
-    ...ownerState.iconSize === "small" && {
+    ...ownerState.size === "small" && {
       ...theme.generalSettings.isMobile ? {
         width: theme.vars.size.mobile.small.base,
         height: theme.vars.size.mobile.small.base
@@ -40,22 +40,25 @@ const iconStyles = {
    * del ícono basada en el ángulo de rotación proporcionado, y el color de fondo que
    * se ajusta de acuerdo con el estado de deshabilitación o no del ícono.
    */
-  icon: ({ theme, ownerState }) => ({
-    maskPosition: "center",
-    maskRepeat: "no-repeat",
-    maskSize: "cover",
-    WebkitMaskRepeat: "no-repeat",
-    mask: `url(${ownerState.iconSrc})`,
-    WebkitMask: `url(${ownerState.iconSrc})`,
-    WebkitMaskSize: "cover",
-    ...ownerState.iconRotationAngle && {
-      transform: `rotate(${ownerState.iconRotationAngle}deg)`
-    },
-    backgroundColor: !ownerState.iconDisabled ? getPropertyByString(theme.vars.palette, String(ownerState.iconColor) || "text.primary") : theme.vars.palette.text.disabled,
-    width: "inherit",
-    height: "inherit",
-    variants: []
-  }),
+  icon: ({ theme, ownerState }) => {
+    const backgroundColor = ownerState.disabled ? theme.vars.palette.text.disabled : ownerState.selected && ownerState.enabledSelected ? `${theme.vars.palette.primary.selected} !important` : getPropertyByString(theme.vars.palette, String(ownerState.color), "text.primary");
+    return {
+      maskPosition: "center",
+      maskRepeat: "no-repeat",
+      maskSize: "cover",
+      WebkitMaskRepeat: "no-repeat",
+      mask: `url(${ownerState.src})`,
+      WebkitMask: `url(${ownerState.src})`,
+      WebkitMaskSize: "cover",
+      ...ownerState.rotationAngle && {
+        transform: `rotate(${ownerState.rotationAngle}deg)`
+      },
+      backgroundColor,
+      width: "inherit",
+      height: "inherit",
+      variants: []
+    };
+  },
   /**
    * Slot iconSkeleton: Define los estilos para el esqueleto del ícono.
    * Se utiliza cuando el ícono aún no está completamente cargado, proporcionando
@@ -65,7 +68,7 @@ const iconStyles = {
   iconSkeleton: ({ theme, ownerState }) => ({
     "&.M4lclassCssSpecificity": {
       borderRadius: theme.size.borderRadius.r1,
-      ...ownerState.iconSize === "medium" && {
+      ...ownerState.size === "medium" && {
         ...theme.generalSettings.isMobile ? {
           width: theme.vars.size.mobile.medium.base,
           height: theme.vars.size.mobile.medium.base
@@ -74,7 +77,7 @@ const iconStyles = {
           height: theme.vars.size.desktop.medium.base
         }
       },
-      ...ownerState.iconSize === "small" && {
+      ...ownerState.size === "small" && {
         ...theme.generalSettings.isMobile ? {
           width: theme.vars.size.mobile.small.base,
           height: theme.vars.size.mobile.small.base

package/components/Icon/types.d.ts

@@ -43,16 +43,19 @@ export interface IconProps extends Pick<TooltipProps, 'placement'> {
      * Valor que en caso de ser verdadero debe de pintar el svg con color text disabled.
      */
     disabled?: boolean;
+    /**
+     * Valor que define si el icono debe de estar seleccionado pero depende de la propiedad enableSelected.
+     */
+    selected?: boolean;
+    /**
+     * Valor que define si el icono debe de estar seleccionado pero depende de la propiedad selected.
+     */
+    enabledSelected?: boolean;
 }
 /**
  * Define las las propiedades usadas para estilizar el componente desde el css.
  */
-export interface IconOwnerState {
-    iconSize: Sizes;
-    iconRotationAngle?: number;
-    iconColor: IconColors;
-    iconDisabled?: boolean;
-    iconSrc: string;
+export interface IconOwnerState extends Pick<IconProps, 'selected' | 'enabledSelected' | 'size' | 'rotationAngle' | 'color' | 'disabled' | 'src'> {
     isSkeleton: boolean;
 }
 export type IconSlotsType = keyof typeof IconSlots;

package/components/Label/Label.styles.js

@@ -1,5 +1,5 @@
 import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
-import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const labelStyles = {
   /**
    * Estilos para el contenedor raíz del Label 🏷️

package/components/NumberInput/NumberInput.styles.js

@@ -1,5 +1,5 @@
 import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
-import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const numberInputStyles = {
   /**
    * Estilos aplicados al contenedor principal (root).

package/components/PaperForm/styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const paperFormStyles = {
   /**
    *************************************************************

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../../../../utils/getSizeStyles/getSizeStyles.js";
 import { a as ITEM_IN_TREE_ACTIVE, I as ITEM_ACTIVE } from "../../../../constants.js";
 const containerMenuItemsMainStyles = {
   /**

package/components/areas/components/AreasAdmin/AreasAdmin.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const areasAdminStyles = {
   /**
    * Root areas admin Styles

package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const propagateLoaderSpinnerStyles = {
   /**
    * Estilos del componente raíz del contenedor de la ventana.

package/components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const rhfTextFieldPasswordStyles = {
   /**
    * Elemento Root

package/components/mui_extended/Autocomplete/Autocomplete.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const autocompleteSyles = {
   /**
    * Styles for the root component.

package/components/mui_extended/CheckBox/CheckBox.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const checkBoxStyles = {
   /**
    * Estilos generales para el checkbox 🟦

package/components/mui_extended/DateTimePicker/DateTimePicker.styles.js

@@ -1,5 +1,5 @@
 import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const dateTimePickerStyles = {
   /**
    * Estilos para el root cuando esta en Desktop 💻

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

@@ -1,7 +1,8 @@
+import { default as React } from 'react';
 import { IconButtonProps } from './types';
 /**
  *Los Icon button son habitualmente ubicados en barras de aplicaciones y barras de herramientas. Además, resulta adecuado emplear iconos en botones de alternancia que posibilitan la selección o deselección de una única opción, como añadir o eliminar una estrella a un elemento.
  * @param props
  * @returns
  */
-export declare const IconButton: import('react').ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/components/mui_extended/IconButton/IconButton.js

@@ -1,7 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { useTheme } from "@mui/material";
+import React, { forwardRef, useMemo, cloneElement } from "react";
+import { useModuleSkeleton } from "@m4l/core";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { e as evalIconColor } from "./helpers/evalIconColor.js";
 import { I as ICON_BUTTON_KEY_COMPONENT } from "./constants.js";
@@ -31,33 +30,24 @@ const IconButton = forwardRef((props, ref) => {
   const classRoot = getComponentSlotRoot(ICON_BUTTON_KEY_COMPONENT);
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const theme = useTheme();
   const isSkeleton = useModuleSkeleton();
-  const paletteColor = getPropertyByString(
-    theme.vars.palette,
-    disabled ? "default" : componentPaletteColor,
-    theme.vars.palette.default
-  );
-  const OwnerState = {
+  const OwnerState = useMemo(() => ({
     variant,
     size: adjustedSize,
     disabled,
-    paletteColor,
     componentPaletteColor,
     selected,
     isSkeleton
-  };
+  }), [variant, adjustedSize, disabled, componentPaletteColor, selected, isSkeleton]);
   const iconColor = useMemo(
     () => evalIconColor(componentPaletteColor, variant),
     [componentPaletteColor, variant]
   );
-  const renderIcon = (arg) => {
-    if (!arg) {
-      return arg;
+  const renderIcon = useMemo(() => (arg) => {
+    if (!arg || typeof arg === "boolean" || typeof arg === "number") {
+      return null;
     }
-    if (typeof arg !== "string") {
-      return arg;
-    } else {
+    if (typeof arg === "string") {
       return /* @__PURE__ */ jsx(
         Icon,
         {
@@ -65,11 +55,19 @@ const IconButton = forwardRef((props, ref) => {
           size: adjustedSize,
           color: iconColor,
           disabled,
-          rotationAngle
+          rotationAngle,
+          selected,
+          enabledSelected: true
         }
       );
     }
-  };
+    if (React.isValidElement(arg)) {
+      return cloneElement(arg, {
+        selected: variant !== "contained" ? selected : false
+      });
+    }
+    return null;
+  }, [adjustedSize, disabled, iconColor, rotationAngle, selected, variant]);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { ...OwnerState } });
   }

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

@@ -1,194 +1,150 @@
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const iconButtonStyles = {
   /**
    * TODO: Documentar
    */
-  styledMUIIconButton: ({ ownerState, theme }) => ({
-    overflow: "hidden",
-    cursor: ownerState.disabled ? "not-allowed" : "pointer",
-    color: theme.vars.palette.text.primary,
-    borderRadius: theme.size.borderRadius.r1,
-    pointerEvents: ownerState.disabled ? "none" : "auto",
-    display: ownerState.isSkeleton ? "none" : "flex",
-    justifyContent: "center",
-    // Override de estilos de Material UI
-    padding: 0,
-    // condiciones de tamaño
-    // condiciones de tamaño Small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        width: theme.vars.size.mobile.small.action,
-        height: theme.vars.size.mobile.small.action
-      } : {
-        width: theme.vars.size.desktop.small.action,
-        height: theme.vars.size.desktop.small.action
-      }
-    },
-    // condiciones de tamaño Medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        width: theme.vars.size.mobile.medium.action,
-        height: theme.vars.size.mobile.medium.action
-      } : {
-        width: theme.vars.size.desktop.medium.action,
-        height: theme.vars.size.desktop.medium.action
-      }
-    },
-    // Variante text en Finalizado
-    ...ownerState.variant === "text" && {
-      ...ownerState.selected === true ? {
-        backgroundColor: ownerState.paletteColor?.activeOpacity,
-        '&  [class*="M4LIcon-icon"]': {
-          backgroundColor: ownerState.componentPaletteColor === "default" ? ownerState.paletteColor?.contrastText : ownerState.paletteColor?.active
+  styledMUIIconButton: ({ ownerState, theme }) => {
+    const paletteColor = ownerState.disabled ? theme.vars.palette["default"] : ownerState.selected ? theme.vars.palette["primary"] : theme.vars.palette[ownerState.componentPaletteColor || "default"];
+    return {
+      overflow: "hidden",
+      cursor: ownerState.disabled ? "not-allowed" : "pointer",
+      color: theme.vars.palette.text.primary,
+      borderRadius: theme.size.borderRadius.r1,
+      pointerEvents: ownerState.disabled ? "none" : "auto",
+      display: ownerState.isSkeleton ? "none" : "flex",
+      justifyContent: "center",
+      // Override de estilos de Material UI
+      padding: 0,
+      // condiciones de tamaño
+      // condiciones de tamaño Small
+      // Tamaño del componente
+      ...getSizeStyles(
+        theme,
+        ownerState.size || "medium",
+        "action",
+        (size) => {
+          return {
+            width: size,
+            height: size
+          };
         }
-      } : {
-        "&:hover": {
-          backgroundColor: ownerState.paletteColor?.hoverOpacity
+      ),
+      // Variante text en Finalizado
+      ...ownerState.variant === "text" && {
+        ...ownerState.selected === true ? {
+          backgroundColor: paletteColor.activeOpacity,
+          '&  [class*="M4LIcon-icon"]': {
+            backgroundColor: ownerState.componentPaletteColor === "default" ? paletteColor.contrastText : paletteColor.semanticText
+          }
+        } : {
+          "&:hover": {
+            backgroundColor: paletteColor.hoverOpacity
+          },
+          //FocusActive
+          "&:active": {
+            backgroundColor: paletteColor.activeOpacity,
+            '&  [class*="M4LIcon-icon"]': {
+              backgroundColor: ownerState.componentPaletteColor === "default" ? paletteColor.contrastText : paletteColor.active
+            }
+          }
         },
-        //FocusActive
-        "&:active": {
-          backgroundColor: ownerState.paletteColor?.activeOpacity,
+        "&:focus-visible": {
+          background: paletteColor.activeOpacity,
+          outline: `1px solid ${theme.vars.palette.border.main}`,
           '&  [class*="M4LIcon-icon"]': {
-            backgroundColor: ownerState.componentPaletteColor === "default" ? ownerState.paletteColor?.contrastText : ownerState.paletteColor?.active
+            backgroundColor: ownerState.componentPaletteColor === "default" ? paletteColor.contrastText : paletteColor.active
           }
+        },
+        // Variantes text en disabled
+        ...ownerState.disabled === true && {
+          color: theme.vars.palette.action.disabled
         }
       },
-      "&:focus-visible": {
-        background: ownerState.paletteColor?.activeOpacity,
-        outline: `1px solid ${theme.vars.palette.border.main}`,
-        '&  [class*="M4LIcon-icon"]': {
-          backgroundColor: ownerState.componentPaletteColor === "default" ? ownerState.paletteColor?.contrastText : ownerState.paletteColor?.active
-        }
-      },
-      // Variantes text en disabled
-      ...ownerState.disabled === true && {
-        color: theme.vars.palette.action.disabled
-      }
-    },
-    // Variante outline en Finalizada
-    ...ownerState.variant === "outline" && {
-      ...ownerState.componentPaletteColor !== "default" && {
-        border: `1px solid ${ownerState.paletteColor?.main}`
-      },
-      ...ownerState.componentPaletteColor === "default" && {
-        border: `1px solid ${theme.vars.palette.border.default}`
-      },
-      ...ownerState.selected === true ? {
-        background: ownerState.paletteColor?.activeOpacity,
-        border: `1px solid ${ownerState.paletteColor?.active}`,
-        '&  [class*="M4LIcon-icon"]': {
-          backgroundColor: ownerState.componentPaletteColor === "default" ? theme.vars.palette.text.primary : ownerState.paletteColor?.active
-        }
-      } : {
-        "&:hover": {
-          background: ownerState.paletteColor?.hoverOpacity
+      // Variante outline en Finalizada
+      ...ownerState.variant === "outline" && {
+        ...ownerState.componentPaletteColor !== "default" && {
+          border: `1px solid ${paletteColor.main}`
+        },
+        ...ownerState.componentPaletteColor === "default" && {
+          border: `1px solid ${theme.vars.palette.border.default}`
         },
-        "&:active": {
-          background: ownerState.paletteColor?.activeOpacity,
-          border: `1px solid ${ownerState.paletteColor?.active}`,
+        ...ownerState.selected === true ? {
+          background: paletteColor.activeOpacity,
+          border: `1px solid ${paletteColor.active}`,
           '&  [class*="M4LIcon-icon"]': {
-            backgroundColor: ownerState.componentPaletteColor === "default" ? theme.vars.palette.text.primary : ownerState.paletteColor?.active
+            backgroundColor: ownerState.componentPaletteColor === "default" ? theme.vars.palette.text.primary : paletteColor.active
+          }
+        } : {
+          "&:hover": {
+            background: paletteColor.hoverOpacity
+          },
+          "&:active": {
+            background: paletteColor.activeOpacity,
+            border: `1px solid ${paletteColor.active}`,
+            '&  [class*="M4LIcon-icon"]': {
+              backgroundColor: ownerState.componentPaletteColor === "default" ? theme.vars.palette.text.primary : paletteColor.active
+            }
           }
-        }
-      },
-      ...ownerState.disabled === true && {
-        border: `1px solid ${theme.vars.palette.border.default}`
-      }
-    },
-    // Variantes contained Finalizada
-    ...ownerState.variant === "contained" && {
-      backgroundColor: ownerState.paletteColor?.enabled,
-      //Color del icono que cambia
-      '& [class*="M4LIcon-icon"]': {
-        backgroundColor: ownerState.paletteColor?.contrastText
-      },
-      // Cuando recibe en la prop `selected` un true se visualiza el modo :active
-      ...ownerState.selected === true ? {
-        background: ownerState.paletteColor?.active
-      } : {
-        //Estado Hover
-        "&:hover": {
-          background: ownerState.paletteColor?.hover
         },
-        //Estado Active
-        "&:active": {
-          background: ownerState.paletteColor?.active
+        ...ownerState.disabled === true && {
+          border: `1px solid ${theme.vars.palette.border.default}`
         }
       },
-      // Variantes contained en disabled
-      ...ownerState.disabled === true && {
-        background: `${ownerState.paletteColor?.main} !important`,
+      // Variantes contained Finalizada
+      ...ownerState.variant === "contained" && {
+        backgroundColor: paletteColor.enabled,
+        //Color del icono que cambia
         '& [class*="M4LIcon-icon"]': {
-          color: theme.vars.palette.action.disabled
+          backgroundColor: paletteColor.contrastText
+        },
+        // Cuando recibe en la prop `selected` un true se visualiza el modo :active
+        ...ownerState.selected === true ? {
+          background: paletteColor.active
+        } : {
+          //Estado Hover
+          "&:hover": {
+            background: paletteColor.hover
+          },
+          //Estado Active
+          "&:active": {
+            background: paletteColor.active
+          }
+        },
+        // Variantes contained en disabled
+        ...ownerState.disabled === true && {
+          background: `${paletteColor.main} !important`,
+          '& [class*="M4LIcon-icon"]': {
+            color: theme.vars.palette.action.disabled
+          }
         }
+      },
+      ...ownerState.selected === true && {
+        outline: `1px solid ${paletteColor.selected}`,
+        outlineOffset: 2
       }
-    },
-    ...ownerState.selected === true && {
-      outline: `1px solid ${ownerState.paletteColor?.selected}`,
-      outlineOffset: 2
-    }
-  }),
+    };
+  },
   /**
    * Comentado por el momento, falta de documentación en Figma de Badge
    */
-  badgeIconButton: () => ({
-    //   '&  [class*="MuiBadge-badge"]': {
-    //     display: 'flex',
-    //     justifyContent: 'center',
-    //     alignItems: 'center',
-    //     fontSize: '11px',
-    //     backgroundColor: ownerState.paletteColor?.active,
-    //     color: ownerState.paletteColor?.contrastText,
-    //     // condiciones de tamaño Small
-    //     ...(ownerState.size === 'small' && {
-    //       ...(theme.generalSettings.isMobile
-    //         ? {
-    //             width: theme.size.desktop.base.small,
-    //             height: theme.size.desktop.base.small,
-    //           }
-    //         : {
-    //             width: theme.size.desktop.base.small,
-    //             height: theme.size.desktop.base.small,
-    //           }),
-    //     }),
-    //     // condiciones de tamaño Medium
-    //     ...(ownerState.size === 'medium' && {
-    //       ...(theme.generalSettings.isMobile
-    //         ? {
-    //             width: theme.size.mobile.base.medium,
-    //             height: theme.size.mobile.base.medium,
-    //           }
-    //         : {
-    //             width: theme.size.desktop.base.medium,
-    //             height: theme.size.desktop.base.medium,
-    //           }),
-    //     }),
-    //   },
-  }),
+  badgeIconButton: {},
   /**
    * Slot skeleton con sus estilos de tamaño
    */
   skeleton: ({ theme, ownerState }) => ({
     "&.M4lclassCssSpecificity": {
       // condiciones de tamaño Small
-      ...ownerState.size === "small" && {
-        ...theme.generalSettings.isMobile ? {
-          width: theme.vars.size.mobile.small.action,
-          height: theme.vars.size.mobile.small.action
-        } : {
-          width: theme.vars.size.desktop.small.action,
-          height: theme.vars.size.desktop.small.action
+      ...getSizeStyles(
+        theme,
+        ownerState.size || "medium",
+        "action",
+        (size) => {
+          return {
+            width: size,
+            height: size
+          };
         }
-      },
-      // condiciones de tamaño Medium
-      ...ownerState.size === "medium" && {
-        ...theme.generalSettings.isMobile ? {
-          width: theme.vars.size.mobile.medium.action,
-          height: theme.vars.size.mobile.medium.action
-        } : {
-          width: theme.vars.size.desktop.medium.action,
-          height: theme.vars.size.desktop.medium.action
-        }
-      }
+      )
     }
   })
 };

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

@@ -1,5 +1,5 @@
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
-import { PaletteColor, Theme } from '@mui/material/styles';
+import { Theme } from '@mui/material/styles';
 import { IconProps } from '../../Icon/types';
 import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
@@ -32,7 +32,7 @@ export type IconButtonSize = 'small' | 'medium';
  * [disabled] - Whether the IconButton is disabled.
  * [instaceDataTestId] - A unique identifier for the HTML element, useful for unit and integration testing.
  */
-export interface IconButtonProps extends Omit<IconProps, 'size' | 'color' | 'src'>, Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled' | 'src'>, Pick<BadgeProps, 'badgeContent'>, Pick<TooltipProps, 'placement'> {
+export interface IconButtonProps extends Omit<IconProps, 'size' | 'color' | 'src' | 'selected' | 'enabledSelected'>, Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled' | 'src'>, Pick<BadgeProps, 'badgeContent'>, Pick<TooltipProps, 'placement'> {
     /**
      * Define el uso de tooltip en IconButton
      */
@@ -48,7 +48,7 @@ export interface IconButtonProps extends Omit<IconProps, 'size' | 'color' | 'src
     /**
      * Define el tamaño del componente
      */
-    size?: Sizes;
+    size?: Extract<Sizes, 'small' | 'medium'>;
     /**
      * Define el mensaje interno del tooltip
      */
@@ -85,7 +85,6 @@ export interface IconButtonProps extends Omit<IconProps, 'size' | 'color' | 'src
  */
 export type IconButtonOwnerState = Pick<IconButtonProps, 'size' | 'variant' | 'componentPaletteColor' | 'selected'> & {
     disabled?: boolean;
-    paletteColor: PaletteColor;
     isSkeleton: boolean;
 };
 /**

package/components/mui_extended/MenuDivider/MenuDivider.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const menuDividerStyles = {
   /**
    * MenuDivider Styles

package/components/mui_extended/MenuItem/MenuItem.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import clsx from "clsx";
+import React, { useMemo, cloneElement } from "react";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { M as MENUITEM_CLASSES } from "./constants.js";
-import { M as MenuItemSkeletonStyled, a as MenuItemRootStyled, b as MenuItemIconCheckedStyled, c as MenuItemContainerStyled, d as MenuItemTypographyStyled, e as MenuItemIconStyled } from "./slots/MenuItemSlots.js";
+import { M as MenuItemIconStyled, a as MenuItemSkeletonStyled, b as MenuItemRootStyled, c as MenuItemIconCheckedStyled, d as MenuItemContainerStyled, e as MenuItemTypographyStyled } from "./slots/MenuItemSlots.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const MenuItem = (props) => {
   const {
@@ -25,36 +26,25 @@ const MenuItem = (props) => {
   const isSkeleton = useModuleSkeleton();
   const { host_static_assets, environment_assets } = useEnvironment();
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const ownerState = {
+  const ownerState = useMemo(() => ({
     size: adjustedSize,
     disabled,
     selected,
     color,
     checkable,
     checked
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(
-      MenuItemSkeletonStyled,
-      {
-        "data-testid": "SkeletonMenuItem",
-        width: skeletonWidth,
-        ownerState: { ...ownerState },
-        className: MENUITEM_CLASSES.skeleton
-      }
-    );
-  }
-  const renderIcon = (icon, instaceDataTestId, classNameIcon) => {
-    if (!icon) {
+  }), [adjustedSize, disabled, selected, color, checkable, checked]);
+  const renderIcon = useMemo(() => (icon, instaceDataTestId, classNameIcon) => {
+    if (!icon || typeof icon === "boolean" || typeof icon === "number") {
       return null;
     }
-    if (typeof icon !== "string") {
-      return icon;
-    } else {
+    if (typeof icon === "string") {
       return /* @__PURE__ */ jsx(
         MenuItemIconStyled,
         {
           ownerState: { ...ownerState },
+          selected,
+          enabledSelected: true,
           src: icon,
           alt: "icon",
           size: adjustedSize,
@@ -64,7 +54,24 @@ const MenuItem = (props) => {
         }
       );
     }
-  };
+    if (React.isValidElement(icon)) {
+      return cloneElement(icon, {
+        selected
+      });
+    }
+    return null;
+  }, [ownerState, adjustedSize, disabled, selected]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      MenuItemSkeletonStyled,
+      {
+        "data-testid": "SkeletonMenuItem",
+        width: skeletonWidth,
+        ownerState: { ...ownerState },
+        className: MENUITEM_CLASSES.skeleton
+      }
+    );
+  }
   const checkedIcon = `${host_static_assets}/${environment_assets}/frontend/components/menu_item/checked.svg`;
   return /* @__PURE__ */ jsxs(
     MenuItemRootStyled,

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

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const menuItemStyles = {
   /**
    * Estilos para el contenedor de los items del menú contenedor

package/components/mui_extended/MenuItem/slots/MenuItemSlots.js

@@ -31,10 +31,10 @@ const MenuItemSkeletonStyled = styled(Skeleton, {
   slot: MenuItemSlots.skeletonMenuItem
 })(menuItemStyles?.skeletonMenuItem);
 export {
-  MenuItemSkeletonStyled as M,
-  MenuItemRootStyled as a,
-  MenuItemIconCheckedStyled as b,
-  MenuItemContainerStyled as c,
-  MenuItemTypographyStyled as d,
-  MenuItemIconStyled as e
+  MenuItemIconStyled as M,
+  MenuItemSkeletonStyled as a,
+  MenuItemRootStyled as b,
+  MenuItemIconCheckedStyled as c,
+  MenuItemContainerStyled as d,
+  MenuItemTypographyStyled as e
 };

package/components/mui_extended/NavLink/NavLink.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
 const navLinkStyles = {
   /* *

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

@@ -1,5 +1,5 @@
 import { S as SELECT_CLASSES } from "./constants.js";
-import { g as getHeightSizeStyles, a as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles, g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const selectStyles = {
   /**
    * Estilos para el componente Select
@@ -64,7 +64,6 @@ const selectStyles = {
         // Tamaño del componente
         ...getSizeStyles(
           theme,
-          theme.generalSettings.isMobile,
           ownerState.size || "medium",
           "action",
           (height) => {
@@ -136,7 +135,6 @@ const selectStyles = {
     // Estilos específicos para el tamaño small
     ...getSizeStyles(
       theme,
-      theme.generalSettings.isMobile,
       ownerState.size || "medium",
       "action",
       (height) => {

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

@@ -1,5 +1,5 @@
 import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 import { T as TEXT_FIELD_CLASSES } from "./constants.js";
 const textFieldStyles = {
   /**

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

@@ -1,4 +1,4 @@
-import { a as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
 const typographyStyles = {
   /**
@@ -42,7 +42,6 @@ const typographyStyles = {
   skeleton: ({ theme, ownerState }) => ({
     ...getSizeStyles(
       theme,
-      theme.generalSettings.isMobile,
       ownerState.size || "medium",
       "base"
     )

package/index.js

@@ -205,11 +205,11 @@ import { i as i2 } from "./utils/isValidDate.js";
 import { g as g26 } from "./utils/getComponentUtilityClass.js";
 import { g as g27 } from "./utils/getPaletteColor.js";
 import { g as g28 } from "./utils/getTypographyStyles.js";
-import { g as g29 } from "./utils/getSizeStyles/getSizeStyles.js";
+import { a as a15 } from "./utils/getSizeStyles/getSizeStyles.js";
 import { O as O2 } from "./utils/ObjectQueue.js";
-import { g as g30, a as a15 } from "./utils/getComponentSlotRoot.js";
+import { g as g29, a as a16 } from "./utils/getComponentSlotRoot.js";
 import { f } from "./utils/formatDistanceToNow/formatDistanteToNow.js";
-import { W as W7, c as c6, b as b4, a as a16, e as e3, d as d7, f as f2 } from "./vendor.js";
+import { W as W7, c as c6, b as b4, a as a17, e as e3, d as d7, f as f2 } from "./vendor.js";
 export {
   A5 as AREAS_DICCTIONARY,
   a4 as AREAS_DICTIONARY_ID,
@@ -386,7 +386,7 @@ export {
   W7 as WithContexts,
   c6 as WithFormAutoValidation,
   b4 as WithForms,
-  a16 as WithPopupsProvider,
+  a17 as WithPopupsProvider,
   e3 as WithScaleIcons,
   d7 as WithWindowsContainer,
   f2 as WithWrapper,
@@ -406,8 +406,8 @@ export {
   b2 as getAreasComponentsDictionary,
   g3 as getAreasDictionary,
   g14 as getCommonActionsDictionary,
-  g30 as getComponentClasses,
-  a15 as getComponentSlotRoot,
+  g29 as getComponentClasses,
+  a16 as getComponentSlotRoot,
   g26 as getComponentUtilityClass,
   g as getDataGridComponentsDictionary,
   g2 as getDataGridRowsFromSet,
@@ -420,7 +420,7 @@ export {
   g9 as getFormatPoints,
   g11 as getFormatPrice,
   g13 as getFormattersComponentsDictionary,
-  g29 as getHeightSizeStyles,
+  a15 as getHeightSizeStyles,
   g17 as getLoadingErrorComponentsDictionary,
   g18 as getMFLoaderComponentsDictionary,
   a8 as getMenuActionsComponentsDictionary,

package/package.json

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

package/utils/getSizeStyles/getSizeStyles.d.ts

@@ -16,7 +16,6 @@ export declare const getHeightSizeStyles: (isMobile: boolean, size: Extract<Size
 /**
  * Utilidad que se encarga de obtener los estilos de tamaño para ser usados en el css de los componentes.
  * @param theme - Objeto de tema de MUI.
- * @param isMobile - Modalidad de dispositivo en el que se encuentra la aplicación (Escritorio y móvil). Se espera que se obtenga del objeto
  * theme.generalSettings.isMobile.
  * @param size - Formato de tamaño definido por el componente o el contexto de AppearanceComponentProvider, puede ser small,
  * medium o large.
@@ -25,4 +24,4 @@ export declare const getHeightSizeStyles: (isMobile: boolean, size: Extract<Size
  * @param property - Propiedad CSS que se desea aplicar (por defecto es 'height').
  * @returns Objeto con los estilos calculados.
  */
-export declare const getSizeStyles: (theme: Theme, isMobile: boolean, size: Extract<Sizes, "small" | "medium">, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((sizeValue: string | number) => Record<string, any>), property?: "height" | "width") => any;
+export declare const getSizeStyles: (theme: Theme, size: Extract<Sizes, "small" | "medium">, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((sizeValue: string | number) => Record<string, any>), property?: "height" | "width") => any;

package/utils/getSizeStyles/getSizeStyles.js

@@ -8,8 +8,8 @@ const getHeightSizeStyles = (isMobile, size, variantSize, css) => {
     ...resolvedCss
   };
 };
-const getSizeStyles = (theme, isMobile, size, variantSize, css, property = "height") => {
-  const sizeValue = theme.vars.size[isMobile ? "mobile" : "desktop"][size][variantSize];
+const getSizeStyles = (theme, size, variantSize, css, property = "height") => {
+  const sizeValue = theme.vars.size[theme.generalSettings.isMobile ? "mobile" : "desktop"][size][variantSize];
   const resolvedCss = typeof css === "function" ? css(sizeValue) : css;
   return {
     [property]: sizeValue,
@@ -17,6 +17,6 @@ const getSizeStyles = (theme, isMobile, size, variantSize, css, property = "heig
   };
 };
 export {
-  getSizeStyles as a,
-  getHeightSizeStyles as g
+  getHeightSizeStyles as a,
+  getSizeStyles as g
 };