@m4l/components 2.0.7 → 3.0.1

package/components/ToastContainer/types.d.ts

@@ -1,4 +1,40 @@
-import { ReactNode } from 'react';
-export interface ToastContainerProps {
-    children: ReactNode;
+import type { ReactNode } from 'react';
+import { ToastContentProps, ToastContainerProps as ToastContainerReactToastifyProps, ToastOptions } from 'react-toastify';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { Theme } from '@mui/material/styles';
+import { ToasterFunctionProps } from '@m4l/core';
+import type { ToastContainerSlots } from './slots';
+import { TOAST_KEY_COMPONENT } from './constants';
+export declare type ToastTypes = 'info' | 'success' | 'warning' | 'error' | 'default';
+export interface ToastMessageProps extends Partial<ToastContentProps>, ToasterFunctionProps {
+    type?: ToastTypes;
+    toastId?: ToastOptions['toastId'];
+    containerId?: ToastOptions['containerId'];
+    autoClose?: ToastOptions['autoClose'];
 }
+export interface ToastContainerProps extends Omit<ToastContainerReactToastifyProps, 'containerId'> {
+    /**
+     * Se utiliza para identificar el `<ToastContainer />` cuando se trabaja con varios contenedores.
+     * También se utiliza para establecer el atributo `id`
+     */
+    containerId: Required<ToastOptions['containerId']>;
+    /**
+     * Cuando es `true` el mensaje sale con position `fixed`, útil para usar a nivel general de toda la aplicación.
+     * Cuando es `false` el mensaje sale con position `sticky`, útil para usar a nivel de ventana
+     *
+     * @default true
+     */
+    fixed?: boolean;
+    /** Key único para las pruebas del componente. */
+    dataTestId?: string;
+    children?: ReactNode;
+}
+export interface TriggerToast {
+    props: ToasterFunctionProps;
+    toastOptions: ToastOptions;
+    containerId: ToastOptions['containerId'];
+    type?: ToastOptions['type'];
+}
+export declare type ToastContainerOwnerState = ToastContainerProps;
+export declare type ToastContainerSlotsType = keyof typeof ToastContainerSlots;
+export declare type ToastContainerStyles = Partial<OverridesStyleRules<ToastContainerSlotsType, typeof TOAST_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/animate/LoadingScreen/{index.31af02f8.js → index-CzDq3A0i.js}

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { alpha } from "@mui/material/styles";
 import { Box } from "@mui/material";
-import { a4 as RootStyle } from "../../../styles/index.ccd8acc4.js";
+import { a4 as RootStyle } from "../../../styles/index-Cc9p_h7i.js";
 function LoadingScreen(props) {
   const { isDashboard, variant = "fullpage", ...other } = props;
   return /* @__PURE__ */ jsx(Fragment, { children: !isDashboard && /* @__PURE__ */ jsxs(RootStyle, { variant, ...other, children: [

package/components/animate/MotionContainer/{index.3032bd8f.js → index-eartnWyO.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { Box } from "@mui/material";
-import { v as varContainer } from "../variants/container.11f82b76.js";
+import { v as varContainer } from "../variants/container-Dmpr6tg5.js";
 function MotionContainer({ animate, action = false, children, ...other }) {
   if (action) {
     return /* @__PURE__ */ jsx(

package/components/animate/MotionLazyContainer/{index.d2902a6c.js → index-Be8osTiG.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { LazyMotion } from "framer-motion";
-const loadFeatures = () => import("../features.0fbf41e1.js").then((res) => res.default);
+const loadFeatures = () => import("../features-BbnE33u3.js").then((res) => res.default);
 function MotionLazyContainer({ children }) {
   return /* @__PURE__ */ jsx(LazyMotion, { strict: true, features: loadFeatures, children });
 }

package/components/animate/PropagateLoader/{index.a9da8d00.js → index-Bkq8V2SN.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useTheme } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { P as PropagateLoader$1 } from "../../../react-spinners.342a6578.js";
+import { P as PropagateLoader$1 } from "../../../react-spinners-TpKN9lZg.js";
 const WrapperPropageteLoader = styled("div")(({ theme }) => ({
   right: 0,
   bottom: 0,

package/components/animate/{index.160607f3.js → index-mH4o-crX.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { m } from "framer-motion";
 import { forwardRef, useRef } from "react";
 import { IconButton, Box } from "@mui/material";
-import { a5 as AnimatedScrollRoot } from "../../styles/index.ccd8acc4.js";
+import { a5 as AnimatedScrollRoot } from "../../styles/index-Cc9p_h7i.js";
 const varSmall = {
   hover: { scale: 1.1 },
   tap: { scale: 0.95 }

package/components/animate/variants/{bounce.784aaaaa.js → bounce-DanQqHAX.js}

@@ -1,10 +1,11 @@
-import { v as varTranEnter, a as varTranExit } from "./transition.bd46b9ce.js";
+import { v as varTranEnter, a as varTranExit } from "./transition-B9W5SWTa.js";
 const varBounce = (props) => {
   const durationIn = props?.durationIn;
   const durationOut = props?.durationOut;
   const easeIn = props?.easeIn;
   const easeOut = props?.easeOut;
   return {
+    // IN
     in: {
       initial: {},
       animate: {
@@ -77,6 +78,7 @@ const varBounce = (props) => {
         transition: varTranExit({ durationOut, easeOut })
       }
     },
+    // OUT
     out: {
       animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] }
     },

package/components/animate/variants/{fade.b561c0fc.js → fade-CAOJNn06.js}

@@ -1,4 +1,4 @@
-import { v as varTranEnter, a as varTranExit } from "./transition.bd46b9ce.js";
+import { v as varTranEnter, a as varTranExit } from "./transition-B9W5SWTa.js";
 const varFade = (props) => {
   const distance = props?.distance || 120;
   const durationIn = props?.durationIn;
@@ -6,6 +6,7 @@ const varFade = (props) => {
   const easeIn = props?.easeIn;
   const easeOut = props?.easeOut;
   return {
+    // IN
     in: {
       initial: { opacity: 0 },
       animate: { opacity: 1, transition: varTranEnter },
@@ -31,6 +32,7 @@ const varFade = (props) => {
       animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
       exit: { x: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) }
     },
+    // OUT
     out: {
       initial: { opacity: 1 },
       animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },

package/components/areas/components/AreasAdmin/{index.cb60f940.js → index-qqSduaty.js}

@@ -1,35 +1,36 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { u as useAreasStore } from "../../hooks/useAreas/index.ba948f80.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index-o0DvT3xZ.js";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { useState, useRef, useMemo } from "react";
 import * as Yup from "yup";
 import clsx from "clsx";
 import { generateUtilityClasses, useTheme } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.ebfbb70f.js";
-import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants.66529246.js";
-import { I as ICONS } from "../../icons.8266ccc8.js";
-import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { a6 as EditAreaHeader, a7 as AreasAdminRoot } from "../../../../styles/index.ccd8acc4.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index-DiMrtgIu.js";
+import { A as AREAS_ADMIN_CLASS_NAME } from "../../constants-rqODZNZe.js";
+import { I as ICONS } from "../../icons-CwFr-alN.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary-YUsP9beq.js";
+import { a6 as EditAreaHeader, a7 as AreasAdminRoot } from "../../../../styles/index-Cc9p_h7i.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.c24bd476.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.acc30d9b.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.5b124af3.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.ea4c273b.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.c1185f46.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.185199da.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.caf17392.js";
-import { P as Popover } from "../../../mui_extended/Popover/index.1fafd106.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.61dd3fc6.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.45b8db89.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index-CUz70BPj.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index-B4a0h0fX.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index-Cz7BMTLe.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index-B_vOmNZT.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index-BlaMdPmp.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index-DGooFqVu.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index-BfDbi0cC.js";
+import { P as Popover } from "../../../mui_extended/Popover/index-C6_2t4L1.js";
+import { T as Typography } from "../../../mui_extended/Typography/index-DKPqV11f.js";
+import { S as ScrollBar } from "../../../ScrollBar/index-BpTjE7o3.js";
 import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import { B as Button } from "../../../mui_extended/Button/index.ca15c36e.js";
-import { I as Icon } from "../../../Icon/index.0f315ccd.js";
-import { u as useOnClickOutside } from "../../index.4cc6a221.js";
+import { B as Button } from "../../../mui_extended/Button/index-DlzpoczE.js";
+import { I as Icon } from "../../../Icon/index-CedboS6y.js";
+import { u as useOnClickOutside } from "../../index-B_Odny9h.js";
 const areasAdminClasses = generateUtilityClasses(
   AREAS_ADMIN_CLASS_NAME,
   [
+    /* elements */
     "root",
     "rootContent",
     "areaChipRoot",
@@ -50,6 +51,7 @@ const areasAdminClasses = generateUtilityClasses(
     "areasPopoverListWindows",
     "areasPopoverListWindowsIcon",
     "areaContentChips",
+    /* states or variants of elements */
     "selected",
     "isMobile",
     "disabled",

package/components/areas/components/AreasViewer/classes/index.d.ts

@@ -1,5 +1,5 @@
 import { AreasViewerClasses } from './types';
 import { OwnerState } from '../../../contexts/AreasContext/types';
 export declare const areasViewerClasses: AreasViewerClasses;
-export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "resizeHandle" | "windowLinearProgressBar" | "windowContent" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "windowToastiesContainer" | "windowToastiesContainerTostys" | "windowToastyMeesageButtonsContainer" | "windowToastyMessage" | "windowToastyButtonsContainer" | "windowToastyPin" | "windowToastyClose" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "panelWindowsSeparator" | "loaderContainer" | "containerComponent" | "windowToastyContainer", string>;
+export declare const useAreasViewerUtilityClasses: (ownerState: OwnerState) => Record<"root" | "resizeHandle" | "windowLinearProgressBar" | "windowContent" | "areaRoot" | "areasLoadingErrorRoot" | "areasLoadingErrorLoading" | "areasLoadingError" | "areasLoadingErrorIcon" | "areasLoadingErrorTitle" | "areasLoadingErrorDescription" | "areasLoadingErrorDivider" | "areaGridLayoutPanelContainer" | "areaGridLayout" | "areaGridLayoutPopupsContainer" | "areasWindowPopUpList" | "windowRoot" | "windowRootContainer" | "windowHeader" | "windowHeaderTitle" | "windowHeaderMainActions" | "windowHeaderCancelHandle" | "windowLinearProgressRoot" | "windowPopupRoot" | "windowModalRoot" | "selectedWindow" | "panelWindowsRoot" | "panelWindowsButtonContainer" | "panelWindowsSeparator" | "loaderContainer" | "containerComponent", string>;
 export declare type ViwerClasses = ReturnType<typeof useAreasViewerUtilityClasses>;

package/components/areas/components/AreasViewer/classes/types.d.ts

@@ -17,14 +17,6 @@ export interface AreasViewerClasses {
     windowLinearProgressBar: string;
     windowPopupRoot: string;
     windowModalRoot: string;
-    windowToastiesContainer: string;
-    windowToastiesContainerTostys: string;
-    windowToastyContainer: string;
-    windowToastyMeesageButtonsContainer: string;
-    windowToastyMessage: string;
-    windowToastyButtonsContainer: string;
-    windowToastyPin: string;
-    windowToastyClose: string;
     panelWindowsRoot: string;
     panelWindowsButtonContainer: string;
     panelWindowsSeparator: string;

package/components/areas/components/AreasViewer/{index.350ee032.js → index-D5If8gFK.js}

@@ -1,38 +1,39 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { a8 as WindowRoot, a9 as WrapperWindowModal, aa as AreasViewerRoot } from "../../../../styles/index.ccd8acc4.js";
+import { a8 as WindowRoot, a9 as WrapperWindowModal, aa as AreasViewerRoot } from "../../../../styles/index-Cc9p_h7i.js";
 import { shallow } from "zustand/shallow";
 import React__default, { useMemo, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.ba948f80.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index-o0DvT3xZ.js";
 import { generateUtilityClasses, Skeleton } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../../../utils/index.ebfbb70f.js";
-import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
+import { g as getComponentUtilityClass } from "../../../../utils/index-DiMrtgIu.js";
+import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants-rqODZNZe.js";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.c24bd476.js";
+import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index-CUz70BPj.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as ICONS } from "../../icons.8266ccc8.js";
-import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.caf17392.js";
-import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.6d1605ff.js";
-import { I as Icon } from "../../../Icon/index.0f315ccd.js";
-import { T as Typography } from "../../../mui_extended/Typography/index.61dd3fc6.js";
-import { M as MFLoader } from "../../../MFLoader/index.cc350d72.js";
-import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.992ae7a3.js";
-import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.3d9ad0ad.js";
-import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.4092bb69.js";
-import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
-import { g as getNameDataTestId } from "../../../../test/getNameDataTestId.0faeade8.js";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.1a5c5df1.js";
-import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.15d0ca85.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.dc0a1ce0.js";
+import { I as ICONS } from "../../icons-CwFr-alN.js";
+import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary-YUsP9beq.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index-BfDbi0cC.js";
+import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index-Do7CKcow.js";
+import { I as Icon } from "../../../Icon/index-CedboS6y.js";
+import { T as Typography } from "../../../mui_extended/Typography/index-DKPqV11f.js";
+import { M as MFLoader } from "../../../MFLoader/index-Bcg9TXnJ.js";
+import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index-DkE30fhm.js";
+import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index-22c6E7vK.js";
+import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock-CF-669v-.js";
+import { g as getNameDataTestId } from "../../../../test/getNameDataTestId-BaBTWhBr.js";
+import { c as createToaster, T as ToastContainer } from "../../../ToastContainer/index-B5VGIn45.js";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index-Dyj8tCdG.js";
+import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index-OWN-RzRq.js";
+import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index-bpKDnaCd.js";
 import { useLocation } from "react-router-dom";
-import { L as LoadingError } from "../../../LoadingError/index.c5a70390.js";
-import { c as cjs } from "../../../../react-draggable.df62ccbd.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.0ffd46bc.js";
+import { L as LoadingError } from "../../../LoadingError/index-CNh7b1ew.js";
+import { a as Draggable } from "../../../../react-draggable-DsCPdgQP.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index-ObbOlXFx.js";
 const areasViewerClasses = generateUtilityClasses(
   AREAS_VIEWER_CLASS_NAME,
   [
+    /* elements */
     "root",
     "areaRoot",
     "areaGridLayoutPanelContainer",
@@ -51,14 +52,6 @@ const areasViewerClasses = generateUtilityClasses(
     "windowLinearProgressRoot",
     "windowLinearProgressBar",
     "windowRootContainer",
-    "windowToastiesContainer",
-    "windowToastiesContainerTostys",
-    "windowToastyContainer",
-    "windowToastyMeesageButtonsContainer",
-    "windowToastyMessage",
-    "windowToastyButtonsContainer",
-    "windowToastyPin",
-    "windowToastyClose",
     "panelWindowsRoot",
     "panelWindowsButtonContainer",
     "panelWindowsSeparator",
@@ -66,6 +59,8 @@ const areasViewerClasses = generateUtilityClasses(
     "resizeHandle",
     "loaderContainer",
     "containerComponent",
+    /* states or variants of elements */
+    // 'active',
     "selected",
     "colapsed",
     "selectedWindow",
@@ -111,14 +106,6 @@ const useAreasViewerUtilityClasses = (ownerState) => {
     windowPopupRoot: ["windowPopupRoot"],
     windowModalRoot: ["windowModalRoot"],
     selectedWindow: ["selectedWindow"],
-    windowToastiesContainer: ["windowToastiesContainer"],
-    windowToastiesContainerTostys: ["windowToastiesContainerTostys"],
-    windowToastyContainer: ["windowToastiesContainer"],
-    windowToastyMeesageButtonsContainer: ["windowToastyMeesageButtonsContainer"],
-    windowToastyMessage: ["windowToastyMessage"],
-    windowToastyButtonsContainer: ["windowToastyButtonsContainer"],
-    windowToastyPin: ["windowToastyPin"],
-    windowToastyClose: ["windowToastyClose"],
     panelWindowsRoot: ["panelWindowsRoot"],
     panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
     panelWindowsSeparator: ["panelWindowsSeparator"],
@@ -208,6 +195,7 @@ function getMenuActions(options) {
       onClick: () => saveModuleCookies(windowId),
       disabled: false,
       visibility: "normal",
+      /* dictionaryId: getAreasDictionary(DICCTIONARY.label_persist_module_cookies), */
       label: getLabel(getAreasDictionary(DICCTIONARY.label_persist_module_cookies)),
       key: "save_cookies"
     };
@@ -218,6 +206,7 @@ function getMenuActions(options) {
       disabled: false,
       visibility: "normal",
       label: getLabel(getAreasDictionary(DICCTIONARY.label_reset_module_cookies)),
+      /* dictionaryId: getAreasDictionary(DICCTIONARY.label_reset_module_cookies), */
       key: "reset_cookes"
     };
     menuActions.push(resetCookiesAction);
@@ -279,6 +268,7 @@ function Header(props) {
       window.version,
       window.windowOptions,
       window.fnQueryClose
+      // window.colapsed,
     ];
   }, shallow);
   const { saveModuleCookies, resetModuleCookies } = useAreasStore(
@@ -405,65 +395,6 @@ const Component = (props) => {
   return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx("div", { className: areasViewerClasses.containerComponent, children: typeof component === "function" ? component({ windowTools, dynamicMFStore }) : component }) }) });
 };
 React__default.memo(Component);
-function Toasty(props) {
-  const { windowId, toastyId } = props;
-  const toasty = useAreasStore(
-    (state) => state.hashWindows[windowId].hashToasties[toastyId],
-    shallow
-  );
-  const { pinToast: pinToasty, closeToast: closeToasty } = useAreasStore(
-    (state) => state.windowActions,
-    shallow
-  );
-  const { host_static_assets, environment_assets } = useEnvironment();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(areasViewerClasses.windowToastyContainer, areasViewerClasses[toasty.type]),
-      children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyMeesageButtonsContainer, children: [
-        /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyMessage, children: [
-          toasty.timer ? /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: toasty.percentExecuted }) : null,
-          toasty.message
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyButtonsContainer, children: [
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              className: clsx(
-                areasViewerClasses.windowToastyPin,
-                toasty.timer ? null : areasViewerClasses.pinIn
-              ),
-              onClick: () => {
-                pinToasty(windowId, toastyId);
-              },
-              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_PIN}`
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              className: areasViewerClasses.windowToastyClose,
-              onClick: () => {
-                closeToasty(windowId, toastyId);
-              },
-              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.TOASTY_CLOSE}`
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
-function Toasties(props) {
-  const { windowId } = props;
-  const tosties = useAreasStore((state) => state.hashWindows[windowId].toasties, shallow);
-  if (tosties.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowToastiesContainer, children: /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowToastiesContainerTostys, children: tosties.map((t) => {
-    return /* @__PURE__ */ jsx(Toasty, { windowId, toastyId: t.id }, t.id);
-  }) }) });
-}
 const Window = (props) => {
   const { areaId, windowId } = props;
   const [emergeType, moduleId, winType] = useAreasStore((state) => {
@@ -495,7 +426,6 @@ const Window = (props) => {
     close,
     startProgress,
     stopProgress,
-    toast,
     setFnQueryClose
   } = useAreasStore((state) => state.windowActions, shallow);
   const { selectLayout } = useAreasStore((state) => state.areaActions, shallow);
@@ -522,9 +452,7 @@ const Window = (props) => {
       setFnQueryClose: (fnQueryClose) => {
         setFnQueryClose(windowId, fnQueryClose);
       },
-      toast: (toastyOptions) => {
-        toast(windowId, toastyOptions);
-      }
+      toast: createToaster(windowId)
     }),
     []
   );
@@ -557,15 +485,20 @@ const Window = (props) => {
       } : {},
       children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowRootContainer, children: [
         /* @__PURE__ */ jsx(Header, { areaId, windowId, emergeType }),
-        /* @__PURE__ */ jsx(Toasties, { windowId }),
+        /* @__PURE__ */ jsx(ToastContainer, { fixed: false, position: "top-center", containerId: windowId }),
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: clsx(
               areasViewerClasses.windowContent
+              // colapsed ? areasViewerClasses.colapsed : null,
             ),
             children: [
-              status === "init" ? /* @__PURE__ */ jsx(Fragment, { children: "Cargando..." }) : null,
+              status === "init" ? (
+                /* validar uso */
+                /* Todo: Validar agregar nuevo componente de carga. */
+                /* @__PURE__ */ jsx(Fragment, { children: "Cargando..." })
+              ) : null,
               status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(
                 MemonizedMicroFrontend,
                 {
@@ -793,7 +726,7 @@ const WindowModal = (props) => {
   const isDesktop = useResponsiveDesktop();
   const DragabblePaperComponent = (_props) => {
     return /* @__PURE__ */ jsx(
-      cjs.exports,
+      Draggable,
       {
         handle: ".m4l_draggable_handle",
         bounds: "parent",

package/components/areas/contexts/AreasContext/helper.d.ts

@@ -1,6 +1,6 @@
 import { WritableDraft } from 'immer/dist/internal';
 import type { Area, AreasStateWithActions } from './types';
-import type { WindowState, WindowStateProps } from '../../types';
+import type { WindowState } from '../../types';
 export declare const PADDING_GRIDLAYOUT = 11;
 export declare const MARGIN_GRIDLAYOUT = 11;
 export declare const DEBOUCED_SAVE_TIME = 500;
@@ -43,7 +43,7 @@ export declare const RESPONSIVE_ROW_HEIGHTS: {
     lg: number;
 };
 import { Layouts } from '../../../GridLayout/types';
-export declare const DEFAULT_WINDOW: Pick<WindowState, 'status' | 'moduleActions' | 'cookies' | 'loading' | 'toasties' | 'toastyCount' | 'hashToasties'>;
+export declare const DEFAULT_WINDOW: Pick<WindowState, 'status' | 'moduleActions' | 'cookies' | 'loading'>;
 export declare const DEFAULT_AREA: Omit<Area, 'id' | 'name' | 'viewMode'>;
 /**
  * @description Función de apoyo que crea un área de trabajo,
@@ -63,11 +63,8 @@ export declare const getCurrentArea: (state: WritableDraft<AreasStateWithActions
 export declare const getParmsFromValue: (key: string, data: []) => any;
 export declare function setColapsedLayoutBreakPoints(state: WritableDraft<Area>, layoutId: string, colapsed: boolean): void;
 export declare function deleteLayoutFromBreakPoints(state: WritableDraft<Area>, layoutId?: string): void;
-export declare function purgeToastsWindow(state: WritableDraft<AreasStateWithActions>, windowId: string): void;
-export declare function purgeToastsArea(state: WritableDraft<AreasStateWithActions>, areaId: string): void;
 export declare function getDataFromResponse(data: any, state: WritableDraft<AreasStateWithActions>, areaId: string): {
     newBreakPointsLayouts: Layouts;
     newHashLayoutItems: string[];
 };
 export declare function getCookiesContainer(data: any, containerId: string): Record<string, any>;
-export declare const verifyRemoveToasty: (state: WritableDraft<WindowStateProps>, toastyId: number, forceRemove?: boolean | undefined) => void;