@m4l/components 9.1.130 → 9.1.132

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/helpers.js

@@ -7,7 +7,7 @@ class StringSortHelpers {
     return StringSort;
   }
   /**
-   * TODO: Documentar
+   * getDefaulSort obtiene el valor por defecto de un campo de tipo string
    */
   getDefaultSort(field, fixed) {
     const defaultOperator = field.defaultOperator;
@@ -25,31 +25,28 @@ class StringSortHelpers {
     return defaultSort;
   }
   /**
-   * TODO: Documentar
+   * getSortFromFormValue obtiene el valor de un campo de tipo string
    */
   getSortFromFormValue(formSortValue) {
-    const operator = formSortValue.formValueOperator.operator;
+    const operator = formSortValue.formValueOperator;
     return {
       fieldType: "string",
       operator
     };
   }
   /**
-   * TODO: Documentar
+   * getFormValue obtiene el valor de un campo de tipo string
    */
-  getFormValue(field, getLabel, sortValue) {
+  getFormValue(field, _getLabel, sortValue) {
     const sortValueOperator = sortValue ? sortValue : void 0;
     const operator = sortValueOperator ? sortValueOperator.operator : field.defaultOperator ?? "asc";
     return {
       fieldType: "string",
-      formValueOperator: {
-        operator,
-        name: getLabel(getDynamicSortDictionary(`operator_${operator}`))
-      }
+      formValueOperator: operator
     };
   }
   /**
-   * TODO: Documentar
+   * getLabels obtiene las etiquetas de un campo de tipo string
    */
   getLabels(Sort, getLabel, _formatters, _field) {
     const labelOperator = Sort.operator ? getLabel(getDynamicSortDictionary(`operator_${Sort.operator}`)) : "";
@@ -59,21 +56,21 @@ class StringSortHelpers {
     };
   }
   /**
-   * TODO: Documentar
+   * getSchema obtiene el esquema de un campo de tipo string
    */
   getSchema(getLabel) {
     return Yup.object({
-      formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_Sort.error_operator_required`))
+      formValueOperator: Yup.string().required(getLabel(`dynamic_Sort.error_operator_required`))
     });
   }
   /**
-   * TODO: Documentar
+   * verifySort verifica si un campo de tipo string es válido
    */
   verifySort(Sort, _field) {
     if (typeof Sort.operator !== "string") {
       return false;
     }
-    if (SORT_OPERATORS.findIndex((f) => f === Sort.name) === -1) {
+    if (SORT_OPERATORS.findIndex((f) => f === Sort.operator) === -1) {
       return false;
     }
     return typeof Sort.operator === "string";

package/components/DynamicSort/subcomponents/FieldTypes/StringSort/index.js

@@ -1,32 +1,36 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { useModuleDictionary } from "@m4l/core";
+import { useModuleDictionary, useEnvironment } from "@m4l/core";
+import { a as ascending, d as descending } from "../../../icons.js";
 import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../../dictionary.js";
-import { R as RHFAutocomplete } from "../../../../hook-form/RHFAutocomplete/RHFAutocomplete.js";
+import { u as useDynamicSortBase } from "../../DynamicSortBase/useDynamicSortBase.js";
+import { R as RHFSelect } from "../../../../hook-form/RHFSelect/RHFSelect.js";
+import { I as Icon } from "../../../../Icon/Icon.js";
 function StringSort() {
   const { getLabel } = useModuleDictionary();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { size } = useDynamicSortBase();
   const optionsYesNo = useMemo(
     () => [
       {
-        operator: "asc",
-        name: getLabel(getDynamicSortDictionary(`label_ascending`))
+        id: "asc",
+        label: getLabel(getDynamicSortDictionary(`label_ascending`)),
+        startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/${ascending}` })
       },
       {
-        operator: "desc",
-        name: getLabel(getDynamicSortDictionary(`label_descending`))
+        id: "desc",
+        label: getLabel(getDynamicSortDictionary(`label_descending`)),
+        startAdornment: /* @__PURE__ */ jsx(Icon, { src: `${host_static_assets}/${environment_assets}/${descending}` })
       }
     ],
-    [getLabel]
+    [getLabel, host_static_assets, environment_assets]
   );
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-    RHFAutocomplete,
+    RHFSelect,
     {
+      size,
       name: "formValueOperator",
-      type: "text",
-      autoComplete: "off",
       options: optionsYesNo,
-      getOptionLabel: (option) => option.name,
-      isOptionEqualToValue: (option, value) => option.operator === value.operator,
       label: getLabel(getDynamicSortDictionary(DICCTIONARY.input_placeholder))
     }
   ) });

package/components/DynamicSort/subcomponents/FieldTypes/fieldFactory.d.ts

@@ -1,6 +1,6 @@
 import { FieldType } from '../../types';
 import { StringSortHelpers } from './StringSort/helpers';
 /**
- * TODO: Documentar
+ * Factory que retorna el helper correspondiente al tipo de campo
  */
 export declare function fieldFactory(type: FieldType): StringSortHelpers;

package/components/DynamicSort/subcomponents/InputSort/InputSort.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: Documentar
+ * Componente encargado de mostrar el input de búsqueda y el menú de campos para ordenar
  */
 declare const InputSort: () => import("react/jsx-runtime").JSX.Element;
 export default InputSort;

package/components/DynamicSort/subcomponents/InputSort/InputSort.js

@@ -1,7 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useInputSort } from "./useInputSort.js";
-import { I as InputFilterSkeleton } from "./InputSortSkeleton.js";
-import { h as InputSortStyled, i as InputSortIconStyled, j as InputSortInputStyled } from "../../slots/DynamicSortSlots.js";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
+import { c as InputSortStyled, d as InputSortIconStyled, e as InputSortInputSkeletonStyled, f as InputSortInputStyled } from "../../slots/DynamicSortSlots.js";
 import { P as PopoverMenuFields } from "../PopoverMenuFields/PopoverMenuFields.js";
 const InputSort = () => {
   const {
@@ -13,18 +13,16 @@ const InputSort = () => {
     sortFields,
     selectedFieldIndex
   } = useInputSort();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(InputSortStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(InputFilterSkeleton, {}) });
-  }
-  return /* @__PURE__ */ jsxs(InputSortStyled, { ownerState: {}, children: [
-    /* @__PURE__ */ jsx(InputSortIconStyled, { src: iconUrl, ownerState: {} }),
-    /* @__PURE__ */ jsx(
+  const { ownerState, size } = useDynamicSortBase();
+  return /* @__PURE__ */ jsxs(InputSortStyled, { ownerState: { ...ownerState }, children: [
+    /* @__PURE__ */ jsx(InputSortIconStyled, { src: iconUrl, size, ownerState: { ...ownerState } }),
+    isSkeleton ? /* @__PURE__ */ jsx(InputSortInputSkeletonStyled, { ownerState: { ...ownerState }, variant: "rounded" }) : /* @__PURE__ */ jsx(
       InputSortInputStyled,
       {
         type: "text",
         value: inputData,
         placeholder: inputPlaceHolder,
-        ownerState: {},
+        ownerState: { ...ownerState },
         ...inputHandlersProps
       }
     ),

package/components/DynamicSort/subcomponents/PopoverMenuFields/PopoverMenuFields.js

@@ -1,9 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { u as usePopoverMenuFields } from "./usePopoverMenuFields.js";
-import { P as PopoverMenuStyled, k as PopoverMenuItemStyled, l as PopoverMenuItemIconStyled, m as PopoverMenuItemLabelStyled } from "../../slots/DynamicSortSlots.js";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
+import { P as PopoverMenuStyled, g as PopoverMenuItemStyled, h as PopoverMenuItemIconStyled } from "../../slots/DynamicSortSlots.js";
 function PopoverMenuFields(props) {
   const { fields, selectFieldIndex } = props;
   const { fnAnchorEl, handleOpenPopUpClickItem, handleClosePopover, getItemLabel } = usePopoverMenuFields();
+  const { size } = useDynamicSortBase();
   return /* @__PURE__ */ jsx(
     PopoverMenuStyled,
     {
@@ -16,17 +18,16 @@ function PopoverMenuFields(props) {
       onClose: handleClosePopover,
       anchorEl: fnAnchorEl?.(),
       ownerState: {},
-      children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ jsxs(
+      children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ jsx(
         PopoverMenuItemStyled,
         {
+          startIcon: /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { size, src: field.urlIcon, ownerState: {} }),
+          label: getItemLabel(field),
           dense: true,
+          size,
           selected: index === selectFieldIndex,
           onClick: (event) => handleOpenPopUpClickItem(event, field),
-          ownerState: {},
-          children: [
-            /* @__PURE__ */ jsx(PopoverMenuItemIconStyled, { src: field.urlIcon, ownerState: {} }),
-            /* @__PURE__ */ jsx(PopoverMenuItemLabelStyled, { ownerState: {}, children: getItemLabel(field) })
-          ]
+          ownerState: {}
         },
         `menu_action_${getItemLabel(field)}`
       ))

package/components/DynamicSort/subcomponents/PopoverSort/PopoverSort.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as usePopoverSort } from "./usePopoverSort.js";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
 import { D as DataTypeComponent } from "../FieldTypes/DataTypeComponent.js";
-import { n as PopoverStyled, o as PopoverHeaderStyled, p as PopoverHeaderIconStyled, q as PopoverHeaderTitleStyled, r as PopoverContainerFieldsStyled, s as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
+import { u as usePopoverSort } from "./usePopoverSort.js";
+import { i as PopoverStyled, j as PopoverHeaderStyled, k as PopoverHeaderIconStyled, l as PopoverHeaderTitleStyled, m as PopoverContainerFieldsStyled, n as PopoverHeaderActionsStyled } from "../../slots/DynamicSortSlots.js";
 import { R as RHFormProvider } from "../../../hook-form/RHFormContext/index.js";
 import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/ActionCancel.js";
 import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/ActionIntro.js";
@@ -20,6 +21,7 @@ function PopoverSort() {
     statusLoad,
     canRender
   } = usePopoverSort();
+  const { size } = useDynamicSortBase();
   if (!canRender) {
     return null;
   }
@@ -45,13 +47,13 @@ function PopoverSort() {
           statusLoad,
           children: [
             /* @__PURE__ */ jsxs(PopoverHeaderStyled, { ownerState: {}, children: [
-              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, ownerState: {} }),
-              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", ownerState: {}, children: labelField })
+              field.urlIcon && /* @__PURE__ */ jsx(PopoverHeaderIconStyled, { src: field.urlIcon, size, ownerState: {} }),
+              /* @__PURE__ */ jsx(PopoverHeaderTitleStyled, { variant: "paragraphDens", size, ownerState: {}, children: labelField })
             ] }),
             /* @__PURE__ */ jsx(PopoverContainerFieldsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(DataTypeComponent, { formSort, statusLoad }) }),
             /* @__PURE__ */ jsxs(PopoverHeaderActionsStyled, { ownerState: {}, children: [
-              /* @__PURE__ */ jsx(ActionCancel, { onClick: onClose, skeletonWidth: "68px" }),
-              /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "64px" })
+              /* @__PURE__ */ jsx(ActionCancel, { size, onClick: onClose, skeletonWidth: "68px" }),
+              /* @__PURE__ */ jsx(ActionIntro, { size, skeletonWidth: "64px" })
             ] })
           ]
         }

package/components/DynamicSort/subcomponents/SortActions/SortActions.js

@@ -1,11 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { u as useSortActions } from "./useSortActions.js";
-import { S as SortActionsSkeleton } from "./SortActionsSkeleton.js";
 import { g as getDynamicSortDictionary, D as DICCTIONARY } from "../../dictionary.js";
-import { t as ActionsStyled, u as ActionsClearButtonStyled, v as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
+import { u as useDynamicSortBase } from "../DynamicSortBase/useDynamicSortBase.js";
+import { o as ActionsStyled, p as ActionsClearButtonStyled, q as ActionsSubmitButtonStyled } from "../../slots/DynamicSortSlots.js";
 function SortActions() {
   const {
-    isSkeleton,
     sortIconUrl,
     clearIconUrl,
     canShowRemoveAction,
@@ -14,14 +13,13 @@ function SortActions() {
     sortButtonDictionaryTooltip,
     ownerState
   } = useSortActions();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(ActionsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(SortActionsSkeleton, {}) });
-  }
+  const { size } = useDynamicSortBase();
   return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: {}, children: [
     canShowRemoveAction && /* @__PURE__ */ jsx(
       ActionsClearButtonStyled,
       {
-        src: clearIconUrl,
+        size,
+        icon: clearIconUrl,
         onClick: onClickClearSorts,
         dictionaryTooltipId: getDynamicSortDictionary(DICCTIONARY.tooltip_clear_sort),
         ownerState: {}
@@ -30,7 +28,8 @@ function SortActions() {
     /* @__PURE__ */ jsx(
       ActionsSubmitButtonStyled,
       {
-        src: sortIconUrl,
+        size,
+        icon: sortIconUrl,
         "aria-label": "settings",
         dictionaryTooltipId: sortButtonDictionaryTooltip,
         onClick: onClickSort,

package/components/DynamicSort/tests/DynamicSort.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/DynamicSort/types.d.ts

@@ -1,5 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Sizes } from '@m4l/styles';
 import { Maybe } from '@m4l/core';
 import { DYNAMIC_SORT_KEY_COMPONENT } from './constants';
 import { DynamicSortSlots } from './slots';
@@ -85,11 +86,11 @@ export type FormOperand = FormOperandString;
  */
 export interface FormSortValueBase {
     fieldType: FieldType;
-    formValueOperator: FormOperator;
+    formValueOperator: StringOperator;
 }
 export interface FormSortValueString extends FormSortValueBase {
     fieldType: 'string';
-    formValueOperator: FormOperator<StringOperator>;
+    formValueOperator: StringOperator;
 }
 /**
  * Valor de un filtro sobrecargado para cada tipo de dato
@@ -129,6 +130,8 @@ export interface DynamicSortProps {
     onChangeSorts?: OnChangeSorts;
     /** Key único para necesario para las pruebas del componente. */
     dataTestId?: string;
+    /** Propiedad para las variantes de tamaño */
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }
 /**
  * Interface que define la variables que se van a usar en clases del componente
@@ -158,6 +161,10 @@ export interface OwnerState {
      *  "isEmpty" Define si existen sorts aplicados
      */
     isEmpty: boolean;
+    /**
+     * Propiedad para las variantes de tamaño
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
 }
 export interface DynamicSortOwnerState extends DynamicSortProps, OwnerState {
 }

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/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/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/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>>;

package/components/mui_extended/IconButton/IconButton.js

@@ -1,7 +1,6 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { useTheme } from "@mui/material";
+import React, { forwardRef, useMemo, cloneElement } from "react";
+import { useModuleSkeleton } from "@m4l/core";
 import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
 import { e as evalIconColor } from "./helpers/evalIconColor.js";
 import { I as ICON_BUTTON_KEY_COMPONENT } from "./constants.js";
@@ -31,33 +30,24 @@ const IconButton = forwardRef((props, ref) => {
   const classRoot = getComponentSlotRoot(ICON_BUTTON_KEY_COMPONENT);
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const theme = useTheme();
   const isSkeleton = useModuleSkeleton();
-  const paletteColor = getPropertyByString(
-    theme.vars.palette,
-    disabled ? "default" : componentPaletteColor,
-    theme.vars.palette.default
-  );
-  const OwnerState = {
+  const OwnerState = useMemo(() => ({
     variant,
     size: adjustedSize,
     disabled,
-    paletteColor,
     componentPaletteColor,
     selected,
     isSkeleton
-  };
+  }), [variant, adjustedSize, disabled, componentPaletteColor, selected, isSkeleton]);
   const iconColor = useMemo(
     () => evalIconColor(componentPaletteColor, variant),
     [componentPaletteColor, variant]
   );
-  const renderIcon = (arg) => {
-    if (!arg) {
-      return arg;
+  const renderIcon = useMemo(() => (arg) => {
+    if (!arg || typeof arg === "boolean" || typeof arg === "number") {
+      return null;
     }
-    if (typeof arg !== "string") {
-      return arg;
-    } else {
+    if (typeof arg === "string") {
       return /* @__PURE__ */ jsx(
         Icon,
         {
@@ -65,11 +55,19 @@ const IconButton = forwardRef((props, ref) => {
           size: adjustedSize,
           color: iconColor,
           disabled,
-          rotationAngle
+          rotationAngle,
+          selected,
+          enabledSelected: true
         }
       );
     }
-  };
+    if (React.isValidElement(arg)) {
+      return cloneElement(arg, {
+        selected: variant !== "contained" ? selected : false
+      });
+    }
+    return null;
+  }, [adjustedSize, disabled, iconColor, rotationAngle, selected, variant]);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { ...OwnerState } });
   }