@m4l/components 9.1.62 → 9.1.64

package/components/hook-form/RHFColorPicker/RFHColorPicker.js

@@ -1,21 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { useFormContext, useWatch, Controller } from "react-hook-form";
+import { useFormContext, Controller } from "react-hook-form";
 import { clsx } from "clsx";
 import { useModuleSkeleton } from "@m4l/core";
-import { useTheme } from "@mui/material";
-import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
-import { R as RHFCOLORPICKER_PREFIX, a as RHFCOLOR_PICKER_KEY_COMPONENT } from "./constants.js";
-import { R as RHFColorPickerSlots } from "./slots/RHFColorPickerEnum.js";
-import { R as RootStyled, P as PopoverStyled, S as SketchPickerStyled } from "./slots/RHFColorPickerSlots.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { R as RHFCOLOR_PICKER_KEY_COMPONENT } from "./constants.js";
+import { R as RHFColorPickerSlots } from "./slots/RHFColorPickerEnum.js";
+import { R as RootStyled } from "./slots/RHFColorPickerSlots.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { L as Label } from "../../Label/Label.js";
 import { C as Color } from "../../Color/Color.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
-import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
-import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/ActionCancel.js";
-import { A as ActionIntro } from "../../CommonActions/components/ActionIntro/ActionIntro.js";
 const RHFColorPicker = (props) => {
   const {
     name,
@@ -28,34 +23,19 @@ const RHFColorPicker = (props) => {
     disabled,
     className
   } = props;
-  const { control, setValue, formState: { isSubmitted } } = useFormContext();
-  const theme = useTheme();
+  const { control } = useFormContext();
   const isSkeleton = useModuleSkeleton();
   const { currentSize } = useComponentSize(size);
   const ownerState = {
     size: currentSize
   };
-  const currentColor = useWatch({
-    name,
-    control
-  });
-  const [tempColor, setTempColor] = useState(() => currentColor || "#ffffff");
-  const [anchorEl, setAnchorEl] = useState(null);
-  const handleColorChange = (color) => {
-    setTempColor(color.hex);
-  };
-  const handleApprove = () => {
-    setAnchorEl(null);
-    if (tempColor !== currentColor) {
-      setValue(name, tempColor, { shouldValidate: isSubmitted });
-    }
-  };
   const classes = getComponentClasses(RHFCOLOR_PICKER_KEY_COMPONENT, RHFColorPickerSlots);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
+      className: clsx(className, classes.root),
       role: isSkeleton ? "presentation" : void 0,
-      ...getPropDataTestId(RHFCOLORPICKER_PREFIX, RHFColorPickerSlots.root, instaceDataTestId),
+      ...getPropDataTestId(RHFCOLOR_PICKER_KEY_COMPONENT, RHFColorPickerSlots.root, instaceDataTestId),
       ownerState: { ownerState },
       children: /* @__PURE__ */ jsx(
         Controller,
@@ -63,7 +43,7 @@ const RHFColorPicker = (props) => {
           name,
           control,
           defaultValue: "",
-          render: ({ field: { value }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          render: ({ field: { value, onChange }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
             label && /* @__PURE__ */ jsx(
               Label,
               {
@@ -77,18 +57,10 @@ const RHFColorPicker = (props) => {
             /* @__PURE__ */ jsx(
               Color,
               {
-                "aria-errormessage": error?.message || void 0,
                 size,
-                onClick: (event) => setAnchorEl(event.currentTarget),
+                onChange,
                 value,
-                role: "button",
-                tabIndex: 0,
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    setAnchorEl(event.currentTarget);
-                  }
-                },
-                color: error?.message ? "error" : "default",
+                error: !!error,
                 disabled: isSkeleton ? true : disabled
               }
             ),
@@ -98,56 +70,6 @@ const RHFColorPicker = (props) => {
                 size,
                 message: error?.message + ""
               }
-            ),
-            /* @__PURE__ */ jsxs(
-              PopoverStyled,
-              {
-                className: clsx(classes.popover, className),
-                size,
-                ownerState: { error: !!error, size: currentSize },
-                open: Boolean(anchorEl),
-                arrowType: "no-arrow",
-                anchorEl,
-                onClose: () => setAnchorEl(null),
-                anchorOrigin: {
-                  vertical: "bottom",
-                  horizontal: "left"
-                },
-                transformOrigin: {
-                  vertical: "top",
-                  horizontal: "left"
-                },
-                sx: {
-                  mt: error?.message ? theme.vars.size.baseSpacings.sp7 : 0
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    SketchPickerStyled,
-                    {
-                      ownerState: { ownerState },
-                      color: tempColor,
-                      onChange: handleColorChange,
-                      disableAlpha: true
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(ActionsContainer, { children: [
-                    /* @__PURE__ */ jsx(
-                      ActionCancel,
-                      {
-                        onClick: () => setAnchorEl(null),
-                        size
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      ActionIntro,
-                      {
-                        onClick: handleApprove,
-                        size
-                      }
-                    )
-                  ] })
-                ]
-              }
             )
           ] })
         }

package/components/hook-form/RHFColorPicker/RHFColorPicker.styles.js

@@ -11,105 +11,6 @@ const rhfcolorPickerStyles = {
     display: "flex",
     flexDirection: "column",
     gap: theme.vars.size.baseSpacings.sp1
-  }),
-  /**
-   * Estilos para el `Popover` dentro del `RHFColorPicker`.
-   * Define la apariencia del `Popover`, como el borde, el padding y el estilo de los botones dentro del `Popover`.
-   * @author Andrés Quintero - automatic
-   * @createdAt 2025-01-08 10:36:40 - automatic
-   * @updatedAt 2025-01-08 10:36:41 - automatic
-   * @updatedUser Andrés Quintero - automatic
-   */
-  popover: ({ theme, ownerState }) => {
-    return {
-      "& .MuiPaper-root": {
-        padding: 0,
-        border: theme.vars.size.borderStroke.container,
-        borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default,
-        borderRadius: theme.vars.size.borderRadius.r1,
-        "& .MuiButtonBase-root": {
-          // Ajuste específico de estilo para el contenido de los botones
-          justifyContent: "center"
-        }
-      }
-    };
-  },
-  /**
-   * Estilos para el `SketchPicker`, que es el selector de colores dentro del `RHFColorPicker`.
-   * Define el layout y la apariencia de las cajas de color, ajustando el diseño y el estilo de los elementos dentro del selector.
-   * @author Andrés Quintero - automatic
-   * @createdAt 2025-01-08 10:36:40 - automatic
-   * @updatedAt 2025-01-08 10:36:41 - automatic
-   * @updatedUser Andrés Quintero - automatic
-   */
-  sketchPicker: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp3,
-    boxShadow: "none !important",
-    "& > div": {
-      // Caja de selección de color
-      "&:nth-of-type(1)": {
-        borderRadius: theme.vars.size.borderRadius.r1
-      },
-      // Caja de selección horizontal de color
-      "&:nth-of-type(2)": {
-        display: "flex !important",
-        justifyContent: "center !important",
-        alignItems: "center !important",
-        gap: theme.vars.size.baseSpacings.sp3,
-        "& > div:nth-of-type(1)": {
-          padding: "0px !important",
-          "& > div:nth-of-type(1)": {
-            height: `${theme.vars.size.baseSpacings.sp3}!important`,
-            borderRadius: `${theme.vars.size.borderRadius["r0-5"]} !important`,
-            "& > div > div > div > div": {
-              height: "10px !important"
-            }
-          }
-        },
-        "& > div:nth-of-type(2)": {
-          margin: "0px !important",
-          borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
-          height: `${theme.vars.size.desktop.medium.base} !important`,
-          width: `${theme.vars.size.desktop.medium.base} !important`,
-          "& div": {
-            borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
-            boxShadow: "none !important"
-          }
-        }
-      },
-      // Inputs para el cambio de color mediante a texto( hexadecimal o rgb )
-      "&:nth-of-type(3)": {
-        padding: "0px !important",
-        "& > div": {
-          // Estilos compartidos para las cajas de color
-          "&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)": {
-            padding: "0px !important",
-            "& div": {
-              display: "flex !important",
-              flexDirection: "column-reverse !important",
-              "& label": {
-                textAlign: "left !important",
-                color: `${theme.vars.palette.text.secondary} !important`,
-                textTransform: "uppercase !important",
-                padding: "0px !important"
-              },
-              "& input": {
-                borderRadius: theme.vars.size.borderRadius.r1
-              }
-            }
-          }
-        }
-      },
-      //Colores en grid varios del componente de react-color
-      "&:nth-of-type(4)": {
-        paddingTop: "0px !important"
-      }
-    },
-    "& .flexbox-fix": {
-      border: "0px !important"
-    }
   })
 };
 export {

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

@@ -2,4 +2,3 @@
  * Nombre de clase que se usa para dar identidad a los slots del componente.
  */
 export declare const RHFCOLOR_PICKER_KEY_COMPONENT = "M4LRHFColorPicker";
-export declare const RHFCOLORPICKER_PREFIX = "RHFColorPicker";

package/components/hook-form/RHFColorPicker/constants.js

@@ -1,6 +1,4 @@
 const RHFCOLOR_PICKER_KEY_COMPONENT = "M4LRHFColorPicker";
-const RHFCOLORPICKER_PREFIX = "RHFColorPicker";
 export {
-  RHFCOLORPICKER_PREFIX as R,
-  RHFCOLOR_PICKER_KEY_COMPONENT as a
+  RHFCOLOR_PICKER_KEY_COMPONENT as R
 };

package/components/hook-form/RHFColorPicker/slots/RHFColorPickerEnum.d.ts

@@ -1,5 +1,3 @@
 export declare enum RHFColorPickerSlots {
-    root = "root",
-    popover = "popover",
-    sketchPicker = "sketchPicker"
+    root = "root"
 }

package/components/hook-form/RHFColorPicker/slots/RHFColorPickerEnum.js

@@ -1,7 +1,5 @@
 var RHFColorPickerSlots = /* @__PURE__ */ ((RHFColorPickerSlots2) => {
   RHFColorPickerSlots2["root"] = "root";
-  RHFColorPickerSlots2["popover"] = "popover";
-  RHFColorPickerSlots2["sketchPicker"] = "sketchPicker";
   return RHFColorPickerSlots2;
 })(RHFColorPickerSlots || {});
 export {

package/components/hook-form/RHFColorPicker/slots/RHFColorPickerSlots.d.ts

@@ -1,24 +1,6 @@
-import { SketchPicker } from 'react-color';
 /**
- * Styled component que representa el contenedor raíz del `RHFColorPicker`.
- * Aplica los estilos definidos en `rhfcolorPickerStyles.root` al envoltorio `div`.
+ * Componente que es un envoltorio `div` que representa el contenedor raíz del `RHFColorPicker`.
  */
 export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-/**
- * Styled component para el `Popover` dentro del `RHFColorPicker`.
- * Aplica los estilos definidos en `rhfcolorPickerStyles.popover` al componente `Popover`.
- */
-export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Popover/types').PopoverProps, keyof import('../../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown>;
-}, {}, {}>;
-/**
- * Styled component para el componente `SketchPicker` de `react-color` dentro del `RHFColorPicker`.
- * Aplica los estilos definidos en `rhfcolorPickerStyles.sketchPicker` al componente `SketchPicker`.
- */
-export declare const SketchPickerStyled: import('@emotion/styled').StyledComponent<Pick<import('react-color').SketchPickerProps, keyof import('react-color').SketchPickerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown>;
-}, {}, {
-    ref?: import('react').Ref<SketchPicker> | undefined;
-}>;

package/components/hook-form/RHFColorPicker/slots/RHFColorPickerSlots.js

@@ -1,23 +1,11 @@
-import { SketchPicker } from "react-color";
 import { styled } from "@mui/material";
-import { R as RHFColorPickerSlots } from "./RHFColorPickerEnum.js";
-import { a as RHFCOLOR_PICKER_KEY_COMPONENT } from "../constants.js";
+import { R as RHFCOLOR_PICKER_KEY_COMPONENT } from "../constants.js";
 import { r as rhfcolorPickerStyles } from "../RHFColorPicker.styles.js";
-import { P as Popover } from "../../../mui_extended/Popover/Popover.js";
+import { R as RHFColorPickerSlots } from "./RHFColorPickerEnum.js";
 const RootStyled = styled("div", {
   name: RHFCOLOR_PICKER_KEY_COMPONENT,
   slot: RHFColorPickerSlots.root
 })(rhfcolorPickerStyles?.root);
-const PopoverStyled = styled(Popover, {
-  name: RHFCOLOR_PICKER_KEY_COMPONENT,
-  slot: RHFColorPickerSlots.popover
-})(rhfcolorPickerStyles?.popover);
-const SketchPickerStyled = styled(SketchPicker, {
-  name: RHFCOLOR_PICKER_KEY_COMPONENT,
-  slot: RHFColorPickerSlots.sketchPicker
-})(rhfcolorPickerStyles?.sketchPicker);
 export {
-  PopoverStyled as P,
-  RootStyled as R,
-  SketchPickerStyled as S
+  RootStyled as R
 };

package/components/hook-form/RHFPeriod/RHFPeriod.js

@@ -7,7 +7,7 @@ import { R as RHFPeriodRootStyled } from "./slots/RHFPeriodSlots.js";
 import { P as Period } from "./subcomponents/Period/Period.js";
 import { R as RHF_PERIOD_KEY_COMPONENT } from "./constants.js";
 import clsx from "clsx";
-import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { R as RHFPeriodSlots } from "./slots/RHFPeriodEnum.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";

package/components/hook-form/RHFTextField/RHFTextField.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { InputAdornment } from "@mui/material";
-import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { R as RHF_TEXT_FIELD_KEY_COMPONENT } from "./constant.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import clsx from "clsx";

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

@@ -6,7 +6,7 @@ import { LabelProps } from '../../Label/types';
 import { RHFTextFieldSlots } from './slots';
 import { RHF_TEXT_FIELD_KEY_COMPONENT } from './constant';
 import { ComponentPalletColor } from '@m4l/styles';
-export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputProps' | 'label' | 'theme' | 'color' | 'error'>, Omit<LabelProps, 'label' | 'error'> {
+export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputProps' | 'label' | 'theme' | 'error'>, Omit<LabelProps, 'label' | 'error' | 'helperText'> {
     /**
      * Valor de anchura total para la vista de carga provisional.
      * @deprecated

package/components/maps/components/Map/popups/MapPopupMyGps/MapPopupMyGps.js

@@ -8,9 +8,9 @@ import { useCallback } from "react";
 import { D as DistanceToNowFormatter } from "../../../../../formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
 import { L as LAT_LON_FIXED_DIGITS } from "./constants.js";
 import { M as MyDevice } from "../../../../../gclick/MyDevice/MyDevice.js";
-import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 import { M as MyDeviceStatus } from "../../../../../gclick/MyDeviceStatus/MyDeviceStatus.js";
 import { C as CourseFormatter } from "../../../../../formatters/CourseFormatter/CourseFormatter.js";
+import { I as IconButton } from "../../../../../mui_extended/IconButton/IconButton.js";
 const MapPopupMyGps = (props) => {
   const { properties, isOpen, popupOptions } = props;
   const { keepInView = true, autoPan = true, ...others } = popupOptions || {};

package/components/mui_extended/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
-import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
 import { P as PATH_EXPANDED_ICON, A as ACCORDION_KEY } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { A as AccordionRootStyled, a as AccordionSummaryStyled, I as IconExpandedStyled, b as IconLabelStyled, L as LabelStyled, c as AccordionDetailsStyled } from "./slots/AccordionSlots.js";

package/components/mui_extended/Avatar/Avatar.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { useModuleSkeleton } from "@m4l/core";
 import { S as SkeletonAvatar } from "./subcomponents/SkeletonAvatar/index.js";
 import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
-import { g as getNameDataTestId } from "../../../test/getNameDataTestId.js";
+import { a as getNameDataTestId } from "../../../test/getNameDataTestId.js";
 import { A as AvatarRootStyled } from "./slots/AvatarSlots.js";
 import { A as AVATAR_KEY } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";

package/components/mui_extended/Avatar/subcomponents/SkeletonAvatar/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { T as TEST_PROP_ID } from "../../../../../test/constants_no_mock.js";
-import { g as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
+import { a as getNameDataTestId } from "../../../../../test/getNameDataTestId.js";
 import { A as AVATAR_KEY } from "../../constants.js";
 import { S as Skeleton } from "../../../Skeleton/Skeleton.js";
 const SkeletonAvatar = (props) => {

package/components/mui_extended/Badge/Badge.js

@@ -3,7 +3,7 @@ import { B as BadgeRootStyled } from "./slots/BadgeSlots.js";
 import clsx from "clsx";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { B as BADGE_LABEL_KEY_COMPONENT } from "./constants.js";
-import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { B as BadgeSlots } from "./slots/BadgeEnum.js";
 const Badge = (props) => {

package/components/mui_extended/CircularProgress/CircularProgress.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useModuleSkeleton } from "@m4l/core";
-import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { S as SkeletonStyled, R as RootStyled } from "./slots/CircularProgressSlots.js";
 import { C as CircularProgressSlots } from "./slots/CircularProgressEnum.js";
 import { C as CIRCULAR_PROGRESS_PREFIX } from "./constants.js";

package/components/mui_extended/Dialog/Dialog.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { D as DIALOG_KEY_COMPONENT } from "./constants.js";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import clsx from "clsx";

package/components/mui_extended/IconButton/IconButton.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { useTheme } from "@mui/material";
@@ -6,8 +6,8 @@ import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.j
 import { e as evalIconColor } from "./helpers/evalIconColor.js";
 import { I as ICON_BUTTON_KEY_COMPONENT } from "./constants.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { S as SkeletonStyled, a as StyledMUIIconButton, B as BadgeStyled } from "./slots/IconButtonSlots.js";
 import { T as Tooltip } from "../Tooltip/Tooltip.js";
-import { S as StyledMUIIconButton, B as BadgeStyled, a as SkeletonStyled } from "./slots/IconButtonSlots.js";
 import { I as Icon } from "../../Icon/Icon.js";
 const IconButton = forwardRef((props, ref) => {
   const {
@@ -70,62 +70,61 @@ const IconButton = forwardRef((props, ref) => {
       );
     }
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    tooltipContent ? /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        title: tooltipContent.toString(),
-        placement,
-        children: /* @__PURE__ */ jsx(
-          StyledMUIIconButton,
-          {
-            ref,
-            className: classRoot,
-            ownerState: { ...OwnerState },
-            onClick: !disabled ? onClick : void 0,
-            disableRipple: true,
-            disabled,
-            "data-testid": "IconButtonRoot",
-            tabIndex: 0,
-            role: "button",
-            ...other,
-            children: badgeContent ? /* @__PURE__ */ jsx(
-              BadgeStyled,
-              {
-                ownerState: { ...OwnerState },
-                badgeContent,
-                componentPaletteColor,
-                children: renderIcon(icon || src)
-              }
-            ) : /* @__PURE__ */ jsx(Fragment, { children: renderIcon(icon || src) })
-          }
-        )
-      }
-    ) : /* @__PURE__ */ jsx(
-      StyledMUIIconButton,
-      {
-        ref,
-        className: classRoot,
-        ownerState: { ...OwnerState },
-        onClick: !disabled ? onClick : void 0,
-        disableRipple: true,
-        disabled,
-        "data-testid": "IconButtonRoot",
-        tabIndex: 0,
-        ...other,
-        children: badgeContent ? /* @__PURE__ */ jsx(
-          BadgeStyled,
-          {
-            ownerState: { ...OwnerState },
-            badgeContent,
-            componentPaletteColor,
-            children: renderIcon(icon || src)
-          }
-        ) : /* @__PURE__ */ jsx(Fragment, { children: renderIcon(icon || src) })
-      }
-    ),
-    isSkeleton && /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { ...OwnerState } })
-  ] });
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { ...OwnerState } });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: tooltipContent ? /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: tooltipContent.toString(),
+      placement,
+      children: /* @__PURE__ */ jsx(
+        StyledMUIIconButton,
+        {
+          ref,
+          className: classRoot,
+          ownerState: { ...OwnerState },
+          onClick: !disabled ? onClick : void 0,
+          disableRipple: true,
+          disabled,
+          "data-testid": "IconButtonRoot",
+          tabIndex: 0,
+          role: "button",
+          ...other,
+          children: badgeContent ? /* @__PURE__ */ jsx(
+            BadgeStyled,
+            {
+              ownerState: { ...OwnerState },
+              badgeContent,
+              componentPaletteColor,
+              children: renderIcon(icon || src)
+            }
+          ) : /* @__PURE__ */ jsx(Fragment, { children: renderIcon(icon || src) })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    StyledMUIIconButton,
+    {
+      ref,
+      className: classRoot,
+      ownerState: { ...OwnerState },
+      onClick: !disabled ? onClick : void 0,
+      disableRipple: true,
+      disabled,
+      "data-testid": "IconButtonRoot",
+      ...other,
+      children: badgeContent ? /* @__PURE__ */ jsx(
+        BadgeStyled,
+        {
+          ownerState: { ...OwnerState },
+          badgeContent,
+          componentPaletteColor,
+          children: renderIcon(icon || src)
+        }
+      ) : /* @__PURE__ */ jsx(Fragment, { children: renderIcon(icon || src) })
+    }
+  ) });
 });
 export {
   IconButton as I

package/components/mui_extended/IconButton/IconButton.styles.js

@@ -171,18 +171,6 @@ const iconButtonStyles = {
     //     }),
     //   },
   }),
-  /**
-   * Slot de contenedor de reactNode
-   * @author Andrés Quintero - automatic
-   * @createdAt 2024-12-27 08:27:31 - automatic
-   * @updatedAt 2025-01-03 11:42:14 - automatic
-   * @updatedUser Andrés Quintero - automatic
-   */
-  containReact: ({ isSkeleton }) => ({
-    display: isSkeleton ? "none" : "flex",
-    width: "100%",
-    height: "100%"
-  }),
   /**
    * Slot skeleton con sus estilos de tamaño
    * @author Andrés Quintero - automatic

package/components/mui_extended/IconButton/slots/IconButtonEnum.d.ts

@@ -1,6 +1,5 @@
 export declare enum IconButtonSlots {
     styledMUIIconButton = "styledMUIIconButton",
-    containReact = "containReact",
     badgeIconButton = "badgeIconButton",
     skeleton = "skeleton"
 }

package/components/mui_extended/IconButton/slots/IconButtonEnum.js

@@ -1,6 +1,5 @@
 var IconButtonSlots = /* @__PURE__ */ ((IconButtonSlots2) => {
   IconButtonSlots2["styledMUIIconButton"] = "styledMUIIconButton";
-  IconButtonSlots2["containReact"] = "containReact";
   IconButtonSlots2["badgeIconButton"] = "badgeIconButton";
   IconButtonSlots2["skeleton"] = "skeleton";
   return IconButtonSlots2;