@m4l/components 9.1.130 → 9.1.132

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.130",
+  "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
 };

package/components/DynamicSort/DynamicSort.stories.d.ts

@@ -1,21 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { DynamicSort } from './DynamicSort';
-declare const meta: Meta<typeof DynamicSort>;
-export default meta;
-type Story = StoryObj<typeof DynamicSort>;
-/**
- * Base DynamicSort component
- */
-export declare const Base: Story;
-/**
- * DynamicSort in skeleton mode
- */
-export declare const WithSkeleton: Story;
-/**
- * DynamicFilter With fixed field
- */
-export declare const WithFixedField: Story;
-/**
- * DynamicFilter With props `automatic=true`
- */
-export declare const WithAutomatic: Story;

package/components/DynamicSort/subcomponents/InputSort/InputSortSkeleton.d.ts

@@ -1,5 +0,0 @@
-/**
- * TODO: Documentar
- */
-declare function InputFilterSkeleton(): import("react/jsx-runtime").JSX.Element;
-export default InputFilterSkeleton;

package/components/DynamicSort/subcomponents/InputSort/InputSortSkeleton.js

@@ -1,19 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Skeleton } from "@mui/material";
-function InputFilterSkeleton() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        variant: "circular",
-        width: "16px",
-        height: "16px",
-        sx: { minWidth: "16px", minHeight: "16px" }
-      }
-    ),
-    /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%", height: "16px", sx: { minWidth: "80px" } })
-  ] });
-}
-export {
-  InputFilterSkeleton as I
-};