@m4l/components 9.1.122 → 9.1.125

package/@types/types.d.ts

@@ -137,6 +137,7 @@ import { CourseFormatterOwnerState, CourseFormatterSlotsType } from '../componen
 import { NoItemSelectedOwnerState, NoItemSelectedSlotsType } from '../components/NoItemSelected/types';
 import { ActionFormIntroOwnerState, ActionFormIntroSlotsType } from '../components/CommonActions/components/ActionFormIntro/types';
 import { AreasViewerOwnerState, AreasViewerType } from '../components/areas/components/AreasViewer/types';
+import { TimePickerOwnerState,TimePickerSlotsType } from '../components/mui_extended/TimePicker/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -206,6 +207,7 @@ declare module '@mui/material/styles' {
     M4LNoItemSelected: NoItemSelectedSlotsType;
     M4LActionFormIntro: ActionFormIntroSlotsType;
     M4LAreasViewer: AreasViewerType;
+    M4LTimePicker: TimePickerSlotsType
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -274,6 +276,7 @@ declare module '@mui/material/styles' {
     M4LNoItemSelected: Partial<NoItemSelectedOwnerState>;
     M4LActionFormIntro : Partial<ActionFormIntroOwnerState>;
     M4LAreasViewer: Partial<AreasViewerOwnerState>;
+    M4LTimePicker: Partial<TimePickerOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -601,5 +604,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCourseFormatter'];
       variants?: ComponentsVariants['M4LCourseFormatter'];
     };
+    M4LTimePicker?: {
+      defaultProps?: ComponentsPropsList['M4LTimePicker'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LTimePicker'];
+      variants?: ComponentsVariants['M4LTimePicker'];
+    };
    }
 }

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/hook-form/RHFTimePicker/RHFTimePicker.d.ts

@@ -0,0 +1,29 @@
+import { TimePickerProps } from './types';
+/**
+ * El RHFTimePicker es un componente que permite la selección y visualización de una hora específica,
+ * sin tener que gestionar una fecha completa. Se utiliza en escenarios donde se requiere
+ * que el usuario defina una hora, y se integra con react-hook-form, permitiendo la validación y
+ * manejo de estados de los campos de formulario.
+ *
+ * ### Dependencias:
+ * - **`useFormContext:`** Hook que provee acceso a los métodos y propiedades de un formulario react-hook-form.
+ * - **`useFormatter:`** Hook que permite acceder a los diferentes formatters de la aplicación.
+ * @example
+ * ```tsx
+ * const ExampleComponent = () => {
+ *   const { control } = useForm();
+ *   return (
+ *     <RHFTimePicker
+ *       name="time"
+ *       control={control}
+ *       size="medium"
+ *       variant="outlined"
+ *       label="Hora"
+ *       helperMessage="Seleccione una hora"
+ *     />
+ *   );
+ * };
+ * export default ExampleComponent;
+ * ```
+ */
+export declare function RHFTimePicker(props: TimePickerProps): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFTimePicker/RHFTimePicker.styles.d.ts

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

package/components/hook-form/RHFTimePicker/constants.d.ts

@@ -0,0 +1 @@
+export declare const RHF_TIME_PICKER_KEY_COMPONENT = "M4LRHFTimePicker";

package/components/hook-form/RHFTimePicker/slots/RHFTimePickerEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum RHFTimePickerSlots {
+    root = "root"
+}

package/components/hook-form/RHFTimePicker/slots/RHFTimePickerSlots.d.ts

@@ -0,0 +1 @@
+export declare const RHFTimePickerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/hook-form/RHFTimePicker/tests/RHFTimePicker.test.d.ts

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

package/components/hook-form/RHFTimePicker/types.d.ts

@@ -0,0 +1,21 @@
+import { Sizes } from '@m4l/styles';
+import { TextFieldVariants } from '../../../components/mui_extended/TextField/types';
+import { LabelProps } from '../../Label/types';
+import { M4LOverridesStyleRules } from '../../../../src/@types/augmentations';
+import { Theme } from '@mui/material';
+import { RHF_TIME_PICKER_KEY_COMPONENT } from './constants';
+import { RHFTimePickerSlots } from './slots/RHFTimePickerEnum';
+export interface TimePickerProps extends Omit<LabelProps, 'label'> {
+    name: string;
+    variant?: TextFieldVariants;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+    helperMessage?: string;
+    /**
+     * dataTestId
+     */
+    dataTestId?: string;
+}
+export type RHFTimePickerStyles = M4LOverridesStyleRules<keyof typeof RHFTimePickerSlots, typeof RHF_TIME_PICKER_KEY_COMPONENT, Theme>;

package/components/mui_extended/DateTimePicker/DateTimePicker.d.ts

@@ -1,7 +1,12 @@
 import { DateTimePickerProps } from './types';
 /**
- * DataTimePicker es un refactor del componente de material UI.
+ * El DateTimePicker es un componente que permite la selección y visualización de una fecha y hora específica.
+ * Se utiliza en escenarios donde se requiere que el usuario defina una fecha y hora.
  *
+ * ### Dependencias:
+ * - **`useEnvironment:`** Hook que permite acceder a los valores del entorno de la aplicación.
+ * - **`useIsMobile:`** Hook que permite saber si el dispositivo es móvil .
+ * @example
  *  ```tsx *
  * const ExampleComponent = () => {
  *   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

package/components/mui_extended/DateTimePicker/DateTimePicker.styles.js

@@ -57,8 +57,9 @@ const dateTimePickerStyles = {
           border: 0,
           borderBottom: theme.vars.size.borderStroke.actionInput
         },
-        borderColor: ownerState.error ? theme.vars.palette.error.hover : theme.vars.palette.border.default,
-        borderRadius: theme.vars.size.borderRadius.r1
+        borderColor: ownerState.error ? theme.vars.palette.error.hover : ownerState.disabled ? `${theme.vars.palette.border.secondary}` : theme.vars.palette.border.default,
+        borderRadius: theme.vars.size.borderRadius.r1,
+        borderWidth: 1
       },
       // ↴ Overrides ❌
       "&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
@@ -129,7 +130,7 @@ const dateTimePickerStyles = {
           border: 0,
           borderBottom: theme.vars.size.borderStroke.actionInput
         },
-        borderColor: ownerState.error ? theme.vars.palette.error.hover : theme.vars.palette.border.default,
+        borderColor: ownerState.error ? theme.vars.palette.error.hover : ownerState.disabled ? `${theme.vars.palette.border.secondary}` : theme.vars.palette.border.default,
         borderRadius: theme.vars.size.borderRadius.r1
       },
       // ↴ Overrides ❌

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

@@ -43,7 +43,7 @@ export type DateTimePickerOwnerState = {
      */
     variant?: TextFieldVariants;
     /**
-     *
+     * componente con el campo deshabilitado.
      */
     disabled: boolean;
 };

package/components/mui_extended/TimePicker/TimePicker.d.ts

@@ -0,0 +1,32 @@
+import { TimePickerProps } from './types';
+/**
+ * El TimePicker es un componente que permite la selección y visualización de una hora específica,
+ * sin tener que gestionar una fecha completa. Se utiliza en escenarios donde se requiere
+ * que el usuario defina una hora.
+ *
+ * ### Dependencias:
+ * - **`useEnvironment:`** Hook que permite acceder a los valores del entorno de la aplicación.
+ * - **`useIsMobile:`** Hook que permite saber si el dispositivo es móvil .
+ * @example
+ * ```tsx
+ * const ExampleComponent = () => {
+ *   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+ *   const handleDateChange = (date: Date | null) => {
+ *   setSelectedDate(date);
+ *   };
+ *  return (
+ *   <TimePicker
+ *    size="medium"
+ *    error={false}
+ *    disabled={false}
+ *    variant="outlined"
+ *    ampm={true}
+ *    value={selectedDate}
+ *    onChange={handleDateChange}
+ *   />
+ *  );
+ * };
+ * export default ExampleComponent;
+ * ```
+ */
+export declare const TimePicker: (props: TimePickerProps<Date>) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/TimePicker/TimePickerStyles.d.ts

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

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

@@ -0,0 +1,8 @@
+/**
+ * Key para el componente TimePicker
+ */
+export declare const TIME_PICKER_KEY_COMPONENT = "M4LTimePicker";
+/**
+ * url para el icono del componente TimePicker
+ */
+export declare const time = "frontend/components/Time_picker/assets/icons/time_picker.svg";

package/components/mui_extended/TimePicker/slots/TimePickerEnum.d.ts

@@ -0,0 +1,8 @@
+export declare enum TimePickerSlots {
+    rootDesktop = "rootDesktop",
+    popper = "popper",
+    rootMobile = "rootMobile",
+    paper = "paper",
+    iconButton = "iconButton",
+    skeleton = "skeleton"
+}

package/components/mui_extended/TimePicker/slots/TimePickerSlots.d.ts

@@ -0,0 +1,20 @@
+export declare const DesktopTimePickerRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/x-date-pickers').DesktopTimePickerProps<unknown> & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('@mui/x-date-pickers').DesktopTimePickerProps<unknown>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const PopperStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').PopperProps & import('react').RefAttributes<HTMLDivElement>, "children" | "ref" | "title" | "component" | "id" | "container" | "components" | "hidden" | "color" | "content" | "style" | "open" | "transition" | "translate" | "sx" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "componentsProps" | "placement" | "slotProps" | "slots" | "anchorEl" | "disablePortal" | "keepMounted" | "modifiers" | "popperOptions" | "popperRef" | "key"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const MobileTimePickerRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/x-date-pickers').MobileTimePickerProps<unknown, import('@mui/x-date-pickers').TimeView> & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('@mui/x-date-pickers').MobileTimePickerProps<unknown, import('@mui/x-date-pickers').TimeView>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const PaperStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').PaperOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "style" | "square" | "variant" | "sx" | "classes" | "className" | "elevation">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "square" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "elevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export declare const SkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TimePickerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TimePickerOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/mui_extended/TimePicker/tests/TimePicker.test.d.ts

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

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

@@ -0,0 +1,51 @@
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { TimePickerProps as MuiTimePickerProps } from '@mui/x-date-pickers';
+import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
+import { TextFieldVariants } from '../TextField/types';
+import { TimePickerSlots } from './slots/TimePickerEnum';
+import { TIME_PICKER_KEY_COMPONENT } from './constants';
+export interface TimePickerProps<T extends Date> extends MuiTimePickerProps<T> {
+    /**
+     * Tamaño del componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Indica si esta en error.
+     */
+    error?: boolean;
+    /**
+     * ClassName
+     */
+    className?: string;
+    /**
+     * dataTestId
+     */
+    dataTestId?: string;
+    /**
+     * Variante del campo de texto.
+     * variant="text"
+     */
+    variant?: TextFieldVariants;
+}
+export type TimePickerSlotsType = keyof typeof TimePickerSlots;
+export type TimePickerOwnerState = {
+    /**
+     * Tamaño del componente.
+     */
+    size: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Indica si esta en error.
+     */
+    error?: boolean;
+    /**
+     * Variante del campo de texto.
+     * variant="text"
+     */
+    variant?: TextFieldVariants;
+    /**
+     * componente con el campo deshabilitado.
+     */
+    disabled: boolean;
+};
+export type TimePickerStyles = OverridesStyleRules<TimePickerSlotsType, typeof TIME_PICKER_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.122",
+  "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
-};