@m4l/components 6.0.1 → 7.0.0

package/{vendor-B-B0U9GM.js → vendor-BLNnjAkx.js}

@@ -3,16 +3,16 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { m, LazyMotion, domMax } from "framer-motion";
-import React__default, { createContext, useRef, useContext, forwardRef, useMemo, useState, useEffect, useCallback, createElement, useLayoutEffect, useImperativeHandle, createRef, Suspense } from "react";
-import { Tooltip as Tooltip$1, Popper, IconButton as IconButton$1, Box, styled as styled$1, useTheme, alpha as alpha$1, Skeleton, generateUtilityClasses, generateUtilityClass, Popover as Popover$1, Typography as Typography$1, Dialog, Paper, CircularProgress as CircularProgress$1, Autocomplete, TextField, Chip, Accordion as Accordion$1, AccordionSummary, AccordionDetails, Badge as Badge$1, MenuItem, Avatar as Avatar$1, Link, Breadcrumbs as Breadcrumbs$1, Checkbox, LinearProgress as LinearProgress$1, Stack as Stack$1, Tabs as Tabs$1, Select, InputBase, Tab as Tab$1, FormGroup, FormControlLabel, InputAdornment, RadioGroup, Radio, SvgIcon, useForkRef, FormControl, ListItemText, ListItemButton, Collapse, Drawer as Drawer$1, ButtonBase, Grid } from "@mui/material";
+import React__default, { createContext, useRef, useContext, forwardRef, useMemo, useEffect, useState, useCallback, createElement, useLayoutEffect, useImperativeHandle, createRef, Suspense } from "react";
+import { Tooltip as Tooltip$1, Popper, IconButton as IconButton$1, Box, styled as styled$1, useTheme, alpha as alpha$1, Badge as Badge$1, generateUtilityClass, generateUtilityClasses, Popover as Popover$1, Skeleton, Typography as Typography$1, Dialog, Paper, CircularProgress as CircularProgress$1, Autocomplete, TextField, Chip, Accordion as Accordion$1, AccordionSummary, AccordionDetails, MenuItem, Avatar as Avatar$1, Link, Breadcrumbs as Breadcrumbs$1, Checkbox, LinearProgress as LinearProgress$1, Stack as Stack$1, Tabs as Tabs$1, Select, InputBase, Tab as Tab$1, FormGroup, FormControlLabel, InputAdornment, RadioGroup, Radio, SvgIcon, useForkRef, FormControl, ListItemText, ListItemButton, Collapse, Drawer as Drawer$1, ButtonBase, Grid } from "@mui/material";
 import { styled, alpha, useTheme as useTheme$1 } from "@mui/material/styles";
 import SimpleBarReact from "simplebar-react";
-import { getPropertyByString, useModuleDictionary, useModuleSkeleton, useHostTools, useNetwork, EmitEvents, useEnvironment, axiosOperation, useFlagsPresent, CommonFlags, voidFunction, useBase, evaluateWithContext, BaseProvider, useFlagsStore, useModulePrivileges, usePaginate, useAuth, DomainCountryProvider, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider, ModulePrivilegesProvider, EnvironmentProvider, HostToolsProvider, NetworkProvider, AuthProvider } from "@m4l/core";
+import { getPropertyByString, useModuleDictionary, useHostTools, useNetwork, useModuleSkeleton, EmitEvents, useEnvironment, axiosOperation, useFlagsPresent, CommonFlags, voidFunction, useBase, evaluateWithContext, BaseProvider, useFlagsStore, useModulePrivileges, usePaginate, useAuth, DomainCountryProvider, FlagsProvider, ModuleDictionaryProvider, ModuleSkeletonProvider, ModulePrivilegesProvider, EnvironmentProvider, HostToolsProvider, NetworkProvider, AuthProvider } from "@m4l/core";
 import { Link as Link$1, useLocation, NavLink as NavLink$1, unstable_HistoryRouter } from "react-router-dom";
 import clsx from "clsx";
 import { useForm, FormProvider, useFormContext, Controller, useWatch, useController, useFormState } from "react-hook-form";
 import { unstable_composeClasses } from "@mui/base";
-import { useResponsiveDesktop, useFirstRender, useResizeObserver, useIsMobile, useResponsiveContainerStore, useFormatter, useHostTheme, useLocales, HostThemeProvider, FormatterProvider, LocalesProvider, getLocaleFromNetwork, ResponsiveContainerProvider } from "@m4l/graphics";
+import { useFirstRender, useResizeObserver, useResponsiveDesktop, useIsMobile, useResponsiveContainerStore, useFormatter, useHostTheme, useLocales, HostThemeProvider, FormatterProvider, LocalesProvider, getLocaleFromNetwork, ResponsiveContainerProvider } from "@m4l/graphics";
 import isString from "lodash/isString";
 import { useDropzone } from "react-dropzone";
 import * as Yup from "yup";
@@ -92,43 +92,22 @@ const iconStyles = {
       transform: `rotate(${ownerState.rotationAngle}deg)`
     },
     backgroundColor: !ownerState.disabled ? getPropertyByString(theme.vars.palette, ownerState.color || "text.primary") : theme.vars.palette.text.disabled,
-    ...ownerState.size === "large" && {
-      ...theme.generalSettings.isMobile ? {
-        width: 28,
-        height: 28,
-        minWidth: 28,
-        minHeight: 28
-      } : {
-        width: 20,
-        height: 20,
-        minWidth: 20,
-        minHeight: 20
-      }
-    },
     ...ownerState.size === "medium" && {
       ...theme.generalSettings.isMobile ? {
-        width: 24,
-        height: 24,
-        minWidth: 24,
-        minHeight: 24
+        minWidth: theme.vars.size.mobile.base.medium,
+        minHeight: theme.vars.size.mobile.action.medium
       } : {
-        width: 16,
-        height: 16,
-        minWidth: 16,
-        minHeight: 16
+        minWidth: theme.vars.size.desktop.base.medium,
+        minHeight: theme.vars.size.desktop.base.medium
       }
     },
     ...ownerState.size === "small" && {
       ...theme.generalSettings.isMobile ? {
-        width: 20,
-        height: 20,
-        minWidth: 20,
-        minHeight: 20
+        minWidth: theme.vars.size.mobile.base.small,
+        minHeight: theme.vars.size.mobile.action.small
       } : {
-        width: 14,
-        height: 14,
-        minWidth: 14,
-        minHeight: 14
+        minWidth: theme.vars.size.desktop.base.small,
+        minHeight: theme.vars.size.desktop.base.small
       }
     },
     variants: []
@@ -280,7 +259,7 @@ const TooltipStyled = styled(Tooltip, {
   name: ICON_KEY_COMPONENT,
   slot: IconSlots.tooltip
 })(iconStyles?.tooltip);
-const IconStyled = styled("div", {
+const IconStyled$1 = styled("div", {
   name: ICON_KEY_COMPONENT,
   slot: IconSlots.icon
 })(iconStyles?.icon);
@@ -297,7 +276,7 @@ function getPropDataTestId(prefix, keyName) {
 const Icon = (props) => {
   const {
     src,
-    size,
+    size = "small",
     rotationAngle,
     tooltipContent,
     securityArea,
@@ -330,7 +309,7 @@ const Icon = (props) => {
             [TEST_PROP_ID]: getNameDataTestId$d(ICON_PREFIX$2, IconSlots.root, instaceDataTestId)
           } : {},
           children: /* @__PURE__ */ jsx(
-            IconStyled,
+            IconStyled$1,
             {
               ownerState: {
                 src,
@@ -358,7 +337,7 @@ const Icon = (props) => {
       ownerState: { securityArea, size: currentSize },
       ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$d(ICON_PREFIX$2, IconSlots.root, instaceDataTestId) } : {},
       children: /* @__PURE__ */ jsx(
-        IconStyled,
+        IconStyled$1,
         {
           ownerState: {
             src,
@@ -811,76 +790,366 @@ const AnimatedScroll = (props) => {
     }
   );
 };
-const SkeletonIconButton = (props) => {
-  const { classes: classes2 } = props;
-  return /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      variant: "rectangular",
-      className: classes2.skeleton,
-      "data-testid": "SkeletonIconButton"
+var IconButtonSlots = /* @__PURE__ */ ((IconButtonSlots2) => {
+  IconButtonSlots2["styledMUIIconButton"] = "styledMUIIconButton";
+  IconButtonSlots2["icon"] = "icon";
+  IconButtonSlots2["badgeIconButton"] = "badgeIconButton";
+  return IconButtonSlots2;
+})(IconButtonSlots || {});
+const ICON_BUTTON_KEY_COMPONENT = "M4LIconButton";
+const iconButtonStyles = {
+  styledMUIIconButton: ({ ownerState, theme }) => ({
+    cursor: ownerState.disabled ? "not-allowed" : "pointer",
+    color: theme.vars.palette.text.primary,
+    borderRadius: theme.size.borderRadius.r1,
+    pointerEvents: ownerState.disabled ? "none" : "auto",
+    display: "flex",
+    justifyContent: "center",
+    // Override de estilos de Material UI
+    padding: 0,
+    // condiciones de tamaño
+    // condiciones de tamaño Small
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.action.small,
+        height: theme.vars.size.mobile.action.small
+      } : {
+        width: theme.vars.size.desktop.action.small,
+        height: theme.vars.size.desktop.action.small
+      },
+      "& .icon": {
+        ...theme.generalSettings.isMobile ? {
+          width: theme.vars.size.mobile.base.small,
+          height: theme.vars.size.mobile.base.small
+        } : {
+          width: theme.vars.size.desktop.base.small,
+          height: theme.vars.size.desktop.base.small
+        }
+      }
+    },
+    // condiciones de tamaño Medium
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.action.medium,
+        height: theme.vars.size.mobile.action.medium
+      } : {
+        width: theme.vars.size.desktop.action.medium,
+        height: theme.vars.size.desktop.action.medium
+      },
+      "& .icon": {
+        ...theme.generalSettings.isMobile ? {
+          width: theme.vars.size.mobile.base.medium,
+          height: theme.vars.size.mobile.base.medium
+        } : {
+          width: theme.vars.size.desktop.base.medium,
+          height: theme.vars.size.desktop.base.medium
+        }
+      }
+    },
+    // Variantes contained
+    ...ownerState.variant === "contained" && ownerState.disabled !== true && {
+      backgroundColor: ownerState.paletteColor?.main,
+      display: "flex",
+      color: "white",
+      '&  [class*="M4LIcon-icon"]': {
+        display: "flex",
+        justifyContent: "center",
+        backgroundColor: ownerState.paletteColor?.contrastText
+      },
+      //Estado Hover
+      "&:hover": {
+        background: ownerState.paletteColor?.hover,
+        '&  [class*="M4LIcon-icon"]': {
+          display: "flex",
+          justifyContent: "center",
+          ...ownerState.componentPaletteColor !== "default" && {
+            backgroundColor: ownerState.paletteColor?.contrastText
+            //backgroundColor: 'white',
+          }
+        }
+      },
+      //Estado Active
+      "&:active": {
+        background: ownerState.paletteColor?.focusActive,
+        '&  [class*="M4LIcon-icon"]': {
+          display: "flex",
+          justifyContent: "center",
+          ...ownerState.componentPaletteColor !== "default" && {
+            backgroundColor: ownerState.paletteColor?.contrastText
+          }
+        }
+      },
+      //FocusVisible
+      "&:focus-visible": {
+        background: ownerState.paletteColor?.main,
+        outline: `1px solid ${ownerState.paletteColor?.focusVisible}`,
+        outlineOffset: 1,
+        '&  [class*="M4LIcon-icon"]': {
+          display: "flex",
+          justifyContent: "center",
+          ...ownerState.componentPaletteColor !== "default" && {
+            backgroundColor: ownerState.paletteColor?.contrastText
+          }
+        }
+      }
+    },
+    // Variantes contained en disabled
+    ...ownerState.variant === "contained" && ownerState.disabled === true && {
+      background: `${theme.vars.palette.action.disabledBackground} !important`,
+      color: theme.vars.palette.action.disabled
+    },
+    // Variante outline
+    ...ownerState.variant === "outline" && ownerState.disabled !== true && {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...ownerState.componentPaletteColor !== "default" && {
+        border: `1px solid ${ownerState.paletteColor?.main}`
+      },
+      ...ownerState.componentPaletteColor === "default" && {
+        border: `1px solid ${ownerState.paletteColor?.main}`
+      },
+      "&:hover": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        border: `1px solid ${ownerState.paletteColor?.hover}`,
+        background: ownerState.componentPaletteColor !== "default" ? ownerState.paletteColor?.hoverOpacity : ownerState.paletteColor?.hover,
+        '&  [class*="M4LIcon-icon"]': {
+          display: "flex",
+          justifyContent: "center",
+          '&  [class*="M4LIcon-icon"]': {
+            display: "flex",
+            justifyContent: "center",
+            ...ownerState.componentPaletteColor !== "default" && {
+              backgroundColor: ownerState.paletteColor?.contrastText
+            }
+          }
+        }
+      },
+      "&:active": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background: ownerState.componentPaletteColor !== "default" ? ownerState.paletteColor?.hoverOpacity : ownerState.paletteColor?.focusActive,
+        border: `1px solid ${ownerState.paletteColor?.focusActive}`,
+        '&  [class*="M4LIcon-icon"]': {
+          display: "flex",
+          justifyContent: "center",
+          ...ownerState.componentPaletteColor !== "default" && {
+            backgroundColor: ownerState.paletteColor?.focusActive
+          }
+        }
+      },
+      "&:focus-visible": {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        outlineOffset: 1,
+        outline: `1px solid ${ownerState.paletteColor?.focusVisible}`,
+        border: `1px solid ${ownerState.paletteColor?.main}`,
+        "& .MuiButtonBase-root": {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        '&  [class*="M4LIcon-icon"]': {
+          display: "flex",
+          justifyContent: "center",
+          '&  [class*="M4LIcon-icon"]': {
+            display: "flex",
+            justifyContent: "center",
+            ...ownerState.componentPaletteColor !== "default" && {
+              backgroundColor: ownerState.paletteColor?.contrastText
+            }
+          }
+        }
+      }
+    },
+    // Variantes outline en disabled
+    ...ownerState.variant === "outline" && ownerState.disabled === true && {
+      outline: `1px solid ${theme.vars.palette.action.disabled}`,
+      color: ownerState.paletteColor?.main
+    },
+    // Variante text
+    ...ownerState.variant === "text" && ownerState.disabled !== true && {
+      "&:hover": {
+        ...ownerState.componentPaletteColor !== "default" && {
+          backgroundColor: ownerState.paletteColor?.hoverOpacity
+        },
+        ...ownerState.componentPaletteColor === "default" && {
+          backgroundColor: ownerState.paletteColor?.hover
+        },
+        '&  [class*="M4LIcon-icon"]': {
+          display: "flex",
+          justifyContent: "center",
+          ...ownerState.componentPaletteColor !== "default" && {
+            alignItems: "center"
+          }
+        }
+      },
+      //FocusActive
+      "&:active": {
+        ...ownerState.componentPaletteColor !== "default" && {
+          backgroundColor: ownerState.paletteColor?.opacity
+        },
+        ...ownerState.componentPaletteColor === "default" && {
+          backgroundColor: ownerState.paletteColor?.focusActive
+        },
+        '&  [class*="M4LIcon-icon"]': {
+          display: "flex",
+          justifyContent: "center",
+          ...ownerState.componentPaletteColor !== "default" && {
+            backgroundColor: ownerState.paletteColor?.focusActive
+          },
+          ...ownerState.componentPaletteColor === "default" && {
+            backgroundColor: ownerState.paletteColor?.contrastText
+          }
+        }
+      },
+      //FocusVisible
+      "&:focus-visible": {
+        outline: `1px solid ${ownerState.paletteColor?.focusVisible}`,
+        // Cambiado a outline
+        outlineOffset: 1,
+        '&  [class*="M4LIcon-icon"]': {
+          display: "flex",
+          justifyContent: "center",
+          ...ownerState.componentPaletteColor !== "default" && {
+            backgroundColor: ownerState.paletteColor?.main
+          }
+        }
+      }
+    },
+    // Variantes text en disabled
+    ...ownerState.variant === "text" && ownerState.disabled === true && {
+      color: theme.vars.palette.action.disabled
     }
-  );
-};
-const IconButtonRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LIconButton?.styleOverrides
-}));
-const componentName$F = "M4LIconButton";
-const iconButtonClasses = generateUtilityClasses(componentName$F, [
-  /* elements */
-  "root",
-  "skeleton",
-  /* states or variants of elements */
-  "sizemSall",
-  "sizeMedium",
-  "variantPrimary",
-  "variantSecondary",
-  "variantLine",
-  "isFocus",
-  "isDisabled",
-  /**Toggle */
-  "togglePressed",
-  "toggleNotPressed"
-]);
-function getIconButtonUtilityClass(slot) {
-  return generateUtilityClass(componentName$F, slot);
-}
-const useUtilityClasses$f = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      ownerState.variant === "primary" && ownerState.isSkeleton !== true && "variantPrimary",
-      ownerState.variant === "secondary" && ownerState.isSkeleton !== true && "variantSecondary",
-      ownerState.variant === "line" && ownerState.isSkeleton !== true && "variantLine",
-      ownerState.isFocus && !ownerState.isDisabled && "isFocus",
-      ownerState.isDisabled && "isDisabled"
-    ],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getIconButtonUtilityClass, {});
-  return {
-    ...composedClasses
-  };
+  }),
+  icon: ({ ownerState, theme }) => ({
+    // condiciones de tamaño Small
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.base.small,
+        height: theme.vars.size.mobile.base.small
+      } : {
+        width: theme.vars.size.desktop.base.small,
+        height: theme.vars.size.desktop.base.small
+      }
+    },
+    // condiciones de tamaño Medium
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.base.medium,
+        height: theme.vars.size.mobile.base.medium
+      } : {
+        width: theme.vars.size.desktop.base.medium,
+        height: theme.vars.size.desktop.base.medium
+      }
+    }
+  })
+  //Comentado por el momento, falta de documentación en Figma de Badge
+  // badgeIconButton: ({ ownerState, theme }) => ({
+  //   '&  [class*="MuiBadge-badge"]': {
+  //     display: 'flex',
+  //     justifyContent: 'center',
+  //     alignItems: 'center',
+  //     fontSize: '11px',
+  //     backgroundColor: ownerState.paletteColor?.focusActive,
+  //     color: ownerState.paletteColor?.contrastText,
+  //     // condiciones de tamaño Small
+  //     ...(ownerState.size === 'small' && {
+  //       ...(theme.generalSettings.isMobile
+  //         ? {
+  //             width: theme.size.desktop.base.small,
+  //             height: theme.size.desktop.base.small,
+  //           }
+  //         : {
+  //             width: theme.size.desktop.base.small,
+  //             height: theme.size.desktop.base.small,
+  //           }),
+  //     }),
+  //     // condiciones de tamaño Medium
+  //     ...(ownerState.size === 'medium' && {
+  //       ...(theme.generalSettings.isMobile
+  //         ? {
+  //             width: theme.size.mobile.base.medium,
+  //             height: theme.size.mobile.base.medium,
+  //           }
+  //         : {
+  //             width: theme.size.desktop.base.medium,
+  //             height: theme.size.desktop.base.medium,
+  //           }),
+  //     }),
+  //   },
+  // }),
+};
+const StyledMUIIconButton = styled(IconButton$1, {
+  name: ICON_BUTTON_KEY_COMPONENT,
+  slot: IconButtonSlots.styledMUIIconButton
+})(iconButtonStyles?.styledMUIIconButton);
+const IconStyled = styled(Icon, {
+  name: ICON_BUTTON_KEY_COMPONENT,
+  slot: IconButtonSlots.icon
+})(iconButtonStyles?.icon);
+const BadgeStyled$1 = styled(Badge$1, {
+  name: ICON_BUTTON_KEY_COMPONENT,
+  slot: IconButtonSlots.badgeIconButton
+})(iconButtonStyles?.badgeIconButton);
+const evalIconColor = (color, variant) => {
+  console.log("color", color);
+  if (variant === "contained" && color !== "default") {
+    return "primary.contrastText";
+  }
+  if (color === "default") {
+    return "text.primary";
+  }
+  if (color === "primary") {
+    return "primary.main";
+  }
+  if (color === "warning") {
+    return "warning.main";
+  }
+  if (color === "error") {
+    return "error.main";
+  }
+  if (color === "success") {
+    return "success.main";
+  }
+  if (color === "info") {
+    return "info.main";
+  }
+  return "text.primary";
 };
 const IconButton = (props) => {
   const {
     src,
     tooltip,
-    size = "small",
-    dictionaryTooltipId,
-    rotationAngle,
-    variant = "line",
+    size = "medium",
+    variant = "text",
     disabled,
-    className,
     onClick,
-    color,
+    badgeContent,
+    withBadge = false,
+    dictionaryTooltipId,
+    componentPaletteColor = "default",
     ...other
   } = props;
+  const { currentSize } = useComponentSize(size);
+  const theme = useTheme();
+  const paletteColor = getPropertyByString(theme.palette, disabled ? "default" : componentPaletteColor, theme.palette.default);
+  const ownerState = {
+    variant,
+    size,
+    disabled,
+    paletteColor,
+    componentPaletteColor
+  };
+  const iconColor = useMemo(
+    () => evalIconColor(componentPaletteColor, variant),
+    [componentPaletteColor, variant]
+  );
   const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
   const finalTooltip = useMemo(() => {
     if (disabled) {
       return void 0;
@@ -893,58 +1162,46 @@ const IconButton = (props) => {
     }
     return void 0;
   }, [tooltip, dictionaryTooltipId, getLabel, disabled]);
-  const [
-    isfocus
-    /* setIsFocus */
-  ] = useState(false);
-  const ownerState = {
-    variant,
-    size: isDesktop ? size : "medium",
-    isSkeleton,
-    isFocus: disabled ? false : isfocus,
-    isDisabled: disabled
-  };
-  const classes2 = useUtilityClasses$f(ownerState);
-  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(classes2.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$1, { title: finalTooltip || "", children: /* @__PURE__ */ jsx(
-          IconButton$1,
-          {
-            ...other,
-            onClick,
-            disableRipple: true,
-            disabled,
-            children: /* @__PURE__ */ jsx(Icon, { src, size, color })
-          }
-        ) })
-      ) : (
-        /* 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,
-                color
-              }
-            )
-          }
-        )
-      ) })
-    ) : /* @__PURE__ */ jsx(SkeletonIconButton, { classes: classes2 }) })
+  return /* @__PURE__ */ jsx(
+    StyledMUIIconButton,
+    {
+      ownerState: { ...ownerState },
+      onClick: !disabled ? onClick : void 0,
+      disableRipple: true,
+      disabled,
+      "data-testid": "IconButtonRoot",
+      tabIndex: 0,
+      ...other,
+      children: withBadge ? /* @__PURE__ */ jsx(
+        BadgeStyled$1,
+        {
+          ownerState: { ...ownerState },
+          badgeContent,
+          componentPaletteColor,
+          children: /* @__PURE__ */ jsx(
+            IconStyled,
+            {
+              ownerState: { ...ownerState },
+              src,
+              size: currentSize,
+              color: iconColor,
+              disabled,
+              tooltipContent: finalTooltip
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx(
+        IconStyled,
+        {
+          ownerState: { ...ownerState },
+          src,
+          size: currentSize,
+          color: iconColor,
+          disabled,
+          tooltipContent: finalTooltip
+        }
+      )
+    }
   );
 };
 function isValidDate(d) {
@@ -4588,8 +4845,8 @@ function useModal() {
   if (!context) throw new Error("useModal context must be use inside ModalContext");
   return context;
 }
-const componentName$E = "M4LModal";
-generateUtilityClasses(componentName$E, [
+const componentName$D = "M4LModal";
+generateUtilityClasses(componentName$D, [
   /* elements */
   "root",
   "windowBaseRoot",
@@ -4613,7 +4870,7 @@ generateUtilityClasses(componentName$E, [
   "variantPrimary"
 ]);
 function getModalUtilityClass(slot) {
-  return generateUtilityClass(componentName$E, slot);
+  return generateUtilityClass(componentName$D, slot);
 }
 const modalUtilityClasses = (ownerState) => {
   const slots = {
@@ -4728,9 +4985,9 @@ function ModalProvider({ children }) {
 const FormProviderRoot = styled$1("form")(({ theme }) => ({
   ...theme.components?.M4LRHFormProvider?.styleOverrides
 }));
-const componentName$D = "M4LRHFormProvider";
+const componentName$C = "M4LRHFormProvider";
 generateUtilityClasses(
-  componentName$D,
+  componentName$C,
   [
     /* elements */
     "root"
@@ -4738,7 +4995,7 @@ generateUtilityClasses(
   ]
 );
 function getRHFormProviderUtilityClass(slot) {
-  return generateUtilityClass(componentName$D, slot);
+  return generateUtilityClass(componentName$C, slot);
 }
 const RHFormProviderUtilityClasses = () => {
   const slots = {
@@ -4823,9 +5080,9 @@ const useFormFocus = () => {
   };
   return { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur };
 };
-const componentName$C = "M4LRHFAutocomplete";
+const componentName$B = "M4LRHFAutocomplete";
 generateUtilityClasses(
-  componentName$C,
+  componentName$B,
   [
     /* elements */
     "root",
@@ -4853,7 +5110,7 @@ generateUtilityClasses(
   ]
 );
 function getRHFAutocompleteClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName$C, slot);
+  return generateUtilityClass(componentName$B, slot);
 }
 const useUtilityClasses$c = (ownerState) => {
   const slots = {
@@ -4976,15 +5233,15 @@ const IMAGE_PREFIX = "Image";
 const getNameDataTestId$b = (KEY) => {
   return `${IMAGE_PREFIX}-${KEY}`;
 };
-const componentName$B = "M4LImage";
-generateUtilityClasses(componentName$B, [
+const componentName$A = "M4LImage";
+generateUtilityClasses(componentName$A, [
   /* elements */
   "root",
   "img"
   /* states or variants of elements */
 ]);
 function getImagenClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName$B, slot);
+  return generateUtilityClass(componentName$A, slot);
 }
 const useUtilityClasses$b = () => {
   const slots = {
@@ -5460,8 +5717,8 @@ function ComponentTypeImage$1(props) {
     }
   );
 }
-const componentName$A = "M4LAccordion";
-generateUtilityClasses(componentName$A, [
+const componentName$z = "M4LAccordion";
+generateUtilityClasses(componentName$z, [
   /* elements */
   "root",
   "endIcon",
@@ -5471,7 +5728,7 @@ generateUtilityClasses(componentName$A, [
   /* states or variants of elements */
 ]);
 function getAccordionUtilityClass(slot) {
-  return generateUtilityClass(componentName$A, slot);
+  return generateUtilityClass(componentName$z, slot);
 }
 const accordionUtilityClasses = () => {
   const slots = {
@@ -5644,27 +5901,25 @@ var MenuActionsSlots = /* @__PURE__ */ ((MenuActionsSlots2) => {
   MenuActionsSlots2["labelEmpty"] = "labelEmpty";
   return MenuActionsSlots2;
 })(MenuActionsSlots || {});
-const componentName$z = "M4LBadge";
-const badgeClasses = generateUtilityClasses(componentName$z, [
-  /* elements */
-  "root"
-  /* states or variants of elements */
-]);
-const BadgeRoot = styled("div")(({ theme }) => ({
-  display: "flex",
-  ...theme.components?.M4LBadge?.styleOverrides
-}));
-const BADGE_PREFIX = "M4LBadge";
-const getNameBadgeDataTestId = (ELEMENTKEY, ID) => {
-  return `${BADGE_PREFIX}-${ELEMENTKEY}-${ID}`;
-};
+var BadgeSlots = /* @__PURE__ */ ((BadgeSlots2) => {
+  BadgeSlots2["rootBadge"] = "rootBadge";
+  return BadgeSlots2;
+})(BadgeSlots || {});
+const BADGE_LABEL_KEY_COMPONENT = "M4LBadge";
+const badgeStyles = {
+  rootBadge: ({}) => ({})
+};
+const BadgeRootStyled = styled(Badge$1, {
+  name: BADGE_LABEL_KEY_COMPONENT,
+  slot: BadgeSlots.rootBadge
+})(badgeStyles?.rootBadge);
 const Badge = (props) => {
-  const { children, dataTestId = "", ...others } = props;
+  const { children, size, dataTestId = "", ...others } = props;
+  const { currentSize } = useComponentSize(size);
   return /* @__PURE__ */ jsx(
-    BadgeRoot,
+    BadgeRootStyled,
     {
-      className: badgeClasses.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameBadgeDataTestId("root", dataTestId) } : {},
+      ownerState: { size: currentSize },
       children: /* @__PURE__ */ jsx(Badge$1, { ...others, children })
     }
   );
@@ -5753,10 +6008,9 @@ function MenuActions(props) {
     setOpen(null);
     externalClose && externalClose(null);
   };
-  const handleClick = (e, menuAction) => {
+  const handleClick = (e, _menuAction) => {
     e.stopPropagation();
     setOpen(null);
-    menuAction.onClick();
   };
   const finalActions = useMemo(() => {
     let ret;
@@ -5819,7 +6073,7 @@ function MenuActions(props) {
               {
                 dense: true,
                 onClick: (e) => {
-                  handleClick(e, menuAction);
+                  handleClick(e);
                 },
                 sx: { color: menuAction.color ?? "text.main" },
                 disabled: menuAction.disabled,
@@ -6719,10 +6973,7 @@ const ToggleAbleIconButton = ({
     IconButton,
     {
       onClick: onToggle,
-      ...props,
-      className: clsx(
-        onToggle ? iconButtonClasses.togglePressed : iconButtonClasses.toggleNotPressed
-      )
+      ...props
     }
   );
 };
@@ -8147,7 +8398,6 @@ const RHFTextFieldPassword = (props) => {
                   IconButton,
                   {
                     onClick: () => setShowPassword(!showPassword),
-                    variant: "line",
                     src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
                   }
                 ) })
@@ -21883,7 +22133,6 @@ function GeneralData() {
                 IconButton,
                 {
                   src: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_DRAW}`,
-                  variant: "primary",
                   onClick: handleDraw,
                   disabled: inEdition || !geometrTypeIdCached,
                   tooltip: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_DRAW)
@@ -21893,7 +22142,6 @@ function GeneralData() {
                 IconButton,
                 {
                   src: `${host_static_assets}/${environment_assets}/frontend/components/map_gpstools/assets/icons/${MAP_GPSTOOLS_ICONS.GEOFENCE_FINISH}`,
-                  variant: "primary",
                   onClick: handleFinish,
                   disabled: !inEdition,
                   tooltip: getLabel(MAP_GPSTOOLS_DICCTIONARY.LABEL_FINISH)
@@ -24592,7 +24840,7 @@ const ContentComponent = () => {
         /* @__PURE__ */ jsx(
           IconButton,
           {
-            variant: "line",
+            variant: "text",
             rotationAngle: !collapsed ? 180 : 0,
             onClick: () => handleButtonClick(),
             onMouseEnter: () => handlerOnMouseEnterIconButton(),
@@ -25254,7 +25502,6 @@ const HamburgerMenu = (props) => {
           {
             src: `${host_static_assets}/${environment_assets}/frontend/web_comercial/menu.svg`,
             className: classes2.ImageLogo,
-            variant: "secondary",
             onClick: () => handlerOnVisible()
           }
         ),