@m4l/components 1.0.0 → 1.0.2

package/{vendor.a1ce6777.js → vendor.3eadfa16.js}

@@ -1,26 +1,26 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React__default, { forwardRef, useMemo, useState, useEffect, createContext, useCallback, useRef, createElement, useContext, useLayoutEffect, useImperativeHandle } from "react";
-import { useModuleSkeleton, useEnvironment, useModuleDictionary, useNetwork, getPropertyByString, evaluateWithContext, voidFunction } from "@m4l/core";
-import { u as useRowSelection, S as SelectCellFormatter, H as HeaderRenderer, D as DataGrid$1 } from "./react-data-grid.c5377916.js";
-import { a as IconButton, I as Icon, b as ArrowStyle, C as CheckboxIcon, c as CheckboxCheckedIcon, d as CheckboxIndeterminateIcon, e as ArrowIcon } from "./components/Icon/index.d5fed418.js";
-import { styled, useTheme as useTheme$1 } from "@mui/material/styles";
-import { useFormContext, useFormState, Controller, useWatch, useController } from "react-hook-form";
-import { H as HelperText } from "./components/HelperText/index.be949cdf.js";
-import { useDrag, useDrop, DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import { generateUtilityClasses, generateUtilityClass, Skeleton, Typography as Typography$1, Accordion as Accordion$1, AccordionSummary, AccordionDetails, styled as styled$1, Avatar as Avatar$1, Link, Box, Breadcrumbs as Breadcrumbs$1, Checkbox, CircularProgress as CircularProgress$1, Badge as Badge$1, LinearProgress as LinearProgress$1, Popover as Popover$1, IconButton as IconButton$1, useTheme, MenuItem, Stack as Stack$1, Tabs as Tabs$1, Tab as Tab$1, Tooltip as Tooltip$1, Autocomplete, Popper, TextField, Chip, FormGroup, FormControlLabel, InputAdornment, RadioGroup, Radio, FormHelperText, Dialog, InputBase, Grid } from "@mui/material";
-import { aL as AREAS_VIEWER_CLASS_NAME, aM as AREAS_ADMIN_CLASS_NAME, aN as componentName$2, T as TEST_PROP_ID, aO as COMPONENT_PREFIX$1, aP as componentName$3, aQ as componentName$4, aR as COMPONENT_CLASS_NAME, aS as componentName$5, aT as componentName$6, aU as componentName$7, aV as componentName$8, aW as componentName$9, aX as componentName$a, aY as componentName$b, aZ as componentName$c, a_ as componentName$d, a$ as RHFTAUTOCOMPLET_ROOT_TEST_ID, b0 as componentName$e, b1 as componentName$f, b2 as componentName$g, b3 as RHFTEXTFIELD_ROOT_TEST_ID, b4 as RHFTEXTFIELD_INPUT_TEST_ID, b5 as COMPONENT_CLASS_NAME$1, b6 as DATAGRID_SELECT_COLUMN_KEY, b7 as DATAGRID_ACTIONS_COLUMN_KEY, b8 as componentName$h, b9 as DATAGRID_PREFIX_NAME, ba as componentName$i, bb as componentName$j, bc as componentName$k } from "./components/areas/constants.5387d83e.js";
-import { unstable_composeClasses } from "@mui/base";
-import clsx from "clsx";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React__default, { useState, useEffect, useMemo, forwardRef, useCallback, useRef, createElement, createContext, useContext, 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.87f4726c.js";
+import { styled } from "@mui/material/styles";
+import { a as Table } from "./components/mui_extended/Tab/index.ad88441e.js";
+import { a as Pager } from "./components/mui_extended/Pager/index.46aec921.js";
+import { u as useModal, a as useModalSettings } from "./hooks/useModal/index.9fe41bde.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.8e5ac765.js";
+import { I as Icon, a as ArrowIcon } from "./components/Icon/index.2e8ec5a1.js";
 import { a as ICONS, I as ICONS$1 } from "./components/areas/icons.504ec098.js";
-import { g as getComponentUtilityClass, a as useUtilityClasses$a, b as getNameDataTestId, e as getNameAvatarDataTestId, f as getNameBadgeDataTestId, h as getNameDataTestId$2, j as getNameDataTestId$3, k as getNameCommonActionsDataTestId, m as getNameDataTestId$4, n as getNameDataTestId$5, o as getNameRHFDateTimeDataTestId, q as getNameDataTestId$6, r as getNameDataTestId$7, t as useOnClickOutside, v as isActive } from "./utils/index.9ee4c99a.js";
-import { b as Pager } from "./components/Page/index.fdf04592.js";
-import { u as useModal, a as useModalSettings } from "./hooks/useModal/index.ef54bcf2.js";
+import clsx from "clsx";
+import { unstable_composeClasses } from "@mui/base";
+import { aj as AREAS_VIEWER_CLASS_NAME, ak as AREAS_ADMIN_CLASS_NAME, al as componentName$1, T as TEST_PROP_ID, am as componentName$2, an as RHFTAUTOCOMPLET_ROOT_TEST_ID, ao as COMPONENT_CLASS_NAME, ap as componentName$3, aq as DATAGRID_PREFIX_NAME, ar as componentName$4, as as componentName$5, at as componentName$6 } from "./components/areas/constants.630a4f42.js";
+import { B as Badge } from "./components/mui_extended/Badge/index.3465d7fb.js";
 import { useResponsiveDesktop, useFormatter, useResponsiveContainerStore } from "@m4l/graphics";
-import { b as getAreasDictionary, c as DICCTIONARY, L as LABEL_BOOLEAN_YES, f as LABEL_BOOLEAN_NO, h as LABEL_BOOLEAN_TRUE, i as LABEL_BOOLEAN_FALSE, j as dictionary } from "./components/areas/dictionary.7e74022a.js";
+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.19b25583.js";
 import { shallow } from "zustand/shallow";
 import { a as getNameDataTestId$1 } from "./test/getNameDataTestId.aee44365.js";
-import "./components/NavLink/index.4e548cee.js";
+import { g as getComponentUtilityClass, a as getNameDataTestId, b as getNameCommonActionsDataTestId, e as useOnClickOutside, f as isActive } from "./utils/index.0660ee9c.js";
+import "./components/NavLink/index.badec599.js";
 import "./components/ScrollToTop/index.e06f98f6.js";
 import "./components/animate/index.b8497385.js";
 import "./components/animate/MotionContainer/index.3032bd8f.js";
@@ -31,62 +31,80 @@ 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.e24bd74d.js";
+import { u as useAreasStore } from "./components/areas/hooks/useAreas/index.b02d5bdc.js";
 import * as Yup from "yup";
-import { R as RHFormProvider } from "./contexts/RHFormContext/index.dc955a09.js";
-import { F as FieldLabel } from "./components/FieldLabel/index.f9cdcc27.js";
-import MuiButton from "@mui/material/Button";
+import { R as RHFormProvider } from "./contexts/RHFormContext/index.e942a298.js";
+import { R as RHFTextField } from "./components/hook-form/RHFTextField/index.2ae1f130.js";
+import { B as Button, L as LoadingButton } from "./components/mui_extended/Button/index.a7dc6ef0.js";
 import { A as ACTIONINTRO_TEST_ID } from "./test/index.6d4b98b9.js";
-import { S as ScrollBar } from "./components/ScrollBar/index.adf0eade.js";
+import { T as Typography } from "./components/mui_extended/Typography/index.2a1c68f8.js";
+import { S as ScrollBar } from "./components/ScrollBar/index.9bfcc74f.js";
 import TouchRipple from "@mui/material/ButtonBase/TouchRipple";
-import { L as LinearProgressIndeterminate } from "./components/LinearProgressIndeterminate/index.de9d447c.js";
-import { M as MFLoader } from "./components/MFLoader/index.402c1acc.js";
+import { L as LinearProgressIndeterminate, a as LinearProgress } from "./components/mui_extended/LinearProgress/index.52edc848.js";
+import { M as MFLoader } from "./components/MFLoader/index.2038aa6c.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.bb316000.js";
-import { w as withSizeProvider } from "./components/GridLayout/subcomponents/SizeProvider/index.094bc6b5.js";
-import { R as Responsive } from "./components/GridLayout/subcomponents/Responsive/index.b8a2a121.js";
-import { Link as Link$1, useLocation } from "react-router-dom";
-import { L as LoadingError } from "./components/LoadingError/index.9f00c83c.js";
-import { c as cjs } from "./react-draggable.5331add7.js";
-import { R as ResizeableWindow } from "./components/Resizeable/index.1f0c1359.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.81b748ec.js";
+import { w as withSizeProvider } from "./components/GridLayout/subcomponents/SizeProvider/index.a5b2190d.js";
+import { R as Responsive } from "./components/GridLayout/subcomponents/Responsive/index.3c68f0cb.js";
+import { useLocation } from "react-router-dom";
+import { L as LoadingError } from "./components/LoadingError/index.d137be81.js";
+import { c as cjs } from "./react-draggable.2df3b71a.js";
+import { R as ResizeableWindow } from "./components/Resizeable/index.8c72e36a.js";
 import "./components/areas/hooks/useDynamicMFParameters/index.03ce6078.js";
 import { u as useWindowToolsMF } from "./components/areas/hooks/useWindowToolsMF/index.09801b66.js";
-import { I as Image } from "./components/Image/index.36a3d440.js";
-import debounce from "lodash/debounce";
-import { DateTimePicker } from "@mui/x-date-pickers";
-import "./components/Period/index.5233694b.js";
-import { SketchPicker } from "react-color";
-import { LoadingButton as LoadingButton$1 } from "@mui/lab";
-import { w as withToggle } from "./hocs/withToggle/index.548aeace.js";
+import { useFormContext, useFormState, Controller } from "react-hook-form";
+import { I as Image } from "./components/Image/index.0d32558e.js";
+import { H as HelperText } from "./components/HelperText/index.651a9b4b.js";
+import { F as FieldLabel } from "./components/FieldLabel/index.400a46e0.js";
+import { C as CircularProgress } from "./components/mui_extended/CircularProgress/index.967e70b7.js";
+import "./components/hook-form/RHFAutocompleteAsync/index.ea3ba7a7.js";
+import "./components/hook-form/RHFDateTime/index.31a0537d.js";
+import "./components/hook-form/RHFMultiCheckbox/index.437e6ba3.js";
+import "./components/hook-form/RHFSelect/index.c6c60ecc.js";
+import "./components/hook-form/RHFPeriod/index.c8868100.js";
+import "./components/hook-form/RHFRadioGroup/index.11c0add8.js";
+import "./components/hook-form/RHFColorPicker/index.25e4e643.js";
+import "./components/hook-form/RHFCheckbox/index.9ac452cc.js";
+import "./components/hook-form/RHFUpload/index.9eeaee0f.js";
+import { A as Accordion } from "./components/mui_extended/Accordion/index.391679d1.js";
+import "./components/mui_extended/Avatar/index.3ba36655.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.c5c8721c.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.38ca2330.js";
+import "./components/mui_extended/ToggleIconButton/index.7fbece74.js";
 import { W as WrapperComponent } from "./components/WrapperComponent/index.57964195.js";
-import "./components/DynamicFilter/index.d9168c12.js";
-import { W as WindowConfirm } from "./components/modal/WindowConfirm.e35da619.js";
-import "./components/DragResizeWindow/index.46b380e1.js";
-import "./components/GridLayout/index.bb3b7769.js";
-import "./components/PrintingSystem/index.fb176a93.js";
-import "./components/LanguagePopover/index.e6fa2336.js";
+import "./components/Period/index.3d695534.js";
+import "./components/DynamicFilter/index.05e15fb8.js";
+import { W as WindowConfirm } from "./components/modal/WindowConfirm.1a123368.js";
+import "./components/DragResizeWindow/index.5e316291.js";
+import "./components/GridLayout/index.7156fbc9.js";
+import "./components/PrintingSystem/index.89493ad6.js";
 import "./components/Loadable/index.e83cdb4e.js";
-import "./components/maps/index.8ec46ce4.js";
-import "./components/maps/components/GpsTools/index.75880ce0.js";
-import "./components/ModalDialog/index.ea9189c3.js";
-import "./components/modal/WindowBase.a3ac7adc.js";
-import "./components/NoItemSelected/index.418c8316.js";
-import "./components/ObjectLogs/index.bfa7dad3.js";
-import "./components/PaperForm/index.8121e3da.js";
-import "./components/PDFViewer/index.bb2eca5a.js";
-import "./components/PropertyValue/index.9572c347.js";
-import "./components/SplitLayout/index.74091a81.js";
-import "./components/ToastContainer/index.f9b507b9.js";
-import "./components/SideBar/index.629ba840.js";
-import "./components/AppBar/index.fc126a22.js";
-import "./components/AccountPopover/index.efc74d5c.js";
-import "./components/popups/PopupsProvider/index.18669fb4.js";
-import "./components/popups/PopupsViewer/index.ba354267.js";
-import "./components/HamburgerMenu/index.5997af31.js";
-import "./contexts/ModalContext/index.cf02e6bd.js";
-import "./hooks/useFormAddEdit/index.f156a2cd.js";
-import "./hooks/useTab/index.bce8b99e.js";
+import "./components/maps/index.ba1ccfad.js";
+import "./components/maps/components/GpsTools/index.ef751d28.js";
+import "./components/ModalDialog/index.85d30f10.js";
+import "./components/modal/WindowBase.c1e879e4.js";
+import "./components/NoItemSelected/index.008154ce.js";
+import "./components/ObjectLogs/index.65a6b1bc.js";
+import "./components/PaperForm/index.e04f9f1f.js";
+import "./components/PDFViewer/index.9677b02a.js";
+import "./components/Page/index.7482cf60.js";
+import "./components/PropertyValue/index.e31d4282.js";
+import "./components/SplitLayout/index.aed78a1f.js";
+import "./components/ToastContainer/index.586b1194.js";
+import "./components/SideBar/index.004a2de1.js";
+import "./components/AppBar/index.1499770b.js";
+import "./components/AccountPopover/index.ec031003.js";
+import "./components/popups/PopupsProvider/index.3b43e55f.js";
+import "./components/popups/PopupsViewer/index.fb3f0c48.js";
+import "./components/HamburgerMenu/index.d57bca4c.js";
+import "./contexts/ModalContext/index.82f61407.js";
+import "./hooks/useFormAddEdit/index.fa430551.js";
 const areasViewerClasses = generateUtilityClasses(
   AREAS_VIEWER_CLASS_NAME,
   [
@@ -243,2237 +261,491 @@ const useAreasAdminUtilityClasses = (ownerState) => {
   };
   return unstable_composeClasses(slots, getComponentUtilityClass(AREAS_ADMIN_CLASS_NAME), {});
 };
-generateUtilityClasses(componentName$2, [
+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",
-  "endIcon",
-  "labelIcon",
-  "label",
-  "content"
+  "itemDelete"
 ]);
-function getAccordionUtilityClass(slot) {
-  return generateUtilityClass(componentName$2, slot);
+function getMenuActionsUtilityClass(slot) {
+  return generateUtilityClass(componentName$1, slot);
 }
-const accordionUtilityClasses = () => {
+const useMenuActionsUtilityClasses = () => {
   const slots = {
     root: ["root"],
-    endIcon: ["endIcon"],
-    labelIcon: ["labelIcon"],
-    label: ["label"],
-    content: ["content"]
+    itemDelete: ["itemDelete"]
   };
-  const composedClasses = unstable_composeClasses(slots, getAccordionUtilityClass, {});
+  const composedClasses = unstable_composeClasses(slots, getMenuActionsUtilityClass, {});
   return {
     ...composedClasses
   };
 };
-styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  borderRadius: theme.spacing(0.5),
-  height: theme.spacing(4.5),
-  minHeight: theme.spacing(4.5),
-  backgroundColor: theme.vars.palette.background.header,
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  marginBottom: "0px"
-}));
-styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  gap: theme.spacing(2)
-}));
-const AccordionRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LAccordion?.styleOverrides
-}));
-const WarpperTypography = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LTypography?.styleOverrides
-}));
-const SkeletonTypography = (props) => {
-  const { skeletonWidth, skeletongHeight } = props;
-  return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletongHeight });
-};
-function Typography(props) {
+function MenuActions(props) {
   const {
-    skeletonWidth = "100%",
-    skeletongHeight = "18px",
-    variant = "body",
+    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 isSkeleton = useModuleSkeleton();
-  const classes2 = useUtilityClasses$a();
-  return /* @__PURE__ */ jsx(
-    WarpperTypography,
-    {
-      className: clsx(classes2.root, className),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId("root") } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(Typography$1, { ...other, variant }) : /* @__PURE__ */ jsx(SkeletonTypography, { skeletonWidth, skeletongHeight })
-    }
-  );
-}
-function Accordion(props) {
-  const {
-    label,
-    SKTWidht,
-    SKTHeight,
-    children,
-    accordionProps,
-    summaryProps,
-    labelIcon,
-    className,
-    dataTestId = ""
-  } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
-  const classes2 = accordionUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    AccordionRoot,
-    {
-      className: clsx(classes2.root, className),
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId$1(
-          COMPONENT_PREFIX$1,
-          "root",
-          dataTestId
-        )
-      } : {},
-      children: /* @__PURE__ */ jsxs(
-        Accordion$1,
-        {
-          variant: "outlined",
-          square: true,
-          TransitionProps: { unmountOnExit: true },
-          defaultExpanded: true,
-          ...accordionProps,
-          children: [
-            /* @__PURE__ */ jsx(
-              AccordionSummary,
-              {
-                "aria-controls": "expanded-content",
-                disableTouchRipple: false,
-                expandIcon: /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    "aria-label": "settings",
-                    src: `${host_static_assets}/${environment_assets}/frontend/components/accordion/assets/icons/expanded.svg`,
-                    className: classes2.endIcon
-                  }
-                ),
-                ...summaryProps,
-                children: /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: classes2.labelIcon,
-                    ...process.env.NODE_ENV !== "production" ? {
-                      [TEST_PROP_ID]: getNameDataTestId$1(
-                        COMPONENT_PREFIX$1,
-                        "labelIcon",
-                        dataTestId
-                      )
-                    } : {},
-                    children: [
-                      labelIcon && /* @__PURE__ */ jsx(Icon, { src: labelIcon }),
-                      /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          className: classes2.label,
-                          variant: "subtitle",
-                          skeletonWidth: SKTWidht,
-                          skeletongHeight: SKTHeight,
-                          children: label
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(AccordionDetails, { className: classes2.content, children })
-          ]
-        }
-      )
-    }
-  );
-}
-const SkeletonAvatar = (props) => {
-  const { className } = props;
-  return /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      variant: "circular",
-      width: "32px",
-      height: "32px",
-      className,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameAvatarDataTestId("skeleton") } : {}
+  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);
     }
-  );
-};
-generateUtilityClasses(componentName$3, [
-  "root",
-  "skeleton"
-]);
-function getAvatarUtilityClass(slot) {
-  return generateUtilityClass(componentName$3, slot);
-}
-const useAvatarUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    skeleton: ["skeleton"]
+    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 composedClasses = unstable_composeClasses(slots, getAvatarUtilityClass, {});
-  return {
-    ...composedClasses
+  const handleClick = (e, menuAction) => {
+    e.stopPropagation();
+    setOpen(null);
+    menuAction.onClick();
   };
-};
-const AvatarRoot = styled$1("div")(({ theme }) => ({
-  ...theme.components?.M4LAvatar?.styleOverrides
-}));
-const Avatar = forwardRef(
-  ({ color = "default", sx, className, ...other }, ref) => {
-    const isSkeleton = useModuleSkeleton();
-    const classes2 = useAvatarUtilityClasses();
-    return /* @__PURE__ */ jsx(
-      AvatarRoot,
-      {
-        className: clsx(classes2.root, className),
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameAvatarDataTestId("root") } : {},
-        children: !isSkeleton ? /* @__PURE__ */ jsx(Avatar$1, { ref, ...other }) : /* @__PURE__ */ jsx(SkeletonAvatar, { className: classes2.skeleton })
-      }
-    );
-  }
-);
-Avatar.displayName = "Avatar";
-function LinkItem({ link }) {
-  const { href, name, icon, dictionaryField: dictionaryDescription } = link;
-  const { getLabel } = useModuleDictionary();
-  return /* @__PURE__ */ jsxs(
-    Link,
+  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,
     {
-      variant: "body2",
-      component: Link$1,
-      to: href || "#",
-      sx: {
-        lineHeight: 2,
-        display: "flex",
-        alignItems: "center",
-        color: "text.primary",
-        "& > div": { display: "inherit" }
-      },
-      children: [
-        icon && /* @__PURE__ */ jsx(Box, { sx: { mr: 1, "& svg": { width: 20, height: 20 } }, children: icon }),
-        dictionaryDescription !== void 0 && getLabel ? getLabel(dictionaryDescription) : name
-      ]
-    },
-    name
-  );
-}
-function Breadcrumbs(props) {
-  const { links, activeLast = false, ...other } = props;
-  const { getLabel } = useModuleDictionary();
-  const currentLink = useMemo(() => {
-    if (links.length === 0)
-      return "";
-    const { dictionaryField } = links[links.length - 1];
-    return getLabel(dictionaryField);
-  }, [getLabel, links]);
-  const listDefault = useMemo(
-    () => links.map((link) => /* @__PURE__ */ jsx(LinkItem, { link }, link.name)),
-    [links]
-  );
-  const listActiveLast = useMemo(
-    () => links.map(
-      (link) => link.name !== currentLink ? /* @__PURE__ */ jsx(LinkItem, { link }, link.name) : /* @__PURE__ */ jsx(
-        Typography$1,
-        {
-          variant: "body2",
-          sx: {
-            maxWidth: 260,
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            color: "text.disabled",
-            textOverflow: "ellipsis"
-          },
-          children: currentLink
-        },
-        link.name
-      )
-    ),
-    [currentLink, links]
-  );
-  return /* @__PURE__ */ jsx(
-    Breadcrumbs$1,
+      src: urlFinalIcon,
+      onClick: handleOpen,
+      tooltip: toolTip,
+      className: iconButtonClassName
+    }
+  ) }) : /* @__PURE__ */ jsx(
+    IconButton$1,
     {
-      id: "MUIBreadcrumbs",
-      separator: /* @__PURE__ */ jsx(
-        Box,
-        {
-          component: "span",
-          sx: {
-            width: 4,
-            height: 4,
-            mx: 0.5,
-            borderRadius: "50%",
-            bgcolor: "text.disabled"
-          }
-        }
-      ),
-      ...other,
-      children: activeLast ? listDefault : listActiveLast
+      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 ButtonRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LButton?.styleOverrides
+const MemonizedMenuActions = React__default.memo(MenuActions);
+const AutocompleteRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LRHFAutocomplete?.styleOverrides
 }));
-styled(Skeleton)(({ theme }) => ({
-  borderRadius: theme.spacing(0.5)
+const WrapperOption = styled("li")(({ theme }) => ({
+  "& .m4l_image": {
+    marginRight: theme.spacing(1.5)
+  }
 }));
-const buttonClasses = generateUtilityClasses(componentName$4, [
-  "root",
-  "skeleton",
-  "sizeSmall",
-  "sizeMedium",
-  "variantOutlined",
-  "variantContained",
-  "variantText",
-  "isDisabled",
-  "colorError",
-  "colorSuccess",
-  "colorWarning",
-  "togglePressed",
-  "toggleNotPressed"
-]);
-function getButtonUtilityClass(slot) {
-  return generateUtilityClass(componentName$4, slot);
-}
-const useUtilityClasses$9 = (onwerState) => {
-  const slots = {
-    root: [
-      "root",
-      onwerState.size === "small" && "sizeSmall",
-      onwerState.size === "medium" && "sizeMedium",
-      onwerState.variant === "outlined" && "variantOutlined",
-      onwerState.variant === "contained" && "variantContained",
-      onwerState.variant === "text" && "variantText",
-      onwerState.isDisabled && "isDisabled",
-      onwerState.colorState === "error" && "colorError",
-      onwerState.colorState === "success" && "colorSuccess",
-      onwerState.colorState === "warning" && "colorWarning"
-    ],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getButtonUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const Button = (props) => {
-  const {
-    size = "small",
-    variant = "contained",
-    className,
-    disabled,
-    skeletonWidth = "100px",
-    skeletonHeight = "28px",
-    colorState,
-    ...others
-  } = props;
-  const isSkeleton = useModuleSkeleton();
-  const ownerState = {
-    size,
-    variant,
-    isDisabled: disabled,
-    colorState
+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 classes2 = useUtilityClasses$9(ownerState);
-  return /* @__PURE__ */ jsx(ButtonRoot, { className: clsx(classes2.root, className), "data-testid": "ButtonRoot", children: !isSkeleton ? /* @__PURE__ */ jsx(MuiButton, { ...others, variant, size, disableRipple: true, disabled }) : /* @__PURE__ */ jsx(
-    Skeleton,
-    {
-      className: classes2.skeleton,
-      "data-testid": "MuiSkeleton",
-      variant: "rectangular",
-      width: skeletonWidth
-    }
-  ) });
-};
-generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  "root",
-  "skeleton",
-  "small",
-  "medium",
-  "stateDisabled"
-]);
-function getRHFCheckboxUtilityClass$2(slot) {
-  return generateUtilityClass(COMPONENT_CLASS_NAME, slot);
 }
-const useUtilityClasses$8 = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.size === "small" && "small",
-      ownerState.size === "medium" && "medium",
-      ownerState.disabled && "stateDisabled"
-    ],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass$2, {});
-  return {
-    ...composedClasses
-  };
-};
-const SkeletonCheckBox = (props) => {
-  const { classes: classes2 } = props;
-  return /* @__PURE__ */ jsx("div", { className: classes2.skeleton, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "18px", height: "18px" }) });
-};
-const CheckBoxRoot = styled$1("div")(({ theme }) => ({
-  ...theme.components?.M4LCheckBox?.styleOverrides
-}));
-const CheckBox = forwardRef((props, ref) => {
-  const {
-    className,
-    size = "small",
-    disabled,
-    label,
-    mandatory,
-    mandatoryMessage,
-    helperMessage,
-    htmlFor
-  } = props;
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const ownerState = {
-    size: !isDesktop ? "medium" : size,
-    disabled
-  };
-  const classes2 = useUtilityClasses$8(ownerState);
-  return /* @__PURE__ */ jsxs(CheckBoxRoot, { className: clsx(classes2.root, className), ref, children: [
-    !isSkeleton ? /* @__PURE__ */ jsx(Checkbox, { id: htmlFor, ...props }) : /* @__PURE__ */ jsx(SkeletonCheckBox, { classes: classes2 }),
-    label && /* @__PURE__ */ jsx(
-      FieldLabel,
+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",
       {
-        label,
-        mandatory,
-        mandatoryMessage,
-        helperMessage,
-        htmlFor
+        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 CircularProgress = (props) => {
-  return /* @__PURE__ */ jsx(CircularProgress$1, { ...props });
-};
-const badgeClasses = generateUtilityClasses(componentName$5, [
-  "root"
-]);
-const BadgeRoot = styled("div")(({ theme }) => ({
-  display: "flex",
-  ...theme.components?.M4LBadge?.styleOverrides
-}));
-const Badge = (props) => {
-  const { children, dataTestId = "", ...others } = props;
-  return /* @__PURE__ */ jsx(
-    BadgeRoot,
-    {
-      className: badgeClasses.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameBadgeDataTestId("root", dataTestId) } : {},
-      children: /* @__PURE__ */ jsx(Badge$1, { ...others, children })
-    }
-  );
-};
-const LinearProgress = (props) => {
-  const { ...other } = props;
-  return /* @__PURE__ */ jsx(LinearProgress$1, { ...other });
-};
-const LinkWithRoute = (props) => {
-  const { to, children, skeletonWidth = "100%", skeletonHeight = "14px", ...other } = props;
-  const isSkeleton = useModuleSkeleton();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight });
-  }
-  return /* @__PURE__ */ jsx(Link, { component: Link$1, to, ...other, children });
 };
+const componentName = "M4LRHFAutocomplete";
 generateUtilityClasses(
-  componentName$6,
+  componentName,
   [
     "root",
+    "withImage",
     "skeleton",
+    "label",
+    "popper",
+    "skeletonRoot",
+    "skeletonContainerText",
+    "iconDown",
+    "variantInfo",
+    "variantImage",
+    "isDisabled",
+    "imageWidthDefined",
+    "variantSuccess",
+    "variantWarning",
+    "variantError",
     "sizeSmall",
     "sizeMedium",
-    "variantOutlined",
-    "variantContained",
-    "variantText",
-    "isDisabled"
+    "isFocus",
+    "isTabSelected",
+    "chip"
   ]
 );
-function getLoadingButtonUtilityClass(slot) {
-  return generateUtilityClass(componentName$6, slot);
+function getRHFAutocompleteClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
 }
-const useUtilityClasses$7 = (onwerState) => {
+const useUtilityClasses = (ownerState) => {
   const slots = {
     root: [
       "root",
-      onwerState.size === "small" && "sizeSmall",
-      onwerState.size === "medium" && "sizeMedium",
-      onwerState.variant === "outlined" && "variantOutlined",
-      onwerState.variant === "contained" && "variantContained",
-      onwerState.variant === "text" && "variantText",
-      onwerState.isDisabled && "isDisabled"
+      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"
     ],
-    skeleton: ["skeleton"]
+    skeletonRoot: ["skeletonRoot"],
+    skeletonContainerText: ["SkeletonContainerText"],
+    iconDown: ["iconDown"],
+    chip: [
+      "chip",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium"
+    ]
   };
-  const composedClasses = unstable_composeClasses(slots, getLoadingButtonUtilityClass, {});
+  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteClassesUtilityClass, {});
   return {
     ...composedClasses
   };
 };
-const LoadingButtonRoot = styled$1("div")(({ theme }) => ({
-  ...theme.components?.M4LLoadingButton?.styleOverrides
-}));
-const LoadingButton = (props) => {
-  const {
-    children,
-    skeletonWidth = "100%",
-    size = "small",
-    variant = "contained",
-    disabled,
-    className,
-    ...other
-  } = props;
-  const isSkeleton = useModuleSkeleton();
-  const ownerState = {
-    size,
-    variant,
-    isDisabled: disabled
+generateUtilityClasses(
+  componentName$2,
+  [
+    "root",
+    "skeleton",
+    "actionCancel",
+    "actionFormCancel",
+    "actionFormIntro",
+    "actionIntro",
+    "wrapperActions"
+  ]
+);
+const useCommonActionsUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    skeleton: ["skeleton"],
+    actionCancel: ["actionCancel"],
+    actionFormCancel: ["actionFormCancel"],
+    actionFormIntro: ["actionFormIntro"],
+    actionIntro: ["actionIntro"],
+    wrapperActions: ["wrapperActions"]
   };
-  const classes2 = useUtilityClasses$7(ownerState);
+  return unstable_composeClasses(slots, getComponentUtilityClass(componentName$2), {});
+};
+const WrapperStandarActions = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LCommonActions?.styleOverrides
+}));
+const Actions$1 = forwardRef(function ActionsForwarded(props, ref) {
+  const { children, ...restProps } = props;
+  const classes = useCommonActionsUtilityClasses();
   return /* @__PURE__ */ jsx(
-    LoadingButtonRoot,
+    WrapperStandarActions,
     {
-      className: clsx(classes2.root, className),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$2("root") } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(LoadingButton$1, { ...other, variant, size, children: /* @__PURE__ */ jsx(Typography, { variant: "action", children }) }) : /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          className: classes2.skeleton,
-          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$2("skeleton") } : {},
-          variant: "rectangular",
-          width: skeletonWidth
-        }
-      )
+      ...restProps,
+      ref,
+      className: clsx(classes.root, restProps?.className),
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameCommonActionsDataTestId("root") } : {},
+      children
     }
   );
+});
+const ActionCancel = (props) => {
+  const { getLabel } = useModuleDictionary();
+  const classes = useCommonActionsUtilityClasses();
+  return /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "inherit", ...props, className: classes.actionCancel, children: getLabel("common_actions.cancel") });
 };
-const PopoverRoot = styled(Popover$1)(({ theme }) => ({
-  ...theme.components?.M4LPopover?.styleOverrides
-}));
-generateUtilityClasses("M4LPopover", [
-  "root",
-  "arrowStyle",
-  "noArrow",
-  "topLeft",
-  "topCenter",
-  "topRight",
-  "bottomLeft",
-  "bottomCenter",
-  "bottomRight",
-  "leftTop",
-  "leftCenter",
-  "leftBottom",
-  "rightTop",
-  "rightCenter",
-  "rightBottom"
-]);
-function getPopoverClassesUtilityClass(slot) {
-  return generateUtilityClass("M4LPopover", slot);
-}
-const useUtilityClasses$6 = (ownerState) => {
-  const slots = {
-    root: ["root"],
-    arrowStyle: [
-      "arrowStyle",
-      ownerState.arrowType === "top-left" && "topLeft",
-      ownerState.arrowType === "top-center" && "topCenter",
-      ownerState.arrowType === "top-right" && "topRight",
-      ownerState.arrowType === "bottom-left" && "bottomLeft",
-      ownerState.arrowType === "bottom-center" && "bottomCenter",
-      ownerState.arrowType === "bottom-right" && "bottomRight",
-      ownerState.arrowType === "left-top" && "leftTop",
-      ownerState.arrowType === "left-center" && "leftCenter",
-      ownerState.arrowType === "left-bottom" && "leftBottom",
-      ownerState.arrowType === "right-top" && "rightTop",
-      ownerState.arrowType === "right-center" && "rightCenter",
-      ownerState.arrowType === "right-bottom" && "rightBottom"
-    ]
-  };
-  const composedClasses = unstable_composeClasses(slots, getPopoverClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const Popover = (props) => {
-  const { children, arrowType = "top-right", className, ...other } = props;
-  const ownerState = {
-    arrowType
-  };
-  const classes2 = useUtilityClasses$6(ownerState);
-  return /* @__PURE__ */ jsxs(
-    PopoverRoot,
+const ActionIntro = (props) => {
+  const { getLabel } = useModuleDictionary();
+  const classes = useCommonActionsUtilityClasses();
+  return /* @__PURE__ */ jsx(
+    Button,
     {
-      className: clsx(classes2.root, className),
-      "data-testid": "PopoverRoot",
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      transitionDuration: 0,
-      PaperProps: {
-        sx: {
-          p: 1,
-          overflow: "inherit"
-        }
-      },
-      ...other,
-      children: [
-        /* @__PURE__ */ jsx(
-          ArrowStyle,
-          {
-            className: classes2.arrowStyle,
-            "data-testid": "ArrowStyle",
-            arrowType
-          }
-        ),
-        children
-      ]
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: ACTIONINTRO_TEST_ID } : {},
+      variant: "contained",
+      type: "submit",
+      color: "primary",
+      className: classes.actionIntro,
+      ...props,
+      children: getLabel("common_actions.intro")
     }
   );
 };
-styled(IconButton$1)(() => ({}));
-const LabelMemuItem = styled("div")(({ theme }) => ({
-  height: "22px",
-  overflow: "hidden",
-  wordBreak: "break-all",
-  marginLeft: theme.spacing(1.5),
-  display: "flex",
-  alignItems: "center"
-}));
-generateUtilityClasses(componentName$7, [
-  "root",
-  "itemDelete"
-]);
-function getMenuActionsUtilityClass(slot) {
-  return generateUtilityClass(componentName$7, 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();
+function ActionFormCancel() {
   const { getLabel } = useModuleDictionary();
-  const [open, setOpen] = useState(null);
-  const handleOpen = (event) => {
-    setOpen(event.currentTarget);
-  };
-  const theme = useTheme();
-  const classes2 = 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,
-    {
-      src: urlFinalIcon,
-      onClick: handleOpen,
-      tooltip: toolTip,
-      className: iconButtonClassName
-    }
-  ) }) : /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      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(classes2.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" && classes2.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);
-generateUtilityClasses(componentName$8, [
-  "root"
-]);
-function getStackUtilityClass(slot) {
-  return generateUtilityClass(componentName$8, slot);
-}
-const useStackUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getStackUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const MUISTack = styled$1(Stack$1)(({ theme }) => ({
-  ...theme.components?.M4LStack?.styleOverrides
-}));
-const classes = useStackUtilityClasses();
-const Stack = (props) => {
-  const { children, className, ...others } = props;
-  return /* @__PURE__ */ jsx(MUISTack, { ...others, className: clsx(classes.root, className), children });
-};
-generateUtilityClasses(componentName$9, [
-  "root"
-]);
-function getTabsUtilityClass(slot) {
-  return generateUtilityClass(componentName$9, slot);
-}
-const useTabsUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getTabsUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const MUITabs = styled$1(Tabs$1)(({ theme }) => ({
-  ...theme.components?.M4LTabs?.styleOverrides
-}));
-const Tabs = (props) => {
-  const { children, className, ...others } = props;
-  const classes2 = useTabsUtilityClasses();
-  return /* @__PURE__ */ jsx(MUITabs, { className: clsx(classes2.root, className), ...others, children });
-};
-generateUtilityClasses(componentName$a, [
-  "root"
-]);
-function getTabContentUtilityClass(slot) {
-  return generateUtilityClass(componentName$a, slot);
-}
-const useTabContentUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getTabContentUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const TabContentRoot = styled$1("div")(({ theme }) => ({
-  ...theme.components?.M4LTabContent?.styleOverrides
-}));
-const TabContent = (props) => {
-  const { children, className, ...others } = props;
-  const classes2 = useTabContentUtilityClasses();
-  return /* @__PURE__ */ jsx(TabContentRoot, { className: clsx(classes2.root, className), ...others, children });
-};
-const TabRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LTab?.styleOverrides
-}));
-const SKTTabWrapper = styled("div")(({ theme }) => ({
-  padding: theme.spacing(1.5, 2)
-}));
-generateUtilityClasses(componentName$b, [
-  "root",
-  "skeleton"
-]);
-function getTabUtilityClass(slot) {
-  return generateUtilityClass(componentName$b, slot);
-}
-const tabUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getTabUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const COMPONENT_PREFIX = "m4l-tab";
-function Tab(props) {
-  const { SKTWidth, SKTHeight, className, dataTestId = "", ...other } = props;
-  const isSkeleton = useModuleSkeleton();
-  const classes2 = tabUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    TabRoot,
-    {
-      className: clsx(classes2.root, className),
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId$1(COMPONENT_PREFIX, "root", dataTestId)
-      } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(Tab$1, { ...other }) : /* @__PURE__ */ jsx(
-        SKTTabWrapper,
-        {
-          className: classes2.skeleton,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId$1(
-              COMPONENT_PREFIX,
-              "skeleton",
-              dataTestId
-            )
-          } : {},
-          children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: SKTWidth, height: SKTHeight })
-        }
-      )
-    }
-  );
-}
-const TabContext = createContext(null);
-function TabProvider(props) {
-  const { children, initialValue } = props;
-  const [currentTab, setCurrentTab] = useState(initialValue);
-  const handleChange = (_event, newTab) => {
-    setCurrentTab(newTab);
-  };
-  return /* @__PURE__ */ jsx(
-    TabContext.Provider,
-    {
-      value: {
-        currentTab: currentTab.toString(),
-        handleChange
-      },
-      children
-    }
-  );
-}
-generateUtilityClasses(componentName$c, [
-  "root"
-]);
-function getTooltipUtilityClass(slot) {
-  return generateUtilityClass(componentName$c, slot);
-}
-const tooltipUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getTooltipUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const Tooltip = (props) => {
-  const { children, className, ...others } = props;
-  const classes2 = tooltipUtilityClasses();
-  const theme = useTheme();
-  const stylesoverrides = theme.components?.M4LTooltip?.styleOverrides;
-  return /* @__PURE__ */ jsx(
-    Tooltip$1,
-    {
-      PopperProps: {
-        sx: { ...stylesoverrides },
-        className: clsx(classes2.root, className)
-      },
-      ...others,
-      children
-    }
-  );
-};
-const ToggleAbleButton = ({ onToggle, isToggled, ...props }) => {
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      onClick: onToggle,
-      ...props,
-      className: clsx(isToggled ? buttonClasses.togglePressed : buttonClasses.toggleNotPressed)
-    }
-  );
-};
-const ToggleButton = withToggle(ToggleAbleButton);
-const AutocompleteRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFAutocomplete?.styleOverrides
-}));
-const WrapperOption = styled("li")(({ theme }) => ({
-  "& .m4l_image": {
-    marginRight: theme.spacing(1.5)
-  }
-}));
-function withRenderOption(getUrlImage, classes2, imageWidth) {
-  return function RenderOption(optionProps, option) {
-    return /* @__PURE__ */ jsxs(
-      WrapperOption,
-      {
-        ...optionProps,
-        className: classes2.withImage,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$3("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: classes2, hasLabel } = props;
-  return /* @__PURE__ */ jsxs("div", { className: classes2.skeletonRoot, children: [
-    (hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "16px" }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: classes2.skeleton,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$3("skeleton") } : {},
-        children: !withImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: classes2.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: classes2.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$1 = "M4LRHFAutocomplete";
-generateUtilityClasses(
-  componentName$1,
-  [
-    "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$1, slot);
-}
-const useUtilityClasses$5 = (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
-  };
-};
-generateUtilityClasses(
-  componentName$d,
-  [
-    "root",
-    "skeleton",
-    "actionCancel",
-    "actionFormCancel",
-    "actionFormIntro",
-    "actionIntro",
-    "wrapperActions"
-  ]
-);
-const useCommonActionsUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    skeleton: ["skeleton"],
-    actionCancel: ["actionCancel"],
-    actionFormCancel: ["actionFormCancel"],
-    actionFormIntro: ["actionFormIntro"],
-    actionIntro: ["actionIntro"],
-    wrapperActions: ["wrapperActions"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(componentName$d), {});
-};
-const WrapperStandarActions = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LCommonActions?.styleOverrides
-}));
-const Actions$1 = forwardRef(function ActionsForwarded(props, ref) {
-  const { children, ...restProps } = props;
-  const classes2 = useCommonActionsUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    WrapperStandarActions,
-    {
-      ...restProps,
-      ref,
-      className: clsx(classes2.root, restProps?.className),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameCommonActionsDataTestId("root") } : {},
-      children
-    }
-  );
-});
-const ActionCancel = (props) => {
-  const { getLabel } = useModuleDictionary();
-  const classes2 = useCommonActionsUtilityClasses();
-  return /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "inherit", ...props, className: classes2.actionCancel, children: getLabel("common_actions.cancel") });
-};
-const ActionIntro = (props) => {
-  const { getLabel } = useModuleDictionary();
-  const classes2 = useCommonActionsUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: ACTIONINTRO_TEST_ID } : {},
-      variant: "contained",
-      type: "submit",
-      color: "primary",
-      className: classes2.actionIntro,
-      ...props,
-      children: getLabel("common_actions.intro")
-    }
-  );
-};
-function ActionFormCancel() {
-  const { getLabel } = useModuleDictionary();
-  const { openModal } = useModal();
-  const { close: closeWindow, setFnQueryClose: setQueryClose } = useWindowToolsMF();
-  const { control } = useFormContext();
-  const { isDirty } = useFormState({
-    control
-  });
-  const onConfirmQuit = useCallback(() => {
-    closeWindow();
-  }, []);
-  const onClickCancel = useCallback(() => {
-    if (isDirty) {
-      openModal({
-        window: /* @__PURE__ */ jsx(
-          WindowConfirm,
-          {
-            variant: "warning",
-            title: getLabel("common_actions.confirm_quit_title"),
-            msg: getLabel("common_actions.confirm_quit_msg"),
-            onClickIntro: onConfirmQuit
-          }
-        ),
-        variant: "warning"
-      });
-    } else {
-      onConfirmQuit();
-    }
-  }, [getLabel, isDirty, openModal]);
-  useEffect(() => {
-    setQueryClose(onClickCancel);
-  }, [onClickCancel]);
-  const classes2 = useCommonActionsUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant: "outlined",
-      color: "inherit",
-      onClick: onClickCancel,
-      className: classes2.actionFormCancel,
-      children: getLabel("common_actions.cancel")
-    }
-  );
-}
-function ActionFormIntro(props) {
-  const { getLabel } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const { control } = useFormContext();
-  const { isSubmitting } = useFormState({
-    control
-  });
-  const classes2 = useCommonActionsUtilityClasses();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 57, height: 30 });
-  }
-  return /* @__PURE__ */ jsx(
-    LoadingButton,
-    {
-      variant: "contained",
-      type: "submit",
-      color: "primary",
-      loading: isSubmitting,
-      className: classes2.actionFormIntro,
-      ...props,
-      children: getLabel("common_actions.intro")
-    }
-  );
-}
-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 classes2 = useUtilityClasses$5(ownerState);
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(
-    AutocompleteRoot,
-    {
-      className: classes2.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: classes2.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: classes2.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, classes2, 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,
-                            {
-                              className: classes2.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: classes2.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: classes2, hasLabel: label })
-    }
-  );
-}
-const colorPickerClasses = generateUtilityClasses(componentName$e, [
-  "root",
-  "popoverRoot",
-  "containerFieldColor",
-  "fieldColor",
-  "containerPicker",
-  "skeleton",
-  "sizeSmall",
-  "sizeMedium",
-  "isFocus",
-  "isTabSelected"
-]);
-function getRHFColorPickerUtilityClass(slot) {
-  return generateUtilityClass(componentName$e, slot);
-}
-const useUtilityClasses$4 = (owmerState) => {
-  const slots = {
-    root: [
-      "root",
-      owmerState.isFocus && "isFocus",
-      owmerState.isTabSelected && "isTabSelected",
-      owmerState.size === "small" && "sizeSmall",
-      owmerState.size === "medium" && "sizeMedium"
-    ],
-    popoverRoot: ["popoverRoot"],
-    containerFieldColor: ["containerFieldColor"],
-    fieldColor: ["boxColor"],
-    containerPicker: ["containerPicker"],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFColorPickerUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFColorPickerRoot = styled$1("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFColorPicker?.styleOverrides
-}));
-const RHFColorPickerSkeleton = (props) => {
-  const { label } = props;
-  return /* @__PURE__ */ jsxs("div", { className: colorPickerClasses.skeleton, children: [
-    label && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "14px" }),
-    /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        className: colorPickerClasses.skeleton,
-        variant: "rectangular",
-        width: 20,
-        height: 20
-      }
-    )
-  ] });
-};
-const RHFColorPicker = (props) => {
-  const { name, size = "small", label, mandatory, mandatoryMessage, helperMessage } = props;
-  const { control, setValue, trigger } = useFormContext();
-  const isSkeleton = useModuleSkeleton();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const theme = useTheme$1();
-  const currentColor = useWatch({
-    name,
-    control
-  });
-  const isDesktop = useResponsiveDesktop();
-  const [tempColor, setTempColor] = useState(() => currentColor || "#ffffff");
-  const [anchorEl, setAnchorEl] = useState(null);
-  const { getLabel } = useModuleDictionary();
-  const handleColorChange = (color) => {
-    setTempColor(color.hex);
-  };
-  const handleApprove = () => {
-    setAnchorEl(null);
-    if (tempColor !== currentColor) {
-      setValue(name, tempColor);
-      trigger(name);
-    }
-  };
-  const ownerState = {
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    size: isDesktop ? size : "medium"
-  };
-  const classes2 = useUtilityClasses$4(ownerState);
-  return /* @__PURE__ */ jsx(
-    RHFColorPickerRoot,
-    {
-      className: classes2.root,
-      tabIndex: 0,
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      children: !isSkeleton ? /* @__PURE__ */ jsx(
-        Controller,
-        {
-          name,
-          control,
-          defaultValue: "",
-          render: ({ field: { value }, fieldState: { error } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-            label && /* @__PURE__ */ jsx(
-              FieldLabel,
-              {
-                label,
-                mandatory,
-                mandatoryMessage,
-                helperMessage
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                role: "button",
-                tabIndex: 0,
-                className: classes2.containerFieldColor,
-                onClick: (event) => setAnchorEl(event.currentTarget),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: classes2.fieldColor,
-                      style: {
-                        backgroundColor: value
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      src: `${host_static_assets}/${environment_assets}/frontend/components/rhfcolorpicker/assets/icons/chevron_right.svg`
-                    }
-                  )
-                ]
-              }
-            ),
-            error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" }),
-            /* @__PURE__ */ jsx(
-              Popover,
-              {
-                open: Boolean(anchorEl),
-                arrowType: "top-center",
-                className: classes2.popoverRoot,
-                anchorEl,
-                onClose: () => setAnchorEl(null),
-                anchorOrigin: {
-                  vertical: "bottom",
-                  horizontal: "center"
-                },
-                transformOrigin: {
-                  vertical: "top",
-                  horizontal: "center"
-                },
-                sx: {
-                  mt: "12px",
-                  ml: -1.25,
-                  ...theme.components?.M4LRHFColorPickerPopoverRoot?.styleOverrides
-                },
-                children: /* @__PURE__ */ jsxs("div", { className: classes2.containerPicker, children: [
-                  /* @__PURE__ */ jsx(SketchPicker, { color: tempColor, onChange: handleColorChange, disableAlpha: true }),
-                  /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleApprove, children: getLabel("rhfcolorpicker.accept") })
-                ] })
-              }
-            )
-          ] })
-        }
-      ) : /* @__PURE__ */ jsx(RHFColorPickerSkeleton, { label })
-    }
-  );
-};
-styled("div")(() => ({
-  display: "flex",
-  width: "100%",
-  flexDirection: "column"
-}));
-styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "flex-end",
-  paddingRight: `${theme.spacing(2)}`,
-  [theme.breakpoints.down("md")]: {
-    justifyContent: "flex-start"
-  }
-}));
-styled("div")(({ theme }) => ({
-  width: "100%",
-  display: "grid",
-  gridTemplateColumns: "1fr auto",
-  gridGap: theme.spacing(2),
-  alignItems: "center",
-  height: `${theme.spacing(4.5)}`,
-  border: `1px solid ${theme.vars.palette.divider}`,
-  borderRadius: `${theme.spacing(1)}`,
-  padding: `0 ${theme.spacing(2)}`,
-  [theme.breakpoints.down("md")]: {
-    width: "100%"
-  }
-}));
-const RHFAutocompleteAsyncRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFAutocompleteAsync?.styleOverrides
-}));
-const componentName = "M4LRHFAutocompleteAsync";
-generateUtilityClasses(
-  componentName,
-  [
-    "root"
-  ]
-);
-function getRHFAutocompleteAsyncClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses$3 = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteAsyncClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function RHFAutocompleteAsync(props) {
-  const {
-    name,
-    endPoint,
-    timeout = 5e3,
-    parms,
-    resultField = "data",
-    size,
-    isRemote = true,
-    onChangeFilterParms,
-    ...other
-  } = props;
-  const { networkOperation } = useNetwork();
-  const [options, setOptions] = useState([]);
-  const [open, setOpen] = useState(false);
-  const [loading, setIsloading] = useState(false);
-  const [canLoadOptions, setCanLoadOptions] = useState(true);
-  const [filterParms, setFilterParms] = useState({});
-  const debouncedFilter = useCallback(
-    debounce(
-      (newFilterParms) => {
-        setCanLoadOptions(true);
-        setFilterParms(newFilterParms);
-      },
-      300
-    ),
-    []
-  );
-  const onChangeFilterParmsLocal = (newValue) => {
-    if (onChangeFilterParms) {
-      debouncedFilter(onChangeFilterParms(newValue));
-    }
-  };
-  useEffect(() => {
-    setCanLoadOptions(true);
-  }, [parms, endPoint]);
-  useEffect(() => {
-    if (!open || loading) {
-      return;
-    }
-    if (!canLoadOptions) {
-      return;
-    }
-    setIsloading(true);
-    setOptions([]);
-    setCanLoadOptions(false);
-    networkOperation({
-      method: "GET",
-      endPoint,
-      timeout,
-      parms: { ...parms, ...filterParms },
-      isRemote
-    }).then((response) => {
-      const valueMaybeArray = getPropertyByString(response, resultField);
-      const newOptions = Array.isArray(valueMaybeArray) ? valueMaybeArray : [];
-      setOptions(newOptions);
-    }).catch(() => {
-      setCanLoadOptions(true);
-    }).finally(() => {
-      setIsloading(false);
-    });
-    return () => {
-    };
-  }, [open, parms, filterParms, endPoint]);
-  const classes2 = useUtilityClasses$3();
-  return /* @__PURE__ */ jsx(
-    RHFAutocompleteAsyncRoot,
-    {
-      className: classes2.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$4("root") } : {},
-      children: /* @__PURE__ */ jsx(
-        RHFAutocomplete,
-        {
-          name,
-          loading,
-          options,
-          onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
-          size,
-          onOpen: () => {
-            setOpen(true);
-          },
-          onClose: () => {
-            setOpen(false);
-          },
-          ...other
-        }
-      )
-    }
-  );
-}
-const RHFCheckboxRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFCheckbox?.styleOverrides
-}));
-styled("div")(() => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: "8px"
-}));
-styled(Skeleton)(() => ({
-  width: "20px",
-  height: "20px",
-  borderRadius: "4px"
-}));
-const ContainerCheckTypography = styled("div")(() => ({
-  display: "flex",
-  alignItems: "center"
-}));
-generateUtilityClasses("M4LRHFCheckbox", [
-  "root",
-  "checkTypography",
-  "skeleton",
-  "small",
-  "medium",
-  "stateDisabled",
-  "stateError",
-  "isFocus",
-  "isTabSelected"
-]);
-function getRHFCheckboxUtilityClass$1(slot) {
-  return generateUtilityClass("M4LRHFCheckbox", slot);
-}
-const useUtilityClasses$2 = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.isFocus && "isFocus",
-      ownerState.isTabSelected && "isTabSelected",
-      ownerState.sizeCheck === "small" && "small",
-      ownerState.sizeCheck === "medium" && "medium",
-      ownerState.disabled && "stateDisabled",
-      ownerState.error && "stateError"
-    ],
-    skeleton: ["skeleton"],
-    checkTypography: [
-      "checkTypography",
-      ownerState.sizeCheck === "small" ? "small" : "medium",
-      ownerState.disabled && "stateDisabled"
-    ]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass$1, {});
-  return {
-    ...composedClasses
-  };
-};
-function RHFCheckbox(props) {
-  const {
-    name,
-    sizeCheck = "small",
-    label,
-    disabled = false,
-    mandatory,
-    mandatoryMessage,
-    helperMessage
-  } = props;
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext();
-  const isSkeleton = useModuleSkeleton();
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const isDesktop = useResponsiveDesktop();
-  const ownerState = {
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    sizeCheck: !isDesktop ? "medium" : sizeCheck,
-    disabled,
-    error: errors[name] ? true : false
-  };
-  const classes2 = useUtilityClasses$2(ownerState);
-  return /* @__PURE__ */ jsx(
-    RHFCheckboxRoot,
-    {
-      className: classes2.root,
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$5("root", name) } : {},
-      children: /* @__PURE__ */ jsx(
-        Controller,
-        {
-          name,
-          control,
-          render: ({ field: { onChange, value }, fieldState: { error } }) => {
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                ContainerCheckTypography,
-                {
-                  className: classes2.checkTypography,
-                  ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$5("checkTypography", name) } : {},
-                  children: /* @__PURE__ */ jsx(
-                    CheckBox,
-                    {
-                      size: sizeCheck,
-                      onChange,
-                      checked: value,
-                      disabled: disabled ? true : false,
-                      disableRipple: true,
-                      label,
-                      mandatory,
-                      mandatoryMessage,
-                      helperMessage,
-                      htmlFor: name
-                    }
-                  )
-                }
-              ),
-              error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" })
-            ] });
-          }
-        }
-      )
-    }
-  );
-}
-const SkeletonRHFDateTime = (props) => {
-  const { skeletonWidth, skeletonHeight, className, label } = props;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    label && /* @__PURE__ */ jsx(Skeleton, { variant: "text", height: "14px", width: "30%" }),
-    /* @__PURE__ */ jsxs("div", { className: className.skeleton, children: [
-      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }),
-      /* @__PURE__ */ jsx(Skeleton, { variant: "circular" })
-    ] })
-  ] });
-};
-generateUtilityClasses(componentName$f, [
-  "root",
-  "skeleton",
-  "small",
-  "medium",
-  "isFocus",
-  "isTabSelected",
-  "isDisabled",
-  "variantInfo",
-  "variantSuccess",
-  "variantWarning",
-  "variantError"
-]);
-function getRHFCheckboxUtilityClass(slot) {
-  return generateUtilityClass(componentName$f, slot);
-}
-const useUtilityClasses$1 = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.size === "small" && "small",
-      ownerState.size === "medium" && "medium",
-      ownerState.isFocus && "isFocus",
-      ownerState.isTabSelected && "isTabSelected",
-      ownerState.disabled && "isDisabled",
-      ownerState.variant === "info" && "variantInfo",
-      ownerState.variant === "success" && "variantSuccess",
-      ownerState.variant === "warning" && "variantWarning",
-      ownerState.variant === "error" && "variantError"
-    ],
-    skeleton: ["skeleton"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFDateTimeRoot = styled$1("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFDateTime?.styleOverrides
-}));
-function RHFDateTime(props) {
-  const {
-    name: nameRHF,
-    disabled,
-    size = "small",
-    variant,
-    skeletonWidth = "50%",
-    skeletonHeight = 14,
-    className,
-    label,
-    helperMessage,
-    mandatory,
-    mandatoryMessage
-  } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const resourceIcon = () => {
-    return /* @__PURE__ */ jsx(
-      Icon,
-      {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/rhfdate/ended_at.svg`
-      }
-    );
-  };
-  const [currentVariant, setCurrentVariant] = useState(void 0);
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext();
-  useEffect(() => {
-    if (errors[nameRHF]) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(void 0);
-    }
-  }, [errors[nameRHF], variant, control]);
-  const isSkeleton = useModuleSkeleton();
-  const {
-    dateFormatter: { datetimeFormat }
-  } = useFormatter();
-  const isDesktop = useResponsiveDesktop();
-  const ownerState = {
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    disabled,
-    size: isDesktop ? size : "medium",
-    variant: currentVariant
-  };
-  const classes2 = useUtilityClasses$1(ownerState);
-  return /* @__PURE__ */ jsx(
-    RHFDateTimeRoot,
-    {
-      className: clsx(classes2.root, className),
-      tabIndex: 0,
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameRHFDateTimeDataTestId("root") } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(
-        Controller,
-        {
-          name: nameRHF,
-          control,
-          render: ({ field: { value, onChange, ref }, fieldState: { error } }) => {
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              label && /* @__PURE__ */ jsx(
-                FieldLabel,
-                {
-                  label,
-                  mandatory,
-                  mandatoryMessage,
-                  helperMessage
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                DateTimePicker,
-                {
-                  sx: {
-                    "& .MuiTouchRipple-root": {
-                      display: "none"
-                    }
-                  },
-                  inputRef: ref,
-                  ampm: true,
-                  value,
-                  onChange: (newValue) => {
-                    onChange(newValue);
-                  },
-                  slots: {
-                    openPickerIcon: resourceIcon
-                  },
-                  slotProps: {
-                    textField: {
-                      onFocus: handlerFocus,
-                      onBlur: handlerOnBlur
-                    },
-                    field: { format: datetimeFormat }
-                  }
-                }
-              ),
-              error?.message && /* @__PURE__ */ jsx(HelperText, { variant: "error", message: error?.message + "" })
-            ] });
+  const { openModal } = useModal();
+  const { close: closeWindow, setFnQueryClose: setQueryClose } = useWindowToolsMF();
+  const { control } = useFormContext();
+  const { isDirty } = useFormState({
+    control
+  });
+  const onConfirmQuit = useCallback(() => {
+    closeWindow();
+  }, []);
+  const onClickCancel = useCallback(() => {
+    if (isDirty) {
+      openModal({
+        window: /* @__PURE__ */ jsx(
+          WindowConfirm,
+          {
+            variant: "warning",
+            title: getLabel("common_actions.confirm_quit_title"),
+            msg: getLabel("common_actions.confirm_quit_msg"),
+            onClickIntro: onConfirmQuit
           }
-        }
-      ) : /* @__PURE__ */ jsx(
-        SkeletonRHFDateTime,
-        {
-          skeletonWidth,
-          skeletonHeight,
-          className: classes2,
-          label
-        }
-      )
+        ),
+        variant: "warning"
+      });
+    } else {
+      onConfirmQuit();
     }
-  );
-}
-function RHFMultiCheckbox({ name, options, ...other }) {
-  const { control } = useFormContext();
+  }, [getLabel, isDirty, openModal]);
+  useEffect(() => {
+    setQueryClose(onClickCancel);
+  }, [onClickCancel]);
+  const classes = useCommonActionsUtilityClasses();
   return /* @__PURE__ */ jsx(
-    Controller,
+    Button,
     {
-      name,
-      control,
-      render: ({ field }) => {
-        const onSelected = (option) => field.value.includes(option) ? field.value.filter((value) => value !== option) : [...field.value, option];
-        return /* @__PURE__ */ jsx(FormGroup, { children: options.map((option) => /* @__PURE__ */ jsx(
-          FormControlLabel,
-          {
-            control: /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                checked: field.value.includes(option),
-                onChange: () => field.onChange(onSelected(option))
-              }
-            ),
-            label: option,
-            ...other
-          },
-          option
-        )) });
-      }
+      variant: "outlined",
+      color: "inherit",
+      onClick: onClickCancel,
+      className: classes.actionFormCancel,
+      children: getLabel("common_actions.cancel")
     }
   );
 }
-function RHFSelect({ name, children, ...other }) {
+function ActionFormIntro(props) {
+  const { getLabel } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
   const { control } = useFormContext();
+  const { isSubmitting } = useFormState({
+    control
+  });
+  const classes = useCommonActionsUtilityClasses();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 57, height: 30 });
+  }
   return /* @__PURE__ */ jsx(
-    Controller,
+    LoadingButton,
     {
-      name,
-      control,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
-        TextField,
-        {
-          ...field,
-          select: true,
-          fullWidth: true,
-          SelectProps: { native: true },
-          error: !!error,
-          helperText: error?.message,
-          ...other,
-          children
-        }
-      )
+      variant: "contained",
+      type: "submit",
+      color: "primary",
+      loading: isSubmitting,
+      className: classes.actionFormIntro,
+      ...props,
+      children: getLabel("common_actions.intro")
     }
   );
 }
-const SkeletonTextFieldRoot = styled("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  width: "100%",
-  gap: "4px"
-}));
-const WrapperSkeletonRHFTextField = styled("div")(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  alignItems: "center",
-  justifyContent: "space-between",
-  border: `1px solid ${theme.vars.palette.divider}`,
-  padding: "12px 14px",
-  borderRadius: theme.spacing(1),
-  gap: "4px"
-}));
-const SkeletonTextField = (props) => {
-  const { skeletonWidth, skeletonHeight, ownerState, classes: classes2, hasLabel } = props;
-  const { type: variant } = ownerState;
-  return /* @__PURE__ */ jsxs(SkeletonTextFieldRoot, { children: [
-    (hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", height: "16px" }),
-    /* @__PURE__ */ jsx(
-      WrapperSkeletonRHFTextField,
-      {
-        className: classes2.skeleton,
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$6("skeleton") } : {},
-        children: variant === "text" ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight }),
-          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" })
-        ] })
-      }
-    )
-  ] });
-};
-const RHFTextFieldRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFTextField?.styleOverrides
-}));
-styled("div")(({ theme }) => ({
-  display: "flex",
-  width: "100%",
-  alignItems: "center",
-  border: `1px solid ${theme.vars.palette.divider}`,
-  padding: "12px 14px",
-  borderRadius: theme.spacing(1)
-}));
-generateUtilityClasses(
-  componentName$g,
-  [
-    "root",
-    "label",
-    "skeleton",
-    "variantText",
-    "variantPassword",
-    "variantInfo",
-    "isDisabled",
-    "variantSuccess",
-    "variantWarning",
-    "variantError",
-    "sizeSmall",
-    "sizeMedium",
-    "isFocus",
-    "isTabSelected"
-  ]
-);
-const getRHFTextFieldClassesByState = (ownerState) => {
-  const slots = {
-    root: [
-      "root",
-      ownerState.type === "password" ? "variantPassword" : "variantText",
-      ownerState.size === "small" && "sizeSmall",
-      ownerState.size === "medium" && "sizeMedium",
-      ownerState.isFocus && "isFocus",
-      ownerState.isTabSelected && "isTabSelected",
-      ownerState.disabled && "isDisabled",
-      ownerState.variant === "info" && "variantInfo",
-      ownerState.variant === "success" && "variantSuccess",
-      ownerState.variant === "warning" && "variantWarning",
-      ownerState.variant === "error" && "variantError"
-    ],
-    label: ["label"],
-    skeleton: ["skeleton"]
+const useFormFocus = () => {
+  const [isFocus, setIsFocus] = useState(false);
+  const [isTabSelected, setIsTabSelected] = useState(false);
+  const handlerFocus = () => {
+    setIsFocus(true);
   };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName$g), {});
-  return {
-    ...composedClasses
+  const handlerOnKeyUp = (event) => {
+    if (event.key === "Tab") {
+      setIsTabSelected(true);
+    }
   };
+  const handlerOnBlur = () => {
+    setIsFocus(false);
+    setIsTabSelected(false);
+  };
+  return { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur };
 };
-const RHFTextField = forwardRef((props, ref) => {
+function RHFAutocomplete(props) {
   const {
     name: nameRHF,
-    autoComplete = "off",
-    skeletonWidth = "100%",
-    skeletonHeight = "18px",
-    type,
+    getOptionLabel,
+    isOptionEqualToValue,
     label,
-    size = "small",
-    startIcon,
-    endIcon,
-    variant,
-    helperMessage = "",
+    skeletonWidth = 100,
+    skeletonHeight = "18px",
+    options,
     disabled,
+    getOptionUrlImage,
+    onOpen,
+    onClose,
+    loading,
+    variant,
+    helperMessage,
+    size = "small",
+    onChangeFilterParmsLocal,
+    imageWidth,
+    imageHeight,
     mandatory,
     mandatoryMessage,
-    helperText,
+    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);
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
+  const [currentVariant, setCurrentVariant] = useState(
+    null
+  );
   useEffect(() => {
     if (errors[nameRHF]) {
       setCurrentVariant("error");
@@ -2484,43 +756,49 @@ const RHFTextField = forwardRef((props, ref) => {
     }
   }, [errors[nameRHF], variant, control]);
   const ownerState = {
-    type: type === "password" ? "password" : "text",
     size: !isDesktop ? "medium" : size,
     isFocus: !isSkeleton ? isFocus : false,
     isTabSelected: !isSkeleton ? isTabSelected : false,
-    variant: currentVariant,
-    disabled
+    semantics: currentVariant,
+    disabled,
+    imageWidthDefined: Boolean(imageWidth),
+    multiple: Boolean(multiple)
   };
-  const classes2 = getRHFTextFieldClassesByState(ownerState);
+  const classes = useUtilityClasses(ownerState);
+  const theme = useTheme();
   return /* @__PURE__ */ jsx(
-    RHFTextFieldRoot,
+    AutocompleteRoot,
     {
-      className: classes2.root,
+      className: classes.root,
       tabIndex: 0,
       onFocus: handlerFocus,
       onBlur: handlerOnBlur,
       onKeyUp: handlerOnKeyUp,
-      role: "textbox",
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: `${RHFTEXTFIELD_ROOT_TEST_ID}_${nameRHF}` } : {},
+      ...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, name, ref: inputRef }, fieldState: { error } }) => {
-            const onInternalChange = (event) => {
-              if (type === "number") {
-                if (event.target.value) {
-                  onChange(Number(event.target.value));
-                  return;
-                }
+          render: ({ field: { onChange, value }, fieldState: { error } }) => {
+            const [inputValue, setInputValue] = useState(getOptionLabelLocal(value));
+            useEffect(() => {
+              if (!open && value === null && inputValue !== "") {
+                setInputValue("");
               }
-              onChange(event);
+              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,
@@ -2528,158 +806,138 @@ const RHFTextField = forwardRef((props, ref) => {
                 }
               ),
               /* @__PURE__ */ jsx(
-                TextField,
+                Autocomplete,
                 {
-                  variant: "outlined",
-                  disabled,
-                  ref,
-                  inputRef,
-                  InputLabelProps: { shrink: true },
-                  autoComplete,
-                  onChange: onInternalChange,
-                  value: type === "number" ? isNaN(value) ? 0 : value : value || "",
-                  name,
-                  inputProps: {
-                    ...process.env.NODE_ENV !== "production" ? {
-                      [TEST_PROP_ID]: `${RHFTEXTFIELD_INPUT_TEST_ID}_${name}`
-                    } : {}
+                  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);
                   },
-                  fullWidth: true,
-                  error: !!error,
-                  type,
-                  ...startIcon || endIcon ? {
-                    InputProps: {
-                      ...{
-                        ...startIcon ? {
-                          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startIcon })
-                        } : {},
-                        ...endIcon ? {
-                          endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endIcon })
-                        } : {}
+                  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
                       }
-                    }
-                  } : {},
-                  ...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 ? /* @__PURE__ */ jsx(
-                HelperText,
-                {
-                  variant: currentVariant,
-                  message: currentVariant !== "error" ? helperMessage : error?.message
-                }
-              ) : null
+              currentVariant === "error" ? /* @__PURE__ */ jsx(HelperText, { variant: currentVariant, message: error?.message }) : null
             ] });
           }
         }
-      ) : /* @__PURE__ */ jsx(
-        SkeletonTextField,
-        {
-          classes: classes2,
-          skeletonWidth,
-          skeletonHeight,
-          ownerState,
-          hasLabel: label
-        }
-      )
-    }
-  );
-});
-RHFTextField.displayName = "RHFTextField";
-const RHFTextFieldPasswordRoot = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LRHFTextFieldPassword?.styleOverrides
-}));
-generateUtilityClasses(
-  "M4LRHFTextFieldPassword",
-  [
-    "root"
-  ]
-);
-function getRHFTextFieldPasswordUtilityClass(slot) {
-  return generateUtilityClass("M4LRHFTextFieldPassword", slot);
-}
-const useUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFTextFieldPasswordUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFTextFieldPassword = (props) => {
-  const {
-    name,
-    label,
-    skeletonWidth,
-    skeletonHeight,
-    size,
-    mandatory,
-    mandatoryMessage,
-    helperMessage
-  } = props;
-  const [showPassword, setShowPassword] = useState(false);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const classes2 = useUtilityClasses();
-  return /* @__PURE__ */ jsx(
-    RHFTextFieldPasswordRoot,
-    {
-      className: classes2.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$7("root") } : {},
-      children: /* @__PURE__ */ jsx(
-        RHFTextField,
-        {
-          name,
-          label,
-          type: showPassword ? "text" : "password",
-          autoComplete: "on",
-          skeletonWidth,
-          skeletonHeight,
-          size,
-          mandatory,
-          mandatoryMessage,
-          helperMessage,
-          InputProps: {
-            endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                onClick: () => setShowPassword(!showPassword),
-                variant: "line",
-                src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
-              }
-            ) })
-          }
-        }
-      )
-    }
-  );
-};
-function RHFRadioGroup({
-  name,
-  options,
-  getOptionLabel,
-  getOptionValue,
-  ...other
-}) {
-  const { control } = useFormContext();
-  return /* @__PURE__ */ jsx(
-    Controller,
-    {
-      name,
-      control,
-      render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(RadioGroup, { ...field, row: true, ...other, children: options.map((option) => /* @__PURE__ */ jsx(
-          FormControlLabel,
-          {
-            defaultValue: field.value,
-            value: getOptionValue(option),
-            control: /* @__PURE__ */ jsx(Radio, {}),
-            label: getOptionLabel(option)
-          },
-          getOptionValue(option)
-        )) }),
-        !!error && /* @__PURE__ */ jsx(FormHelperText, { error: true, sx: { px: 2 }, children: error.message })
-      ] })
+      ) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, { withImage, classes, hasLabel: label })
     }
   );
 }
@@ -2820,7 +1078,7 @@ const AreaChip = (props) => {
           /* @__PURE__ */ jsx("div", { className: areasAdminClasses.areaChipTitle, children: areaName }),
           isDesktop ? /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerChipEditButton, children: [
             /* @__PURE__ */ jsx(
-              IconButton,
+              IconButton$1,
               {
                 className: areasAdminClasses.areaChipEditButton,
                 src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.EDIT_AREA}`,
@@ -2832,7 +1090,7 @@ const AreaChip = (props) => {
               }
             ),
             /* @__PURE__ */ jsx(
-              IconButton,
+              IconButton$1,
               {
                 className: areasAdminClasses.areaChipDeleteButton,
                 src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.DELETE_AREA}`,
@@ -2887,7 +1145,7 @@ const AreaChip = (props) => {
                   /* @__PURE__ */ jsxs(EditAreaHeader, { children: [
                     /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area)) }),
                     /* @__PURE__ */ jsx(
-                      IconButton,
+                      IconButton$1,
                       {
                         src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.CLOSE}`,
                         size: "small",
@@ -3022,7 +1280,7 @@ const ChipMobile = (props) => {
     ),
     isDesktop ? /* @__PURE__ */ jsxs("div", { className: areasAdminClasses.areaContainerChipEditButton, children: [
       /* @__PURE__ */ jsx(
-        IconButton,
+        IconButton$1,
         {
           className: areasAdminClasses.areaChipEditButton,
           src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.EDIT_AREA}`,
@@ -3033,7 +1291,7 @@ const ChipMobile = (props) => {
         }
       ),
       /* @__PURE__ */ jsx(
-        IconButton,
+        IconButton$1,
         {
           className: areasAdminClasses.areaChipDeleteButton,
           src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.DELETE_AREA}`,
@@ -3084,7 +1342,7 @@ const ChipMobile = (props) => {
                   /* @__PURE__ */ jsxs(EditAreaHeader, { children: [
                     /* @__PURE__ */ jsx(Typography, { children: getLabel(getAreasDictionary(DICCTIONARY.label_edit_area)) }),
                     /* @__PURE__ */ jsx(
-                      IconButton,
+                      IconButton$1,
                       {
                         src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.CLOSE}`,
                         size: "small",
@@ -3307,7 +1565,7 @@ function AreasAdmin() {
               area
             )) }) }) : /* @__PURE__ */ jsx(AreaChipMobile, {}) }) }) }),
             isDesktop ? /* @__PURE__ */ jsx(
-              IconButton,
+              IconButton$1,
               {
                 className: areasAdminClasses.areasAddButton,
                 src: `${host_static_assets}/${environment_assets}/frontend/components/areas/assets/icons/${ICONS$1.ADD_AREA}`,
@@ -3570,7 +1828,7 @@ function MainActions(props) {
       e.stopPropagation();
     };
     return /* @__PURE__ */ jsx(
-      IconButton,
+      IconButton$1,
       {
         src: mainAction.urlIcon || "",
         className: clsx(mainAction.className, "m4l_draggableCancel"),
@@ -3671,7 +1929,7 @@ function Header(props) {
           }
         ),
         !colapsed && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(
-          IconButton,
+          IconButton$1,
           {
             className: "m4l_draggableCancel",
             onClick: maxNormalize,
@@ -3685,7 +1943,7 @@ function Header(props) {
           }
         ),
         !maximizedId && (emergeType === "layout" || emergeType === "popup") && /* @__PURE__ */ jsx(
-          IconButton,
+          IconButton$1,
           {
             className: "m4l_draggableCancel",
             onClick: colapedToggle,
@@ -3699,7 +1957,7 @@ function Header(props) {
           }
         ),
         onClose && /* @__PURE__ */ jsx(
-          IconButton,
+          IconButton$1,
           {
             className: "m4l_draggableCancel",
             onPointerDown: onCloseLocal,
@@ -3836,7 +2094,7 @@ function Toasty(props) {
         ] }),
         /* @__PURE__ */ jsxs("div", { className: areasViewerClasses.windowToastyButtonsContainer, children: [
           /* @__PURE__ */ jsx(
-            IconButton,
+            IconButton$1,
             {
               className: clsx(
                 areasViewerClasses.windowToastyPin,
@@ -3849,7 +2107,7 @@ function Toasty(props) {
             }
           ),
           /* @__PURE__ */ jsx(
-            IconButton,
+            IconButton$1,
             {
               className: areasViewerClasses.windowToastyClose,
               onClick: () => {
@@ -4105,7 +2363,7 @@ const PanelWindows = (props) => {
             maximizedId === kl.i && kl.emergeType !== "popup" || maximizedIdParent === kl.windowId && kl.moduleId === currentParam ? areasViewerClasses.selected : null
           ),
           children: /* @__PURE__ */ jsx(
-            IconButton,
+            IconButton$1,
             {
               src: kl.url_icon,
               size: "small",
@@ -4263,7 +2521,7 @@ function AreasViewer() {
     })
   ] });
 }
-const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME$1, [
+const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
   "root",
   "booleanFormatterIcon",
   "booleanFormatterCheck"
@@ -4445,25 +2703,6 @@ const DataGridRoot = styled("div")(({ theme }) => ({
   overflow: "hidden",
   ...theme.components?.M4LDataGrid?.styleOverrides
 }));
-const CheckboxFormatter = forwardRef(
-  function CheckboxFormatter2({ onChange, checked, ...props }, _ref) {
-    function handleChange(e) {
-      onChange(e.target.checked, e.nativeEvent.shiftKey);
-    }
-    return /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked,
-        size: "small",
-        icon: /* @__PURE__ */ jsx(CheckboxIcon, {}),
-        checkedIcon: /* @__PURE__ */ jsx(CheckboxCheckedIcon, {}),
-        indeterminateIcon: /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}),
-        onChange: handleChange,
-        ...props
-      }
-    );
-  }
-);
 const DataGridContext = createContext(null);
 const getColumnConfigByKey = (key, storeColumnsConfig) => {
   let indexFind = -1;
@@ -4566,7 +2805,7 @@ function DataGridProvider(props) {
     checkedRows,
     onCheckedRowsChange,
     rowKeyGetter,
-    classes: classes2
+    classes
   } = props;
   const [columnsWidths, setColumnsWidths] = useState(
     /* @__PURE__ */ new Map()
@@ -4675,7 +2914,7 @@ function DataGridProvider(props) {
         onChangeColumnWidth,
         setRowsCount: setRowFilterCountInternal,
         rowActionsGetter,
-        classes: classes2,
+        classes,
         setRowHeightVariant: setCurrentRowHeightInternal,
         onCheckedRowsChange,
         rowKeyGetter
@@ -4690,87 +2929,6 @@ function useDataGrid() {
     throw new Error("useDataGrid context must be use inside DataGridContext");
   return context;
 }
-const filterColumnClassName = "filter-cell";
-const filterHeight = 35;
-function SelectGroupFormatter(props) {
-  const [isRowSelected, onRowSelectionChange] = useRowSelection();
-  const onChange = (checked) => {
-    onRowSelectionChange({ row: props.row, checked, isShiftClick: false });
-  };
-  const cellFormater = SelectCellFormatter({
-    value: isRowSelected,
-    isCellSelected: props.isCellSelected,
-    onChange,
-    "aria-label": "Select Group"
-  });
-  return cellFormater;
-}
-function SelectFormatter(props) {
-  const { checkedRows, onCheckedRowsChange, rowKeyGetter } = useDataGrid();
-  const onChange = (checked, _isShiftClick) => {
-    const newCheckedRows = new Set(checkedRows);
-    if (checked) {
-      newCheckedRows.add(rowKeyGetter(props.row));
-    } else {
-      newCheckedRows.delete(rowKeyGetter(props.row));
-    }
-    onCheckedRowsChange && onCheckedRowsChange(newCheckedRows);
-  };
-  return /* @__PURE__ */ jsx(
-    SelectCellFormatter,
-    {
-      value: checkedRows?.has(rowKeyGetter(props.row)) || false,
-      isCellSelected: props.isCellSelected,
-      onChange,
-      "aria-label": "Select"
-    }
-  );
-}
-const SelectColumnHeaderRenderer = (props) => {
-  const { rows, rowKeyGetter, onCheckedRowsChange, checkedRows } = useDataGrid();
-  const onAllRowsCheckedChange = (checked) => {
-    if (!onCheckedRowsChange)
-      return;
-    if (checked) {
-      onCheckedRowsChange(new Set(rows.map((r) => rowKeyGetter(r))));
-    } else {
-      onCheckedRowsChange(/* @__PURE__ */ new Set());
-    }
-  };
-  const allRowsChecked = rows.length === checkedRows?.size;
-  return SelectCellFormatter({
-    "aria-label": "Select All",
-    isCellSelected: props.isCellSelected,
-    value: allRowsChecked,
-    onChange: onAllRowsCheckedChange
-  });
-};
-const SelectColumn = {
-  key: DATAGRID_SELECT_COLUMN_KEY,
-  name: "",
-  width: 32,
-  minWidth: 32,
-  isDraggable: false,
-  resizable: false,
-  sortable: false,
-  frozen: true,
-  type: "boolean",
-  headerRenderer: SelectColumnHeaderRenderer,
-  formatter: SelectFormatter,
-  groupFormatter: SelectGroupFormatter
-};
-function useFocusRef(isSelected) {
-  const ref = useRef(null);
-  useLayoutEffect(() => {
-    if (!isSelected)
-      return;
-    ref.current?.focus({ preventScroll: true });
-  }, [isSelected]);
-  return {
-    ref,
-    tabIndex: isSelected ? 0 : -1
-  };
-}
 const initialState = {
   activeFilters: false,
   setActiveFilters: voidFunction
@@ -4812,399 +2970,18 @@ function FilterProvider({ children, initialActiveFilters }) {
   );
 }
 const useFilters = () => useContext(FilterContext);
-function DraggableHeaderRenderer(props) {
-  const { onColumnsReorder, column, isCellSelected, ...others } = props;
-  const { ref, tabIndex } = useFocusRef(isCellSelected);
-  const { getLabel } = useModuleDictionary();
-  const { activeFilters, filters, onChangeFilter } = useFilters();
-  const [filter, setFilter] = useState(filters?.get(column.key) || "");
-  const [{ isDragging }, drag] = useDrag({
-    type: "COLUMN_DRAG",
-    item: { key: column.key },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging()
-    })
-  });
-  const [{ isOver }, drop] = useDrop({
-    accept: "COLUMN_DRAG",
-    drop({ key }) {
-      onColumnsReorder(key, column.key);
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
-    })
-  });
-  const handleChange = (e) => {
-    if (activeFilters) {
-      if (onChangeFilter)
-        onChangeFilter(column, e.target.value);
-    }
-    setFilter(e.target.value);
-  };
-  useEffect(() => {
-    if (!activeFilters)
-      setFilter("");
-  }, [activeFilters]);
-  const newColumn = { ...column };
-  if (newColumn.withinHeaderRenderer) {
-    newColumn.name = newColumn.withinHeaderRenderer(props);
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: (newRef) => {
-        drag(newRef);
-        drop(newRef);
-      },
-      style: {
-        opacity: isDragging ? 0.5 : 1,
-        backgroundColor: isOver ? "#ececec" : void 0,
-        cursor: "move",
-        display: "flex",
-        flexDirection: "column",
-        lineHeight: "1",
-        height: "100%",
-        justifyContent: "center",
-        textAlign: "center"
-      },
-      children: [
-        /* @__PURE__ */ jsx(HeaderRenderer, { column: newColumn, isCellSelected, ...others }),
-        activeFilters && (column?.withFilter === void 0 || column.withFilter === true) && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "filter_cell_div",
-            style: {
-              borderTop: "1px solid var(--rdg-border-color)",
-              width: "100%",
-              display: "flex",
-              alignItems: "center",
-              height: `${filterHeight}px`
-            },
-            children: /* @__PURE__ */ jsx(
-              InputBase,
-              {
-                inputRef: ref,
-                placeholder: getLabel("data_grid.filter_holder"),
-                style: {
-                  width: "100%",
-                  paddingBottom: "2px",
-                  border: "1px solid var(--rdg-border-color)"
-                },
-                tabIndex,
-                type: "text",
-                onChange: handleChange,
-                value: filter
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-const getDragHeaderRenderer = (handleColumnsReorder) => {
-  function HeaderRenderer2(props) {
-    return /* @__PURE__ */ jsx(DraggableHeaderRenderer, { ...props, onColumnsReorder: handleColumnsReorder });
-  }
-  return HeaderRenderer2;
-};
-function ActionsFormatter(props) {
-  const { rowActionsGetter, classes: classes2 } = useDataGrid();
-  const theme = useTheme();
-  if (rowActionsGetter === void 0) {
-    return /* @__PURE__ */ jsx(Fragment, {});
-  }
-  return /* @__PURE__ */ jsx(
-    MenuActions,
-    {
-      arrowType: "top-left",
-      objItem: props.row,
-      menuActions: rowActionsGetter,
-      className: classes2.actionsFormatter,
-      menuActionSx: theme.components?.M4LDataGridActionsFormatter?.styleOverrides,
-      marginTop: 1,
-      marginLeft: "-11px",
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      transformOrigin: { vertical: "top", horizontal: "left" }
-    }
-  );
-}
-const ActionsColumn = {
-  key: DATAGRID_ACTIONS_COLUMN_KEY,
-  name: getActionLabel(),
-  width: 32,
-  minWidth: 32,
-  isDraggable: false,
-  withFilter: false,
-  resizable: true,
-  sortable: false,
-  frozen: true,
-  type: "custom",
-  formatter: ActionsFormatter
-};
-function getActionLabel() {
-  return "";
-}
-const WrapperSkeleton = styled$1("div")(() => ({
-  display: "flex",
-  width: "100%",
-  height: "100%",
-  alignItems: "center"
-}));
-function SkeletonFormatter() {
-  const { classes: classes2 } = useDataGrid();
-  return /* @__PURE__ */ jsx(WrapperSkeleton, { className: classes2.skeletonFormatter, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "100%", height: "12px" }) });
-}
-function getComparator(columns, sortColumn) {
-  const column = columns.find((d) => d.key === sortColumn);
-  let typeOrder = "string";
-  if (column) {
-    typeOrder = column.type || "string";
-  }
-  switch (typeOrder) {
-    case "number":
-      return (a, b) => {
-        try {
-          return Number(a[sortColumn]) - Number(b[sortColumn]);
-        } catch (error) {
-          return -1;
-        }
-      };
-    default:
-      return (a, b) => {
-        try {
-          return a[sortColumn].toString().localeCompare(b[sortColumn].toString());
-        } catch (error) {
-          return -1;
-        }
-      };
-  }
-}
-const getColumIndex = (key, columnsConfig) => columnsConfig.findIndex((columnConfig) => columnConfig.key === key);
-const getInOrderColumns = (columns, hasCheckedRows, columnsConfig, columnsWidths, rowActionsGetter) => {
-  let filteredSortedColumns = columns.filter((column) => {
-    const columnConfigIndex = getColumIndex(column.key, columnsConfig);
-    const visible = columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].visible : true;
-    return !column.hidden && visible;
-  }).sort(
-    (a, b) => getColumIndex(a.key, columnsConfig) - getColumIndex(b.key, columnsConfig)
-  ).map((columnSorted) => {
-    const columnConfigIndex = getColumIndex(columnSorted.key, columnsConfig);
-    return {
-      ...columnSorted,
-      frozen: columnConfigIndex > -1 ? columnsConfig[columnConfigIndex].frozen : true,
-      width: typeof columnsWidths.get(columnSorted.key) === "number" ? columnsWidths.get(columnSorted.key) : columnSorted.width
-    };
-  }).sort((a, b) => {
-    const order = (a.frozen === void 0 || a.frozen === false) === (b.frozen === void 0 || b.frozen === false) ? 0 : a.frozen ? -1 : 1;
-    return order;
-  });
-  if (rowActionsGetter) {
-    filteredSortedColumns = [ActionsColumn, ...filteredSortedColumns];
-  }
-  if (hasCheckedRows) {
-    filteredSortedColumns = [SelectColumn, ...filteredSortedColumns];
-  }
-  return filteredSortedColumns;
-};
-const getAligByType = (columnType) => {
-  switch (columnType) {
-    case "string":
-      return "left";
-    case "date":
-    case "boolean":
-    case "custom":
-      return "center";
-    case "number":
-      return "right";
-  }
-  return "left";
-};
-const useSortColumnsRows = (sourceColumns, sourceRows) => {
-  const {
-    columnsConfig,
-    columnsWidths,
-    onChangeColumnsOrder,
-    rowActionsGetter,
-    checkedRows,
-    onCheckedRowsChange
-  } = useDataGrid();
-  const [columns, setColumns] = useState(() => []);
-  const [sortColumns, setSortColumns] = useState([]);
-  const isSkeleton = useModuleSkeleton();
-  const { activeFilters, filters } = useFilters();
-  const findKeyInColumns = (key, cols) => {
-    const index = cols.findIndex((column) => key === column.key && column.hidden === false);
-    return index !== -1;
-  };
-  useEffect(() => {
-    setColumns(
-      getInOrderColumns(
-        sourceColumns,
-        !!checkedRows && !!onCheckedRowsChange,
-        columnsConfig,
-        columnsWidths,
-        rowActionsGetter
-      )
-    );
-    const finalSortedColumns = sortColumns.filter(
-      (sortColumn) => findKeyInColumns(sortColumn.columnKey, sourceColumns)
-    );
-    if (JSON.stringify(finalSortedColumns) !== JSON.stringify(sortColumns)) {
-      setSortColumns(finalSortedColumns);
-    }
-  }, [sourceColumns, columnsConfig, rowActionsGetter]);
-  const finalColumns = useMemo(() => {
-    const DragAndDropHeaderRenderer = getDragHeaderRenderer(onChangeColumnsOrder);
-    return columns.map((c) => {
-      const newColumn = {
-        ...c,
-        cellClass: c.align !== void 0 ? `rdg-cell-align-${c.align}` : `rdg-cell-align-${getAligByType(c.type)}`
-      };
-      if (newColumn.key === DATAGRID_SELECT_COLUMN_KEY || newColumn.isDraggable !== void 0 && newColumn.isDraggable === false) {
-        return newColumn;
-      }
-      if (isSkeleton) {
-        newColumn.headerRenderer = SkeletonFormatter;
-        newColumn.formatter = SkeletonFormatter;
-      }
-      if (newColumn.headerRenderer) {
-        newColumn.withinHeaderRenderer = newColumn.headerRenderer;
-      }
-      if ((newColumn?.withFilter === void 0 || newColumn.withFilter === true) && activeFilters) {
-        newColumn.headerCellClass = filterColumnClassName;
-      }
-      newColumn.headerRenderer = DragAndDropHeaderRenderer;
-      return newColumn;
-    });
-  }, [isSkeleton, columns, activeFilters, onChangeColumnsOrder]);
-  const finalRows = useMemo(() => {
-    const nextRows = sourceRows.filter((r) => {
-      if (!filters || filters.size === 0)
-        return true;
-      const iterator = filters.entries();
-      let valReturn = true;
-      for (let i = 0; i < filters.size; i++) {
-        const entry = iterator.next().value;
-        const columnKey = entry[0];
-        const columnFilter = entry[1];
-        let valCell;
-        const valueMaybeString = getPropertyByString(r, columnKey);
-        let fixedValue;
-        if (typeof valueMaybeString === "string") {
-          fixedValue = valueMaybeString;
-        } else {
-          fixedValue = "";
-        }
-        try {
-          if (columnFilter.customFilter) {
-            valReturn = valReturn && columnFilter.customFilter(r, columnFilter.value);
-          } else {
-            valCell = fixedValue;
-            valReturn = valReturn && valCell.includes(columnFilter.value);
-          }
-        } catch (error) {
-          continue;
-        }
-        if (!valReturn)
-          break;
-      }
-      return valReturn;
-    });
-    if (sortColumns.length === 0) {
-      return nextRows;
-    }
-    nextRows.sort((a, b) => {
-      for (const sort of sortColumns) {
-        const comparator = getComparator(columns, sort.columnKey);
-        const compResult = comparator(a, b);
-        if (compResult !== 0) {
-          return sort.direction === "ASC" ? compResult : -compResult;
-        }
-      }
-      return 0;
-    });
-    return nextRows;
-  }, [sourceRows, sortColumns, filters]);
-  return { finalColumns, sortColumns, setSortColumns, finalRows };
-};
-function Table(props) {
-  const { columns, rows, onRowsChange, rowKeyGetter, selectedRows, onSelectedRowsChange } = props;
-  const { finalColumns, sortColumns, setSortColumns, finalRows } = useSortColumnsRows(
-    columns,
-    rows
-  );
-  const { activeFilters } = useFilters();
-  const { onChangeColumnWidth, setRowsCount, currentRowHeight, currentRowHeaderHeight, classes: classes2 } = useDataGrid();
-  const ref_data_grid = useRef(null);
-  const onRowClick = (row) => {
-    if (selectedRows && onSelectedRowsChange) {
-      if (selectedRows.entries().next().value) {
-        if (selectedRows.entries().next().value[1] === rowKeyGetter(row)) {
-          return;
-        }
-      }
-      const mySet = /* @__PURE__ */ new Set([rowKeyGetter(row)]);
-      onSelectedRowsChange(mySet);
-    }
-  };
-  useEffect(() => {
-    let columnIndice = 0;
-    for (const column of finalColumns) {
-      const index = sortColumns.findIndex((sortColumn) => column.key === sortColumn.columnKey);
-      if (index !== -1) {
-        ref_data_grid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.setAttribute("aria-columnsort", `${sortColumns[index].direction}`);
-      } else {
-        ref_data_grid.current?.element?.querySelector(`[role="columnheader"][aria-colindex="${columnIndice + 1}"]`)?.removeAttribute("aria-columnsort");
-      }
-      columnIndice++;
-    }
-  }, [sortColumns, finalColumns]);
-  useEffect(() => {
-    setRowsCount(finalRows.length);
-  }, [finalRows]);
-  const onColumnResize = (idx, width) => {
-    onChangeColumnWidth(finalColumns[idx].key, width);
-  };
-  const onChangeSort = (newSortColumns) => {
-    setSortColumns(newSortColumns);
-  };
-  return /* @__PURE__ */ jsx("div", { className: classes2.tableContaniner, id: "WrapperTable", children: /* @__PURE__ */ jsx("div", { className: classes2.wrapperDataGridCss, children: /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, context: window, children: /* @__PURE__ */ jsx(
-    DataGrid$1,
-    {
-      className: "fill-grid rdg-light",
-      ref: ref_data_grid,
-      headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-      columns: finalColumns,
-      sortColumns,
-      onSortColumnsChange: onChangeSort,
-      onColumnResize,
-      rows: finalRows,
-      onRowsChange,
-      selectedRows,
-      onSelectedRowsChange,
-      onRowClick,
-      rowHeight: currentRowHeight,
-      rowKeyGetter,
-      cellNavigationMode: "LOOP_OVER_ROW",
-      components: { checkboxFormatter: CheckboxFormatter },
-      defaultColumnOptions: { resizable: true, sortable: true }
-    }
-  ) }) }) });
-}
 function Filter() {
   const { activeFilters, setActiveFilters } = useFilters();
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes: classes2 } = useDataGrid();
+  const { classes } = useDataGrid();
   const toggleIcon = () => {
     setActiveFilters(!activeFilters);
   };
   return /* @__PURE__ */ jsx(
-    IconButton,
+    IconButton$1,
     {
       dictionaryTooltipId: activeFilters ? "data_grid.tooltip_filter_hide" : "data_grid.tooltip_filter_show",
-      className: classes2.actionFilter,
+      className: classes.actionFilter,
       onClick: toggleIcon,
       "aria-label": "filter",
       src: `${host_static_assets}/${environment_assets}/frontend/components/data_grid/assets/icons/filter.svg`
@@ -5326,7 +3103,7 @@ function ColumnPriceFormatter(props) {
     return /* @__PURE__ */ jsx(PriceFormatter, { obProps, ...props });
   };
 }
-const dataGridClasses = generateUtilityClasses(componentName$h, [
+const dataGridClasses = generateUtilityClasses(componentName$3, [
   "root",
   "actions",
   "withPager",
@@ -5353,7 +3130,7 @@ const dataGridClasses = generateUtilityClasses(componentName$h, [
   "withActions"
 ]);
 function getDataGridUtilityClass(slot) {
-  return generateUtilityClass(componentName$h, slot);
+  return generateUtilityClass(componentName$3, slot);
 }
 const dataGridUtilityClasses = (ownerState) => {
   const slots = {
@@ -5449,7 +3226,7 @@ function getRowsFromColumnsConfig(columnsConfig) {
 }
 const ColumnsConfig = forwardRef((props, ref) => {
   const refdata_grid = useRef(null);
-  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, classes: classes2 } = props;
+  const { onCloseSettings, columnsConfig, onChangeColumnsConfig, classes } = props;
   const { getLabel } = useModuleDictionary();
   const [isInit, setIsInit] = useState(true);
   const [rows, setRows] = useState(getRowsFromColumnsConfig(columnsConfig));
@@ -5597,12 +3374,12 @@ const ColumnsConfig = forwardRef((props, ref) => {
     const mySet = /* @__PURE__ */ new Set([row.key]);
     setSelRows(mySet);
   };
-  return /* @__PURE__ */ jsxs(WrapperColumnsConfig, { ref: divRef, className: classes2.columnsConfigContainer, children: [
-    /* @__PURE__ */ jsx(DivSelColumns, { className: classes2.columnsLabelSetColumns, children: getLabel("data_grid.settings_sel_columns") }),
-    /* @__PURE__ */ jsx(WrapperDataGrid, { className: classes2.columnsConfigContent, children: /* @__PURE__ */ jsx("div", { className: classes2.wrapperDataGridCss, children: /* @__PURE__ */ jsx(
+  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: classes2.columnsConfigGrid,
+        className: classes.columnsConfigGrid,
         ref: refdata_grid,
         columns: columnsdata_grid,
         rows,
@@ -5615,9 +3392,9 @@ const ColumnsConfig = forwardRef((props, ref) => {
         defaultColumnOptions: { resizable: true, sortable: true }
       }
     ) }) }),
-    /* @__PURE__ */ jsxs(ColumnActions, { className: classes2.columnsConfigActions, children: [
+    /* @__PURE__ */ jsxs(ColumnActions, { className: classes.columnsConfigActions, children: [
       /* @__PURE__ */ jsx(
-        IconButton,
+        IconButton$1,
         {
           tooltip: getLabel("data_grid.settings_move_first"),
           onClick: handleMoveFirst,
@@ -5627,7 +3404,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         }
       ),
       /* @__PURE__ */ jsx(
-        IconButton,
+        IconButton$1,
         {
           tooltip: getLabel("data_grid.settings_move_up"),
           dictionaryTooltipId: "data_grid.settings_move_up",
@@ -5638,7 +3415,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         }
       ),
       /* @__PURE__ */ jsx(
-        IconButton,
+        IconButton$1,
         {
           tooltip: getLabel("data_grid.settings_move_last"),
           onClick: handleMoveLast,
@@ -5648,7 +3425,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         }
       ),
       /* @__PURE__ */ jsx(
-        IconButton,
+        IconButton$1,
         {
           tooltip: getLabel("data_grid.settings_move_down"),
           onClick: () => handleMoveUpDownd(1),
@@ -5658,7 +3435,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         }
       ),
       /* @__PURE__ */ jsx(
-        IconButton,
+        IconButton$1,
         {
           tooltip: getLabel("data_grid.settings_visible_all"),
           onClick: checkAll,
@@ -5667,7 +3444,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         }
       ),
       /* @__PURE__ */ jsx(
-        IconButton,
+        IconButton$1,
         {
           tooltip: getLabel("data_grid.settings_no_visible_all"),
           onClick: unCheckAll,
@@ -5676,7 +3453,7 @@ const ColumnsConfig = forwardRef((props, ref) => {
         }
       ),
       /* @__PURE__ */ jsx(
-        IconButton,
+        IconButton$1,
         {
           tooltip: getLabel("data_grid.settings_restore"),
           onClick: restoreAll,
@@ -5690,12 +3467,12 @@ const ColumnsConfig = forwardRef((props, ref) => {
 ColumnsConfig.displayName = "ColumnsConfig";
 function Settings() {
   const { host_static_assets, environment_assets } = useEnvironment();
-  const { classes: classes2 } = useDataGrid();
+  const { classes } = useDataGrid();
   const modalSettings = useModalSettings();
   return /* @__PURE__ */ jsx(
-    IconButton,
+    IconButton$1,
     {
-      className: classes2.actionSettings,
+      className: classes.actionSettings,
       dictionaryTooltipId: "data_grid.tooltip_settings",
       onClick: modalSettings,
       "aria-label": "settings",
@@ -5704,20 +3481,20 @@ function Settings() {
   );
 }
 function RowsCount() {
-  const { rowsCount, classes: classes2 } = useDataGrid();
+  const { rowsCount, classes } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx("div", { className: classes2.rowsCount, children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: classes2.rowsCountLabel, children: getLabel("data_grid.rows") }),
-    /* @__PURE__ */ jsx("div", { className: classes2.rowsCountValue, children: rowsCount })
+  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: classes2.rowsCountLabel, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40px", height: "16px" }) }),
-    /* @__PURE__ */ jsx("div", { className: classes2.rowsCountValue, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "20px", height: "16px" }) })
+    /* @__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: classes2 } = useDataGrid();
+  const { rowHeights, currentRowHeightVariant, setRowHeightVariant, classes } = useDataGrid();
   const { getLabel } = useModuleDictionary();
   const menuActions = useMemo(() => {
     if (typeof rowHeights === "number") {
@@ -5767,7 +3544,7 @@ function Density() {
     MenuActions,
     {
       arrowType: "right-top",
-      className: classes2.actionDensityPopover,
+      className: classes.actionDensityPopover,
       menuActionSx: theme.components?.M4LDataGridDensityPopover?.styleOverrides,
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "right" },
@@ -5829,7 +3606,7 @@ const MobileMenuActions = () => {
 };
 function Actions(props) {
   const isXs = useResponsiveContainerStore((state) => state.isXs, shallow);
-  const { rowHeights, classes: classes2 } = useDataGrid();
+  const { rowHeights, classes } = useDataGrid();
   const isSkeleton = useModuleSkeleton();
   const { getLabel } = useModuleDictionary();
   const {
@@ -5840,7 +3617,7 @@ function Actions(props) {
     settingsProps,
     withLocalFilters
   } = props;
-  return /* @__PURE__ */ jsxs("div", { className: classes2.actions, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
     withRowsCount && !isXs && /* @__PURE__ */ jsx(RowsCount, {}),
     withPager && pagerOptions && /* @__PURE__ */ jsx(
       Pager,
@@ -5853,7 +3630,7 @@ function Actions(props) {
         labelOf: getLabel(dictionary.LABEL_OF)
       }
     ),
-    isXs ? /* @__PURE__ */ jsx(MobileMenuActions, {}) : /* @__PURE__ */ jsxs("div", { className: classes2.actionsConfigContainer, children: [
+    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 })
@@ -5886,11 +3663,11 @@ function DataGrid(props) {
     actionsProps,
     withActions
   };
-  const classes2 = dataGridUtilityClasses(ownerState);
+  const classes = dataGridUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(
     DataGridRoot,
     {
-      className: classes2.root,
+      className: classes.root,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_COLUMNS]: JSON.stringify(columns),
         [TEST_PROP_ID]: getNameDataTestId$1(DATAGRID_PREFIX_NAME, "root", dataTestId)
@@ -5909,7 +3686,7 @@ function DataGrid(props) {
           onCheckedRowsChange,
           rowKeyGetter,
           rows,
-          classes: classes2,
+          classes,
           children: /* @__PURE__ */ jsxs(FilterProvider, { initialActiveFilters: false, children: [
             withActions && actionsProps && /* @__PURE__ */ jsx(
               Actions,
@@ -6006,21 +3783,8 @@ function NumberEditor({
     }
   );
 }
-function HelperError(props) {
-  const { name } = props;
-  const { control } = useFormContext();
-  const { fieldState } = useController({
-    name,
-    control,
-    rules: { required: true }
-  });
-  if (fieldState?.error?.message) {
-    return /* @__PURE__ */ jsx(HelperText, { variant: "error", message: fieldState?.error?.message });
-  }
-  return null;
-}
 generateUtilityClasses(
-  componentName$i,
+  componentName$4,
   [
     "root"
   ]
@@ -6029,17 +3793,17 @@ const useAppBarComercialUtilityClasses$1 = () => {
   const slots = {
     root: ["root"]
   };
-  return unstable_composeClasses(slots, getComponentUtilityClass(componentName$i), {});
+  return unstable_composeClasses(slots, getComponentUtilityClass(componentName$4), {});
 };
 const AppBarComercialRoot = styled$1("div")(({ theme }) => ({
   ...theme.components?.M4LAppBarCommercial?.styleOverrides
 }));
 const AppBarComercial = (props) => {
   const { children } = props;
-  const classes2 = useAppBarComercialUtilityClasses$1();
-  return /* @__PURE__ */ jsx(AppBarComercialRoot, { className: classes2.root, children });
+  const classes = useAppBarComercialUtilityClasses$1();
+  return /* @__PURE__ */ jsx(AppBarComercialRoot, { className: classes.root, children });
 };
-const TopBarClasses = generateUtilityClasses(componentName$j, [
+const TopBarClasses = generateUtilityClasses(componentName$5, [
   "root",
   "ContainerImageComercial",
   "SimplebarComercial",
@@ -6061,7 +3825,7 @@ function getTopBarClassesUtilityClass() {
     ContainerAccordionCase1: ["ContainerAccordionCase1"],
     IconAndButton: ["IconAndButton"]
   };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName$j), {});
+  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName$5), {});
   return {
     ...composedClasses
   };
@@ -6074,11 +3838,11 @@ const initialstate = {
 const TopBarContext = createContext(initialstate);
 const TopBarProvider = (props) => {
   const { children, value } = props;
-  const { dataMenu: DataMenu, classes: classes2, dataTestId } = value;
+  const { dataMenu: DataMenu, classes, dataTestId } = value;
   return /* @__PURE__ */ jsx(
     TopBarContext.Provider,
     {
-      value: { dataMenu: DataMenu, classes: classes2, dataTestId },
+      value: { dataMenu: DataMenu, classes, dataTestId },
       children
     }
   );
@@ -6087,7 +3851,7 @@ const useTopBar = () => useContext(TopBarContext);
 const useTopBar$1 = useTopBar;
 const NavItemRoot = (props) => {
   const theme = useTheme();
-  const { classes: classes2, dataTestId } = useTopBar$1();
+  const { classes, dataTestId } = useTopBar$1();
   const { itemRootData } = props;
   const { title, children, module_id } = itemRootData;
   const [anchorEl, setAnchorEl] = useState(null);
@@ -6105,10 +3869,10 @@ const NavItemRoot = (props) => {
       "div",
       {
         className: clsx(
-          classes2.ItemSelect,
+          classes.ItemSelect,
           item.path === window.location.pathname ? TopBarClasses.IsActive : null
         ),
-        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$j, "ItemSelect", dataTestId) } : {},
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$5, "ItemSelect", dataTestId) } : {},
         children: /* @__PURE__ */ jsx(Button, { variant: "text", href: item.path, fullWidth: true, children: item.title })
       }
     ) }, index));
@@ -6141,10 +3905,10 @@ const NavItemRoot = (props) => {
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classes2.ContainerAccordionCase1,
+          className: classes.ContainerAccordionCase1,
           ...process.env.NODE_ENV !== "production" ? {
             [TEST_PROP_ID]: getNameDataTestId$1(
-              componentName$j,
+              componentName$5,
               "ContainerAccordionCase1",
               dataTestId
             )
@@ -6169,8 +3933,8 @@ const NavItemRoot = (props) => {
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classes2.ContainerAccordion,
-          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$j, "ContainerAccordion", dataTestId) } : {},
+          className: classes.ContainerAccordion,
+          ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$5, "ContainerAccordion", dataTestId) } : {},
           children: [
             /* @__PURE__ */ jsx(
               Button,
@@ -6195,21 +3959,21 @@ const NavItemRoot = (props) => {
     Box,
     {
       className: clsx(
-        classes2.ItemRoot,
+        classes.ItemRoot,
         isActive(itemRootData) || openedPopoverId === itemRootData.module_id ? TopBarClasses.IsActive : null
       ),
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$j, "ItemRoot", dataTestId) } : {},
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$5, "ItemRoot", dataTestId) } : {},
       children: render()
     }
   );
 };
 const ConteinItem = () => {
-  const { dataMenu: DataMenu, classes: classes2, dataTestId } = useTopBar$1();
+  const { dataMenu: DataMenu, classes, dataTestId } = useTopBar$1();
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classes2.SimplebarComercial,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$j, "SimplebarComercial", dataTestId) } : {},
+      className: classes.SimplebarComercial,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$5, "SimplebarComercial", dataTestId) } : {},
       children: DataMenu.map((group) => /* @__PURE__ */ jsx(NavItemRoot, { itemRootData: group }, group.module_id))
     }
   );
@@ -6219,18 +3983,18 @@ const TopBarRoot = styled$1("header")(({ theme }) => ({
 }));
 const TopBar = (props) => {
   const { dataMenu: DataMenu, dataTestId } = props;
-  const classes2 = getTopBarClassesUtilityClass();
+  const classes = getTopBarClassesUtilityClass();
   return /* @__PURE__ */ jsx(
     TopBarRoot,
     {
-      className: classes2.root,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$j, "root", dataTestId) } : {},
-      children: /* @__PURE__ */ jsx(TopBarProvider, { value: { dataMenu: DataMenu, classes: classes2, dataTestId }, children: /* @__PURE__ */ jsx(ConteinItem, {}) })
+      className: classes.root,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameDataTestId$1(componentName$5, "root", dataTestId) } : {},
+      children: /* @__PURE__ */ jsx(TopBarProvider, { value: { dataMenu: DataMenu, classes, dataTestId }, children: /* @__PURE__ */ jsx(ConteinItem, {}) })
     }
   );
 };
 generateUtilityClasses(
-  componentName$k,
+  componentName$6,
   [
     "root",
     "fullWidth",
@@ -6247,7 +4011,7 @@ const useAppBarComercialUtilityClasses = (ownerState) => {
       ownerState.columnReverse && "columnReverse"
     ]
   };
-  return unstable_composeClasses(slots, getComponentUtilityClass(componentName$k), {});
+  return unstable_composeClasses(slots, getComponentUtilityClass(componentName$6), {});
 };
 const SectionCommercialRoot = styled$1(Stack)(({ theme }) => ({
   ...theme.components?.M4LSectionCommercial?.styleOverrides
@@ -6265,11 +4029,11 @@ const SectionCommercial = (props) => {
     contentWith,
     columnReverse
   };
-  const classes2 = useAppBarComercialUtilityClasses(ownerState);
+  const classes = useAppBarComercialUtilityClasses(ownerState);
   return /* @__PURE__ */ jsx(
     SectionCommercialRoot,
     {
-      className: classes2.root,
+      className: classes.root,
       paddingY,
       ...others,
       ...contentWith === "boxed" ? { paddingX } : null,
@@ -6278,75 +4042,46 @@ const SectionCommercial = (props) => {
   );
 };
 export {
-  getUncertaintyFormat as $,
-  Avatar as A,
-  Button as B,
-  CircularProgress as C,
+  Actions$1 as A,
+  BooleanFormatter as B,
+  ColumnSetCheckFormatter as C,
   DateFormatter as D,
-  AreasViewer as E,
-  RHFMultiCheckbox as F,
-  RHFSelect as G,
-  HelperError as H,
-  RHFRadioGroup as I,
-  RHFCheckbox as J,
-  RHFTextFieldPassword as K,
-  LinearProgress as L,
-  Accordion as M,
+  ColumnPriceFormatter as E,
+  ColumnInteractiveCheckFormatter as F,
+  ActionFormCancel as G,
+  AppBarComercial as H,
+  TopBar as I,
+  MenuActions as M,
   NumberEditor as N,
-  Breadcrumbs as O,
-  Popover as P,
-  Badge as Q,
+  PointsFormatter as P,
   RHFAutocomplete as R,
-  Stack as S,
-  Typography as T,
-  LinkWithRoute as U,
-  LoadingButton as V,
-  MenuActions as W,
-  ToggleButton as X,
-  BooleanFormatter as Y,
-  getFormatDate as Z,
-  UncertaintyFormatter as _,
-  RHFTextField as a,
-  PointsFormatter as a0,
-  getFormatPoints as a1,
-  getFormatConcatenated as a2,
-  ConcatenatedFormatter as a3,
-  PriceFormatter as a4,
-  getFormatPrice as a5,
-  ColumnUncertaintyFormatter as a6,
-  ColumnPointsFormatter as a7,
-  ColumnNestedValueFormatter as a8,
-  ColumnBooleanFormatter as a9,
-  ColumnConcatenatedValueFormatter as aa,
-  ColumnPriceFormatter as ab,
-  ColumnInteractiveCheckFormatter as ac,
-  ActionFormCancel as ad,
-  AppBarComercial as ae,
-  TopBar as af,
-  SectionCommercial as ag,
-  RHFDateTime as b,
-  RHFAutocompleteAsync as c,
-  Actions$1 as d,
-  ActionCancel as e,
-  ActionIntro as f,
-  DataGrid as g,
-  useAreasViewerUtilityClasses as h,
-  useAreasAdminUtilityClasses as i,
-  ColumnDateFormatter as j,
-  ActionFormIntro as k,
-  RHFColorPicker as l,
-  Tabs as m,
-  Tab as n,
-  Tooltip as o,
-  TabContent as p,
-  TabProvider as q,
-  ColumnSetCheckFormatter as r,
-  CheckBox as s,
-  useDataGrid as t,
-  useFormFocus as u,
-  DataGridRoot as v,
-  ColumnsConfig as w,
-  TabContext as x,
-  TextEditor as y,
-  AreasAdmin as z
+  SectionCommercial as S,
+  TextEditor as T,
+  UncertaintyFormatter as U,
+  DataGrid as a,
+  useAreasAdminUtilityClasses as b,
+  useFormFocus as c,
+  ActionCancel as d,
+  ActionIntro as e,
+  useDataGrid as f,
+  useFilters as g,
+  ColumnDateFormatter as h,
+  ActionFormIntro as i,
+  DataGridRoot as j,
+  ColumnsConfig as k,
+  AreasAdmin as l,
+  AreasViewer as m,
+  getFormatDate as n,
+  getUncertaintyFormat as o,
+  getFormatPoints as p,
+  getFormatConcatenated as q,
+  ConcatenatedFormatter as r,
+  PriceFormatter as s,
+  getFormatPrice as t,
+  useAreasViewerUtilityClasses as u,
+  ColumnUncertaintyFormatter as v,
+  ColumnPointsFormatter as w,
+  ColumnNestedValueFormatter as x,
+  ColumnBooleanFormatter as y,
+  ColumnConcatenatedValueFormatter as z
 };