@m4l/components 2.0.7 → 3.0.1

package/components/modal/{WindowBase.cb284225.js → WindowBase-CLBER1xc.js}

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { m as modalUtilityClasses } from "./index.81eb6def.js";
+import { m as modalUtilityClasses } from "./index-CydPIpKZ.js";
 import { useEnvironment } from "@m4l/core";
 import clsx from "clsx";
-import { I as Icon } from "../Icon/index.0f315ccd.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.caf17392.js";
-import { u as useModal } from "../../hooks/useModal/index.6f5c238d.js";
+import { I as Icon } from "../Icon/index-CedboS6y.js";
+import { I as IconButton } from "../mui_extended/IconButton/index-BfDbi0cC.js";
+import { u as useModal } from "../../hooks/useModal/index-C9r1LQIz.js";
 const Header = (props) => {
   const { title, onClickCancel, urlIcon, classes } = props;
   const { host_static_assets, environment_assets } = useEnvironment();

package/components/modal/{WindowConfirm.193cc75e.js → WindowConfirm-DraflAKP.js}

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { A as Actions } from "../CommonActions/components/Actions/index.ea4c273b.js";
+import { A as Actions } from "../CommonActions/components/Actions/index-B_vOmNZT.js";
 import { Typography } from "@mui/material";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
-import { u as useModal } from "../../hooks/useModal/index.6f5c238d.js";
-import { I as Image } from "../Image/index.32b58ce4.js";
-import { m as modalUtilityClasses } from "./index.81eb6def.js";
-import { W as WindowBase } from "./WindowBase.cb284225.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.c1185f46.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.185199da.js";
+import { u as useModal } from "../../hooks/useModal/index-C9r1LQIz.js";
+import { I as Image } from "../Image/index-B7FhR9uF.js";
+import { m as modalUtilityClasses } from "./index-CydPIpKZ.js";
+import { W as WindowBase } from "./WindowBase-CLBER1xc.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index-BlaMdPmp.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index-DGooFqVu.js";
 const dictionary = {
   MESSAGE: "common_actions.confirm_quit_msg"
 };
@@ -18,6 +18,7 @@ const MessageIlustration = (props) => {
     msg = getLabel(dictionary.MESSAGE),
     classes,
     title
+    // msg = 'Are you sure you want to perform this action? Once complete, the information will be deleted.',
   } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustrator_confirm_warning.svg`;

package/components/modal/{index.81eb6def.js → index-CydPIpKZ.js}

@@ -2,6 +2,7 @@ import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 const componentName = "M4LModal";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "windowBaseRoot",
   "containerWindow",
@@ -17,6 +18,7 @@ generateUtilityClasses(componentName, [
   "windowConfirm",
   "resizeHandle",
   "windowContent",
+  /* states or variants of elements */
   "variantDelete",
   "variantWarning",
   "variantInfo",

package/components/mui_extended/Accordion/{index.49007a43.js → index-ZFpEUCnw.js}

@@ -1,21 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { generateUtilityClasses, generateUtilityClass, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.caf17392.js";
+import { I as IconButton } from "../IconButton/index-BfDbi0cC.js";
 import { useEnvironment } from "@m4l/core";
 import { unstable_composeClasses } from "@mui/base";
-import { ax as AccordionRoot } from "../../../styles/index.ccd8acc4.js";
+import { ax as AccordionRoot } from "../../../styles/index-Cc9p_h7i.js";
 import clsx from "clsx";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../test/getNameDataTestId.0faeade8.js";
-import { I as Icon } from "../../Icon/index.0f315ccd.js";
-import { T as Typography } from "../Typography/index.61dd3fc6.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId-BaBTWhBr.js";
+import { I as Icon } from "../../Icon/index-CedboS6y.js";
+import { T as Typography } from "../Typography/index-DKPqV11f.js";
 const componentName = "M4LAccordion";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "endIcon",
   "labelIcon",
   "label",
   "content"
+  /* states or variants of elements */
 ]);
 function getAccordionUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);

package/components/mui_extended/Avatar/{index.a2e1ca6d.js → index-Bk4Hq2nk.js}

@@ -2,9 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton, generateUtilityClasses, generateUtilityClass, Avatar as Avatar$1 } from "@mui/material";
 import { useModuleSkeleton } from "@m4l/core";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
 import { unstable_composeClasses } from "@mui/base";
-import { ay as AvatarRoot } from "../../../styles/index.ccd8acc4.js";
+import { ay as AvatarRoot } from "../../../styles/index-Cc9p_h7i.js";
 import clsx from "clsx";
 const AVATAR_PREFIX = "M4LAvatar";
 const getNameAvatarDataTestId = (KEY) => {
@@ -25,8 +25,10 @@ const SkeletonAvatar = (props) => {
 };
 const componentName = "M4LAvatar";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "skeleton"
+  /* states or variants of elements */
 ]);
 function getAvatarUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
@@ -42,6 +44,7 @@ const useAvatarUtilityClasses = () => {
   };
 };
 const Avatar = forwardRef(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ({ color = "default", sx, className, ...other }, ref) => {
     const isSkeleton = useModuleSkeleton();
     const classes = useAvatarUtilityClasses();

package/components/mui_extended/Badge/{index.188ffbb4.js → index-D6F1o3k2.js}

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, Badge as Badge$1 } from "@mui/material";
 import "@mui/base";
-import { az as BadgeRoot } from "../../../styles/index.ccd8acc4.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { az as BadgeRoot } from "../../../styles/index-Cc9p_h7i.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
 const componentName = "M4LBadge";
 const badgeClasses = generateUtilityClasses(componentName, [
+  /* elements */
   "root"
+  /* states or variants of elements */
 ]);
 const BADGE_PREFIX = "M4LBadge";
 const getNameBadgeDataTestId = (ELEMENTKEY, ID) => {

package/components/mui_extended/Breadcrumbs/{index.4a44883c.js → index-DTS7rOZH.js}

@@ -31,8 +31,7 @@ function Breadcrumbs(props) {
   const { links, activeLast = false, ...other } = props;
   const { getLabel } = useModuleDictionary();
   const currentLink = useMemo(() => {
-    if (links.length === 0)
-      return "";
+    if (links.length === 0) return "";
     const { dictionaryField } = links[links.length - 1];
     return getLabel(dictionaryField);
   }, [getLabel, links]);

package/components/mui_extended/Button/{index.ca15c36e.js → index-DlzpoczE.js}

@@ -2,18 +2,20 @@ import { jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
 import { generateUtilityClasses, generateUtilityClass, Skeleton, IconButton, Tooltip } from "@mui/material";
 import MuiButton from "@mui/material/Button";
-import { aA as ButtonRoot, aB as WrapperImageButton, aC as LoadingButtonRoot } from "../../../styles/index.ccd8acc4.js";
+import { aA as ButtonRoot, aB as WrapperImageButton, aC as LoadingButtonRoot } from "../../../styles/index-Cc9p_h7i.js";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { useMemo } from "react";
-import { I as Image } from "../../Image/index.32b58ce4.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
+import { I as Image } from "../../Image/index-B7FhR9uF.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
 import { LoadingButton as LoadingButton$1 } from "@mui/lab";
-import { T as Typography } from "../Typography/index.61dd3fc6.js";
+import { T as Typography } from "../Typography/index-DKPqV11f.js";
 const componentName$2 = "M4LButton";
 const buttonClasses = generateUtilityClasses(componentName$2, [
+  /* elements */
   "root",
   "skeleton",
+  /* states or variants of elements */
   "sizeSmall",
   "sizeMedium",
   "variantOutlined",
@@ -23,6 +25,7 @@ const buttonClasses = generateUtilityClasses(componentName$2, [
   "colorError",
   "colorSuccess",
   "colorWarning",
+  /**Toggle */
   "togglePressed",
   "toggleNotPressed"
 ]);
@@ -57,6 +60,7 @@ const Button = (props) => {
     className,
     disabled,
     skeletonWidth = "100px",
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     skeletonHeight = "28px",
     colorState,
     ...others
@@ -69,19 +73,33 @@ const Button = (props) => {
     colorState
   };
   const classes = useUtilityClasses$2(ownerState);
-  return /* @__PURE__ */ jsx(ButtonRoot, { className: clsx(classes.root, className), "data-testid": "ButtonRoot", children: !isSkeleton ? /* @__PURE__ */ jsx(MuiButton, { ...others, variant, size, disableRipple: true, disabled }) : /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      className: classes.skeleton,
-      "data-testid": "MuiSkeleton",
-      variant: "rectangular",
-      width: skeletonWidth
-    }
-  ) });
+  return (
+    /* ButtonRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides que
+        provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a
+        otros componentes de la plataforna web. */
+    /* @__PURE__ */ jsx(ButtonRoot, { className: clsx(classes.root, className), "data-testid": "ButtonRoot", children: !isSkeleton ? (
+      /* MuiButton: Componente botón proporcionado por la librería externa material ui. */
+      /* @__PURE__ */ jsx(MuiButton, { ...others, variant, size, disableRipple: true, disabled })
+    ) : (
+      /* MuiSkeleton: Componente extendido de mui que se usa para mostrar la versión provisional de elementos en
+              la plataforma web. */
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          className: classes.skeleton,
+          "data-testid": "MuiSkeleton",
+          variant: "rectangular",
+          width: skeletonWidth
+        }
+      )
+    ) })
+  );
 };
 const componentName$1 = "M4LImageButton";
 generateUtilityClasses(componentName$1, [
+  /* elements */
   "root"
+  /* states or variants of elements */
 ]);
 function getImageButtonUtilityClass(slot) {
   return generateUtilityClass(componentName$1, slot);
@@ -125,8 +143,10 @@ const componentName = "M4LLoadingButton";
 generateUtilityClasses(
   componentName,
   [
+    /* elements */
     "root",
     "skeleton",
+    /* states or variants of elements */
     "sizeSmall",
     "sizeMedium",
     "variantOutlined",

package/components/mui_extended/{CheckBox.983e10e6.js → CheckBox-ByxYagHV.js}

@@ -5,12 +5,14 @@ import { useResponsiveDesktop } from "@m4l/graphics";
 import { unstable_composeClasses } from "@mui/base";
 import { useModuleSkeleton } from "@m4l/core";
 import { forwardRef } from "react";
-import { aD as CheckBoxRoot } from "../../styles/index.ccd8acc4.js";
-import { F as FieldLabel } from "../FieldLabel/index.972f989e.js";
+import { aD as CheckBoxRoot } from "../../styles/index-Cc9p_h7i.js";
+import { F as FieldLabel } from "../FieldLabel/index-BpW2AGJx.js";
 const COMPONENT_CLASS_NAME = "M4LCheckBox";
 generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  /* elements */
   "root",
   "skeleton",
+  /* states or variants of elements */
   "small",
   "medium",
   "stateDisabled"

package/components/mui_extended/IconButton/{index.caf17392.js → index-BfDbi0cC.js}

@@ -2,8 +2,8 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton, generateUtilityClasses, generateUtilityClass, Tooltip, IconButton as IconButton$1 } from "@mui/material";
-import { I as Icon } from "../../Icon/index.0f315ccd.js";
-import { aE as IconButtonRoot } from "../../../styles/index.ccd8acc4.js";
+import { I as Icon } from "../../Icon/index-CedboS6y.js";
+import { aE as IconButtonRoot } from "../../../styles/index-Cc9p_h7i.js";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { useResponsiveDesktop } from "@m4l/graphics";
@@ -20,8 +20,10 @@ const SkeletonIconButton = (props) => {
 };
 const componentName = "M4LIconButton";
 const iconButtonClasses = generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "skeleton",
+  /* states or variants of elements */
   "sizemSall",
   "sizeMedium",
   "variantPrimary",
@@ -29,6 +31,7 @@ const iconButtonClasses = generateUtilityClasses(componentName, [
   "variantLine",
   "isFocus",
   "isDisabled",
+  /**Toggle */
   "togglePressed",
   "toggleNotPressed"
 ]);
@@ -82,7 +85,10 @@ const IconButton = (props) => {
     }
     return void 0;
   }, [tooltip, dictionaryTooltipId, getLabel, disabled]);
-  const [isfocus] = useState(false);
+  const [
+    isfocus
+    /* setIsFocus */
+  ] = useState(false);
   const ownerState = {
     variant,
     size: isDesktop ? size : "medium",
@@ -91,25 +97,39 @@ const IconButton = (props) => {
     isDisabled: disabled
   };
   const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(IconButtonRoot, { className: clsx(classes.root, className), "data-testid": "IconButtonRoot", children: !isSkeleton ? /* @__PURE__ */ jsx(Fragment, { children: finalTooltip ? /* @__PURE__ */ jsx(Tooltip, { title: finalTooltip || "", children: /* @__PURE__ */ jsx(
-    IconButton$1,
-    {
-      ...other,
-      onClick,
-      disableRipple: true,
-      disabled,
-      children: /* @__PURE__ */ jsx(Icon, { src, size })
-    }
-  ) }) : /* @__PURE__ */ jsx(
-    IconButton$1,
-    {
-      ...other,
-      onClick,
-      disableRipple: true,
-      disabled,
-      children: /* @__PURE__ */ jsx(Icon, { src, size: isDesktop ? size : "medium", rotationAngle })
-    }
-  ) }) : /* @__PURE__ */ jsx(SkeletonIconButton, { classes }) });
+  return (
+    /* IconButtonRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides que
+        provienen del objeto del tema. Se usa para garantizar de que estos estilos no se propaguen a
+        otros componentes de la plataforna web. */
+    /* @__PURE__ */ jsx(IconButtonRoot, { className: clsx(classes.root, className), "data-testid": "IconButtonRoot", children: !isSkeleton ? (
+      // eslint-disable-next-line react/jsx-no-useless-fragment
+      /* @__PURE__ */ jsx(Fragment, { children: finalTooltip ? (
+        /* Este bloque corresponde al caso en el que requiera tooltip en el componente. */
+        /* @__PURE__ */ jsx(Tooltip, { title: finalTooltip || "", children: /* @__PURE__ */ jsx(
+          IconButton$1,
+          {
+            ...other,
+            onClick,
+            disableRipple: true,
+            disabled,
+            children: /* @__PURE__ */ jsx(Icon, { src, size })
+          }
+        ) })
+      ) : (
+        /* Este bloque corresponde al caso en que solo se rquiera cargar el botón con icono. */
+        /* @__PURE__ */ jsx(
+          IconButton$1,
+          {
+            ...other,
+            onClick,
+            disableRipple: true,
+            disabled,
+            children: /* @__PURE__ */ jsx(Icon, { src, size: isDesktop ? size : "medium", rotationAngle })
+          }
+        )
+      ) })
+    ) : /* @__PURE__ */ jsx(SkeletonIconButton, { classes }) })
+  );
 };
 export {
   IconButton as I,

package/components/mui_extended/MenuActions/{index.c24bd476.js → index-CUz70BPj.js}

@@ -2,20 +2,22 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import React__default, { useState, useEffect, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { generateUtilityClasses, generateUtilityClass, useTheme, MenuItem } from "@mui/material";
-import { P as Popover } from "../Popover/index.1fafd106.js";
-import { aF as LabelMemuItem } from "../../../styles/index.ccd8acc4.js";
-import { I as Icon } from "../../Icon/index.0f315ccd.js";
+import { P as Popover } from "../Popover/index-C6_2t4L1.js";
+import { aF as LabelMemuItem } from "../../../styles/index-Cc9p_h7i.js";
+import { I as Icon } from "../../Icon/index-CedboS6y.js";
 import clsx from "clsx";
 import { unstable_composeClasses } from "@mui/base";
-import { B as Badge } from "../Badge/index.188ffbb4.js";
-import { I as IconButton } from "../IconButton/index.caf17392.js";
+import { B as Badge } from "../Badge/index-D6F1o3k2.js";
+import { I as IconButton } from "../IconButton/index-BfDbi0cC.js";
 const ICONS = {
   MENU: "menu.svg"
 };
 const componentName = "M4LMenuActions";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "itemDelete"
+  /* states or variants of elements */
 ]);
 function getMenuActionsUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
@@ -70,8 +72,7 @@ function MenuActions(props) {
     };
   }, [externalOpen]);
   const urlFinalIcon = useMemo(() => {
-    if (urlIcon)
-      return urlIcon;
+    if (urlIcon) return urlIcon;
     return `${host_static_assets}/${environment_assets}/frontend/components/menu_actions/assets/icons/${ICONS.MENU}`;
   }, [urlIcon, host_static_assets, environment_assets]);
   const handleClose = (e) => {
@@ -93,23 +94,26 @@ function MenuActions(props) {
     }
     return ret;
   }, [menuActions, objItem]);
-  const IconButtonElement = /* @__PURE__ */ jsx(Fragment, { children: withBadge ? /* @__PURE__ */ jsx(Badge, { badgeContent, children: /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      src: urlFinalIcon,
-      onClick: handleOpen,
-      tooltip: toolTip,
-      className: iconButtonClassName
-    }
-  ) }) : /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      src: urlFinalIcon,
-      onClick: handleOpen,
-      tooltip: toolTip,
-      className: iconButtonClassName
-    }
-  ) });
+  const IconButtonElement = (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    /* @__PURE__ */ jsx(Fragment, { children: withBadge ? /* @__PURE__ */ jsx(Badge, { badgeContent, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        src: urlFinalIcon,
+        onClick: handleOpen,
+        tooltip: toolTip,
+        className: iconButtonClassName
+      }
+    ) }) : /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        src: urlFinalIcon,
+        onClick: handleOpen,
+        tooltip: toolTip,
+        className: iconButtonClassName
+      }
+    ) })
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     IconButtonElement,
     /* @__PURE__ */ jsxs(

package/components/mui_extended/Pager/{index.f27033fc.js → index-CRgYDkV8.js}

@@ -1,16 +1,17 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { aG as PagerRoot } from "../../../styles/index.ccd8acc4.js";
+import { aG as PagerRoot } from "../../../styles/index-Cc9p_h7i.js";
 import { generateUtilityClasses, generateUtilityClass, useTheme, Select, InputBase, MenuItem } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { I as IconButton } from "../IconButton/index.caf17392.js";
+import { I as IconButton } from "../IconButton/index-BfDbi0cC.js";
 import { useEnvironment } from "@m4l/core";
 import { useResponsiveContainerStore } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
-import { T as Typography } from "../Typography/index.61dd3fc6.js";
-import { I as Icon } from "../../Icon/index.0f315ccd.js";
+import { T as Typography } from "../Typography/index-DKPqV11f.js";
+import { I as Icon } from "../../Icon/index-CedboS6y.js";
 const componentName = "M4LPager";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "labelRowsPerPageContainer",
   "labelRowsPager",
@@ -28,6 +29,7 @@ generateUtilityClasses(componentName, [
   "actionIconPrevious",
   "actionIconNextPage",
   "actionIconLastPage"
+  /* states or variants of elements */
 ]);
 function getPagerUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);
@@ -138,9 +140,10 @@ const CustomTablePagination = (props) => {
   function defaultLabelDisplayedRows({
     from,
     to,
+    // eslint-disable-next-line @typescript-eslint/no-shadow
     count: count2
   }) {
-    return `${from}\u2013${to} of ${count2 !== -1 ? count2 : `more than ${to}`}`;
+    return `${from}–${to} of ${count2 !== -1 ? count2 : `more than ${to}`}`;
   }
   const getLabelDisplayedRowsTo = () => {
     if (count === -1) {

package/components/mui_extended/Popover/{index.1fafd106.js → index-C6_2t4L1.js}

@@ -1,12 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { aH as PopoverRoot } from "../../../styles/index.ccd8acc4.js";
+import { aH as PopoverRoot } from "../../../styles/index-Cc9p_h7i.js";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { styled } from "@mui/material/styles";
 import clsx from "clsx";
 generateUtilityClasses("M4LPopover", [
+  /* elements */
   "root",
   "arrowStyle",
+  /* states or variants of elements */
   "noArrow",
   "topLeft",
   "topCenter",
@@ -87,15 +89,19 @@ const ArrowStyle = styled("span")(({ arrowType, theme }) => {
       transform: "rotate(-135deg)",
       background: theme.vars.palette.background.default
     },
+    // Top
     ...arrowType === "top-left" && { ...topStyle, left: 20 },
     ...arrowType === "top-center" && { ...topStyle, left: 0, right: 0, margin: "auto" },
     ...arrowType === "top-right" && { ...topStyle, right: 20 },
+    // Bottom
     ...arrowType === "bottom-left" && { ...bottomStyle, left: 20 },
     ...arrowType === "bottom-center" && { ...bottomStyle, left: 0, right: 0, margin: "auto" },
     ...arrowType === "bottom-right" && { ...bottomStyle, right: 20 },
+    // Left
     ...arrowType === "left-top" && { ...leftStyle, top: 20 },
     ...arrowType === "left-center" && { ...leftStyle, top: 0, bottom: 0, margin: "auto" },
     ...arrowType === "left-bottom" && { ...leftStyle, bottom: 20 },
+    // Right
     ...arrowType === "right-top" && { ...rightStyle, top: 20 },
     ...arrowType === "right-center" && { ...rightStyle, top: 0, bottom: 0, margin: "auto" },
     ...arrowType === "right-bottom" && { ...rightStyle, bottom: 20 }
@@ -107,33 +113,39 @@ const Popover = (props) => {
     arrowType
   };
   const classes = useUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsxs(
-    PopoverRoot,
-    {
-      className: clsx(classes.root, className),
-      "data-testid": "PopoverRoot",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      transitionDuration: 0,
-      PaperProps: {
-        sx: {
-          p: 1,
-          overflow: "inherit"
-        }
-      },
-      ...other,
-      children: [
-        arrowType !== "no-arrow" && /* @__PURE__ */ jsx(
-          ArrowStyle,
-          {
-            className: classes.arrowStyle,
-            "data-testid": "ArrowStyle",
-            arrowType
+  return (
+    /* PopoverRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los
+        overrides que provienen del objeto del tema. Se usa para garantizar de que estos estilos no se
+        propaguen a otros componentes de la plataforna web. */
+    /* @__PURE__ */ jsxs(
+      PopoverRoot,
+      {
+        className: clsx(classes.root, className),
+        "data-testid": "PopoverRoot",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        transitionDuration: 0,
+        PaperProps: {
+          sx: {
+            p: 1,
+            overflow: "inherit"
           }
-        ),
-        children
-      ]
-    }
+        },
+        ...other,
+        children: [
+          arrowType !== "no-arrow" && /* ArrowStyle: Subcomponente que posiciona una flecha de dialogo en el área del Popover. */
+          /* @__PURE__ */ jsx(
+            ArrowStyle,
+            {
+              className: classes.arrowStyle,
+              "data-testid": "ArrowStyle",
+              arrowType
+            }
+          ),
+          children
+        ]
+      }
+    )
   );
 };
 export {

package/components/mui_extended/Stack/{index.b8c3b40b.js → index-CV2W-_eL.js}

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { aI as MUISTack } from "../../../styles/index.ccd8acc4.js";
+import { aI as MUISTack } from "../../../styles/index-Cc9p_h7i.js";
 import clsx from "clsx";
 const componentName = "M4LStack";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root"
+  /* states or variants of elements */
 ]);
 function getStackUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);

package/components/mui_extended/Tab/{index.c2dca6dd.js → index-PyZxxeDt.js}

@@ -2,14 +2,16 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { generateUtilityClasses, generateUtilityClass, Tab as Tab$1, Skeleton } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { aJ as MUITabs, aK as TabContentRoot, aL as TabRoot, aM as SKTTabWrapper } from "../../../styles/index.ccd8acc4.js";
+import { aJ as MUITabs, aK as TabContentRoot, aL as TabRoot, aM as SKTTabWrapper } from "../../../styles/index-Cc9p_h7i.js";
 import { useModuleSkeleton } from "@m4l/core";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../test/getNameDataTestId.0faeade8.js";
+import { T as TEST_PROP_ID } from "../../../test/constants_no_mock-CF-669v-.js";
+import { g as getNameDataTestId } from "../../../test/getNameDataTestId-BaBTWhBr.js";
 import { createContext, useState } from "react";
 const componentName$2 = "M4LTabs";
 generateUtilityClasses(componentName$2, [
+  /* elements */
   "root"
+  /* states or variants of elements */
 ]);
 function getTabsUtilityClass(slot) {
   return generateUtilityClass(componentName$2, slot);
@@ -30,7 +32,9 @@ const Tabs = (props) => {
 };
 const componentName$1 = "M4LTabContent";
 generateUtilityClasses(componentName$1, [
+  /* elements */
   "root"
+  /* states or variants of elements */
 ]);
 function getTabContentUtilityClass(slot) {
   return generateUtilityClass(componentName$1, slot);
@@ -51,8 +55,10 @@ const TabContent = (props) => {
 };
 const componentName = "M4LTab";
 generateUtilityClasses(componentName, [
+  /* elements */
   "root",
   "skeleton"
+  /* states or variants of elements */
 ]);
 function getTabUtilityClass(slot) {
   return generateUtilityClass(componentName, slot);