@m4l/components 9.1.112 → 9.1.113

package/components/Chip/ChipStyles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../utils/getHeightSizeStyles.js";
+import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const chipStyles = {
   /**
    * Styles for the root element of the chip.

package/components/Label/Label.styles.js

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

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

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../../../../utils/getHeightSizeStyles.js";
+import { g 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/getHeightSizeStyles.js";
+import { g 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/getHeightSizeStyles.js";
+import { g 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/getHeightSizeStyles.js";
+import { g 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/getHeightSizeStyles.js";
+import { g 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/getHeightSizeStyles.js";
+import { g 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/getHeightSizeStyles.js";
+import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const dateTimePickerStyles = {
   /**
    * Estilos para el root cuando esta en Desktop 💻

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
+import { g 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 { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
 import { S as SELECT_CLASSES } from "./constants.js";
+import { a as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const selectStyles = {
   /**
    * Estilos para el componente Select
@@ -20,7 +20,8 @@ const selectStyles = {
         display: "none"
       },
       "& .M4LImage-root": {
-        ...getHeightSizeStyles(
+        ...getSizeStyles(
+          theme,
           theme.generalSettings.isMobile,
           ownerState.size || "medium",
           "base",
@@ -34,7 +35,8 @@ const selectStyles = {
       },
       "& .MuiButtonBase-root": {
         // Tamaño del componente
-        ...getHeightSizeStyles(
+        ...getSizeStyles(
+          theme,
           theme.generalSettings.isMobile,
           ownerState.size || "medium",
           "action",
@@ -78,7 +80,8 @@ const selectStyles = {
         }
       },
       // Tamaño del componente
-      ...getHeightSizeStyles(
+      ...getSizeStyles(
+        theme,
         theme.generalSettings.isMobile,
         ownerState.size || "medium",
         "action",
@@ -143,7 +146,8 @@ const selectStyles = {
     alignItems: "center",
     background: theme.vars.palette.skeleton.transition,
     // Estilos específicos para el tamaño small
-    ...getHeightSizeStyles(
+    ...getSizeStyles(
+      theme,
       theme.generalSettings.isMobile,
       ownerState.size || "medium",
       "action",

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/getHeightSizeStyles.js";
+import { g 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 { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
+import { a as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
 const typographyStyles = {
   /**
@@ -39,7 +39,8 @@ const typographyStyles = {
    * Slot: skeleton
    */
   skeleton: ({ theme, ownerState }) => ({
-    ...getHeightSizeStyles(
+    ...getSizeStyles(
+      theme,
       theme.generalSettings.isMobile,
       ownerState.size || "medium",
       "base"

package/package.json

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

package/utils/getSizeStyles/_test_/getSizeStyles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/{getHeightSizeStyles.d.ts → getSizeStyles/getSizeStyles.d.ts}

@@ -1,5 +1,8 @@
 import { Sizes, SizesComponentsTypes } from '@m4l/styles';
+import { Theme } from '@mui/material';
 /**
+ * Gets height size styles for component CSS.
+ * @deprecated Use getSizeStyles instead. This function will be removed in a future version, use getSizeStyles instead.
  * Utilidad que se encarga de obtener los estilos de tamaño de altura para ser usados en el css de los componentes.
  * @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.
@@ -12,6 +15,7 @@ import { Sizes, SizesComponentsTypes } from '@m4l/styles';
 export declare const getHeightSizeStyles: (isMobile: boolean, size: Extract<Sizes, "small" | "medium">, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((heightSize: string | number) => Record<string, any>)) => any;
 /**
  * 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,
@@ -21,4 +25,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: (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, isMobile: boolean, size: Extract<Sizes, "small" | "medium">, variantSize: SizesComponentsTypes, css?: Record<string, any> | ((sizeValue: string | number) => Record<string, any>), property?: "height" | "width") => any;

package/utils/{getHeightSizeStyles.js → getSizeStyles/getSizeStyles.js}

@@ -8,6 +8,15 @@ 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 resolvedCss = typeof css === "function" ? css(sizeValue) : css;
+  return {
+    [property]: sizeValue,
+    ...resolvedCss
+  };
+};
 export {
+  getSizeStyles as a,
   getHeightSizeStyles as g
 };

package/utils/getSizeStyles/index.d.ts

@@ -0,0 +1 @@
+export * from './getSizeStyles';

package/utils/getSizeStyles/index.js

@@ -0,0 +1 @@
+