@m4l/components 9.1.54 → 9.1.55

package/components/Chip/Chip.js

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton, useEnvironment, getPropertyByString } from "@m4l/core";
 import { useTheme } from "@mui/material";
+import clsx from "clsx";
 import { forwardRef } 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";
 const Chip = forwardRef((props, ref) => {
@@ -17,6 +19,7 @@ const Chip = forwardRef((props, ref) => {
     hasIconClose = true,
     onClick,
     onDeleted,
+    className,
     ...others
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -30,7 +33,7 @@ const Chip = forwardRef((props, ref) => {
     theme.vars.palette.default
   );
   const ownerState = {
-    size,
+    chipSize: adjustedSize,
     variant,
     paletteColor,
     color,
@@ -75,9 +78,10 @@ const Chip = forwardRef((props, ref) => {
     {
       role: "button-chip",
       tabIndex: 0,
-      size,
+      size: adjustedSize,
       onClick,
       ownerState: { ...ownerState },
+      className: clsx(className, CHIP_CLASSES.root),
       ref,
       ...others,
       children: [

package/components/Chip/ChipStyles.js

@@ -6,7 +6,7 @@ const chipStyles = {
    * @updatedAt 2024-12-06 13:56:58 - automatic
    * @updatedUser SebastianM - automatic
    */
-  chipRoot: ({ theme, ownerState }) => ({
+  root: ({ theme, ownerState }) => ({
     display: "flex",
     alignItems: "center",
     padding: theme.vars.size.baseSpacings.sp1,
@@ -424,7 +424,7 @@ const chipStyles = {
       }
     },
     // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
+    ...ownerState.chipSize === "small" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.small.base,
         minHeight: theme.vars.size.mobile.small.base
@@ -434,7 +434,7 @@ const chipStyles = {
       }
     },
     // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
+    ...ownerState.chipSize === "medium" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.medium.base,
         minHeight: theme.vars.size.mobile.medium.base
@@ -472,7 +472,7 @@ const chipStyles = {
    */
   iconButton: ({ theme, ownerState }) => ({
     // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
+    ...ownerState.chipSize === "small" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.small.base,
         width: theme.vars.size.mobile.small.base,
@@ -484,7 +484,7 @@ const chipStyles = {
       }
     },
     // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
+    ...ownerState.chipSize === "medium" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.medium.base,
         width: theme.vars.size.mobile.medium.base,
@@ -507,7 +507,7 @@ const chipStyles = {
     width: "100%",
     background: theme.vars.palette.skeleton.transition,
     // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
+    ...ownerState.chipSize === "small" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.small.base,
         minHeight: theme.vars.size.mobile.small.base
@@ -517,7 +517,7 @@ const chipStyles = {
       }
     },
     // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
+    ...ownerState.chipSize === "medium" && {
       ...theme.generalSettings.isMobile ? {
         height: theme.vars.size.mobile.medium.base,
         minHeight: theme.vars.size.mobile.medium.base

package/components/Chip/constants.d.ts

@@ -6,3 +6,7 @@
  * @default 'M4LChip'
  */
 export declare const CHIP_KEY_COMPONENT = "M4LChip";
+/**
+ * Inventario de clases CSS para el componente Chip
+ */
+export declare const CHIP_CLASSES: Record<string, string>;

package/components/Chip/constants.js

@@ -1,4 +1,8 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { C as ChipSlots } from "./slots/ChipEnum.js";
 const CHIP_KEY_COMPONENT = "M4LChip";
+const CHIP_CLASSES = getComponentClasses(CHIP_KEY_COMPONENT, ChipSlots);
 export {
-  CHIP_KEY_COMPONENT as C
+  CHIP_CLASSES as C,
+  CHIP_KEY_COMPONENT as a
 };

package/components/Chip/slots/ChipEnum.d.ts

@@ -1,7 +1,7 @@
-export declare const ChipSlots: {
-    chipRoot: string;
-    skeletonChip: string;
-    chipIcon: string;
-    textChip: string;
-    iconButton: string;
-};
+export declare enum ChipSlots {
+    root = "root",
+    skeletonChip = "skeleton",
+    chipIcon = "icon",
+    textChip = "text",
+    iconButton = "iconButton"
+}

package/components/Chip/slots/ChipEnum.js

@@ -1,10 +1,11 @@
-const ChipSlots = {
-  chipRoot: "Root",
-  skeletonChip: "Skeleton",
-  chipIcon: "Icon",
-  textChip: "Text",
-  iconButton: "IconButton"
-};
+var ChipSlots = /* @__PURE__ */ ((ChipSlots2) => {
+  ChipSlots2["root"] = "root";
+  ChipSlots2["skeletonChip"] = "skeleton";
+  ChipSlots2["chipIcon"] = "icon";
+  ChipSlots2["textChip"] = "text";
+  ChipSlots2["iconButton"] = "iconButton";
+  return ChipSlots2;
+})(ChipSlots || {});
 export {
   ChipSlots as C
 };

package/components/Chip/slots/ChipSlots.js

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { c as chipStyles } from "../ChipStyles.js";
-import { C as CHIP_KEY_COMPONENT } from "../constants.js";
+import { a as CHIP_KEY_COMPONENT } from "../constants.js";
 import { C as ChipSlots } from "./ChipEnum.js";
 import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
@@ -8,8 +8,8 @@ import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
 import { I as Icon } from "../../Icon/Icon.js";
 const ChipRootStyled = styled("div", {
   name: CHIP_KEY_COMPONENT,
-  slot: ChipSlots.chipRoot
-})(chipStyles?.chipRoot);
+  slot: ChipSlots.root
+})(chipStyles?.root);
 const SkeletonChipStyled = styled(Skeleton, {
   name: CHIP_KEY_COMPONENT,
   slot: ChipSlots.skeletonChip

package/components/Chip/types.d.ts

@@ -6,36 +6,66 @@ import { CHIP_KEY_COMPONENT } from './constants';
 import { ChipSlots } from './slots';
 type ChipVariants = 'contained' | 'outlined';
 /**
- * Props for the `Chip` component, extending the original properties of Material UI.
- * [startIcon] - Optional prop for the icon on the left in the `Chip`.
- * [endIcon] - Optional prop for the icon on the right in the `Chip`.
- * label - Text describing the `Chip`.
- * [componentPaletteColor] - Customization of the component's palette color.
- * [size] - Size of the `Chip` (default 'medium').
- * [error] - Indicates if the `Chip` is in an error state.
- * [variant] - Defines the variant of the `Chip` (default 'contained').
- * [color] - Defines the color of the `Chip`.
+ * Propiedades del componente `Chip`.
  * @createdAt 2024-12-06 11:17:21 - automatic
  */
 export interface ChipProps {
+    /**
+     * Optional prop for the icon on the left in the `Chip`. Can accept a URL as a string to render an image icon, or a React component to render it directly.
+     */
     startIcon?: ReactNode;
+    /**
+     * Optional prop for the icon on the right in the `Chip`. Can accept a URL as a string to render an image icon, or a React component to render it directly.
+     */
     endIcon?: ReactNode;
+    /**
+     * Size of the `Chip` (default 'medium').
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Text describing the `Chip`.
+     */
     label?: string;
+    /**
+     * Defines the variant of the `Chip` (default 'contained').
+     */
     variant?: ChipVariants;
+    /**
+     * Defines the color of the `Chip`.
+     */
     color?: Exclude<ComponentPalletColor, 'primary'>;
+    /**
+     * Define el with of skeleton mode
+     */
     skeletonWidth?: string | number;
+    /**
+     * OPtion prop to render the close icon
+     */
     hasIconClose?: boolean;
+    /**
+     * Opacity of the `Chip`.
+     */
     opacity?: boolean;
+    /**
+     * Function to be executed when the `Chip` is clicked.
+     */
     onClick?: () => void;
+    /**
+     * Function to be executed when the `Chip` is deleted.
+     */
     onDeleted?: EventHandler<any>;
+    /**
+     * Class name for the `Chip`.
+     */
+    className?: string;
 }
 /**
  * Owner state of the `Chip` used to define internal style and behavior properties.
  */
-export interface ChipOwnerState extends Pick<ChipProps, 'size' | 'variant' | 'color'> {
+export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'color'> {
     opacity?: boolean;
     paletteColor: PaletteColor;
+    chipSize: ChipProps['size'];
 }
 /**
  * Defines the types of Slots available for the `Chip`.
@@ -44,5 +74,5 @@ export type ChipSlotsType = keyof typeof ChipSlots;
 /**
  * Styles applicable to the `Chip` using themes and custom slots.
  */
-export type ChipStyles = Partial<OverridesStyleRules<ChipSlotsType, typeof CHIP_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type ChipStyles = OverridesStyleRules<ChipSlotsType, typeof CHIP_KEY_COMPONENT, Theme>;
 export {};

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

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../../../../../utils/getHeightSizeStyles.js";
 import { a as ITEM_IN_TREE_ACTIVE, I as ITEM_ACTIVE } from "../../../../constants.js";
 const containerMenuItemsMainStyles = {
   /**
@@ -12,34 +13,21 @@ const containerMenuItemsMainStyles = {
     display: "flex",
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings["sp0-5"],
-    "& .M4LMenuItem-menuItemContainer": {
-      // Estilos específicos para el tamaño small
-      ...ownerState.sidebarSize === "small" && {
-        ...theme.generalSettings.isMobile ? {
-          minHeight: theme.vars.size.mobile.small.action
-        } : {
-          minHeight: theme.vars.size.desktop.small.action
-        }
-      },
-      // Estilos específicos para el tamaño medium
-      ...ownerState.sidebarSize === "medium" && {
-        ...theme.generalSettings.isMobile ? {
-          minHeight: theme.vars.size.mobile.medium.action
-        } : {
-          minHeight: theme.vars.size.desktop.medium.action
-        }
-      }
-    },
-    [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "container"
+    ),
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"]`]: {
       borderColor: theme.vars.palette.divider,
       "& span": {
         color: theme.vars.palette.text.primary
       }
     },
-    [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_IN_TREE_ACTIVE}"] .M4LIconClass-root`]: {
       background: theme.vars.palette.text.primary
     },
-    [`&.M4LListMenuItem-root > .M4LMenuItemRoot[class*="${ITEM_ACTIVE}"]`]: {
+    [`&.M4LListMenuItem-root > .M4LMenuItem-root[class*="${ITEM_ACTIVE}"]`]: {
       borderColor: theme.vars.palette.primary.main,
       "& span": {
         color: theme.vars.palette.primary.main

package/components/mui_extended/Autocomplete/Autocomplete.js

@@ -3,6 +3,7 @@ import { useModuleDictionary, useModuleSkeleton, useEnvironment, getPropertyBySt
 import { useTheme } from "@mui/material";
 import { forwardRef, useState, useMemo, useEffect, useCallback } from "react";
 import { w as withRenderOption } from "./renderOptions/index.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { A as AutocompleteStyled, P as PopperComponentStyled, R as RenderInputStyled, C as ChipStyled, I as ImageStyled, a as CircularProgressStyled, b as IconButtonStyled } from "./slots /AutocompleteSlots.js";
 import { T as Typography } from "../Typography/Typography.js";
 const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
@@ -40,6 +41,8 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
   const theme = useTheme();
   const { host_static_assets, environment_assets } = useEnvironment();
   const [open, setOpen] = useState(false);
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   useMemo(
     () => getOptionUrlImage !== void 0,
     [getOptionUrlImage]
@@ -133,7 +136,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
     theme.vars.palette.default
   );
   const ownerState = {
-    size,
+    size: adjustedSize,
     variant,
     disabled,
     paletteColor,
@@ -173,7 +176,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       disableClearable: true,
       multiple,
       onKeyDown: checkKeyDown,
-      size,
+      size: adjustedSize,
       ref,
       autoSelect: false,
       options,
@@ -185,6 +188,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
           PopperComponentStyled,
           {
             ...otherPopperProps,
+            size: adjustedSize,
             placement: "bottom-start",
             ownerState: { ...ownerState }
           }
@@ -200,9 +204,9 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
       onChange: handleChange,
       filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
       loading,
-      loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel("autocomplete.loading_options") }),
+      loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.loading_options") }),
       disabled,
-      noOptionsText: getLabel("autocomplete.no_options"),
+      noOptionsText: /* @__PURE__ */ jsx(Typography, { variant: "body", size: adjustedSize, children: getLabel("autocomplete.no_options") }),
       renderOption: (renderProps, option) => {
         const isSelected = multiple ? Array.isArray(selectedValue) && selectedValue.some((val) => isOptionEqualToValueLocal(option, val)) : isOptionEqualToValueLocal(option, selectedValue);
         return withRenderOption(color)(renderProps, {
@@ -224,7 +228,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
             ...params,
             color,
             error,
-            size,
+            size: adjustedSize,
             variant,
             InputLabelProps: {
               ...params.InputLabelProps,
@@ -240,7 +244,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
               startAdornment: multiple ? Array.isArray(selectedValue) ? selectedValue.map((option, index) => /* @__PURE__ */ jsx(
                 ChipStyled,
                 {
-                  size,
+                  size: adjustedSize,
                   label: getOptionLabelLocal(option),
                   opacity: true,
                   onDeleted: () => handleDelete(option),
@@ -260,7 +264,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
                 {
                   ownerState: { ...ownerState },
                   color,
-                  size
+                  size: adjustedSize
                 }
               ) : /* @__PURE__ */ jsx("div", { children: refresh ? /* @__PURE__ */ jsx(
                 IconButtonStyled,
@@ -269,7 +273,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
                   src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/round_refresh.svg`,
                   onClick: handleRefresh,
                   disabled,
-                  size
+                  size: adjustedSize
                 }
               ) : /* @__PURE__ */ jsx(
                 IconButtonStyled,
@@ -278,7 +282,7 @@ const Autocomplete = forwardRef(function Autocomplete2(props, ref) {
                   src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
                   onClick: (event) => onOpenLocal(event),
                   disabled,
-                  size
+                  size: adjustedSize
                 }
               ) })
             },

package/components/mui_extended/Autocomplete/AutocompleteStyles.js

@@ -6,16 +6,11 @@ const autocompleteSyles = {
    * @updatedAt 2024-12-10 15:24:11 - automatic
    * @updatedUser SebastianM - automatic
    */
-  iconButton: ({ theme, ownerState }) => ({
+  iconButton: () => ({
     position: "absolute",
     top: "50%",
-    right: theme.vars.size.baseSpacings["sp0-5"],
-    transform: "translateY(-50%)",
-    ...ownerState.disabled && {
-      "& .M4LIconClass-root": {
-        backgroundColor: theme.vars.palette.text.disabled
-      }
-    }
+    right: 0,
+    transform: "translateY(-50%)"
   }),
   /**
    * Styles for the autocomplete component.
@@ -26,58 +21,19 @@ const autocompleteSyles = {
    * @updatedAt 2024-12-10 15:24:11 - automatic
    * @updatedUser SebastianM - automatic
    */
-  autocomplete: ({ theme, ownerState }) => ({
-    "& .MuiFormControl-root": {
-      height: "auto",
-      paddingLeft: theme.vars.size.baseSpacings.sp1,
-      paddingRight: theme.vars.size.baseSpacings.sp1,
-      "& .MuiInputBase-root": {
-        paddingLeft: theme.vars.size.baseSpacings.sp1,
-        paddingRight: theme.vars.size.baseSpacings.sp0,
-        gap: theme.vars.size.baseSpacings.sp1,
-        ":focus-within": {
-          '&:focus-within .MuiIconButton-root:not([role="button-chip"] .MuiIconButton-root)': {
-            "& .M4LIconClass-root": {
-              transform: "rotate(180deg)",
-              transition: "transform 0.3s ease"
-            }
-          }
-        }
-      }
-    },
-    ...ownerState.disabled && {
-      "& .MuiInputBase-root": {
-        borderColor: theme.vars.palette.text.disabled
-      }
-    }
-  }),
+  autocomplete: {},
   /**
    * Styles for the typography component.
    */
-  typography: ({ theme, ownerState }) => ({
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.action,
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        height: theme.vars.size.desktop.small.action,
-        minHeight: theme.vars.size.desktop.small.action
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.action,
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        height: theme.vars.size.desktop.medium.action,
-        minHeight: theme.vars.size.desktop.medium.action
-      }
-    }
+  typography: {},
+  menuList: {},
+  /**
+   * Styles for the menu item component.
+   */
+  menuItem: ({ theme }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp1}!important`,
+    borderRadius: `${theme.vars.size.borderRadius.r0}!important`
   }),
-  menuList: () => ({}),
-  menuItem: () => ({}),
   /**
    * Styles for the image component.
    * @author SebastianM - automatic
@@ -108,9 +64,13 @@ const autocompleteSyles = {
    * @updatedAt 2024-12-10 15:24:11 - automatic
    * @updatedUser SebastianM - automatic
    */
-  textField: () => ({
+  textField: ({ theme }) => ({
     position: "relative",
-    height: "auto"
+    height: "auto",
+    "& .MuiInputBase-root": {
+      padding: theme.vars.size.baseSpacings.sp1,
+      gap: theme.vars.size.baseSpacings.sp1
+    }
   }),
   /**
    * Styles for the popper component.

package/components/mui_extended/Autocomplete/dictionary.d.ts

@@ -1,3 +1 @@
-import { Dictionary } from '@m4l/core';
 export declare function getAutocompleteComponentsDictionary(): string[];
-export declare const defaultAutocompleteDictionary: Dictionary;

package/components/mui_extended/Autocomplete/renderOptions/index.d.ts

@@ -15,5 +15,5 @@ export declare function withRenderOption<T>(color?: 'primary' | 'default' | 'err
     disabled?: boolean;
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
-    size?: Extract<Sizes, "small" | "medium">;
+    size: Extract<Sizes, "small" | "medium">;
 }) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Autocomplete/renderOptions/index.js

@@ -1,10 +1,11 @@
 import { createElement } from "react";
-import { M as MenuItem } from "../../MenuItem/MenuItem.js";
+import { M as MenuItemStyled } from "../slots /AutocompleteSlots.js";
 function withRenderOption(color) {
   return function RenderOption(optionProps, option) {
     return /* @__PURE__ */ createElement(
-      MenuItem,
+      MenuItemStyled,
       {
+        ownerState: {},
         ...optionProps,
         selected: option.selected,
         color,

package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.js

@@ -6,12 +6,12 @@ import { a as autocompleteSyles } from "../AutocompleteStyles.js";
 import { A as AUTOCOMPLETE_KEY_COMPONENT } from "../constants.js";
 import { A as AutocompleteSlots } from "./AutocompleteEnum.js";
 import { I as IconButton } from "../../IconButton/IconButton.js";
+import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 import { C as CircularProgress } from "../../CircularProgress/CircularProgress.js";
 import { T as TextField } from "../../TextField/TextField.js";
 import { T as Typography } from "../../Typography/Typography.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { P as Popper } from "../../Popper/Popper.js";
-import { M as MenuItem } from "../../MenuItem/MenuItem.js";
 const IconButtonStyled = styled(IconButton, {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.iconButton
@@ -24,7 +24,7 @@ const ChipStyled = styled(Chip, {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.chip
 })(autocompleteSyles?.chip);
-styled(MenuItem, {
+const MenuItemStyled = styled(MenuItem, {
   name: AUTOCOMPLETE_KEY_COMPONENT,
   slot: AutocompleteSlots.menuItem
 })(autocompleteSyles?.menuItem);
@@ -64,6 +64,7 @@ export {
   AutocompleteStyled as A,
   ChipStyled as C,
   ImageStyled as I,
+  MenuItemStyled as M,
   PopperComponentStyled as P,
   RenderInputStyled as R,
   CircularProgressStyled as a,

package/components/mui_extended/MenuItem/MenuItem.js

@@ -3,7 +3,7 @@ import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { useTheme } from "@mui/material";
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { M as MENUITEM_KEY_COMPONENT } from "./constants.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 { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const MenuItem = (props) => {
@@ -18,6 +18,7 @@ const MenuItem = (props) => {
     disabled = false,
     size = "medium",
     checked = false,
+    className,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -42,11 +43,12 @@ const MenuItem = (props) => {
       {
         "data-testid": "SkeletonMenuItem",
         width: skeletonWidth,
-        ownerState: { ...ownerState }
+        ownerState: { ...ownerState },
+        className: MENUITEM_CLASSES.skeleton
       }
     );
   }
-  const renderIcon = (icon, instaceDataTestId, className) => {
+  const renderIcon = (icon, instaceDataTestId, classNameIcon) => {
     if (!icon) {
       return null;
     }
@@ -62,14 +64,13 @@ const MenuItem = (props) => {
           size: adjustedSize,
           disabled,
           instaceDataTestId,
-          className
+          className: classNameIcon
         }
       );
     }
   };
   const checkedIcon = "https://s3.us-east-1.amazonaws.com/static.made4labs/environments/d1/frontend/components/menu_item/checked.svg";
   const hasCheckedIcon = checked && checkedIcon;
-  const classRoot = getComponentSlotRoot(MENUITEM_KEY_COMPONENT);
   return /* @__PURE__ */ jsxs(
     MenuItemRootStyled,
     {
@@ -79,7 +80,7 @@ const MenuItem = (props) => {
       disabled,
       disableRipple: true,
       size: adjustedSize,
-      className: clsx("M4LMenuItemRoot", classRoot),
+      className: clsx(className, MENUITEM_CLASSES.root),
       "data-testid": "MenuItemRoot",
       children: [
         hasCheckedIcon && /* @__PURE__ */ jsx(

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

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
 const menuItemStyles = {
   /**
    * Estilos para el contenedor de los items del menú
@@ -14,80 +15,85 @@ const menuItemStyles = {
    * @createdAt 2024-12-27 08:28:33 - automatic
    * @author Andrés Quintero - automatic
    */
-  menuItemRoot: ({ theme, ownerState }) => ({
+  root: ({ theme, ownerState }) => ({
     width: "100%",
     gap: theme.vars.size.baseSpacings.sp3,
     padding: theme.vars.size.baseSpacings.sp1,
     borderRadius: theme.vars.size.borderRadius.r0,
     ...ownerState.selected && {
-      ...ownerState.color === "primary" && {
-        borderLeft: theme.vars.size.borderStroke.container,
-        borderColor: ownerState.paletteColor?.main
-      },
-      "& .M4lclassCssSpecificity.M4lclassCssSpecificity": {
+      borderLeft: theme.vars.size.borderStroke.container,
+      borderColor: ownerState.paletteColor?.main,
+      "& .M4LTypography-root": {
         color: ownerState.paletteColor?.enabled
       },
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: ownerState.paletteColor?.enabled
       },
       "&:hover": {
         backgroundColor: ownerState.paletteColor?.hoverOpacity,
-        "&:active": {
-          backgroundColor: ownerState.paletteColor?.activeOpacity,
-          "& .M4lclassCssSpecificity": {
-            color: ownerState.paletteColor?.active
-          },
-          "& .M4LIconClass-root": {
-            color: ownerState.paletteColor?.active
-          }
+        "& .M4LIcon-icon": {
+          backgroundColor: ownerState.paletteColor?.hover
+        },
+        "& .M4LTypography-root": {
+          color: ownerState.paletteColor?.hover
+        }
+      },
+      "&:active": {
+        backgroundColor: ownerState.paletteColor?.activeOpacity,
+        "& .M4LIcon-icon": {
+          backgroundColor: ownerState.paletteColor?.active
+        },
+        "& .M4LTypography-root": {
+          color: ownerState.paletteColor?.active
+        }
+      },
+      "&:focus-visible": {
+        backgroundColor: ownerState.paletteColor?.activeOpacity,
+        outline: theme.vars.size.borderStroke.container,
+        outlineColor: theme.vars.palette.border.main,
+        outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+        "& .M4LIcon-icon": {
+          color: ownerState.paletteColor?.active
         }
       }
     },
     ...ownerState.color === "default" && {
-      "& .M4lclassCssSpecificity": {
+      "& .M4LTypography-root": {
         color: theme.vars.palette.text.primary
       },
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: theme.vars.palette.text.primary
       },
       "&:hover": {
-        backgroundColor: ownerState.paletteColor?.hoverOpacity,
-        "&:active": {
-          backgroundColor: ownerState.paletteColor?.activeOpacity,
-          "&.M4lclassCssSpecificity": {
-            color: theme.vars.palette.text.primary
-          },
-          "& .M4LIconClass-root": {
-            backgroundColor: theme.vars.palette.text.primary
-          }
+        backgroundColor: ownerState.paletteColor?.hoverOpacity
+      },
+      "&:active": {
+        backgroundColor: ownerState.paletteColor?.activeOpacity,
+        "& .M4LIcon-icon": {
+          backgroundColor: theme.vars.palette.text.primary
         }
       }
     },
     ...ownerState.disabled && {
       pointerEvents: "none",
-      "& .M4lclassCssSpecificity.M4lclassCssSpecificity": {
+      "& .M4LTypography-root": {
         color: theme.vars.palette.text.disabled
       },
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: theme.vars.palette.text.disabled
       }
     },
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        minHeight: theme.vars.size.desktop.small.action
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action",
+      (height) => {
+        return {
+          height: "auto!important",
+          minHeight: `${height}!important`
+        };
       }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        minHeight: theme.vars.size.desktop.medium.action
-      }
-    }
+    )
   }),
   /**
    * Estilos para el icono de los items del menú
@@ -110,7 +116,7 @@ const menuItemStyles = {
    */
   menuItemIconChecked: ({ ownerState }) => ({
     ...ownerState.selected && {
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: ownerState.paletteColor?.main
       }
     }
@@ -146,26 +152,11 @@ const menuItemStyles = {
     display: "flex",
     alignItems: "center",
     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.action,
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        height: theme.vars.size.desktop.small.action,
-        minHeight: theme.vars.size.desktop.small.action
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.action,
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        height: theme.vars.size.desktop.medium.action,
-        minHeight: theme.vars.size.desktop.medium.action
-      }
-    }
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action"
+    )
   })
 };
 export {

package/components/mui_extended/MenuItem/constants.d.ts

@@ -6,3 +6,7 @@
  * @default 'M4LMenuItem'
  */
 export declare const MENUITEM_KEY_COMPONENT = "M4LMenuItem";
+/**
+ * Inventario de clases CSS para el componente MenuItem
+ */
+export declare const MENUITEM_CLASSES: Record<string, string>;

package/components/mui_extended/MenuItem/constants.js

@@ -1,4 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { M as MenuItemSlots } from "./slots/MenuItemEnum.js";
 const MENUITEM_KEY_COMPONENT = "M4LMenuItem";
+const MENUITEM_CLASSES = getComponentClasses(MENUITEM_KEY_COMPONENT, MenuItemSlots);
 export {
-  MENUITEM_KEY_COMPONENT as M
+  MENUITEM_CLASSES as M,
+  MENUITEM_KEY_COMPONENT as a
 };

package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts

@@ -1,5 +1,5 @@
 export declare enum MenuItemSlots {
-    menuItemRoot = "menuItemRoot",
+    root = "menuItemRoot",
     menuItemIcon = "menuItemIcon",
     menuItemIconChecked = "menuItemIconChecked",
     menuItemContainer = "menuItemContainer",

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

@@ -1,5 +1,5 @@
 var MenuItemSlots = /* @__PURE__ */ ((MenuItemSlots2) => {
-  MenuItemSlots2["menuItemRoot"] = "menuItemRoot";
+  MenuItemSlots2["root"] = "menuItemRoot";
   MenuItemSlots2["menuItemIcon"] = "menuItemIcon";
   MenuItemSlots2["menuItemIconChecked"] = "menuItemIconChecked";
   MenuItemSlots2["menuItemContainer"] = "menuItemContainer";

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

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { MenuItem } from "@mui/material";
-import { M as MENUITEM_KEY_COMPONENT } from "../constants.js";
+import { a as MENUITEM_KEY_COMPONENT } from "../constants.js";
 import { m as menuItemStyles } from "../MenuItem.styles.js";
 import { M as MenuItemSlots } from "./MenuItemEnum.js";
 import { T as Typography } from "../../Typography/Typography.js";
@@ -8,8 +8,8 @@ import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { I as Icon } from "../../../Icon/Icon.js";
 const MenuItemRootStyled = styled(MenuItem, {
   name: MENUITEM_KEY_COMPONENT,
-  slot: MenuItemSlots.menuItemRoot
-})(menuItemStyles?.menuItemRoot);
+  slot: MenuItemSlots.root
+})(menuItemStyles?.root);
 const MenuItemContainerStyled = styled("div", {
   name: MENUITEM_KEY_COMPONENT,
   slot: MenuItemSlots.menuItemContainer

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

@@ -5,27 +5,48 @@ import { MenuItemSlots } from './slots';
 import { MENUITEM_KEY_COMPONENT } from './constants';
 import { ReactNode } from 'react';
 /**
- * Props para el componente `MenuItem`, extendiendo las propiedades originales de Material UI.
- * Omit<MUIMenuItemProps, 'size' | 'color'>
- * [startIcon] - Prop opcional para el ícono a la izquierda en el `MenuItem`.
- * [endIcon] - Prop opcional para el ícono a la derecha en el `MenuItem`.
- * label - Texto que describe el `MenuItem`.
- * [selected] - Indica si el item está seleccionado.
- * [componentPaletteColor] - Personalización del color de la paleta del componente.
- * [color] - Define el color del `MenuItem` (solo 'primary' permitido).
- * [disabled] - Indica si el `MenuItem` está deshabilitado.
- * [size] - Tamaño del `MenuItem` (por defecto 'medium').
+ * Propiedades del componente `MenuItem`.
  */
 export interface MenuItemProps extends Omit<MUIMenuItemProps, 'size' | 'color'> {
+    /**
+     * Prop opcional para el ícono a la izquierda en el `MenuItem`
+     */
     startIcon?: ReactNode;
+    /**
+     * Prop opcional para el ícono a la derecha en el `MenuItem`
+     */
     endIcon?: ReactNode;
+    /**
+     * Texto que describe el `MenuItem`
+     */
     label: string;
+    /**
+     * Indica si el item está seleccionado
+     */
     selected?: boolean;
+    /**
+     * Define el color del `MenuItem`
+     */
     color?: Extract<ComponentPalletColor, 'primary' | 'default' | 'error'>;
+    /**
+     * Personalización del color de la paleta del componente
+     */
     componentPaletteColor?: ComponentPalletColor;
+    /**
+     * Indica si el `MenuItem` está deshabilitado
+     */
     disabled?: boolean;
+    /**
+     * Define el tamaño del `MenuItem`
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Define el with of skeleton mode
+     */
     skeletonWidth?: string | number;
+    /**
+     * Define si el ícono de check está activo
+     */
     checked?: boolean;
 }
 /**
@@ -43,4 +64,4 @@ export type MenuItemSlotsType = keyof typeof MenuItemSlots;
 /**
  * Estilos aplicables al `MenuItem` utilizando temas y slots personalizados.
  */
-export type MenuItemStyles = Partial<OverridesStyleRules<MenuItemSlotsType, typeof MENUITEM_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type MenuItemStyles = OverridesStyleRules<MenuItemSlotsType, typeof MENUITEM_KEY_COMPONENT, Theme>;

package/components/mui_extended/TextField/TextField.js

@@ -47,11 +47,12 @@ const TextField = (props) => {
     TextFieldRootStyled,
     {
       ownerState: { ...ownerState },
-      className: clsx(TEXT_FIELD_CLASSES.root, TEXT_FIELD_CLASSES[variant], className),
+      className: clsx(TEXT_FIELD_CLASSES.root, TEXT_FIELD_CLASSES.variant, className),
       ...getPropDataTestId(TEXT_FIELD_KEY_COMPONENT, TextFieldSlots.root, dataTestId),
       autoComplete,
       value,
       inputMode: "numeric",
+      disabled,
       inputProps: {
         ...inputProps,
         disabled,

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

@@ -18,8 +18,8 @@ const textFieldStyles = {
     // Estilos globales del TextField 🌎
     "& .MuiInputBase-root": {
       // Paddings
-      paddingRight: theme.vars.size.baseSpacings.sp1,
       paddingLeft: theme.vars.size.baseSpacings.sp1,
+      paddingRight: 0,
       paddingTop: 0,
       paddingBottom: 0,
       // Estilo de los bordes
@@ -29,25 +29,30 @@ const textFieldStyles = {
       borderRadius: theme.vars.size.borderRadius.r1,
       // Altura
       height: "100%",
-      // Estilos de cuando esta deshabilitado
-      ...ownerState.disabled && {
-        borderColor: `${theme.vars.palette.border.disabled}!important`
-        // pointerEvents: ownerState.disabled ? 'none' : 'auto',
-      },
+      // transición
+      transition: "all 0.2s ease",
+      // Espaciado entre elementos
       ...getHeightSizeStyles(
         theme.generalSettings.isMobile,
         ownerState.size || "medium",
-        "action"
+        "action",
+        (height) => {
+          return {
+            height: "auto",
+            minHeight: height
+          };
+        }
       ),
       // ↴ Overrides ❌
       // Estilos del input
       "& > .MuiInputBase-input": {
         // ↴ Overrides ❌
-        paddingTop: 0,
-        paddingBottom: 0,
         paddingLeft: theme.vars.size.baseSpacings.sp1,
         paddingRight: theme.vars.size.baseSpacings.sp1,
+        paddingTop: 0,
+        paddingBottom: 0,
         fontFamily: theme.typography.fontFamily,
+        color: ownerState.disabled ? theme.vars.palette.text.disabled : theme.vars.palette.text.primary,
         ...getTypographyStyles(
           theme.generalSettings.isMobile,
           ownerState.size || "medium",
@@ -55,8 +60,16 @@ const textFieldStyles = {
         ),
         "&::placeholder": {
           color: theme.palette.text.disabled
+        },
+        "&:-webkit-autofill": {
+          backgroundColor: "transparent!important"
         }
       },
+      // Estilos de cuando esta deshabilitado
+      ...ownerState.disabled && {
+        borderColor: `${theme.vars.palette.border.disabled}!important`,
+        pointerEvents: ownerState.disabled ? "none" : "auto"
+      },
       // Estilos del los adorments
       "& .MuiInputAdornment-root": {
         height: "auto",
@@ -71,7 +84,10 @@ const textFieldStyles = {
         display: "none"
       },
       "& .MuiInputAdornment-root .M4LIcon-icon": {
-        backgroundColor: ownerState.error ? ownerState.paletteColor?.enabled : theme.vars.palette.text.primary
+        backgroundColor: ownerState.error ? ownerState.paletteColor?.enabled : theme.vars.palette.text.primary,
+        ...ownerState.disabled && {
+          backgroundColor: theme.vars.palette.text.disabled
+        }
       },
       "&:hover": {
         backgroundColor: ownerState.paletteColor?.hoverOpacity,

package/components/mui_extended/TextField/constants.d.ts

@@ -1,8 +1,8 @@
-import { TexFieldVariants, TextFieldSlots } from './slots';
+import { TexFieldComplementaryClasses, TextFieldSlots } from './slots';
 export declare const TEXT_FIELD_KEY_COMPONENT = "M4LTextField";
 export declare const COMBINATED_TEXTFIELD_ENUMS: {
-    outlined: TexFieldVariants.outlined;
-    text: TexFieldVariants.text;
+    outlined: TexFieldComplementaryClasses.outlined;
+    text: TexFieldComplementaryClasses.text;
     root: TextFieldSlots.root;
     skeleton: TextFieldSlots.skeleton;
 };

package/components/mui_extended/TextField/constants.js

@@ -1,9 +1,9 @@
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
-import { T as TextFieldSlots, a as TexFieldVariants } from "./slots/TextFieldEnum.js";
+import { T as TextFieldSlots, a as TexFieldComplementaryClasses } from "./slots/TextFieldEnum.js";
 const TEXT_FIELD_KEY_COMPONENT = "M4LTextField";
 const COMBINATED_TEXTFIELD_ENUMS = {
   ...TextFieldSlots,
-  ...TexFieldVariants
+  ...TexFieldComplementaryClasses
 };
 const TEXT_FIELD_CLASSES = getComponentClasses(TEXT_FIELD_KEY_COMPONENT, COMBINATED_TEXTFIELD_ENUMS);
 export {

package/components/mui_extended/TextField/slots/TextFieldEnum.d.ts

@@ -2,7 +2,7 @@ export declare enum TextFieldSlots {
     root = "root",
     skeleton = "skeleton"
 }
-export declare enum TexFieldVariants {
+export declare enum TexFieldComplementaryClasses {
     outlined = "outlined",
     text = "text"
 }

package/components/mui_extended/TextField/slots/TextFieldEnum.js

@@ -3,12 +3,12 @@ var TextFieldSlots = /* @__PURE__ */ ((TextFieldSlots2) => {
   TextFieldSlots2["skeleton"] = "skeleton";
   return TextFieldSlots2;
 })(TextFieldSlots || {});
-var TexFieldVariants = /* @__PURE__ */ ((TexFieldVariants2) => {
-  TexFieldVariants2["outlined"] = "outlined";
-  TexFieldVariants2["text"] = "text";
-  return TexFieldVariants2;
-})(TexFieldVariants || {});
+var TexFieldComplementaryClasses = /* @__PURE__ */ ((TexFieldComplementaryClasses2) => {
+  TexFieldComplementaryClasses2["outlined"] = "outlined";
+  TexFieldComplementaryClasses2["text"] = "text";
+  return TexFieldComplementaryClasses2;
+})(TexFieldComplementaryClasses || {});
 export {
   TextFieldSlots as T,
-  TexFieldVariants as a
+  TexFieldComplementaryClasses as a
 };

package/components/mui_extended/Typography/Typography.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useModuleSkeleton } from "@m4l/core";
-import { T as TYPOGRAPHY_CLASS_NAME_SPECIFY, a as TYPOGRAPHY_KEY_COMPONENT } from "./constants.js";
+import { T as TYPOGRAPHY_CLASS_NAME_SPECIFY, a as TYPOGRAPHY_CLASSES, b as TYPOGRAPHY_KEY_COMPONENT } from "./constants.js";
 import { T as TypographySlots } from "./slots/typographyEnum.js";
 import { S as StyledMUITypography, a as StyledSkeleton } from "./slots/typographySlots.js";
 import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
@@ -30,7 +30,7 @@ function Typography(props) {
   return /* @__PURE__ */ jsx(
     StyledMUITypography,
     {
-      className: clsx(className, TYPOGRAPHY_CLASS_NAME_SPECIFY),
+      className: clsx(className, TYPOGRAPHY_CLASS_NAME_SPECIFY, TYPOGRAPHY_CLASSES.root),
       variant,
       ownerState: { ...ownerState },
       ...getPropDataTestId(TYPOGRAPHY_KEY_COMPONENT, TypographySlots.root, dataTestid),
@@ -40,7 +40,8 @@ function Typography(props) {
         {
           width: index === skeletonRows - 1 ? skeletonWidth : "100%",
           variant: "text",
-          ownerState: { ...ownerState }
+          ownerState: { ...ownerState },
+          className: TYPOGRAPHY_CLASSES.skeleton
         },
         index
       ))

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

@@ -7,3 +7,7 @@ export declare const TYPOGRAPHY_KEY_COMPONENT = "M4LTypography";
  * tener la necesidad de agregar valores en !important.
  */
 export declare const TYPOGRAPHY_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
+/**
+ * Inventario de clases CSS para el componente Typography.
+ */
+export declare const TYPOGRAPHY_CLASSES: Record<string, string>;

package/components/mui_extended/Typography/constants.js

@@ -1,6 +1,10 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { T as TypographySlots } from "./slots/typographyEnum.js";
 const TYPOGRAPHY_KEY_COMPONENT = "M4LTypography";
 const TYPOGRAPHY_CLASS_NAME_SPECIFY = "M4lclassCssSpecificity";
+const TYPOGRAPHY_CLASSES = getComponentClasses(TYPOGRAPHY_KEY_COMPONENT, TypographySlots);
 export {
   TYPOGRAPHY_CLASS_NAME_SPECIFY as T,
-  TYPOGRAPHY_KEY_COMPONENT as a
+  TYPOGRAPHY_CLASSES as a,
+  TYPOGRAPHY_KEY_COMPONENT as b
 };

package/components/mui_extended/Typography/slots/typographySlots.js

@@ -1,6 +1,6 @@
 import { Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { a as TYPOGRAPHY_KEY_COMPONENT } from "../constants.js";
+import { b as TYPOGRAPHY_KEY_COMPONENT } from "../constants.js";
 import { T as TypographySlots } from "./typographyEnum.js";
 import { t as typographyStyles } from "../typography.styles.js";
 import { S as Skeleton } from "../../Skeleton/Skeleton.js";

package/package.json

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

package/utils/getHeightSizeStyles.js

@@ -2,7 +2,7 @@ import { POINTER_QR_MOBILE_SIZES, POINTER_QR_DESKTOP_SIZES } from "@m4l/styles";
 const getHeightSizeStyles = (isMobile, size, variantSize, css) => {
   const pointerQrSource = isMobile ? POINTER_QR_MOBILE_SIZES : POINTER_QR_DESKTOP_SIZES;
   const heightSize = pointerQrSource[size][variantSize];
-  const resolvedCss = css;
+  const resolvedCss = typeof css === "function" ? css(heightSize) : css;
   return {
     height: heightSize,
     ...resolvedCss