@m4l/components 0.2.25 → 0.2.27

package/components/SideBar/subcomponents/ContentDesktop/subcomponents/CollapseButton/index.d.ts

@@ -11,5 +11,5 @@ declare type CollapseButtonProps = {
  * @param {VoidFunction} props.collapsed - Variable que guarda el estado de colapsado en desktop
  * @returns
  */
-export default function CollapseButton(props: CollapseButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function FooterSidebar(_props: CollapseButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/SideBar/subcomponents/ContentDesktop/subcomponents/ContentComponent/index.d.ts

@@ -0,0 +1 @@
+export declare const ContentComponent: () => import("react/jsx-runtime").JSX.Element;

package/components/SideBar/types.d.ts

@@ -9,8 +9,6 @@ export interface LogoConainerProps {
  * Propiedades para el componente WrapperSideBar.
  */
 export interface WrapperSideBarProps {
-    /** Ancho de la barra lateral.*/
-    width: string | number;
     /**  Indica si la barra lateral está visible.*/
     visible: boolean;
 }
@@ -47,8 +45,7 @@ export interface SideBarProps {
     visible: boolean;
     companyLogoSmallUrl?: string;
     companyLogoNormalUrl?: string;
-    collapsedWidht?: string | number;
-    unCollapsedWidht?: string | number;
+    expandedWidth?: string | number;
     companyName?: string;
     variantStyle?: 'variantDefault' | 'variantComercial';
 }

package/components/SplitLayout/{index.30fd5861.js → index.3856385c.js}

@@ -1,5 +1,4 @@
-import { styled } from "@mui/material/styles";
-import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import clsx from "clsx";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";

package/components/ToastContainer/{index.97fdba82.js → index.b42aca02.js}

@@ -1,11 +1,11 @@
 import { styled, generateUtilityClasses } from "@mui/material";
-import { A } from "../../node_modules.71622512.js";
+import { A } from "../../node_modules.47f7709b.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
 import { useEnvironment } from "@m4l/core";
 import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.b920baf8.js";
+import { I as Icon } from "../Icon/index.58eaf354.js";
 const ToastContainerRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LToastContainer?.styleOverrides
 }));

package/components/areas/components/AreasAdmin/{index.e4f0ccc1.js → index.6d902d47.js}

@@ -1,31 +1,30 @@
-import { u as useAreasStore } from "../../hooks/useAreas/index.b18fe111.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.febe901b.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 { generateUtilityClasses, styled, useTheme } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../../utils/index.de903261.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 { styled } from "@mui/material/styles";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { shallow } from "zustand/shallow";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { M as MenuActions } from "../../../mui_extended/MenuActions/index.fa7c26a5.js";
-import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.7769076a.js";
-import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.fbb29ee1.js";
-import { A as Actions } from "../../../CommonActions/components/Actions/index.2f6286eb.js";
-import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.de862adf.js";
-import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.79fc2386.js";
-import { I as IconButton } from "../../../mui_extended/IconButton/index.9ea23f87.js";
-import { P as Popover } from "../../../mui_extended/Popover/index.b3eca6b1.js";
+import { M as MenuActions } from "../../../mui_extended/MenuActions/index.fdea20e7.js";
+import { R as RHFormProvider } from "../../../../contexts/RHFormContext/index.7b2a8723.js";
+import { R as RHFTextField } from "../../../hook-form/RHFTextField/index.d4192912.js";
+import { A as Actions } from "../../../CommonActions/components/Actions/index.16946bfd.js";
+import { A as ActionCancel } from "../../../CommonActions/components/ActionCancel/index.bd767c14.js";
+import { A as ActionIntro } from "../../../CommonActions/components/ActionIntro/index.9bd56cd0.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.32fc9419.js";
+import { P as Popover } from "../../../mui_extended/Popover/index.d85de73b.js";
 import { T as Typography } from "../../../mui_extended/Typography/index.379dd374.js";
-import { S as ScrollBar } from "../../../ScrollBar/index.010f1b9d.js";
+import { S as ScrollBar } from "../../../ScrollBar/index.7dfc2f29.js";
 import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import { B as Button } from "../../../mui_extended/Button/index.e520bd15.js";
-import { I as Icon } from "../../../Icon/index.b920baf8.js";
+import { B as Button } from "../../../mui_extended/Button/index.81367a73.js";
+import { I as Icon } from "../../../Icon/index.58eaf354.js";
 import { u as useOnClickOutside } from "../../index.4cc6a221.js";
 const areasAdminClasses = generateUtilityClasses(AREAS_ADMIN_CLASS_NAME, [
   "root",
@@ -240,7 +239,7 @@ const AreaChip = (props) => {
         children: [/* @__PURE__ */ jsx(IconButton, {
           className: areasAdminClasses.areaChipEditButton,
           src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
-          size: "extraSmall",
+          size: "small",
           onClick: (e) => {
             handlerOpenPopoverEditArea(e);
           },
@@ -248,7 +247,7 @@ const AreaChip = (props) => {
         }), /* @__PURE__ */ jsx(IconButton, {
           className: areasAdminClasses.areaChipDeleteButton,
           src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
-          size: "extraSmall",
+          size: "small",
           onClick: (e) => {
             onClickDeleteArea(e);
           },
@@ -433,14 +432,14 @@ const ChipMobile = (props) => {
       children: [/* @__PURE__ */ jsx(IconButton, {
         className: areasAdminClasses.areaChipEditButton,
         src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.EDIT_AREA}`,
-        size: "extraSmall",
+        size: "small",
         onClick: (e) => {
           handlerOpenPopoverEditArea(e);
         }
       }), /* @__PURE__ */ jsx(IconButton, {
         className: areasAdminClasses.areaChipDeleteButton,
         src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS.DELETE_AREA}`,
-        size: "extraSmall",
+        size: "small",
         onClick: (e) => {
           onClickDeleteArea(e);
         }

package/components/areas/components/AreasViewer/{index.f87c63ca.js → index.2a286dfa.js}

@@ -1,36 +1,35 @@
-import { styled } from "@mui/material/styles";
+import { generateUtilityClasses, styled, Skeleton, Dialog } from "@mui/material";
 import { r as react_resizable_css } from "../../../../react-resizable.ee028152.js";
-import { generateUtilityClasses, Skeleton, Dialog } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../../utils/index.de903261.js";
 import { a as AREAS_VIEWER_CLASS_NAME } from "../../constants.66529246.js";
 import { shallow } from "zustand/shallow";
-import React__default, { useMemo, useEffect } from "react";
+import React__default, { useMemo, useRef, useEffect } from "react";
 import clsx from "clsx";
-import { u as useAreasStore } from "../../hooks/useAreas/index.b18fe111.js";
+import { u as useAreasStore } from "../../hooks/useAreas/index.febe901b.js";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.fa7c26a5.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { a as MemonizedMenuActions } from "../../../mui_extended/MenuActions/index.fdea20e7.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useResponsiveDesktop, useResponsiveRelativeStore, ResponsiveRelativeProvider } 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.9ea23f87.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.32fc9419.js";
 import { L as LinearProgressIndeterminate } from "../../../LinearProgressIndeterminate/index.a0ad2d9e.js";
-import { I as Icon } from "../../../Icon/index.b920baf8.js";
+import { I as Icon } from "../../../Icon/index.58eaf354.js";
 import { T as Typography } from "../../../mui_extended/Typography/index.379dd374.js";
-import { M as MFLoader } from "../../../MFLoader/index.52096ea5.js";
+import { M as MFLoader } from "../../../MFLoader/index.f6a46c70.js";
 import { W as WindowToolsMFProvider } from "../../contexts/WindowToolsMFContext/index.8f3e2a04.js";
 import { D as DynamicMFParmsProvider } from "../../contexts/DynamicMFParmsContext/index.1607c78e.js";
 import { L as LinearProgress } from "../../../mui_extended/LinearProgress/index.c92b9ba9.js";
 import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.86c553a9.js";
 import { g as getNameDataTestId } from "../../../../test/getNameDataTestId.14875ec7.js";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.3e3d8c62.js";
-import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.7669a2cd.js";
-import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.0fd1b7f8.js";
+import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "../../contexts/AreasContext/index.3eb6b2a4.js";
+import { w as withSizeProvider } from "../../../GridLayout/subcomponents/SizeProvider/index.06986ab4.js";
+import { R as Responsive } from "../../../GridLayout/subcomponents/Responsive/index.d2ec9ddb.js";
 import { useLocation } from "react-router-dom";
-import { L as LoadingError } from "../../../LoadingError/index.123e16f8.js";
+import { L as LoadingError } from "../../../LoadingError/index.4f4724c4.js";
 import { c as cjs } from "../../../../react-draggable.ee21cb7e.js";
-import { R as ResizeableWindow } from "../../../Resizeable/index.0eb66c37.js";
+import { R as ResizeableWindow } from "../../../Resizeable/index.8db8f77d.js";
 const areasViewerClasses = generateUtilityClasses(AREAS_VIEWER_CLASS_NAME, [
   "root",
   "areaRoot",
@@ -238,151 +237,72 @@ const AreasViewerRoot = styled("div")`
 
     ${(props) => props.theme.components?.M4LAreasViewer?.styleOverrides}
 `;
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  position: "relative",
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  height: "60px",
-  minHeight: "60px",
-  " > span": {
-    marginRight: "12px"
-  },
-  "& > h5": {
-    paddingRight: theme.spacing(3),
-    borderRight: `1px solid ${theme.palette.divider}`
-  },
-  " > nav": {
-    marginRight: "12px",
-    flexGrow: 1
-  },
-  "& .splitactions.Mui-disabled": {
-    color: theme.palette.primary.main
-  },
-  "& svg ": {
-    width: "20px",
-    height: "20px"
-  }
-}));
-const Wrapper = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  padding: `0 0`,
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  minHeight: "60px"
-}));
-const ModuleTitleContent = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  gridGap: theme.spacing(1.75),
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: "repeat(3, auto)"
-  }
-}));
-const ModuleTitle = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: `${theme.spacing(3)} auto`,
-  gridGap: theme.spacing(2),
-  alignItems: "center",
-  width: "auto",
-  height: "auto"
-}));
-const Separator = styled("div")(({
-  theme
-}) => ({
-  display: "none",
-  alignItems: "center",
-  width: "1px",
-  background: theme.palette.divider,
-  height: "100%",
-  margin: `0 ${theme.spacing(2)}`,
-  [theme.breakpoints.up("sm")]: {
-    display: "flex"
-  }
-}));
-const Breadcrumbs = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  alignItems: "center",
-  gridTemplateColumns: `repeat(3, auto)`,
-  gridGap: theme.spacing(2)
-}));
-const ModuleActions = styled("div")(({
-  theme
-}) => ({
-  display: "grid",
-  gridTemplateColumns: "auto",
-  alignItems: "center",
-  width: "auto",
-  height: "auto",
-  [theme.breakpoints.up("sm")]: {
-    gridTemplateColumns: `repeat(3, ${theme.spacing(3)})`,
-    gridGap: theme.spacing(2)
-  }
-}));
-function SKTModuleHeader() {
-  const isDesktop = useResponsiveDesktop();
-  return /* @__PURE__ */ jsxs(Wrapper, {
-    id: "HeaderSkeleton",
-    children: [/* @__PURE__ */ jsxs(ModuleTitleContent, {
-      children: [/* @__PURE__ */ jsxs(ModuleTitle, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 120,
-          height: 14
-        })]
-      }), /* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Breadcrumbs, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: 68,
-          height: 14
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 4,
-          height: 4
-        }), /* @__PURE__ */ jsx(Skeleton, {
+function WindowHeaderSkeleton(props) {
+  const {
+    colapsed
+  } = props;
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(areasViewerClasses.windowHeader),
+    children: /* @__PURE__ */ jsxs("div", {
+      className: areasViewerClasses.windowHeaderContent,
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        sx: {
+          margin: "0 5px",
+          minWidth: "18px",
+          minHeight: "18px"
+        }
+      }), /* @__PURE__ */ jsx("div", {
+        style: {
+          width: "100%"
+        },
+        children: /* @__PURE__ */ jsx(Skeleton, {
           variant: "text",
-          width: 68,
-          height: 14
-        })]
-      })]
-    }), /* @__PURE__ */ jsx(ModuleActions, {
-      children: isDesktop ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 24,
-          height: 24
-        })]
-      }) : /* @__PURE__ */ jsx(Skeleton, {
+          width: 80,
+          height: 16
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        className: areasViewerClasses.windowHeaderCancelHandle,
+        children: !colapsed && /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            sx: {
+              margin: "0 5px",
+              minWidth: "16px",
+              minHeight: "16px"
+            }
+          }), /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            sx: {
+              margin: "0 5px",
+              minWidth: "16px",
+              minHeight: "16px"
+            }
+          }), /* @__PURE__ */ jsx(Skeleton, {
+            variant: "circular",
+            sx: {
+              margin: "0 5px",
+              minWidth: "16px",
+              minHeight: "16px"
+            }
+          })]
+        })
+      }), /* @__PURE__ */ jsx(Skeleton, {
         variant: "circular",
-        width: 24,
-        height: 24
-      })
-    })]
+        sx: {
+          margin: "0 5px",
+          minWidth: "16px",
+          minHeight: "16px"
+        }
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        sx: {
+          margin: "0 5px",
+          minWidth: "16px",
+          minHeight: "16px"
+        }
+      })]
+    })
   });
 }
 function getMainActions(isDesktop, moduleActions) {
@@ -481,38 +401,6 @@ function MainActions(props) {
     })
   });
 }
-const WindowPopUpsList = (props) => {
-  const {
-    areaId,
-    windowId
-  } = props;
-  const windowsPopUps = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds.filter((li) => state.hashWindows[li].parentLayoutId === windowId && state.hashWindows[li].emergeType === "popup").map((lim) => {
-    const w = state.hashWindows[lim];
-    return {
-      i: w.windowId,
-      url_icon: w.url_icon,
-      title: w.title
-    };
-  }), shallow);
-  const {
-    maximizeLayout
-  } = useAreasStore((state) => state.areaActions);
-  const onTouched = (layoutId) => {
-    maximizeLayout(areaId, layoutId);
-  };
-  const menuActions = windowsPopUps ? windowsPopUps.map((element) => {
-    return {
-      onClick: () => onTouched(element.i),
-      label: element.title,
-      urlIcon: element.url_icon
-    };
-  }) : null;
-  if (menuActions && menuActions.length > 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  } else {
-    return null;
-  }
-};
 function Header(props) {
   const {
     areaId,
@@ -593,7 +481,7 @@ function Header(props) {
     e.stopPropagation();
   };
   if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
+    return /* @__PURE__ */ jsx(WindowHeaderSkeleton, {});
   }
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(areasViewerClasses.windowHeader, "m4l_draggable_handle"),
@@ -610,10 +498,7 @@ function Header(props) {
         className: areasViewerClasses.windowHeaderCancelHandle,
         children: [!colapsed && /* @__PURE__ */ jsx(MainActions, {
           windowId
-        }), !colapsed ? /* @__PURE__ */ jsx(WindowPopUpsList, {
-          areaId,
-          windowId
-        }) : null, !colapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(MemonizedMenuActions, {
+        }), !colapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(MemonizedMenuActions, {
           arrowType: "no-arrow",
           marginTop: "12px!important",
           marginLeft: "14px!important",
@@ -651,6 +536,8 @@ function Header(props) {
   });
 }
 const MicroFrontend = (props) => {
+  const breakPoint = useResponsiveRelativeStore((state) => state.breakPoint, shallow);
+  console.log("test breakPoint", breakPoint);
   return /* @__PURE__ */ jsx(MFLoader, {
     ...props
   });
@@ -845,6 +732,7 @@ const Window = (props) => {
   const selected = useAreasStore((state) => {
     return emergeType === "layout" ? state.hashAreas[areaId]?.currentLayoutId : state.hashAreas[areaId]?.currentPopUpId;
   }) === windowId;
+  const observedDivRef = useRef(null);
   const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
   const component = useAreasStore((state) => state.hashWindows[windowId]?.component, shallow);
   const loading = useAreasStore((state) => state.hashWindows[windowId]?.loading, shallow);
@@ -907,32 +795,43 @@ const Window = (props) => {
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId(AREAS_VIEWER_CLASS_NAME, "windowRoot", `${emergeType}`)
     } : {},
-    children: /* @__PURE__ */ jsxs("div", {
-      className: areasViewerClasses.windowRootContainer,
-      children: [/* @__PURE__ */ jsx(Header, {
-        areaId,
-        windowId,
-        emergeType
-      }), /* @__PURE__ */ jsx(Toasties, {
-        windowId
-      }), /* @__PURE__ */ jsxs("div", {
-        className: clsx(
-          areasViewerClasses.windowContent
-        ),
-        children: [status === "init" ? /* @__PURE__ */ jsx(Fragment, {
-          children: "Cargando..."
-        }) : null, status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(MemonizedMicroFrontend, {
-          moduleId,
-          dynamicMFStore,
-          windowTools,
-          ...mfProps
-        }) : /* @__PURE__ */ jsx(Component, {
-          moduleId,
-          dynamicMFStore,
-          windowTools,
-          component
-        }) : null]
-      })]
+    children: /* @__PURE__ */ jsx(ResponsiveRelativeProvider, {
+      observedDivRef,
+      children: /* @__PURE__ */ jsx("div", {
+        ref: observedDivRef,
+        className: "div-breakpoint-observer",
+        style: {
+          width: "100%",
+          height: "100%"
+        },
+        children: /* @__PURE__ */ jsxs("div", {
+          className: areasViewerClasses.windowRootContainer,
+          children: [/* @__PURE__ */ jsx(Header, {
+            areaId,
+            windowId,
+            emergeType
+          }), /* @__PURE__ */ jsx(Toasties, {
+            windowId
+          }), /* @__PURE__ */ jsxs("div", {
+            className: clsx(
+              areasViewerClasses.windowContent
+            ),
+            children: [status === "init" ? /* @__PURE__ */ jsx(Fragment, {
+              children: "Cargando..."
+            }) : null, status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(MemonizedMicroFrontend, {
+              moduleId,
+              dynamicMFStore,
+              windowTools,
+              ...mfProps
+            }) : /* @__PURE__ */ jsx(Component, {
+              moduleId,
+              dynamicMFStore,
+              windowTools,
+              component
+            }) : null]
+          })]
+        })
+      })
     })
   });
 };

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/subcomponents/WindowHeaderSkeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { WindowHeaderSkeletonProps } from './types';
+export declare function WindowHeaderSkeleton(props: WindowHeaderSkeletonProps): import("react/jsx-runtime").JSX.Element;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/subcomponents/WindowHeaderSkeleton/types.d.ts

@@ -0,0 +1,3 @@
+export interface WindowHeaderSkeletonProps {
+    colapsed?: boolean;
+}

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

@@ -1,8 +1,8 @@
 import { WritableDraft } from 'immer/dist/internal';
 import type { Area, AreasStateWithActions } from './types';
 import type { WindowState, WindowStateProps } from '../../types';
-export declare const PADDING_GRIDLAYOUT = 8;
-export declare const MARGIN_GRIDLAYOUT = 8;
+export declare const PADDING_GRIDLAYOUT = 10;
+export declare const MARGIN_GRIDLAYOUT = 10;
 export declare const DEBOUCED_SAVE_TIME = 500;
 export declare const THROTTLE_RESIZE_TIME = 300;
 export declare const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";

package/components/areas/contexts/AreasContext/{index.3e3d8c62.js → index.3eb6b2a4.js}

@@ -5,17 +5,17 @@ import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
 import { useHostTools, useModuleDictionary, useNetwork, useModuleSkeleton, EmitEvents } from "@m4l/core";
 import { devtools } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
-import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.f87c63ca.js";
-import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.e4f0ccc1.js";
+import { u as useAreasViewerUtilityClasses } from "../../components/AreasViewer/index.2a286dfa.js";
+import { u as useAreasAdminUtilityClasses } from "../../components/AreasAdmin/index.6d902d47.js";
 import { c as createDynamicMFStore } from "../DynamicMFParmsContext/index.1607c78e.js";
 import { g as getAreasDictionary, D as DICCTIONARY } from "../../dictionary.08cfc4c9.js";
-import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.0fd1b7f8.js";
+import { a as addLayoutItemToBreakPointIfNoExists, b as addLayoutItemToBreakPoints, c as cloneLayouts } from "../../../GridLayout/subcomponents/Responsive/index.d2ec9ddb.js";
 import { debounce, cloneDeep } from "lodash";
 import { A as isEqualLayouts } from "../../../GridLayout/index.0996cd19.js";
 import { useNavigate } from "react-router-dom";
 import { jsx } from "react/jsx-runtime";
-const PADDING_GRIDLAYOUT = 8;
-const MARGIN_GRIDLAYOUT = 8;
+const PADDING_GRIDLAYOUT = 10;
+const MARGIN_GRIDLAYOUT = 10;
 const DEBOUCED_SAVE_TIME = 500;
 const COOKIE_BREAKPOINT_LAYOUTS = "layoutPros";
 const COOKIE_WINDOWS = "windows";

package/components/areas/hooks/useAreas/{index.b18fe111.js → index.febe901b.js}

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { useStore } from "zustand";
-import { A as AreasContext } from "../../contexts/AreasContext/index.3e3d8c62.js";
+import { A as AreasContext } from "../../contexts/AreasContext/index.3eb6b2a4.js";
 function useAreasStore(selector, equalityFn) {
   const context = useContext(AreasContext);
   if (!context)