@m4l/components 9.1.124 → 9.1.125

package/components/LoadingError/LoadingError.d.ts

@@ -1,17 +1,42 @@
 import { AreasLoadingErrorProps } from './types';
 /**
+ * LoadingError Component
  *
- * @param {AreasLoadingErrorProps} props El componente LoadingError espera recibir ciertas propiedades que están definidas en el tipo AreasLoadingErrorProps.
- * @param {status} props.status Indica el estado actual del componente. Puede tener valores como 'error', 'cargando' u otros estados definidos por la aplicación.
- * @param {Function} props.action - Es una función que se ejecutará cuando se presione el botón de error. Esta función puede contener lógica para manejar el error o realizar alguna acción específica cuando ocurra un error.
- * @param {string} props.title -  Es una cadena de texto que representa el título del mensaje de error. Este título se mostrará en el componente cuando ocurra un error.
- * @param {string} props.description - Es una cadena de texto que proporciona una descripción detallada del error. Esta descripción se mostrará junto al título en el componente de mensaje de error.
- * @param {string} props.recommendation -  Es una cadena de texto que proporciona una recomendación sobre cómo manejar el error o qué acciones tomar para resolverlo.
- * @param {string} props.introMessage -  Es una cadena de texto que proporciona un mensaje introductorio adicional. Este mensaje se mostrará en el componente antes de mostrar el título, la descripción y la recomendación del error.
- * @param {string} props.errorIcon - Es una cadena de texto que representa la ruta o el identificador del ícono que se mostrará junto al mensaje de error.
- * @returns {JSX.Element} Elemento JSX que representa el componente.
- */
-/**
- * TODO: Documentar
+ * Este componente se utiliza para mostrar un mensaje de error de carga en una aplicación web.
+ * Dependiendo del valor de la propiedad `status`, el componente muestra:
+ *
+ * - Un indicador de progreso (spinner) cuando el status es distinto de "error".
+ * - Un mensaje de error personalizado con título, descripción, recomendación y un botón de acción
+ * cuando el status es "error". Además, se muestra un ícono de error que puede personalizarse.
+ *
+ * El componente también se adapta al tamaño del contenedor, ajustando el contenido visualmente
+ * mediante el hook `useComponentSize`. Se utiliza un `ResizeObserver` para determinar si el contenedor
+ * es lo suficientemente grande y, en caso contrario, ocultar ciertos elementos (por ejemplo, el ícono).
+ * @param {AreasLoadingErrorProps} props - Propiedades del componente.
+ * @param {string} props.status - Estado de la carga. Si es "error", se muestra el mensaje de error; de lo contrario, se muestra un indicador de progreso.
+ * @param {() => void} props.action - Función a ejecutar al hacer clic en el botón, generalmente para reintentar la acción.
+ * @param {string} [props.title] - Título del mensaje de error. Si no se proporciona, se usa un valor por defecto obtenido del diccionario.
+ * @param {string} [props.description] - Descripción del error. Si no se proporciona, se usa un valor por defecto obtenido del diccionario.
+ * @param {string} [props.recommendation] - Texto de recomendación para el usuario. Si no se proporciona, se usa un valor por defecto obtenido del diccionario.
+ * @param {string} [props.introMessage] - Mensaje que se muestra en el botón de acción. Si no se proporciona, se usa un valor por defecto obtenido del diccionario.
+ * @param {string} [props.errorIcon] - URL del ícono que se mostrará junto al mensaje de error. Si no se especifica, se utiliza un ícono predeterminado.
+ * @param {string} [props.className] - Clases CSS adicionales para aplicar al contenedor del componente.
+ * @param {string} [props.dataTestId] - Identificador para pruebas.
+ * @param {'small' | 'medium' | 'large'} [props.size] - Tamaño del componente, que influye en la visualización de textos y elementos.
+ * @example
+ * <LoadingError
+ *   status="error"
+ *   action={() => console.log("Reintentando...")}
+ *   title="Error de carga"
+ *   description="No se pudo cargar la información requerida."
+ *   recommendation="Intente refrescar la página o contacte al soporte."
+ *   introMessage="Reintentar"
+ *   errorIcon="/path/to/custom/error-icon.svg"
+ *   className="custom-loading-error"
+ *   dataTestId="loading-error-component"
+ *   size="medium"
+ * />
+ * @returns {JSX.Element} Un componente de React que muestra un indicador de progreso o un mensaje de error
+ * dependiendo del valor de `status`.
  */
 export declare const LoadingError: (props: AreasLoadingErrorProps) => import("react/jsx-runtime").JSX.Element;

package/components/LoadingError/LoadingError.js

@@ -1,55 +1,93 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
-import { I as ICONS } from "../areas/icons.js";
-import { l as loadingErrorUtilityClasses } from "./classes/index.js";
-import { L as LoadingErrorRoot } from "./styles.js";
-import { L as LinearProgressIndeterminate } from "../LinearProgressIndeterminate/LinearProgressIndeterminate.js";
+import { L as LoadingErrorRootStyled, a as LoadingErrorStyled, b as LinearProgressIndeterminateStyled, c as LoadingErrorContainerStyled, d as LoadingErrorContentStyled, e as LoadingErrorImageStyled, f as LoadingErrorTextContainerStyled, g as LoadingErrorTitleDescriptionStyled, h as LoadingErrorDividerStyled, i as LoadingErrorButtonContainerStyled, j as LoadingErrorRecommendationTextStyled } from "./slots/LoadingErrorSlots.js";
+import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { L as LOADING_ERROR_KEY_COMPONENT } from "./constants.js";
+import clsx from "clsx";
+import { d as dictionary } from "./dictionary.js";
+import { useRef, useState, useEffect } from "react";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import { L as LoadingErrorSlots } from "./slots/LoadingErrorEnum.js";
 import { T as Typography } from "../mui_extended/Typography/Typography.js";
-import { I as Icon } from "../Icon/Icon.js";
 import { B as Button } from "../mui_extended/Button/Button.js";
 const LoadingError = (props) => {
-  const { status, action, title, description, recommendation, introMessage, errorIcon } = props;
+  const { status, action, title, description, recommendation, introMessage, errorIcon, className, dataTestId, size = "medium" } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
-  const classes = loadingErrorUtilityClasses();
-  return /* @__PURE__ */ jsx(LoadingErrorRoot, { className: classes.root, children: status !== "error" ? /* @__PURE__ */ jsx("div", { className: classes.loadingErrorLoading, children: /* @__PURE__ */ jsx(LinearProgressIndeterminate, {}) }) : /* @__PURE__ */ jsxs("div", { className: classes.loadingError, children: [
-    /* @__PURE__ */ jsx(
-      Icon,
-      {
-        className: classes.loadingErrorIcon,
-        src: errorIcon ? errorIcon : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.NAVIGATE_ERROR}`
+  const { currentSize } = useComponentSize(size);
+  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
+  const ownerState = {
+    size: normalizedSize
+  };
+  const containerRef = useRef(null);
+  const [isVisible, setIsVisible] = useState(true);
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setIsVisible(entry.contentRect.height >= 200);
       }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: classes.titleDescription, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h3", skeletonWidth: "100px", className: classes.loadingErrorTitle, children: title ? title : getLabel("loading_error.label_error_title") }),
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "subtitle",
-          skeletonWidth: "100px",
-          className: classes.loadingErrorDescription,
-          children: description ? description : getLabel("loading_error.label_error_description")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: classes.loadingErrorDivider }),
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "paragraph",
-        skeletonWidth: "100px",
-        className: classes.loadingErrorTextAction,
-        children: recommendation ? recommendation : getLabel("loading_error.label_error_recommendation")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        onClick: action,
-        label: introMessage ? introMessage : getLabel("loading_error.label_error_intro")
-      }
-    )
-  ] }) });
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    LoadingErrorRootStyled,
+    {
+      ref: containerRef,
+      ownerState,
+      className: clsx(getComponentSlotRoot(LOADING_ERROR_KEY_COMPONENT), className),
+      ...getPropDataTestId(LOADING_ERROR_KEY_COMPONENT, LoadingErrorSlots.root, dataTestId),
+      children: status !== "error" ? /* @__PURE__ */ jsx(LoadingErrorStyled, { children: /* @__PURE__ */ jsx(LinearProgressIndeterminateStyled, {}) }) : /* @__PURE__ */ jsx(LoadingErrorContainerStyled, { children: /* @__PURE__ */ jsxs(LoadingErrorContentStyled, { children: [
+        isVisible && /* @__PURE__ */ jsx(
+          LoadingErrorImageStyled,
+          {
+            size,
+            src: errorIcon ? errorIcon : `${host_static_assets}/${environment_assets}/frontend/components/loading_error/assets/icons/LoadingError.svg`
+          }
+        ),
+        /* @__PURE__ */ jsxs(LoadingErrorTextContainerStyled, { children: [
+          /* @__PURE__ */ jsxs(LoadingErrorTitleDescriptionStyled, { children: [
+            /* @__PURE__ */ jsx(Typography, { size, variant: "h5", skeletonWidth: "100px", children: title ? title : getLabel(dictionary.LABEL_ERROR_TITLE) }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                size,
+                variant: "paragraph",
+                skeletonWidth: "100px",
+                children: description ? description : getLabel(dictionary.LABEL_ERROR_DESCRIPTION)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(LoadingErrorDividerStyled, {}),
+          /* @__PURE__ */ jsxs(LoadingErrorButtonContainerStyled, { children: [
+            /* @__PURE__ */ jsx(
+              LoadingErrorRecommendationTextStyled,
+              {
+                size,
+                variant: "paragraph",
+                skeletonWidth: "100px",
+                children: recommendation ? recommendation : getLabel(dictionary.LABEL_ERROR_RECOMMENDATION)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size,
+                variant: "contained",
+                color: "primary",
+                startIcon: `${host_static_assets}/${environment_assets}/frontend/components/loading_error/assets/icons/refresh.svg`,
+                onClick: action,
+                label: introMessage ? introMessage : getLabel(dictionary.LABEL_ERROR_INTRO)
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
 };
 export {
   LoadingError as L

package/components/LoadingError/LoadingError.styles.d.ts

@@ -0,0 +1,2 @@
+import { LoadingErrorStyles } from './types';
+export declare const loadingErrorStyles: LoadingErrorStyles;

package/components/LoadingError/LoadingError.styles.js

@@ -0,0 +1,121 @@
+const loadingErrorStyles = {
+  /**
+   * Styles for Root.
+   */
+  root: () => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative",
+    inset: "0",
+    overflow: "hidden",
+    width: "100%",
+    height: "100%"
+  }),
+  /**
+   * Styles for LoadingError.
+   */
+  loadingError: ({ theme }) => ({
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    minHeight: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Styles for LoadingErrorContent.
+   */
+  loadingErrorContent: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    width: "268px",
+    gap: theme.vars.size.baseSpacings.sp5,
+    padding: theme.vars.size.baseSpacings.sp3,
+    alignContent: "center",
+    justifyContent: "center",
+    alignItems: "center",
+    flexShrink: 0,
+    height: "100%"
+  }),
+  /**
+   * Styles for LoadingErrorTitleDescription.
+   */
+  loadingErrorTitleDescription: ({ theme }) => ({
+    textAlign: "center",
+    flexDirection: "column",
+    display: "flex",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  }),
+  /**
+   * Styles for loadingErrorImage.
+   */
+  loadingErrorImage: () => ({
+    width: "auto",
+    height: "114px",
+    maxHeight: "114px",
+    minHeight: "60px"
+  }),
+  /**
+   * Styles for LoadingErrorDivider.
+   */
+  loadingErrorDivider: ({ theme }) => ({
+    width: "100%",
+    height: "1px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp3,
+    alignSelf: "stretch",
+    backgroundColor: theme.vars.palette.border.secondary
+  }),
+  /**
+   * Styles for LoadingErrorContainer.
+   */
+  loadingErrorContainer: () => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%"
+  }),
+  /**
+   * Styles for LoadingErrorTextContainerStyled.
+   */
+  loadingErrorTextContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp3
+  }),
+  /**
+   * Styles for LoadingErrorButtonContainerStyled.
+   */
+  loadingErrorButtonContainer: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.vars.size.baseSpacings.sp2,
+    alignSelf: "stretch"
+  }),
+  /**
+   * Styles for LoadingErrorRecommendationTextStyled.
+   */
+  loadingErrorRecommendationText: ({ theme }) => ({
+    color: `${theme.vars.palette.text.secondary} !important`
+  }),
+  /**
+   * Styles for LinearProgressIndeterminateStyled.
+   */
+  linearProgressIndeterminate: () => ({
+    top: "unset"
+  })
+};
+export {
+  loadingErrorStyles as l
+};

package/components/LoadingError/constants.d.ts

@@ -0,0 +1 @@
+export declare const LOADING_ERROR_KEY_COMPONENT = "M4LLoadingError";

package/components/LoadingError/constants.js

@@ -0,0 +1,4 @@
+const LOADING_ERROR_KEY_COMPONENT = "M4LLoadingError";
+export {
+  LOADING_ERROR_KEY_COMPONENT as L
+};

package/components/LoadingError/dictionary.d.ts

@@ -1 +1,8 @@
+export declare const LOADING_ERROR_DICTIONARY_KEY = "loading_error";
+export declare const dictionary: {
+    LABEL_ERROR_DESCRIPTION: string;
+    LABEL_ERROR_INTRO: string;
+    LABEL_ERROR_RECOMMENDATION: string;
+    LABEL_ERROR_TITLE: string;
+};
 export declare const getLoadingErrorComponentsDictionary: () => string[];

package/components/LoadingError/dictionary.js

@@ -1,6 +1,14 @@
+const LOADING_ERROR_DICTIONARY_KEY = `loading_error`;
+const dictionary = {
+  LABEL_ERROR_DESCRIPTION: `${LOADING_ERROR_DICTIONARY_KEY}.label_error_description`,
+  LABEL_ERROR_INTRO: `${LOADING_ERROR_DICTIONARY_KEY}.label_error_intro`,
+  LABEL_ERROR_RECOMMENDATION: `${LOADING_ERROR_DICTIONARY_KEY}.label_error_recommendation`,
+  LABEL_ERROR_TITLE: `${LOADING_ERROR_DICTIONARY_KEY}.label_error_title`
+};
 const getLoadingErrorComponentsDictionary = () => {
-  return ["loading_error"];
+  return [LOADING_ERROR_DICTIONARY_KEY];
 };
 export {
+  dictionary as d,
   getLoadingErrorComponentsDictionary as g
 };

package/components/LoadingError/slots/LoadingErrorEnum.d.ts

@@ -0,0 +1,13 @@
+export declare enum LoadingErrorSlots {
+    root = "root",
+    loadingError = "loadingError",
+    loadingErrorContent = "loadingErrorContent",
+    loadingErrorTitleDescription = "loadingErrorTitleDescription",
+    loadingErrorImage = "loadingErrorImage",
+    loadingErrorDivider = "loadingErrorDivider",
+    loadingErrorContainer = "loadingErrorContainer",
+    loadingErrorTextContainer = "loadingErrorTextContainer",
+    loadingErrorButtonContainer = "loadingErrorButtonContainer",
+    loadingErrorRecommendationText = "loadingErrorRecommendationText",
+    linearProgressIndeterminate = "linearProgressIndeterminate"
+}

package/components/LoadingError/slots/LoadingErrorEnum.js

@@ -0,0 +1,17 @@
+var LoadingErrorSlots = /* @__PURE__ */ ((LoadingErrorSlots2) => {
+  LoadingErrorSlots2["root"] = "root";
+  LoadingErrorSlots2["loadingError"] = "loadingError";
+  LoadingErrorSlots2["loadingErrorContent"] = "loadingErrorContent";
+  LoadingErrorSlots2["loadingErrorTitleDescription"] = "loadingErrorTitleDescription";
+  LoadingErrorSlots2["loadingErrorImage"] = "loadingErrorImage";
+  LoadingErrorSlots2["loadingErrorDivider"] = "loadingErrorDivider";
+  LoadingErrorSlots2["loadingErrorContainer"] = "loadingErrorContainer";
+  LoadingErrorSlots2["loadingErrorTextContainer"] = "loadingErrorTextContainer";
+  LoadingErrorSlots2["loadingErrorButtonContainer"] = "loadingErrorButtonContainer";
+  LoadingErrorSlots2["loadingErrorRecommendationText"] = "loadingErrorRecommendationText";
+  LoadingErrorSlots2["linearProgressIndeterminate"] = "linearProgressIndeterminate";
+  return LoadingErrorSlots2;
+})(LoadingErrorSlots || {});
+export {
+  LoadingErrorSlots as L
+};

package/components/LoadingError/slots/LoadingErrorSlots.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Root component
+ */
+export declare const LoadingErrorRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LoadingErrorStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LoadingErrorContentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LoadingErrorTitleDescriptionStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LoadingErrorImageStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Image').ImageProps, keyof import('../../Image').ImageProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const LoadingErrorDividerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LoadingErrorContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LoadingErrorTextContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LoadingErrorButtonContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const LoadingErrorRecommendationTextStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const LinearProgressIndeterminateStyled: import('@emotion/styled').StyledComponent<Pick<import('../../LinearProgressIndeterminate/types').LinearProgressIndeterminateProps, keyof import('../../LinearProgressIndeterminate/types').LinearProgressIndeterminateProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, {}, {}>;

package/components/LoadingError/slots/LoadingErrorSlots.js

@@ -0,0 +1,64 @@
+import { styled } from "@mui/material/styles";
+import { L as LOADING_ERROR_KEY_COMPONENT } from "../constants.js";
+import { L as LoadingErrorSlots } from "./LoadingErrorEnum.js";
+import { l as loadingErrorStyles } from "../LoadingError.styles.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { L as LinearProgressIndeterminate } from "../../LinearProgressIndeterminate/LinearProgressIndeterminate.js";
+import { I as Image } from "../../Image/Image.js";
+const LoadingErrorRootStyled = styled("div", {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.root
+})(loadingErrorStyles.root);
+const LoadingErrorStyled = styled("div", {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.loadingError
+})(loadingErrorStyles.loadingError);
+const LoadingErrorContentStyled = styled("div", {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.loadingErrorContent
+})(loadingErrorStyles.loadingErrorContent);
+const LoadingErrorTitleDescriptionStyled = styled("div", {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.loadingErrorTitleDescription
+})(loadingErrorStyles.loadingErrorTitleDescription);
+const LoadingErrorImageStyled = styled(Image, {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.loadingErrorImage
+})(loadingErrorStyles.loadingErrorImage);
+const LoadingErrorDividerStyled = styled("div", {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.loadingErrorDivider
+})(loadingErrorStyles.loadingErrorDivider);
+const LoadingErrorContainerStyled = styled("div", {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.loadingErrorContainer
+})(loadingErrorStyles.loadingErrorContainer);
+const LoadingErrorTextContainerStyled = styled("div", {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.loadingErrorTextContainer
+})(loadingErrorStyles.loadingErrorTextContainer);
+const LoadingErrorButtonContainerStyled = styled("div", {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.loadingErrorButtonContainer
+})(loadingErrorStyles.loadingErrorButtonContainer);
+const LoadingErrorRecommendationTextStyled = styled(Typography, {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.loadingErrorRecommendationText
+})(loadingErrorStyles.loadingErrorRecommendationText);
+const LinearProgressIndeterminateStyled = styled(LinearProgressIndeterminate, {
+  name: LOADING_ERROR_KEY_COMPONENT,
+  slot: LoadingErrorSlots.linearProgressIndeterminate
+})(loadingErrorStyles.linearProgressIndeterminate);
+export {
+  LoadingErrorRootStyled as L,
+  LoadingErrorStyled as a,
+  LinearProgressIndeterminateStyled as b,
+  LoadingErrorContainerStyled as c,
+  LoadingErrorContentStyled as d,
+  LoadingErrorImageStyled as e,
+  LoadingErrorTextContainerStyled as f,
+  LoadingErrorTitleDescriptionStyled as g,
+  LoadingErrorDividerStyled as h,
+  LoadingErrorButtonContainerStyled as i,
+  LoadingErrorRecommendationTextStyled as j
+};

package/components/LoadingError/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LoadingErrorEnum';
+export * from './LoadingErrorSlots';

package/components/LoadingError/slots/index.js

@@ -0,0 +1 @@
+

package/components/LoadingError/tests/LoadingError.test.d.ts

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

package/components/LoadingError/types.d.ts

@@ -1,4 +1,9 @@
+import { Theme } from '@mui/material';
 import { AreaStatus, AreasStatus } from '../areas/contexts/AreasContext/types';
+import { LOADING_ERROR_KEY_COMPONENT } from './constants';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { LoadingErrorSlots } from './slots/LoadingErrorEnum';
+import { Sizes } from '@m4l/styles';
 export interface AreasLoadingErrorProps {
     /**Indica el estado actual del componente. Puede tener valores como 'error', 'cargando' u otros estados definidos por la aplicación. */
     status: AreasStatus | AreaStatus;
@@ -14,4 +19,15 @@ export interface AreasLoadingErrorProps {
     introMessage?: string;
     /**Es una cadena de texto que representa la ruta o el identificador del ícono que se mostrará junto al mensaje de error. */
     errorIcon?: string;
+    /**Clase CSS que se aplicará al componente. */
+    className?: string;
+    /**Identificador de datos de prueba que se aplicará al componente. */
+    dataTestId?: string;
+    /**Tamaño del componente. */
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }
+export type LoadingErrorOwnerState = {
+    size?: AreasLoadingErrorProps['size'];
+};
+export type LoadingErrorType = keyof typeof LoadingErrorSlots;
+export type LoadingErrorStyles = OverridesStyleRules<LoadingErrorType, typeof LOADING_ERROR_KEY_COMPONENT, Theme>;

package/components/mui_extended/Typography/typography.styles.js

@@ -6,6 +6,7 @@ const typographyStyles = {
    * Componente extendido de MUI Typography, que permite personalizar los estilos del componente.
    */
   root: ({ ownerState, theme }) => ({
+    margin: 0,
     cursor: "default",
     "&.M4lclassCssSpecificity": {
       // Estilos generales 🌐

package/package.json

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

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

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

package/components/LoadingError/classes/constants.js

@@ -1,4 +0,0 @@
-const componentName = "M4LoadingError";
-export {
-  componentName as c
-};

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

@@ -1,26 +0,0 @@
-import { LoadingErrorClassesType } from './types';
-/**
- * Clases de utilidad para el componente de carga de error.
- */
-export declare const loadingErrorClasses: LoadingErrorClassesType;
-/**
- * Obtiene la clase de utilidad para un slot específico del componente de carga de error.
- * @param slot El slot para el que se desea obtener la clase de utilidad.
- * @returns La clase de utilidad correspondiente al slot especificado.
- */
-export declare function getLoadingErrorUtilityClass(slot: string): string;
-/**
- * Función para generar todas las clases de utilidad del componente de carga de error.
- * @returns Un objeto que contiene todas las clases de utilidad generadas.
- */
-export declare const loadingErrorUtilityClasses: () => {
-    root: string;
-    loadingErrorLoading: string;
-    loadingError: string;
-    loadingErrorIcon: string;
-    loadingErrorTitle: string;
-    loadingErrorDescription: string;
-    loadingErrorDivider: string;
-    loadingErrorTextAction: string;
-    titleDescription: string;
-};

package/components/LoadingError/classes/index.js

@@ -1,39 +0,0 @@
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { c as componentName } from "./constants.js";
-generateUtilityClasses(componentName, [
-  /* elements */
-  "root",
-  "loadingErrorLoading",
-  "loadingError",
-  "loadingErrorIcon",
-  "loadingErrorTitle",
-  "loadingErrorDescription",
-  "loadingErrorDivider",
-  "loadingErrorTextAction",
-  "titleDescription"
-  /* states or variants of elements */
-]);
-function getLoadingErrorUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const loadingErrorUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    loadingErrorLoading: ["loadingErrorLoading"],
-    loadingError: ["loadingError"],
-    loadingErrorIcon: ["loadingErrorIcon"],
-    loadingErrorTitle: ["loadingErrorTitle"],
-    loadingErrorDescription: ["loadingErrorDescription"],
-    loadingErrorDivider: ["loadingErrorDivider"],
-    loadingErrorTextAction: ["loadingErrorTextAction"],
-    titleDescription: ["titleDescription"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getLoadingErrorUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-export {
-  loadingErrorUtilityClasses as l
-};

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

@@ -1,14 +0,0 @@
-import { loadingErrorUtilityClasses } from '.';
-export interface LoadingErrorClassesType {
-    root: string;
-    loadingErrorLoading: string;
-    loadingError: string;
-    loadingErrorIcon: string;
-    loadingErrorTitle: string;
-    loadingErrorDescription: string;
-    loadingErrorDivider: string;
-    loadingErrorTextAction: string;
-    titleDescription: string;
-}
-export type MFLoaderClassesKey = keyof LoadingErrorClassesType;
-export type Classes = ReturnType<typeof loadingErrorUtilityClasses>;

package/components/LoadingError/styles.d.ts

@@ -1 +0,0 @@
-export declare const LoadingErrorRoot: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/LoadingError/styles.js

@@ -1,7 +0,0 @@
-import { styled } from "@mui/material/styles";
-const LoadingErrorRoot = styled("div")(({ theme }) => ({
-  ...theme?.components?.M4LoadingError?.styleOverrides || {}
-}));
-export {
-  LoadingErrorRoot as L
-};