@m4l/components 6.0.0 → 7.0.0-alpha1

package/{vendor-BQTRcsle.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 { useModuleDictionary, useModuleSkeleton, useHostTools, useNetwork, EmitEvents, useEnvironment, getPropertyByString, 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";
@@ -52,7 +52,7 @@ import { inputBaseClasses } from "@mui/material/InputBase";
 import { DateTimePicker } from "@mui/x-date-pickers";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Helmet } from "react-helmet-async";
-import { getColorState, DEFAULT_SIZE, useResponsive, OUR_THEME, fnComponentsOverrides } from "@m4l/styles";
+import { DEFAULT_SIZE, useResponsive, OUR_THEME, fnComponentsOverrides } from "@m4l/styles";
 import MuiButton from "@mui/material/Button";
 import { createBrowserHistory } from "history";
 import EventEmitter from "eventemitter3";
@@ -67,6 +67,7 @@ var IconSlots = /* @__PURE__ */ ((IconSlots2) => {
   return IconSlots2;
 })(IconSlots || {});
 const ICON_KEY_COMPONENT = "M4LIcon";
+const ICON_PREFIX$2 = "Icon";
 const iconStyles = {
   root: ({ theme, ownerState }) => ({
     display: "flex",
@@ -90,46 +91,26 @@ const iconStyles = {
     ...ownerState.rotationAngle && {
       transform: `rotate(${ownerState.rotationAngle}deg)`
     },
-    backgroundColor: ownerState.skeleton ? void 0 : ownerState.color ? getColorState(ownerState.color, theme.vars.palette) : theme.vars?.palette.text.primary,
-    ...ownerState.size === "large" && {
-      ...theme.generalSettings.isMobile ? {
-        width: 28,
-        height: 28,
-        minWidth: 28,
-        minHeight: 28
-      } : {
-        width: 20,
-        height: 20,
-        minWidth: 20,
-        minHeight: 20
-      }
-    },
+    backgroundColor: !ownerState.disabled ? getPropertyByString(theme.vars.palette, ownerState.color || "text.primary") : theme.vars.palette.text.disabled,
     ...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: []
   })
 };
 var TooltipSlots = /* @__PURE__ */ ((TooltipSlots2) => {
@@ -278,41 +259,98 @@ 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);
+const TEST_PROP_ID = "data-testid";
+const getNameDataTestId$d = (elementPrefix, elementKey, instaceId) => {
+  if (instaceId) {
+    return `${elementPrefix}-${[elementKey]}-${instaceId}`;
+  }
+  return `${elementPrefix}-${[elementKey]}`;
+};
+function getPropDataTestId(prefix, keyName) {
+  return process.env.NODE_ENV !== "production" && prefix && keyName ? { ["data-testid"]: `${prefix}-${[keyName]}` } : {};
+}
 const Icon = (props) => {
   const {
     src,
-    size,
+    size = "small",
     rotationAngle,
     tooltipContent,
     securityArea,
-    color,
+    color = "text.primary",
     className,
-    placement = "bottom"
+    placement = "bottom",
+    instaceDataTestId,
+    disabled
   } = props;
   const { currentSize } = useComponentSize(size);
-  return /* @__PURE__ */ jsx(RootStyled$7, { className, ownerState: { securityArea, size: currentSize }, children: tooltipContent ? /* @__PURE__ */ jsx(TooltipStyled, { title: tooltipContent, ownerState: {}, placement, children: /* @__PURE__ */ jsx(
-    IconStyled,
+  return /* @__PURE__ */ jsx(Fragment, { children: tooltipContent ? /* @__PURE__ */ jsx(
+    TooltipStyled,
     {
-      ownerState: {
-        src,
-        rotationAngle,
-        size: currentSize,
-        color
-      }
+      title: tooltipContent,
+      ownerState: {},
+      placement,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId$d(
+          ICON_PREFIX$2,
+          IconSlots.tooltip,
+          instaceDataTestId
+        )
+      } : {},
+      children: /* @__PURE__ */ jsx(
+        RootStyled$7,
+        {
+          className,
+          ownerState: { securityArea, size: currentSize },
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNameDataTestId$d(ICON_PREFIX$2, IconSlots.root, instaceDataTestId)
+          } : {},
+          children: /* @__PURE__ */ jsx(
+            IconStyled$1,
+            {
+              ownerState: {
+                src,
+                rotationAngle,
+                size: currentSize,
+                disabled,
+                color
+              },
+              ...process.env.NODE_ENV !== "production" ? {
+                [TEST_PROP_ID]: getNameDataTestId$d(
+                  ICON_PREFIX$2,
+                  IconSlots.icon,
+                  instaceDataTestId
+                )
+              } : {}
+            }
+          )
+        }
+      )
     }
-  ) }) : /* @__PURE__ */ jsx(
-    IconStyled,
+  ) : /* @__PURE__ */ jsx(
+    RootStyled$7,
     {
-      ownerState: {
-        src,
-        rotationAngle,
-        size: currentSize,
-        color
-      }
+      className,
+      ownerState: { securityArea, size: currentSize },
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$d(ICON_PREFIX$2, IconSlots.root, instaceDataTestId) } : {},
+      children: /* @__PURE__ */ jsx(
+        IconStyled$1,
+        {
+          ownerState: {
+            src,
+            rotationAngle,
+            size: currentSize,
+            color,
+            disabled
+          },
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNameDataTestId$d(ICON_PREFIX$2, IconSlots.icon, instaceDataTestId)
+          } : {}
+        }
+      )
     }
   ) });
 };
@@ -752,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;
@@ -834,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) {
@@ -4474,9 +4790,8 @@ const useUtilityClasses$d = () => {
     ...composedClasses
   };
 };
-const TEST_PROP_ID = "data-testid";
 const TYPOGRAPHY_PREFIX = "Typography";
-const getNameDataTestId$d = (KEY) => {
+const getNameDataTestId$c = (KEY) => {
   return `${TYPOGRAPHY_PREFIX}-${KEY}`;
 };
 function Typography(props) {
@@ -4493,7 +4808,7 @@ function Typography(props) {
     WarpperTypography,
     {
       className: clsx(classes2.root, className),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$d("root") } : {},
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$c("root") } : {},
       children: !isSkeleton ? /* @__PURE__ */ jsx(Typography$1, { ...other, variant }) : /* @__PURE__ */ jsx(SkeletonTypography, { skeletonWidth, skeletonHeight })
     }
   );
@@ -4530,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",
@@ -4555,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 = {
@@ -4670,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"
@@ -4680,7 +4995,7 @@ generateUtilityClasses(
   ]
 );
 function getRHFormProviderUtilityClass(slot) {
-  return generateUtilityClass(componentName$D, slot);
+  return generateUtilityClass(componentName$C, slot);
 }
 const RHFormProviderUtilityClasses = () => {
   const slots = {
@@ -4765,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",
@@ -4795,7 +5110,7 @@ generateUtilityClasses(
   ]
 );
 function getRHFAutocompleteClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName$C, slot);
+  return generateUtilityClass(componentName$B, slot);
 }
 const useUtilityClasses$c = (ownerState) => {
   const slots = {
@@ -4915,18 +5230,18 @@ const getRatioValues = (ratio) => {
   }
 };
 const IMAGE_PREFIX = "Image";
-const getNameDataTestId$c = (KEY) => {
+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 = {
@@ -4949,7 +5264,7 @@ function Image(props) {
       ImageRoot,
       {
         className: clsx(classes2.root, className),
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$c("root") } : {},
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$b("root") } : {},
         style: width && height ? { minWidth: width, minHeight: height, width, height } : { width: "100%", height: "100%" },
         children: /* @__PURE__ */ jsx(
           "img",
@@ -4959,14 +5274,14 @@ function Image(props) {
             className: classes2.img,
             width: !width ? "100%" : ratioImage.width,
             height: !height ? "100%" : ratioImage.height,
-            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$c("img") } : {}
+            ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$b("img") } : {}
           }
         )
       }
     )
   );
 }
-const getNameDataTestId$b = (KEY) => {
+const getNameDataTestId$a = (KEY) => {
   return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
 };
 function withRenderOption(getUrlImage, classes2) {
@@ -4977,7 +5292,7 @@ function withRenderOption(getUrlImage, classes2) {
         ...optionProps,
         key: optionProps.key,
         className: classes2.withImage,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$b("withImage") } : {}
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$a("withImage") } : {}
       },
       /* @__PURE__ */ jsx(Image, { src: getUrlImage(option) }),
       /* @__PURE__ */ jsx(Typography, { variant: "body", children: optionProps.key })
@@ -5021,7 +5336,7 @@ const SkeletonRHFAutocomplete = (props) => {
       "div",
       {
         className: classes2.skeleton,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$b("skeleton") } : {},
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$a("skeleton") } : {},
         children: !withImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: classes2.skeletonContainerText, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%", height: "14px" }) }),
           /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16, sx: { minWidth: "16px" } })
@@ -5402,8 +5717,8 @@ function ComponentTypeImage$1(props) {
     }
   );
 }
-const componentName$A = "M4LAccordion";
-generateUtilityClasses(componentName$A, [
+const componentName$z = "M4LAccordion";
+generateUtilityClasses(componentName$z, [
   /* elements */
   "root",
   "endIcon",
@@ -5413,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 = {
@@ -5449,12 +5764,6 @@ styled("div")(({ theme }) => ({
 const AccordionRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LAccordion?.styleOverrides
 }));
-const getNameDataTestId$a = (ELEMENT_PREFIX, ELEMENT_KEY, ELEMENT_ID) => {
-  return `${ELEMENT_PREFIX}-${[ELEMENT_KEY]}-${ELEMENT_ID}`;
-};
-function getPropDataTestId(prefix, keyName) {
-  return process.env.NODE_ENV !== "production" && prefix && keyName ? { ["data-testid"]: `${prefix}-${[keyName]}` } : {};
-}
 const COMPONENT_PREFIX$2 = "m4l-accordion";
 function Accordion(props) {
   const {
@@ -5475,7 +5784,7 @@ function Accordion(props) {
     {
       className: clsx(classes2.root, className),
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId$a(
+        [TEST_PROP_ID]: getNameDataTestId$d(
           COMPONENT_PREFIX$2,
           "root",
           dataTestId
@@ -5509,7 +5818,7 @@ function Accordion(props) {
                   {
                     className: classes2.labelIcon,
                     ...process.env.NODE_ENV !== "production" ? {
-                      [TEST_PROP_ID]: getNameDataTestId$a(
+                      [TEST_PROP_ID]: getNameDataTestId$d(
                         COMPONENT_PREFIX$2,
                         "labelIcon",
                         dataTestId
@@ -5592,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 })
     }
   );
@@ -5701,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;
@@ -5767,7 +6073,7 @@ function MenuActions(props) {
               {
                 dense: true,
                 onClick: (e) => {
-                  handleClick(e, menuAction);
+                  handleClick(e);
                 },
                 sx: { color: menuAction.color ?? "text.main" },
                 disabled: menuAction.disabled,
@@ -6600,14 +6906,14 @@ function Tab(props) {
     {
       className: clsx(classes2.root, className),
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId$a(COMPONENT_PREFIX$1, "root", dataTestId)
+        [TEST_PROP_ID]: getNameDataTestId$d(COMPONENT_PREFIX$1, "root", dataTestId)
       } : {},
       children: !isSkeleton ? /* @__PURE__ */ jsx(Tab$1, { ...other }) : /* @__PURE__ */ jsx(
         SKTTabWrapper,
         {
           className: classes2.skeleton,
           ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId$a(
+            [TEST_PROP_ID]: getNameDataTestId$d(
               COMPONENT_PREFIX$1,
               "skeleton",
               dataTestId
@@ -6667,10 +6973,7 @@ const ToggleAbleIconButton = ({
     IconButton,
     {
       onClick: onToggle,
-      ...props,
-      className: clsx(
-        onToggle ? iconButtonClasses.togglePressed : iconButtonClasses.toggleNotPressed
-      )
+      ...props
     }
   );
 };
@@ -8095,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`
                   }
                 ) })
@@ -11097,7 +11399,7 @@ const Window = (props) => {
       ),
       onMouseDown: onTouch,
       ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId$a(
+        [TEST_PROP_ID]: getNameDataTestId$d(
           AREAS_VIEWER_CLASS_NAME,
           "windowRoot",
           `${emergeType}`
@@ -11394,7 +11696,7 @@ function AreasViewer() {
       {
         className: classesRoot,
         ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getNameDataTestId$a(
+          [TEST_PROP_ID]: getNameDataTestId$d(
             AREAS_VIEWER_CLASS_NAME,
             "root",
             ""
@@ -13387,7 +13689,7 @@ function DataGrid(props) {
       className: classes2.root,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_COLUMNS]: JSON.stringify(columns),
-        [TEST_PROP_ID]: getNameDataTestId$a(DATAGRID_PREFIX_NAME, "root", dataTestId)
+        [TEST_PROP_ID]: getNameDataTestId$d(DATAGRID_PREFIX_NAME, "root", dataTestId)
       } : {},
       children: /* @__PURE__ */ jsx(
         DataGridProvider,
@@ -21831,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)
@@ -21841,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)
@@ -23598,7 +23898,7 @@ function PropertyValue(props) {
           [TEST_PROPS_DATA]: JSON.stringify([
             { property: property ? true : false, value: value ? true : false }
           ]),
-          [TEST_PROP_ID]: getNameDataTestId$a(
+          [TEST_PROP_ID]: getNameDataTestId$d(
             COMPONENT_PREFIX,
             "root",
             dataTestId
@@ -23614,7 +23914,7 @@ function PropertyValue(props) {
                 minWidth: propertyWidth && isDesktop ? propertyWidth : "150px"
               },
               ...process.env.NODE_ENV !== "production" ? {
-                [TEST_PROP_ID]: getNameDataTestId$a(
+                [TEST_PROP_ID]: getNameDataTestId$d(
                   COMPONENT_PREFIX,
                   "property",
                   dataTestId
@@ -23644,7 +23944,7 @@ function PropertyValue(props) {
                 height: valueHeight
               },
               ...process.env.NODE_ENV !== "production" ? {
-                [TEST_PROP_ID]: getNameDataTestId$a(
+                [TEST_PROP_ID]: getNameDataTestId$d(
                   COMPONENT_PREFIX,
                   "value",
                   dataTestId
@@ -23666,7 +23966,7 @@ function PropertyValue(props) {
         [TEST_PROPS_DATA]: JSON.stringify([
           { property: property ? true : false, value: value ? true : false }
         ]),
-        [TEST_PROP_ID]: getNameDataTestId$a(
+        [TEST_PROP_ID]: getNameDataTestId$d(
           COMPONENT_PREFIX,
           "root",
           dataTestId
@@ -23682,7 +23982,7 @@ function PropertyValue(props) {
               [TEST_PROPS_DATA]: JSON.stringify([
                 { property: property ? true : false, value: value ? true : false }
               ]),
-              [TEST_PROP_ID]: getNameDataTestId$a(
+              [TEST_PROP_ID]: getNameDataTestId$d(
                 COMPONENT_PREFIX,
                 "root",
                 dataTestId
@@ -23712,7 +24012,7 @@ function PropertyValue(props) {
               height: valueHeight
             },
             ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROP_ID]: getNameDataTestId$a(
+              [TEST_PROP_ID]: getNameDataTestId$d(
                 COMPONENT_PREFIX,
                 "value",
                 dataTestId
@@ -24540,7 +24840,7 @@ const ContentComponent = () => {
         /* @__PURE__ */ jsx(
           IconButton,
           {
-            variant: "line",
+            variant: "text",
             rotationAngle: !collapsed ? 180 : 0,
             onClick: () => handleButtonClick(),
             onMouseEnter: () => handlerOnMouseEnterIconButton(),
@@ -25202,7 +25502,6 @@ const HamburgerMenu = (props) => {
           {
             src: `${host_static_assets}/${environment_assets}/frontend/web_comercial/menu.svg`,
             className: classes2.ImageLogo,
-            variant: "secondary",
             onClick: () => handlerOnVisible()
           }
         ),
@@ -25323,7 +25622,7 @@ const NavItemRoot = (props) => {
           classes2.ItemSelect,
           item.path === window.location.pathname ? TopBarClasses.IsActive : null
         ),
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$a(componentName$1, "ItemSelect", dataTestId) } : {},
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$d(componentName$1, "ItemSelect", dataTestId) } : {},
         children: /* @__PURE__ */ jsx(Button, { variant: "text", href: item.path, fullWidth: true, children: item.title })
       }
     ) }, index));
@@ -25358,7 +25657,7 @@ const NavItemRoot = (props) => {
         {
           className: classes2.ContainerAccordionCase1,
           ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId$a(
+            [TEST_PROP_ID]: getNameDataTestId$d(
               componentName$1,
               "ContainerAccordionCase1",
               dataTestId
@@ -25385,7 +25684,7 @@ const NavItemRoot = (props) => {
         "div",
         {
           className: classes2.ContainerAccordion,
-          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$a(componentName$1, "ContainerAccordion", dataTestId) } : {},
+          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$d(componentName$1, "ContainerAccordion", dataTestId) } : {},
           children: [
             /* @__PURE__ */ jsx(
               Button,
@@ -25413,7 +25712,7 @@ const NavItemRoot = (props) => {
         classes2.ItemRoot,
         isActive(itemRootData) || openedPopoverId === itemRootData.module_id ? TopBarClasses.IsActive : null
       ),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$a(componentName$1, "ItemRoot", dataTestId) } : {},
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$d(componentName$1, "ItemRoot", dataTestId) } : {},
       children: render()
     }
   );
@@ -25424,7 +25723,7 @@ const ConteinItem = () => {
     "div",
     {
       className: classes2.SimplebarComercial,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$a(componentName$1, "SimplebarComercial", dataTestId) } : {},
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$d(componentName$1, "SimplebarComercial", dataTestId) } : {},
       //Map que se encarga de cargar el iNavItemRoot
       children: DataMenu.map((group) => /* @__PURE__ */ jsx(NavItemRoot, { itemRootData: group }, group.module_id))
     }
@@ -25440,7 +25739,7 @@ const TopBar = (props) => {
     TopBarRoot,
     {
       className: classes2.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$a(componentName$1, "root", dataTestId) } : {},
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$d(componentName$1, "root", dataTestId) } : {},
       children: /* @__PURE__ */ jsx(TopBarProvider, { value: { dataMenu: DataMenu, classes: classes2, dataTestId }, children: /* @__PURE__ */ jsx(ConteinItem, {}) })
     }
   );