@m4l/components 9.1.53 → 9.1.55

package/@types/types.d.ts

@@ -137,6 +137,8 @@ import { PopoverOwnerState, PopoverSlotsType } from '../components/mui_extended/
 import { AccountPopoverOwnerState, AccountPopoverSlotsType } from '../components/AccountPopover/types';
 import { PropertyVaLueOwnerState, PropertyValueType } from '../components/PropertyValue/types';
 
+import { RHFAutocompleteOwnerState, RHFAutocompleteSlotsType } from '../components/hook-form/RHFAutocomplete/types';
+
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -186,6 +188,7 @@ declare module '@mui/material/styles' {
     M4LToggleButton: ToggleButtonSlotsType;
     M4LBooleanFormatter: PresentationType;
     M4LToggleIconButton: ToggleIconButtonSlotsType;
+    RHFM4LAutocomplete: RHFAutocompleteSlotsType;
     M4LAccountPopover: AccountPopoverSlotsType;
     M4LPropertyValue: PropertyValueType;
   }
@@ -236,6 +239,7 @@ declare module '@mui/material/styles' {
     M4LToggleButton: Partial<ToggleButtonOwnerState>;
     M4LBooleanFormatter: Partial<BooleanFormatterOwnerState>;
     M4LToggleIconButton: Partial<ToggleIconButtonOwnerState>;
+    RHFM4LAutocomplete: Partial<RHFAutocompleteOwnerState>;
     M4LAccountPopover: Partial<AccountPopoverOwnerState>;
     M4LPropertyValue: Partial<PropertyVaLueOwnerState>;
     M4LColor: Partial<ColorOwnerState>;
@@ -573,10 +577,15 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LRHFColorPicker'];
       variants?: ComponentsVariants['M4LRHFColorPicker'];
     };
+    RHFM4LAutocomplete?: {
+      defaultProps?: ComponentsPropsList['RHFM4LAutocomplete'];
+      styleOverrides?: ComponentsOverrides<Theme>['RHFM4LAutocomplete'];
+      variants?: ComponentsVariants['RHFM4LAutocomplete'];
+    };
     M4LAccountPopover?: {
         defaultProps?: ComponentsPropsList['M4LAccountPopover'];
         styleOverrides?: ComponentsOverrides<Theme>['M4LAccountPopover'];
         variants?: ComponentsVariants['M4LAccountPopover'];
       };
  }
-}
+}

package/components/Chip/Chip.js

@@ -0,0 +1,108 @@
+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) => {
+  const {
+    endIcon,
+    label,
+    startIcon,
+    color = "default",
+    size = "small",
+    variant = "contained",
+    skeletonWidth = "100%",
+    opacity = false,
+    hasIconClose = true,
+    onClick,
+    onDeleted,
+    className,
+    ...others
+  } = props;
+  const { currentSize } = useComponentSize(size);
+  const isSkeleton = useModuleSkeleton();
+  const theme = useTheme();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const paletteColor = getPropertyByString(
+    theme.vars.palette,
+    color || "default",
+    theme.vars.palette.default
+  );
+  const ownerState = {
+    chipSize: adjustedSize,
+    variant,
+    paletteColor,
+    color,
+    opacity
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      SkeletonChipStyled,
+      {
+        "data-testid": "SkeletonButton",
+        width: skeletonWidth,
+        ownerState: { ...ownerState }
+      }
+    );
+  }
+  const iconClose = `${host_static_assets}/${environment_assets}/frontend/components/chip/assets/icons/closeSmall.svg`;
+  const renderIcon = (icon, instaceDataTestId) => {
+    if (!icon) {
+      return null;
+    }
+    if (typeof icon !== "string") {
+      return icon;
+    } else {
+      return /* @__PURE__ */ jsx(
+        IconStyled,
+        {
+          color,
+          ownerState: { ...ownerState },
+          src: icon,
+          size: adjustedSize,
+          instaceDataTestId
+        }
+      );
+    }
+  };
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    onDeleted?.(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    ChipRootStyled,
+    {
+      role: "button-chip",
+      tabIndex: 0,
+      size: adjustedSize,
+      onClick,
+      ownerState: { ...ownerState },
+      className: clsx(className, CHIP_CLASSES.root),
+      ref,
+      ...others,
+      children: [
+        renderIcon(startIcon, "ChipStartIcon"),
+        /* @__PURE__ */ jsx(TextChipStyled, { size: adjustedSize, ownerState: { ...ownerState }, color, children: label }),
+        renderIcon(endIcon, "ChipEndIcon"),
+        hasIconClose && /* @__PURE__ */ jsx(
+          IconButtonStyled,
+          {
+            src: iconClose,
+            size: adjustedSize,
+            ownerState: { ...ownerState },
+            color,
+            onClick: handleDelete
+          }
+        )
+      ]
+    }
+  );
+});
+Chip.displayName = "Chip";
+export {
+  Chip as C
+};

package/components/Chip/ChipStyles.js

@@ -0,0 +1,533 @@
+const chipStyles = {
+  /**
+   * Styles for the root element of the chip.
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-02 13:49:12 - automatic
+   * @updatedAt 2024-12-06 13:56:58 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  root: ({ theme, ownerState }) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: theme.vars.size.baseSpacings.sp1,
+    borderRadius: theme.vars.size.borderRadius["r0-5"],
+    width: "max-content",
+    cursor: "pointer",
+    ...ownerState.variant === "contained" && {
+      ...ownerState.color === "default" && {
+        color: theme.vars.palette.chips.default.contrastText,
+        backgroundColor: theme.vars.palette.chips.default.backgroundColor,
+        "& .M4LIconClass-root": {
+          backgroundColor: theme.vars.palette.chips.default.contrastText
+        },
+        "&:hover": {
+          backgroundColor: theme.vars.palette.chips.default.backgroundHover,
+          "&:active": {
+            backgroundColor: theme.vars.palette.chips.default.backgroundActive,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.default.contrastText
+            }
+          }
+        },
+        ...ownerState.opacity === true && {
+          color: theme.vars.palette.chips.default.semanticText,
+          backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundColor,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.chips.default.semanticText
+          },
+          "&:hover": {
+            backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundHover,
+            "&:active": {
+              backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundActive,
+              "& .M4LIconClass-root": {
+                backgroundColor: theme.vars.palette.chips.default.semanticText
+              }
+            }
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: theme.vars.size.borderStroke.container,
+          outlineColor: theme.vars.palette.border.main,
+          outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+          backgroundColor: theme.vars.palette.chips.default.backgroundActive
+        }
+      },
+      ...ownerState.color === "warning" && {
+        color: theme.vars.palette.chips.warning.contrastText,
+        backgroundColor: theme.vars.palette.chips.warning.backgroundColor,
+        "& .M4LIconClass-root": {
+          backgroundColor: theme.vars.palette.chips.warning.contrastText
+        },
+        "&:hover": {
+          backgroundColor: theme.vars.palette.chips.warning.backgroundHover,
+          "&:active": {
+            backgroundColor: theme.vars.palette.chips.warning.backgroundActive,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.warning.contrastText
+            }
+          }
+        },
+        ...ownerState.opacity === true && {
+          color: theme.vars.palette.chips.warningOpacity.contrastText,
+          backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundColor,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.text.primary
+          },
+          "&:hover": {
+            backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
+            "&:active": {
+              backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundActive,
+              "& .M4LIconClass-root": {
+                backgroundColor: theme.vars.palette.text.primary
+              }
+            }
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: theme.vars.size.borderStroke.container,
+          outlineColor: theme.vars.palette.border.main,
+          outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+          backgroundColor: theme.vars.palette.chips.warning.backgroundActive
+        }
+      },
+      ...ownerState.color === "success" && {
+        color: theme.vars.palette.chips.success.contrastText,
+        backgroundColor: theme.vars.palette.chips.success.backgroundColor,
+        "& .M4LIconClass-root": {
+          backgroundColor: theme.vars.palette.chips.info.contrastText
+        },
+        "&:hover": {
+          backgroundColor: theme.vars.palette.chips.success.backgroundHover,
+          "&:active": {
+            backgroundColor: theme.vars.palette.chips.success.backgroundActive,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.info.contrastText
+            }
+          }
+        },
+        ...ownerState.opacity === true && {
+          color: theme.vars.palette.text.primary,
+          backgroundColor: theme.vars.palette.chips.successOpacity.backgroundColor,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.text.primary
+          },
+          "&:hover": {
+            backgroundColor: theme.vars.palette.chips.successOpacity.backgroundHover,
+            "&:active": {
+              backgroundColor: theme.vars.palette.chips.successOpacity.backgroundActive,
+              "& .M4LIconClass-root": {
+                backgroundColor: theme.vars.palette.text.primary
+              }
+            }
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: theme.vars.size.borderStroke.container,
+          outlineColor: theme.vars.palette.border.main,
+          outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+          backgroundColor: theme.vars.palette.chips.success.backgroundActive
+        }
+      },
+      ...ownerState.color === "error" && {
+        color: theme.vars.palette.chips.error.contrastText,
+        backgroundColor: theme.vars.palette.chips.error.backgroundColor,
+        "& .M4LIconClass-root": {
+          backgroundColor: theme.vars.palette.chips.error.contrastText
+        },
+        "&:hover": {
+          backgroundColor: theme.vars.palette.chips.error.backgroundHover,
+          "&:active": {
+            backgroundColor: theme.vars.palette.chips.error.backgroundActive,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.error.contrastText
+            }
+          }
+        },
+        ...ownerState.opacity === true && {
+          color: theme.vars.palette.chips.error.semanticText,
+          backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundColor,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.chips.error.semanticText
+          },
+          "&:hover": {
+            backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundHover,
+            "&:active": {
+              backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundActive,
+              "& .M4LIconClass-root": {
+                backgroundColor: theme.vars.palette.chips.error.semanticText
+              }
+            }
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: theme.vars.size.borderStroke.container,
+          outlineColor: theme.vars.palette.border.main,
+          outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+          backgroundColor: theme.vars.palette.chips.error.backgroundActive
+        }
+      },
+      ...ownerState.color === "info" && {
+        color: theme.vars.palette.chips.info.contrastText,
+        backgroundColor: theme.vars.palette.chips.info.backgroundColor,
+        "& .M4LIconClass-root": {
+          backgroundColor: theme.vars.palette.chips.info.contrastText
+        },
+        "&:hover": {
+          backgroundColor: theme.vars.palette.chips.info.backgroundHover,
+          "&:active": {
+            backgroundColor: theme.vars.palette.chips.info.backgroundActive,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.info.contrastText
+            }
+          }
+        },
+        ...ownerState.opacity === true && {
+          color: theme.vars.palette.text.primary,
+          backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundColor,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.text.primary
+          },
+          "&:hover": {
+            backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundHover,
+            "&:active": {
+              backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundActive,
+              "& .M4LIconClass-root": {
+                backgroundColor: theme.vars.palette.text.primary
+              }
+            }
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: theme.vars.size.borderStroke.container,
+          outlineColor: theme.vars.palette.border.main,
+          outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+          backgroundColor: theme.vars.palette.chips.info.backgroundActive
+        }
+      }
+    },
+    ...ownerState.variant === "outlined" && {
+      backgroundColor: "transparent",
+      border: `${theme.vars.size.borderStroke.container}`,
+      ...ownerState.color === "default" && {
+        color: theme.vars.palette.chips.default.semanticText,
+        borderColor: theme.vars.palette.chips.default.backgroundColor,
+        "& .M4LIconClass-root": {
+          backgroundColor: theme.vars.palette.chips.default.semanticText
+        },
+        "&:hover": {
+          backgroundColor: theme.vars.palette.chips.default.backgroundHover,
+          "&:active": {
+            backgroundColor: theme.vars.palette.chips.default.backgroundActive,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.default.semanticText
+            }
+          }
+        },
+        ...ownerState.opacity === true && {
+          color: theme.vars.palette.chips.default.semanticText,
+          borderColor: theme.vars.palette.chips.default.backgroundColor,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.chips.default.semanticText
+          },
+          "&:hover": {
+            backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundHover,
+            "&:active": {
+              backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundActive,
+              "& .M4LIconClass-root": {
+                backgroundColor: theme.vars.palette.chips.default.semanticText
+              }
+            }
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: theme.vars.size.borderStroke.container,
+          outlineColor: theme.vars.palette.border.main,
+          outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+          backgroundColor: theme.vars.palette.chips.default.backgroundActive
+        }
+      },
+      ...ownerState.color === "warning" && {
+        color: theme.vars.palette.chips.warning.semanticText,
+        borderColor: theme.vars.palette.chips.warning.backgroundColor,
+        "& .M4LIconClass-root": {
+          backgroundColor: theme.vars.palette.chips.warning.semanticText
+        },
+        "&:hover": {
+          backgroundColor: theme.vars.palette.chips.warning.backgroundHover,
+          "&:active": {
+            backgroundColor: theme.vars.palette.chips.warning.backgroundActive,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.warning.semanticText
+            }
+          }
+        },
+        ...ownerState.opacity === true && {
+          color: theme.vars.palette.chips.default.semanticText,
+          borderColor: theme.vars.palette.chips.default.backgroundColor,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.chips.default.semanticText
+          },
+          "&:hover": {
+            color: theme.vars.palette.chips.warning.semanticText,
+            borderColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
+            backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.warning.semanticText
+            },
+            "&:active": {
+              backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundActive,
+              "& .M4LIconClass-root": {
+                backgroundColor: theme.vars.palette.chips.warning.semanticText
+              }
+            }
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: theme.vars.size.borderStroke.container,
+          outlineColor: theme.vars.palette.border.main,
+          outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+          backgroundColor: theme.vars.palette.chips.warning.backgroundActive
+        }
+      },
+      ...ownerState.color === "success" && {
+        color: theme.vars.palette.chips.success.semanticText,
+        borderColor: theme.vars.palette.chips.success.backgroundColor,
+        "& .M4LIconClass-root": {
+          backgroundColor: theme.vars.palette.chips.success.semanticText
+        },
+        "&:hover": {
+          color: theme.vars.palette.chips.success.contrastText,
+          backgroundColor: theme.vars.palette.chips.success.backgroundHover,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.chips.success.contrastText
+          },
+          "&:active": {
+            backgroundColor: theme.vars.palette.chips.success.backgroundActive,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.success.contrastText
+            }
+          }
+        },
+        ...ownerState.opacity === true && {
+          color: theme.vars.palette.chips.success.semanticText,
+          borderColor: theme.vars.palette.chips.successOpacity.backgroundColor,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.chips.success.semanticText
+          },
+          "&:hover": {
+            backgroundColor: theme.vars.palette.chips.successOpacity.backgroundHover,
+            "&:active": {
+              backgroundColor: theme.vars.palette.chips.successOpacity.backgroundActive,
+              "& .M4LIconClass-root": {
+                backgroundColor: theme.vars.palette.chips.success.semanticText
+              }
+            }
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: theme.vars.size.borderStroke.container,
+          outlineColor: theme.vars.palette.border.main,
+          outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+          backgroundColor: theme.vars.palette.chips.success.backgroundActive
+        }
+      },
+      ...ownerState.color === "error" && {
+        color: theme.vars.palette.chips.error.semanticText,
+        borderColor: theme.vars.palette.chips.error.backgroundColor,
+        "& .M4LIconClass-root": {
+          backgroundColor: theme.vars.palette.chips.error.semanticText
+        },
+        "&:hover": {
+          color: theme.vars.palette.chips.error.contrastText,
+          backgroundColor: theme.vars.palette.chips.error.backgroundHover,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.chips.error.contrastText
+          },
+          "&:active": {
+            backgroundColor: theme.vars.palette.chips.error.backgroundActive,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.error.contrastText
+            }
+          }
+        },
+        ...ownerState.opacity === true && {
+          color: theme.vars.palette.chips.error.semanticText,
+          borderColor: theme.vars.palette.chips.errorOpacity.backgroundColor,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.chips.error.semanticText
+          },
+          "&:hover": {
+            backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundHover,
+            "&:active": {
+              backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundActive,
+              "& .M4LIconClass-root": {
+                backgroundColor: theme.vars.palette.chips.error.semanticText
+              }
+            }
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: theme.vars.size.borderStroke.container,
+          outlineColor: theme.vars.palette.border.main,
+          outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+          backgroundColor: theme.vars.palette.chips.error.backgroundActive
+        }
+      },
+      ...ownerState.color === "info" && {
+        color: theme.vars.palette.chips.info.semanticText,
+        borderColor: theme.vars.palette.chips.info.backgroundColor,
+        "& .M4LIconClass-root": {
+          backgroundColor: theme.vars.palette.chips.info.semanticText
+        },
+        "&:hover": {
+          color: theme.vars.palette.chips.info.contrastText,
+          backgroundColor: theme.vars.palette.chips.info.backgroundHover,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.chips.info.contrastText
+          },
+          "&:active": {
+            backgroundColor: theme.vars.palette.chips.info.backgroundActive,
+            "& .M4LIconClass-root": {
+              backgroundColor: theme.vars.palette.chips.info.contrastText
+            }
+          }
+        },
+        ...ownerState.opacity === true && {
+          color: theme.vars.palette.chips.info.semanticText,
+          borderColor: theme.vars.palette.chips.infoOpacity.backgroundColor,
+          "& .M4LIconClass-root": {
+            backgroundColor: theme.vars.palette.chips.info.semanticText
+          },
+          "&:hover": {
+            backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundHover,
+            "&:active": {
+              backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundActive
+            }
+          }
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: theme.vars.size.borderStroke.container,
+          outlineColor: theme.vars.palette.border.main,
+          outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+          backgroundColor: theme.vars.palette.chips.info.backgroundActive
+        }
+      }
+    },
+    // Estilos específicos para el tamaño small
+    ...ownerState.chipSize === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.small.base,
+        minHeight: theme.vars.size.mobile.small.base
+      } : {
+        height: theme.vars.size.desktop.small.base,
+        minHeight: theme.vars.size.desktop.small.base
+      }
+    },
+    // Estilos específicos para el tamaño medium
+    ...ownerState.chipSize === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.medium.base,
+        minHeight: theme.vars.size.mobile.medium.base
+      } : {
+        height: theme.vars.size.desktop.medium.base,
+        minHeight: theme.vars.size.desktop.medium.base
+      }
+    }
+  }),
+  /**
+   * Styles for the text chip element.
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-03 11:55:46 - automatic
+   * @updatedAt 2024-12-06 13:56:58 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  textChip: ({ theme }) => ({
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    paddingRight: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Styles for the chip icon element.
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-02 13:49:12 - automatic
+   * @updatedAt 2024-12-06 13:56:58 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  chipIcon: () => ({}),
+  /**
+   * Styles for the icon button inside the chip element.
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-02 13:49:12 - automatic
+   * @updatedAt 2024-12-06 13:56:58 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  iconButton: ({ theme, ownerState }) => ({
+    // Estilos específicos para el tamaño small
+    ...ownerState.chipSize === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.small.base,
+        width: theme.vars.size.mobile.small.base,
+        minHeight: theme.vars.size.mobile.small.base
+      } : {
+        height: theme.vars.size.desktop.small.base,
+        width: theme.vars.size.desktop.small.base,
+        minHeight: theme.vars.size.desktop.small.base
+      }
+    },
+    // Estilos específicos para el tamaño medium
+    ...ownerState.chipSize === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.medium.base,
+        width: theme.vars.size.mobile.medium.base,
+        minHeight: theme.vars.size.mobile.medium.base
+      } : {
+        height: theme.vars.size.desktop.medium.base,
+        width: theme.vars.size.desktop.medium.base,
+        minHeight: theme.vars.size.desktop.medium.base
+      }
+    }
+  }),
+  /**
+   * Styles for the skeleton chip element.
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-02 13:49:12 - automatic
+   * @updatedAt 2024-12-06 13:56:58 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  skeletonChip: ({ theme, ownerState }) => ({
+    width: "100%",
+    background: theme.vars.palette.skeleton.transition,
+    // Estilos específicos para el tamaño small
+    ...ownerState.chipSize === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.small.base,
+        minHeight: theme.vars.size.mobile.small.base
+      } : {
+        height: theme.vars.size.desktop.small.base,
+        minHeight: theme.vars.size.desktop.small.base
+      }
+    },
+    // Estilos específicos para el tamaño medium
+    ...ownerState.chipSize === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.medium.base,
+        minHeight: theme.vars.size.mobile.medium.base
+      } : {
+        height: theme.vars.size.desktop.medium.base,
+        minHeight: theme.vars.size.desktop.medium.base
+      }
+    }
+  })
+};
+export {
+  chipStyles as c
+};

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>;