@m4l/components 1.0.11 → 1.0.13

package/vendor.5b266106.js

@@ -1,3952 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React__default, { useState, useEffect, useMemo, useRef, createElement, createContext, useCallback, useContext, forwardRef, useImperativeHandle } from "react";
-import { useEnvironment, useModuleDictionary, useModuleSkeleton, getPropertyByString, evaluateWithContext, voidFunction } from "@m4l/core";
-import { S as SelectCellFormatter, D as DataGrid$1 } from "./react-data-grid.c5377916.js";
-import { I as IconButton$1 } from "./components/mui_extended/IconButton/index.d5b273e6.js";
-import { styled } from "@mui/material/styles";
-import { a as Table } from "./components/mui_extended/Tab/index.37d588d6.js";
-import { a as Pager } from "./components/mui_extended/Pager/index.8960227c.js";
-import { a as useModalSettings } from "./hooks/useModal/index.d14c7e46.js";
-import { generateUtilityClasses, IconButton, generateUtilityClass, useTheme, MenuItem, Skeleton, Autocomplete, Popper, TextField, Chip, styled as styled$1, Dialog, Checkbox, Box, Grid } from "@mui/material";
-import { P as Popover } from "./components/mui_extended/Popover/index.146ded9e.js";
-import { I as Icon, a as ArrowIcon } from "./components/Icon/index.8ecfb193.js";
-import { a as ICONS, I as ICONS$1 } from "./components/areas/icons.504ec098.js";
-import clsx from "clsx";
-import { unstable_composeClasses } from "@mui/base";
-import { ai as AREAS_VIEWER_CLASS_NAME, aj as AREAS_ADMIN_CLASS_NAME, ak as componentName$1, T as TEST_PROP_ID, al as RHFTAUTOCOMPLET_ROOT_TEST_ID, am as COMPONENT_CLASS_NAME, an as componentName$2, ao as DATAGRID_PREFIX_NAME, ap as componentName$3, aq as componentName$4, ar as componentName$5 } from "./components/areas/constants.0d3ba950.js";
-import { B as Badge } from "./components/mui_extended/Badge/index.4737c113.js";
-import { useResponsiveDesktop, useFormatter, useResponsiveContainerStore } from "@m4l/graphics";
-import { b as getAreasDictionary, c as DICCTIONARY, L as LABEL_BOOLEAN_YES, h as LABEL_BOOLEAN_NO, i as LABEL_BOOLEAN_TRUE, j as LABEL_BOOLEAN_FALSE, k as dictionary } from "./components/areas/dictionary.6168209a.js";
-import { shallow } from "zustand/shallow";
-import { a as getNameDataTestId$1 } from "./test/getNameDataTestId.aee44365.js";
-import { g as getComponentUtilityClass, a as getNameDataTestId, b as useOnClickOutside, e as isActive } from "./utils/index.c64c2dd1.js";
-import "./components/NavLink/index.9f5d5670.js";
-import "./components/ScrollToTop/index.e06f98f6.js";
-import "./components/animate/index.b8497385.js";
-import "./components/animate/MotionContainer/index.3032bd8f.js";
-import "./components/animate/MotionLazyContainer/index.d2902a6c.js";
-import "./components/animate/LoadingScreen/index.779690a7.js";
-import "./components/animate/PropagateLoader/index.a9da8d00.js";
-import "./components/animate/variants/fade.b561c0fc.js";
-import "./components/animate/variants/bounce.784aaaaa.js";
-import "./components/animate/variants/container.11f82b76.js";
-import "./components/animate/variants/transition.bd46b9ce.js";
-import { u as useAreasStore } from "./components/areas/hooks/useAreas/index.4039e30d.js";
-import * as Yup from "yup";
-import { R as RHFormProvider } from "./contexts/RHFormContext/index.95ebabc9.js";
-import { R as RHFTextField } from "./components/hook-form/RHFTextField/index.d207efc1.js";
-import { A as Actions$1, a as ActionCancel, b as ActionIntro } from "./components/CommonActions/index.19f39dca.js";
-import { T as Typography } from "./components/mui_extended/Typography/index.463f613f.js";
-import { S as ScrollBar } from "./components/ScrollBar/index.1e89bb44.js";
-import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import { B as Button } from "./components/mui_extended/Button/index.52852c42.js";
-import { L as LinearProgressIndeterminate, a as LinearProgress } from "./components/mui_extended/LinearProgress/index.e9455b2e.js";
-import { M as MFLoader } from "./components/MFLoader/index.29f445e2.js";
-import { a as WindowToolsMFProvider } from "./components/areas/contexts/WindowToolsMFContext/index.69d95c15.js";
-import { a as DynamicMFParmsProvider } from "./components/areas/contexts/DynamicMFParmsContext/index.37d1d444.js";
-import { R as RESPONSIVE_COLAPSED_HEIGHTS, a as RESPONSIVE_ROW_HEIGHTS, M as MARGIN_GRIDLAYOUT, P as PADDING_GRIDLAYOUT } from "./components/areas/contexts/AreasContext/index.0815f278.js";
-import { w as withSizeProvider } from "./components/GridLayout/subcomponents/SizeProvider/index.36cb4139.js";
-import { R as Responsive } from "./components/GridLayout/subcomponents/Responsive/index.97505a31.js";
-import { useLocation } from "react-router-dom";
-import { L as LoadingError } from "./components/LoadingError/index.9e829e8d.js";
-import { c as cjs } from "./react-draggable.0cc9b257.js";
-import { R as ResizeableWindow } from "./components/Resizeable/index.414ff687.js";
-import "./components/areas/hooks/useDynamicMFParameters/index.03ce6078.js";
-import "./components/areas/hooks/useWindowToolsMF/index.09801b66.js";
-import { useFormContext, Controller } from "react-hook-form";
-import { I as Image } from "./components/Image/index.4a822ede.js";
-import { H as HelperText } from "./components/HelperText/index.ebb53dac.js";
-import { F as FieldLabel } from "./components/FieldLabel/index.1577ac9c.js";
-import { C as CircularProgress } from "./components/mui_extended/CircularProgress/index.967e70b7.js";
-import "./components/hook-form/RHFAutocompleteAsync/index.69f5661d.js";
-import "./components/hook-form/RHFDateTime/index.dfe07e18.js";
-import "./components/hook-form/RHFMultiCheckbox/index.437e6ba3.js";
-import "./components/hook-form/RHFSelect/index.c6c60ecc.js";
-import "./components/hook-form/RHFPeriod/index.d852649b.js";
-import "./components/hook-form/RHFRadioGroup/index.11c0add8.js";
-import "./components/hook-form/RHFColorPicker/index.66004599.js";
-import "./components/hook-form/RHFCheckbox/index.13de27db.js";
-import "./components/hook-form/RHFUpload/index.955a4ba5.js";
-import { A as Accordion } from "./components/mui_extended/Accordion/index.f7a17c83.js";
-import "./components/mui_extended/Avatar/index.12b96914.js";
-import "./components/mui_extended/BoxIcon/index.d61e7ac5.js";
-import "./components/mui_extended/Breadcrumbs/index.4a44883c.js";
-import "./components/mui_extended/LinkWithRoute/index.288c51f3.js";
-import "./components/mui_extended/CheckBox/index.01218423.js";
-import { S as Stack } from "./components/mui_extended/Stack/index.fe363ca5.js";
-import "./components/mui_extended/Tooltip/index.49bb5ee1.js";
-import "./components/mui_extended/ToggleButton/index.c441b949.js";
-import "./components/mui_extended/ToggleIconButton/index.8a84f25e.js";
-import { W as WrapperComponent } from "./components/WrapperComponent/index.57964195.js";
-import "./components/Period/index.236971ae.js";
-import "./components/DynamicFilter/index.0f04f223.js";
-import "./components/DragResizeWindow/index.8b3e79f7.js";
-import "./components/GridLayout/index.656840a5.js";
-import "./components/PrintingSystem/index.9fdae551.js";
-import "./components/Loadable/index.e83cdb4e.js";
-import "./components/maps/index.a1bf63f2.js";
-import "./components/maps/components/GpsTools/index.01acaf3e.js";
-import "./components/ModalDialog/index.96c4aba3.js";
-import "./components/modal/WindowConfirm.243e1bef.js";
-import "./components/modal/WindowBase.390b0910.js";
-import "./components/NoItemSelected/index.0ae9f28f.js";
-import "./components/ObjectLogs/index.40c5047f.js";
-import "./components/PaperForm/index.1a8b10d4.js";
-import "./components/PDFViewer/index.651cc4b6.js";
-import "./components/Page/index.1d08818c.js";
-import "./components/PropertyValue/index.646a7e8b.js";
-import "./components/SplitLayout/index.7d9edf4e.js";
-import "./components/ToastContainer/index.7f246bbd.js";
-import "./components/SideBar/index.d221254d.js";
-import "./components/AppBar/index.b48343d8.js";
-import "./components/AccountPopover/index.62b1290b.js";
-import "./components/popups/PopupsProvider/index.d4caacc3.js";
-import "./components/popups/PopupsViewer/index.42312806.js";
-import "./components/HamburgerMenu/index.6c82741d.js";
-import "./contexts/ModalContext/index.5f77a463.js";
-import "./hooks/useFormAddEdit/index.ecb77e67.js";
-const areasViewerClasses = generateUtilityClasses(
-  AREAS_VIEWER_CLASS_NAME,
-  [
-    "root",
-    "areaRoot",
-    "areaGridLayoutPanelContainer",
-    "areaGridLayout",
-    "areaGridLayoutPopupsContainer",
-    "areasWindowPopUpList",
-    "windowRoot",
-    "windowHeader",
-    "windowHeaderContent",
-    "windowHeaderTitle",
-    "windowHeaderMainActions",
-    "windowHeaderCancelHandle",
-    "windowContent",
-    "windowPopupRoot",
-    "windowModalRoot",
-    "windowLinearProgressRoot",
-    "windowLinearProgressBar",
-    "windowRootContainer",
-    "windowToastiesContainer",
-    "windowToastiesContainerTostys",
-    "windowToastyContainer",
-    "windowToastyMeesageButtonsContainer",
-    "windowToastyMessage",
-    "windowToastyButtonsContainer",
-    "windowToastyPin",
-    "windowToastyClose",
-    "panelWindowsRoot",
-    "panelWindowsButtonContainer",
-    "containerLinearProgress",
-    "resizeHandle",
-    "loaderContainer",
-    "containerComponent",
-    "selected",
-    "colapsed",
-    "selectedWindow",
-    "isMobile",
-    "loading",
-    "pinIn",
-    "success",
-    "info",
-    "warning",
-    "error"
-  ],
-  AREAS_VIEWER_CLASS_NAME
-);
-const useAreasViewerUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.status,
-      ownerState.isMobile && "isMobile",
-      ownerState.isSkeleton && "isSkeleton"
-    ],
-    areaRoot: ["areaRoot"],
-    areasLoadingErrorRoot: ["areasLoadingErrorRoot"],
-    areasLoadingErrorLoading: ["areasLoadingErrorLoading"],
-    areasLoadingError: ["areasLoadingError"],
-    areasLoadingErrorIcon: ["areasLoadingErrorIcon"],
-    areasLoadingErrorTitle: ["areasLoadingErrorTitle"],
-    areasLoadingErrorDescription: ["areasLoadingErrorDescription"],
-    areasLoadingErrorDivider: ["areasLoadingErrorDivider"],
-    areaGridLayoutPanelContainer: ["areaGridLayoutPanelContainer"],
-    areaGridLayout: ["areaGridLayout"],
-    areaGridLayoutPopupsContainer: ["areaGridLayoutPopupsContainer"],
-    areasWindowPopUpList: ["areasWindowPopUpList"],
-    windowRoot: ["windowRoot"],
-    windowRootContainer: ["windowRootContainer"],
-    windowHeader: ["windowHeader"],
-    windowHeaderTitle: ["windowHeaderTitle"],
-    windowHeaderMainActions: ["windowHeaderMainActions"],
-    windowHeaderCancelHandle: ["windowHeaderCancelHandle"],
-    windowContent: ["windowContent"],
-    windowLinearProgressRoot: ["windowLinearProgressRoot"],
-    windowLinearProgressBar: ["windowLinearProgressBar"],
-    windowPopupRoot: ["windowPopupRoot"],
-    windowModalRoot: ["windowModalRoot"],
-    selectedWindow: ["selectedWindow"],
-    windowToastiesContainer: ["windowToastiesContainer"],
-    windowToastiesContainerTostys: ["windowToastiesContainerTostys"],
-    windowToastyContainer: ["windowToastiesContainer"],
-    windowToastyMeesageButtonsContainer: ["windowToastyMeesageButtonsContainer"],
-    windowToastyMessage: ["windowToastyMessage"],
-    windowToastyButtonsContainer: ["windowToastyButtonsContainer"],
-    windowToastyPin: ["windowToastyPin"],
-    windowToastyClose: ["windowToastyClose"],
-    panelWindowsRoot: ["panelWindowsRoot"],
-    panelWindowsButtonContainer: ["panelWindowsButtonContainer"],
-    resizeHandle: ["resizeHandle"],
-    loaderContainer: ["loaderContainer"],
-    containerComponent: ["containerComponent"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_VIEWER_CLASS_NAME), {});
-};
-const areasAdminClasses = generateUtilityClasses(
-  AREAS_ADMIN_CLASS_NAME,
-  [
-    "root",
-    "rootContent",
-    "areaChipRoot",
-    "areaChipTitle",
-    "areaChipDeleteButton",
-    "areasAddButton",
-    "areaContainerChipEditButton",
-    "areaContainerChips",
-    "areaContainerContentChips",
-    "areaContainerChipsIcon",
-    "areaEditPopover",
-    "areaChipMobileRoot",
-    "areaChipMobileIconContainer",
-    "areaIconLayer",
-    "areaIconLayerContent",
-    "areaChipEditButton",
-    "areasPopoverMobileOptions",
-    "areasPopoverListWindows",
-    "areasPopoverListWindowsIcon",
-    "areaContentChips",
-    "selected",
-    "isMobile",
-    "disabled",
-    "isFocus"
-  ],
-  AREAS_ADMIN_CLASS_NAME
-);
-const useAreasAdminUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.status,
-      ownerState.isMobile && "isMobile",
-      ownerState.isSkeleton && "isSkeleton",
-      ownerState.focus && "isFocus"
-    ],
-    rootContent: ["rootContent"],
-    areaChipRoot: ["areaChipRoot"],
-    areaIconLayer: ["areaIconLayer"],
-    areaContainerChipsIcon: ["areaContainerChipsIcon"],
-    areaContainerChips: ["areaContainerChips"],
-    areaContainerContentChips: ["areaContainerContentChips"],
-    areaEditPopover: ["areaEditPopover"],
-    areaChipMobileRoot: ["areaChipMobileRoot"],
-    areaChipMobileIconContainer: ["areaChipMobileIconContainer"],
-    areaChipTitle: ["areaChipTitle"],
-    areaContainerChipEditButton: ["areaContainerChipEditButton"],
-    areaChipDeleteButton: ["areaChipDeleteButton"],
-    areaChipEditButton: ["areaChipEditButton"],
-    areasAddButton: ["areasAddButton"],
-    areasPopoverMobileOptions: ["areasPopoverMobileOptions"],
-    areasPopoverListWindows: ["areasPopoverListWindows"],
-    areasPopoverListWindowsIcon: ["areasPopoverListWindowsIcon"],
-    areaContentChips: ["areaContentChips"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
-};
-styled(IconButton)(() => ({}));
-const LabelMemuItem = styled("div")(({ theme }) => ({
-  height: "22px",
-  overflow: "hidden",
-  wordBreak: "break-all",
-  marginLeft: theme.spacing(1.5),
-  display: "flex",
-  alignItems: "center"
-}));
-generateUtilityClasses(componentName$1, [
-  "root",
-  "itemDelete"
-]);
-function getMenuActionsUtilityClass(slot) {
-  return generateUtilityClass(componentName$1, slot);
-}
-const useMenuActionsUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    itemDelete: ["itemDelete"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getMenuActionsUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function MenuActions(props) {
-  const {
-    menuActions,
-    endListElement,
-    menuActionSx,
-    className,
-    iconButtonClassName = "",
-    objItem = {},
-    urlIcon,
-    toolTip = "",
-    marginTop = -1,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    width = 200,
-    withBadge = false,
-    badgeContent,
-    arrowType = "right-top",
-    externalOpen = null,
-    externalClose,
-    ...other
-  } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const [open, setOpen] = useState(null);
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
-  const theme = useTheme();
-  const classes = useMenuActionsUtilityClasses();
-  useEffect(() => {
-    let mounted = true;
-    if (mounted) {
-      setOpen(externalOpen);
-    }
-    return function cleanUp() {
-      mounted = false;
-    };
-  }, [externalOpen]);
-  const urlFinalIcon = useMemo(() => {
-    if (urlIcon)
-      return urlIcon;
-    return `${host_static_assets}/${environment_assets}/frontend/components/menu_actions/assets/icons/${ICONS.MENU}`;
-  }, [urlIcon, host_static_assets, environment_assets]);
-  const handleClose = (e) => {
-    e.stopPropagation();
-    setOpen(null);
-    externalClose && externalClose(null);
-  };
-  const handleClick = (e, menuAction) => {
-    e.stopPropagation();
-    setOpen(null);
-    menuAction.onClick();
-  };
-  const finalActions = useMemo(() => {
-    let ret;
-    if (typeof menuActions !== "function") {
-      ret = menuActions;
-    } else {
-      ret = menuActions(objItem);
-    }
-    return ret;
-  }, [menuActions, objItem]);
-  const IconButtonElement = /* @__PURE__ */ jsx(Fragment, { children: withBadge ? /* @__PURE__ */ jsx(Badge, { badgeContent, children: /* @__PURE__ */ jsx(
-    IconButton$1,
-    {
-      src: urlFinalIcon,
-      onClick: handleOpen,
-      tooltip: toolTip,
-      className: iconButtonClassName
-    }
-  ) }) : /* @__PURE__ */ jsx(
-    IconButton$1,
-    {
-      src: urlFinalIcon,
-      onClick: handleOpen,
-      tooltip: toolTip,
-      className: iconButtonClassName
-    }
-  ) });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    IconButtonElement,
-    /* @__PURE__ */ jsxs(
-      Popover,
-      {
-        id: "Popover",
-        open: Boolean(open),
-        anchorEl: open,
-        onClose: handleClose,
-        arrowType,
-        className: clsx(classes.root, className),
-        sx: {
-          marginTop,
-          marginBottom,
-          marginLeft,
-          marginRight,
-          width,
-          maxWidth: 300,
-          "& .MuiMenuItem-root": { px: 1, typography: "body2", borderRadius: 0.75 },
-          ...theme.components?.M4LMenuActions?.styleOverrides,
-          ...menuActionSx
-        },
-        ...other,
-        children: [
-          finalActions.map((menuAction, index) => /* @__PURE__ */ jsxs(
-            MenuItem,
-            {
-              dense: true,
-              onClick: (e) => {
-                handleClick(e, menuAction);
-              },
-              sx: { color: menuAction.color ?? "text.main" },
-              disabled: menuAction.disabled,
-              className: clsx(
-                menuAction?.className,
-                menuAction.variant === "delete" && classes.itemDelete
-              ),
-              children: [
-                menuAction.urlIcon ? /* @__PURE__ */ jsx(Icon, { src: menuAction.urlIcon }) : null,
-                /* @__PURE__ */ jsx(LabelMemuItem, { children: menuAction.label || menuAction.dictionaryId && getLabel(menuAction.dictionaryId) })
-              ]
-            },
-            `menu_action_${index}`
-          )),
-          endListElement ? endListElement : null
-        ]
-      }
-    )
-  ] });
-}
-const MemonizedMenuActions = React__default.memo(MenuActions);
-const AutocompleteRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFAutocomplete?.styleOverrides
-}));
-const WrapperOption = styled("li")(({ theme }) => ({
-  "& .m4l_image": {
-    marginRight: theme.spacing(1.5)
-  }
-}));
-function withRenderOption(getUrlImage, classes, imageWidth) {
-  return function RenderOption(optionProps, option) {
-    return /* @__PURE__ */ jsxs(
-      WrapperOption,
-      {
-        ...optionProps,
-        className: classes.withImage,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("withImage") } : {},
-        children: [
-          /* @__PURE__ */ jsx(Image, { src: getUrlImage(option), width: imageWidth, height: "100%" }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body", children: optionProps.key })
-        ]
-      }
-    );
-  };
-}
-const SkeletonRHFAutocomplete = (props) => {
-  const { withImage, classes, hasLabel } = props;
-  return /* @__PURE__ */ jsxs("div", { className: classes.skeletonRoot, children: [
-    (hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "16px" }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: classes.skeleton,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("skeleton") } : {},
-        children: !withImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: classes.skeletonContainerText, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%", height: "14px" }) }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16, sx: { minWidth: "16px" } })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circular" }),
-          /* @__PURE__ */ jsx("div", { className: classes.skeletonContainerText, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "50%", height: "14px" }) }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16, sx: { minWidth: "16px" } })
-        ] })
-      }
-    )
-  ] });
-};
-const componentName = "M4LRHFAutocomplete";
-generateUtilityClasses(
-  componentName,
-  [
-    "root",
-    "withImage",
-    "skeleton",
-    "label",
-    "popper",
-    "skeletonRoot",
-    "skeletonContainerText",
-    "iconDown",
-    "variantInfo",
-    "variantImage",
-    "isDisabled",
-    "imageWidthDefined",
-    "variantSuccess",
-    "variantWarning",
-    "variantError",
-    "sizeSmall",
-    "sizeMedium",
-    "isFocus",
-    "isTabSelected",
-    "chip"
-  ]
-);
-function getRHFAutocompleteClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      ownerState.isFocus && "isFocus",
-      ownerState.isTabSelected && "isTabSelected",
-      ownerState.disabled && "isDisabled",
-      ownerState.semantics === "info" && "variantInfo",
-      ownerState.semantics === "success" && "variantSuccess",
-      ownerState.semantics === "warning" && "variantWarning",
-      ownerState.semantics === "error" && "variantError",
-      ownerState.imageWidthDefined && "imageWidthDefined",
-      ownerState.multiple && "multiple"
-    ],
-    withImage: ["withImage"],
-    skeleton: ["skeleton"],
-    label: ["label"],
-    popper: [
-      "popper",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      ownerState.imageWidthDefined && "imageWidthDefined"
-    ],
-    skeletonRoot: ["skeletonRoot"],
-    skeletonContainerText: ["SkeletonContainerText"],
-    iconDown: ["iconDown"],
-    chip: [
-      "chip",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium"
-    ]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const useFormFocus = () => {
-  const [isFocus, setIsFocus] = useState(false);
-  const [isTabSelected, setIsTabSelected] = useState(false);
-  const handlerFocus = () => {
-    setIsFocus(true);
-  };
-  const handlerOnKeyUp = (event) => {
-    if (event.key === "Tab") {
-      setIsTabSelected(true);
-    }
-  };
-  const handlerOnBlur = () => {
-    setIsFocus(false);
-    setIsTabSelected(false);
-  };
-  return { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur };
-};
-function RHFAutocomplete(props) {
-  const {
-    name: nameRHF,
-    getOptionLabel,
-    isOptionEqualToValue,
-    label,
-    skeletonWidth = 100,
-    skeletonHeight = "18px",
-    options,
-    disabled,
-    getOptionUrlImage,
-    onOpen,
-    onClose,
-    loading,
-    variant,
-    helperMessage,
-    size = "small",
-    onChangeFilterParmsLocal,
-    imageWidth,
-    imageHeight,
-    mandatory,
-    mandatoryMessage,
-    multiple,
-    ...other
-  } = props;
-  const { getLabel } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const withImage = useMemo(() => getOptionUrlImage !== void 0, [getOptionUrlImage]);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const autocompleteRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const isDesktop = useResponsiveDesktop();
-  const onCloseLocal = (event, reason) => {
-    setOpen(false);
-    if (onClose)
-      onClose(event, reason);
-  };
-  const onOpenLocal = (event) => {
-    setOpen(true);
-    if (onOpen)
-      onOpen(event);
-  };
-  const getOptionLabelLocal = (option) => {
-    if (option === void 0 || option === null) {
-      return "";
-    }
-    return getOptionLabel(option);
-  };
-  const getOptionUrlImageLocal = (option) => {
-    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
-      return "";
-    }
-    return getOptionUrlImage(option);
-  };
-  const isOptionEqualToValueLocal = (option, value) => {
-    if (value === void 0 || value === null || option === null) {
-      return false;
-    }
-    return isOptionEqualToValue(option, value);
-  };
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext();
-  const [currentVariant, setCurrentVariant] = useState(
-    null
-  );
-  useEffect(() => {
-    if (errors[nameRHF]) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(null);
-    }
-  }, [errors[nameRHF], variant, control]);
-  const ownerState = {
-    size: !isDesktop ? "medium" : size,
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    semantics: currentVariant,
-    disabled,
-    imageWidthDefined: Boolean(imageWidth),
-    multiple: Boolean(multiple)
-  };
-  const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    AutocompleteRoot,
-    {
-      className: classes.root,
-      tabIndex: 0,
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `${RHFTAUTOCOMPLET_ROOT_TEST_ID}_${nameRHF}` } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(
-        Controller,
-        {
-          name: nameRHF,
-          control,
-          render: ({ field: { onChange, value }, fieldState: { error } }) => {
-            const [inputValue, setInputValue] = useState(getOptionLabelLocal(value));
-            useEffect(() => {
-              if (!open && value === null && inputValue !== "") {
-                setInputValue("");
-              }
-              if (!open && value !== null && options.length === 0) {
-                onChangeFilterParmsLocal?.(getOptionLabelLocal(value), "reset");
-              }
-            }, [value]);
-            const checkKeyDown = (e) => {
-              if (e.code === "Enter")
-                e.preventDefault();
-            };
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              label && /* @__PURE__ */ jsx(
-                FieldLabel,
-                {
-                  className: classes.label,
-                  label,
-                  mandatory,
-                  mandatoryMessage,
-                  helperMessage
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Autocomplete,
-                {
-                  autoComplete: true,
-                  disableClearable: true,
-                  multiple,
-                  onKeyDown: checkKeyDown,
-                  size,
-                  ref: autocompleteRef,
-                  autoSelect: false,
-                  options,
-                  getOptionLabel: getOptionLabelLocal,
-                  inputValue,
-                  clearOnBlur: false,
-                  PopperComponent: (popperProps) => {
-                    return /* @__PURE__ */ jsx(
-                      Popper,
-                      {
-                        ...popperProps,
-                        className: classes.popper,
-                        placement: "bottom-start",
-                        sx: {
-                          ...theme.components?.M4LRHFAutocompletePopover?.styleOverrides
-                        }
-                      }
-                    );
-                  },
-                  onInputChange: (_event, newValue, reason) => {
-                    if (reason === "input") {
-                      setInputValue(newValue);
-                      if (onChangeFilterParmsLocal) {
-                        onChangeFilterParmsLocal(newValue, reason);
-                      }
-                    } else {
-                      onChange(null);
-                    }
-                  },
-                  isOptionEqualToValue: isOptionEqualToValueLocal,
-                  value: Array.isArray(value) ? value : multiple ? value ? [value] : [] : value || null,
-                  onOpen: onOpenLocal,
-                  onClose: onCloseLocal,
-                  open,
-                  onChange: (_e, newValue) => {
-                    if (!multiple && !Array.isArray(newValue)) {
-                      setInputValue(getOptionLabelLocal(newValue));
-                    } else {
-                      setInputValue("");
-                    }
-                    onChange(Array.isArray(newValue) ? [...newValue] : newValue);
-                  },
-                  filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
-                  loading,
-                  loadingText: /* @__PURE__ */ jsx(Typography, { variant: "body", children: getLabel("rhf_autocomplete.loading_options") }),
-                  disabled,
-                  noOptionsText: getLabel("rhf_autocomplete.no_options"),
-                  renderOption: withImage ? withRenderOption(getOptionUrlImageLocal, classes, imageWidth) : void 0,
-                  renderInput: (params) => {
-                    return /* @__PURE__ */ jsx(
-                      TextField,
-                      {
-                        ...params,
-                        InputLabelProps: {
-                          ...params.InputLabelProps,
-                          shrink: true
-                        },
-                        fullWidth: true,
-                        size,
-                        SelectProps: { native: true },
-                        InputProps: {
-                          ...params.InputProps,
-                          startAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-                            !multiple && withImage && value ? /* @__PURE__ */ jsx(
-                              Image,
-                              {
-                                src: getOptionUrlImageLocal(value),
-                                width: imageWidth,
-                                height: "100%"
-                              },
-                              "ImageTextField"
-                            ) : null,
-                            params.InputProps.startAdornment
-                          ] }),
-                          endAdornment: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 18 }) : /* @__PURE__ */ jsx(
-                            IconButton$1,
-                            {
-                              className: classes.iconDown,
-                              src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
-                              onClick: (event) => onOpenLocal(event),
-                              disabled,
-                              size
-                            }
-                          )
-                        },
-                        autoComplete: "off",
-                        error: !!error,
-                        ...other
-                      }
-                    );
-                  },
-                  ...multiple ? {
-                    renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => {
-                      const { key, ...restTagProps } = getTagProps({
-                        index
-                      });
-                      return /* @__PURE__ */ createElement(
-                        Chip,
-                        {
-                          ...restTagProps,
-                          key,
-                          label: getOptionLabelLocal(option),
-                          className: classes.chip,
-                          icon: withImage && option ? /* @__PURE__ */ jsx(
-                            Image,
-                            {
-                              src: getOptionUrlImageLocal(option),
-                              width: imageWidth,
-                              height: imageHeight ?? "100%"
-                            }
-                          ) : void 0,
-                          sx: {
-                            ...theme.components?.M4LRHFAutocompleteChip?.styleOverrides
-                          }
-                        }
-                      );
-                    })
-                  } : {}
-                }
-              ),
-              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperText, { variant: currentVariant, message: error?.message }) : null
-            ] });
-          }
-        }
-      ) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, { withImage, classes, hasLabel: label })
-    }
-  );
-}
-styled("div")(() => ({
-  display: "flex",
-  flexDirection: "row",
-  border: "1px solid gray",
-  "&.active": {
-    border: "1px solid red"
-  }
-}));
-styled("div")(({ theme }) => ({
-  height: "100%",
-  width: theme.spacing(1),
-  backgroundColor: theme.vars.palette.background.default,
-  "&.active": {
-    backgroundColor: theme.vars.palette.primary.main
-  }
-}));
-const EditAreaHeader = styled("div")(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  height: "25px",
-  borderBottom: "1px solid",
-  borderColor: theme.vars.palette.state.default,
-  justifyContent: "space-between",
-  alignItems: "center"
-}));
-const ChipActionsMobile = (props) => {
-  const { handlerOpenPopoverEditArea, areaId } = props;
-  const { deleteArea } = useAreasStore((state) => state.areasActions);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions, shallow);
-  const listAreas = useAreasStore((state) => state.areasIds, shallow);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const menuActions = [
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.EDIT_AREA}`,
-      onClick: handlerOpenPopoverEditArea,
-      label: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area))
-    }
-  ];
-  if (listAreas.length > 1) {
-    menuActions.push({
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.DELETE_AREA}`,
-      onClick: () => {
-        deleteArea(areaId);
-        setFocus(false);
-      },
-      label: getLabel(getAreasDictionary(DICCTIONARY.label_delete_area))
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.SHOW_OPTIONS}`,
-      arrowType: "no-arrow",
-      marginTop: "12px",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      menuActions,
-      externalClose: () => setFocus(false)
-    }
-  );
-};
-const AreaChip = (props) => {
-  const { areaId, selected, disabled, setAnchorMenuAreas } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { deleteArea, selectArea, editArea } = useAreasStore((state) => state.areasActions);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions);
-  const areaName = useAreasStore((state) => state.hashAreas[areaId].name, shallow);
-  const listAreas = useAreasStore((state) => state.areasIds, shallow);
-  const [open, setOpen] = useState(false);
-  const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const anchorRef = useRef(null);
-  const theme = useTheme();
-  const onClickDeleteArea = (e) => {
-    if (listAreas.length > 1) {
-      e.stopPropagation();
-      setFocus(true);
-      deleteArea(areaId);
-    }
-  };
-  const onSubmit = (data) => {
-    editArea(areaId, data.inputEditArea);
-    setOpen(false);
-    setFocus(false);
-  };
-  const handlerOpenPopoverEditArea = (e) => {
-    e?.stopPropagation();
-    setFocus(true);
-    setOpen(true);
-  };
-  const initialValues = {
-    inputEditArea: areaName
-  };
-  const validationSchema = useMemo(
-    () => Yup.object().shape({
-      inputEditArea: Yup.string().required(
-        getLabel(getAreasDictionary(DICCTIONARY.validation_edit_area))
-      )
-    }),
-    [getLabel]
-  );
-  const handlerOnClick = (e) => {
-    setAnchorMenuAreas && setAnchorMenuAreas(e.currentTarget);
-    selectArea(areaId);
-  };
-  const rippleRef = useRef(null);
-  const onRippleStart = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.start(e);
-    }
-  };
-  const onRippleStop = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.stop(e);
-    }
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "presentation",
-        ref: anchorRef,
-        onMouseDown: onRippleStart,
-        onMouseUp: onRippleStop,
-        className: clsx(
-          areasAdminClasses.areaChipRoot,
-          selected ? areasAdminClasses.selected : null,
-          disabled ? areasAdminClasses.disabled : null
-        ),
-        onClick: (e) => {
-          handlerOnClick(e);
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipTitle, children: areaName }),
-          isDesktop ? /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerChipEditButton, children: [
-            /* @__PURE__ */ jsx(
-              IconButton$1,
-              {
-                className: areasAdminClasses.areaChipEditButton,
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.EDIT_AREA}`,
-                size: "small",
-                onClick: (e) => {
-                  handlerOpenPopoverEditArea(e);
-                },
-                tooltip: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area))
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              IconButton$1,
-              {
-                className: areasAdminClasses.areaChipDeleteButton,
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.DELETE_AREA}`,
-                size: "small",
-                onClick: (e) => {
-                  onClickDeleteArea(e);
-                },
-                tooltip: getLabel(getAreasDictionary(DICCTIONARY.label_delete_area))
-              }
-            )
-          ] }) : /* @__PURE__ */ jsx(
-            ChipActionsMobile,
-            {
-              areaId,
-              handlerOpenPopoverEditArea
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "presentation",
-        onClick: (e) => {
-          e.stopPropagation();
-        },
-        children: /* @__PURE__ */ jsx(
-          Popover,
-          {
-            arrowType: "top-center",
-            open,
-            className: areasAdminClasses.areaEditPopover,
-            anchorEl: anchorRef.current,
-            anchorOrigin: { vertical: "bottom", horizontal: "center" },
-            transformOrigin: { vertical: "top", horizontal: "center" },
-            onClose: () => {
-              setFocus(false);
-              setOpen(false);
-            },
-            sx: {
-              mt: "10px",
-              ...theme.components?.M4LAreasAdminEditPopover?.styleOverrides
-            },
-            children: /* @__PURE__ */ jsxs(
-              RHFormProvider,
-              {
-                onSubmit,
-                values: initialValues,
-                validationSchema,
-                children: [
-                  /* @__PURE__ */ jsxs(EditAreaHeader, { children: [
-                    /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area)) }),
-                    /* @__PURE__ */ jsx(
-                      IconButton$1,
-                      {
-                        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.CLOSE}`,
-                        size: "small",
-                        onClick: () => {
-                          setFocus(false);
-                          setOpen(false);
-                        }
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    RHFTextField,
-                    {
-                      name: "inputEditArea",
-                      skeletonWidth: "70%",
-                      skeletonHeight: "18px",
-                      sx: { mt: "20px" }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(Actions$1, { children: [
-                    /* @__PURE__ */ jsx(
-                      ActionCancel,
-                      {
-                        onClick: () => {
-                          setOpen(false);
-                          setFocus(false);
-                        },
-                        variant: "outlined",
-                        skeletonWidth: "100%"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "100%" })
-                  ] })
-                ]
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
-};
-AreaChip.displayName = "AreaButtons";
-const AreasAdminRoot = styled$1("div")`
-  display: flex;
-  position: relative;
-  background-color: transparent;
-
-  //areaRoot
-  & .${areasAdminClasses.areaChipRoot} {
-    display: flex;
-  }
-
-  ${(props) => props.theme.components?.M4LAreasAdmin?.styleOverrides}
-`;
-const ChipMobile = (props) => {
-  const { areaId, selected, disabled, setAnchorMenuAreas } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { deleteArea, selectArea, editArea } = useAreasStore((state) => state.areasActions);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions);
-  const areaName = useAreasStore((state) => state.hashAreas[areaId].name, shallow);
-  const listAreas = useAreasStore((state) => state.areasIds, shallow);
-  const [open, setOpen] = useState(false);
-  const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const anchorRef = useRef(null);
-  const theme = useTheme();
-  const onClickDeleteArea = (e) => {
-    if (listAreas.length > 1) {
-      e.stopPropagation();
-      setFocus(true);
-      deleteArea(areaId);
-    }
-  };
-  const onSubmit = (data) => {
-    editArea(areaId, data.inputEditArea);
-    setOpen(false);
-    setFocus(false);
-  };
-  const handlerOpenPopoverEditArea = (e) => {
-    e?.stopPropagation();
-    setFocus(true);
-    setOpen(true);
-  };
-  const initialValues = {
-    inputEditArea: areaName
-  };
-  const validationSchema = useMemo(
-    () => Yup.object().shape({
-      inputEditArea: Yup.string().required(
-        getLabel(getAreasDictionary(DICCTIONARY.validation_edit_area))
-      )
-    }),
-    [getLabel]
-  );
-  const handlerOnClick = (e) => {
-    setAnchorMenuAreas && setAnchorMenuAreas(e.currentTarget);
-    selectArea(areaId);
-  };
-  const rippleRef = useRef(null);
-  const onRippleStart = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.start(e);
-    }
-  };
-  const onRippleStop = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.stop(e);
-    }
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "presentation",
-        ref: anchorRef,
-        onMouseDown: onRippleStart,
-        onMouseUp: onRippleStop,
-        className: clsx(
-          areasAdminClasses.areaChipRoot,
-          selected ? areasAdminClasses.selected : null,
-          disabled ? areasAdminClasses.disabled : null
-        ),
-        onClick: (e) => {
-          handlerOnClick(e);
-        },
-        children: [
-          /* @__PURE__ */ jsx(TouchRipple, { ref: rippleRef, center: false, style: { position: "absolute", inset: "0" } }),
-          /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipTitle, children: areaName })
-        ]
-      }
-    ),
-    isDesktop ? /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerChipEditButton, children: [
-      /* @__PURE__ */ jsx(
-        IconButton$1,
-        {
-          className: areasAdminClasses.areaChipEditButton,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.EDIT_AREA}`,
-          size: "small",
-          onClick: (e) => {
-            handlerOpenPopoverEditArea(e);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton$1,
-        {
-          className: areasAdminClasses.areaChipDeleteButton,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.DELETE_AREA}`,
-          size: "small",
-          onClick: (e) => {
-            onClickDeleteArea(e);
-          }
-        }
-      )
-    ] }) : /* @__PURE__ */ jsx(
-      ChipActionsMobile,
-      {
-        areaId,
-        handlerOpenPopoverEditArea
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "presentation",
-        onClick: (e) => {
-          e.stopPropagation();
-        },
-        children: /* @__PURE__ */ jsx(
-          Popover,
-          {
-            arrowType: "top-center",
-            open,
-            className: areasAdminClasses.areaEditPopover,
-            anchorEl: anchorRef.current,
-            anchorOrigin: { vertical: "bottom", horizontal: "center" },
-            transformOrigin: { vertical: "top", horizontal: "center" },
-            onClose: () => {
-              setFocus(false);
-              setOpen(false);
-            },
-            sx: {
-              mt: "10px",
-              ...theme.components?.M4LAreasAdminEditPopover?.styleOverrides
-            },
-            children: /* @__PURE__ */ jsxs(
-              RHFormProvider,
-              {
-                onSubmit,
-                values: initialValues,
-                validationSchema,
-                children: [
-                  /* @__PURE__ */ jsxs(EditAreaHeader, { children: [
-                    /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area)) }),
-                    /* @__PURE__ */ jsx(
-                      IconButton$1,
-                      {
-                        src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.CLOSE}`,
-                        size: "small",
-                        onClick: () => {
-                          setFocus(false);
-                          setOpen(false);
-                        }
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    RHFTextField,
-                    {
-                      name: "inputEditArea",
-                      skeletonWidth: "70%",
-                      skeletonHeight: "18px",
-                      sx: { mt: "20px" }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(Actions$1, { children: [
-                    /* @__PURE__ */ jsx(
-                      ActionCancel,
-                      {
-                        onClick: () => {
-                          setOpen(false);
-                          setFocus(false);
-                        },
-                        variant: "outlined",
-                        skeletonWidth: "100%"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(ActionIntro, { skeletonWidth: "100%" })
-                  ] })
-                ]
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
-};
-ChipMobile.displayName = "AreaButtons";
-const AreaChipMobile = () => {
-  const areas = useAreasStore(
-    (state) => state.areasIds.map((a) => ({ id: a, name: state.hashAreas[a].name })),
-    shallow
-  );
-  const { selectArea } = useAreasStore((state) => state.areasActions);
-  const currentAreaId = useAreasStore((state) => state.currentAreaId, shallow);
-  const { addArea } = useAreasStore((state) => state.areasActions, shallow);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions, shallow);
-  const [anchorMenuAreas, setAnchorMenuAreas] = useState(null);
-  const { getLabel } = useModuleDictionary();
-  const theme = useTheme();
-  const currentArea = areas.find((area) => area.id === currentAreaId);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const menuActions = useMemo(
-    () => areas.filter((area) => area.id !== currentAreaId).map((area) => {
-      return {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.LAYERS}`,
-        onClick: () => {
-          selectArea(area.id);
-          setFocus(false);
-        },
-        label: area.name
-      };
-    }),
-    [areas, currentAreaId]
-  );
-  const handlerSetAnchorMenuAreas = (element) => {
-    setFocus(false);
-    setAnchorMenuAreas(element);
-  };
-  return /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipMobileRoot, children: /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerContentChips, children: [
-    currentArea ? /* @__PURE__ */ jsx(
-      ChipMobile,
-      {
-        areaId: currentArea.id,
-        selected: true,
-        disabled: true,
-        setAnchorMenuAreas
-      },
-      currentArea.id
-    ) : null,
-    menuActions.length >= 0 ? /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipMobileIconContainer, children: /* @__PURE__ */ jsx(
-      MenuActions,
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.CHEVRON_DOWN}`,
-        arrowType: "no-arrow",
-        marginTop: "12px!important",
-        marginLeft: "14px!important",
-        anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        transformOrigin: { vertical: "top", horizontal: "right" },
-        menuActions,
-        externalOpen: anchorMenuAreas,
-        externalClose: handlerSetAnchorMenuAreas,
-        className: areasAdminClasses.areasPopoverMobileOptions,
-        menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides,
-        endListElement: /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: () => {
-              addArea();
-              setAnchorMenuAreas(null);
-            },
-            variant: "outlined",
-            startIcon: /* @__PURE__ */ jsx(
-              Icon,
-              {
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.ADD_AREA}`
-              }
-            ),
-            children: getLabel(getAreasDictionary(DICCTIONARY.area_add_new))
-          }
-        )
-      }
-    ) }) : null
-  ] }) });
-};
-const PanelWindowPopUp = (props) => {
-  const { currentAreaId } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const windowsLayouts = useAreasStore(
-    (state) => state.hashAreas[currentAreaId].layoutItemsIds.filter((li) => state.hashWindows[li].emergeType === "layout").map((lim) => {
-      const w = state.hashWindows[lim];
-      return {
-        i: w.windowId,
-        url_icon: w.url_icon,
-        title: w.title
-      };
-    }),
-    shallow
-  );
-  const theme = useTheme();
-  const { maximizeLayout } = useAreasStore((state) => state.areaActions);
-  const onTouched = (layoutId) => {
-    maximizeLayout(currentAreaId, layoutId);
-  };
-  const menuActions = windowsLayouts.map((element) => {
-    return {
-      onClick: () => onTouched(element.i),
-      label: element.title,
-      urlIcon: element.url_icon
-    };
-  });
-  return menuActions.length > 0 ? /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.LAYERS}`,
-      arrowType: "no-arrow",
-      marginTop: "12px!important",
-      marginLeft: "14px!important",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      menuActions,
-      className: areasAdminClasses.areasPopoverListWindows,
-      iconButtonClassName: areasAdminClasses.areasPopoverListWindowsIcon,
-      menuActionSx: theme.components?.M4LAreasAdminMobilePopoverOptions?.styleOverrides
-    }
-  ) : null;
-};
-function AreasAdmin() {
-  const areas = useAreasStore((state) => state.areasIds, shallow);
-  const currentArea = useAreasStore((state) => state.currentAreaId, shallow);
-  const status = useAreasStore((state) => state.ownerState.status);
-  const { setFocus } = useAreasStore((state) => state.areaAdminActions, shallow);
-  const classesRoot = useAreasStore((state) => state.adminClasses.root);
-  const areasLength = useAreasStore((state) => state.areasIds.length);
-  const isDesktop = useResponsiveDesktop();
-  const { addArea } = useAreasStore((state) => state.areasActions, shallow);
-  const maximizedId = useAreasStore(
-    (state) => state.hashAreas[currentArea] ? state.hashAreas[currentArea].maximizedId : false,
-    shallow
-  );
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const divRef = useRef(null);
-  const divRefOut = useRef(null);
-  const handleClickOutsideFn = () => {
-    setFocus(false);
-  };
-  useOnClickOutside(divRef, handleClickOutsideFn, divRefOut);
-  const rippleRef = useRef(null);
-  const onRippleStart = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.start(e);
-    }
-  };
-  const onRippleStop = (e) => {
-    if (rippleRef.current) {
-      rippleRef.current.stop(e);
-    }
-  };
-  if (status !== "loaded") {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    AreasAdminRoot,
-    {
-      ref: divRefOut,
-      onMouseDown: onRippleStart,
-      onMouseUp: onRippleStop,
-      className: classesRoot,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          role: "presentation",
-          ref: divRef,
-          className: areasAdminClasses.rootContent,
-          onClick: () => setFocus(true),
-          children: [
-            /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContainerChipsIcon, children: /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContainerChips, children: /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContainerContentChips, children: isDesktop ? /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaContentChips, children: areas.map((area) => /* @__PURE__ */ jsx(
-              AreaChip,
-              {
-                areaId: area,
-                selected: area === currentArea,
-                disabled: areasLength === 1
-              },
-              area
-            )) }) }) : /* @__PURE__ */ jsx(AreaChipMobile, {}) }) }) }),
-            isDesktop ? /* @__PURE__ */ jsx(
-              IconButton$1,
-              {
-                className: areasAdminClasses.areasAddButton,
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.ADD_AREA}`,
-                size: "small",
-                onClick: addArea,
-                tooltip: getLabel(getAreasDictionary(DICCTIONARY.area_add_new))
-              }
-            ) : null,
-            !isDesktop && maximizedId ? /* @__PURE__ */ jsx(PanelWindowPopUp, { currentAreaId: currentArea }) : null
-          ]
-        }
-      )
-    }
-  );
-}
-const react_resizable_css = {};
-const AreasViewerRoot = styled$1("div")`
-  /* display: flex; */
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  /* flex-grow: 1; */
-  position: relative;
-
-  //areaRoot
-  & .${areasViewerClasses.areaRoot} {
-    display: none;
-    position: absolute;
-    /* flex-grow: 1; */
-    flex-direction: row;
-    inset: 0;
-    /* width: 100%; */
-    overflow: hidden;
-    justify-content: top;
-    align-items: flex-start;
-
-    visibility: hidden;
-  }
-
-  & .${areasViewerClasses.areaRoot}.${areasViewerClasses.selected} {
-    display: block;
-    visibility: visible;
-  }
-
-  &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaRoot} {
-  }
-
-  // areaGridLayoutPanelContainer
-  & .${areasViewerClasses.areaGridLayoutPanelContainer} {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-  }
-  &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaGridLayoutPanelContainer} {
-    flex-direction: column-reverse;
-  }
-  // areaGridLayout
-  & .${areasViewerClasses.areaGridLayout} {
-    height: 100% !important;
-    overflow: auto;
-    flex-grow: 1;
-  }
-  &.${areasViewerClasses.isMobile} .${areasViewerClasses.areaGridLayout} {
-    flex-direction: column-reverse;
-    height: unset;
-    width: 100%;
-  }
-  // areaGridLayoutPopupsContainer
-  & .${areasViewerClasses.areaGridLayoutPopupsContainer} {
-    z-index: 1; //Garantizar q el contenedor de los popus este por encima de los layouts
-    //     // ' .react-draggable': {
-    //     //     position: 'absolute',
-    //     // },
-  }
-
-  // PanelWindowsRoot
-  & .${areasViewerClasses.panelWindowsRoot} {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-  &.${areasViewerClasses.isMobile} .${areasViewerClasses.panelWindowsRoot} {
-    flex-direction: row;
-  }
-
-  // windowRoot
-  & .${areasViewerClasses.windowRoot} {
-    inset: 0;
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    /* height: 100%; */
-    /* width: 100%; */
-    overflow: hidden;
-    border: 1px solid gray;
-
-    background-color: ${(props) => props.theme.vars.palette.background.default};
-    padding: ${(props) => props.theme.spacing(0)};
-  }
-
-  & .${areasViewerClasses.windowRoot}.${areasViewerClasses.selected} {
-    border-top: 1px solid green;
-  }
-  // windowHeaderTitle
-  & .${areasViewerClasses.windowHeaderTitle} {
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    color: ${(props) => props.theme.vars.palette.text.primary};
-    text-overflow: ellipsis;
-  }
-  // windowHeaderMainActions
-  & .${areasViewerClasses.windowHeaderMainActions} {
-    display: flex;
-
-    gap: 4px;
-  }
-
-  // windowHeaderMainActions
-  & .${areasViewerClasses.windowContent} {
-    flex-grow: 1;
-    position: relative;
-  }
-
-  // windowModalRoot
-  & .${areasViewerClasses.windowModalRoot} {
-    padding: 16px;
-  }
-
-  ${react_resizable_css}
-
-  ${(props) => props.theme.components?.M4LAreasViewer?.styleOverrides}
-`;
-function WindowHeaderSkeleton(props) {
-  const { colapsed } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx(areasViewerClasses.windowHeader), children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderContent, children: [
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        variant: "circular",
-        sx: { margin: "0 5px", minWidth: "18px", minHeight: "18px" }
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 80, height: 16 }) }),
-    /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowHeaderCancelHandle, children: !colapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          variant: "circular",
-          sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          variant: "circular",
-          sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          variant: "circular",
-          sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        variant: "circular",
-        sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        variant: "circular",
-        sx: { margin: "0 5px", minWidth: "16px", minHeight: "16px" }
-      }
-    )
-  ] }) });
-}
-function getMainActions(isDesktop, moduleActions) {
-  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 getMenuActions(options) {
-  const {
-    windowId,
-    isDesktop,
-    moduleActions,
-    urlPrefix,
-    saveModuleCookies,
-    resetModuleCookies,
-    version,
-    windowOptions = { allowPersistCookies: false },
-    getLabel
-  } = options;
-  let menuActions = [...moduleActions.filter((action) => action.visibility !== "allways")];
-  if (isDesktop !== void 0 && isDesktop) {
-    menuActions = menuActions.filter((action) => action.visibility === "normal");
-  }
-  if (windowOptions.allowPersistCookies) {
-    const saveCookiesAction = {
-      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS$1.SAVE_COOKIES}`,
-      onClick: () => saveModuleCookies(windowId),
-      disabled: false,
-      visibility: "normal",
-      label: getLabel(getAreasDictionary(DICCTIONARY.label_persist_module_cookies)),
-      key: "save_cookies"
-    };
-    menuActions.push(saveCookiesAction);
-    const resetCookiesAction = {
-      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS$1.RESET_COOKIES}`,
-      onClick: () => resetModuleCookies(windowId),
-      disabled: false,
-      visibility: "normal",
-      label: getLabel(getAreasDictionary(DICCTIONARY.label_reset_module_cookies)),
-      key: "reset_cookes"
-    };
-    menuActions.push(resetCookiesAction);
-  }
-  if (version) {
-    const versionAction = {
-      urlIcon: `${urlPrefix}/frontend/components/areas/assets/icons/${ICONS$1.VERSION}`,
-      onClick: () => {
-      },
-      disabled: true,
-      visibility: "normal",
-      label: version,
-      key: "version"
-    };
-    menuActions.push(versionAction);
-  }
-  return menuActions;
-}
-function MainActions(props) {
-  const { windowId } = props;
-  const moduleActions = useAreasStore((state) => {
-    const window2 = state.hashWindows[windowId];
-    return window2?.moduleActions || [];
-  }, shallow);
-  const { getLabel } = useModuleDictionary();
-  const isDesktop = useResponsiveDesktop();
-  const mainActions = useMemo(() => {
-    return getMainActions(isDesktop, moduleActions);
-  }, [moduleActions, isDesktop]);
-  return /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowHeaderMainActions, children: mainActions.map((mainAction) => {
-    const tooltip = mainAction.label !== void 0 ? mainAction.label : getLabel(mainAction.dictionaryId || "");
-    const onClick = (e) => {
-      mainAction.onClick(e);
-      e.stopPropagation();
-    };
-    return /* @__PURE__ */ jsx(
-      IconButton$1,
-      {
-        src: mainAction.urlIcon || "",
-        className: clsx(mainAction.className, "m4l_draggableCancel"),
-        onClick,
-        "aria-label": mainAction.label,
-        disabled: mainAction.disabled,
-        tooltip
-      },
-      mainAction.key
-    );
-  }) });
-}
-function Header(props) {
-  const { areaId, windowId, emergeType } = props;
-  const [url_icon, title, moduleActions, onClose, version, windowOptions, fnQueryClose] = useAreasStore((state) => {
-    const window2 = state.hashWindows[windowId];
-    return [
-      window2.url_icon,
-      window2.title,
-      window2.moduleActions,
-      window2.onClose,
-      window2.version,
-      window2.windowOptions,
-      window2.fnQueryClose
-    ];
-  }, shallow);
-  const { saveModuleCookies, resetModuleCookies } = useAreasStore(
-    (state) => state.windowActions,
-    shallow
-  );
-  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
-  const colapsed = useAreasStore((state) => {
-    const currentBreakpoint = state.hashAreas[areaId].currentBreakpoint;
-    if (currentBreakpoint) {
-      return state.hashAreas[areaId].layouts[currentBreakpoint].find((li) => li.i === windowId)?.colapsed;
-    }
-    return false;
-  }, shallow);
-  const { maximizeLayout, normalizeLayouts, colapseLayoutItem, unColapseLayoutItem } = useAreasStore((state) => state.areaActions, shallow);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const { getLabel } = useModuleDictionary();
-  const urlPrefix = `${host_static_assets}/${environment_assets}`;
-  const menuActions = useMemo(() => {
-    return getMenuActions({
-      windowId,
-      isDesktop,
-      moduleActions,
-      urlPrefix,
-      saveModuleCookies,
-      resetModuleCookies,
-      version,
-      windowOptions,
-      getLabel
-    });
-  }, [moduleActions, isDesktop]);
-  const onCloseLocal = () => {
-    const fnClose = fnQueryClose || onClose;
-    fnClose && fnClose(windowId);
-  };
-  const maxNormalize = (e) => {
-    if (maximizedId === windowId) {
-      normalizeLayouts(areaId);
-    } else {
-      maximizeLayout(areaId, windowId);
-    }
-    e.stopPropagation();
-  };
-  const colapedToggle = (e) => {
-    if (!colapsed) {
-      colapseLayoutItem(areaId, windowId);
-    } else {
-      unColapseLayoutItem(areaId, windowId);
-    }
-    e.stopPropagation();
-  };
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(WindowHeaderSkeleton, {});
-  }
-  return /* @__PURE__ */ jsxs("div", { className: clsx(areasViewerClasses.windowHeader, "m4l_draggable_handle"), children: [
-    /* @__PURE__ */ jsx(LinearProgressIndeterminate, {}),
-    /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderContent, children: [
-      /* @__PURE__ */ jsx(Icon, { src: url_icon, size: "medium" }),
-      /* @__PURE__ */ jsx(Typography, { className: areasViewerClasses.windowHeaderTitle, variant: "h5", children: `${title}` }),
-      /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowHeaderCancelHandle, children: [
-        !colapsed && /* @__PURE__ */ jsx(MainActions, { windowId }),
-        !colapsed && menuActions.length > 0 && /* @__PURE__ */ jsx(
-          MemonizedMenuActions,
-          {
-            arrowType: "no-arrow",
-            marginTop: "12px!important",
-            marginLeft: "14px!important",
-            anchorOrigin: { vertical: "bottom", horizontal: "right" },
-            transformOrigin: { vertical: "top", horizontal: "right" },
-            menuActions,
-            toolTip: getLabel(getAreasDictionary(DICCTIONARY.label_module_actions))
-          }
-        ),
-        !colapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(
-          IconButton$1,
-          {
-            className: "m4l_draggableCancel",
-            onClick: maxNormalize,
-            "aria-label": "click",
-            src: maximizedId === windowId ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.NORMALIZE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.MAXIMIZE}`,
-            tooltip: getLabel(
-              getAreasDictionary(
-                maximizedId === windowId ? DICCTIONARY.label_minimize_window : DICCTIONARY.label_maximize_window
-              )
-            )
-          }
-        ),
-        !maximizedId && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(
-          IconButton$1,
-          {
-            className: "m4l_draggableCancel",
-            onClick: colapedToggle,
-            "aria-label": "click",
-            src: !colapsed ? `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.COLAPSE}` : `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.UNCOLPASE}`,
-            tooltip: getLabel(
-              getAreasDictionary(
-                !colapsed ? DICCTIONARY.label_collapse_window : DICCTIONARY.label_uncollapse_window
-              )
-            )
-          }
-        ),
-        onClose && /* @__PURE__ */ jsx(
-          IconButton$1,
-          {
-            className: "m4l_draggableCancel",
-            onPointerDown: onCloseLocal,
-            "aria-label": "click",
-            src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.CLOSE}`,
-            tooltip: getLabel(getAreasDictionary(DICCTIONARY.label_close_window))
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-const MicroFrontend = (props) => {
-  return /* @__PURE__ */ jsx(MFLoader, { ...props });
-};
-const MemonizedMicroFrontend = React__default.memo(MicroFrontend);
-const Component = (props) => {
-  const { component, dynamicMFStore, windowTools } = props;
-  return /* @__PURE__ */ jsx(WindowToolsMFProvider, { ...windowTools, children: /* @__PURE__ */ jsx(DynamicMFParmsProvider, { store: dynamicMFStore, children: /* @__PURE__ */ jsx("div", { className: areasViewerClasses.containerComponent, children: typeof component === "function" ? component({ windowTools, dynamicMFStore }) : component }) }) });
-};
-React__default.memo(Component);
-const WindowRoot = styled$1("div")`
-  inset: 0;
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  /* height: 100%; */
-  /* width: 100%; */
-  overflow: hidden;
-  border: 1px solid gray;
-
-  background-color: ${(props) => props.theme.vars.palette.background.default};
-  padding: ${(props) => props.theme.spacing(0)};
-  &.${areasViewerClasses.selected} {
-    border-top: 1px solid green;
-  }
-
-  // windowHeader
-  /* 
-    &.${areasViewerClasses.loading} .${areasViewerClasses.windowHeader} {
-        border-bottom: 2px solid red !important; 
-    }
-    */
-  // windowHeaderTitle
-  & .${areasViewerClasses.windowHeaderTitle} {
-    width: 100%;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    color: ${(props) => props.theme.vars.palette.text.primary};
-    text-overflow: ellipsis;
-  }
-
-  & .${areasViewerClasses.windowHeaderCancelHandle} {
-    display: flex;
-    cursor: default;
-  }
-
-  // windowHeaderMainActions
-  & .${areasViewerClasses.windowHeaderMainActions} {
-    display: flex;
-
-    gap: 4px;
-  }
-
-  // windowHeaderMainActions
-  & .${areasViewerClasses.windowContent} {
-    flex-grow: 1;
-    position: relative;
-  }
-
-  & .${areasViewerClasses.windowContent}.${areasViewerClasses.colapsed} {
-    display: none !important;
-  }
-  // windowModalRoot
-  & .${areasViewerClasses.windowModalRoot} {
-    padding: 16px;
-  }
-
-  // windowToastiesContainer
-  & .${areasViewerClasses.windowToastiesContainer} {
-    padding: 4px;
-  }
-
-  // windowToastyContainer
-  & .${areasViewerClasses.windowToastyContainer} {
-    display: flex;
-    flex-direction: column;
-  }
-  // windowToastyContainer
-  & .${areasViewerClasses.windowToastyContainer}.${areasViewerClasses.success} {
-    background-color: ${(props) => props.theme.vars.palette.success.main};
-  }
-
-  // windowToastyMeesageButtonsContainer
-  & .${areasViewerClasses.windowToastyMeesageButtonsContainer} {
-    display: flex;
-  }
-  & .MuiLinearProgress-root {
-    width: 100%;
-  }
-
-  // windowToastyMessage
-  & .${areasViewerClasses.windowToastyMessage} {
-    flex-grow: 1;
-  }
-
-  // windowToastyContainer
-  & .${areasViewerClasses.windowToastyPin}.${areasViewerClasses.pinIn} {
-    border: 1px solid red;
-  }
-
-  ${(props) => props.theme.components?.M4LAreasViewerWindow?.styleOverrides}
-`;
-function Toasty(props) {
-  const { windowId, toastyId } = props;
-  const toasty = useAreasStore(
-    (state) => state.hashWindows[windowId].hashToasties[toastyId],
-    shallow
-  );
-  const { pinToast: pinToasty, closeToast: closeToasty } = useAreasStore(
-    (state) => state.windowActions,
-    shallow
-  );
-  const { host_static_assets, environment_assets } = useEnvironment();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(areasViewerClasses.windowToastyContainer, areasViewerClasses[toasty.type]),
-      children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyMeesageButtonsContainer, children: [
-        /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyMessage, children: [
-          toasty.timer ? /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: toasty.percentExecuted }) : null,
-          toasty.message
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyButtonsContainer, children: [
-          /* @__PURE__ */ jsx(
-            IconButton$1,
-            {
-              className: clsx(
-                areasViewerClasses.windowToastyPin,
-                toasty.timer ? null : areasViewerClasses.pinIn
-              ),
-              onClick: () => {
-                pinToasty(windowId, toastyId);
-              },
-              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.TOASTY_PIN}`
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton$1,
-            {
-              className: areasViewerClasses.windowToastyClose,
-              onClick: () => {
-                closeToasty(windowId, toastyId);
-              },
-              src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.TOASTY_CLOSE}`
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
-function Toasties(props) {
-  const { windowId } = props;
-  const tosties = useAreasStore((state) => state.hashWindows[windowId].toasties, shallow);
-  if (tosties.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowToastiesContainer, children: /* @__PURE__ */ jsx("div", { className: areasViewerClasses.windowToastiesContainerTostys, children: tosties.map((t) => {
-    return /* @__PURE__ */ jsx(Toasty, { windowId, toastyId: t.id }, t.id);
-  }) }) });
-}
-const Window = (props) => {
-  const { areaId, windowId } = props;
-  const [emergeType, moduleId, winType] = useAreasStore((state) => {
-    return [
-      state.hashWindows[windowId]?.emergeType,
-      state.hashWindows[windowId]?.moduleId,
-      state.hashWindows[windowId]?.winType
-    ];
-  }, shallow);
-  const selected = useAreasStore((state) => {
-    return emergeType === "layout" ? state.hashAreas[areaId]?.currentLayoutId : state.hashAreas[areaId]?.currentPopUpId;
-  }) === windowId;
-  const mfProps = useAreasStore((state) => state.hashWindows[windowId]?.mfProps, shallow);
-  const component = useAreasStore(
-    (state) => state.hashWindows[windowId]?.component,
-    shallow
-  );
-  const loading = useAreasStore((state) => state.hashWindows[windowId]?.loading, shallow);
-  const status = useAreasStore((state) => state.hashWindows[windowId]?.status, shallow);
-  const dynamicMFStore = useAreasStore(
-    (state) => state.hashWindows[windowId]?.dynamicMFStore,
-    shallow
-  );
-  const {
-    setActions,
-    getCookie,
-    getCookies,
-    setCookie,
-    close,
-    startProgress,
-    stopProgress,
-    toast,
-    setFnQueryClose
-  } = useAreasStore((state) => state.windowActions, shallow);
-  const { selectLayout } = useAreasStore((state) => state.areaActions, shallow);
-  const { loadCookiesFromApi } = useAreasStore((state) => state.windowActions, shallow);
-  const onTouch = () => {
-    if (!selected) {
-      selectLayout(areaId, props.windowId);
-    }
-  };
-  const windowTools = useMemo(
-    () => ({
-      getWindowId: () => windowId,
-      setActions: (newActions, version) => {
-        setActions(windowId, newActions, version);
-      },
-      getCookie: (id) => getCookie(windowId, id),
-      getCookies: (type) => getCookies(windowId, type),
-      setCookie: (id, type, cookie) => {
-        setCookie(windowId, id, type, cookie);
-      },
-      close: () => close(windowId),
-      startProgress: () => startProgress(windowId),
-      stopProgress: () => stopProgress(windowId),
-      setFnQueryClose: (fnQueryClose) => {
-        setFnQueryClose(windowId, fnQueryClose);
-      },
-      toast: (toastyOptions) => {
-        toast(windowId, toastyOptions);
-      }
-    }),
-    []
-  );
-  useEffect(() => {
-    if (status === "init") {
-      loadCookiesFromApi(windowId);
-    }
-  }, [status]);
-  if (status === void 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    WindowRoot,
-    {
-      role: "presentation",
-      className: clsx(
-        areasViewerClasses.windowRoot,
-        selected ? areasViewerClasses.selectedWindow : null,
-        loading ? areasViewerClasses.loading : null,
-        emergeType === "popup" ? areasViewerClasses.windowPopupRoot : null,
-        emergeType === "modal" ? areasViewerClasses.windowModalRoot : null
-      ),
-      onMouseDown: onTouch,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId$1(
-          AREAS_VIEWER_CLASS_NAME,
-          "windowRoot",
-          `${emergeType}`
-        )
-      } : {},
-      children: /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowRootContainer, children: [
-        /* @__PURE__ */ jsx(Header, { areaId, windowId, emergeType }),
-        /* @__PURE__ */ jsx(Toasties, { windowId }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              areasViewerClasses.windowContent
-            ),
-            children: [
-              status === "init" ? /* @__PURE__ */ jsx(Fragment, { children: "Cargando..." }) : null,
-              status === "loaded" ? winType === "microfrontend" ? /* @__PURE__ */ jsx(
-                MemonizedMicroFrontend,
-                {
-                  moduleId,
-                  dynamicMFStore,
-                  windowTools,
-                  ...mfProps
-                }
-              ) : /* @__PURE__ */ jsx(
-                Component,
-                {
-                  moduleId,
-                  dynamicMFStore,
-                  windowTools,
-                  component
-                }
-              ) : null
-            ]
-          }
-        )
-      ] })
-    }
-  );
-};
-React__default.memo(Window);
-const ResizeHandle = React__default.forwardRef(
-  (props, ref) => {
-    const { handleAxis, ...restProps } = props;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: clsx(
-          `react-resizable-handle react-resizable-handle-${handleAxis}`,
-          areasViewerClasses.resizeHandle
-        ),
-        ...restProps
-      }
-    );
-  }
-);
-const ResponsiveGridLayout = withSizeProvider(Responsive);
-const AreaGridLayout = (props) => {
-  const { areaId } = props;
-  const hashLayoutItems = useAreasStore((state) => state.hashAreas[areaId].layoutItemsIds, shallow);
-  const layouts = useAreasStore((state) => state.hashAreas[areaId].layouts, shallow);
-  const breakpoints = useAreasStore((state) => state.hashAreas[areaId].breakpoints, shallow);
-  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId, shallow);
-  const cols = useAreasStore((state) => state.hashAreas[areaId].cols, shallow);
-  const { onBreakpointsLayoutsChange, onContainerChange } = useAreasStore(
-    (state) => state.areaActions,
-    shallow
-  );
-  return /* @__PURE__ */ jsx(
-    ResponsiveGridLayout,
-    {
-      autoSize: false,
-      compactType: "vertical",
-      measureBeforeMount: true,
-      resizeHandles: ["nw", "se"],
-      className: clsx(
-        areasViewerClasses.areaGridLayout,
-        `${areasViewerClasses.areaGridLayout}-${areaId}`
-      ),
-      layouts,
-      onLayoutChange: (layout, newLayouts) => onBreakpointsLayoutsChange(areaId, layout, newLayouts),
-      draggableHandle: ".m4l_draggable_handle",
-      draggableCancel: `.${areasViewerClasses.windowHeaderCancelHandle}`,
-      layoutItemRender: (p) => {
-        if (hashLayoutItems.indexOf(p.i) === -1) {
-          return /* @__PURE__ */ jsx(Fragment, {});
-        }
-        if (p.type === "placeholder") {
-          return /* @__PURE__ */ jsx("div", {});
-        }
-        return /* @__PURE__ */ jsx(Window, { windowId: p.i, areaId });
-      },
-      breakpoints,
-      colapsedHeight: RESPONSIVE_COLAPSED_HEIGHTS,
-      rowHeight: RESPONSIVE_ROW_HEIGHTS,
-      cols,
-      containerMargin: [MARGIN_GRIDLAYOUT, MARGIN_GRIDLAYOUT],
-      containerPadding: [PADDING_GRIDLAYOUT, PADDING_GRIDLAYOUT],
-      onContainerChange: (e) => {
-        onContainerChange(areaId, e);
-      },
-      preventCollision: false,
-      maximizeId: maximizedId,
-      resizeHandle: /* @__PURE__ */ jsx(ResizeHandle, {})
-    }
-  );
-};
-const PanelWindows = (props) => {
-  const { areaId } = props;
-  const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  const maximizedId = useAreasStore((state) => state.hashAreas[areaId].maximizedId);
-  const maximizedIdParent = useAreasStore(
-    (state) => state.hashWindows[maximizedId || ""]?.parentLayoutId || void 0
-  );
-  const hashLayoutItems = useAreasStore(
-    (state) => state.hashAreas[areaId].layoutItemsIds.filter((itemId) => state.hashWindows[itemId].emergeType === "layout").map((key) => ({
-      i: key,
-      url_icon: state.hashWindows[key].url_icon,
-      title: state.hashWindows[key].title,
-      moduleId: state.hashWindows[key].moduleId,
-      emergeType: state.hashWindows[key].emergeType,
-      windowId: state.hashWindows[key].windowId
-    })),
-    shallow
-  );
-  const { maximizeLayout } = useAreasStore((state) => state.areaActions);
-  const onTouched = (layoutId) => {
-    maximizeLayout(areaId, layoutId);
-  };
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  const currentParam = searchParams.get("module");
-  if (status === "loaded") {
-    if (!maximizedId || hashLayoutItems.length < 2) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx("div", { className: areasViewerClasses.panelWindowsRoot, children: hashLayoutItems.map((kl) => {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx(
-            areasViewerClasses.panelWindowsButtonContainer,
-            maximizedId === kl.i && kl.emergeType !== "popup" || maximizedIdParent === kl.windowId && kl.moduleId === currentParam ? areasViewerClasses.selected : null
-          ),
-          children: /* @__PURE__ */ jsx(
-            IconButton$1,
-            {
-              src: kl.url_icon,
-              size: "small",
-              onClick: () => onTouched(kl.i),
-              tooltip: maximizedId !== kl.i ? kl.title : void 0
-            }
-          )
-        },
-        kl.i
-      );
-    }) });
-  } else {
-    return null;
-  }
-};
-const InnerForHooks = (props) => {
-  const { areaId } = props;
-  const isDesktop = useResponsiveDesktop();
-  const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        areasViewerClasses.areaGridLayoutPanelContainer,
-        `${areasViewerClasses.areaGridLayoutPanelContainer}-${areaId}`
-      ),
-      children: [
-        status === "loaded" ? /* @__PURE__ */ jsx(AreaGridLayout, { areaId }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => {
-        } }),
-        isDesktop ? /* @__PURE__ */ jsx(PanelWindows, { areaId }) : null
-      ]
-    }
-  );
-};
-const Area = (props) => {
-  const { selected, areaId } = props;
-  const classesAreaRoot = useAreasStore((state) => state.viwerClasses.areaRoot);
-  const status = useAreasStore((state) => state.hashAreas[areaId].status);
-  if (status === "init") {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        classesAreaRoot,
-        selected ? areasViewerClasses.selected : null,
-        status === "loading" ? areasViewerClasses.loading : null
-      ),
-      children: /* @__PURE__ */ jsx(InnerForHooks, { areaId })
-    }
-  );
-};
-Area.displayName = "Area";
-styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  overflow: "hidden",
-  padding: theme.spacing(3)
-}));
-const WrapperWindowModal = styled(Dialog)(({ theme }) => ({
-  hola: 1,
-  backgroundColor: theme.vars.palette.background.paper,
-  "& .MuiDialog-container": {},
-  "&.m4l_selected": {
-    borderTop: "1px solid green"
-  },
-  ...theme.components?.M4LAreasViewerModal?.styleOverrides
-}));
-const WindowModal = (props) => {
-  const { windowId } = props;
-  const { onClose } = useAreasStore((state) => state.hashWindowsModals[windowId]);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const isDesktop = useResponsiveDesktop();
-  const DragabblePaperComponent = (_props) => {
-    return /* @__PURE__ */ jsx(
-      cjs.exports,
-      {
-        handle: ".m4l_draggable_handle",
-        bounds: "parent",
-        children: /* @__PURE__ */ jsx(
-          ResizeableWindow,
-          {
-            width: props.windowProps?.width || 400,
-            height: props.windowProps?.height || 300,
-            handle: (resizeHandle, ref) => /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(
-              Icon,
-              {
-                src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.RESIZE}`,
-                className: `custom-handle custom-handle-${resizeHandle}`
-              }
-            ) }, resizeHandle),
-            children: /* @__PURE__ */ jsx(Window, { ...props })
-          }
-        )
-      }
-    );
-  };
-  function PaperComponent(_props) {
-    return /* @__PURE__ */ jsx(Window, { ...props });
-  }
-  return /* @__PURE__ */ jsx(
-    WrapperWindowModal,
-    {
-      className: areasViewerClasses.windowModalRoot,
-      open: true,
-      scroll: "paper",
-      onKeyDown: (event) => {
-        if (event.key === "Escape") {
-          onClose && onClose(windowId);
-        }
-      },
-      "aria-labelledby": "child-modal-title",
-      "aria-describedby": "child-modal-description",
-      PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
-      maxWidth: false,
-      fullWidth: !isDesktop,
-      fullScreen: false,
-      disableEnforceFocus: true
-    }
-  );
-};
-const MemonizedWindowModal = React__default.memo(WindowModal);
-function AreasViewer() {
-  const areas = useAreasStore((state) => state.areasIds, shallow);
-  const windowsModals = useAreasStore((state) => state.windowsModals);
-  const hashWindowsModals = useAreasStore((state) => state.hashWindowsModals);
-  const currentArea = useAreasStore((state) => state.currentAreaId);
-  const status = useAreasStore((state) => state.ownerState.status);
-  const classesRoot = useAreasStore((state) => state.viwerClasses.root);
-  const { init } = useAreasStore((state) => state.areasActions);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AreasViewerRoot,
-      {
-        className: classesRoot,
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getNameDataTestId$1(
-            AREAS_VIEWER_CLASS_NAME,
-            "root",
-            ""
-          )
-        } : {},
-        children: status === "loaded" ? areas.map((area) => {
-          return /* @__PURE__ */ jsx(Area, { areaId: area, selected: currentArea === area }, area);
-        }) : /* @__PURE__ */ jsx(LoadingError, { status, action: () => init() })
-      }
-    ),
-    windowsModals.map((wm) => {
-      if (hashWindowsModals[wm]) {
-        return /* @__PURE__ */ jsx(MemonizedWindowModal, { ...hashWindowsModals[wm] }, wm);
-      }
-      return null;
-    })
-  ] });
-}
-const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  "root",
-  "booleanFormatterIcon",
-  "booleanFormatterCheck"
-]);
-const FormatterRootContainer = styled$1("div")(({ theme }) => ({
-  ...theme.components?.M4LFormatter?.styleOverrides
-}));
-const FormatterRoot = (props) => {
-  const { children } = props;
-  return /* @__PURE__ */ jsx(FormatterRootContainer, { className: formatterClasses.root, children });
-};
-function BooleanFormatter(props) {
-  const { presentationType, value, Component: Component2 = WrapperComponent } = props;
-  const { getLabel } = useModuleDictionary();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const final_value = value ?? false;
-  const srcCheckTrue = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_true.svg`;
-  const srcCheckFalse = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_false.svg`;
-  const memoComponent = useMemo(() => {
-    if (presentationType === "string_yes_no") {
-      return /* @__PURE__ */ jsx(Component2, { children: final_value ? getLabel(LABEL_BOOLEAN_YES) : getLabel(LABEL_BOOLEAN_NO) });
-    }
-    if (presentationType === "string_true_false") {
-      return /* @__PURE__ */ jsx(Component2, { children: final_value ? getLabel(LABEL_BOOLEAN_TRUE) : getLabel(LABEL_BOOLEAN_FALSE) });
-    }
-    return /* @__PURE__ */ jsx(FormatterRoot, { children: /* @__PURE__ */ jsx(Component2, { children: /* @__PURE__ */ jsx(
-      Icon,
-      {
-        src: final_value ? srcCheckTrue : srcCheckFalse,
-        className: clsx(
-          formatterClasses.root,
-          formatterClasses.booleanFormatterIcon,
-          final_value && formatterClasses.booleanFormatterCheck
-        )
-      }
-    ) }) });
-  }, [final_value]);
-  return memoComponent;
-}
-function getFormatDate(presentationType, value, format) {
-  const { dateFormatter } = useFormatter();
-  let finalFormat = format || dateFormatter.datetimeFormat;
-  let result;
-  let resultDate;
-  if (value === void 0 || value === null) {
-    return "-";
-  }
-  switch (presentationType) {
-    case "datetime":
-      finalFormat = format || dateFormatter.datetimeFormat;
-      break;
-    case "date":
-      finalFormat = format || dateFormatter.dateFormat;
-      break;
-    case "time":
-      finalFormat = format || dateFormatter.timeFormat;
-      break;
-  }
-  try {
-    if (typeof value === "number" || typeof value === "string") {
-      resultDate = new Date(value);
-    } else {
-      resultDate = value;
-    }
-    result = dateFormatter.formatDate(resultDate, finalFormat);
-    return result;
-  } catch (e) {
-    result = "-";
-    return result;
-  }
-}
-function DateFormatter(props) {
-  const { presentationType, value, format, Component: Component2 = WrapperComponent } = props;
-  return /* @__PURE__ */ jsx(Component2, { children: getFormatDate(presentationType, value, format) });
-}
-function getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit) {
-  let result = "";
-  const ranges = getPropertyByString(obProps, fieldValue);
-  const symbol = getPropertyByString(obProps, fieldSymbol);
-  const unit = getPropertyByString(obProps, fieldUnit);
-  if (ranges === void 0 || ranges === null || !Array.isArray(ranges) || typeof symbol !== "string" || typeof unit !== "string") {
-    return "[]";
-  }
-  ranges.map((obj, idx) => {
-    const cmc_min_closed = obj.cmc_min_closed != true ? "<" : "\u2264";
-    const cmc_max_closed = obj.cmc_max_closed != true ? "<" : "\u2264";
-    result = result.concat(
-      `${idx > 0 ? " " : ""}`,
-      obj.cmc_min !== obj.cmc_max ? `[${obj.cmc_min}${unit} ${cmc_min_closed} ${symbol} ${cmc_max_closed} ${obj.cmc_max}${unit} \xB1 ${obj.cmc_uncertainty}]` : `[${obj.cmc_min}${unit} \xB1 ${obj.cmc_uncertainty}]`
-    );
-  });
-  return result;
-}
-function UncertaintyFormatter(props) {
-  const { obProps, fieldValue, fieldSymbol, fieldUnit, Component: Component2 = WrapperComponent } = props;
-  return /* @__PURE__ */ jsx(Component2, { children: getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit) });
-}
-function getFormatPoints(obProps, fieldValue, fieldUnit, chainPoint) {
-  let result = "";
-  const points = evaluateWithContext(obProps, fieldValue);
-  const unit = evaluateWithContext(obProps, fieldUnit) || "";
-  if (points === void 0 || points === null || !Array.isArray(points)) {
-    return "[]";
-  }
-  points.map((point) => {
-    if (point) {
-      result = !chainPoint ? result.concat(`[${point}${unit}]`) : result.concat(`[${evaluateWithContext(point, chainPoint)}${unit}]`);
-    }
-  });
-  return result;
-}
-function PointsFormatter(props) {
-  const { obProps, fieldValue, fieldUnit, Component: Component2 = WrapperComponent } = props;
-  return /* @__PURE__ */ jsx(Component2, { children: getFormatPoints(obProps, fieldValue, fieldUnit) });
-}
-function getFormatConcatenated(values, separator) {
-  const returnSymbol = "";
-  if (values === null)
-    return returnSymbol;
-  if (!Array.isArray(values)) {
-    return values.toString();
-  } else {
-    if (values.length == 0)
-      return returnSymbol;
-    else {
-      const result = values.map((value) => {
-        if (value === null || value === void 0)
-          return returnSymbol;
-        else {
-          if (typeof value === "string" || typeof value === "number") {
-            return value.toString();
-          } else {
-            return returnSymbol;
-          }
-        }
-      });
-      const output = result.join(separator.toString());
-      return output.trim();
-    }
-  }
-}
-function ConcatenatedFormatter(props) {
-  const { values = [], separator = " ", Component: Component2 = WrapperComponent } = props;
-  return /* @__PURE__ */ jsx(Component2, { children: getFormatConcatenated(values, separator) });
-}
-function getFormatPrice(obProps, fieldValue, currency, decimalDigits) {
-  let result = "";
-  const value = getPropertyByString(obProps, fieldValue);
-  try {
-    result = Number(value).toLocaleString(navigator.language, {
-      currency,
-      style: "currency",
-      currencyDisplay: "symbol",
-      useGrouping: true,
-      maximumFractionDigits: decimalDigits
-    }) || "";
-  } catch (error) {
-    result = Number(value).toLocaleString("en-US", {
-      style: "currency",
-      currency: "USD",
-      currencyDisplay: "symbol",
-      useGrouping: true,
-      maximumFractionDigits: decimalDigits
-    }) || "";
-  }
-  return result;
-}
-function PriceFormatter(props) {
-  const { obProps, fieldValue, Component: Component2 = WrapperComponent } = props;
-  const { currencyFormatter } = useFormatter();
-  return /* @__PURE__ */ jsx(Component2, { children: getFormatPrice(obProps, fieldValue, currencyFormatter.code, currencyFormatter.decimalDigits) });
-}
-const DataGridRoot = styled("div")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "column",
-  position: "absolute",
-  padding: "0px",
-  inset: "0px",
-  overflow: "hidden",
-  ...theme.components?.M4LDataGrid?.styleOverrides
-}));
-const DataGridContext = createContext(null);
-const getColumnConfigByKey = (key, storeColumnsConfig) => {
-  let indexFind = -1;
-  return [
-    storeColumnsConfig.find((column, index) => {
-      if (column.key === key) {
-        indexFind = index;
-      }
-      return column.key === key;
-    }),
-    indexFind
-  ];
-};
-function getColumnsConfig(id, columns, remoteConfig = void 0) {
-  let columnsConfig;
-  if (remoteConfig) {
-    columnsConfig = remoteConfig.columnsConfig;
-  } else {
-    try {
-      const item = window.localStorage.getItem(`${id}_columns_config`);
-      columnsConfig = item !== null ? JSON.parse(item) : [];
-    } catch (e) {
-      columnsConfig = [];
-    }
-  }
-  return columns.map((column, index) => {
-    const [columnConfig = { ...column }, columnConfigIndex] = getColumnConfigByKey(
-      column.key,
-      columnsConfig
-    );
-    return {
-      key: column.key,
-      name: column.name,
-      hidden: column.hidden === void 0 ? false : column.hidden,
-      index: columnConfigIndex > -1 ? columnConfigIndex : index,
-      visible: columnConfig.visible === void 0 ? true : columnConfig.visible,
-      frozen: columnConfig.frozen === void 0 ? false : columnConfig.frozen,
-      orginalIndex: index,
-      originalVisible: column.visible === void 0 ? true : column.visible,
-      originalFrozen: column.frozen === void 0 ? false : column.frozen
-    };
-  }).sort((a, b) => a.index - b.index);
-}
-function getColumnsWidth(id, columns, remoteConfig) {
-  const newMap = /* @__PURE__ */ new Map();
-  let storeColumnsWidth;
-  try {
-    const item = window.localStorage.getItem(`${id}_columns_width`);
-    storeColumnsWidth = item !== null ? new Map(JSON.parse(item)) : /* @__PURE__ */ new Map();
-  } catch (e) {
-    storeColumnsWidth = /* @__PURE__ */ new Map();
-  }
-  for (let i = 0; i < columns.length; i++) {
-    let width;
-    if (remoteConfig) {
-      try {
-        width = remoteConfig.columnsWidths.get(columns[i].key);
-      } catch (error) {
-      }
-    }
-    if (width === void 0) {
-      const storeWidth = storeColumnsWidth.get(columns[i].key);
-      if (typeof storeWidth === "number") {
-        width = storeWidth;
-      }
-    }
-    if (width !== void 0) {
-      newMap.set(columns[i].key, width);
-    }
-  }
-  return newMap;
-}
-function saveColumnsWidth(id, storeColumnsWidth) {
-  localStorage.setItem(`${id}_columns_width`, JSON.stringify([...storeColumnsWidth]));
-}
-function saveColumnsConfig(id, columnsConfig) {
-  localStorage.setItem(`${id}_columns_config`, JSON.stringify(columnsConfig));
-}
-function getIndexRowHeightVariant(variant) {
-  if (variant === "compact") {
-    return 0;
-  }
-  if (variant === "standard") {
-    return 1;
-  }
-  return 2;
-}
-function DataGridProvider(props) {
-  const {
-    id,
-    children,
-    columns,
-    remoteConfig,
-    rows,
-    rowsCount,
-    rowActionsGetter,
-    rowHeights = [28, 32, 36],
-    rowHeaderHeights = [28, 32, 36],
-    initialRowHeightVariant = "compact",
-    checkedRows,
-    onCheckedRowsChange,
-    rowKeyGetter,
-    classes
-  } = props;
-  const [columnsWidths, setColumnsWidths] = useState(
-    /* @__PURE__ */ new Map()
-  );
-  const [columnsConfig, setColumnsConfigOptions] = useState(
-    () => []
-  );
-  const [rowsFilterCount, setRowFilterCount] = useState(rowsCount);
-  const [currentRowHeightVariant, setCurrentRowHeightVariant] = useState(() => {
-    if (typeof rowHeights !== typeof rowHeaderHeights) {
-      throw new Error("Must be same type rowheights and rowHeaderTypes");
-    }
-    if (typeof rowHeights === "number" && typeof rowHeaderHeights === "number") {
-      return {
-        rowHVariant: "compact",
-        rowHeight: rowHeights,
-        rowHeaderHeight: rowHeaderHeights
-      };
-    }
-    if (typeof rowHeights !== "number" && rowHeights.length !== 3) {
-      throw new Error("Must be 3 heights");
-    }
-    if (typeof rowHeaderHeights !== "number" && rowHeaderHeights.length !== 3) {
-      throw new Error("Must be 3 HeaderHeights");
-    }
-    return {
-      rowHVariant: initialRowHeightVariant,
-      rowHeight: typeof rowHeights !== "number" ? rowHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeights,
-      rowHeaderHeight: typeof rowHeaderHeights !== "number" ? rowHeaderHeights[getIndexRowHeightVariant(initialRowHeightVariant)] : rowHeaderHeights
-    };
-  });
-  const finalRowHeights = useMemo(() => rowHeights, [rowHeights]);
-  let timerSaveColumns;
-  useEffect(() => {
-  }, [columnsConfig]);
-  useEffect(() => {
-    setColumnsWidths(getColumnsWidth(id, columns, remoteConfig));
-    setColumnsConfigOptions(getColumnsConfig(id, columns, remoteConfig));
-  }, [columns, id, remoteConfig]);
-  const onChangeColumnsConfig = useCallback(
-    (newColumnsConfig) => {
-      saveColumnsConfig(id, newColumnsConfig);
-      setColumnsConfigOptions(newColumnsConfig);
-    },
-    [setColumnsConfigOptions, id]
-  );
-  const onChangeColumnsOrder = useCallback(
-    (sourceKey, targetKey) => {
-      if (sourceKey === targetKey)
-        return;
-      const sourceColumnIndex = columnsConfig.findIndex((c) => c.key === sourceKey);
-      const targetColumnIndex = columnsConfig.findIndex((c) => c.key === targetKey);
-      const reorderedColumnsConfig = [...columnsConfig];
-      reorderedColumnsConfig.splice(
-        targetColumnIndex,
-        0,
-        reorderedColumnsConfig.splice(sourceColumnIndex, 1)[0]
-      );
-      onChangeColumnsConfig(reorderedColumnsConfig);
-    },
-    [columnsConfig, onChangeColumnsConfig]
-  );
-  const onChangeColumnWidth = (columnKey, width) => {
-    columnsWidths.set(columnKey, Math.round(width));
-    if (timerSaveColumns) {
-      clearTimeout(timerSaveColumns);
-    }
-    timerSaveColumns = setTimeout(() => {
-      saveColumnsWidth(id, columnsWidths);
-    }, 500);
-  };
-  useEffect(() => {
-    setColumnsConfigOptions(getColumnsConfig(id, columns));
-  }, [columns]);
-  const setRowFilterCountInternal = (newRowsCount) => {
-    setRowFilterCount(newRowsCount);
-  };
-  const setCurrentRowHeightInternal = useCallback(
-    (newVariant) => {
-      if (typeof rowHeights === "number" || typeof rowHeaderHeights === "number") {
-        throw new Error("Only use setCurrentRowHeight with vector rowHeights");
-      }
-      setCurrentRowHeightVariant({
-        rowHVariant: newVariant,
-        rowHeight: rowHeights[getIndexRowHeightVariant(newVariant)],
-        rowHeaderHeight: rowHeaderHeights[getIndexRowHeightVariant(newVariant)]
-      });
-    },
-    [setCurrentRowHeightVariant, rowHeights, rowHeaderHeights]
-  );
-  return /* @__PURE__ */ jsx(
-    DataGridContext.Provider,
-    {
-      value: {
-        columnsConfig,
-        columnsWidths,
-        rowsCount: rowsFilterCount,
-        currentRowHeightVariant: currentRowHeightVariant.rowHVariant,
-        currentRowHeight: currentRowHeightVariant.rowHeight,
-        currentRowHeaderHeight: currentRowHeightVariant.rowHeaderHeight,
-        rows,
-        rowHeights: finalRowHeights,
-        checkedRows,
-        onChangeColumnsConfig,
-        onChangeColumnsOrder,
-        onChangeColumnWidth,
-        setRowsCount: setRowFilterCountInternal,
-        rowActionsGetter,
-        classes,
-        setRowHeightVariant: setCurrentRowHeightInternal,
-        onCheckedRowsChange,
-        rowKeyGetter
-      },
-      children
-    }
-  );
-}
-function useDataGrid() {
-  const context = useContext(DataGridContext);
-  if (!context)
-    throw new Error("useDataGrid context must be use inside DataGridContext");
-  return context;
-}
-const initialState = {
-  activeFilters: false,
-  setActiveFilters: voidFunction
-};
-const FilterContext = createContext(initialState);
-function FilterProvider({ children, initialActiveFilters }) {
-  const [filterOptions, setFilterOptions] = useState({
-    activeFilters: initialActiveFilters
-  });
-  const onChangeFilter = (column, value) => {
-    const newMap = filterOptions.filters ? new Map(filterOptions.filters) : /* @__PURE__ */ new Map();
-    if (value !== "") {
-      newMap.set(column.key, { value, customFilter: column.customFilter });
-    } else {
-      newMap.delete(column.key);
-    }
-    setFilterOptions({
-      ...filterOptions,
-      filters: newMap
-    });
-  };
-  const setActiveFilters = (active) => {
-    if (active) {
-      setFilterOptions({ activeFilters: true, filters: /* @__PURE__ */ new Map() });
-    } else {
-      setFilterOptions({ activeFilters: false });
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    FilterContext.Provider,
-    {
-      value: {
-        ...filterOptions,
-        onChangeFilter,
-        setActiveFilters
-      },
-      children
-    }
-  );
-}
-const useFilters = () => useContext(FilterContext);
-function Filter() {
-  const { activeFilters, setActiveFilters } = useFilters();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes } = useDataGrid();
-  const toggleIcon = () => {
-    setActiveFilters(!activeFilters);
-  };
-  return /* @__PURE__ */ jsx(
-    IconButton$1,
-    {
-      dictionaryTooltipId: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show",
-      className: classes.actionFilter,
-      onClick: toggleIcon,
-      "aria-label": "filter",
-      src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`
-    }
-  );
-}
-const WrapperColumnsConfig = styled("div")(({ theme }) => ({
-  color: theme.vars.palette.text.primary,
-  position: "relative",
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  width: "100%"
-}));
-styled("div")(({ theme }) => ({
-  color: theme.vars.palette.text.primary,
-  fontSize: theme.typography.h4.fontSize
-}));
-const DivSelColumns = styled("div")(({ theme }) => ({
-  ...theme.colorSchemes.finalTheme.typography.bodyDens,
-  color: theme.vars.palette.text.primary,
-  padding: `16px 8px`
-}));
-const WrapperDataGrid = styled("div")(() => ({
-  position: "relative",
-  display: "flex",
-  flexDirection: "column",
-  flexGrow: 1,
-  overflow: "auto"
-}));
-styled("div")(() => ({
-  display: "flex",
-  flexDirection: "row"
-}));
-const ColumnActions = styled("div")(() => ({
-  paddingTop: "16px",
-  paddingBottom: "8px",
-  display: "flex",
-  flexDirection: "row"
-}));
-styled("div")(({ theme }) => ({
-  paddingTop: theme.spacing(3),
-  display: "flex",
-  flexDirection: "row",
-  justifyContent: "flex-end",
-  "& > button": {
-    marginLeft: "10px"
-  }
-}));
-function ColumnUncertaintyFormatter(props) {
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(UncertaintyFormatter, { obProps, ...props });
-  };
-}
-function ColumnPointsFormatter(props) {
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(PointsFormatter, { obProps, ...props });
-  };
-}
-function ColumnNestedValueFormatter(props) {
-  const { fieldValue, Component: Component2 = WrapperComponent } = props;
-  return (obProps) => {
-    const property = getPropertyByString(obProps, fieldValue);
-    const value = typeof property === "object" ? "" : property;
-    return /* @__PURE__ */ jsx(Component2, { children: value });
-  };
-}
-function ColumnBooleanFormatter(props) {
-  const { fieldValue, presentationType, Component: Component2 } = props;
-  return (obProps) => {
-    const valueMaybeString = getPropertyByString(obProps, fieldValue);
-    let fixedValue;
-    if (typeof valueMaybeString === "boolean") {
-      fixedValue = valueMaybeString;
-    } else {
-      fixedValue = void 0;
-    }
-    return /* @__PURE__ */ jsx(
-      BooleanFormatter,
-      {
-        presentationType,
-        value: fixedValue,
-        Component: Component2
-      }
-    );
-  };
-}
-function ColumnDateFormatter(props) {
-  const { fieldValue, presentationType, Component: Component2 } = props;
-  return (obProps) => {
-    const valueMaybeDateStringNumber = getPropertyByString(obProps, fieldValue);
-    let fixedValue;
-    if (typeof valueMaybeDateStringNumber === "string" || typeof valueMaybeDateStringNumber === "number" || valueMaybeDateStringNumber instanceof Date) {
-      fixedValue = valueMaybeDateStringNumber;
-    } else {
-      fixedValue = "";
-    }
-    return /* @__PURE__ */ jsx(DateFormatter, { presentationType, value: fixedValue, Component: Component2 });
-  };
-}
-function ColumnConcatenatedValueFormatter(props) {
-  const { fieldValue, fieldSeparator, Component: Component2 } = props;
-  return (obProps) => {
-    const values = fieldValue.map((element) => {
-      const valueMaybeString = getPropertyByString(obProps, element);
-      let fixedValue;
-      if (typeof valueMaybeString === "string" || typeof valueMaybeString === "number") {
-        fixedValue = valueMaybeString;
-      } else {
-        fixedValue = "";
-      }
-      return fixedValue;
-    });
-    return /* @__PURE__ */ jsx(ConcatenatedFormatter, { values, separator: fieldSeparator, Component: Component2 });
-  };
-}
-function ColumnPriceFormatter(props) {
-  return (obProps) => {
-    return /* @__PURE__ */ jsx(PriceFormatter, { obProps, ...props });
-  };
-}
-const dataGridClasses = generateUtilityClasses(componentName$2, [
-  "root",
-  "actions",
-  "withPager",
-  "withNoPager",
-  "rowsCount",
-  "rowsCountLabel",
-  "rowsCountValue",
-  "densitySkeleton",
-  "actionDensityPopover",
-  "actionFilter",
-  "actionSettings",
-  "tableContaniner",
-  "wrapperDataGridCss",
-  "columnsConfigContainer",
-  "columnsLabelSetColumns",
-  "columnsConfigContent",
-  "columnsConfigGrid",
-  "columnsConfigActions",
-  "formatterColumn",
-  "skeletonFormatter",
-  "actionsFormatter",
-  "actionsConfigContainer",
-  "booleanFormatter",
-  "withActions"
-]);
-function getDataGridUtilityClass(slot) {
-  return generateUtilityClass(componentName$2, slot);
-}
-const dataGridUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root"],
-    actions: ["actions", ownerState.actionsProps.withPager ? "withPager" : "withNoPager"],
-    rowsCount: ["rowsCount"],
-    rowsCountLabel: ["rowsCountLabel"],
-    rowsCountValue: ["rowsCountValue"],
-    densitySkeleton: ["densitySkeleton"],
-    densityRoot: ["densityRoot"],
-    densityPopover: ["densityPopover"],
-    actionFilter: ["actionFilter"],
-    actionSettings: ["actionSettingsRoot"],
-    actionDensityPopover: ["actionDensityPopover"],
-    tableContaniner: ["tableContaniner", ownerState.withActions && "withActions"],
-    wrapperDataGridCss: ["wrapperDataGridCss"],
-    columnsConfigContainer: ["columnsConfigContainer"],
-    columnsLabelSetColumns: ["columnsLabelSetColumns"],
-    columnsConfigContent: ["columnsConfigContent"],
-    columnsConfigGrid: ["columnsConfigGrid"],
-    columnsConfigActions: ["columnsConfigActions"],
-    formatterColumn: ["formatterColumn"],
-    skeletonFormatter: ["skeletonFormatter"],
-    actionsFormatter: ["actionsFormatter"],
-    actionsConfigContainer: ["actionsConfigContainer"],
-    booleanFormatter: ["booleanFormatter"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getDataGridUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function ColumnInteractiveCheckFormatter(props) {
-  const { row, onRowChange, column } = props;
-  const handleChange = () => {
-    const newRow = { ...row };
-    newRow[column.key] = !row[column.key];
-    onRowChange(newRow);
-  };
-  return /* @__PURE__ */ jsx(
-    Checkbox,
-    {
-      size: "small",
-      checked: row[column.key] || false,
-      onChange: handleChange,
-      className: dataGridClasses.formatterColumn
-    }
-  );
-}
-function ColumnSetCheckFormatter(parameters) {
-  const { field, disabledGetter, rowKeyGetter, useHook } = parameters;
-  const formatter = (props) => {
-    const { row } = props;
-    const [checkedRows, setCheckedRows] = useHook(field);
-    const onChange = (checked, _isShiftClick) => {
-      const newCheckedRows = new Set(checkedRows);
-      if (checked) {
-        newCheckedRows.add(rowKeyGetter(props.row));
-      } else {
-        newCheckedRows.delete(rowKeyGetter(props.row));
-      }
-      setCheckedRows(newCheckedRows);
-    };
-    let disabled = false;
-    if (disabledGetter) {
-      disabled = disabledGetter(row);
-    }
-    return /* @__PURE__ */ jsx(
-      SelectCellFormatter,
-      {
-        value: checkedRows.has(rowKeyGetter(row)) || false,
-        disabled,
-        isCellSelected: props.isCellSelected,
-        onChange,
-        "aria-label": "Select"
-      }
-    );
-  };
-  return formatter;
-}
-function getRowsFromColumnsConfig(columnsConfig) {
-  return columnsConfig.filter((column) => !column.hidden).map(
-    (column) => ({
-      key: column.key,
-      name: column.name,
-      visible: column.visible === void 0 ? true : column.visible,
-      frozen: column.frozen === void 0 ? false : column.frozen,
-      originalIndex: column.orginalIndex,
-      originalFrozen: column.originalFrozen,
-      originalVisible: column.originalVisible
-    })
-  );
-}
-const ColumnsConfig = forwardRef((props, ref) => {
-  const refdata_grid = useRef(null);
-  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, classes } = props;
-  const { getLabel } = useModuleDictionary();
-  const [isInit, setIsInit] = useState(true);
-  const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
-  const [selRows, setSelRows] = useState(() => /* @__PURE__ */ new Set());
-  const divRef = useRef(null);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  useImperativeHandle(ref, () => ({
-    onClickIntro: handleIntro,
-    current: divRef.current
-  }));
-  const columnsdata_grid = useMemo(
-    () => [
-      {
-        key: "name",
-        name: getLabel("data_grid.settings_column_name"),
-        width: 200,
-        resizable: true,
-        type: "string"
-      },
-      {
-        key: "originalIndex",
-        name: getLabel("data_grid.settings_column_position"),
-        width: 50,
-        type: "number",
-        cellClass: "rdg-cell-align-center"
-      },
-      {
-        key: "visible",
-        name: getLabel("data_grid.settings_column_visible"),
-        width: 80,
-        type: "boolean",
-        formatter: ColumnInteractiveCheckFormatter,
-        cellClass: "rdg-cell-align-center"
-      },
-      {
-        key: "frozen",
-        name: getLabel("data_grid.settings_column_frozen"),
-        width: 80,
-        type: "boolean",
-        formatter: ColumnInteractiveCheckFormatter,
-        cellClass: "rdg-cell-align-center"
-      }
-    ],
-    [getLabel]
-  );
-  const checkAll = () => {
-    setRows(rows.map((row) => ({ ...row, visible: true })));
-  };
-  const unCheckAll = () => {
-    setRows(rows.map((row) => ({ ...row, visible: false })));
-  };
-  const restoreAll = () => {
-    setRows(
-      rows.map((row) => ({
-        ...row,
-        visible: row.originalVisible,
-        frozen: row.originalFrozen,
-        index: row.originalIndex
-      })).sort((a, b) => a.index - b.index)
-    );
-  };
-  useEffect(() => {
-    if (isInit === false) {
-      setRows(getRowsFromColumnsConfig(columnsConfig));
-    }
-    setIsInit(false);
-  }, [columnsConfig]);
-  const rowSelectedIndex = useMemo(() => {
-    let rowIndex = -1;
-    if (selRows.size !== 1)
-      return rowIndex;
-    const iterator = selRows.entries();
-    const entry = iterator.next().value[1];
-    rowIndex = rows.findIndex((row) => row.key === entry);
-    return rowIndex;
-  }, [rows, selRows]);
-  const handleMoveFirst = () => {
-    if (rowSelectedIndex === -1)
-      return -1;
-    const newRows = [...rows];
-    newRows.splice(rowSelectedIndex, 1);
-    newRows.splice(0, 0, rows[rowSelectedIndex]);
-    refdata_grid.current?.selectCell({ idx: 0, rowIdx: 0 });
-    setRows(newRows);
-  };
-  const handleMoveLast = () => {
-    if (rowSelectedIndex === -1)
-      return -1;
-    const newRows = [...rows];
-    newRows.splice(rowSelectedIndex, 1);
-    newRows.splice(newRows.length, 0, rows[rowSelectedIndex]);
-    refdata_grid.current?.selectCell({ idx: 0, rowIdx: newRows.length - 1 });
-    setRows(newRows);
-  };
-  const handleMoveUpDownd = (position) => {
-    if (rowSelectedIndex === -1)
-      return -1;
-    const newRows = [...rows];
-    const element = newRows[rowSelectedIndex];
-    newRows.splice(rowSelectedIndex, 1);
-    newRows.splice(rowSelectedIndex + position, 0, element);
-    refdata_grid.current?.selectCell({ idx: 0, rowIdx: rowSelectedIndex + position });
-    setRows(newRows);
-  };
-  const getColumnConfigByKey2 = (key) => {
-    const rowIndexFinded = rows.findIndex((row) => row.key === key);
-    if (rowIndexFinded > -1) {
-      return {
-        visible: rows[rowIndexFinded].visible,
-        frozen: rows[rowIndexFinded].frozen
-      };
-    }
-    return void 0;
-  };
-  const getRowIndex = (column) => {
-    const rowIndexFinded = rows.findIndex((row) => row.key === column.key);
-    if (rowIndexFinded > -1) {
-      return rowIndexFinded;
-    }
-    return columnsConfig.findIndex((columnConfig) => columnConfig.key === column.key);
-  };
-  const handleIntro = () => {
-    const newColumnsConfig = columnsConfig.map((columnConfig) => {
-      const newColumnConfig = { ...columnConfig };
-      if (!columnConfig.hidden) {
-        const columnConfigRow = getColumnConfigByKey2(columnConfig.key);
-        if (columnConfigRow) {
-          newColumnConfig.visible = columnConfigRow.visible;
-          newColumnConfig.frozen = columnConfigRow.frozen;
-        }
-      }
-      return newColumnConfig;
-    }).sort((a, b) => getRowIndex(a) - getRowIndex(b));
-    onChangeColumnsConfig(newColumnsConfig);
-    onCloseSettings();
-  };
-  const onInternalSelectedRowsChange = () => {
-  };
-  const onInternalRowsChange = (newRows) => {
-    setRows(newRows);
-  };
-  const onRowClick = (row) => {
-    if (selRows.has(row.key))
-      return;
-    const mySet = /* @__PURE__ */ new Set([row.key]);
-    setSelRows(mySet);
-  };
-  return /* @__PURE__ */ jsxs(WrapperColumnsConfig, { ref: divRef, className: classes.columnsConfigContainer, children: [
-    /* @__PURE__ */ jsx(DivSelColumns, { className: classes.columnsLabelSetColumns, children: getLabel("data_grid.settings_sel_columns") }),
-    /* @__PURE__ */ jsx(WrapperDataGrid, { className: classes.columnsConfigContent, children: /* @__PURE__ */ jsx("div", { className: classes.wrapperDataGridCss, children: /* @__PURE__ */ jsx(
-      DataGrid$1,
-      {
-        className: classes.columnsConfigGrid,
-        ref: refdata_grid,
-        columns: columnsdata_grid,
-        rows,
-        onRowsChange: onInternalRowsChange,
-        selectedRows: selRows,
-        onSelectedRowsChange: onInternalSelectedRowsChange,
-        onRowClick,
-        rowKeyGetter: (row) => row.key,
-        cellNavigationMode: "CHANGE_ROW",
-        defaultColumnOptions: { resizable: true, sortable: true }
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxs(ColumnActions, { className: classes.columnsConfigActions, children: [
-      /* @__PURE__ */ jsx(
-        IconButton$1,
-        {
-          tooltip: getLabel("data_grid.settings_move_first"),
-          onClick: handleMoveFirst,
-          "aria-label": "move first place",
-          disabled: rowSelectedIndex < 1,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_first_place.svg`
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton$1,
-        {
-          tooltip: getLabel("data_grid.settings_move_up"),
-          dictionaryTooltipId: "data_grid.settings_move_up",
-          onClick: () => handleMoveUpDownd(-1),
-          "aria-label": "move up place",
-          disabled: rowSelectedIndex < 1,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_up_place.svg`
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton$1,
-        {
-          tooltip: getLabel("data_grid.settings_move_last"),
-          onClick: handleMoveLast,
-          "aria-label": "move last place",
-          disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_last_place.svg`
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton$1,
-        {
-          tooltip: getLabel("data_grid.settings_move_down"),
-          onClick: () => handleMoveUpDownd(1),
-          "aria-label": "move down place",
-          disabled: !!(rowSelectedIndex === rows.length - 1 || rowSelectedIndex === -1),
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/move_down_place.svg`
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton$1,
-        {
-          tooltip: getLabel("data_grid.settings_visible_all"),
-          onClick: checkAll,
-          "aria-label": "check visible all",
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/check_all.svg`
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton$1,
-        {
-          tooltip: getLabel("data_grid.settings_no_visible_all"),
-          onClick: unCheckAll,
-          "aria-label": "un check all",
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/uncheck_all.svg`
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton$1,
-        {
-          tooltip: getLabel("data_grid.settings_restore"),
-          onClick: restoreAll,
-          "aria-label": "Restore columns",
-          src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/restore_columns.svg`
-        }
-      )
-    ] })
-  ] });
-});
-ColumnsConfig.displayName = "ColumnsConfig";
-function Settings() {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes } = useDataGrid();
-  const modalSettings = useModalSettings();
-  return /* @__PURE__ */ jsx(
-    IconButton$1,
-    {
-      className: classes.actionSettings,
-      dictionaryTooltipId: "data_grid.tooltip_settings",
-      onClick: modalSettings,
-      "aria-label": "settings",
-      src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`
-    }
-  );
-}
-function RowsCount() {
-  const { rowsCount, classes } = useDataGrid();
-  const { getLabel } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx("div", { className: classes.rowsCount, children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: classes.rowsCountLabel, children: getLabel("data_grid.rows") }),
-    /* @__PURE__ */ jsx("div", { className: classes.rowsCountValue, children: rowsCount })
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: classes.rowsCountLabel, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40px", height: "16px" }) }),
-    /* @__PURE__ */ jsx("div", { className: classes.rowsCountValue, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "20px", height: "16px" }) })
-  ] }) });
-}
-function Density() {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { rowHeights, currentRowHeightVariant, setRowHeightVariant, classes } = useDataGrid();
-  const { getLabel } = useModuleDictionary();
-  const menuActions = useMemo(() => {
-    if (typeof rowHeights === "number") {
-      return [];
-    }
-    return [
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
-        onClick: () => setRowHeightVariant("compact"),
-        disabled: currentRowHeightVariant === "compact",
-        dictionaryField: "data_grid.density_compact"
-      },
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
-        onClick: () => setRowHeightVariant("standard"),
-        disabled: currentRowHeightVariant === "standard",
-        dictionaryField: "data_grid.density_standard"
-      },
-      {
-        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
-        onClick: () => setRowHeightVariant("confortable"),
-        disabled: currentRowHeightVariant === "confortable",
-        dictionaryField: "data_grid.density_confortable"
-      }
-    ];
-  }, [
-    rowHeights,
-    currentRowHeightVariant,
-    setRowHeightVariant,
-    host_static_assets,
-    environment_assets
-  ]);
-  const theme = useTheme();
-  const currenViewIcon = useMemo(() => {
-    if (currentRowHeightVariant === "compact") {
-      return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`;
-    }
-    if (currentRowHeightVariant === "standard") {
-      return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`;
-    }
-    return `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`;
-  }, [currentRowHeightVariant, host_static_assets, environment_assets]);
-  if (menuActions.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      arrowType: "right-top",
-      className: classes.actionDensityPopover,
-      menuActionSx: theme.components?.M4LDataGridDensityPopover?.styleOverrides,
-      anchorOrigin: { vertical: "top", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      menuActions,
-      urlIcon: currenViewIcon,
-      toolTip: getLabel("data_grid.tooltip_density")
-    }
-  );
-}
-const MobileMenuActions = () => {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { currentRowHeightVariant, setRowHeightVariant } = useDataGrid();
-  const { activeFilters, setActiveFilters } = useFilters();
-  const modalSettings = useModalSettings();
-  const toggleIcon = () => {
-    setActiveFilters(!activeFilters);
-  };
-  const menuActions = [
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/compact.svg`,
-      onClick: () => setRowHeightVariant("compact"),
-      disabled: currentRowHeightVariant === "compact",
-      dictionaryId: "data_grid.density_compact"
-    },
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/standard.svg`,
-      onClick: () => setRowHeightVariant("standard"),
-      disabled: currentRowHeightVariant === "standard",
-      dictionaryId: "data_grid.density_standard"
-    },
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/confortable.svg`,
-      onClick: () => setRowHeightVariant("confortable"),
-      disabled: currentRowHeightVariant === "confortable",
-      dictionaryId: "data_grid.density_confortable"
-    },
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`,
-      onClick: () => toggleIcon(),
-      dictionaryId: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show"
-    },
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/configuration.svg`,
-      onClick: () => modalSettings(),
-      dictionaryId: "data_grid.tooltip_settings"
-    }
-  ];
-  return /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/menu.svg`,
-      arrowType: "no-arrow",
-      marginTop: "12px",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      menuActions
-    }
-  );
-};
-function Actions(props) {
-  const isXs = useResponsiveContainerStore((state) => state.isXs, shallow);
-  const { rowHeights, classes } = useDataGrid();
-  const isSkeleton = useModuleSkeleton();
-  const { getLabel } = useModuleDictionary();
-  const {
-    withRowsCount = true,
-    withPager = true,
-    pagerOptions,
-    withSettings = true,
-    settingsProps,
-    withLocalFilters
-  } = props;
-  return /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
-    withRowsCount && !isXs && /* @__PURE__ */ jsx(RowsCount, {}),
-    withPager && pagerOptions && /* @__PURE__ */ jsx(
-      Pager,
-      {
-        ...pagerOptions,
-        totalRecords: pagerOptions.totalRecords,
-        isSkeleton,
-        isXs,
-        labelRows: getLabel(dictionary.LABEL_ROWS_PER_PAGE),
-        labelOf: getLabel(dictionary.LABEL_OF)
-      }
-    ),
-    isXs ? /* @__PURE__ */ jsx(MobileMenuActions, {}) : /* @__PURE__ */ jsxs("div", { className: classes.actionsConfigContainer, children: [
-      typeof rowHeights !== "number" && /* @__PURE__ */ jsx(Density, {}),
-      withLocalFilters && /* @__PURE__ */ jsx(Filter, {}),
-      withSettings && /* @__PURE__ */ jsx(Settings, { ...settingsProps })
-    ] })
-  ] });
-}
-const DATAGRID_TEST_ID = "m4ldatagrid";
-const PREFIX_TEST_ATTRIBUTE = "data-testid";
-const TEST_PROP_COLUMNS = `${PREFIX_TEST_ATTRIBUTE}-${DATAGRID_TEST_ID}-columns`;
-function DataGrid(props) {
-  const {
-    id,
-    withActions = true,
-    rows,
-    columns,
-    actionsProps,
-    selectedRows,
-    onSelectedRowsChange,
-    rowKeyGetter,
-    rowActionsGetter,
-    onRowsChange,
-    rowHeaderHeights,
-    rowHeights,
-    initialRowHeightVariant,
-    checkedRows,
-    onCheckedRowsChange,
-    dataTestId = ""
-  } = props;
-  const ownerState = {
-    actionsProps,
-    withActions
-  };
-  const classes = dataGridUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(
-    DataGridRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_COLUMNS]: JSON.stringify(columns),
-        [TEST_PROP_ID]: getNameDataTestId$1(DATAGRID_PREFIX_NAME, "root", dataTestId)
-      } : {},
-      children: /* @__PURE__ */ jsx(
-        DataGridProvider,
-        {
-          id: props.id,
-          columns: props.columns,
-          rowHeights,
-          rowHeaderHeights,
-          initialRowHeightVariant,
-          rowsCount: rows.length,
-          checkedRows,
-          rowActionsGetter,
-          onCheckedRowsChange,
-          rowKeyGetter,
-          rows,
-          classes,
-          children: /* @__PURE__ */ jsxs(FilterProvider, { initialActiveFilters: false, children: [
-            withActions && actionsProps && /* @__PURE__ */ jsx(
-              Actions,
-              {
-                ...actionsProps
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Table,
-              {
-                id,
-                withActions,
-                columns,
-                rows,
-                selectedRows,
-                onSelectedRowsChange,
-                rowKeyGetter,
-                onRowsChange
-              }
-            )
-          ] })
-        }
-      )
-    }
-  );
-}
-const Input = styled$1("input")(() => ({
-  appearance: "none",
-  boxSizing: "border-box",
-  inlineSize: "100%",
-  blockSize: "100%",
-  paddingBlock: "0",
-  verticalAlign: "top",
-  textAlign: "right",
-  color: "var(--rdg-color)",
-  backgroundColor: "var(--rdg-background-color)",
-  fontFamily: "inherit",
-  "&:focus": {
-    outline: "none"
-  },
-  "&::placeholder": {
-    color: "#999",
-    opacity: "1"
-  }
-}));
-function autoFocusAndSelect(input) {
-  input?.focus();
-  input?.select();
-}
-function TextEditor({
-  row,
-  column,
-  onRowChange,
-  onClose
-}) {
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      className: "rdg-text-editor",
-      ref: autoFocusAndSelect,
-      value: row[column.key],
-      onChange: (event) => onRowChange({ ...row, [column.key]: event.target.value }),
-      onBlur: () => onClose(true)
-    }
-  );
-}
-function NumberEditor({
-  row,
-  column,
-  onRowChange,
-  onClose
-}) {
-  const handleKeyDown = (event) => {
-    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-      onClose(true);
-    }
-    if (event.key === "Enter") {
-      onClose(true);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      className: "rdg-text-editor",
-      ref: autoFocusAndSelect,
-      type: "number",
-      value: row[column.key],
-      onKeyDown: handleKeyDown,
-      onChange: (event) => onRowChange({
-        ...row,
-        [column.key]: event.target.value !== "" ? Number(event.target.value) : ""
-      }),
-      onBlur: () => onClose(true)
-    }
-  );
-}
-generateUtilityClasses(
-  componentName$3,
-  [
-    "root"
-  ]
-);
-const useAppBarComercialUtilityClasses$1 = () => {
-  const slots = {
-    root: ["root"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(componentName$3), {});
-};
-const AppBarComercialRoot = styled$1("div")(({ theme }) => ({
-  ...theme.components?.M4LAppBarCommercial?.styleOverrides
-}));
-const AppBarComercial = (props) => {
-  const { children } = props;
-  const classes = useAppBarComercialUtilityClasses$1();
-  return /* @__PURE__ */ jsx(AppBarComercialRoot, { className: classes.root, children });
-};
-const TopBarClasses = generateUtilityClasses(componentName$4, [
-  "root",
-  "ContainerImageComercial",
-  "SimplebarComercial",
-  "ItemRoot",
-  "ItemSelect",
-  "ContainerAccordion",
-  "ContainerAccordionCase1",
-  "IconAndButton",
-  "IsActive"
-]);
-function getTopBarClassesUtilityClass() {
-  const slots = {
-    root: ["root"],
-    ContainerImageComercial: ["ContainerImageComercial"],
-    SimplebarComercial: ["SimplebarComercial"],
-    ItemRoot: ["ItemRoot"],
-    ItemSelect: ["ItemSelect"],
-    ContainerAccordion: ["ContainerAccordion"],
-    ContainerAccordionCase1: ["ContainerAccordionCase1"],
-    IconAndButton: ["IconAndButton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName$4), {});
-  return {
-    ...composedClasses
-  };
-}
-const initialstate = {
-  dataMenu: [],
-  classes: getTopBarClassesUtilityClass(),
-  dataTestId: ""
-};
-const TopBarContext = createContext(initialstate);
-const TopBarProvider = (props) => {
-  const { children, value } = props;
-  const { dataMenu: DataMenu, classes, dataTestId } = value;
-  return /* @__PURE__ */ jsx(
-    TopBarContext.Provider,
-    {
-      value: { dataMenu: DataMenu, classes, dataTestId },
-      children
-    }
-  );
-};
-const useTopBar = () => useContext(TopBarContext);
-const useTopBar$1 = useTopBar;
-const NavItemRoot = (props) => {
-  const theme = useTheme();
-  const { classes, dataTestId } = useTopBar$1();
-  const { itemRootData } = props;
-  const { title, children, module_id } = itemRootData;
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [openedPopoverId, setOpenedPopoverId] = useState(null);
-  const handleClick = (event, popoverId) => {
-    setAnchorEl(event.currentTarget);
-    setOpenedPopoverId(popoverId);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-    setOpenedPopoverId(null);
-  };
-  const renderMenuItems = (items) => {
-    return items.map((item, index) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: item.children ? item.children && item.children.length > 0 && /* @__PURE__ */ jsx(Accordion, { label: item.title, children: renderMenuItems(item.children) }) : /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(
-          classes.ItemSelect,
-          item.path === window.location.pathname ? TopBarClasses.IsActive : null
-        ),
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$4, "ItemSelect", dataTestId) } : {},
-        children: /* @__PURE__ */ jsx(Button, { variant: "text", href: item.path, fullWidth: true, children: item.title })
-      }
-    ) }, index));
-  };
-  const renderPopover = () => {
-    return /* @__PURE__ */ jsx(
-      Popover,
-      {
-        elevation: 3,
-        id: module_id,
-        open: openedPopoverId === itemRootData.module_id ? true : false,
-        anchorEl,
-        onClose: handleClose,
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "center"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "center"
-        },
-        arrowType: "top-center",
-        sx: { ...theme.components?.M4LPopoverTopBar?.styleOverrides },
-        children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 0.5, children: children && children.length > 0 && renderMenuItems(children) })
-      }
-    );
-  };
-  const render = () => {
-    if (itemRootData.children && itemRootData.path) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: classes.ContainerAccordionCase1,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId$1(
-              componentName$4,
-              "ContainerAccordionCase1",
-              dataTestId
-            )
-          } : {},
-          children: [
-            /* @__PURE__ */ jsx(Button, { size: "medium", variant: "text", href: itemRootData.path, children: title }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "text",
-                id: module_id,
-                onClick: (e) => handleClick(e, module_id),
-                endIcon: /* @__PURE__ */ jsx(ArrowIcon, { openState: openedPopoverId === module_id ? true : false })
-              }
-            ),
-            renderPopover()
-          ]
-        }
-      );
-    }
-    if (itemRootData.children) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: classes.ContainerAccordion,
-          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$4, "ContainerAccordion", dataTestId) } : {},
-          children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                "aria-describedby": module_id,
-                variant: "text",
-                size: "medium",
-                onClick: (e) => handleClick(e, itemRootData.module_id),
-                endIcon: /* @__PURE__ */ jsx(ArrowIcon, { openState: openedPopoverId === module_id ? true : false }),
-                children: title
-              }
-            ),
-            renderPopover()
-          ]
-        }
-      );
-    }
-    if (itemRootData.path)
-      return /* @__PURE__ */ jsx(Button, { variant: "text", size: "medium", href: itemRootData.path, "aria-describedby": module_id, children: /* @__PURE__ */ jsx("div", { children: title }) });
-  };
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      className: clsx(
-        classes.ItemRoot,
-        isActive(itemRootData) || openedPopoverId === itemRootData.module_id ? TopBarClasses.IsActive : null
-      ),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$4, "ItemRoot", dataTestId) } : {},
-      children: render()
-    }
-  );
-};
-const ConteinItem = () => {
-  const { dataMenu: DataMenu, classes, dataTestId } = useTopBar$1();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classes.SimplebarComercial,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$4, "SimplebarComercial", dataTestId) } : {},
-      children: DataMenu.map((group) => /* @__PURE__ */ jsx(NavItemRoot, { itemRootData: group }, group.module_id))
-    }
-  );
-};
-const TopBarRoot = styled$1("header")(({ theme }) => ({
-  ...theme.components?.M4LTopBar?.styleOverrides
-}));
-const TopBar = (props) => {
-  const { dataMenu: DataMenu, dataTestId } = props;
-  const classes = getTopBarClassesUtilityClass();
-  return /* @__PURE__ */ jsx(
-    TopBarRoot,
-    {
-      className: classes.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$4, "root", dataTestId) } : {},
-      children: /* @__PURE__ */ jsx(TopBarProvider, { value: { dataMenu: DataMenu, classes, dataTestId }, children: /* @__PURE__ */ jsx(ConteinItem, {}) })
-    }
-  );
-};
-generateUtilityClasses(
-  componentName$5,
-  [
-    "root",
-    "fullWidth",
-    "boxed",
-    "columnReverse"
-  ]
-);
-const useAppBarComercialUtilityClasses = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.contentWith === "fullWidth" && "fullWidth",
-      ownerState.contentWith === "boxed" && "boxed",
-      ownerState.columnReverse && "columnReverse"
-    ]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(componentName$5), {});
-};
-const SectionCommercialRoot = styled$1(Stack)(({ theme }) => ({
-  ...theme.components?.M4LSectionCommercial?.styleOverrides
-}));
-const SectionCommercial = (props) => {
-  const {
-    children,
-    contentWith = "boxed",
-    paddingX = "40px",
-    paddingY,
-    columnReverse = false,
-    ...others
-  } = props;
-  const ownerState = {
-    contentWith,
-    columnReverse
-  };
-  const classes = useAppBarComercialUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(
-    SectionCommercialRoot,
-    {
-      className: classes.root,
-      paddingY,
-      ...others,
-      ...contentWith === "boxed" ? { paddingX } : null,
-      children
-    }
-  );
-};
-export {
-  AreasAdmin as A,
-  BooleanFormatter as B,
-  ColumnSetCheckFormatter as C,
-  DateFormatter as D,
-  MenuActions as M,
-  NumberEditor as N,
-  PointsFormatter as P,
-  RHFAutocomplete as R,
-  SectionCommercial as S,
-  TextEditor as T,
-  UncertaintyFormatter as U,
-  DataGrid as a,
-  useAreasAdminUtilityClasses as b,
-  useFormFocus as c,
-  useDataGrid as d,
-  useFilters as e,
-  ColumnDateFormatter as f,
-  DataGridRoot as g,
-  ColumnsConfig as h,
-  AreasViewer as i,
-  getFormatDate as j,
-  getUncertaintyFormat as k,
-  getFormatPoints as l,
-  getFormatConcatenated as m,
-  ConcatenatedFormatter as n,
-  PriceFormatter as o,
-  getFormatPrice as p,
-  ColumnUncertaintyFormatter as q,
-  ColumnPointsFormatter as r,
-  ColumnNestedValueFormatter as s,
-  ColumnBooleanFormatter as t,
-  useAreasViewerUtilityClasses as u,
-  ColumnConcatenatedValueFormatter as v,
-  ColumnPriceFormatter as w,
-  ColumnInteractiveCheckFormatter as x,
-  AppBarComercial as y,
-  TopBar as z
-};