@m4l/components 0.1.42 → 0.1.44

package/components/ErrorLabel/index.73f9362c.js

@@ -0,0 +1,65 @@
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import "react";
+import "@m4l/core";
+import "../Icon/index.f6e8d810.js";
+import "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+import "../mui_extended/IconButton/index.1318a283.js";
+import "../mui_extended/Accordion/index.1d513477.js";
+import "../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.8406ed5b.js";
+import "../Image/index.aa24e982.js";
+import "@mui/lab";
+import "../mui_extended/Popover/index.58c49cc0.js";
+import "../mui_extended/MenuActions/index.1261168c.js";
+import "../mui_extended/Pager/index.80ccec47.js";
+import "../mui_extended/Tab/index.e0653a0a.js";
+import { t as typographyClasses, T as Typography } from "../mui_extended/Typography/index.be3a279a.js";
+import { unstable_composeClasses } from "@mui/base";
+const ErrorLabelRoot = styled("div")(({
+  theme
+}) => ({
+  margin: "8px 14px 0 14px",
+  [`& .${typographyClasses.root} .MuiTypography-root`]: {
+    color: theme.palette.error.main
+  },
+  ...theme.components?.M4LErrorLabel?.styleOverrides
+}));
+const errorLabelClasses = generateUtilityClasses("M4LErrorLabel", [
+  "root"
+]);
+function getErrorLabelUtilityClass(slot) {
+  return generateUtilityClass("M4LErrorLabel", slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getErrorLabelUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const ErrorLabel = (props) => {
+  const {
+    message,
+    skeletonWidth,
+    skeletongHeight
+  } = props;
+  const classes = useUtilityClasses();
+  return /* @__PURE__ */ jsx(ErrorLabelRoot, {
+    className: classes.root,
+    children: /* @__PURE__ */ jsx(Typography, {
+      variant: "caption",
+      skeletonWidth,
+      skeletongHeight,
+      children: message
+    })
+  });
+};
+export {
+  ErrorLabel as E,
+  errorLabelClasses as e
+};

package/components/ErrorLabel/index.d.ts

@@ -1,4 +1,11 @@
 /// <reference types="react" />
 import { ErrorLabelProps } from './types';
+import { ErrorLabelClassesType } from './utils/Clases/types';
+/**
+ * Provee de un texto que posee los estilos gráficos de error.
+ * @param props
+ * @returns
+ */
+export { errorLabelClasses } from './utils/Clases/index';
+export declare type ErrorLabelClassesKey = ErrorLabelClassesType;
 export declare const ErrorLabel: (props: ErrorLabelProps) => JSX.Element;
-export default ErrorLabel;

package/components/ErrorLabel/styles.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const ErrorLabelRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/ErrorLabel/types.d.ts

@@ -1,3 +1,4 @@
-export interface ErrorLabelProps {
+import { TypographyProps } from '../mui_extended/Typography/types';
+export interface ErrorLabelProps extends Pick<TypographyProps, 'skeletonWidth' | 'skeletongHeight'> {
     message: string;
 }

package/components/ErrorLabel/utils/Clases/index.d.ts

@@ -0,0 +1,6 @@
+import { ErrorLabelClassesType } from './types';
+export declare const errorLabelClasses: ErrorLabelClassesType;
+export declare function getErrorLabelUtilityClass(slot: string): string;
+export declare const useUtilityClasses: () => {
+    root: string;
+};

package/components/ErrorLabel/utils/Clases/types.d.ts

@@ -0,0 +1,3 @@
+export interface ErrorLabelClassesType {
+    root: string;
+}

package/components/Icon/Icon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { IconProps } from './types';
+/**
+ * Provee de un medio por el cual se carga un icono svg en la plataforma web, aporta su versión provisional de carga en red.
+ * @param props
+ * @returns
+ */
+export declare function Icon(props: IconProps): JSX.Element;

package/components/Icon/classes/constants.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LIcon";

package/components/Icon/classes/index.d.ts

@@ -0,0 +1,9 @@
+import { IconClassesType } from './types';
+import { OwnerState } from '../types';
+export declare const IconClasses: IconClassesType;
+export declare function getIconClassesUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: OwnerState) => {
+    root: string;
+    icon: string;
+    placeHolder: string;
+};

package/components/Icon/classes/types.d.ts

@@ -0,0 +1,17 @@
+export interface IconClassesType {
+    root: string;
+    icon: string;
+    placeHolder: string;
+    sizeExtraSmall: string;
+    sizeSmall: string;
+    sizeNormal: string;
+    sizeLarge: string;
+    colorInfo: string;
+    colorWarning: string;
+    colorError: string;
+    colorActive: string;
+    colorSelected: string;
+    colorDisabled: string;
+    rotationAngle: string;
+}
+export declare type IconClassesKey = keyof IconClassesType;

package/components/Icon/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { IconProps } from './types';
-export declare function Icon(props: IconProps): JSX.Element;
+export * from './Icon';
+export * from './types';

package/components/Icon/{index.8d754623.js → index.f6e8d810.js}

@@ -1,9 +1,10 @@
 import { m } from "framer-motion";
 import { forwardRef, useState, useMemo, useEffect } from "react";
-import { IconButton, Box, styled } from "@mui/material";
+import { IconButton, Box, styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
 import { useTheme } from "@mui/material/styles";
-import { g as getPaletteColor } from "../../utils/index.899eb67b.js";
+import { g as getPaletteColor } from "../../utils/index.e882b264.js";
+import { unstable_composeClasses } from "@mui/base";
 const varSmall = {
   hover: {
     scale: 1.1
@@ -59,6 +60,14 @@ const IconButtonAnimate = forwardRef(({
   })
 }));
 IconButtonAnimate.displayName = "IconButtonAnimate";
+const IconRoot = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  ...theme.components?.M4LIcon?.styleOverrides
+}));
 const DivIcon = styled("div", {
   shouldForwardProp: (props) => props !== "src" && props !== "size" && props !== "bgColor" && props !== "rotationAngle" && props !== "angleTransition"
 })(({
@@ -83,20 +92,47 @@ const DivIcon = styled("div", {
     transition: `transform ${angleTransition}s ease-in-out`
   }
 }));
-const WrapperPlaceHolder = styled("div")(() => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-}));
+const componentName = "M4LIcon";
+generateUtilityClasses(componentName, [
+  "root",
+  "icon",
+  "placeHolder",
+  "sizeExtraSmall",
+  "sizeSmall",
+  "sizeNormal",
+  "sizeLarge",
+  "colorInfo",
+  "colorWarning",
+  "colorError",
+  "colorActive",
+  "colorSelected",
+  "colorDisabled",
+  "rotationAngle"
+]);
+function getIconClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root"],
+    icon: ["icon", ownerState.size === "extra-small" && "sizeExtraSmall", ownerState.size === "small" && "sizeSmall", ownerState.size === "normal" && "sizeNormal", ownerState.size === "large" && "sizeLarge", ownerState.bgColor === "info" && "colorInfo", ownerState.bgColor === "warning" && "colorWarning", ownerState.bgColor === "error" && "colorError", ownerState.bgColor === "active" && "colorActive", ownerState.bgColor === "selected" && "colorSelected", ownerState.bgColor === "disabled" && "colorDisabled", ownerState.rotationAngle ? "rotationAngle" : ""],
+    placeHolder: ["placeHolder"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getIconClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
 function Icon(props) {
   const {
     src,
     size = "small",
     bgColor = "action.active",
     rotationAngle,
-    angleTransition
+    angleTransition,
+    testingProps
   } = props;
-  const [resource, setResource] = useState(void 0);
+  const [resource, setResource] = useState(testingProps?.resource || void 0);
   const theme = useTheme();
   const finalSize = useMemo(() => {
     switch (size) {
@@ -130,16 +166,27 @@ function Icon(props) {
       mounted = false;
     };
   }, [src]);
+  const ownerState = {
+    size,
+    bgColor,
+    rotationAngle
+  };
+  const classes = useUtilityClasses(ownerState);
   const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
-  return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
-    className: "m4l_icon",
+  return /* @__PURE__ */ jsx(IconRoot, {
+    className: classes.root,
+    "data-testid": "IconRoot",
     children: resource ? /* @__PURE__ */ jsx(DivIcon, {
+      className: classes.icon,
+      "data-testid": "DivIcon",
       src: resource,
       size: finalSize,
       bgColor: getPaletteColor(theme.palette, bgColor),
       rotationAngle,
       angleTransition
     }) : /* @__PURE__ */ jsx("img", {
+      className: classes.placeHolder,
+      "data-testid": "img",
       src: placeHolder,
       alt: "icon_svg",
       width: finalSize,

package/components/Icon/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { IconProps } from './types';
+export declare const IconRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DivIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & IconProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const WrapperPlaceHolder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Icon/types.d.ts

@@ -1,11 +1,16 @@
 export declare type SizeIcon = 'extra-small' | 'small' | 'normal' | 'large' | string;
+export interface TestingProps {
+    resource: any;
+}
 export interface IconProps {
     src: string;
     bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'selected' | 'disabled';
     size?: SizeIcon;
     rotationAngle?: number;
     angleTransition?: number;
+    testingProps?: TestingProps;
 }
 export declare type WrapperPlaceHolderProps = {
     size: string;
 };
+export declare type OwnerState = Pick<IconProps, 'bgColor' | 'size' | 'rotationAngle'>;

package/components/Image/Image.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ImageProps } from './types';
+/**
+ * Provee de un medio por el cual se carga una imagen tipo mapa de bits, en la plataforma web, aporta su versión provisional de carga en red
+ * @param props
+ * @returns
+ */
+export declare function Image(props: ImageProps): JSX.Element;
+export default Image;

package/components/Image/{index.93d5f37f.js → index.aa24e982.js}

@@ -1,9 +1,10 @@
-import { useModuleSkeleton } from "@m4l/core";
+import { useBase, useModuleSkeleton, BaseProvider } from "@m4l/core";
 import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useMemo } from "react";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { styled, Skeleton as Skeleton$1 } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled, Skeleton as Skeleton$1, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
 function isIntersectionObserverAvailable() {
-  return typeof window !== "undefined" && "IntersectionObserver" in window && "isIntersecting" in window.IntersectionObserverEntry.prototype;
+  return typeof window !== "undefined" && "IntersectionObserver" in window && "IntersectionObserverEntry" in window;
 }
 const checkIntersections = (entries) => {
   entries.forEach((entry) => {
@@ -51,61 +52,78 @@ const BasicIntersectComponent = forwardRef((props, ref) => {
     styleProp.minHeight = height;
   }
   return /* @__PURE__ */ jsx("span", {
-    id: "IntersectComponent",
     ref: intersectComponentRef,
-    style: styleProp
+    style: styleProp,
+    "data-testid": "spanObserved"
   });
 });
 BasicIntersectComponent.displayName = "IntersectComponent";
+const WrapperLazyLoadComponent = styled("div")(() => ({}));
 function LazyLoadComponent(props) {
   const {
     children,
     useIntersectionObserver,
+    testingProps,
     ...other
   } = props;
-  const [isVisible, setIsVisible] = useState(!(useIntersectionObserver && isIntersectionObserverAvailable()));
+  const [isVisible, setIsVisible] = useState(testingProps?.isVisible || !(useIntersectionObserver && isIntersectionObserverAvailable()));
+  const {
+    classes
+  } = useBase();
   if (isVisible) {
-    return /* @__PURE__ */ jsx(Fragment, {
+    return /* @__PURE__ */ jsx(WrapperLazyLoadComponent, {
+      className: classes.lazyLoad,
+      "data-testid": "WrapperLazyLoadComponent",
       children
     });
   }
-  return /* @__PURE__ */ jsx(BasicIntersectComponent, {
-    useIntersectionObserver,
-    setIsVisible,
-    ...other
+  return /* @__PURE__ */ jsx(WrapperLazyLoadComponent, {
+    className: classes.lazyLoad,
+    "data-testid": "WrapperLazyLoadComponent",
+    children: /* @__PURE__ */ jsx(BasicIntersectComponent, {
+      useIntersectionObserver,
+      setIsVisible,
+      ...other
+    })
   });
 }
-const WrapperImage = styled("div", {
-  shouldForwardProp: (props) => props !== "width" && props !== "height"
+const ImageRoot = styled("div", {
+  shouldForwardProp: (props) => props !== "width" && props !== "height" && props !== "imageClasses"
 })(({
+  theme,
   height,
-  width
+  width,
+  imageClasses: imageClasses2
 }) => ({
   position: "relative",
   width,
   height,
   minHeight: height,
   minWidth: width,
-  "& > img ": {
-    opacity: 0,
-    position: "absolute",
-    inset: "0",
-    width: "100%",
-    height: "100%"
-  },
-  "&.loaded > img": {
-    opacity: 1,
-    transition: "opacity .5s"
-  },
-  "& .skeleton": {
-    opacity: 1,
-    width,
-    height
+  [`&.${imageClasses2.root}`]: {
+    [`.${imageClasses2.img}`]: {
+      opacity: 0,
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%"
+    },
+    [`.${imageClasses2.loaded} .${imageClasses2.img}`]: {
+      opacity: 1,
+      transition: "opacity .5s"
+    },
+    [`.${imageClasses2.skeletonImage}, .${imageClasses2.skeletonCircle}`]: {
+      opacity: 1,
+      width,
+      height
+    },
+    [`.${imageClasses2.loaded} .${imageClasses2.skeletonImage},
+          .${imageClasses2.loaded} .${imageClasses2.skeletonCircle}`]: {
+      opacity: 0,
+      transition: "opacity .3s"
+    }
   },
-  "&.loaded .skeleton": {
-    opacity: 0,
-    transition: "opacity .3s"
-  }
+  ...theme.components?.M4LImage?.styleOverrides
 }));
 const WrapperSkeletonImage = styled("div")(() => ({
   mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
@@ -120,8 +138,12 @@ const Skeleton = (props) => {
   const {
     skeletonVariant
   } = props;
+  const {
+    classes
+  } = useBase();
   return skeletonVariant === "image" ? /* @__PURE__ */ jsx(WrapperSkeletonImage, {
-    className: "skeleton",
+    className: classes.skeletonImage,
+    "data-testid": "skeletonImage",
     children: /* @__PURE__ */ jsx(Skeleton$1, {
       variant: "rectangular",
       width: "100%",
@@ -131,9 +153,36 @@ const Skeleton = (props) => {
     variant: "circular",
     width: "100%",
     height: "100%",
-    className: "skeleton"
+    className: classes.skeletonCircle,
+    "data-testid": "skeletonCircle"
   });
 };
+const componentName = "M4LImage";
+const imageClasses = generateUtilityClasses(componentName, [
+  "root",
+  "lazyLoad",
+  "img",
+  "skeletonImage",
+  "skeletonCircle",
+  "loaded"
+]);
+function getImagenClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.isImageLoaded == true && "loaded"],
+    lazyLoad: ["lazyLoad"],
+    img: ["img"],
+    intersectComponent: ["intersectComponent"],
+    skeletonImage: ["skeletonImage"],
+    skeletonCircle: ["skeletonCircle"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getImagenClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
 function Image(props) {
   const {
     src,
@@ -142,10 +191,11 @@ function Image(props) {
     threshold = 100,
     width,
     height,
-    skeletonVariant = "image"
+    skeletonVariant = "image",
+    testingProps
   } = props;
   const isSKeleton = useModuleSkeleton();
-  const [statusLoad, setStatusLoad] = useState("initial");
+  const [statusLoad, setStatusLoad] = useState(testingProps?.statusLoad || "initial");
   useEffect(() => {
     let timer;
     if (statusLoad === "loaded" && !isSKeleton) {
@@ -162,28 +212,42 @@ function Image(props) {
   const onLoad = () => {
     setStatusLoad("loaded");
   };
+  const isImageLoaded = !isSKeleton && statusLoad !== "initial";
+  const ownerState = {
+    isImageLoaded
+  };
+  const classes = useUtilityClasses(ownerState);
   const lazyLoadComponent = useMemo(() => {
-    const isImageLoaded = !isSKeleton && statusLoad !== "initial";
-    return /* @__PURE__ */ jsx(WrapperImage, {
+    return /* @__PURE__ */ jsx(ImageRoot, {
       width,
       height,
-      className: "m4l_image " + (isImageLoaded ? "loaded" : ""),
+      className: classes.root,
+      imageClasses,
+      "data-testid": "ImageRoot",
       children: /* @__PURE__ */ jsxs(LazyLoadComponent, {
         width,
         height,
         useIntersectionObserver,
         threshold,
+        testingProps,
         children: [statusLoad !== "removed" ? /* @__PURE__ */ jsx(Skeleton, {
           skeletonVariant
         }) : null, /* @__PURE__ */ jsx("img", {
           alt,
           src,
-          onLoad
+          onLoad,
+          className: classes.img,
+          "data-testid": "img"
         })]
       })
     });
   }, [statusLoad, isSKeleton, src]);
-  return lazyLoadComponent;
+  return /* @__PURE__ */ jsx(BaseProvider, {
+    value: {
+      classes
+    },
+    children: lazyLoadComponent
+  });
 }
 export {
   Image as I

package/components/Image/index.d.ts

@@ -1,4 +1,2 @@
-/// <reference types="react" />
-import { ImageProps } from './types';
-export declare function Image(props: ImageProps): JSX.Element;
-export default Image;
+export * from './Image';
+export * from './types';

package/components/Image/styles.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { BaseImageProps } from './types';
-export declare const WrapperImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & BaseImageProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import { WrapperImageProps } from './types';
+export declare const ImageRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & WrapperImageProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Image/subcomponents/LazyLoadComponent/index.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
 import { LazyLoadComponentProps } from '../../types';
+/**
+ * Sub-componente encargado de validar y condicionar la funcionalidad del intersection observer.
+ * @param props
+ * @returns
+ */
 export declare function LazyLoadComponent(props: LazyLoadComponentProps): JSX.Element;

package/components/Image/subcomponents/LazyLoadComponent/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const WrapperLazyLoadComponent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Image/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ImageClassesType } from './utils/classes/types';
 export declare type Effect = 'blur' | 'black-and-white' | 'opacity';
 export declare type ScrollPosition = {
     x: number;
@@ -7,10 +8,17 @@ export declare type ScrollPosition = {
 export declare type IntersectComponentRef = HTMLSpanElement & {
     setIsVisible?: (visible: boolean) => void;
 };
+export interface TestingProps {
+    statusLoad?: any;
+    isVisible?: boolean;
+}
 export interface BaseImageProps {
     width: string;
     height?: string;
 }
+export interface WrapperImageProps extends BaseImageProps {
+    imageClasses: ImageClassesType;
+}
 export interface IntersectComponentProps extends BaseImageProps {
     setIsVisible: (visible: boolean) => void;
     threshold: number;
@@ -21,7 +29,7 @@ export interface IntersectComponentScrollProps extends IntersectComponentProps {
     delayMethod?: 'debounce' | 'throttle';
     delayTime?: number;
 }
-export interface LazyLoadComponentProps extends Omit<IntersectComponentProps, 'setIsVisible'> {
+export interface LazyLoadComponentProps extends Pick<ImageProps, 'testingProps'>, Omit<IntersectComponentProps, 'setIsVisible'> {
     children: ReactNode;
 }
 export declare type SkeletonVariant = 'image' | 'circle';
@@ -31,4 +39,12 @@ export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible'
     threshold?: number;
     useIntersectionObserver?: boolean;
     skeletonVariant?: SkeletonVariant;
+    testingProps?: TestingProps;
+}
+export declare type StatusLoad = 'initial' | 'loaded' | 'removed';
+export interface OwnerState {
+    isImageLoaded: boolean;
+}
+export interface BaseProviderIamgeType {
+    classes: any;
 }

package/components/Image/utils/classes/constant.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LImage";

package/components/Image/utils/classes/index.d.ts

@@ -0,0 +1,12 @@
+import { ImageClassesType } from './types';
+import { OwnerState } from '../../types';
+export declare const imageClasses: ImageClassesType;
+export declare function getImagenClassesUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: OwnerState) => {
+    img: string;
+    root: string;
+    lazyLoad: string;
+    intersectComponent: string;
+    skeletonImage: string;
+    skeletonCircle: string;
+};

package/components/Image/utils/classes/types.d.ts

@@ -0,0 +1,9 @@
+export interface ImageClassesType {
+    root: string;
+    lazyLoad: string;
+    img: string;
+    skeletonImage: string;
+    skeletonCircle: string;
+    loaded: string;
+}
+export declare type ImageClassesKey = keyof ImageClassesType;

package/components/LanguagePopover/LanguagePopover.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LanguagePopoverProps } from './types';
+/**
+ * Provee un componente que le permite al usuario cambiar la configuración del idioma en la plataforma.
+ * @param props
+ * @returns
+ */
+export declare function LanguagePopover(props: LanguagePopoverProps): JSX.Element;