@m4l/components 0.1.35 → 0.1.36

package/dist/index.js

@@ -0,0 +1,1831 @@
+import { I as IconButton } from "./components/mui_extended/IconButton/index.e3adaa33.js";
+import { I, a } from "./components/mui_extended/IconButton/index.e3adaa33.js";
+import { m } from "framer-motion";
+import { Skeleton, Typography, styled as styled$1, IconButton as IconButton$1 } from "@mui/material";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import "react-router-dom";
+import { L } from "./components/animate/LoadingScreen/index.1d0c4307.js";
+import { P } from "./components/animate/PropagateLoader/index.eb401503.js";
+import { M, a as a2 } from "./contexts/ModalContext/index.0797eb17.js";
+import React__default, { createContext, useState, useContext, useMemo, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from "react";
+import "react-hook-form";
+import "@hookform/resolvers/yup";
+import { R } from "./contexts/RHFormContext/index.d88e6e27.js";
+import { useEnvironment, useModuleSkeleton, useModuleDictionary, useNetwork, useHostTools, axiosOperation, EmitEvents } from "@m4l/core";
+import { I as Icon } from "./components/Icon/index.1dbd3e58.js";
+import { I as I2 } from "./components/Icon/index.1dbd3e58.js";
+import { A } from "./components/mui_extended/Accordion/index.8e123c57.js";
+import { A as A2 } from "./components/mui_extended/Avatar/index.fe06afd7.js";
+import "@mui/material/Button";
+import "@mui/lab";
+import { B as Button } from "./components/mui_extended/Button/index.55fc70dc.js";
+import { B, L as L2 } from "./components/mui_extended/Button/index.55fc70dc.js";
+import { L as L3, P as P2 } from "./components/mui_extended/Popover/index.97cf3a3e.js";
+import { M as MenuActions, b as Actions } from "./components/CommonActions/components/Actions/index.ba86f72f.js";
+import { b, M as M2, d, g } from "./components/CommonActions/components/Actions/index.ba86f72f.js";
+import { P as P3, g as g2 } from "./components/mui_extended/Pager/index.d245f821.js";
+import { T } from "./components/mui_extended/Tab/index.e0653a0a.js";
+import { r as reactGridLayout } from "./node_modules.e0b84fac.js";
+import "./react-resizable.6eae0397.js";
+import { c as cjs } from "./react-draggable.3b5b6680.js";
+import { M as M3, d as d2, g as g3 } from "./components/ModalDialog/index.91777582.js";
+import { R as ResizeableWindow } from "./components/Resizeable/index.44a0dd46.js";
+import { R as R2 } from "./components/Resizeable/index.44a0dd46.js";
+import { useResponsiveDesktop, useHostTheme, useFormatter, useLocales, useFirstRender } from "@m4l/graphics";
+import { R as R3, g as g4 } from "./components/hook-form/RHFAutocomplete/index.de93fe01.js";
+import { I as Image } from "./components/Image/index.93d5f37f.js";
+import { I as I3 } from "./components/Image/index.93d5f37f.js";
+import debounce from "lodash/debounce";
+import { R as R4 } from "./components/hook-form/RHFCheckbox/index.6dcec9e2.js";
+import "@mui/x-date-pickers";
+import { R as R5 } from "./components/hook-form/RHFDateTime/index.7f1cbd85.js";
+import { R as R6, a as a3 } from "./components/hook-form/RHFTextField/index.7feaec71.js";
+import { R as R7 } from "./components/hook-form/RHFPeriod/index.2b8e63a2.js";
+import { E } from "./components/ErrorLabel/index.c8615f16.js";
+import { P as P4, g as g5 } from "./components/Period/index.74f35862.js";
+import "lodash/isString";
+import "react-dropzone";
+import { R as R8 } from "./components/hook-form/RHFUpload/index.d5cc7c13.js";
+import { D, N, T as T2, c, d as d3, b as b2, g as g6 } from "./components/DataGrid/index.156cc30c.js";
+import "react-dnd";
+import "react-dnd-html5-backend";
+import { S } from "./components/ScrollBar/index.39eeb2de.js";
+import { D as D2, d as d4, g as g7 } from "./components/DynamicFilter/index.32f84995.js";
+import "simplebar/dist/simplebar.min.css";
+import "yup";
+import { N as N2, d as d5, g as g8 } from "./components/NoItemSelected/index.46d2f632.js";
+import { O, d as d6, g as g9 } from "./components/ObjectLogs/index.9d3fc2ae.js";
+import "./react-json-view.03ae95f5.js";
+import { P as P5 } from "./components/PaperForm/index.218a6c4b.js";
+import { H } from "./components/Page/index.4237c241.js";
+import { P as P6 } from "./components/PropertyValue/index.dfcfe1ba.js";
+import "./react-splitter-layout.873aece3.js";
+import { S as S2 } from "./components/SplitLayout/index.81fc4750.js";
+import { v } from "./components/animate/variants/fade.b561c0fc.js";
+import { v as varBounce } from "./components/animate/variants/bounce.784aaaaa.js";
+import { v as v2 } from "./components/animate/variants/bounce.784aaaaa.js";
+import { v as v3 } from "./components/animate/variants/container.11f82b76.js";
+import { v as v4, a as a4, b as b3 } from "./components/animate/variants/transition.bd46b9ce.js";
+import { M as M4 } from "./components/animate/MotionContainer/index.8d9f9d80.js";
+import { M as M5 } from "./components/animate/MotionLazyContainer/index.572dd012.js";
+import isEqual from "lodash/isEqual";
+import { L as LinearProgress } from "./components/mui_extended/LinearProgress/index.c92b9ba9.js";
+import { L as L4 } from "./components/mui_extended/LinearProgress/index.c92b9ba9.js";
+import { u as useModal } from "./hooks/useModal/index.32da4dcb.js";
+import { u } from "./hooks/useModal/index.32da4dcb.js";
+import { a as getThemeVariantColor, c as getVariantColor } from "./utils/index.9dce2e2f.js";
+import { R as R9, g as g10 } from "./components/hook-form/RHFAutocompleteAsync/index.ca696cce.js";
+import { R as R10 } from "./components/hook-form/RHFMultiCheckbox/index.2680b3b6.js";
+import { R as R11 } from "./components/hook-form/RHFSelect/index.b6ca8bb2.js";
+import { R as R12 } from "./components/hook-form/RHFRadioGroup/index.b3335e13.js";
+import { B as B2 } from "./components/mui_extended/BoxIcon/index.e638ecc8.js";
+import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.5e37d903.js";
+import { C } from "./components/mui_extended/CircularProgress/index.ad569afd.js";
+import { L as L5 } from "./components/mui_extended/LinkWithRoute/index.16436ab8.js";
+import { T as T3 } from "./components/mui_extended/Typography/index.e5494696.js";
+import { B as B4 } from "./components/formatters/BooleanFormatter/index.efc8ffc2.js";
+import { D as D3 } from "./components/formatters/DateFormatter/index.80522f69.js";
+import { U, g as g11 } from "./components/formatters/UncertaintyFormatter/index.08e1b79f.js";
+import { P as P7, g as g12 } from "./components/formatters/PointsFormatter/index.80a4e414.js";
+import { P as P8, g as g13 } from "./components/formatters/PriceFormatter/index.83cbe7be.js";
+import { d as d7, g as g14 } from "./components/formatters/index.c3f4b687.js";
+import { c as c2 } from "./components/DataGrid/formatters/columnUncertaintyFormatter/index.cae2057a.js";
+import { c as c3 } from "./components/DataGrid/formatters/columnPointsFormatter/index.5e645334.js";
+import { c as c4 } from "./components/DataGrid/formatters/columnNestedValueFormatter/index.f68ef4e1.js";
+import { c as c5 } from "./components/DataGrid/formatters/columnPriceFormatter/index.e612fda3.js";
+import { A as ActionCancel } from "./components/CommonActions/components/ActionCancel/index.4b36950f.js";
+import { A as A3 } from "./components/CommonActions/components/ActionCancel/index.4b36950f.js";
+import { A as ActionIntro } from "./components/CommonActions/components/ActionIntro/index.35a0d240.js";
+import { A as A4 } from "./components/CommonActions/components/ActionIntro/index.35a0d240.js";
+import { A as A5 } from "./components/CommonActions/components/ActionFormCancel/index.945e9887.js";
+import { A as A6 } from "./components/CommonActions/components/ActionFormIntro/index.ca4d2674.js";
+import { L as L6 } from "./components/Loadable/index.8c6006be.js";
+import { S as S3 } from "./components/ScrollToTop/index.e06f98f6.js";
+import { u as u2 } from "./hooks/useFormAddEdit/index.d4845f1a.js";
+import { L as L7 } from "./assets/Logo/index.228dcb5a.js";
+import "./index.js";
+import "./react-data-grid.d46d625e.js";
+import "clsx";
+import "lodash.isequal";
+import "prop-types";
+import "react-dom";
+import "simplebar-react";
+import "./commonjs.bcc6b707.js";
+import "react-helmet-async";
+import "./components/WrapperComponent/index.5e872594.js";
+const WindowContext = createContext(null);
+function WindowProvider(props) {
+  const {
+    children,
+    initialExternalActions = [],
+    ...other
+  } = props;
+  const [moduleActions, setModuleActions] = useState([]);
+  const [externalActions, setExternalActions] = useState(initialExternalActions);
+  return /* @__PURE__ */ jsx(WindowContext.Provider, {
+    value: {
+      moduleActions,
+      externalActions,
+      setModuleActions,
+      setExternalActions,
+      ...other
+    },
+    children
+  });
+}
+const WrapperWindow = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  width: "100%",
+  overflow: "hidden",
+  backgroundColor: theme.palette.background.paper,
+  padding: theme.spacing(3),
+  border: "1px solid gray",
+  "&.m4l_selected": {
+    borderTop: "1px solid green"
+  }
+}));
+const WrapperContent = styled("div")(() => ({
+  flexGrow: 1,
+  position: "relative"
+}));
+const DynamicMFParmsContext = createContext(null);
+function DynamicMFParmsProvider(props) {
+  const {
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(DynamicMFParmsContext.Provider, {
+    value: other,
+    children
+  });
+}
+const useWindow = () => {
+  const context = useContext(WindowContext);
+  if (!context)
+    throw new Error("useWindow context must be use inside WindowContext");
+  return context;
+};
+const Component = (props) => {
+  const {
+    setModuleActions
+  } = useWindow();
+  return /* @__PURE__ */ jsx(DynamicMFParmsProvider, {
+    setModuleActions,
+    children: props.children
+  });
+};
+React__default.memo(Component);
+const StyledHeader = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  justifyContent: "space-between",
+  minHeight: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden",
+  cursor: "move",
+  height: "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"
+  }
+}));
+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, {
+          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, {
+        variant: "circular",
+        width: 24,
+        height: 24
+      })
+    })]
+  });
+}
+function getMenuActions(isDesktop, moduleActions) {
+  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
+  if (isDesktop !== void 0 && isDesktop) {
+    menuActions = menuActions.filter((action) => action.visibility === "normal");
+  }
+  return menuActions;
+}
+function getMainActions(isDesktop, moduleActions) {
+  let mainActions = [];
+  if (isDesktop !== void 0 && isDesktop) {
+    mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "main"));
+  }
+  mainActions = mainActions.concat(moduleActions.filter((action) => action.visibility === "allways"));
+  return mainActions;
+}
+function Header$1() {
+  const {
+    url_icon,
+    title,
+    moduleActions,
+    onClose,
+    container_id
+  } = useWindow();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const menuActions = useMemo(() => getMenuActions(isDesktop, moduleActions), [moduleActions, isDesktop]);
+  const mainActions = useMemo(() => {
+    return getMainActions(isDesktop, moduleActions);
+  }, [moduleActions, isDesktop]);
+  const onCloseLocal = () => {
+    onClose && onClose(container_id);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTModuleHeader, {});
+  }
+  return /* @__PURE__ */ jsxs(StyledHeader, {
+    id: "Header",
+    className: "m4l_draggable_handle",
+    children: [/* @__PURE__ */ jsx(Icon, {
+      src: url_icon,
+      bgColor: "primary.main",
+      size: "24px"
+    }), /* @__PURE__ */ jsx(Typography, {
+      variant: "h5",
+      sx: {
+        maxWidth: 260,
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        color: "text.primary",
+        marginLeft: "12px",
+        marginRight: "24px",
+        textOverflow: "ellipsis"
+      },
+      children: title
+    }), mainActions.map((mainAction, index) => {
+      if (!mainAction.component) {
+        return /* @__PURE__ */ jsx(IconButton, {
+          src: mainAction.urlIcon,
+          className: mainAction.className,
+          onClick: mainAction.onClick,
+          "aria-label": mainAction.label,
+          disabled: mainAction.disabled
+        }, `main_action_${index}`);
+      }
+      return /* @__PURE__ */ jsx(mainAction.component, {
+        description: mainAction.label,
+        onClick: mainAction.onClick
+      }, `main_action_${index}`);
+    }), menuActions.length > 0 && /* @__PURE__ */ jsx(MenuActions, {
+      arrowType: "right-top",
+      marginTop: "11px",
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      menuActions
+    }), onClose && /* @__PURE__ */ jsx(IconButton, {
+      onClick: onCloseLocal,
+      "aria-label": "click",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/window/assets/icons/close.svg`
+    })]
+  });
+}
+const WrapperLinearProgress = styled$1("div")(() => ({
+  width: "70%",
+  margin: "auto auto"
+}));
+const WrapperFallBackNotFound = styled$1("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: theme.spacing(3)
+}));
+function FallBackNotFound(props) {
+  const {
+    setNetworkRefresh
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const handlerClick = () => {
+    setNetworkRefresh((prop) => !prop);
+  };
+  return /* @__PURE__ */ jsxs(WrapperFallBackNotFound, {
+    children: [/* @__PURE__ */ jsx(m.div, {
+      variants: varBounce().in,
+      children: /* @__PURE__ */ jsx(Typography, {
+        variant: "h3",
+        paragraph: true,
+        children: getLabel("loading_mf_title")
+      })
+    }), /* @__PURE__ */ jsx(Typography, {
+      sx: {
+        color: "text.secondary"
+      },
+      children: getLabel("loading_mf_description")
+    }), /* @__PURE__ */ jsx(m.div, {
+      variants: varBounce().in,
+      children: /* @__PURE__ */ jsx(Image, {
+        src: `${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`,
+        width: "292px",
+        height: "219px"
+      })
+    }), /* @__PURE__ */ jsx(Button, {
+      size: "large",
+      variant: "contained",
+      onClick: handlerClick,
+      children: getLabel("loading_mf_intro")
+    })]
+  });
+}
+const LoadingMF = (props) => {
+  const {
+    loadingProgress,
+    setNetworkRefresh
+  } = props;
+  if (loadingProgress !== -1) {
+    return /* @__PURE__ */ jsx(WrapperLinearProgress, {
+      id: "WrapperLinearProgress",
+      children: /* @__PURE__ */ jsx(LinearProgress, {
+        variant: "determinate",
+        value: loadingProgress
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(FallBackNotFound, {
+    setNetworkRefresh
+  });
+};
+function getDivScritId(prefix, moduleId) {
+  const rotational_id = `${Math.round(new Date().getTime() / 1e3)}_rnd_${Math.round(Math.random() * 1e3)}`;
+  return {
+    divContainerId: `container_${prefix}_${moduleId}_${rotational_id}`,
+    scriptId: `script_${moduleId}_${rotational_id}`,
+    moduleId
+  };
+}
+function MFLoader(props) {
+  const {
+    prefix,
+    module_id,
+    cache = true,
+    debug_port,
+    dynamicParams
+  } = props;
+  const {
+    hostThemeOptions,
+    fnComponentsOverrides
+  } = useHostTheme();
+  const {
+    networkOperation
+  } = useNetwork();
+  const environment = useEnvironment();
+  const hostTools = useHostTools();
+  const formatter = useFormatter();
+  const [isLoading, setIsLoading] = useState(true);
+  const [networkProgress, setNetworkProgress] = useState(-1);
+  const [_networkRefresh, setNetworkRefresh] = useState(false);
+  const {
+    currentLocale
+  } = useLocales();
+  const [divScript, setDivScript] = useState(getDivScritId(prefix, module_id));
+  const refTime = useRef(0);
+  const isFirstRender = useFirstRender([module_id]);
+  const final_host = environment.isLocalhost ? `https://localhost:${debug_port}` : `https://${window.location.host}/mf/${module_id}`;
+  function cleanUp(dScript) {
+    try {
+      if (window[`unmount_${prefix}_${dScript.moduleId}`]) {
+        window[`unmount_${prefix}_${dScript.moduleId}`](dScript.divContainerId);
+      }
+    } catch (error) {
+    }
+    if (!cache) {
+      const script = document.getElementById(dScript.scriptId);
+      if (script) {
+        try {
+          document.head.removeChild(script);
+          delete window[`render_${prefix}_${dScript.moduleId}`];
+          delete window[`unmount_${prefix}_${dScript.moduleId}`];
+        } catch (error) {
+        }
+      }
+    }
+  }
+  const renderMicroFrontend = useCallback((newDScript) => {
+    try {
+      setIsLoading(false);
+      window[`render_${prefix}_${newDScript.moduleId}`](newDScript.divContainerId, environment, hostTools, currentLocale, {
+        hostThemeOptions,
+        fnComponentsOverrides
+      }, axiosOperation, formatter, {
+        version: 1,
+        ...dynamicParams ? dynamicParams : {}
+      });
+    } catch (error) {
+    }
+  }, [hostThemeOptions, currentLocale, formatter, dynamicParams]);
+  const debouncedSetDivScript = useCallback(debounce((newName) => {
+    const newDivScript = getDivScritId(prefix, newName);
+    if (newName !== divScript.moduleId) {
+      setDivScript({
+        ...newDivScript
+      });
+    }
+  }, 200), [divScript]);
+  useEffect(() => {
+    if (!isFirstRender) {
+      debouncedSetDivScript(module_id + "");
+      if (module_id !== divScript.moduleId)
+        ;
+    }
+    return () => {
+    };
+  }, [module_id]);
+  useEffect(() => {
+    setIsLoading(true);
+    let mounted = true;
+    const controller = new AbortController();
+    const dsScript = {
+      ...divScript
+    };
+    const loadIfNotLoaded = async () => {
+      if (!window[`render_${prefix}_${module_id}`]) {
+        let urlFile = "";
+        setNetworkProgress(0);
+        const manifest = await fetch(`${final_host}/manifest.json?rnd=${Math.random()}`).then((res) => res.json()).catch(() => {
+          console.debug("Error fetching manifest", `${final_host}/manifest.json`);
+          return void 0;
+        });
+        if (!manifest) {
+          return;
+        }
+        setNetworkProgress(10);
+        if (mounted) {
+          urlFile = `${final_host}/${manifest["src/index.tsx"]["file"]}?rnd=${Math.random()}`;
+          refTime.current = 0;
+          await networkOperation({
+            method: "GET",
+            endPoint: urlFile,
+            isRemote: !environment.isLocalhost,
+            headers: {
+              "Content-Type": "application/json"
+            },
+            onDownloadProgress: (progressEvent) => {
+              let percentCompleted = 0;
+              try {
+                if (progressEvent.lengthComputable) {
+                  percentCompleted = 10 + Math.round(progressEvent.loaded * 90 / progressEvent.total);
+                } else {
+                  if (refTime.current === 0) {
+                    refTime.current = new Date().getTime();
+                  }
+                  percentCompleted = 10 + progressEvent.loaded / 15e5 * 90;
+                  if (percentCompleted > 95)
+                    percentCompleted = 95;
+                }
+              } catch (error) {
+              }
+              if (mounted) {
+                setNetworkProgress(percentCompleted);
+              }
+            },
+            isExternalUrl: true,
+            responseType: "text",
+            signal: controller.signal
+          }).then(() => {
+            if (mounted) {
+              setNetworkProgress(100);
+            }
+          }).catch(() => {
+          });
+          if (mounted) {
+            const script = document.createElement("script");
+            script.id = divScript.scriptId;
+            script.crossOrigin = "";
+            script.type = "module";
+            script.src = urlFile || "";
+            script.onload = () => {
+              if (mounted) {
+                console.debug("Script loaded", new Date().getTime());
+                setNetworkProgress(100);
+                renderMicroFrontend(dsScript);
+              }
+            };
+            document.head.appendChild(script);
+            console.debug("Script appened", new Date().getTime());
+          }
+        }
+      } else {
+        if (mounted) {
+          renderMicroFrontend(dsScript);
+        }
+      }
+    };
+    loadIfNotLoaded();
+    return () => {
+      mounted = false;
+      controller.abort();
+      cleanUp(dsScript);
+    };
+  }, [divScript]);
+  console.log("Render micro frontend", divScript.divContainerId, final_host);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      id: divScript.divContainerId
+    }), isLoading ? /* @__PURE__ */ jsx(LoadingMF, {
+      loadingProgress: networkProgress,
+      setNetworkRefresh
+    }) : null]
+  });
+}
+MFLoader.defaultProps = {
+  document,
+  window
+};
+const MicroFrontend = (props) => {
+  const {
+    setModuleActions
+  } = useWindow();
+  return /* @__PURE__ */ jsx(MFLoader, {
+    ...props,
+    dynamicParams: {
+      ...props.dynamicParams,
+      setModuleActions
+    }
+  });
+};
+React__default.memo(MicroFrontend);
+const Window = (props) => {
+  return /* @__PURE__ */ jsx(WrapperWindow, {
+    children: /* @__PURE__ */ jsxs(WindowProvider, {
+      initialExternalActions: [],
+      ...props,
+      children: [/* @__PURE__ */ jsx(Header$1, {}), /* @__PURE__ */ jsx(WrapperContent, {
+        children: props.winType === "microfrontend" ? /* @__PURE__ */ jsx(MicroFrontend, {
+          ...props.mfProps
+        }) : /* @__PURE__ */ jsx(Component, {
+          children: props.component
+        })
+      })]
+    })
+  });
+};
+const MemonizedWindow = React__default.memo(Window);
+const LABEL_NEW_AREA = "label_new_area";
+const AreasContext = createContext(null);
+function AreasProvider(props) {
+  const {
+    children,
+    activeAreasNetwork,
+    onLoad
+  } = props;
+  const [areas, setAreas] = useState([]);
+  const {
+    events_add_listener,
+    events_remove_listener
+  } = useHostTools();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [status, setStatus] = useState("init");
+  const {
+    networkOperation
+  } = useNetwork();
+  const [currentArea, setCurrentArea] = useState(areas.length > 0 ? areas[0].id : "");
+  const currentAreaRef = useRef(areas.length > 0 ? areas[0].id : "");
+  const areaRefs = useRef({});
+  const addWindow = useCallback((newWindow) => {
+    let current;
+    console.log("addWindow raw");
+    if (areaRefs.current && areaRefs.current[currentAreaRef.current]) {
+      current = areaRefs.current[currentAreaRef.current];
+    }
+    if (current && current.addWindow) {
+      current.addWindow(newWindow);
+    }
+  }, []);
+  const addArea = useCallback(() => {
+    const newId = `area_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+    const newName = `${getLabel(LABEL_NEW_AREA)} ${areas.length + 1}`;
+    setAreas((lastAreas) => [...lastAreas, {
+      id: newId,
+      url_icon: "",
+      name: newName,
+      loadWindows: false
+    }]);
+    selectArea(newId);
+    if (activeAreasNetwork) {
+      networkOperation({
+        method: "POST",
+        endPoint: `areas`,
+        data: {
+          id: newId,
+          name: newName
+        },
+        toastSuccess: false,
+        toastError: false
+      });
+    }
+    return newId;
+  }, [getLabel]);
+  useEffect(() => {
+    events_add_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
+    console.log("useEffect AreasProvider Emmiter");
+    return () => {
+      events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
+    };
+  }, []);
+  useEffect(() => {
+    let mounted = true;
+    if (status === "init") {
+      if (activeAreasNetwork) {
+        setStatus("loading");
+        networkOperation({
+          method: "GET",
+          endPoint: `areas`,
+          parms: {},
+          toastSuccess: false
+        }).then((response) => {
+          if (mounted) {
+            if (response?.data && Array.isArray(response.data) && response.data.length > 0) {
+              setAreas(response.data);
+              selectArea(response.data[0].id);
+            } else {
+              addArea();
+            }
+          }
+        }).finally(() => {
+          setStatus("loaded");
+        });
+      } else {
+        addArea();
+        setStatus("loaded");
+      }
+    }
+    console.log("useEffect AreasProvider");
+    return () => {
+      console.log("useEffect cluanUp AreasProvider *** no deber\xEDa darse");
+      mounted = false;
+    };
+  }, []);
+  useEffect(() => {
+    if (status === "loaded") {
+      console.log("useEffect Areas loaded");
+      onLoad && onLoad();
+    }
+  }, [status]);
+  const selectArea = (newId) => {
+    currentAreaRef.current = newId;
+    setCurrentArea(newId);
+  };
+  const deleteArea = (areaId) => {
+    let newAreas = [];
+    setAreas((lastAreas) => {
+      newAreas = [...lastAreas];
+      newAreas = lastAreas.filter((area) => area.id !== areaId);
+      return newAreas;
+    });
+    if (currentAreaRef.current === areaId) {
+      if (newAreas.length > 0) {
+        selectArea(newAreas[0].id);
+      } else {
+        selectArea("");
+      }
+    }
+    if (activeAreasNetwork) {
+      networkOperation({
+        method: "DELETE",
+        endPoint: `areas/${areaId}`,
+        parms: {},
+        toastSuccess: false,
+        toastError: false
+      });
+    }
+  };
+  const setAreaRef = (areaId, ref) => {
+    console.log("setAreaRef", areaRefs.current[areaId] === ref, areaRefs.current[areaId]?.addWindow === ref?.addWindow, JSON.stringify(areaRefs.current[areaId]) === JSON.stringify(ref), areaRefs.current[areaId], ref);
+    if (areaRefs.current[areaId] !== ref) {
+      areaRefs.current[areaId] = ref;
+    }
+  };
+  return /* @__PURE__ */ jsx(AreasContext.Provider, {
+    value: {
+      status,
+      activeAreasNetwork,
+      areas,
+      currentArea,
+      addArea,
+      deleteArea,
+      selectArea,
+      setAreaRef
+    },
+    children
+  });
+}
+function useAreas() {
+  const context = useContext(AreasContext);
+  if (!context)
+    throw new Error("useAreas context must be use inside AreasContext");
+  return context;
+}
+const AreaContext = createContext(null);
+const getParmsFromValue = (key, data) => {
+  try {
+    if (Array.isArray(data)) {
+      let ob = data.find((f) => f.id === key);
+      if (ob) {
+        ob = JSON.parse(ob.value);
+      }
+      return ob;
+    }
+  } catch (error) {
+  }
+  return void 0;
+};
+const AreaProvider = forwardRef((props, ref) => {
+  const {
+    children,
+    id,
+    active
+  } = props;
+  const {
+    networkOperation
+  } = useNetwork();
+  const [status, setStatus] = useState("init");
+  const [layouts, setLayouts] = useState([]);
+  const [allLayouts, setAllLayouts] = useState({});
+  const [hashWindowsLayouts, setHashhWindowsLayouts] = useState({});
+  const windowsLayoutsBack = useRef({});
+  const [windowsPopUps, setWindowsPopUps] = useState([]);
+  const [, setSelectedWindow] = useState("");
+  const {
+    openModal,
+    closeModal
+  } = useModal();
+  const {
+    activeAreasNetwork
+  } = useAreas();
+  useImperativeHandle(ref, () => ({
+    addWindow
+  }), []);
+  const WindowPopUpZindex = useRef(999);
+  const getWindowPopUpZindex = useCallback(() => {
+    WindowPopUpZindex.current++;
+    return WindowPopUpZindex.current;
+  }, []);
+  useEffect(() => {
+    console.log("useEffect AreaProvider");
+    return () => {
+      console.log("useEffect cluanUp AreaProvider****");
+    };
+  }, []);
+  useEffect(() => {
+    if (active && status === "init") {
+      setStatus("load");
+    }
+  }, [active]);
+  console.log("Rendeer AreaProvider status", status, activeAreasNetwork);
+  useEffect(() => {
+    let mounted = true;
+    if (status === "load") {
+      if (activeAreasNetwork) {
+        console.log("useEffect Load Cargarcokies");
+        networkOperation({
+          method: "GET",
+          endPoint: `cookies`,
+          parms: {
+            f: [{
+              n: "container_id",
+              o: "c",
+              o1: id
+            }]
+          },
+          toastSuccess: false,
+          toastError: false
+        }).then((_response) => {
+          if (mounted) {
+            const layoutParms = getParmsFromValue("layout_parms", _response.data);
+            const windows = getParmsFromValue("windows", _response.data);
+            if (layoutParms) {
+              setAllLayouts(layoutParms);
+            }
+            if (windows) {
+              const newLayouts = [];
+              const newHashLayouts = {};
+              for (const key in windows) {
+                const element = windows[key];
+                if (element && element["layoutProps"] && element["mfProps"] && element["emergeType"] === "layout" && element["winType"] === "microfrontend") {
+                  element["layoutProps"].i = key;
+                  newLayouts.push(element["layoutProps"]);
+                  newHashLayouts[key] = {
+                    ...element,
+                    container_id: key,
+                    emergeType: "layout",
+                    onClose: onCloseWindowLayout
+                  };
+                }
+              }
+              console.log("GET cookies", layoutParms, newHashLayouts);
+              setLayouts(newLayouts);
+              setHashhWindowsLayouts(newHashLayouts);
+            }
+            setStatus("loaded");
+          }
+        }).catch((_response) => {
+          setStatus("loaded");
+        });
+      } else {
+        setStatus("loaded");
+      }
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [status]);
+  useEffect(() => {
+    console.log("useEffect SaveWindow", status, hashWindowsLayouts);
+    if (status === "loaded") {
+      let nrKeys = 0;
+      const saveObjetc = {};
+      for (const key in hashWindowsLayouts) {
+        const element = hashWindowsLayouts[key];
+        const newElement = {
+          ...element
+        };
+        delete newElement.onClose;
+        if (element.winType === "microfrontend") {
+          saveObjetc[key] = newElement;
+          nrKeys++;
+        }
+      }
+      console.log("saveWindows", nrKeys, saveObjetc, JSON.stringify(saveObjetc));
+      if (activeAreasNetwork && nrKeys > 0) {
+        networkOperation({
+          method: "PUT",
+          endPoint: `cookies/windows/${id}/nomodule`,
+          data: {
+            value: JSON.stringify(saveObjetc)
+          },
+          toastSuccess: false,
+          toastError: false
+        });
+      }
+    }
+  }, [hashWindowsLayouts]);
+  const debouncedLayoutChange = useCallback(debounce((currentLayouts, newAllLayouts) => {
+    currentLayouts.forEach((layout) => {
+      const {
+        i
+      } = layout;
+      if (i === "none")
+        return;
+      if (isEqual(layout, windowsLayoutsBack.current[i]))
+        return;
+    });
+    setAllLayouts(newAllLayouts);
+    if (activeAreasNetwork) {
+      networkOperation({
+        method: "PUT",
+        endPoint: `cookies/layout_parms/${id}/nomodule`,
+        data: {
+          value: JSON.stringify(newAllLayouts)
+        },
+        toastSuccess: false,
+        toastError: false
+      });
+    }
+  }, 2e3), [layouts]);
+  const onLayoutChange = useCallback((currentLayouts, newAllLayouts) => {
+    debouncedLayoutChange(currentLayouts, newAllLayouts);
+  }, [debouncedLayoutChange]);
+  const onCloseWindowLayout = useCallback((removeLayoutId) => {
+    setHashhWindowsLayouts((lastHashhWL) => {
+      const newLayouts = {
+        ...lastHashhWL
+      };
+      delete newLayouts[removeLayoutId];
+      return newLayouts;
+    });
+    delete windowsLayoutsBack.current[removeLayoutId];
+  }, []);
+  const onCloseWindowPopUp = useCallback((removePopUpId) => {
+    setWindowsPopUps((lastPopUpsMfs) => {
+      const newPopUps = [...lastPopUpsMfs];
+      return newPopUps.filter((p) => p.container_id !== removePopUpId);
+    });
+  }, []);
+  const onCloseWindowModal = useCallback((_removePopUpId) => {
+    closeModal();
+  }, []);
+  const addWindowPopUp = useCallback((container_id, newWindowPopupProps) => {
+    setWindowsPopUps((lastPopUpsMfs) => {
+      return [{
+        ...newWindowPopupProps,
+        emergeType: "popup",
+        container_id,
+        onClose: onCloseWindowPopUp
+      }, ...lastPopUpsMfs];
+    });
+  }, []);
+  const addWindowModal = useCallback((container_id, newWindowProps) => {
+    openModal({
+      window: /* @__PURE__ */ jsx(Window, {
+        ...newWindowProps,
+        container_id,
+        onClose: onCloseWindowModal
+      })
+    });
+  }, []);
+  const addWindowLayout = useCallback((container_id, newWindow) => {
+    const newLayout = {
+      ...newWindow.layoutProps,
+      i: container_id,
+      isDraggable: true,
+      isResizable: true,
+      winType: newWindow.winType
+    };
+    setLayouts((lastLayout) => [...lastLayout, newLayout]);
+    setHashhWindowsLayouts((lastHashWindowsLayouts) => {
+      return {
+        ...lastHashWindowsLayouts,
+        [container_id]: {
+          ...newWindow,
+          container_id,
+          emergeType: "layout",
+          onClose: onCloseWindowLayout
+        }
+      };
+    });
+    windowsLayoutsBack.current[container_id] = {
+      ...newLayout
+    };
+  }, []);
+  const addWindow = useCallback((newWindow) => {
+    const newId = `${id}_window_${new Date().getTime()}_${(Math.random() * 1e3).toFixed(0)}`;
+    console.log("addWindow", newWindow.winType, newWindow.emergeType, newId);
+    if (newWindow.emergeType === "layout") {
+      addWindowLayout(newId, newWindow);
+    } else if (newWindow.emergeType === "popup") {
+      addWindowPopUp(newId, newWindow);
+    } else if (newWindow.emergeType === "modal") {
+      addWindowModal(newId, newWindow);
+    }
+    return newId;
+  }, []);
+  const isWindowSelected = useCallback((lookForThisId) => {
+    if (windowsPopUps.findIndex((wp) => wp.container_id === lookForThisId) > -1) {
+      return true;
+    }
+    return false;
+  }, [hashWindowsLayouts, windowsPopUps]);
+  const selectWindow = useCallback((newSeletectedId) => {
+    setSelectedWindow(newSeletectedId);
+  }, []);
+  return /* @__PURE__ */ jsx(AreaContext.Provider, {
+    value: {
+      id,
+      status,
+      isWindowSelected,
+      selectWindow,
+      getWindowPopUpZindex,
+      allLayouts,
+      layouts,
+      hashWindowsLayouts,
+      addWindow,
+      onCloseWindowLayout,
+      onLayoutChange,
+      windowsPopUps,
+      onCloseWindowPopUp
+    },
+    children
+  });
+});
+AreaProvider.displayName = "AreaProvider";
+React__default.memo(AreaProvider);
+const useArea = () => {
+  const context = useContext(AreaContext);
+  if (!context)
+    throw new Error("useArea context must be use inside AreaContext");
+  return context;
+};
+const WrapperPoups = styled("div")(() => ({
+  zIndex: 1,
+  " .react-draggable": {
+    position: "absolute"
+  }
+}));
+const WrapperPopUpWindow = styled("div")(() => ({
+  height: "100%",
+  "&.m4l_selected": {
+    borderTop: "1px solid green"
+  }
+}));
+const WindowPopUp = (props) => {
+  const {
+    zIndex,
+    windowProps: rect
+  } = props;
+  const {
+    isWindowSelected,
+    selectWindow,
+    getWindowPopUpZindex
+  } = useArea();
+  const [currentZIndex, setZindex] = useState(zIndex || getWindowPopUpZindex());
+  const isSelected = isWindowSelected(props.container_id);
+  const onTouch = () => {
+    if (!isSelected) {
+      selectWindow(props.container_id);
+      setZindex(getWindowPopUpZindex());
+    }
+  };
+  return /* @__PURE__ */ jsx(DraggableWindow, {
+    handle: ".m4l_draggable_handle",
+    cancel: "",
+    defaultPosition: rect,
+    children: /* @__PURE__ */ jsx(ResizeableWindow, {
+      width: rect.width,
+      height: rect.height,
+      style: {
+        zIndex: currentZIndex,
+        position: "absolute"
+      },
+      className: isSelected ? "m4l_selected" : "",
+      onResizeStart: () => {
+        onTouch();
+      },
+      children: /* @__PURE__ */ jsx(WrapperPopUpWindow, {
+        onMouseDown: onTouch,
+        children: /* @__PURE__ */ jsx(Window, {
+          ...props
+        })
+      })
+    })
+  });
+};
+const ResponsiveGridLayout = reactGridLayout.exports.WidthProvider(reactGridLayout.exports.Responsive);
+const GridLayout = () => {
+  const {
+    status,
+    allLayouts,
+    layouts,
+    hashWindowsLayouts,
+    windowsPopUps,
+    onLayoutChange
+  } = useArea();
+  function onBreakpointChange(_newBreakpoint, _newCols) {
+  }
+  if (status === "init") {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  } else if (status === "load") {
+    return /* @__PURE__ */ jsx("div", {
+      children: "Loading..."
+    });
+  }
+  return /* @__PURE__ */ jsxs(ResponsiveGridLayout, {
+    className: "layout",
+    onLayoutChange,
+    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: allLayouts,
+    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) => /* @__PURE__ */ jsx(WindowPopUp, {
+        ...wp
+      }, wp.container_id))
+    }, "none"), layouts.map((l) => {
+      if (hashWindowsLayouts[l.i]) {
+        return /* @__PURE__ */ jsx("div", {
+          "data-grid": l,
+          children: /* @__PURE__ */ jsx(MemonizedWindow, {
+            ...hashWindowsLayouts[l.i]
+          })
+        }, l.i);
+      }
+      return null;
+    })]
+  });
+};
+const WrapperArea = styled("div")(() => ({
+  flexDirection: "column",
+  flexGrow: "1",
+  position: "absolute",
+  height: "100%",
+  width: "100%",
+  overflow: "auto",
+  justifyContent: "top",
+  alignItems: "flex-start",
+  border: "1px dashed black",
+  visibility: "hidden",
+  display: "none",
+  "&.active": {
+    display: "flex",
+    visibility: "visible"
+  },
+  "& .layout": {
+    overflow: "scroll",
+    minWidth: "100%",
+    minHeight: "100%"
+  },
+  "& .selected": {
+    borderTop: "1px solid green"
+  }
+}));
+const Area = (props) => {
+  const {
+    id,
+    active
+  } = props;
+  const {
+    setAreaRef
+  } = useAreas();
+  const setAreaProviderRef = (element) => {
+    console.log("setAreaProviderRef", element, id);
+    if (element) {
+      setAreaRef(id, element);
+    }
+  };
+  console.log("Render Area");
+  return /* @__PURE__ */ jsx(WrapperArea, {
+    className: active ? "active" : "",
+    children: /* @__PURE__ */ jsx(AreaProvider, {
+      ...props,
+      ref: setAreaProviderRef,
+      children: /* @__PURE__ */ jsx(GridLayout, {})
+    })
+  });
+};
+Area.displayName = "Area";
+const WrapperAreasAdmin = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  flexGrow: "1",
+  position: "relative",
+  marginTop: theme.spacing(3)
+}));
+const WrapperAreaChips = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "row",
+  border: "1px solid gray",
+  "&.active": {
+    border: "1px solid red"
+  }
+}));
+const AreaSelect = styled("div")(({
+  theme
+}) => ({
+  height: "100%",
+  width: theme.spacing(1),
+  backgroundColor: theme.palette.background.default,
+  "&.active": {
+    backgroundColor: theme.palette.primary.main
+  }
+}));
+const AreaChip = (props) => {
+  const {
+    areaId,
+    active,
+    areaName
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    deleteArea,
+    selectArea
+  } = useAreas();
+  return /* @__PURE__ */ jsxs(WrapperAreaChips, {
+    className: active ? "active" : "",
+    onClick: () => {
+      selectArea(areaId);
+    },
+    children: [/* @__PURE__ */ jsx(AreaSelect, {
+      className: active ? "active" : ""
+    }), /* @__PURE__ */ jsx("span", {
+      children: areaName
+    }), /* @__PURE__ */ jsx(IconButton, {
+      src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/users/assets/icons/edit.svg`,
+      size: "small",
+      onClick: () => {
+      }
+    }), /* @__PURE__ */ jsx(IconButton, {
+      src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/users/assets/icons/delete.svg`,
+      size: "small",
+      onClick: () => deleteArea(areaId)
+    })]
+  });
+};
+AreaChip.displayName = "AreaButtons";
+function AreasAdmin() {
+  const {
+    areas,
+    currentArea,
+    addArea,
+    status
+  } = useAreas();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  if (status !== "loaded") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(WrapperAreasAdmin, {
+    id: "ContainerTabs",
+    children: [areas.map((area) => /* @__PURE__ */ jsx(AreaChip, {
+      areaId: area.id,
+      active: area.id === currentArea,
+      areaName: area.name
+    }, area.id)), /* @__PURE__ */ jsx(IconButton, {
+      src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/users/assets/icons/add.svg`,
+      size: "small",
+      onClick: addArea
+    })]
+  });
+}
+const ContainerAreas = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  flexGrow: "1",
+  position: "relative",
+  marginTop: theme.spacing(3)
+}));
+function AreasContainer() {
+  const {
+    areas,
+    currentArea,
+    status
+  } = useAreas();
+  useEffect(() => {
+    console.log("useEffect AreasContainer");
+  }, []);
+  if (status !== "loaded") {
+    return null;
+  }
+  console.log("Render AreasContainer", status, currentArea, areas);
+  return /* @__PURE__ */ jsx(ContainerAreas, {
+    id: "ContainerAreas",
+    children: areas.map((area) => {
+      return /* @__PURE__ */ jsx(Area, {
+        id: area.id,
+        active: currentArea === area.id
+      }, area.id);
+    })
+  });
+}
+const useDynamicMFParameters = () => {
+  const context = useContext(DynamicMFParmsContext);
+  if (!context)
+    throw new Error("useDynamicMFParameters context must be use inside DynamicMFParmsContext");
+  return context;
+};
+const WrapperMessageIlustration = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%"
+}));
+const ModalContent = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  gridGap: theme.spacing(5),
+  flexGrow: 1,
+  [theme.breakpoints.up("sm")]: {
+    display: "grid",
+    flexDirection: "row",
+    gridTemplateColumns: "1fr 1fr"
+  }
+}));
+const IllustrationContainer = styled("div")(({
+  theme,
+  variant
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  "& > span": {
+    background: variant === "warning" ? theme.palette.warning.main : variant === "delete" ? theme.palette.error.main : variant === "info" ? theme.palette.info.main : "theme.palette.text.primary"
+  }
+}));
+const MessageContainer = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center"
+}));
+const MessageIlustration = (props) => {
+  const {
+    variant = "info",
+    msg = "Are you sure you want to perform this action? Once complete, the information will be deleted."
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
+  const illustrationError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
+  return /* @__PURE__ */ jsx(WrapperMessageIlustration, {
+    children: /* @__PURE__ */ jsxs(ModalContent, {
+      children: [/* @__PURE__ */ jsx(IllustrationContainer, {
+        variant,
+        children: /* @__PURE__ */ jsx(Icon, {
+          src: variant === "warning" ? illustrationWarning : variant === "delete" ? illustrationError : illustrationInfo,
+          size: "230px"
+        })
+      }), /* @__PURE__ */ jsx(MessageContainer, {
+        children: /* @__PURE__ */ jsx(Typography, {
+          variant: "body1",
+          children: msg
+        })
+      })]
+    })
+  });
+};
+const WrapperWindowBase = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+const WrapperHeader = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  minHeight: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden"
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  alignItems: "center",
+  cursor: "move",
+  ...theme.typography.subtitle1,
+  color: theme.palette.text.primary
+}));
+const IconHeader = styled("div")(({
+  theme,
+  variant
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: theme.spacing(1.5),
+  "& > span": {
+    background: getThemeVariantColor(theme, variant)
+  }
+}));
+const ModalTitle = styled("div")(({
+  theme,
+  variant
+}) => ({
+  ...theme.typography.subtitle1,
+  color: getThemeVariantColor(theme, variant),
+  width: "100%",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden"
+}));
+const Header = (props) => {
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    variant,
+    title,
+    onClickCancel
+  } = props;
+  const iconSrcWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/warning.svg`;
+  const iconSrcError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/error.svg`;
+  const iconSrcInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/info.svg`;
+  const iconDefault = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/icon_bar_title.svg`;
+  return /* @__PURE__ */ jsxs(WrapperHeader, {
+    id: "Header",
+    className: "m4l_draggable_handle",
+    children: [/* @__PURE__ */ jsx(IconHeader, {
+      variant,
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: variant === "warning" ? iconSrcWarning : variant === "delete" ? iconSrcError : variant === "info" ? iconSrcInfo : iconDefault
+      })
+    }), /* @__PURE__ */ jsx(ModalTitle, {
+      variant,
+      children: title
+    }), /* @__PURE__ */ jsx(IconButton$1, {
+      onClick: onClickCancel,
+      "aria-label": "click",
+      children: /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/close.svg`
+      })
+    })]
+  });
+};
+const WindowBase = (props) => {
+  const {
+    variant,
+    title,
+    children,
+    onClickCancel
+  } = props;
+  const {
+    closeModal
+  } = useModal();
+  const onCloseCancel = () => {
+    onClickCancel && onClickCancel();
+    closeModal();
+  };
+  return /* @__PURE__ */ jsxs(WrapperWindowBase, {
+    id: "WrapperWindowBase",
+    children: [/* @__PURE__ */ jsx(Header, {
+      variant,
+      title,
+      onClickCancel: onCloseCancel
+    }), children]
+  });
+};
+const WindowConfirm = (props) => {
+  const {
+    variant,
+    title,
+    onClickCancel,
+    onClickIntro
+  } = props;
+  const {
+    closeModal
+  } = useModal();
+  const onCloseCancel = () => {
+    onClickCancel && onClickCancel();
+    closeModal();
+  };
+  return /* @__PURE__ */ jsxs(WindowBase, {
+    title,
+    variant,
+    onClickCancel,
+    children: [/* @__PURE__ */ jsx(MessageIlustration, {}), /* @__PURE__ */ jsxs(Actions, {
+      children: [/* @__PURE__ */ jsx(ActionCancel, {
+        onClick: onCloseCancel
+      }), " ", /* @__PURE__ */ jsx(ActionIntro, {
+        onClick: onClickIntro,
+        color: getVariantColor(variant)
+      })]
+    })]
+  });
+};
+const DraggableWindow = (props) => {
+  const {
+    children,
+    handle = "m4l_draggable_handle",
+    cancel = '[class*="MuiDialogContent-root"]',
+    defaultPosition,
+    ...others
+  } = props;
+  const [position, setPosition] = useState(defaultPosition || {
+    x: 0,
+    y: 0
+  });
+  const onDrag = (_e, data) => {
+    const {
+      x,
+      y
+    } = data;
+    const xPos = x < 0 ? 0 : Math.round(x);
+    const yPos = y < 0 ? 0 : Math.round(y);
+    setPosition({
+      x: xPos,
+      y: yPos
+    });
+  };
+  return /* @__PURE__ */ jsx(cjs.exports, {
+    handle,
+    cancel,
+    position,
+    onDrag,
+    ...others,
+    children
+  });
+};
+export {
+  A as Accordion,
+  A3 as ActionCancel,
+  A5 as ActionFormCancel,
+  A6 as ActionFormIntro,
+  A4 as ActionIntro,
+  b as Actions,
+  Area,
+  AreasAdmin,
+  AreasContainer,
+  AreasContext,
+  AreasProvider,
+  A2 as Avatar,
+  B4 as BooleanFormatter,
+  B2 as BoxIcon,
+  B3 as Breadcrumbs,
+  B as Button,
+  C as CircularProgress,
+  D as DataGrid,
+  D3 as DateFormatter,
+  DraggableWindow,
+  D2 as DynamicFilter,
+  DynamicMFParmsContext,
+  DynamicMFParmsProvider,
+  E as ErrorLabel,
+  H as HelmetPage,
+  I2 as Icon,
+  I as IconButton,
+  a as IconButtonAnimate,
+  I3 as Image,
+  L3 as LanguagePopover,
+  L4 as LinearProgress,
+  L5 as LinkWithRoute,
+  L6 as Loadable,
+  L2 as LoadingButton,
+  L as LoadingScreen,
+  L7 as Logo,
+  M2 as MenuActions,
+  M as ModalContext,
+  M3 as ModalDialog,
+  a2 as ModalProvider,
+  M4 as MotionContainer,
+  M5 as MotionLazyContainer,
+  N2 as NoItemSelected,
+  N as NumberEditor,
+  O as ObjectLogs,
+  P3 as Pager,
+  P5 as PaperForm,
+  P4 as Period,
+  P7 as PointsFormatter,
+  P2 as Popover,
+  P8 as PriceFormatter,
+  P as PropagateLoader,
+  P6 as PropertyValue,
+  R3 as RHFAutocomplete,
+  R9 as RHFAutocompleteAsync,
+  R4 as RHFCheckbox,
+  R5 as RHFDateTime,
+  R10 as RHFMultiCheckbox,
+  R7 as RHFPeriod,
+  R12 as RHFRadioGroup,
+  R11 as RHFSelect,
+  R6 as RHFTextField,
+  a3 as RHFTextFieldPassword,
+  R8 as RHFUploadImage,
+  R as RHFormProvider,
+  R2 as ResizeableWindow,
+  S as ScrollBar,
+  S3 as ScrollToTop,
+  S2 as SplitLayout,
+  T as Tab,
+  T2 as TextEditor,
+  T3 as Typography,
+  U as UncertaintyFormatter,
+  WindowBase,
+  WindowConfirm,
+  c as columnBooleanFormatter,
+  d3 as columnDateFormatter,
+  c4 as columnNestedValueFormatter,
+  c3 as columnPointsFormatter,
+  c5 as columnPriceFormatter,
+  c2 as columnUncertaintyFormatter,
+  d as defaultCommonActionsDictionary,
+  d4 as defaultDynamicFilterDictionary,
+  d7 as defaultFormattersDictionary,
+  d2 as defaultModalDialogDictionary,
+  d5 as defaultNoItemSelectedDictionary,
+  d6 as defaultObjectLogDictionary,
+  g as getCommonActionsDictionary,
+  b2 as getDataGridRowsFromSet,
+  g7 as getDynamicFilterComponentsDictionary,
+  g12 as getFormatPoints,
+  g13 as getFormatPrice,
+  g14 as getFormattersComponentsDictionary,
+  g6 as getGridComponentsDictionary,
+  g3 as getModalDialogComponentsDictionary,
+  g8 as getNoItemSelectedComponentsDictionary,
+  g9 as getObjectLogsComponentsDictionary,
+  g2 as getPagerComponentsDictionary,
+  g5 as getPeriodComponetsDictionary,
+  g10 as getRHFAutocompleteAsyncComponentsDictionary,
+  g4 as getRHFAutocompleteComponentsDictionary,
+  g11 as getUncertaintyFormat,
+  useDynamicMFParameters,
+  u2 as useFormAddEdit,
+  u as useModal,
+  v2 as varBounce,
+  v3 as varContainer,
+  v as varFade,
+  v4 as varTranEnter,
+  a4 as varTranExit,
+  b3 as varTranHover
+};