@m4l/components 9.1.125 → 9.1.126

package/components/mui_extended/MenuItem/MenuItem.styles.js

@@ -26,9 +26,9 @@ const menuItemStyles = {
         paddingLeft: theme.vars.size.baseSpacings.sp1,
         color: color("enabled")
       },
-      "& .M4LIcon-icon": {
-        backgroundColor: `${color("enabled")} !important`
-      },
+      // '& .M4LIcon-icon': {
+      //   backgroundColor: `${color('enabled')} !important`,
+      // },
       "&:active": {
         backgroundColor: `${paletteColor.activeOpacity} !important`,
         "& .M4LIcon-icon": {
@@ -45,11 +45,11 @@ const menuItemStyles = {
           backgroundColor: color("hover")
         }
       },
-      "&:focus-visible": {
-        outline: theme.vars.size.borderStroke.container,
-        outlineColor: theme.vars.palette.border.main,
-        outlineOffset: theme.vars.size.baseSpacings["sp0-5"]
-      },
+      // '&:focus-visible': {
+      //   outline: theme.vars.size.borderStroke.container,
+      //   outlineColor: theme.vars.palette.border.main,
+      //   outlineOffset: theme.vars.size.baseSpacings['sp0-5'],
+      // },
       ...ownerState.selected && {
         borderLeft: theme.vars.size.borderStroke.container,
         borderLeftColor: paletteColor.enabled
@@ -87,11 +87,17 @@ const menuItemStyles = {
    * @updatedAt 2025-02-10 16:37:32 - automatic
    * @updatedUser cesar - automatic
    */
-  menuItemIcon: () => ({
-    "&.MenuItemEndIcon-root": {
-      marginLeft: "auto"
-    }
-  }),
+  menuItemIcon: ({ ownerState, theme }) => {
+    const finalColor = ownerState.selected ? ownerState.color === "error" ? theme.vars.palette["error"].enabled : theme.vars.palette["primary"].enabled : ownerState.color === "default" ? theme.vars.palette["text"].primary : theme.vars.palette[ownerState.color ?? "default"].enabled;
+    return {
+      "&.MenuItemEndIcon-root": {
+        marginLeft: "auto"
+      },
+      "& .M4LIcon-icon": {
+        backgroundColor: finalColor
+      }
+    };
+  },
   /**
    * Estilos para el icono de los items del menú cuando están seleccionados
    * @author SebastianM - automatic
@@ -99,15 +105,16 @@ const menuItemStyles = {
    * @updatedAt 2025-02-10 16:37:32 - automatic
    * @updatedUser cesar - automatic
    */
-  menuItemIconChecked: ({ theme, ownerState }) => ({
-    visibility: ownerState.checkable ? ownerState.checked ? "visible" : "hidden" : "hidden",
-    ...ownerState.selected && {
+  menuItemIconChecked: ({ theme, ownerState }) => {
+    const finalColor = ownerState.selected ? ownerState.color === "error" ? theme.vars.palette["error"].enabled : theme.vars.palette["primary"].enabled : ownerState.color === "default" ? theme.vars.palette["text"].primary : theme.vars.palette[ownerState.color ?? "default"].enabled;
+    return {
+      visibility: ownerState.checkable ? ownerState.checked ? "visible" : "hidden" : "hidden",
       "& .M4LIcon-icon": {
-        backgroundColor: theme.vars.palette[ownerState.color ?? "default"].main
-      }
-    },
-    variants: []
-  }),
+        backgroundColor: finalColor
+      },
+      variants: []
+    };
+  },
   /**
    * Estilos para la tipografía del menú item
    * @author SebastianM - automatic

package/components/mui_extended/MenuItem/slots/MenuItemSlots.d.ts

@@ -1,21 +1,21 @@
 declare const MenuItemRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').MenuItemOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLLIElement> | null | undefined;
-}, "children" | "selected" | "action" | "divider" | "style" | "dense" | "disabled" | "sx" | "classes" | "autoFocus" | "className" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableGutters">, "children" | "value" | "ref" | "title" | "id" | "selected" | "action" | "divider" | "hidden" | "color" | "content" | "style" | "dense" | "disabled" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableGutters"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
+}, "children" | "selected" | "action" | "divider" | "style" | "dense" | "disabled" | "sx" | "classes" | "autoFocus" | "className" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableGutters">, "children" | "value" | "ref" | "title" | "id" | "selected" | "action" | "divider" | "hidden" | "color" | "content" | "style" | "dense" | "disabled" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableGutters"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-declare const MenuItemContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
+declare const MenuItemContainerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-declare const MenuItemTypographyStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
+declare const MenuItemTypographyStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-declare const MenuItemIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
+declare const MenuItemIconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-declare const MenuItemIconCheckedStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
+declare const MenuItemIconCheckedStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-declare const MenuItemSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').MenuItemOwnerState> & Record<string, unknown> & {
+declare const MenuItemSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Skeleton/types').SkeletonProps, keyof import('../../Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
     ownerState: Partial<import('..').MenuItemOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 export { MenuItemRootStyled, MenuItemIconStyled, MenuItemIconCheckedStyled, MenuItemTypographyStyled, MenuItemContainerStyled, MenuItemSkeletonStyled, };

package/components/mui_extended/MenuItem/types.d.ts

@@ -1,9 +1,9 @@
 import { MenuItemProps as MUIMenuItemProps, Theme } from '@mui/material';
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { Sizes, ComponentPalletColor } from '@m4l/styles';
 import { MenuItemSlots } from './slots';
 import { MENUITEM_KEY_COMPONENT } from './constants';
 import { ReactNode } from 'react';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
 /**
  * Propiedades del componente `MenuItem`.
  */
@@ -64,4 +64,4 @@ export type MenuItemSlotsType = keyof typeof MenuItemSlots;
 /**
  * Estilos aplicables al `MenuItem` utilizando temas y slots personalizados.
  */
-export type MenuItemStyles = OverridesStyleRules<MenuItemSlotsType, typeof MENUITEM_KEY_COMPONENT, Theme>;
+export type MenuItemStyles = M4LOverridesStyleRules<MenuItemSlotsType, typeof MENUITEM_KEY_COMPONENT, Theme>;

package/components/mui_extended/Popover/Popover.js

@@ -34,6 +34,9 @@ const Popover = (props) => {
         anchorOrigin,
         transformOrigin,
         transitionDuration: 0,
+        TransitionProps: {
+          timeout: 0
+        },
         ...getPropDataTestId(POPOVER_PREFIX, PopoverSlots.root, instaceDataTestId),
         slotProps: {
           paper: {

package/components/mui_extended/TabContext/index.js

@@ -19,6 +19,6 @@ function TabProvider(props) {
   );
 }
 export {
-  TabProvider as T,
-  TabContext as a
+  TabContext as T,
+  TabProvider as a
 };

package/components/mui_extended/index.d.ts

@@ -27,3 +27,4 @@ export * from './TabContext';
 export * from './Typography/Typography';
 export * from './ToggleButton';
 export * from './ToggleIconButton';
+export * from './NavLink';

package/components/popups/components/PopupsProvider/contexts/PopupsContext/PopupsContext.js

@@ -7,7 +7,7 @@ import { useModuleDictionary } from "@m4l/core";
 import { c as createPopupsStore } from "./store.js";
 const PopupsContext = createContext(null);
 function PopupsProvider(props) {
-  const { children, initialPopups, baseZindex = 0, storeId, containerElement } = props;
+  const { children, initialPopups, baseZindex = 0, storeId, getContainerElement } = props;
   const { getLabel } = useModuleDictionary();
   const isFirstRender = useFirstRender([getLabel]);
   const popupsStoreRef = useRef();
@@ -16,7 +16,7 @@ function PopupsProvider(props) {
       getLabel,
       baseZindex,
       storeId,
-      containerElement
+      getContainerElement
     });
     popupsStoreRef.current?.getState().popupsActions.init(initialPopups || []);
   }
@@ -33,6 +33,6 @@ function PopupsProvider(props) {
   return /* @__PURE__ */ jsx(PopupsContext.Provider, { value: popupsStoreRef.current, children: /* @__PURE__ */ jsx(React.Fragment, { children }) });
 }
 export {
-  PopupsProvider as P,
-  PopupsContext as a
+  PopupsContext as P,
+  PopupsProvider as a
 };

package/components/popups/components/PopupsProvider/contexts/PopupsContext/store.js

@@ -7,7 +7,7 @@ const createPopupsStore = (initProps) => {
     currentZindex: initProps.baseZindex,
     popupsIds: [],
     hashPopups: {},
-    getContainer: () => initProps.containerElement,
+    getContainer: initProps.getContainerElement,
     ...initProps
   };
   return createStore(

package/components/popups/components/PopupsProvider/contexts/PopupsContext/types.d.ts

@@ -144,13 +144,13 @@ export interface PopupsStateWithActions extends PopupsStore {
 }
 export type DefaultPopupsStoreProps = PopupsStore;
 export type InitialPopupsStoreProps = Pick<PopupsStore, 'getLabel' | 'baseZindex'> & Partial<DefaultPopupsStoreProps> & {
-    containerElement: HTMLElement;
+    getContainerElement: () => HTMLElement;
 };
 export interface PopupsProviderProps extends Pick<PopupsStore, 'baseZindex' | 'storeId'> {
     /**
      * Contenedor donde los popups serán renderizados
      */
-    containerElement: HTMLElement;
+    getContainerElement: () => HTMLElement;
     /**
      * Poopus abiertos desde el principio, puede servir para abrir los poupus previamente cargados en las cookies
      */

package/components/popups/components/PopupsProvider/hooks/usePopupsStore/index.js

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { useStore } from "zustand";
-import { a as PopupsContext } from "../../contexts/PopupsContext/PopupsContext.js";
+import { P as PopupsContext } from "../../contexts/PopupsContext/PopupsContext.js";
 function usePopupsStore(selector, equalityFn) {
   const context = useContext(PopupsContext);
   if (!context) {

package/contexts/index.d.ts

@@ -5,4 +5,3 @@ export type { FormInitialValues, FormStatusLoad, } from '../components/hook-form
 export { RHFormProvider, FormProviderCustom, useCustomForm, } from '../components/hook-form/RHFormContext';
 export { getFormComponentsDictionary } from '../components/hook-form/RHFormContext/dictionary';
 export { useAppearanceComponentStore, AppearanceComponentProvider, } from './AppearanceComponentContext';
-export * from './RealTimeContext';

package/hooks/index.d.ts

@@ -5,4 +5,6 @@ export { getformAddEditDictionary } from './useFormAddEdit/dictionary';
 export { useFormFocus } from './useFormFocus';
 export { useInterval } from './useInterval';
 export { useComponentSize } from './useComponentSize';
-export { useSvgColor } from './useSvgColor';
+export * from './useSvgColor';
+export { useFormReadyForUpdate } from './useFormReadyForUpdate';
+export { useStateRef } from './useStateRef';

package/hooks/useSvgColor/constants.d.ts

@@ -1,4 +1,5 @@
-export declare const REPLACEMENT_COLOR: RegExp;
+export declare const REPLACEMENT_PRYMARY_COLOR: RegExp;
+export declare const REPLACEMENT_SECONDARY_COLOR: RegExp;
 export declare const SVG_CACHE_PREFIX = "M4L_CACHE_SVG_";
 export declare const SKELETON_SVG_ICON: string;
 export declare const SVG_ICON_ERROR: string;

package/hooks/useSvgColor/constants.js

@@ -1,4 +1,5 @@
-const REPLACEMENT_COLOR = /#1E96DC/g;
+const REPLACEMENT_PRYMARY_COLOR = /#1E96DC/g;
+const REPLACEMENT_SECONDARY_COLOR = /#FFFFFE/g;
 const SVG_CACHE_PREFIX = "M4L_CACHE_SVG_";
 const SKELETON_SVG_ICON = "data:image/svg+xml;base64," + btoa(`<svg viewBox="0 0 640 640" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
     <circle
@@ -29,8 +30,9 @@ const SVG_ICON_ERROR = "data:image/svg+xml;base64," + btoa(`<svg viewBox="0 0 64
 </g>
 </svg>`);
 export {
-  REPLACEMENT_COLOR as R,
-  SKELETON_SVG_ICON as S,
-  SVG_CACHE_PREFIX as a,
-  SVG_ICON_ERROR as b
+  REPLACEMENT_PRYMARY_COLOR as R,
+  SVG_CACHE_PREFIX as S,
+  SKELETON_SVG_ICON as a,
+  SVG_ICON_ERROR as b,
+  REPLACEMENT_SECONDARY_COLOR as c
 };

package/hooks/useSvgColor/helpers.js

@@ -1,4 +1,4 @@
-import { a as SVG_CACHE_PREFIX, S as SKELETON_SVG_ICON } from "./constants.js";
+import { S as SVG_CACHE_PREFIX, a as SKELETON_SVG_ICON } from "./constants.js";
 function purgedColor(color) {
   return color.replace(/[#\s]/g, "");
 }
@@ -11,14 +11,14 @@ function getSVG(src, cacheKey, color, skeletonIcon = SKELETON_SVG_ICON) {
     return {
       src,
       cacheKey,
-      color,
+      primaryColor: color,
       isSkeleton: false,
       dataWithColor: window[cacheKeyColor]
     };
   }
   return {
     src: "",
-    color,
+    primaryColor: color,
     cacheKey,
     isSkeleton: true,
     dataWithColor: skeletonIcon

package/hooks/useSvgColor/types.d.ts

@@ -1,5 +1,6 @@
 export type SVGType = {
-    color: string;
+    primaryColor: string;
+    secondaryColor?: string;
     src: string;
     cacheKey?: string;
     isSkeleton: boolean;
@@ -9,4 +10,5 @@ export type SVGType = {
 export type UseSvgColorProps = Omit<SVGType, 'dataWithColor' | 'isSkeleton' | 'isError' | 'src'> & {
     src?: string;
     skeletonIcon?: string;
+    fallBackIcon?: string;
 };

package/hooks/useSvgColor/useSvgColor.js

@@ -1,20 +1,20 @@
 import { useState, useEffect } from "react";
-import { a as SVG_CACHE_PREFIX, b as SVG_ICON_ERROR, R as REPLACEMENT_COLOR } from "./constants.js";
+import { b as SVG_ICON_ERROR, S as SVG_CACHE_PREFIX, R as REPLACEMENT_PRYMARY_COLOR, c as REPLACEMENT_SECONDARY_COLOR } from "./constants.js";
 import { g as getSVG, p as purgedColor } from "./helpers.js";
 function useSvgColor(props) {
-  const { src, cacheKey, color, skeletonIcon } = props;
-  const [svg, setSvg] = useState(getSVG(src, cacheKey, color, skeletonIcon));
+  const { src, cacheKey, primaryColor, secondaryColor = "#FFFFFF", skeletonIcon, fallBackIcon = SVG_ICON_ERROR } = props;
+  const [svg, setSvg] = useState(getSVG(src, cacheKey, primaryColor, skeletonIcon));
   useEffect(() => {
     if (!src) {
       return;
     }
     const fetchData = async () => {
-      if (svg && svg.src === src && svg.cacheKey === cacheKey && svg.color === color) {
+      if (svg && svg.src === src && svg.cacheKey === cacheKey && svg.primaryColor === primaryColor && svg.secondaryColor === secondaryColor) {
         return;
       }
       let dataWithColor;
       let isError = false;
-      const cacheKeyColor = `${SVG_CACHE_PREFIX}_${cacheKey}_color_${purgedColor(color)}`;
+      const cacheKeyColor = `${SVG_CACHE_PREFIX}_${cacheKey}_primary_${purgedColor(primaryColor)}_secondary_${purgedColor(secondaryColor)}`;
       if (cacheKey && window[cacheKeyColor]) {
         dataWithColor = window[cacheKeyColor];
       } else {
@@ -34,17 +34,18 @@ function useSvgColor(props) {
           }
           if (!dataRaw) {
             isError = true;
-            dataRaw = SVG_ICON_ERROR;
+            dataRaw = fallBackIcon;
           }
         }
-        dataWithColor = "data:image/svg+xml;base64," + btoa((dataRaw || "").replace(REPLACEMENT_COLOR, color));
+        dataWithColor = "data:image/svg+xml;base64," + btoa((dataRaw || "").replace(REPLACEMENT_PRYMARY_COLOR, primaryColor).replace(REPLACEMENT_SECONDARY_COLOR, secondaryColor));
         if (cacheKey && !isError) {
           window[cacheKeyColor] = dataWithColor;
         }
       }
       setSvg({
         src,
-        color,
+        primaryColor,
+        secondaryColor,
         cacheKey,
         dataWithColor,
         isSkeleton: false,
@@ -52,7 +53,7 @@ function useSvgColor(props) {
       });
     };
     fetchData();
-  }, [src, color, cacheKey]);
+  }, [src, primaryColor, cacheKey, secondaryColor, fallBackIcon]);
   return svg;
 }
 export {

package/hooks/useTab/index.js

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { a as TabContext } from "../../components/mui_extended/TabContext/index.js";
+import { T as TabContext } from "../../components/mui_extended/TabContext/index.js";
 const useTab = () => {
   const context = useContext(TabContext);
   if (context === null) {

package/index.d.ts

@@ -7,3 +7,5 @@ export * from './contexts';
 export * from './hooks';
 export * from './@types/export.d';
 export * from './@types/types.d';
+export * from './utils';
+export * from '../.storybook/decorators';