@m4l/components 9.1.112 → 9.1.114

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 🏷️
@@ -81,7 +81,7 @@ const labelStyles = {
   iconHelperMessageStyled: ({ theme, ownerState }) => ({
     borderRadius: theme.vars.size.borderRadius.r1,
     '&:hover > [class*="M4LIcon-icon"]': {
-      backgroundColor: theme.vars.palette.info.selected
+      backgroundColor: theme.vars.palette.info.hover
     },
     '& > [class*="M4LIcon-icon"]': {
       backgroundColor: theme.vars.palette.info.enabled

package/components/Label/types.d.ts

@@ -6,27 +6,23 @@ import { Sizes } from '@m4l/styles';
 import { TypographyProps } from '../mui_extended/Typography/types';
 export type LabelVariants = 'standard';
 export interface LabelProps extends Pick<TypographyProps, 'skeletonWidth'> {
-    /**  Mesanje de ayuda opcional que se visualiza cuando se interactua con el tooltip del Icono de informacion */
+    /** Mensaje de ayuda opcional que se visualiza cuando se interactúa con el tooltip del Icono de información. */
     helperMessage?: string | undefined;
-    /** Es la etiqueta de texto principal del componente.*/
+    /** Es la etiqueta de texto principal del componente. */
     label?: string;
-    /** Es una propiedad que permite visualizar el texto que acompaña a la etiqueta `label` Por defecto es `false`.*/
+    /** Es una propiedad que permite visualizar el texto que acompaña a la etiqueta `label`. Por defecto es `false`. */
     mandatory?: boolean;
-    /** Es una etiqueta de texto que define si el campo es obligatorio, por defecto se visualiza un `*` de lo contrario se va a mostrar el valor que se proporciona .*/
+    /** Es una etiqueta de texto que define si el campo es obligatorio, por defecto se visualiza un `*` de lo contrario se va a mostrar el valor que se proporciona. */
     mandatoryMessage?: string;
-    /** Sirve para vincular un elemento de etiqueta con un elemento de formulario, como un campo de entrada, lo que permite que al hacer clic en el texto de la etiqueta, se active el campo correspondiente*/
+    /** Sirve para vincular un elemento de etiqueta con un elemento de formulario, como un campo de entrada, lo que permite que al hacer clic en el texto de la etiqueta, se active el campo correspondiente. */
     htmlFor?: string | undefined;
-    /** Identificador único para la etiqueta html que envuelve al componente, útil para referencias en CSS o JavaScript.*/
+    /** Identificador único para la etiqueta html que envuelve al componente, útil para referencias en CSS o JavaScript. */
     id?: string;
-    /**  Define el tamaño de la etiqueta. Puede ser 'small' o 'medium'. Por defecto es 'medium'. */
+    /** Define el tamaño de la etiqueta. Puede ser 'small' o 'medium'. Por defecto es 'medium'. */
     size?: Extract<Sizes, 'small' | 'medium'>;
-    /**
-     * Los elementos secundarios que se renderizarán dentro del componente.
-     */
+    /** Los elementos secundarios que se renderizarán dentro del componente. */
     children?: React.ReactNode;
-    /**
-     * Clase CSS personalizada que se aplicará al componente.
-     */
+    /** Clase CSS personalizada que se aplicará al componente. */
     className?: string;
     /** Indica si hay un error en el campo asociado a la etiqueta. */
     error?: boolean;
@@ -39,7 +35,7 @@ export type OwnerState = Pick<LabelProps, 'size'>;
 export interface LabelOwnerState extends LabelProps, OwnerState {
     /** Indica si el componente está deshabilitado. */
     disabled?: boolean;
-    /** Define el tamaño del componente */
+    /** Define el tamaño del componente. */
     size?: Extract<Sizes, 'small' | 'medium'>;
 }
 export type LabelSlotsType = keyof typeof LabelSlots;

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.114",
   "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 @@
+