@m4l/components 0.1.49 → 0.1.51

package/components/CommonActions/components/ActionFormCancel/{index.d6875fe6.js → index.27e301c5.js}

@@ -3,28 +3,28 @@ import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
 import { B as Button } from "../../../mui_extended/Button/index.8406ed5b.js";
 import { useCallback } from "react";
-import { u as useModal } from "../../../../hooks/useModal/index.54a1887f.js";
+import { u as useModal } from "../../../../hooks/useModal/index.56c03c00.js";
 import "../../../../react-draggable.0eef011c.js";
-import "../../../ModalDialog/index.58a21edf.js";
+import "../../../ModalDialog/index.de10969f.js";
 import "../../../Resizeable/index.8a442a8b.js";
 import { jsx } from "react/jsx-runtime";
 import "@m4l/graphics";
-import { W as WindowConfirm } from "../../../modal/WindowConfirm.2fc8ed8f.js";
-import "../../../modal/WindowBase.52e21822.js";
+import { W as WindowConfirm } from "../../../modal/WindowConfirm.72de5ce8.js";
+import "../../../modal/WindowBase.ed279350.js";
 import "../../../Icon/index.f6e8d810.js";
 import "@mui/material/styles";
-import "../../../areas/components/index.9f1b8516.js";
-import "../../../areas/components/AreasAdmin/index.5f46d742.js";
+import "../../../areas/components/index.29809e82.js";
+import "../../../areas/components/AreasAdmin/index.3e586e9b.js";
 import "../../../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../../../areas/contexts/AreasContext/index.82659d93.js";
+import "../../../areas/contexts/AreasContext/index.4f938baa.js";
 import "zustand/shallow";
-import "../../../areas/components/AreasContainer/index.c99b3cca.js";
+import "../../../areas/components/AreasContainer/index.15e4628d.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
-import "../../../areas/contexts/index.1edc1f88.js";
+import "../../../areas/contexts/index.4cfa6ea9.js";
 import "../../../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
-import { u as useWindowToolsMF } from "../../../areas/hooks/index.3326476e.js";
+import { u as useWindowToolsMF } from "../../../areas/hooks/index.b15baf14.js";
 function ActionFormCancel() {
   const {
     getLabel

package/components/CommonActions/components/Actions/{index.4e56715e.js → index.c06ea173.js}

@@ -6,25 +6,25 @@ import "@mui/material/Button";
 import "../../../mui_extended/Button/index.8406ed5b.js";
 import "react-hook-form";
 import "react";
-import "../../../../contexts/ModalContext/index.a6faf940.js";
+import "../../../../contexts/ModalContext/index.e94f0e72.js";
 import "../../../../react-draggable.0eef011c.js";
-import "../../../ModalDialog/index.58a21edf.js";
+import "../../../ModalDialog/index.de10969f.js";
 import "../../../Resizeable/index.8a442a8b.js";
 import "@m4l/graphics";
 import "@mui/lab";
-import "../../../modal/WindowConfirm.2fc8ed8f.js";
+import "../../../modal/WindowConfirm.72de5ce8.js";
 import "../../../Icon/index.f6e8d810.js";
-import "../../../modal/WindowBase.52e21822.js";
-import "../../../areas/components/index.9f1b8516.js";
-import "../../../areas/components/AreasAdmin/index.5f46d742.js";
+import "../../../modal/WindowBase.ed279350.js";
+import "../../../areas/components/index.29809e82.js";
+import "../../../areas/components/AreasAdmin/index.3e586e9b.js";
 import "../../../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../../../areas/contexts/AreasContext/index.82659d93.js";
+import "../../../areas/contexts/AreasContext/index.4f938baa.js";
 import "zustand/shallow";
-import "../../../areas/components/AreasContainer/index.c99b3cca.js";
+import "../../../areas/components/AreasContainer/index.15e4628d.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
-import "../../../areas/contexts/index.1edc1f88.js";
+import "../../../areas/contexts/index.4cfa6ea9.js";
 import "../../../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 const WrapperStandarActions = styled("div")(({
   theme

package/components/DataGrid/{index.4baf5552.js → index.eb1bdc97.js}

@@ -7,33 +7,33 @@ import { SvgIcon, Checkbox, InputBase, Skeleton } from "@mui/material";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { voidFunction, useModuleDictionary, useModuleSkeleton, getPropertyByString, useEnvironment } from "@m4l/core";
 import { M as MenuActions } from "../mui_extended/MenuActions/index.1261168c.js";
-import { P as Pager, g as getPagerComponentsDictionary, d as defaultPagerDictionary } from "../mui_extended/Pager/index.80ccec47.js";
+import { P as Pager, g as getPagerComponentsDictionary } from "../mui_extended/Pager/index.984aac44.js";
 import { I as IconButton } from "../mui_extended/IconButton/index.1318a283.js";
-import { u as useModal } from "../../hooks/useModal/index.54a1887f.js";
+import { u as useModal } from "../../hooks/useModal/index.56c03c00.js";
 import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.a81752ef.js";
 import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.d567aebb.js";
 import "../../react-draggable.0eef011c.js";
-import { g as getModalDialogComponentsDictionary, d as defaultModalDialogDictionary } from "../ModalDialog/index.58a21edf.js";
+import { g as getModalDialogComponentsDictionary } from "../ModalDialog/index.de10969f.js";
 import "../Resizeable/index.8a442a8b.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { A as Actions$1 } from "../CommonActions/components/Actions/index.4e56715e.js";
+import { A as Actions$1 } from "../CommonActions/components/Actions/index.c06ea173.js";
 import "react-hook-form";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.8406ed5b.js";
-import "../areas/components/index.9f1b8516.js";
-import "../areas/components/AreasAdmin/index.5f46d742.js";
+import "../areas/components/index.29809e82.js";
+import "../areas/components/AreasAdmin/index.3e586e9b.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.82659d93.js";
+import "../areas/contexts/AreasContext/index.4f938baa.js";
 import "zustand/shallow";
-import "../areas/components/AreasContainer/index.c99b3cca.js";
+import "../areas/components/AreasContainer/index.15e4628d.js";
 import "react-grid-layout/css/styles.css";
 import "../../react-resizable.bb58c8fc.js";
-import "../areas/contexts/index.1edc1f88.js";
+import "../areas/contexts/index.4cfa6ea9.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
-import "../modal/WindowConfirm.2fc8ed8f.js";
+import "../modal/WindowConfirm.72de5ce8.js";
 import "../Icon/index.f6e8d810.js";
-import { W as WindowBase } from "../modal/WindowBase.52e21822.js";
+import { W as WindowBase } from "../modal/WindowBase.ed279350.js";
 import { B as BooleanFormatter } from "../formatters/BooleanFormatter/index.b3fb8a75.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
 import { C as ConcatenatedFormatter } from "../formatters/index.90a19f9f.js";
@@ -1693,35 +1693,6 @@ function columnConcatenatedValuesFormatter(props) {
 function getDataGridComponentsDictionary() {
   return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
 }
-({
-  grid: {
-    actions: "Actions",
-    settings_tooltip: "Settings",
-    settings_sel_columns: "Select columns",
-    settings_column_name: "Name",
-    settings_column_position: "Position",
-    settings_column_visible: "Visible",
-    settings_column_frozen: "Frozen",
-    settings_move_first: "Move first",
-    settings_move_up: "Move up",
-    settings_move_last: "Move first",
-    settings_move_down: "Move down",
-    settings_visible_all: "Visible all",
-    settings_no_visible_all: "Invisible all",
-    settings_restore: "Restore",
-    density_tooltip: "Density",
-    density_compact: "Compact",
-    density_standard: "Standard",
-    density_confortable: "Confortable",
-    filter_holder: "Filter",
-    filter_show: "Show filters",
-    filter_hide: "Hide filters",
-    rows: "Rows",
-    rows_per_page: "Rows per page"
-  },
-  ...defaultPagerDictionary,
-  ...defaultModalDialogDictionary
-});
 const Input = styled("input")(() => ({
   appearance: "none",
   boxSizing: "border-box",

package/components/DynamicFilter/{index.b4fc6428.js → index.17731fda.js}

@@ -8,7 +8,7 @@ import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.74add0d
 import "lodash/debounce";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { generateUtilityClasses, generateUtilityClass, alpha, unstable_composeClasses as unstable_composeClasses$1, styled as styled$1, Skeleton, MenuItem, Popover as Popover$1, Popper, ClickAwayListener } from "@mui/material";
-import "../hook-form/RHFCheckbox/index.ebfe1e3c.js";
+import "../hook-form/RHFCheckbox/index.ca94a050.js";
 import { I as Icon } from "../Icon/index.f6e8d810.js";
 import { I as IconButton } from "../mui_extended/IconButton/index.1318a283.js";
 import "../mui_extended/Accordion/index.1d513477.js";
@@ -20,32 +20,32 @@ import "../Image/index.aa24e982.js";
 import "@mui/lab";
 import { P as Popover } from "../mui_extended/Popover/index.58c49cc0.js";
 import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.1261168c.js";
-import "../mui_extended/Pager/index.80ccec47.js";
+import "../mui_extended/Pager/index.984aac44.js";
 import "../mui_extended/Tab/index.e0653a0a.js";
 import "../mui_extended/Typography/index.be3a279a.js";
-import "../ErrorLabel/index.73f9362c.js";
+import "../ErrorLabel/index.78553a1e.js";
 import "@mui/x-date-pickers";
 import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.7f1cbd85.js";
 import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
 import { R as RHFTextField } from "../hook-form/RHFTextField/index.57f138f7.js";
-import "../hook-form/RHFPeriod/index.3470638a.js";
-import "../Period/index.2841388b.js";
-import { A as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.4e56715e.js";
-import "../../contexts/ModalContext/index.a6faf940.js";
+import "../hook-form/RHFPeriod/index.47cf646d.js";
+import "../Period/index.89daad51.js";
+import { A as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.c06ea173.js";
+import "../../contexts/ModalContext/index.e94f0e72.js";
 import "../../react-draggable.0eef011c.js";
-import "../ModalDialog/index.58a21edf.js";
+import "../ModalDialog/index.de10969f.js";
 import "../Resizeable/index.8a442a8b.js";
-import "../modal/WindowConfirm.2fc8ed8f.js";
-import "../modal/WindowBase.52e21822.js";
-import "../areas/components/index.9f1b8516.js";
-import "../areas/components/AreasAdmin/index.5f46d742.js";
+import "../modal/WindowConfirm.72de5ce8.js";
+import "../modal/WindowBase.ed279350.js";
+import "../areas/components/index.29809e82.js";
+import "../areas/components/AreasAdmin/index.3e586e9b.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.82659d93.js";
+import "../areas/contexts/AreasContext/index.4f938baa.js";
 import "zustand/shallow";
-import "../areas/components/AreasContainer/index.c99b3cca.js";
+import "../areas/components/AreasContainer/index.15e4628d.js";
 import "react-grid-layout/css/styles.css";
 import "../../react-resizable.bb58c8fc.js";
-import "../areas/contexts/index.1edc1f88.js";
+import "../areas/contexts/index.4cfa6ea9.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "lodash/isString";
 import "react-dropzone";

package/components/ErrorLabel/{index.73f9362c.js → index.78553a1e.js}

@@ -14,7 +14,7 @@ import "../Image/index.aa24e982.js";
 import "@mui/lab";
 import "../mui_extended/Popover/index.58c49cc0.js";
 import "../mui_extended/MenuActions/index.1261168c.js";
-import "../mui_extended/Pager/index.80ccec47.js";
+import "../mui_extended/Pager/index.984aac44.js";
 import "../mui_extended/Tab/index.e0653a0a.js";
 import { t as typographyClasses, T as Typography } from "../mui_extended/Typography/index.be3a279a.js";
 import { unstable_composeClasses } from "@mui/base";

package/components/LanguagePopover/{index.26b694ef.js → index.5047b444.js}

@@ -16,7 +16,7 @@ import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad
 import "@mui/lab";
 import { P as Popover } from "../mui_extended/Popover/index.58c49cc0.js";
 import "../mui_extended/MenuActions/index.1261168c.js";
-import "../mui_extended/Pager/index.80ccec47.js";
+import "../mui_extended/Pager/index.984aac44.js";
 import "../mui_extended/Tab/index.e0653a0a.js";
 import "../mui_extended/Typography/index.be3a279a.js";
 import { unstable_composeClasses } from "@mui/base";

package/components/ModalDialog/{index.58a21edf.js → index.de10969f.js}

@@ -1,12 +1,12 @@
 import { Dialog, Paper } from "@mui/material";
 import { c as cjs } from "../../react-draggable.0eef011c.js";
-import { u as useModal } from "../../hooks/useModal/index.54a1887f.js";
+import { u as useModal } from "../../hooks/useModal/index.56c03c00.js";
 import { styled } from "@mui/material/styles";
 import { a as getThemeVariantColor } from "../../utils/index.e882b264.js";
 import { R as ResizeableWindow } from "../Resizeable/index.8a442a8b.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.4e56715e.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.c06ea173.js";
 const WrapperDialog = styled(Dialog)(() => ({}));
 const Container = styled("div")(({ theme }) => ({
   display: "flex",

package/components/ObjectLogs/{index.9e362091.js → index.338656c6.js}

@@ -1,36 +1,36 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
 import { styled } from "@mui/material/styles";
-import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.4baf5552.js";
+import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.eb1bdc97.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
 import { Tooltip, IconButton } from "@mui/material";
 import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
 import { R as ReactJson } from "../../react-json-view.57125fcf.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useModal } from "../../hooks/useModal/index.54a1887f.js";
+import { u as useModal } from "../../hooks/useModal/index.56c03c00.js";
 import { I as Icon } from "../Icon/index.f6e8d810.js";
 import "../../react-draggable.0eef011c.js";
-import "../ModalDialog/index.58a21edf.js";
+import "../ModalDialog/index.de10969f.js";
 import "../Resizeable/index.8a442a8b.js";
-import "../CommonActions/components/Actions/index.4e56715e.js";
+import "../CommonActions/components/Actions/index.c06ea173.js";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.8406ed5b.js";
 import "react-hook-form";
-import "../areas/components/index.9f1b8516.js";
-import "../areas/components/AreasAdmin/index.5f46d742.js";
+import "../areas/components/index.29809e82.js";
+import "../areas/components/AreasAdmin/index.3e586e9b.js";
 import "../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.82659d93.js";
+import "../areas/contexts/AreasContext/index.4f938baa.js";
 import "zustand/shallow";
-import "../areas/components/AreasContainer/index.c99b3cca.js";
+import "../areas/components/AreasContainer/index.15e4628d.js";
 import "react-grid-layout/css/styles.css";
 import "../../react-resizable.bb58c8fc.js";
-import "../areas/contexts/index.1edc1f88.js";
+import "../areas/contexts/index.4cfa6ea9.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
-import "../modal/WindowConfirm.2fc8ed8f.js";
-import { W as WindowBase } from "../modal/WindowBase.52e21822.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.b4fc6428.js";
+import "../modal/WindowConfirm.72de5ce8.js";
+import { W as WindowBase } from "../modal/WindowBase.ed279350.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.17731fda.js";
 const Container$1 = styled("div")(() => ({
   height: "100%",
   width: "100%",

package/components/Period/{index.2841388b.js → index.89daad51.js}

@@ -3,28 +3,28 @@ import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
 import { useMemo } from "react";
 import { I as Icon } from "../Icon/index.f6e8d810.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.4e56715e.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.c06ea173.js";
 import "@mui/material/Button";
 import "../mui_extended/Button/index.8406ed5b.js";
 import "react-hook-form";
-import "../../contexts/ModalContext/index.a6faf940.js";
+import "../../contexts/ModalContext/index.e94f0e72.js";
 import "../../react-draggable.0eef011c.js";
-import "../ModalDialog/index.58a21edf.js";
+import "../ModalDialog/index.de10969f.js";
 import "../Resizeable/index.8a442a8b.js";
 import "@m4l/graphics";
-import "../modal/WindowConfirm.2fc8ed8f.js";
+import "../modal/WindowConfirm.72de5ce8.js";
 import "@mui/material/styles";
-import "../modal/WindowBase.52e21822.js";
-import "../areas/components/index.9f1b8516.js";
-import "../areas/components/AreasAdmin/index.5f46d742.js";
+import "../modal/WindowBase.ed279350.js";
+import "../areas/components/index.29809e82.js";
+import "../areas/components/AreasAdmin/index.3e586e9b.js";
 import "../mui_extended/IconButton/index.1318a283.js";
 import "zustand";
-import "../areas/contexts/AreasContext/index.82659d93.js";
+import "../areas/contexts/AreasContext/index.4f938baa.js";
 import "zustand/shallow";
-import "../areas/components/AreasContainer/index.c99b3cca.js";
+import "../areas/components/AreasContainer/index.15e4628d.js";
 import "react-grid-layout/css/styles.css";
 import "../../react-resizable.bb58c8fc.js";
-import "../areas/contexts/index.1edc1f88.js";
+import "../areas/contexts/index.4cfa6ea9.js";
 import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
 import "@mui/lab";
 const ContainerPeriod = styled("div")(({

package/components/areas/components/Area/types.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { DynamicMFParameters } from '../../contexts/DynamicMFParmsContext/types';
 import type { Layout } from 'react-grid-layout';
 import { WindowStore } from '../../contexts/WindowContext/store';
-import { AreaProviderRef } from '../../contexts/AreaContext/types';
+import { AreaStore } from '../../contexts/AreaContext/store';
 export declare type WinType = 'microfrontend' | 'component';
 export declare type EmergeType = 'layout' | 'popup' | 'modal';
 export interface MFBaseProps {
@@ -87,11 +87,13 @@ export declare type ModalProps = ModalMFProps | ModalComponentProps;
 export declare type NewModalProps = Omit<ModalMFProps, 'windowId' | 'onClose'> | Omit<ModalComponentProps, 'windowId' | 'onClose'>;
 export declare type WindowProps = LayoutProps | PopUpProps | ModalProps;
 export declare type NewWindowProps = NewLayoutProps | NewPopUpProps | NewModalProps;
+export declare type AddWindow = (newWindow: NewWindowProps) => string;
 export interface AreaType {
     id: string;
     name: string;
     loadWindows?: boolean;
-    ref?: AreaProviderRef;
+    store?: AreaStore;
+    linked?: boolean;
 }
 export interface AreaProps extends Omit<AreaType, 'url_icon' | 'name'> {
     active: boolean;

package/components/areas/components/AreasAdmin/{index.5f46d742.js → index.3e586e9b.js}

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { I as IconButton } from "../../../mui_extended/IconButton/index.1318a283.js";
-import { u as useAreasStore } from "../../hooks/useArea/index.061d19d5.js";
+import { u as useAreasStore } from "../../hooks/useArea/index.575c2abe.js";
 import { useEnvironment } from "@m4l/core";
 import "@mui/material";
 import "../../../Icon/index.f6e8d810.js";
@@ -15,7 +15,7 @@ import "../../../Image/index.aa24e982.js";
 import "@mui/lab";
 import "../../../mui_extended/Popover/index.58c49cc0.js";
 import "../../../mui_extended/MenuActions/index.1261168c.js";
-import "../../../mui_extended/Pager/index.80ccec47.js";
+import "../../../mui_extended/Pager/index.984aac44.js";
 import "../../../mui_extended/Tab/index.e0653a0a.js";
 import "../../../mui_extended/Typography/index.be3a279a.js";
 import { shallow } from "zustand/shallow";

package/components/areas/components/AreasContainer/{index.c99b3cca.js → index.15e4628d.js}

@@ -1,8 +1,8 @@
 import { styled } from "@mui/material/styles";
-import { A as Area } from "../index.9f1b8516.js";
+import { A as Area } from "../index.29809e82.js";
 import "react-grid-layout/css/styles.css";
 import "../../../../react-resizable.bb58c8fc.js";
-import { u as useAreasStore } from "../../hooks/useArea/index.061d19d5.js";
+import { u as useAreasStore } from "../../hooks/useArea/index.575c2abe.js";
 import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 const ContainerAreas = styled("div")(({

package/components/areas/components/GridLayout/index.f38f5b74.js

@@ -0,0 +1,101 @@
+import { WidthProvider, Responsive } from "react-grid-layout";
+import { a as useAreaStore } from "../../hooks/useArea/index.575c2abe.js";
+import { styled } from "@mui/material/styles";
+import { M as MemonizedWindowPopUp } from "../WindowPopUp/index.90566fca.js";
+import { M as MemonizedWindow, W as WindowModal } from "../Window/index.d1a59be4.js";
+import "react-grid-layout/css/styles.css";
+import "../../../../react-resizable.bb58c8fc.js";
+import { shallow } from "zustand/shallow";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+const WrapperPoups = styled("div")(() => ({
+  zIndex: 1,
+  " .react-draggable": {
+    position: "absolute"
+  }
+}));
+const ResponsiveGridLayout = WidthProvider(Responsive);
+const GridLayout = () => {
+  const areaId = useAreaStore((state) => state.id);
+  const gridLayouts = useAreaStore((state) => state.gridLayouts, shallow);
+  const hashWindowsPopups = useAreaStore((state) => state.hashWindowsPopups, shallow);
+  const hashWindowsLayouts = useAreaStore((state) => state.hashWindowsLayouts, shallow);
+  const breakPointsLayouts = useAreaStore((state) => state.breakpointsLayouts, shallow);
+  const windowsPopUps = useAreaStore((state) => state.windowsPopUps, shallow);
+  const windowModal = useAreaStore((state) => state.windowModal, shallow);
+  const {
+    onBreakpointsLayoutsChange: onBreakPointsLayoutsChange
+  } = useAreaStore((state) => state.actions);
+  function onBreakpointChange(_newBreakpoint, _newCols) {
+  }
+  console.log("Render GridLayout windowModal", windowModal);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(ResponsiveGridLayout, {
+      className: `M4L_GridLayout M4L_GridLayout_${areaId}`,
+      onLayoutChange: onBreakPointsLayoutsChange,
+      onBreakpointChange,
+      breakpoints: {
+        lg: 1200,
+        md: 996,
+        sm: 768,
+        xs: 480,
+        xxs: 0
+      },
+      cols: {
+        lg: 24,
+        md: 20,
+        sm: 12,
+        xs: 8,
+        xxs: 2
+      },
+      rowHeight: 100,
+      margin: [5, 5],
+      containerPadding: [3, 3],
+      draggableHandle: ".m4l_draggable_handle",
+      compactType: "horizontal",
+      layouts: breakPointsLayouts,
+      onResizeStart: (item) => {
+        console.log("onResizestart", item);
+      },
+      children: [/* @__PURE__ */ jsx(WrapperPoups, {
+        id: "WrapperPoups",
+        "data-grid": {
+          i: "none",
+          x: 0,
+          y: 0,
+          w: 0,
+          h: 0,
+          maxW: 0,
+          maxH: 0,
+          minW: 0,
+          minH: 0,
+          static: true,
+          isDraggable: false,
+          isResizable: false
+        },
+        children: windowsPopUps.map((wp) => {
+          if (hashWindowsPopups[wp]) {
+            return /* @__PURE__ */ jsx(MemonizedWindowPopUp, {
+              ...hashWindowsPopups[wp]
+            }, hashWindowsPopups[wp].windowId);
+          }
+          return null;
+        })
+      }, "none"), gridLayouts.map((l) => {
+        if (hashWindowsLayouts[l.i]) {
+          return /* @__PURE__ */ jsx("div", {
+            "data-grid": l,
+            children: /* @__PURE__ */ jsx(MemonizedWindow, {
+              ...hashWindowsLayouts[l.i]
+            })
+          }, l.i);
+        }
+        return null;
+      })]
+    }), windowModal && /* @__PURE__ */ jsx(WindowModal, {
+      ...windowModal
+    })]
+  });
+};
+export {
+  GridLayout as G
+};