@m4l/components 0.1.36 → 0.1.37

package/dist/components/DynamicFilter/{index.32f84995.js → index.071aa795.js}

@@ -1,5 +1,5 @@
 import { S as ScrollBar } from "../ScrollBar/index.39eeb2de.js";
-import { styled } from "@mui/material/styles";
+import { styled, alpha as alpha$1 } from "@mui/material/styles";
 import { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
 import { useModuleDictionary, voidFunction, useEnvironment, useHostTools, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
@@ -12,30 +12,32 @@ import { alpha, styled as styled$1, Skeleton, MenuItem, useTheme, Popper, ClickA
 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.7feaec71.js";
-import { I as Icon } from "../Icon/index.1dbd3e58.js";
-import "../hook-form/RHFPeriod/index.2b8e63a2.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.b17d68f4.js";
+import { I as Icon } from "../Icon/index.8d754623.js";
+import "../hook-form/RHFPeriod/index.3772295b.js";
 import "../ErrorLabel/index.c8615f16.js";
-import "../Period/index.74f35862.js";
-import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.ba86f72f.js";
+import "../Period/index.abe445bd.js";
+import { A as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.d3e1f36e.js";
 import "@mui/material/Button";
-import "../../contexts/ModalContext/index.0797eb17.js";
-import "../../react-draggable.3b5b6680.js";
-import "../ModalDialog/index.91777582.js";
-import "../Resizeable/index.44a0dd46.js";
-import "../../index.js";
+import "../../contexts/ModalContext/index.b90eec94.js";
+import "../../react-draggable.84d6b038.js";
+import "../ModalDialog/index.a684827f.js";
+import "../Resizeable/index.c96c0f09.js";
+import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import "../modal/WindowConfirm.0b8a6818.js";
+import "../modal/WindowBase.04439b8e.js";
 import "@mui/lab";
 import "lodash/isString";
 import "react-dropzone";
 import "../Image/index.93d5f37f.js";
 import "../hook-form/RHFUpload/index.d5cc7c13.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.e3adaa33.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.82f16572.js";
 import "simplebar/dist/simplebar.min.css";
-import { F as FilterButton } from "../mui_extended/Button/index.55fc70dc.js";
-import { P as Popover } from "../mui_extended/Popover/index.97cf3a3e.js";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.ee17bddd.js";
+import { P as Popover } from "../mui_extended/Popover/index.53c77d23.js";
 import { R as RHFormProvider } from "../../contexts/RHFormContext/index.d88e6e27.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.4b36950f.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.35a0d240.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.9230c57b.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.a0a341c7.js";
 const WrapperApplyedFilters = styled("div")(({
   theme
 }) => ({
@@ -1221,6 +1223,79 @@ const ClearFilters = () => {
   }
   return /* @__PURE__ */ jsx(Fragment, {});
 };
+const SKTWrapperFilterButton = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75),
+  background: alpha$1(theme.palette.primary.main, 0.3)
+}));
+const WrapperFilterButton = styled("div")(() => ({
+  "&.isDirty": {
+    animationName: "dirtyEffect",
+    animationDuration: "1s",
+    animationFillMode: "both",
+    animationIterationCount: "infinite",
+    transition: "all .3s",
+    "@keyframes dirtyEffect": {
+      "20%": {
+        opacity: 1
+      },
+      "50%": {
+        opacity: 0.5
+      },
+      "100%": {
+        opacity: 1
+      }
+    }
+  },
+  "&.isDirtyError": {}
+}));
+function FilterButton() {
+  const {
+    isSkeleton,
+    fireOnChangeFilters,
+    automatic,
+    isDirty,
+    isValid
+  } = useBase();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTWrapperFilterButton, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        height: 20
+      })
+    });
+  }
+  const color = useMemo(() => {
+    if (automatic || !isDirty) {
+      return "action.active";
+    }
+    if (!isValid) {
+      return "error.main";
+    }
+    return "primary.main";
+  }, [automatic, isValid, isDirty]);
+  return /* @__PURE__ */ jsx(WrapperFilterButton, {
+    id: "WrapperFilterButton",
+    className: isDirty && isValid ? "isDirty" : "",
+    children: /* @__PURE__ */ jsx(IconButton, {
+      bgColor: color,
+      dictionaryTooltip: "dynamic_filter.filter_tooltip",
+      onClick: () => fireOnChangeFilters(),
+      "aria-label": "settings",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/${automatic ? "refresh" : "search"}.svg`
+    })
+  });
+}
 const WrapperInputFilter = styled("div")(({
   theme
 }) => ({
@@ -1579,6 +1654,5 @@ const defaultDynamicFilterDictionary = {
 export {
   DynamicFilter as D,
   defaultDynamicFilterDictionary as d,
-  getDynamicFilterComponentsDictionary as g,
-  useBase as u
+  getDynamicFilterComponentsDictionary as g
 };

package/dist/components/Icon/{index.1dbd3e58.js → index.8d754623.js}

@@ -1,8 +1,64 @@
-import { styled } from "@mui/material";
-import { useState, useMemo, useEffect } from "react";
-import { useTheme } from "@mui/material/styles";
-import { g as getPaletteColor } from "../../utils/index.9dce2e2f.js";
+import { m } from "framer-motion";
+import { forwardRef, useState, useMemo, useEffect } from "react";
+import { IconButton, Box, styled } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@mui/material/styles";
+import { g as getPaletteColor } from "../../utils/index.899eb67b.js";
+const varSmall = {
+  hover: {
+    scale: 1.1
+  },
+  tap: {
+    scale: 0.95
+  }
+};
+const varMedium = {
+  hover: {
+    scale: 1.09
+  },
+  tap: {
+    scale: 0.97
+  }
+};
+const varLarge = {
+  hover: {
+    scale: 1.08
+  },
+  tap: {
+    scale: 0.99
+  }
+};
+function AnimateWrap({
+  size,
+  children
+}) {
+  const isSmall = size === "small";
+  const isLarge = size === "large";
+  return /* @__PURE__ */ jsx(Box, {
+    component: m.div,
+    whileTap: "tap",
+    whileHover: "hover",
+    variants: isSmall && varSmall || isLarge && varLarge || varMedium,
+    sx: {
+      display: "inline-flex"
+    },
+    children
+  });
+}
+const IconButtonAnimate = forwardRef(({
+  children,
+  size = "medium",
+  ...other
+}, ref) => /* @__PURE__ */ jsx(AnimateWrap, {
+  size,
+  children: /* @__PURE__ */ jsx(IconButton, {
+    size,
+    ref,
+    ...other,
+    children
+  })
+}));
+IconButtonAnimate.displayName = "IconButtonAnimate";
 const DivIcon = styled("div", {
   shouldForwardProp: (props) => props !== "src" && props !== "size" && props !== "bgColor" && props !== "rotationAngle" && props !== "angleTransition"
 })(({
@@ -92,5 +148,6 @@ function Icon(props) {
   });
 }
 export {
-  Icon as I
+  Icon as I,
+  IconButtonAnimate as a
 };

package/dist/components/LanguagePopover/index.cbc4b282.js

@@ -0,0 +1,144 @@
+import { useState, useEffect } from "react";
+import { styled, Stack, MenuItem } from "@mui/material";
+import { I as Image } from "../Image/index.93d5f37f.js";
+import { useLocales } from "@m4l/graphics";
+import { useEnvironment, useNetwork } from "@m4l/core";
+import "../Icon/index.8d754623.js";
+import "@mui/material/styles";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "../mui_extended/Accordion/index.a541c71c.js";
+import "../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
+import "@mui/lab";
+import { I as ImageButton } from "../mui_extended/Button/index.86a155a2.js";
+import { P as Popover } from "../mui_extended/Popover/index.53c77d23.js";
+import "../mui_extended/MenuActions/index.ee17bddd.js";
+import "../mui_extended/Pager/index.74d3f5fc.js";
+import "../mui_extended/Tab/index.e0653a0a.js";
+const LabelItem = styled("span")(({
+  theme
+}) => ({
+  marginLeft: theme.spacing(1)
+}));
+const ContainerProgress = styled("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(0.75, 0),
+  margin: theme.spacing(0, 1.25)
+}));
+const ContainerMenuItems = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column"
+}));
+function LanguagePopover() {
+  const {
+    currentLocale,
+    onChangeLocale
+  } = useLocales();
+  const {
+    domain_token
+  } = useEnvironment();
+  const {
+    networkOperation
+  } = useNetwork();
+  const [open, setOpen] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [allLocales, setAllLocales] = useState([]);
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (open === null || loading || allLocales.length > 0) {
+      return;
+    }
+    setLoading(true);
+    networkOperation({
+      method: "GET",
+      endPoint: `na/locales`,
+      parms: {
+        domain_token
+      }
+    }).then((response) => {
+      if (mounted) {
+        setAllLocales(response.data);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(ImageButton, {
+      className: "m4l_language_popover",
+      onClick: handleOpen,
+      sx: {
+        width: 40,
+        height: 40,
+        ...open && {
+          bgcolor: "action.selected"
+        }
+      },
+      src: currentLocale?.url_icon || "",
+      alt: currentLocale?.name,
+      width: "24px",
+      height: "24px",
+      skeletonVariant: "circle",
+      tooltip: "dddd"
+    }), /* @__PURE__ */ jsx(Popover, {
+      arrowType: "top-right",
+      open: Boolean(open),
+      anchorEl: open,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      onClose: handleClose,
+      sx: {
+        mt: 1.5,
+        ml: 0.75,
+        width: 180,
+        rowGap: "100px",
+        "& .MuiMenuItem-root": {
+          px: 1,
+          typography: "body2",
+          borderRadius: 0.75
+        }
+      },
+      children: /* @__PURE__ */ jsxs(ContainerMenuItems, {
+        children: [allLocales.length === 0 && /* @__PURE__ */ jsx(ContainerProgress, {
+          children: /* @__PURE__ */ jsx(CircularProgress, {
+            size: "20px"
+          })
+        }), allLocales.length > 0 && /* @__PURE__ */ jsx(Stack, {
+          spacing: 0.75,
+          children: allLocales.map((option) => /* @__PURE__ */ jsxs(MenuItem, {
+            selected: option.lang === currentLocale?.lang && option?.script === currentLocale?.script && option?.region === currentLocale?.region,
+            onClick: () => {
+              onChangeLocale(option);
+              handleClose();
+            },
+            children: [/* @__PURE__ */ jsx(Image, {
+              alt: option.name,
+              src: option.url_icon,
+              width: "24px",
+              height: "24px"
+            }), /* @__PURE__ */ jsx(LabelItem, {
+              children: option.name
+            })]
+          }, option.lang || option.script || option.region))
+        })]
+      })
+    })]
+  });
+}
+export {
+  LanguagePopover as L
+};

package/dist/components/Loadable/{index.8c6006be.js → index.117eaced.js}

@@ -1,5 +1,5 @@
 import { Suspense } from "react";
-import { P as PropagateLoader } from "../animate/PropagateLoader/index.eb401503.js";
+import { P as PropagateLoader } from "../animate/PropagateLoader/index.be5b02c3.js";
 import { jsx } from "react/jsx-runtime";
 const Loadable = (Component) => function EmbededLoadable(props) {
   return /* @__PURE__ */ jsx(Suspense, {

package/dist/components/ModalDialog/{index.91777582.js → index.a684827f.js}

@@ -1,12 +1,12 @@
 import { Dialog, Paper } from "@mui/material";
-import { c as cjs } from "../../react-draggable.3b5b6680.js";
-import { u as useModal } from "../../hooks/useModal/index.32da4dcb.js";
+import { c as cjs } from "../../react-draggable.84d6b038.js";
+import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
 import { styled } from "@mui/material/styles";
-import { a as getThemeVariantColor } from "../../utils/index.9dce2e2f.js";
-import { R as ResizeableWindow } from "../Resizeable/index.44a0dd46.js";
+import { a as getThemeVariantColor } from "../../utils/index.899eb67b.js";
+import { R as ResizeableWindow } from "../Resizeable/index.c96c0f09.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.ba86f72f.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.d3e1f36e.js";
 const WrapperDialog = styled(Dialog)(() => ({}));
 const Container = styled("div")(({ theme }) => ({
   display: "flex",

package/dist/components/ObjectLogs/{index.9d3fc2ae.js → index.4a859658.js}

@@ -1,23 +1,25 @@
 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.156cc30c.js";
+import { D as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.67260455.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.80522f69.js";
 import { Tooltip, IconButton } from "@mui/material";
 import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
-import { R as ReactJson } from "../../react-json-view.03ae95f5.js";
+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.32da4dcb.js";
-import { I as Icon } from "../Icon/index.1dbd3e58.js";
-import "../../react-draggable.3b5b6680.js";
-import "../ModalDialog/index.91777582.js";
-import "../Resizeable/index.44a0dd46.js";
-import { WindowBase } from "../../index.js";
-import "../CommonActions/components/Actions/index.ba86f72f.js";
+import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
+import { I as Icon } from "../Icon/index.8d754623.js";
+import "../../react-draggable.84d6b038.js";
+import "../ModalDialog/index.a684827f.js";
+import "../Resizeable/index.c96c0f09.js";
+import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import "../CommonActions/components/Actions/index.d3e1f36e.js";
 import "@mui/material/Button";
 import "react-hook-form";
 import "@mui/lab";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.32f84995.js";
+import "../modal/WindowConfirm.0b8a6818.js";
+import { W as WindowBase } from "../modal/WindowBase.04439b8e.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.071aa795.js";
 const Container$1 = styled("div")(() => ({
   height: "100%",
   width: "100%",

package/dist/components/PaperForm/{index.218a6c4b.js → index.c5948756.js}

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { I as Icon } from "../Icon/index.1dbd3e58.js";
+import { I as Icon } from "../Icon/index.8d754623.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 const WrapperPaper = styled("div")(({
   theme

package/dist/components/Period/{index.74f35862.js → index.abe445bd.js}

@@ -1,18 +1,20 @@
 import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
 import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
 import { useMemo } from "react";
-import { I as Icon } from "../Icon/index.1dbd3e58.js";
+import { I as Icon } from "../Icon/index.8d754623.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.ba86f72f.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.d3e1f36e.js";
 import "@mui/material/Button";
 import "react-hook-form";
-import "../../contexts/ModalContext/index.0797eb17.js";
-import "../../react-draggable.3b5b6680.js";
-import "../ModalDialog/index.91777582.js";
-import "../Resizeable/index.44a0dd46.js";
+import "../../contexts/ModalContext/index.b90eec94.js";
+import "../../react-draggable.84d6b038.js";
+import "../ModalDialog/index.a684827f.js";
+import "../Resizeable/index.c96c0f09.js";
 import "@m4l/graphics";
-import "../../index.js";
+import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import "../modal/WindowConfirm.0b8a6818.js";
 import "@mui/material/styles";
+import "../modal/WindowBase.04439b8e.js";
 import "@mui/lab";
 const ContainerPeriod = styled("div")(({
   theme,

package/dist/components/Resizeable/{index.44a0dd46.js → index.c96c0f09.js}

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { R as ResizableBox } from "../../react-resizable.6eae0397.js";
+import { R as ResizableBox } from "../../react-resizable.1d00271d.js";
 import { jsx } from "react/jsx-runtime";
 const WrapperResizeable = styled(ResizableBox)(({
   theme

package/dist/components/SplitLayout/{index.81fc4750.js → index.5a8355d8.js}

@@ -1,4 +1,4 @@
-import { S as SplitterLayout } from "../../react-splitter-layout.873aece3.js";
+import { S as SplitterLayout } from "../../react-splitter-layout.8b1655c8.js";
 import { styled } from "@mui/material/styles";
 import { jsx, jsxs } from "react/jsx-runtime";
 const WrapperSplit = styled("div")(({

package/dist/components/animate/PropagateLoader/index.be5b02c3.js

@@ -0,0 +1,30 @@
+import { styled, useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { P as PropagateLoader$1 } from "../../../node_modules.416f1da3.js";
+const WrapperPropageteLoader = styled("div")(({
+  theme
+}) => ({
+  right: 0,
+  bottom: 0,
+  zIndex: 99999,
+  width: "100%",
+  height: "100%",
+  position: "fixed",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: theme.palette.background.default
+}));
+const PropagateLoader = () => {
+  const {
+    palette
+  } = useTheme();
+  return /* @__PURE__ */ jsx(WrapperPropageteLoader, {
+    children: /* @__PURE__ */ jsx(PropagateLoader$1, {
+      color: palette.primary.main
+    })
+  });
+};
+export {
+  PropagateLoader as P
+};

package/dist/components/areas/components/AreasAdmin/index.6794b22f.js

@@ -0,0 +1,112 @@
+import { styled } from "@mui/material/styles";
+import { I as IconButton } from "../../../mui_extended/IconButton/index.82f16572.js";
+import { u as useAreas } from "../../hooks/useArea/index.9b85ce24.js";
+import { useEnvironment } from "@m4l/core";
+import "@mui/material";
+import "../../../Icon/index.8d754623.js";
+import "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import "../../../mui_extended/Accordion/index.a541c71c.js";
+import "../../../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "@mui/lab";
+import "../../../mui_extended/Button/index.86a155a2.js";
+import "../../../mui_extended/Popover/index.53c77d23.js";
+import "../../../mui_extended/MenuActions/index.ee17bddd.js";
+import "../../../mui_extended/Pager/index.74d3f5fc.js";
+import "../../../mui_extended/Tab/index.e0653a0a.js";
+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
+    })]
+  });
+}
+export {
+  AreasAdmin as A
+};

package/dist/components/areas/components/AreasContainer/index.a2f8899b.js

@@ -0,0 +1,43 @@
+import { styled } from "@mui/material/styles";
+import { A as Area } from "../index.7d6cd649.js";
+import "react-grid-layout/css/styles.css";
+import "../../../../react-resizable.1d00271d.js";
+import { u as useAreas } from "../../hooks/useArea/index.9b85ce24.js";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+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);
+    })
+  });
+}
+export {
+  AreasContainer as A
+};