@m4l/components 9.1.131 → 9.1.133

package/components/Chip/Chip.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton, useEnvironment } from "@m4l/core";
 import clsx from "clsx";
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import { C as CHIP_CLASSES } from "./constants.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
-import { S as SkeletonChipStyled, C as ChipRootStyled, T as TextChipStyled, I as IconButtonStyled, a as IconStyled } from "./slots/ChipSlots.js";
+import { I as IconStyled, S as SkeletonChipStyled, C as ChipRootStyled, T as TextChipStyled, a as IconButtonStyled } from "./slots/ChipSlots.js";
 const Chip = forwardRef((props, ref) => {
   const {
     endIcon,
@@ -26,30 +26,16 @@ const Chip = forwardRef((props, ref) => {
   const isSkeleton = useModuleSkeleton();
   const { host_static_assets, environment_assets } = useEnvironment();
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const ownerState = {
+  const ownerState = useMemo(() => ({
     interactive: !!onClick,
     size: adjustedSize,
+    chipSize: adjustedSize,
     variant,
     color,
     opacity,
     externalColor
-  };
-  const handleDelete = (e) => {
-    e.stopPropagation();
-    onDeleted?.(e);
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(
-      SkeletonChipStyled,
-      {
-        "data-testid": "SkeletonButton",
-        width: skeletonWidth,
-        ownerState: { ...ownerState }
-      }
-    );
-  }
-  const iconClose = `${host_static_assets}/${environment_assets}/frontend/components/chip/assets/icons/closeSmall.svg`;
-  const renderIcon = (icon, instaceDataTestId) => {
+  }), [adjustedSize, variant, color, opacity, externalColor, onClick]);
+  const renderIcon = useMemo(() => (icon, instaceDataTestId) => {
     if (!icon) {
       return null;
     }
@@ -59,7 +45,6 @@ const Chip = forwardRef((props, ref) => {
       return /* @__PURE__ */ jsx(
         IconStyled,
         {
-          color,
           ownerState: { ...ownerState },
           src: icon,
           size: adjustedSize,
@@ -67,6 +52,21 @@ const Chip = forwardRef((props, ref) => {
         }
       );
     }
+  }, [ownerState, adjustedSize]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      SkeletonChipStyled,
+      {
+        "data-testid": "SkeletonButton",
+        width: skeletonWidth,
+        ownerState: { ...ownerState }
+      }
+    );
+  }
+  const iconClose = `${host_static_assets}/${environment_assets}/frontend/components/chip/assets/icons/closeSmall.svg`;
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    onDeleted?.(e);
   };
   return /* @__PURE__ */ jsxs(
     ChipRootStyled,

package/components/Chip/ChipStyles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const getColors = (theme, ownerState) => {
   const keyColor = ownerState.variant === "contained" ? ownerState.color + "Contained" : ownerState.color + "Outlined";
   const finalPalette = ownerState.externalColor ? ownerState.externalColor : theme.vars.palette.chips[keyColor ?? "default"];
@@ -24,11 +24,8 @@ const chipStyles = {
       cursor: "pointer",
       color,
       backgroundColor: !(ownerState.variant === "outlined") ? bgColor : "transparent",
-      // '& .M4LIcon-icon': {
-      //   backgroundColor: `${color} !important`,
-      // },
-      ...getHeightSizeStyles(
-        theme.generalSettings.isMobile,
+      ...getSizeStyles(
+        theme,
         ownerState.size || "medium",
         "base"
       ),
@@ -81,30 +78,16 @@ const chipStyles = {
       "& .M4LIcon-icon": {
         backgroundColor: `${color} !important`
       },
-      // Estilos específicos para el tamaño small
-      ...ownerState.size === "small" && {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.small.base,
-          width: theme.vars.size.mobile.small.base,
-          minHeight: theme.vars.size.mobile.small.base
-        } : {
-          height: theme.vars.size.desktop.small.base,
-          width: theme.vars.size.desktop.small.base,
-          minHeight: theme.vars.size.desktop.small.base
-        }
-      },
-      // Estilos específicos para el tamaño medium
-      ...ownerState.size === "medium" && {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.medium.base,
-          width: theme.vars.size.mobile.medium.base,
-          minHeight: theme.vars.size.mobile.medium.base
-        } : {
-          height: theme.vars.size.desktop.medium.base,
-          width: theme.vars.size.desktop.medium.base,
-          minHeight: theme.vars.size.desktop.medium.base
-        }
-      }
+      ...getSizeStyles(
+        theme,
+        ownerState.size || "medium",
+        "base",
+        (size) => ({
+          height: size,
+          width: size,
+          minHeight: size
+        })
+      )
     };
   },
   /**
@@ -113,26 +96,15 @@ const chipStyles = {
   skeletonChip: ({ theme, ownerState }) => ({
     width: "100%",
     background: theme.vars.palette.skeleton.transition,
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.small.base,
-        minHeight: theme.vars.size.mobile.small.base
-      } : {
-        height: theme.vars.size.desktop.small.base,
-        minHeight: theme.vars.size.desktop.small.base
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: theme.vars.size.mobile.medium.base,
-        minHeight: theme.vars.size.mobile.medium.base
-      } : {
-        height: theme.vars.size.desktop.medium.base,
-        minHeight: theme.vars.size.desktop.medium.base
-      }
-    }
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "base",
+      (size) => ({
+        height: size,
+        minHeight: size
+      })
+    )
   })
 };
 export {

package/components/Chip/slots/ChipSlots.js

@@ -28,8 +28,8 @@ const IconButtonStyled = styled(IconButton, {
 })(chipStyles?.iconButton);
 export {
   ChipRootStyled as C,
-  IconButtonStyled as I,
+  IconStyled as I,
   SkeletonChipStyled as S,
   TextChipStyled as T,
-  IconStyled as a
+  IconButtonStyled as a
 };

package/components/Chip/types.d.ts

@@ -63,7 +63,7 @@ export interface ChipProps {
      */
     className?: string;
     /**
-     * Focusable `Chip`.
+     * If the `Chip` is focusable.
      */
     focusable?: boolean;
 }

package/components/DynamicFilter/store/DynamicFilterContext.js

@@ -3,7 +3,7 @@ import { createContext, useRef, useEffect } from "react";
 import { useStore } from "zustand";
 import { shallow } from "zustand/shallow";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useIsMobile, useFirstRender } from "@m4l/graphics";
 import { c as createDynamicFilterStore } from "./DynamicFilterStore.js";
 import { A as ALL_FIELD } from "../constants.js";
 import { f as formatToRawFilter } from "../helpers/formatToRowFilter.js";
@@ -24,7 +24,7 @@ function DynamicFilterProvider(props) {
   const { getLabel } = useModuleDictionary();
   const dynamicFilterStoreRef = useRef();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const isDesktop = useResponsiveDesktop();
+  const isDesktop = !useIsMobile();
   const isSkeleton = useModuleSkeleton();
   const isFirstRender = useFirstRender([isDesktop, isSkeleton]);
   if (!dynamicFilterStoreRef.current) {

package/components/DynamicSort/DynamicSort.styles.js

@@ -1,6 +1,6 @@
 import { c as containerQuery } from "../../utils/containerQuery.js";
 import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
-import { a as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const CONTAINER_QUERY_NAME = "dynamic";
 const dynamicSortStyles = {
   /**
@@ -55,13 +55,12 @@ const dynamicSortStyles = {
     overflow: "hidden",
     ...getSizeStyles(
       theme,
-      theme.generalSettings.isMobile,
       ownerState.size || "medium",
       "container",
-      (height) => ({
-        height,
-        minHeight: height,
-        maxHeight: height
+      (size) => ({
+        height: size,
+        minHeight: size,
+        maxHeight: size
       })
     ),
     maxWidth: "135px",
@@ -81,13 +80,12 @@ const dynamicSortStyles = {
   inputSortInput: ({ theme, ownerState }) => ({
     ...getSizeStyles(
       theme,
-      theme.generalSettings.isMobile,
       ownerState.size || "medium",
       "action",
-      (height) => ({
-        height,
-        minHeight: height,
-        maxHeight: height
+      (size) => ({
+        height: size,
+        minHeight: size,
+        maxHeight: size
       })
     ),
     ...getTypographyStyles(
@@ -314,13 +312,12 @@ const dynamicSortStyles = {
     marginRight: theme.vars.size.baseSpacings.sp2,
     ...getSizeStyles(
       theme,
-      theme.generalSettings.isMobile,
       ownerState.size || "medium",
       "base",
-      (height) => ({
-        height,
-        minHeight: height,
-        maxHeight: height
+      (size) => ({
+        height: size,
+        minHeight: size,
+        maxHeight: size
       })
     )
   })

package/components/Icon/Icon.js

@@ -17,16 +17,21 @@ const Icon = (props) => {
     className,
     placement = "bottom",
     instaceDataTestId,
-    disabled
+    disabled,
+    selected,
+    enabledSelected
   } = props;
   const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const isSkeleton = useModuleSkeleton();
   const ownerState = {
-    iconSize: currentSize,
-    iconColor: color,
-    iconSrc: src,
-    iconDisabled: disabled,
-    iconRotationAngle: rotationAngle,
+    size: adjustedSize,
+    color,
+    src,
+    disabled,
+    rotationAngle,
+    selected,
+    enabledSelected,
     isSkeleton
   };
   const classKey = getComponentClasses(ICON_KEY_COMPONENT, IconSlots);
@@ -38,6 +43,7 @@ const Icon = (props) => {
         title: tooltipContent,
         ownerState: { ...ownerState },
         placement,
+        size: adjustedSize,
         ...getPropDataTestId(ICON_PREFIX, IconSlots.tooltip, instaceDataTestId),
         children: /* @__PURE__ */ jsx(
           RootStyled,
@@ -74,7 +80,7 @@ const Icon = (props) => {
         )
       }
     ),
-    isSkeleton && /* @__PURE__ */ jsx(IconSkeletonStyled, { className: classKey.iconSkeleton, role: "icon-skeleton", variant: "rectangular", ownerState: { ...ownerState } })
+    isSkeleton && /* @__PURE__ */ jsx(IconSkeletonStyled, { className: classKey.iconSkeleton, role: "icon-skeleton", size: adjustedSize, variant: "rectangular", ownerState: { ...ownerState } })
   ] });
 };
 export {

package/components/Icon/Icon.styles.js

@@ -14,7 +14,7 @@ const iconStyles = {
     alignItems: "center",
     width: "fit-content",
     transition: "transform 0.5s ease-in-out",
-    ...ownerState.iconSize === "medium" && {
+    ...ownerState.size === "medium" && {
       ...theme.generalSettings.isMobile ? {
         width: theme.vars.size.mobile.medium.base,
         height: theme.vars.size.mobile.medium.base
@@ -23,7 +23,7 @@ const iconStyles = {
         height: theme.vars.size.desktop.medium.base
       }
     },
-    ...ownerState.iconSize === "small" && {
+    ...ownerState.size === "small" && {
       ...theme.generalSettings.isMobile ? {
         width: theme.vars.size.mobile.small.base,
         height: theme.vars.size.mobile.small.base
@@ -40,22 +40,25 @@ const iconStyles = {
    * del ícono basada en el ángulo de rotación proporcionado, y el color de fondo que
    * se ajusta de acuerdo con el estado de deshabilitación o no del ícono.
    */
-  icon: ({ theme, ownerState }) => ({
-    maskPosition: "center",
-    maskRepeat: "no-repeat",
-    maskSize: "cover",
-    WebkitMaskRepeat: "no-repeat",
-    mask: `url(${ownerState.iconSrc})`,
-    WebkitMask: `url(${ownerState.iconSrc})`,
-    WebkitMaskSize: "cover",
-    ...ownerState.iconRotationAngle && {
-      transform: `rotate(${ownerState.iconRotationAngle}deg)`
-    },
-    backgroundColor: !ownerState.iconDisabled ? getPropertyByString(theme.vars.palette, String(ownerState.iconColor) || "text.primary") : theme.vars.palette.text.disabled,
-    width: "inherit",
-    height: "inherit",
-    variants: []
-  }),
+  icon: ({ theme, ownerState }) => {
+    const backgroundColor = ownerState.disabled ? theme.vars.palette.text.disabled : ownerState.selected && ownerState.enabledSelected ? `${theme.vars.palette.primary.selected} !important` : getPropertyByString(theme.vars.palette, String(ownerState.color), "text.primary");
+    return {
+      maskPosition: "center",
+      maskRepeat: "no-repeat",
+      maskSize: "cover",
+      WebkitMaskRepeat: "no-repeat",
+      mask: `url(${ownerState.src})`,
+      WebkitMask: `url(${ownerState.src})`,
+      WebkitMaskSize: "cover",
+      ...ownerState.rotationAngle && {
+        transform: `rotate(${ownerState.rotationAngle}deg)`
+      },
+      backgroundColor,
+      width: "inherit",
+      height: "inherit",
+      variants: []
+    };
+  },
   /**
    * Slot iconSkeleton: Define los estilos para el esqueleto del ícono.
    * Se utiliza cuando el ícono aún no está completamente cargado, proporcionando
@@ -65,7 +68,7 @@ const iconStyles = {
   iconSkeleton: ({ theme, ownerState }) => ({
     "&.M4lclassCssSpecificity": {
       borderRadius: theme.size.borderRadius.r1,
-      ...ownerState.iconSize === "medium" && {
+      ...ownerState.size === "medium" && {
         ...theme.generalSettings.isMobile ? {
           width: theme.vars.size.mobile.medium.base,
           height: theme.vars.size.mobile.medium.base
@@ -74,7 +77,7 @@ const iconStyles = {
           height: theme.vars.size.desktop.medium.base
         }
       },
-      ...ownerState.iconSize === "small" && {
+      ...ownerState.size === "small" && {
         ...theme.generalSettings.isMobile ? {
           width: theme.vars.size.mobile.small.base,
           height: theme.vars.size.mobile.small.base

package/components/Icon/types.d.ts

@@ -43,16 +43,19 @@ export interface IconProps extends Pick<TooltipProps, 'placement'> {
      * Valor que en caso de ser verdadero debe de pintar el svg con color text disabled.
      */
     disabled?: boolean;
+    /**
+     * Valor que define si el icono debe de estar seleccionado pero depende de la propiedad enableSelected.
+     */
+    selected?: boolean;
+    /**
+     * Valor que define si el icono debe de estar seleccionado pero depende de la propiedad selected.
+     */
+    enabledSelected?: boolean;
 }
 /**
  * Define las las propiedades usadas para estilizar el componente desde el css.
  */
-export interface IconOwnerState {
-    iconSize: Sizes;
-    iconRotationAngle?: number;
-    iconColor: IconColors;
-    iconDisabled?: boolean;
-    iconSrc: string;
+export interface IconOwnerState extends Pick<IconProps, 'selected' | 'enabledSelected' | 'size' | 'rotationAngle' | 'color' | 'disabled' | 'src'> {
     isSkeleton: boolean;
 }
 export type IconSlotsType = keyof typeof IconSlots;

package/components/Label/Label.styles.js

@@ -1,5 +1,5 @@
 import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
-import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const labelStyles = {
   /**
    * Estilos para el contenedor raíz del Label 🏷️

package/components/NumberInput/NumberInput.styles.js

@@ -1,5 +1,5 @@
 import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
-import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const numberInputStyles = {
   /**
    * Estilos aplicados al contenedor principal (root).

package/components/ObjectLogs/components/DetailFormatter/index.js

@@ -4,7 +4,7 @@ import { D as DetailDialog } from "../DetailDialog/index.js";
 import { u as useModal } from "../../../../hooks/useModal/index.js";
 import { useModuleDictionary, useEnvironment } from "@m4l/core";
 import { I as Icon } from "../../../Icon/Icon.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
+import { useIsMobile } from "@m4l/graphics";
 import { S as Stack } from "../../../mui_extended/Stack/Stack.js";
 import { W as WindowBase } from "../../../WindowBase/WindowBase.js";
 function DetailFormatter(props) {
@@ -12,7 +12,7 @@ function DetailFormatter(props) {
   const { openModal } = useModal();
   const { getLabel } = useModuleDictionary();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const isDesktop = useResponsiveDesktop();
+  const isDesktop = !useIsMobile();
   const onClickDetail = () => {
     openModal({
       // onQueryClose: () => closeModal(),

package/components/PaperForm/styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
 const paperFormStyles = {
   /**
    *************************************************************

package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../../../../utils/getSizeStyles/getSizeStyles.js";
 import { a as ITEM_IN_TREE_ACTIVE, I as ITEM_ACTIVE } from "../../../../constants.js";
 const containerMenuItemsMainStyles = {
   /**

package/components/areas/components/AreasAdmin/AreasAdmin.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const areasAdminStyles = {
   /**
    * Root areas admin Styles

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/hooks/useHeaderActions/useHeaderActions.js

@@ -5,7 +5,7 @@ import { I as ICONS } from "../../../../../../../../icons.js";
 import { g as getAreasDictionary, A as AREAS_DICCTIONARY } from "../../../../../../../../dictionary.js";
 import { g as getMainActions, a as getMenuActions } from "./helper.js";
 import { shallow } from "zustand/shallow";
-import { useResponsiveDesktop } from "@m4l/graphics";
+import { useIsMobile } from "@m4l/graphics";
 const useHeaderActions = ({
   windowId,
   areaId,
@@ -13,7 +13,7 @@ const useHeaderActions = ({
 }) => {
   const { host_static_assets, environment_assets } = useEnvironment();
   const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
+  const isDesktop = !useIsMobile();
   const urlPrefix = `${host_static_assets}/${environment_assets}`;
   const moduleActions = useAreasStore(
     (state) => {

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/WindowModal/WindowModal.js

@@ -4,12 +4,12 @@ import { R as ResizableBox } from "../../../../../../../extended/React-Resizable
 import { u as useAreasStore } from "../../../../../../hooks/useAreas/index.js";
 import { W as Window } from "../Window/Window.js";
 import Draggable from "react-draggable";
-import { useResponsiveDesktop } from "@m4l/graphics";
+import { useIsMobile } from "@m4l/graphics";
 import { b as WrapperWindowModalStyled } from "../../../../slots/AreasViewerSlots.js";
 const WindowModal = (props) => {
   const { windowId } = props;
   const { onClose } = useAreasStore((state) => state.hashWindowsModals[windowId]);
-  const isDesktop = useResponsiveDesktop();
+  const isDesktop = !useIsMobile();
   const DragabblePaperComponent = (_props) => {
     return /* @__PURE__ */ jsx(
       Draggable,

package/components/areas/contexts/AreasContext/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, useRef, useCallback, useEffect } from "react";
 import { useStore } from "zustand";
 import { shallow } from "zustand/shallow";
-import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useIsMobile, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, useFlagsStore, CommonFlags, EmitEvents } from "@m4l/core";
 import { c as createAreasStore } from "./store.js";
 const AreasContext = createContext(null);
@@ -11,7 +11,7 @@ function AreasProvider(props) {
   const { events_add_listener, events_remove_listener } = useHostTools();
   const { getLabel } = useModuleDictionary();
   const { networkOperation } = useNetwork();
-  const isDesktop = useResponsiveDesktop();
+  const isDesktop = !useIsMobile();
   const isSkeleton = useModuleSkeleton();
   const isFirstRender = useFirstRender([getLabel]);
   const { addFlag } = useFlagsStore((state) => state.flagsActions);

package/components/extended/React-Spinners/PropagateLoaderSpinner/PropagateLoaderSpinner.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../../utils/getSizeStyles/getSizeStyles.js";
 const propagateLoaderSpinnerStyles = {
   /**
    * Estilos del componente raíz del contenedor de la ventana.

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
-import { useResponsiveDesktop } from "@m4l/graphics";
+import { useIsMobile } from "@m4l/graphics";
 import { useTheme } from "@mui/material";
 import { useState, useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
@@ -32,7 +32,7 @@ function RHFAutocomplete(props) {
   } = props;
   const theme = useTheme();
   const [open, setOpen] = useState(false);
-  const isDesktop = useResponsiveDesktop();
+  const isDesktop = !useIsMobile();
   const onCloseLocal = (event, reason) => {
     setOpen(false);
     if (onClose) {

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

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const rhfTextFieldPasswordStyles = {
   /**
    * Elemento Root

package/components/mui_extended/Autocomplete/Autocomplete.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const autocompleteSyles = {
   /**
    * Styles for the root component.

package/components/mui_extended/CheckBox/CheckBox.styles.js

@@ -1,4 +1,4 @@
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const checkBoxStyles = {
   /**
    * Estilos generales para el checkbox 🟦

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

@@ -1,5 +1,5 @@
 import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
-import { g as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { a as getHeightSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
 const dateTimePickerStyles = {
   /**
    * Estilos para el root cuando esta en Desktop 💻

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

@@ -1,7 +1,8 @@
+import { default as React } from 'react';
 import { IconButtonProps } from './types';
 /**
  *Los Icon button son habitualmente ubicados en barras de aplicaciones y barras de herramientas. Además, resulta adecuado emplear iconos en botones de alternancia que posibilitan la selección o deselección de una única opción, como añadir o eliminar una estrella a un elemento.
  * @param props
  * @returns
  */
-export declare const IconButton: import('react').ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;