@apia/components 4.0.8 → 4.0.11

package/dist/index.js

@@ -1,27 +1,30 @@
-import uniqueId$2 from 'lodash-es/uniqueId';
-import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, EventEmitter, useMount, getLabel, getSpecificParent, isChild, useUnmount, StatefulEmitter, debugDispatcher, customEvents, getDateFormat, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription } from '@apia/util';
 import { jsx, Fragment, jsxs } from '@apia/theme/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useContext, useMemo, useEffect, useState, useCallback, useRef, forwardRef, Fragment as Fragment$1, useDeferredValue, lazy, Suspense, useTransition, Children, memo, isValidElement, cloneElement } from 'react';
+import React__default, { createContext, useContext, useEffect, useMemo, useState, useCallback, useRef, forwardRef, Fragment as Fragment$1, useDeferredValue, lazy, Suspense, useTransition, Children, memo, isValidElement, cloneElement } from 'react';
+import parse, { domToReact, Element } from 'html-react-parser';
+import { Spinner as Spinner$1, Box as Box$1 } from 'theme-ui';
+import { uniqueId as uniqueId$3, debounce, cloneDeep, isFunction as isFunction$1 } from 'lodash-es';
+import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, focusOutline, makeStyledComponent, useThemeUI, Label, Progress, Grid, Textarea, Paragraph, Container } from '@apia/theme';
+import { BarLoader } from 'react-spinners';
+import uniqueId$2 from 'lodash-es/uniqueId';
+import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, EventEmitter, useMount, getLabel, getSpecificParent, isChild, useUnmount, StatefulEmitter, shallowEqual as shallowEqual$1, debugDispatcher, customEvents, getDateFormat, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, arrayOrArray } from '@apia/util';
 import usePortal from 'react-cool-portal';
 import { CSSTransition } from 'react-transition-group';
-import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Spinner, Button, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, focusOutline, makeStyledComponent, useThemeUI, Label, Progress, Grid } from '@apia/theme';
 import { uniqueId as uniqueId$1, defaultNotifier, NotificationsList } from '@apia/notifications';
 import ReactFocusLock, { FreeFocusInside } from 'react-focus-lock';
 import { useBreakpointIndex as useBreakpointIndex$1 } from '@theme-ui/match-media';
+import { isIconName, Icon as Icon$1, icons } from '@apia/icons';
 import { useMenuState, ControlledMenu, MenuItem, MenuDivider, SubMenu } from '@szhsin/react-menu';
-import { makeAutoObservable, observable, reaction } from 'mobx';
+import { makeAutoObservable, observable, reaction, makeObservable, toJS, action } from 'mobx';
 import { shallowEqual } from '@apia/store';
-import { isIconName, Icon as Icon$1, icons } from '@apia/icons';
 import AnimateHeight from 'react-animate-height';
 import { useUpdateEffect as useUpdateEffect$1 } from 'ahooks';
 import dayjs from 'dayjs';
 import isFunction from 'lodash-es/isFunction';
 import ReactInputMask from 'react-input-mask';
-import { uniqueId as uniqueId$3, debounce } from 'lodash-es';
 import { observer } from 'mobx-react-lite';
 import { createFAsomeStore } from '@apia/dom-store';
-import { BarLoader } from 'react-spinners';
+import { keyframes } from '@emotion/react';
 
 const AccordionContext = createContext(null);
 const AccordionItemContext = createContext(null);
@@ -32,10 +35,10 @@ const useAccordionContext = () => {
   return context;
 };
 
-var __defProp$h = Object.defineProperty;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$h = (obj, key, value) => {
-  __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$o = Object.defineProperty;
+var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$o = (obj, key, value) => {
+  __defNormalProp$o(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 function makeItemStateSelectorHook(handler) {
@@ -67,10 +70,10 @@ class AccordionHandler {
   constructor(id, props) {
     this.id = id;
     this.props = props;
-    __publicField$h(this, "itemsState", {});
-    __publicField$h(this, "itemsStateListeners", {});
-    __publicField$h(this, "propsListeners", []);
-    __publicField$h(this, "hooks", {
+    __publicField$o(this, "itemsState", {});
+    __publicField$o(this, "itemsStateListeners", {});
+    __publicField$o(this, "propsListeners", []);
+    __publicField$o(this, "hooks", {
       useAccordionContextProvider: () => {
         const Provider = useMemo(
           () => ({ children }) => /* @__PURE__ */ jsx(AccordionContext.Provider, { value: this, children }),
@@ -573,7 +576,6 @@ const DialogHeader = ({
     }
   );
 };
-var DialogHeader$1 = DialogHeader;
 
 const ModalContext = createContext(null);
 function useModalContext() {
@@ -977,7 +979,7 @@ const WindowModal = forwardRef(
                     ),
                     children: [
                       !noHeader && /* @__PURE__ */ jsx(
-                        DialogHeader$1,
+                        DialogHeader,
                         {
                           NavBar,
                           title: innerTitle,
@@ -1006,56 +1008,56 @@ const WindowModal = forwardRef(
   }
 );
 
-var __defProp$g = Object.defineProperty;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$g = (obj, key, value) => {
-  __defNormalProp$g(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$n = Object.defineProperty;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$n = (obj, key, value) => {
+  __defNormalProp$n(obj, key + "" , value);
   return value;
 };
-var __accessCheck$c = (obj, member, msg) => {
+var __accessCheck$d = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$9 = (obj, member, getter) => {
-  __accessCheck$c(obj, member, "read from private field");
+var __privateGet$a = (obj, member, getter) => {
+  __accessCheck$d(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$c = (obj, member, value) => {
+var __privateAdd$d = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateSet$8 = (obj, member, value, setter) => {
-  __accessCheck$c(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  __accessCheck$d(obj, member, "write to private field");
+  member.set(obj, value);
   return value;
 };
 var __privateMethod$3 = (obj, member, method) => {
-  __accessCheck$c(obj, member, "access private method");
+  __accessCheck$d(obj, member, "access private method");
   return method;
 };
 var _isLocked, _onChangeCb, _onDestroyCb, _evaluate, evaluate_fn, _a$1;
 class BodyScrollLocker {
   constructor() {
-    __privateAdd$c(this, _isLocked, false);
-    __privateAdd$c(this, _onChangeCb, () => {
+    __privateAdd$d(this, _isLocked, false);
+    __privateAdd$d(this, _onChangeCb, () => {
     });
-    __privateAdd$c(this, _onDestroyCb, () => {
+    __privateAdd$d(this, _onDestroyCb, () => {
     });
   }
   get isLocked() {
-    return __privateGet$9(this, _isLocked);
+    return __privateGet$a(this, _isLocked);
   }
   destroy() {
-    __privateGet$9(this, _onDestroyCb).call(this);
+    __privateGet$a(this, _onDestroyCb).call(this);
   }
   lock() {
     __privateSet$8(this, _isLocked, true);
-    __privateGet$9(this, _onChangeCb).call(this);
+    __privateGet$a(this, _onChangeCb).call(this);
   }
   unlock() {
     __privateSet$8(this, _isLocked, false);
-    __privateGet$9(this, _onChangeCb).call(this);
+    __privateGet$a(this, _onChangeCb).call(this);
   }
   onChange(cb) {
     __privateSet$8(this, _onChangeCb, cb);
@@ -1073,8 +1075,8 @@ _onChangeCb = new WeakMap();
 _onDestroyCb = new WeakMap();
 const BodyScrollLock = new (_a$1 = class {
   constructor() {
-    __privateAdd$c(this, _evaluate);
-    __publicField$g(this, "lockers", []);
+    __privateAdd$d(this, _evaluate);
+    __publicField$n(this, "lockers", []);
   }
   getLocker() {
     const locker = new BodyScrollLocker();
@@ -1301,7 +1303,7 @@ const StaticModal = forwardRef(
                         "data-variant": `layout.common.modals.${size}`,
                         children: [
                           !noHeader && /* @__PURE__ */ jsx(
-                            DialogHeader$1,
+                            DialogHeader,
                             {
                               className: "modal__header",
                               NavBar,
@@ -1348,7 +1350,8 @@ Modal.displayName = "Modal";
 const OpenModal = (props) => {
   const modalProps = useModal({
     isDefaultOpen: true,
-    onExited: props.onExited
+    onExited: props.onExited,
+    onClose: props.onClose
   });
   const previousOpenProp = usePrevious(props.isOpen);
   if (previousOpenProp.current !== props.isOpen && !props.isOpen) {
@@ -1372,10 +1375,12 @@ const OpenModal = (props) => {
           Confirm,
           {
             ...confirmProps,
-            onConfirm: () => {
+            onConfirm: async () => {
               hasConfirmed.current = true;
-              props.onConfirm?.();
-              modalProps.hide();
+              const res = await props.onConfirm?.();
+              if (res !== false) {
+                modalProps.hide();
+              }
             },
             onCancel: () => {
               modalProps.hide();
@@ -1396,36 +1401,36 @@ const OpenModal = (props) => {
   );
 };
 
-var __defProp$f = Object.defineProperty;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$f = (obj, key, value) => {
-  __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$m = Object.defineProperty;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$m = (obj, key, value) => {
+  __defNormalProp$m(obj, key + "" , value);
   return value;
 };
-var __accessCheck$b = (obj, member, msg) => {
+var __accessCheck$c = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$8 = (obj, member, getter) => {
-  __accessCheck$b(obj, member, "read from private field");
+var __privateGet$9 = (obj, member, getter) => {
+  __accessCheck$c(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$b = (obj, member, value) => {
+var __privateAdd$c = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateSet$7 = (obj, member, value, setter) => {
-  __accessCheck$b(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  __accessCheck$c(obj, member, "write to private field");
+  member.set(obj, value);
   return value;
 };
 var __privateWrapper$2 = (obj, member, setter, getter) => ({
   set _(value) {
-    __privateSet$7(obj, member, value, setter);
+    __privateSet$7(obj, member, value);
   },
   get _() {
-    return __privateGet$8(obj, member, getter);
+    return __privateGet$9(obj, member, getter);
   }
 });
 var _emitter$4, _maxId$1, _useModalsList;
@@ -1437,14 +1442,14 @@ class ApiaUtilModalHandler {
 }
 class ApiaUtilModals {
   constructor() {
-    __privateAdd$b(this, _emitter$4, new EventEmitter());
-    __privateAdd$b(this, _maxId$1, 0);
-    __privateAdd$b(this, _useModalsList, () => {
+    __privateAdd$c(this, _emitter$4, new EventEmitter());
+    __privateAdd$c(this, _maxId$1, 0);
+    __privateAdd$c(this, _useModalsList, () => {
       const [modals, setModals] = useState(
         []
       );
       useMount(() => {
-        const u1 = __privateGet$8(this, _emitter$4).on("open", (ev) => {
+        const u1 = __privateGet$9(this, _emitter$4).on("open", (ev) => {
           setModals((current) => [
             ...current,
             {
@@ -1459,12 +1464,12 @@ class ApiaUtilModals {
             }
           ]);
         });
-        const u2 = __privateGet$8(this, _emitter$4).on("closeAll", () => {
+        const u2 = __privateGet$9(this, _emitter$4).on("closeAll", () => {
           setModals(
             (current) => current.map((modal) => ({ ...modal, isOpen: false }))
           );
         });
-        const u3 = __privateGet$8(this, _emitter$4).on("close", (modalId) => {
+        const u3 = __privateGet$9(this, _emitter$4).on("close", (modalId) => {
           setModals(
             (current) => current.map(
               (modal) => modal.id === modalId ? { ...modal, isOpen: false } : modal
@@ -1479,8 +1484,8 @@ class ApiaUtilModals {
       });
       return modals;
     });
-    __publicField$f(this, "Component", () => {
-      const modals = __privateGet$8(this, _useModalsList).call(this);
+    __publicField$m(this, "Component", () => {
+      const modals = __privateGet$9(this, _useModalsList).call(this);
       return /* @__PURE__ */ jsx(Fragment, { children: modals.map((current) => /* @__PURE__ */ jsx(OpenModal, { ...current }, current.id)) });
     });
     document.addEventListener("openModal", (event) => {
@@ -1488,11 +1493,14 @@ class ApiaUtilModals {
       this.open(cevent.detail);
     });
   }
+  close(id) {
+    __privateGet$9(this, _emitter$4).emit("close", id);
+  }
   open(props) {
     const id = props.id ?? `modal_${__privateWrapper$2(this, _maxId$1)._++}`;
-    __privateGet$8(this, _emitter$4).emit("open", { ...props, id });
+    __privateGet$9(this, _emitter$4).emit("open", { ...props, id });
     return new ApiaUtilModalHandler(id, () => {
-      __privateGet$8(this, _emitter$4).emit("close", id);
+      __privateGet$9(this, _emitter$4).emit("close", id);
     });
   }
 }
@@ -1500,29 +1508,29 @@ _emitter$4 = new WeakMap();
 _maxId$1 = new WeakMap();
 _useModalsList = new WeakMap();
 
-var __defProp$e = Object.defineProperty;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$e = (obj, key, value) => {
-  __defNormalProp$e(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$l = Object.defineProperty;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$l = (obj, key, value) => {
+  __defNormalProp$l(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class ApiaUtilNotifications {
   constructor() {
-    __publicField$e(this, "close", (id) => {
+    __publicField$l(this, "close", (id) => {
       defaultNotifier.close(id);
     });
-    __publicField$e(this, "closeAll", () => {
+    __publicField$l(this, "closeAll", () => {
       defaultNotifier.closeAll();
     });
-    __publicField$e(this, "notify", (notification) => {
+    __publicField$l(this, "notify", (notification) => {
       defaultNotifier.notify({
         ...notification,
         type: notification.type ?? "warning"
       });
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    __publicField$e(this, "useSelector", (selector) => defaultNotifier.useSelector(selector));
-    __publicField$e(this, "Component", () => {
+    __publicField$l(this, "useSelector", (selector) => defaultNotifier.useSelector(selector));
+    __publicField$l(this, "Component", () => {
       return /* @__PURE__ */ jsx(NotificationsList, {});
     });
   }
@@ -1615,7 +1623,6 @@ const ContextMenu = observer(
     );
   }
 );
-var ContextMenu$1 = ContextMenu;
 
 function makeIcon(name) {
   return function IconComponent() {
@@ -1644,20 +1651,50 @@ const DefaultTabsLabelRenderer = observer(
       },
       [controller, tab.id]
     );
+    const handleMouseDown = React__default.useCallback(
+      (ev) => {
+        if (ev.button === 1) {
+          tab.close();
+        } else if (ev.button === 0)
+          tab.open();
+      },
+      [tab]
+    );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      tab.state.isIconTab ? /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          className: "tabs__item__button",
-          as: "div",
-          icon: tab.state.icon,
-          variant: "null",
-          iconSize: "Sm",
-          size: "Lg"
-        }
-      ) : /* @__PURE__ */ jsxs(SimpleButton, { className: "tabs__item__button", as: "div", variant: "null", children: [
-        /* @__PURE__ */ jsx(ActualIcon, {}),
-        tab.state.label
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        tab.controller.state.isMultiple && /* @__PURE__ */ jsx(
+          Checkbox$1,
+          {
+            onChange: (ev) => {
+              tab.toggle(ev.target.checked);
+            },
+            checked: tab.state.isOpen
+          }
+        ),
+        tab.state.isIconTab ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onMouseDown: handleMouseDown,
+            className: "tabs__item__button",
+            as: "div",
+            icon: tab.state.icon,
+            variant: "null",
+            iconSize: "Sm",
+            size: "Lg"
+          }
+        ) : /* @__PURE__ */ jsxs(
+          SimpleButton,
+          {
+            onMouseDown: handleMouseDown,
+            className: "tabs__item__button",
+            as: "div",
+            variant: "null",
+            children: [
+              /* @__PURE__ */ jsx(ActualIcon, {}),
+              tab.state.label
+            ]
+          }
+        )
       ] }),
       tab.state.isClosable && /* @__PURE__ */ jsx(
         IconButton,
@@ -1706,54 +1743,50 @@ const Item = observer(({ tab }) => {
       });
     }
   }, [tab.state.isOpen]);
-  const buttonProps = {
+  const boxProps = {
     className: `tabs__item__wrapper ${tab.state.isOpen ? "open" : ""} ${tab.state.isDisabled ? "disabled" : ""}`,
     title: tab.state.title ?? tab.state.label,
-    onMouseDown: React__default.useCallback(
-      (ev) => {
-        if (ev.button === 1) {
-          tab.close();
-        } else if (ev.button === 0)
-          tab.open();
-      },
-      [tab]
-    ),
     "aria-controls": `tabpanel-${tab.controller.id}-${tab.state.id}`,
     "aria-selected": tab.state.isOpen ?? false,
     id: `tab-${tab.controller.id}-${tab.id}`,
-    tabIndex: tab.state.isFocused ? 0 : -1,
+    tabIndex: tab.state.isOpen ? 0 : -1,
     role: "tab",
     variant: "inherit"
   };
-  return /* @__PURE__ */ jsx(SimpleButton, { "data-id": tab.id, ref, ...buttonProps, children: /* @__PURE__ */ jsx(Renderer, { tab }) });
+  return /* @__PURE__ */ jsx(Box, { "data-id": tab.id, ref, ...boxProps, children: /* @__PURE__ */ jsx(Renderer, { tab }) });
 });
-var Item$1 = Item;
+
+function useShowScrollButtons() {
+  const [showScrollButtons, setShowScrollButtons] = useState(false);
+  const [ref, setRef] = useState(null);
+  const controller = useTabsContext();
+  useEffect(() => {
+    if (ref && controller) {
+      const observer = new MutationObserver(([{ addedNodes }]) => {
+        const fixedTabsElement = ref.querySelector(".tabsList__fixedTabs");
+        const hasFixedTabsScroll = (fixedTabsElement?.clientWidth ?? 0) < (fixedTabsElement?.scrollWidth ?? 0);
+        const nonFixedTabsElement = ref.querySelector(".tabs__list");
+        const hasFixedNonTabsScroll = (nonFixedTabsElement?.clientWidth ?? 0) < (nonFixedTabsElement?.scrollWidth ?? 0);
+        setShowScrollButtons(hasFixedTabsScroll || hasFixedNonTabsScroll);
+        if (addedNodes) {
+          ref.querySelector(".tabs__list").scrollLeft = 9999999;
+        }
+      });
+      observer.observe(ref, { childList: true, subtree: true });
+      return () => {
+        observer.disconnect();
+      };
+    }
+    return () => {
+    };
+  }, [controller, ref]);
+  return [showScrollButtons, setRef];
+}
 
 const TabsList = observer(
   ({ arrowsBehavior = "focus" }) => {
     const controller = useTabsContext();
-    const [showScrollButtons, setShowScrollButtons] = React__default.useState(false);
-    const [ref, setRef] = React__default.useState(null);
-    React__default.useEffect(() => {
-      if (ref && controller) {
-        const observer2 = new MutationObserver(([{ addedNodes }]) => {
-          const fixedTabsElement = ref.querySelector(".tabsList__fixedTabs");
-          const hasFixedTabsScroll = (fixedTabsElement?.clientWidth ?? 0) < (fixedTabsElement?.scrollWidth ?? 0);
-          const nonFixedTabsElement = ref.querySelector(".tabs__list");
-          const hasFixedNonTabsScroll = (nonFixedTabsElement?.clientWidth ?? 0) < (nonFixedTabsElement?.scrollWidth ?? 0);
-          setShowScrollButtons(hasFixedTabsScroll || hasFixedNonTabsScroll);
-          if (addedNodes) {
-            ref.querySelector(".tabs__list").scrollLeft = 9999999;
-          }
-        });
-        observer2.observe(ref, { childList: true, subtree: true });
-        return () => {
-          observer2.disconnect();
-        };
-      }
-      return () => {
-      };
-    }, [controller, ref]);
+    const [showScrollButtons, setRef] = useShowScrollButtons();
     const onClickPrev = React__default.useCallback(() => {
       if (arrowsBehavior === "focus")
         controller?.focusPreviousTab();
@@ -1785,9 +1818,9 @@ const TabsList = observer(
         ...getVariant("layout.common.tabs.primary"),
         ref: setRef,
         children: [
-          /* @__PURE__ */ jsx(Box, { className: "tabsList__fixedTabs", children: fixedTabs.map((current) => /* @__PURE__ */ jsx(Item$1, { tab: current }, current.id)) }),
+          /* @__PURE__ */ jsx(Box, { className: "tabsList__fixedTabs", children: fixedTabs.map((current) => /* @__PURE__ */ jsx(Item, { tab: current }, current.id)) }),
           /* @__PURE__ */ jsx(
-            ContextMenu$1,
+            ContextMenu,
             {
               anchorPoint,
               isOpen,
@@ -1812,7 +1845,7 @@ const TabsList = observer(
                   setIsOpen(true);
                 }
               }, []),
-              children: nonFixedTabs.map((current) => /* @__PURE__ */ jsx(Item$1, { tab: current }, current.id))
+              children: nonFixedTabs.map((current) => /* @__PURE__ */ jsx(Item, { tab: current }, current.id))
             }
           ),
           showScrollButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1847,23 +1880,23 @@ const TabsList = observer(
   }
 );
 
-var __defProp$d = Object.defineProperty;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$d = (obj, key, value) => {
-  __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$k = Object.defineProperty;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$k = (obj, key, value) => {
+  __defNormalProp$k(obj, key + "" , value);
   return value;
 };
-var __accessCheck$a = (obj, member, msg) => {
+var __accessCheck$b = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateAdd$a = (obj, member, value) => {
+var __privateAdd$b = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateMethod$2 = (obj, member, method) => {
-  __accessCheck$a(obj, member, "access private method");
+  __accessCheck$b(obj, member, "access private method");
   return method;
 };
 var _innerAppend, innerAppend_fn;
@@ -1885,18 +1918,24 @@ class Tab {
   open() {
     this.controller.openTab(this.id);
   }
+  toggle(isShown) {
+    this.controller.toggleTab(this.state.id, isShown);
+  }
 }
 class TabsController {
   constructor(id, props) {
     this.id = id;
     this.props = props;
-    __privateAdd$a(this, _innerAppend);
-    __publicField$d(this, "state", {
-      openTabs: /* @__PURE__ */ new Set(),
+    __privateAdd$b(this, _innerAppend);
+    __publicField$k(this, "state", {
+      isMultiple: false,
+      openTabsHistory: /* @__PURE__ */ new Set(),
       tabs: /* @__PURE__ */ new Map(),
-      timestamp: 0
+      timestamp: 0,
+      showAtLeastOneTab: false
     });
-    props.initialTabs?.forEach(this.append.bind(this));
+    Object.assign(this.state, props.initialState ?? {});
+    props.initialTabs?.forEach((tab) => this.append(tab));
     if (props.initialTabs && props.initialTabs.length > 0)
       this.focusTab(props.initialTabs[0].id);
     makeAutoObservable(this);
@@ -1908,7 +1947,7 @@ class TabsController {
    * Es el tab que está abierto
    */
   get activeTab() {
-    const tabs = [...this.state.openTabs];
+    const tabs = [...this.state.openTabsHistory];
     return tabs[tabs.length - 1];
   }
   getTab(id) {
@@ -1920,7 +1959,7 @@ class TabsController {
   /**
    * Obviamente agrega un tab al listado de tabs
    */
-  append(tab) {
+  append(tab, closeOthers) {
     if (this.getTab(tab.id)) {
       void ApiaUtil.instance.dialogs.confirm({
         children: getLabel("msgTabIsOpen").text,
@@ -1931,10 +1970,10 @@ class TabsController {
             ...tab,
             id: `${tab.id}_${uniqueId$2()}`,
             additionalProps: tab.additionalProps ?? {}
-          });
+          }, closeOthers);
       });
     } else
-      __privateMethod$2(this, _innerAppend, innerAppend_fn).call(this, tab);
+      __privateMethod$2(this, _innerAppend, innerAppend_fn).call(this, tab, closeOthers);
   }
   async closeAll(closeFixedTabsAsWell = false, force = false) {
     for (const tab of this.tabsList) {
@@ -1991,13 +2030,27 @@ class TabsController {
             return false;
         }
       }
-      this.state.openTabs.delete(tab);
-      this.getActiveTab().open();
+      this.state.openTabsHistory.delete(tab);
+      this.getActiveTab()?.open();
       this.state.tabs.delete(tab.id);
       this.props?.onCloseTab?.(tab);
     }
     return true;
   }
+  checkAtLeastOneOpen() {
+    if (this.state.showAtLeastOneTab && !this.tabsList.find((c) => c.state.isOpen)) {
+      this.openTab(this.tabsList[0].id);
+    }
+  }
+  async toggleTab(tabId, isShown) {
+    const willBeOpen = isShown || !this.getTab(tabId)?.state.isOpen;
+    if (willBeOpen) {
+      this.openTab(tabId, false);
+    } else {
+      if (!this.state.showAtLeastOneTab || this.tabsList.find((c) => c.state.isOpen && c.id !== tabId))
+        this.getTab(tabId).state.isOpen = false;
+    }
+  }
   focusNextTab() {
     const tabsList = this.tabsList;
     const focusedIndex = tabsList.findIndex(
@@ -2020,8 +2073,8 @@ class TabsController {
     this.focusTab(tabsList[newFocusIndex].id);
     return tabsList[newFocusIndex];
   }
-  focusTab(tabId) {
-    this.openTab(tabId);
+  focusTab(tabId, closeOthers) {
+    this.openTab(tabId, closeOthers);
   }
   getTabElement(tabId) {
     return document.querySelector(`#tabpanel-${this.id}-${tabId}`);
@@ -2105,39 +2158,64 @@ class TabsController {
   /**
    * Se utiliza para hacer que el tab aparezca visible en el listado
    */
-  openTab(tabId) {
+  openTab(tabId, closeOthers) {
     const tab = this.getTab(tabId);
     if (!tab) {
       console.warn(`There is no tab with such id: ${tabId}`);
     } else {
       try {
-        this.state.tabs.forEach((c) => {
-          c.state.isOpen = false;
-        });
+        if (closeOthers !== false) {
+          this.state.tabs.forEach((c) => {
+            c.state.isOpen = false;
+          });
+        }
       } catch (e) {
       }
       tab.state.isOpen = true;
+      tab.state.isFocused = true;
+      document.querySelector(`.tabs__item__wrapper[data-id="${tab.id}"]`)?.focus();
       tab.state.onFocus?.(tab);
-      if (this.state.openTabs.has(tab)) {
-        this.state.openTabs.delete(tab);
+      if (this.state.openTabsHistory.has(tab)) {
+        this.state.openTabsHistory.delete(tab);
       }
-      this.state.openTabs.add(tab);
+      this.state.openTabsHistory.add(tab);
+      this.checkAtLeastOneOpen();
     }
   }
 }
 _innerAppend = new WeakSet();
-innerAppend_fn = function(tab) {
+innerAppend_fn = function(tab, closeOthers = false) {
   this.state.tabs.set(tab.id, new Tab(tab, this));
   if (tab.isOpen) {
-    this.openTab(tab.id);
-    this.focusTab(tab.id);
+    this.openTab(tab.id, closeOthers);
+    this.focusTab(tab.id, closeOthers);
   }
+  this.checkAtLeastOneOpen();
 };
 
 const InnerRenderer = observer(({ tab }) => {
   const state = tab.state;
   const Render = useDeferredValue(state.content);
-  return /* @__PURE__ */ jsxs(
+  let accordion = null;
+  const tabContent = /* @__PURE__ */ jsxs(Box, { className: "tabs__Item", sx: { height: "100%" }, children: [
+    /* @__PURE__ */ jsx(Render, { tab }),
+    state.isLoading && /* @__PURE__ */ jsx(Box, { className: "tabs__content__spinner__wrapper", children: /* @__PURE__ */ jsx(LoaderSpinner, {}) })
+  ] });
+  if (tab.state.asAccordion)
+    accordion = /* @__PURE__ */ jsx(
+      AccordionItem,
+      {
+        id: tab.id,
+        defaultExpanded: true,
+        buttonProps: {
+          ariaLabel: tab.state.label,
+          label: tab.state.label
+        },
+        children: tabContent
+      },
+      tab.id
+    );
+  return /* @__PURE__ */ jsx(
     Box,
     {
       "aria-hidden": !state.isOpen,
@@ -2146,10 +2224,10 @@ const InnerRenderer = observer(({ tab }) => {
       "data-id": state.id,
       id: `tabpanel-${tab.controller.id}-${state.id}`,
       role: "tabpanel",
-      children: [
-        /* @__PURE__ */ jsx(Render, { tab }),
-        state.isLoading && /* @__PURE__ */ jsx(Box, { className: "tabs__content__spinner__wrapper", children: /* @__PURE__ */ jsx(Spinner, {}) })
-      ]
+      sx: {
+        display: state.isOpen ? void 0 : "none"
+      },
+      children: accordion ?? tabContent
     },
     state.id
   );
@@ -2159,7 +2237,7 @@ const TabsContent = observer((props) => {
   if (!controller)
     return null;
   return /* @__PURE__ */ jsx(
-    Box,
+    Accordion,
     {
       className: "tabs__content__wrapper",
       ...getVariant("layout.common.tabs.primary.content"),
@@ -2176,13 +2254,15 @@ const NonForwardedTabs = ({
   getController,
   initialTabs,
   orientation,
+  initialState,
   ...props
 }, ref) => {
   const [handler, setHandler] = React__default.useState(null);
   useMount(() => {
     const newHandler = new TabsController(String(id), {
       initialTabs,
-      orientation: orientation || "horizontal"
+      orientation: orientation || "horizontal",
+      initialState
     });
     setHandler(newHandler);
     getController?.(newHandler);
@@ -2536,54 +2616,54 @@ const AlertModal = ({ children, onClose, title }) => {
   );
 };
 
-var __defProp$c = Object.defineProperty;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$c = (obj, key, value) => {
-  __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$j = Object.defineProperty;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$j = (obj, key, value) => {
+  __defNormalProp$j(obj, key + "" , value);
   return value;
 };
-var __accessCheck$9 = (obj, member, msg) => {
+var __accessCheck$a = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$7 = (obj, member, getter) => {
-  __accessCheck$9(obj, member, "read from private field");
+var __privateGet$8 = (obj, member, getter) => {
+  __accessCheck$a(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$9 = (obj, member, value) => {
+var __privateAdd$a = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateSet$6 = (obj, member, value, setter) => {
-  __accessCheck$9(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  __accessCheck$a(obj, member, "write to private field");
+  member.set(obj, value);
   return value;
 };
 var __privateWrapper$1 = (obj, member, setter, getter) => ({
   set _(value) {
-    __privateSet$6(obj, member, value, setter);
+    __privateSet$6(obj, member, value);
   },
   get _() {
-    return __privateGet$7(obj, member, getter);
+    return __privateGet$8(obj, member, getter);
   }
 });
 var _emitter$3, _maxIdAlert, _maxIdConfirm;
 class ApiaUtilDialogs {
   constructor() {
-    __privateAdd$9(this, _emitter$3, new EventEmitter());
-    __privateAdd$9(this, _maxIdAlert, 0);
-    __privateAdd$9(this, _maxIdConfirm, 0);
-    __publicField$c(this, "Component", () => {
+    __privateAdd$a(this, _emitter$3, new EventEmitter());
+    __privateAdd$a(this, _maxIdAlert, 0);
+    __privateAdd$a(this, _maxIdConfirm, 0);
+    __publicField$j(this, "Component", () => {
       const [confirmDialogs, setConfirmDialogs] = useState([]);
       const [alertsDialogs, setAlertsDialogs] = useState(
         []
       );
       useMount(() => {
-        const unsuscribe1 = __privateGet$7(this, _emitter$3).on("alert", (ev) => {
+        const unsuscribe1 = __privateGet$8(this, _emitter$3).on("alert", (ev) => {
           setAlertsDialogs((current) => [...current, ev]);
         });
-        const unsuscribe2 = __privateGet$7(this, _emitter$3).on("confirm", (ev) => {
+        const unsuscribe2 = __privateGet$8(this, _emitter$3).on("confirm", (ev) => {
           setConfirmDialogs((current) => [...current, ev]);
         });
         return () => {
@@ -2621,7 +2701,7 @@ class ApiaUtilDialogs {
   }
   alert(props) {
     return new Promise((resolve) => {
-      __privateGet$7(this, _emitter$3).emit("alert", {
+      __privateGet$8(this, _emitter$3).emit("alert", {
         ...props,
         onClose: () => resolve(),
         id: `confirm${__privateWrapper$1(this, _maxIdAlert)._++}`
@@ -2630,7 +2710,7 @@ class ApiaUtilDialogs {
   }
   confirm(props) {
     return new Promise((resolve) => {
-      __privateGet$7(this, _emitter$3).emit("confirm", {
+      __privateGet$8(this, _emitter$3).emit("confirm", {
         ...props,
         id: `confirm${__privateWrapper$1(this, _maxIdConfirm)._++}`,
         onCancel: () => resolve(false),
@@ -2694,31 +2774,31 @@ function parseStringToApiaNumber(value) {
   )}${decimalsString.length > 0 ? `${decimalSeparator$1}${decimalsString}` : ""}`;
 }
 
-var __accessCheck$8 = (obj, member, msg) => {
+var __accessCheck$9 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateAdd$8 = (obj, member, value) => {
+var __privateAdd$9 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateMethod$1 = (obj, member, method) => {
-  __accessCheck$8(obj, member, "access private method");
+  __accessCheck$9(obj, member, "access private method");
   return method;
 };
 var _parseString, parseString_fn, _findDelimiter, findDelimiter_fn, _parseCellValue, parseCellValue_fn;
 const delimiters = [",", ";", "	", "|"];
 class ApiaUtilParsers {
   constructor() {
-    __privateAdd$8(this, _parseString);
+    __privateAdd$9(this, _parseString);
     /**
      * Inspecciona las primeras filas de un array de strings, en búsqueda del mejor delimitador
      * para convertir esos strings a array de datos, que serán el resultado de haber interpretado
      * un documento CSV.
      */
-    __privateAdd$8(this, _findDelimiter);
-    __privateAdd$8(this, _parseCellValue);
+    __privateAdd$9(this, _findDelimiter);
+    __privateAdd$9(this, _parseCellValue);
   }
   /**
    * Toma un número sin separadores de miles y lo devuelve en el formato
@@ -2856,10 +2936,10 @@ parseCellValue_fn = function(cellValue) {
   return cellValue.match(/^\s*"?([^"]+)"?[\s\r\n]*$/)?.[1] ?? cellValue;
 };
 
-var __defProp$b = Object.defineProperty;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$b = (obj, key, value) => {
-  __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$i = Object.defineProperty;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$i = (obj, key, value) => {
+  __defNormalProp$i(obj, key + "" , value);
   return value;
 };
 let maxId = 0;
@@ -2867,32 +2947,32 @@ class ApiaUtilTooltip {
   constructor(props, close) {
     this.props = props;
     this.close = close;
-    __publicField$b(this, "id", `tooltip__${maxId++}`);
+    __publicField$i(this, "id", `tooltip__${maxId++}`);
   }
 }
 
-var __defProp$a = Object.defineProperty;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$a = (obj, key, value) => {
-  __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$h = Object.defineProperty;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$h = (obj, key, value) => {
+  __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$7 = (obj, member, msg) => {
+var __accessCheck$8 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$6 = (obj, member, getter) => {
-  __accessCheck$7(obj, member, "read from private field");
+var __privateGet$7 = (obj, member, getter) => {
+  __accessCheck$8(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$7 = (obj, member, value) => {
+var __privateAdd$8 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateSet$5 = (obj, member, value, setter) => {
-  __accessCheck$7(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  __accessCheck$8(obj, member, "write to private field");
+  member.set(obj, value);
   return value;
 };
 var _timeout, _tooltipTimeout, _unsuscribe, _tooltipController, _tooltip;
@@ -2904,30 +2984,30 @@ document?.addEventListener("mousemove", (ev) => {
 class AutomaticTooltip {
   constructor(tooltip = null, handler) {
     this.handler = handler;
-    __privateAdd$7(this, _timeout, 500);
-    __privateAdd$7(this, _tooltipTimeout, 0);
-    __privateAdd$7(this, _unsuscribe, null);
-    __privateAdd$7(this, _tooltipController, null);
-    __publicField$a(this, "ref", (el) => {
+    __privateAdd$8(this, _timeout, 500);
+    __privateAdd$8(this, _tooltipTimeout, 0);
+    __privateAdd$8(this, _unsuscribe, null);
+    __privateAdd$8(this, _tooltipController, null);
+    __publicField$h(this, "ref", (el) => {
       var _a, _b;
-      (_a = __privateGet$6(this, _unsuscribe)) == null ? void 0 : _a.call(this);
+      (_a = __privateGet$7(this, _unsuscribe)) == null ? void 0 : _a.call(this);
       const listener = () => {
-        clearTimeout(__privateGet$6(this, _tooltipTimeout));
+        clearTimeout(__privateGet$7(this, _tooltipTimeout));
         __privateSet$5(this, _tooltipTimeout, setTimeout(() => {
-          if (__privateGet$6(this, _tooltip)?.children)
+          if (__privateGet$7(this, _tooltip)?.children)
             __privateSet$5(this, _tooltipController, this.handler.open({
               closeOnMouseLeaveTooltip: true,
               closeOnEscape: true,
               closeOnScrollOut: true,
-              ...__privateGet$6(this, _tooltip),
+              ...__privateGet$7(this, _tooltip),
               anchorPoint: { left: x$1 + 3, top: y$1 + 3 }
             }));
-        }, __privateGet$6(this, _timeout)));
+        }, __privateGet$7(this, _timeout)));
       };
       const reset = () => {
-        clearTimeout(__privateGet$6(this, _tooltipTimeout));
-        if (__privateGet$6(this, _tooltip)?.closeOnMouseLeaveAttachedElement) {
-          __privateGet$6(this, _tooltipController)?.close();
+        clearTimeout(__privateGet$7(this, _tooltipTimeout));
+        if (__privateGet$7(this, _tooltip)?.closeOnMouseLeaveAttachedElement) {
+          __privateGet$7(this, _tooltipController)?.close();
         }
       };
       if (el) {
@@ -2938,12 +3018,12 @@ class AutomaticTooltip {
           el.removeEventListener("mouseleave", reset);
         });
       } else {
-        (_b = __privateGet$6(this, _unsuscribe)) == null ? void 0 : _b.call(this);
+        (_b = __privateGet$7(this, _unsuscribe)) == null ? void 0 : _b.call(this);
         reset();
       }
     });
-    __privateAdd$7(this, _tooltip, null);
-    __publicField$a(this, "update", (tooltip) => {
+    __privateAdd$8(this, _tooltip, null);
+    __publicField$h(this, "update", (tooltip) => {
       __privateSet$5(this, _tooltip, tooltip);
     });
     __privateSet$5(this, _tooltip, tooltip);
@@ -3053,19 +3133,23 @@ function calculateTooltipPosition({
     const availableTopSpace = actualAnchorPoint.top;
     const availableLeftSpace = actualAnchorPoint.left;
     const availableRightSpace = window.innerWidth - actualAnchorPoint.left;
-    const isEnoughToRight = (minSize?.width ?? 0) <= availableRightSpace;
-    const isEnoughToLeft = (minSize?.width ?? 0) <= availableLeftSpace;
-    const isEnoughToBottom = (minSize?.height ?? 0) <= availableBottomSpace;
-    const isEnoughToTop = (minSize?.height ?? 0) <= availableTopSpace;
+    const isEnoughToRight = ((preferredSize?.width !== "auto" ? preferredSize?.width : void 0) ?? minSize?.width ?? 0) <= availableRightSpace;
+    const isEnoughToLeft = ((preferredSize?.width !== "auto" ? preferredSize?.width : void 0) ?? minSize?.width ?? 0) <= availableLeftSpace;
+    const isEnoughToBottom = ((preferredSize?.height !== "auto" ? preferredSize?.height : void 0) ?? minSize?.height ?? 0) <= availableBottomSpace;
+    const isEnoughToTop = ((preferredSize?.height !== "auto" ? preferredSize?.height : void 0) ?? minSize?.height ?? 0) <= availableTopSpace;
     const preferredWidth = preferredSize.width === "auto" ? Infinity : preferredSize.width;
     const preferredHeight = preferredSize.height === "auto" ? Infinity : preferredSize.height;
     const position = {
       "& > *": {
         width: "100%",
-        height: "100%"
+        height: "100%",
+        overflow: "auto"
       },
-      width: preferredSize.width === "auto" ? "auto" : "100%",
-      height: preferredSize.height === "auto" ? "auto" : "100%"
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      width: preferredSize.width === "auto" ? "auto" : void 0,
+      height: preferredSize.height === "auto" ? "auto" : void 0
     };
     if (preferredOrientationX === "left") {
       if (isEnoughToLeft) {
@@ -3291,21 +3375,21 @@ const Tooltip = ({
   );
 };
 
-var __defProp$9 = Object.defineProperty;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$9 = (obj, key, value) => {
-  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$g = Object.defineProperty;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$g = (obj, key, value) => {
+  __defNormalProp$g(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$6 = (obj, member, msg) => {
+var __accessCheck$7 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$5 = (obj, member, getter) => {
-  __accessCheck$6(obj, member, "read from private field");
+var __privateGet$6 = (obj, member, getter) => {
+  __accessCheck$7(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$6 = (obj, member, value) => {
+var __privateAdd$7 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
@@ -3313,16 +3397,16 @@ var __privateAdd$6 = (obj, member, value) => {
 var _emitter$2, _shoutChangedList;
 class ApiaUtilTooltips {
   constructor() {
-    __privateAdd$6(this, _emitter$2, new EventEmitter());
-    __publicField$9(this, "tooltips", []);
-    __privateAdd$6(this, _shoutChangedList, () => {
-      __privateGet$5(this, _emitter$2).emit("changedList", [...this.tooltips]);
+    __privateAdd$7(this, _emitter$2, new EventEmitter());
+    __publicField$g(this, "tooltips", []);
+    __privateAdd$7(this, _shoutChangedList, () => {
+      __privateGet$6(this, _emitter$2).emit("changedList", [...this.tooltips]);
     });
     /**
      * Permite crear un tooltip que se abrirá automáticamente al estar parado
      * sobre un elemento durante 300ms
      */
-    __publicField$9(this, "useHover", (tooltip) => {
+    __publicField$g(this, "useHover", (tooltip) => {
       let tt = void 0;
       tt = useMemo(() => {
         tt?.ref(null);
@@ -3333,15 +3417,15 @@ class ApiaUtilTooltips {
       });
       return tt;
     });
-    __publicField$9(this, "close", (id) => {
+    __publicField$g(this, "close", (id) => {
       this.tooltips = this.tooltips.filter((current) => current.id !== id);
-      __privateGet$5(this, _shoutChangedList).call(this);
+      __privateGet$6(this, _shoutChangedList).call(this);
     });
-    __publicField$9(this, "closeAll", () => {
+    __publicField$g(this, "closeAll", () => {
       this.tooltips = [];
-      __privateGet$5(this, _shoutChangedList).call(this);
+      __privateGet$6(this, _shoutChangedList).call(this);
     });
-    __publicField$9(this, "open", (tooltip) => {
+    __publicField$g(this, "open", (tooltip) => {
       const controller = new ApiaUtilTooltip(tooltip, () => {
         this.close(controller.id);
         controller.props.onClose?.();
@@ -3351,13 +3435,13 @@ class ApiaUtilTooltips {
       } else {
         this.tooltips = [...this.tooltips, controller];
       }
-      __privateGet$5(this, _shoutChangedList).call(this);
+      __privateGet$6(this, _shoutChangedList).call(this);
       return controller;
     });
-    __publicField$9(this, "Component", () => {
+    __publicField$g(this, "Component", () => {
       const [tooltips, setTooltips] = useState(this.tooltips);
       useMount(() => {
-        const unsuscribeToList = __privateGet$5(this, _emitter$2).on("changedList", (ev) => {
+        const unsuscribeToList = __privateGet$6(this, _emitter$2).on("changedList", (ev) => {
           setTooltips(ev);
         });
         return () => {
@@ -3382,7 +3466,7 @@ class ApiaUtilTooltips {
         this.tooltips = this.tooltips.filter(
           (current) => current.props.closeOnEscape === false
         );
-        __privateGet$5(this, _shoutChangedList).call(this);
+        __privateGet$6(this, _shoutChangedList).call(this);
       }
     });
   }
@@ -3390,36 +3474,36 @@ class ApiaUtilTooltips {
 _emitter$2 = new WeakMap();
 _shoutChangedList = new WeakMap();
 
-var __defProp$8 = Object.defineProperty;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$8 = (obj, key, value) => {
-  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$f = Object.defineProperty;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$f = (obj, key, value) => {
+  __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$5 = (obj, member, msg) => {
+var __accessCheck$6 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$4 = (obj, member, getter) => {
-  __accessCheck$5(obj, member, "read from private field");
+var __privateGet$5 = (obj, member, getter) => {
+  __accessCheck$6(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$5 = (obj, member, value) => {
+var __privateAdd$6 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateSet$4 = (obj, member, value, setter) => {
-  __accessCheck$5(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  __accessCheck$6(obj, member, "write to private field");
+  member.set(obj, value);
   return value;
 };
 var __privateWrapper = (obj, member, setter, getter) => ({
   set _(value) {
-    __privateSet$4(obj, member, value, setter);
+    __privateSet$4(obj, member, value);
   },
   get _() {
-    return __privateGet$4(obj, member, getter);
+    return __privateGet$5(obj, member, getter);
   }
 });
 var _emitter$1, _items$1, _hooks, _maxId, _RenderMenu;
@@ -3428,14 +3512,14 @@ function isSubmenu(item) {
 }
 class ApiaUtilMenu {
   constructor() {
-    __privateAdd$5(this, _emitter$1, new EventEmitter());
-    __privateAdd$5(this, _items$1, []);
-    __publicField$8(this, "menuProps", null);
-    __privateAdd$5(this, _hooks, {
+    __privateAdd$6(this, _emitter$1, new EventEmitter());
+    __privateAdd$6(this, _items$1, []);
+    __publicField$f(this, "menuProps", null);
+    __privateAdd$6(this, _hooks, {
       useIsOpen: () => {
         const [isOpen, setIsOpen] = useState(false);
         useMount(() => {
-          return __privateGet$4(this, _emitter$1).on("toggle", setIsOpen);
+          return __privateGet$5(this, _emitter$1).on("toggle", setIsOpen);
         });
         return [
           isOpen,
@@ -3445,30 +3529,35 @@ class ApiaUtilMenu {
         ];
       }
     });
-    __publicField$8(this, "close", () => {
-      __privateGet$4(this, _emitter$1).emit("toggle", false);
+    __publicField$f(this, "close", () => {
+      __privateGet$5(this, _emitter$1).emit("toggle", false);
     });
-    __publicField$8(this, "open", ({
+    __publicField$f(this, "open", ({
       menuProps,
       items
     }) => {
       __privateSet$4(this, _items$1, items);
       this.menuProps = menuProps;
-      __privateGet$4(this, _emitter$1).emit("toggle", true);
+      __privateGet$5(this, _emitter$1).emit("toggle", true);
     });
-    __privateAdd$5(this, _maxId, 0);
-    __privateAdd$5(this, _RenderMenu, (submenu) => {
+    __privateAdd$6(this, _maxId, 0);
+    __privateAdd$6(this, _RenderMenu, (submenu) => {
       return /* @__PURE__ */ jsx(Fragment, { children: submenu.items.map((current, i) => {
         if (current === "separator")
           return /* @__PURE__ */ jsx(MenuDivider, {}, `separator${i}`);
         if (isSubmenu(current)) {
-          return /* @__PURE__ */ jsx(SubMenu, { label: current.label, children: __privateGet$4(this, _RenderMenu).call(this, current) }, `submenu${__privateWrapper(this, _maxId)._++}`);
+          return /* @__PURE__ */ jsx(SubMenu, { label: current.label, children: __privateGet$5(this, _RenderMenu).call(this, current) }, `submenu${__privateWrapper(this, _maxId)._++}`);
         }
-        return /* @__PURE__ */ createElement(MenuItem, { ...current, key: current.key });
+        const children = current.icon ? /* @__PURE__ */ jsxs(Box, { className: "withIcon", children: [
+          /* @__PURE__ */ jsx(Icon$1, { name: current.icon, title: current.title }),
+          " ",
+          current.children
+        ] }) : current.children;
+        return /* @__PURE__ */ createElement(MenuItem, { ...current, key: current.key }, children);
       }) });
     });
-    __publicField$8(this, "Component", () => {
-      const [isOpen, close] = __privateGet$4(this, _hooks).useIsOpen();
+    __publicField$f(this, "Component", () => {
+      const [isOpen, close] = __privateGet$5(this, _hooks).useIsOpen();
       if (!isOpen)
         return null;
       return /* @__PURE__ */ jsx(FreeFocusInside, { children: /* @__PURE__ */ jsx(
@@ -3480,7 +3569,7 @@ class ApiaUtilMenu {
             close();
             this.menuProps?.onClose?.(ev);
           },
-          children: __privateGet$4(this, _RenderMenu).call(this, { label: "", items: __privateGet$4(this, _items$1) })
+          children: __privateGet$5(this, _RenderMenu).call(this, { label: "", items: __privateGet$5(this, _items$1) })
         }
       ) });
     });
@@ -3492,17 +3581,17 @@ _hooks = new WeakMap();
 _maxId = new WeakMap();
 _RenderMenu = new WeakMap();
 
-var __defProp$7 = Object.defineProperty;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$7 = (obj, key, value) => {
-  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$e = Object.defineProperty;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$e = (obj, key, value) => {
+  __defNormalProp$e(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class ApiaUtilMouse extends EventEmitter {
   constructor() {
     super();
-    __publicField$7(this, "x", 0);
-    __publicField$7(this, "y", 0);
+    __publicField$e(this, "x", 0);
+    __publicField$e(this, "y", 0);
     document.addEventListener("mousemove", (ev) => {
       this.x = ev.clientX;
       this.y = ev.clientY;
@@ -3514,42 +3603,42 @@ class ApiaUtilMouse extends EventEmitter {
   }
 }
 
-var __defProp$6 = Object.defineProperty;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$6 = (obj, key, value) => {
-  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$d = Object.defineProperty;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$d = (obj, key, value) => {
+  __defNormalProp$d(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$4 = (obj, member, msg) => {
+var __accessCheck$5 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$3 = (obj, member, getter) => {
-  __accessCheck$4(obj, member, "read from private field");
+var __privateGet$4 = (obj, member, getter) => {
+  __accessCheck$5(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$4 = (obj, member, value) => {
+var __privateAdd$5 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateSet$3 = (obj, member, value, setter) => {
-  __accessCheck$4(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  __accessCheck$5(obj, member, "write to private field");
+  member.set(obj, value);
   return value;
 };
 var _instance;
 const _ApiaUtil = class _ApiaUtil {
   constructor() {
-    __publicField$6(this, "dialogs");
-    __publicField$6(this, "menu");
-    __publicField$6(this, "modals");
-    __publicField$6(this, "mouse");
-    __publicField$6(this, "notifications");
-    __publicField$6(this, "parsers");
-    __publicField$6(this, "tabs");
-    __publicField$6(this, "tooltips");
-    __publicField$6(this, "Component", () => {
+    __publicField$d(this, "dialogs");
+    __publicField$d(this, "menu");
+    __publicField$d(this, "modals");
+    __publicField$d(this, "mouse");
+    __publicField$d(this, "notifications");
+    __publicField$d(this, "parsers");
+    __publicField$d(this, "tabs");
+    __publicField$d(this, "tooltips");
+    __publicField$d(this, "Component", () => {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(this.dialogs.Component, {}),
         /* @__PURE__ */ jsx(this.modals.Component, {}),
@@ -3568,32 +3657,32 @@ const _ApiaUtil = class _ApiaUtil {
     this.tooltips = new ApiaUtilTooltips();
   }
   static get instance() {
-    if (!__privateGet$3(this, _instance)) {
+    if (!__privateGet$4(this, _instance)) {
       __privateSet$3(this, _instance, new _ApiaUtil());
     }
-    return __privateGet$3(this, _instance);
+    return __privateGet$4(this, _instance);
   }
 };
 _instance = new WeakMap();
-__privateAdd$4(_ApiaUtil, _instance, void 0);
+__privateAdd$5(_ApiaUtil, _instance, void 0);
 let ApiaUtil = _ApiaUtil;
 
-var __defProp$5 = Object.defineProperty;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$5 = (obj, key, value) => {
-  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$c = Object.defineProperty;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$c = (obj, key, value) => {
+  __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class ScreenLocker {
   constructor() {
-    __publicField$5(this, "emitter", new StatefulEmitter({
+    __publicField$c(this, "emitter", new StatefulEmitter({
       locks: {
         common: { count: 0 },
         linear: { count: 0 },
         white: { count: 1 }
       }
     }));
-    __publicField$5(this, "lock", (options) => {
+    __publicField$c(this, "lock", (options) => {
       this.emitter.setState("locks", (s) => {
         const key = options?.type ?? "common";
         return {
@@ -3609,11 +3698,11 @@ class ScreenLocker {
         };
       });
     });
-    __publicField$5(this, "hasReleased", false);
+    __publicField$c(this, "hasReleased", false);
     /**
      * This method will work once, then, the action will be ignored. The ScreenLocker starts always locked on white, when this method is called, all listeners of onRelease will be called and the lock will be released.
      */
-    __publicField$5(this, "release", () => {
+    __publicField$c(this, "release", () => {
       if (this.hasReleased)
         return;
       this.hasReleased = true;
@@ -3629,11 +3718,11 @@ class ScreenLocker {
     /**
      * This method notifies when the screenLock is released by the first time.
      */
-    __publicField$5(this, "onRelease", this.emitter.on.bind(this.emitter, "release"));
+    __publicField$c(this, "onRelease", this.emitter.on.bind(this.emitter, "release"));
     /**
      * This component is the responsible for putting the lock courtain in the browser when it's required. It must be used once per application.
      */
-    __publicField$5(this, "Component", () => {
+    __publicField$c(this, "Component", () => {
       const locks = this.emitter.useState("locks");
       const style = {
         alignItems: "center",
@@ -3681,7 +3770,7 @@ const OptionsBox = observer(() => {
     if (c.filtered) {
       return /* @__PURE__ */ jsx(Fragment, {}, c.value);
     } else {
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs(
         Box,
         {
           className: `autocomplete__option ${handler.focusedIndex === i ? "focused" : ""}`,
@@ -3695,7 +3784,10 @@ const OptionsBox = observer(() => {
             });
           },
           "data-value": c.value,
-          children: c.label
+          children: [
+            c.label,
+            " \xA0"
+          ]
         },
         c.value
       );
@@ -3703,43 +3795,44 @@ const OptionsBox = observer(() => {
   }) });
 });
 
-var __defProp$4 = Object.defineProperty;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$4 = (obj, key, value) => {
-  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$b = Object.defineProperty;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$b = (obj, key, value) => {
+  __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$3 = (obj, member, msg) => {
+var __accessCheck$4 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$2 = (obj, member, getter) => {
-  __accessCheck$3(obj, member, "read from private field");
+var __privateGet$3 = (obj, member, getter) => {
+  __accessCheck$4(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$3 = (obj, member, value) => {
+var __privateAdd$4 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateSet$2 = (obj, member, value, setter) => {
-  __accessCheck$3(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  __accessCheck$4(obj, member, "write to private field");
+  member.set(obj, value);
   return value;
 };
 var _actualSearch, _makeSearch, _search;
 class AutocompleteController {
   constructor(properties) {
-    __publicField$4(this, "state", {
+    __publicField$b(this, "state", {
       disabled: false,
       id: uniqueId$3("autocomplete"),
       loading: false,
       options: [],
       searchDebounce: 100,
       showValue: "",
-      value: ""
+      value: "",
+      width: 55
     });
-    __privateAdd$3(this, _actualSearch, (str) => {
+    __privateAdd$4(this, _actualSearch, (str) => {
       this.state.options.forEach((c) => {
         if (this.state.caseInsensitive) {
           c.filtered = (c.searchLabel ?? c.label?.toString?.() ?? c.value).toLowerCase().indexOf(str.toLowerCase()) === -1;
@@ -3751,14 +3844,16 @@ class AutocompleteController {
         }
       });
     });
-    __privateAdd$3(this, _makeSearch, () => {
-      return debounce(__privateGet$2(this, _actualSearch), this.state.searchDebounce);
+    __privateAdd$4(this, _makeSearch, () => {
+      return debounce(__privateGet$3(this, _actualSearch), this.state.searchDebounce);
     });
-    __privateAdd$3(this, _search, __privateGet$2(this, _makeSearch).call(this));
-    __publicField$4(this, "tooltipRef", null);
+    __privateAdd$4(this, _search, __privateGet$3(this, _makeSearch).call(this));
+    __publicField$b(this, "tooltipRef", null);
     Object.assign(this.state, properties);
     if (properties.value) {
-      this.state.showValue = properties.value;
+      this.state.showValue = String(
+        properties.options?.find((c) => c.value === properties.value)?.label
+      ) || properties.value;
       this.state.focusedValue = properties.value;
     }
     makeAutoObservable(this, {
@@ -3768,7 +3863,7 @@ class AutocompleteController {
     reaction(
       () => this.state.searchDebounce,
       () => {
-        __privateSet$2(this, _search, __privateGet$2(this, _makeSearch).call(this));
+        __privateSet$2(this, _search, __privateGet$3(this, _makeSearch).call(this));
       }
     );
     reaction(
@@ -3798,7 +3893,7 @@ class AutocompleteController {
   close(selectValue = true) {
     this.tooltipRef?.close();
     this.tooltipRef = null;
-    __privateGet$2(this, _actualSearch).call(this, "");
+    __privateGet$3(this, _actualSearch).call(this, "");
     if (selectValue) {
       let currentValue = this.state.options.find(
         (c) => c.value === this.state.focusedValue
@@ -3901,6 +3996,10 @@ class AutocompleteController {
         this.tooltipRef = null;
         this.close();
       },
+      minSize: {
+        height: Math.min(4, this.state.options.length) * 28,
+        width: this.state.width
+      },
       preferredOrientationY: "bottom",
       preferredOrientationX: "right",
       attachToElementAnchorPoint: "bottomLeft",
@@ -3917,7 +4016,11 @@ class AutocompleteController {
     }
   }
   search(str) {
-    __privateGet$2(this, _search).call(this, str);
+    if (this.state.disabled) {
+      return;
+    }
+    this.state.showValue = str;
+    __privateGet$3(this, _search).call(this, str);
   }
   selectFocused() {
     this.close();
@@ -3926,12 +4029,21 @@ class AutocompleteController {
       this.setValue(newValue);
     }
   }
-  setValue(value) {
+  async setValue(value) {
+    if (this.state.disabled) {
+      return;
+    }
     const selectedOption = this.state.options.find((c) => c.value === value);
-    this.state.value = selectedOption?.value || "";
+    const newValue = selectedOption?.value || "";
+    const onChangeResult = this.state.onChange?.(newValue, this);
+    if (onChangeResult instanceof Promise) {
+      if (!await onChangeResult) {
+        return;
+      }
+    }
+    this.state.value = newValue;
     this.state.focusedValue = this.state.value;
     this.state.showValue = selectedOption?.label?.toString?.() || selectedOption?.value || "";
-    this.state.onChange?.(this.state.value, this);
   }
 }
 _actualSearch = new WeakMap();
@@ -3941,6 +4053,7 @@ _search = new WeakMap();
 const SearchBox = observer(() => {
   const handler = useAutocompleteContext();
   const breakpoint = useBreakpointIndex();
+  const inputRef = useRef(null);
   return /* @__PURE__ */ jsxs(Box, { className: "autocomplete__inputWrapper", children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -3963,12 +4076,13 @@ const SearchBox = observer(() => {
       /* @__PURE__ */ jsx(
         Input,
         {
+          ref: inputRef,
           className: `autocomplete__search ${handler.state.disabled ? "disabled" : ""}`,
           onChange: (ev) => {
             handler.search(ev.target.value);
-            handler.state.showValue = ev.target.value;
           },
           onMouseDown: () => {
+            handler.state.width = inputRef.current?.getBoundingClientRect().width ?? handler.state.width;
             handler.toggleOpen();
           },
           onFocus: (ev) => {
@@ -4072,6 +4186,10 @@ const Autocomplete = (props) => {
     props.getHandler?.(newHandler);
     setHandler(newHandler);
   });
+  const prevProps = usePrevious(props.properties);
+  if (!shallowEqual$1(prevProps.current, props.properties) && handler?.state) {
+    Object.assign(handler.state, props.properties);
+  }
   if (!handler) {
     return null;
   }
@@ -4415,36 +4533,36 @@ const Checkbox$1 = forwardRef(
 );
 Checkbox$1.displayName = "Checkbox";
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => {
-  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$a = Object.defineProperty;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$a = (obj, key, value) => {
+  __defNormalProp$a(obj, key + "" , value);
   return value;
 };
-var __accessCheck$2 = (obj, member, msg) => {
+var __accessCheck$3 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$1 = (obj, member, getter) => {
-  __accessCheck$2(obj, member, "read from private field");
+var __privateGet$2 = (obj, member, getter) => {
+  __accessCheck$3(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$2 = (obj, member, value) => {
+var __privateAdd$3 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateSet$1 = (obj, member, value, setter) => {
-  __accessCheck$2(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  __accessCheck$3(obj, member, "write to private field");
+  member.set(obj, value);
   return value;
 };
 var _onFocusCallbacks, _a;
 const historySize = 50;
 const globalFocus = new (_a = class {
   constructor() {
-    __publicField$3(this, "focused", []);
-    __privateAdd$2(this, _onFocusCallbacks, []);
+    __publicField$a(this, "focused", []);
+    __privateAdd$3(this, _onFocusCallbacks, []);
     debugDispatcher.on(
       "focusHistory",
       () => {
@@ -4454,12 +4572,12 @@ const globalFocus = new (_a = class {
     );
   }
   offFocus(cb) {
-    __privateSet$1(this, _onFocusCallbacks, __privateGet$1(this, _onFocusCallbacks).filter((current) => {
+    __privateSet$1(this, _onFocusCallbacks, __privateGet$2(this, _onFocusCallbacks).filter((current) => {
       return current !== cb;
     }));
   }
   onFocus(cb) {
-    __privateGet$1(this, _onFocusCallbacks).push(cb);
+    __privateGet$2(this, _onFocusCallbacks).push(cb);
     return () => {
       this.offFocus(cb);
     };
@@ -4476,7 +4594,7 @@ const globalFocus = new (_a = class {
     if (this.focused.length > historySize) {
       this.focused = this.focused.splice(0, historySize);
     }
-    __privateGet$1(this, _onFocusCallbacks).forEach((cb) => {
+    __privateGet$2(this, _onFocusCallbacks).forEach((cb) => {
       return cb();
     });
   }
@@ -4753,7 +4871,7 @@ const DateInput = React__default.forwardRef(
         ...props,
         className: "dateInput",
         value: renderLabel ? renderLabel(inputValue) : inputValue,
-        ref,
+        inputRef: ref,
         onChange: (ev) => {
           setInputValue(ev.target.value);
           if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== ev.target.value && ev.target.value !== "")
@@ -4799,7 +4917,9 @@ const DateInput = React__default.forwardRef(
               `#DateInput${id} input`
             )?.focus();
           },
-          type: "button"
+          type: "button",
+          title: getLabel("btnAiDelete").text,
+          "aria-label": getLabel("btnAiDelete").text
         }
       ),
       [id, onDelete, setCalendarValue]
@@ -5009,7 +5129,7 @@ const RequiredMark = ({
   isRequired = false,
   isReadonly = false
 }) => {
-  return isRequired && !isReadonly && !isFormReadonly ? /* @__PURE__ */ jsx("abbr", { className: "requiredMark", title: getLabel("msgReqField").text, children: "*" }) : null;
+  return isRequired && !isReadonly && !isFormReadonly ? /* @__PURE__ */ jsx("span", { className: "requiredMark", title: getLabel("msgReqField").text, children: "*" }) : null;
 };
 
 injectStyles("layout.common.components.fieldLabel", {
@@ -5122,6 +5242,7 @@ const AutoEllipsis = ({
         return;
       unsuscribe.current();
       function showBox() {
+        document.querySelectorAll(".autoellipsis_clone").forEach((c) => c.remove());
         clone.current = el.cloneNode(true);
         const target = findParent?.(el) ?? el;
         const styles = window.getComputedStyle(target);
@@ -5683,9 +5804,28 @@ const ContainerWithHeader = ({
   );
 };
 
-const styles$3 = {};
+const collapsiblePanel = {
+  display: "flex",
+  flexDirection: "column",
+  gap: spacing(2),
+  ".collapsiblePanel__label": {
+    display: "flex",
+    gap: spacing(2),
+    p: "1px",
+    alignItems: "center",
+    justifyContent: "space-between",
+    ".collapsiblePanel__label__button": {
+      display: "flex",
+      gap: spacing(2),
+      p: "1px",
+      alignItems: "center",
+      "&:focus": focusOutline,
+      color: "palette.text.primary"
+    }
+  }
+};
 
-injectStyles("layout.common.components.collapsiblePanel", styles$3);
+injectStyles("layout.common.components.collapsiblePanel", collapsiblePanel);
 const CollapsiblePanel = React__default.forwardRef(
   ({
     children,
@@ -5703,7 +5843,8 @@ const CollapsiblePanel = React__default.forwardRef(
     rememberCollapsedState,
     titleButtons,
     minHeight = 0,
-    "aria-hidden": ariaHidden
+    "aria-hidden": ariaHidden,
+    collapseIconToRight
   }, outerRef) => {
     const prefix = React__default.useMemo(() => id ? "" : uniqueId$2(), []);
     const actualId = `${prefix}_${id ?? "collapsiblePanel"}`;
@@ -5777,8 +5918,9 @@ const CollapsiblePanel = React__default.forwardRef(
                 type: "button",
                 className: "collapsiblePanel__label__button",
                 children: [
-                  isCollapsed ? /* @__PURE__ */ jsx(Icon$1, { title: "", icon: openIcon, size: iconSize }) : /* @__PURE__ */ jsx(Icon$1, { title: "", icon: closedIcon, size: iconSize }),
-                  /* @__PURE__ */ jsx("span", { className: "title", children: label })
+                  !collapseIconToRight && /* @__PURE__ */ jsx(Fragment, { children: isCollapsed ? /* @__PURE__ */ jsx(Icon$1, { title: "", icon: openIcon, size: iconSize }) : /* @__PURE__ */ jsx(Icon$1, { title: "", icon: closedIcon, size: iconSize }) }),
+                  /* @__PURE__ */ jsx("span", { className: "title", children: label }),
+                  collapseIconToRight && /* @__PURE__ */ jsx(Fragment, { children: isCollapsed ? /* @__PURE__ */ jsx(Icon$1, { title: "", icon: openIcon, size: iconSize }) : /* @__PURE__ */ jsx(Icon$1, { title: "", icon: closedIcon, size: iconSize }) })
                 ]
               }
             ),
@@ -5865,35 +6007,35 @@ const ListboxItem = memo(
 );
 ListboxItem.displayName = "ListboxItem";
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => {
-  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$9 = Object.defineProperty;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$9 = (obj, key, value) => {
+  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$1 = (obj, member, msg) => {
+var __accessCheck$2 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateAdd$1 = (obj, member, value) => {
+var __privateAdd$2 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateMethod = (obj, member, method) => {
-  __accessCheck$1(obj, member, "access private method");
+  __accessCheck$2(obj, member, "access private method");
   return method;
 };
 var _restoreTimeout, restoreTimeout_fn, _shout, shout_fn;
 class WaiTypeAhead extends EventEmitter {
   constructor(props) {
     super();
-    __privateAdd$1(this, _restoreTimeout);
-    __privateAdd$1(this, _shout);
-    __publicField$2(this, "frequency", 2.5);
+    __privateAdd$2(this, _restoreTimeout);
+    __privateAdd$2(this, _shout);
+    __publicField$9(this, "frequency", 2.5);
     // Keys per second
-    __publicField$2(this, "timeout", 0);
-    __publicField$2(this, "typing", "");
+    __publicField$9(this, "timeout", 0);
+    __publicField$9(this, "typing", "");
     const { onMultipleKeys, onSingleKey, onTypeUpdate } = props ?? {};
     if (onMultipleKeys)
       this.on("multipleKeys", onMultipleKeys);
@@ -6704,7 +6846,6 @@ const LinearLoader = () => {
     }
   );
 };
-var LinearLoader$1 = LinearLoader;
 
 const ProgressBar = ({
   id,
@@ -6738,12 +6879,11 @@ const ProgressBar = ({
     )
   ] });
 };
-var ProgressBar$1 = ProgressBar;
 
 const styles$1 = {
   height: "iconmd",
   width: "iconmd",
-  background: "palette.background.paper"
+  background: "transparent"
 };
 const LoaderSpinner = makeStyledComponent(
   "LoaderSpinner",
@@ -6759,7 +6899,32 @@ const LoaderSpinner = makeStyledComponent(
     );
   }
 );
-var LoaderSpinner$1 = LoaderSpinner;
+
+const shimmer = keyframes`
+  0% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0.8;
+  }
+`;
+const SkeletonItem = () => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      height: 20,
+      bg: "muted",
+      mb: 2,
+      borderRadius: 4,
+      animation: `${shimmer} 1.5s infinite`,
+      background: "palette.gray.800"
+    }
+  }
+);
+const ListSkeletonLoader = ({ items = 5 }) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 3 }, children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx(SkeletonItem, {}, index)) });
 
 const distinctors = {
   grid: [
@@ -7407,9 +7572,7 @@ const IconsListNonForwarded = (props, ref) => {
         "layout.common.components.iconsList",
         styles,
         styledComponent
-      ),
-      debounce: 50
-    });
+      )});
     return Component;
   }, []);
   if (previousProps.current?.iconWidth !== props.iconWidth) {
@@ -7435,7 +7598,14 @@ function importComponent(path) {
         /* webpackInclude: /\.tsx?$/ */
         `/customComponents/${path}`
       ).then((result) => {
-        resolve(result.default);
+        if (result?.default?.default)
+          resolve(result.default);
+        else if (result?.default)
+          resolve(result);
+        else
+          resolve({
+            default: () => /* @__PURE__ */ jsx(Fragment, { children: "Something went wrong when importing component" })
+          });
       }).catch((error) => {
         resolve({
           default: () => {
@@ -7448,18 +7618,18 @@ function importComponent(path) {
   });
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => {
-  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$8 = Object.defineProperty;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$8 = (obj, key, value) => {
+  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class ToolbarController extends EventEmitter {
   constructor() {
     super(...arguments);
-    __publicField$1(this, "eventListeners", {});
-    __publicField$1(this, "itemsState", {});
-    __publicField$1(this, "hooks", {
+    __publicField$8(this, "eventListeners", {});
+    __publicField$8(this, "itemsState", {});
+    __publicField$8(this, "hooks", {
       useItemState: (id, initialState) => {
         const [state, setState] = useState(initialState);
         useEffect(() => {
@@ -7473,11 +7643,11 @@ class ToolbarController extends EventEmitter {
         return state;
       }
     });
-    __publicField$1(this, "setItemState", (id, newState) => {
+    __publicField$8(this, "setItemState", (id, newState) => {
       this.itemsState[id] = { ...this.itemsState[id], ...newState };
       this.emit("updateItemState", id);
     });
-    __publicField$1(this, "Context", ({ children }) => {
+    __publicField$8(this, "Context", ({ children }) => {
       return /* @__PURE__ */ jsx(ToolbarControllerContext.Provider, { value: this, children });
     });
   }
@@ -7648,28 +7818,28 @@ const Toolbar = ({
   ) });
 };
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$7 = Object.defineProperty;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$7 = (obj, key, value) => {
+  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck = (obj, member, msg) => {
+var __accessCheck$1 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
+var __privateGet$1 = (obj, member, getter) => {
+  __accessCheck$1(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd = (obj, member, value) => {
+var __privateAdd$1 = (obj, member, value) => {
   if (member.has(obj))
     throw TypeError("Cannot add the same private member more than once");
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  __accessCheck$1(obj, member, "write to private field");
+  member.set(obj, value);
   return value;
 };
 var _emitter, _items, _moveItem;
@@ -7680,27 +7850,27 @@ function getTargetItem(ev) {
 }
 class SortableListHandler {
   constructor() {
-    __privateAdd(this, _emitter, new EventEmitter());
-    __privateAdd(this, _items, []);
-    __publicField(this, "updateChildren", (items) => {
+    __privateAdd$1(this, _emitter, new EventEmitter());
+    __privateAdd$1(this, _items, []);
+    __publicField$7(this, "updateChildren", (items) => {
       __privateSet(this, _items, Children.toArray(items).filter(
         (el) => isValidElement(el)
       ));
     });
-    __privateAdd(this, _moveItem, (movingId, idBefore, after) => {
+    __privateAdd$1(this, _moveItem, (movingId, idBefore, after) => {
       if (movingId === idBefore)
         return;
-      const itemIndex = __privateGet(this, _items).findIndex(
+      const itemIndex = __privateGet$1(this, _items).findIndex(
         (search) => search.props.id === movingId
       );
-      const item = __privateGet(this, _items).splice(itemIndex, 1)[0];
-      const insertIndex = __privateGet(this, _items).findIndex(
+      const item = __privateGet$1(this, _items).splice(itemIndex, 1)[0];
+      const insertIndex = __privateGet$1(this, _items).findIndex(
         (search) => search.props.id === idBefore
       );
-      __privateGet(this, _items).splice(insertIndex + (after ? 1 : 0), 0, item);
-      __privateGet(this, _emitter).emit("sort", null);
+      __privateGet$1(this, _items).splice(insertIndex + (after ? 1 : 0), 0, item);
+      __privateGet$1(this, _emitter).emit("sort", null);
     });
-    __publicField(this, "useItemEvents", () => {
+    __publicField$7(this, "useItemEvents", () => {
       const unsuscribe = useRef(() => {
       });
       const ref = useCallback((el) => {
@@ -7711,7 +7881,7 @@ class SortableListHandler {
           };
           const handleDrop = (ev) => {
             const target = getTargetItem(ev);
-            __privateGet(this, _moveItem).call(this, ev.dataTransfer.getData("text"), target.id, target.classList.contains("after"));
+            __privateGet$1(this, _moveItem).call(this, ev.dataTransfer.getData("text"), target.id, target.classList.contains("after"));
             target.classList.remove("dragover");
             target.classList.remove("after");
           };
@@ -7742,16 +7912,16 @@ class SortableListHandler {
       }, []);
       return ref;
     });
-    __publicField(this, "useSortChange", (onSortChange) => {
+    __publicField$7(this, "useSortChange", (onSortChange) => {
       useSubscription({
         makeSubscription: () => {
-          return __privateGet(this, _emitter).on("sort", () => {
-            onSortChange?.([...__privateGet(this, _items)]);
+          return __privateGet$1(this, _emitter).on("sort", () => {
+            onSortChange?.([...__privateGet$1(this, _items)]);
           });
         }
       });
     });
-    __publicField(this, "useWrapperEvents", () => {
+    __publicField$7(this, "useWrapperEvents", () => {
       const unsuscribe = useRef(() => {
       });
       const ref = useCallback((el) => {
@@ -7864,5 +8034,1690 @@ const SortableList = makeStyledComponent(
   UnstyledSortableList
 );
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, AutocompleteController, BaseButton, CalendarModal, Captcha, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, IconButton, IconInput, IconsList, LabelBox, LinearLoader$1 as LinearLoader, Listbox, ListboxItem, LoaderSpinner$1 as LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar$1 as ProgressBar, RequiredMark, ScreenLocker, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton };
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => {
+  __defNormalProp$6(obj, key + "" , value);
+  return value;
+};
+class Parameter {
+  constructor(params) {
+    __publicField$6(this, "state");
+    this.state = params;
+    this.state.type = this.state.type.toLowerCase();
+    this.state.values = this.state.values || [];
+    this.removeEmptyValues();
+    makeObservable(this, {
+      state: observable
+    });
+    reaction(
+      () => this.state.values,
+      () => delete this.state.validationError
+    );
+  }
+  clear() {
+    this.state.values.splice(0, this.state.values.length);
+  }
+  getValues() {
+    return this.state.values;
+  }
+  removeEmptyValues() {
+    this.state.values = this.state.values.filter((x) => !!x);
+  }
+  setValue(value, index) {
+    this.removeEmptyValues();
+    index !== null && index !== void 0 ? this.state.values[index] = value : this.state.values = [value];
+  }
+  addValue(value) {
+    this.removeEmptyValues();
+    this.state.values[this.state.values.length] = value;
+  }
+  setValues(values, index = 0) {
+    this.removeEmptyValues();
+    values.forEach((x, i) => this.state.values[index + i] = x);
+    for (let i = values.length; i < this.state.values.length; i++) {
+      delete this.state.values[i];
+    }
+  }
+  removeValue(value) {
+    this.state.values = this.getValues().filter((x) => !!x && x !== value);
+  }
+  asPayloadElement() {
+    return this.state.type === "label" ? null : toJS(this.state.values);
+  }
+  includes(value) {
+    return this.state.values.includes(value);
+  }
+  validate() {
+    const isValid = !this.state.required || !!this.state.values[0];
+    this.state.validationError = isValid ? void 0 : getLabel("msgReqField").text;
+    return isValid;
+  }
+}
+
+const ParameterRender = observer(
+  ({
+    index = 0,
+    omitLabel = false,
+    parameter
+  }) => {
+    const Label = useMemo(
+      () => omitLabel && parameter.state.type !== "check" ? ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }) : FieldLabel,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    );
+    const error = parameter.state.validationError && /* @__PURE__ */ jsx(FieldErrorMessage, { name: parameter.state.name, children: parameter.state.validationError });
+    const componentRef = useRef(null);
+    if (parameter.state.component) {
+      componentRef.current = componentRef.current || importComponent(parameter.state.component);
+      return /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
+        /* @__PURE__ */ jsx(componentRef.current, { parameter, index }),
+        error
+      ] });
+    } else if (parameter.state.type === "input") {
+      return /* @__PURE__ */ jsxs(
+        Label,
+        {
+          label: parameter.state.title,
+          required: parameter.state.required,
+          children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                name: parameter.state.name,
+                title: parameter.state.description,
+                onChange: (ev) => {
+                  parameter.setValue(ev.target.value, index);
+                },
+                value: parameter.state.values[index]
+              }
+            ),
+            error
+          ]
+        }
+      );
+    } else if (parameter.state.type === "text_area") {
+      return /* @__PURE__ */ jsxs(
+        Label,
+        {
+          label: parameter.state.title,
+          required: parameter.state.required,
+          children: [
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                name: parameter.state.name,
+                title: parameter.state.description,
+                onChange: (ev) => {
+                  parameter.setValue(ev.target.value, index);
+                },
+                value: parameter.state.values[index]
+              }
+            ),
+            error
+          ]
+        }
+      );
+    } else if (parameter.state.type === "check") {
+      return /* @__PURE__ */ jsxs(
+        Label,
+        {
+          label: parameter.state.title,
+          required: parameter.state.required,
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox$1,
+              {
+                name: parameter.state.name,
+                title: parameter.state.description,
+                onChange: (ev) => {
+                  parameter.setValue(String(ev.target.checked), index);
+                },
+                checked: parameter.state.values[index] === "true"
+              }
+            ),
+            error
+          ]
+        }
+      );
+    } else if (parameter.state.type === "combo") {
+      return /* @__PURE__ */ jsxs(
+        Label,
+        {
+          label: parameter.state.title,
+          required: parameter.state.required,
+          children: [
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                name: parameter.state.name,
+                title: parameter.state.description,
+                onChange: (ev) => {
+                  parameter.setValue(ev.target.value, index);
+                },
+                value: parameter.state.values[index],
+                children: arrayOrArray(parameter.state.possibleValues).map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.text }))
+              }
+            ),
+            error
+          ]
+        }
+      );
+    } else if (parameter.state.type === "mdl_attribute") {
+      console.warn("There is no renderer for type mdl_attribute");
+      return null;
+    } else if (parameter.state.type === "mdl_doc_type") {
+      console.warn("There is no renderer for type mdl_doc_type");
+      return null;
+    } else if (parameter.state.type === "mdl_metadata") {
+      console.warn("There is no renderer for type mdl_metadata");
+      return null;
+    } else if (parameter.state.type === "mdl_entity") {
+      console.warn("There is no renderer for type mdl_entity");
+      return null;
+    } else if (parameter.state.type === "mdl_ai_connector") {
+      return null;
+    } else if (parameter.state.type === "mdl_ai_completion_model") {
+      return null;
+    } else if (parameter.state.type === "mdl_ai_embeddings_model") {
+      return null;
+    } else if (parameter.state.type === "hidden") {
+      return null;
+    } else if (parameter.state.type === "label") {
+      return parameter.state.values[index];
+    }
+    console.warn("Cannot render parameter of type", parameter.state.type);
+    return null;
+  }
+);
+
+const ParametersTable = observer(
+  ({ group }) => {
+    const maxIndex = Math.max(
+      ...Object.values(group.parameters).map((p) => p.state.values.length)
+    );
+    const indices = Array.from({ length: maxIndex }, (_, i) => i);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        as: "table",
+        variant: "layout.common.tables.secondary",
+        sx: {
+          gridColumn: "span 4"
+        },
+        children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: Object.values(group.parameters).map(
+            (p) => p.state.type !== "hidden" ? /* @__PURE__ */ jsx("th", { sx: toJS(p.state.cssProps?.TH), children: p.state.title }, p.state.name) : null
+          ) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: indices.map((index) => /* @__PURE__ */ jsx(
+            "tr",
+            {
+              onClick: () => {
+                group.selection.clear();
+                group.selection.add(index);
+              },
+              className: group.selection.has(index) ? "selected" : "",
+              children: Object.entries(group.parameters).map(
+                ([name, parameter]) => parameter.state.type !== "hidden" ? /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+                  ParameterRender,
+                  {
+                    omitLabel: true,
+                    index,
+                    parameter
+                  }
+                ) }, name) : null
+              )
+            },
+            index
+          )) }),
+          /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: Object.keys(group.parameters).length, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => {
+                  Object.values(group.parameters)[0]?.state.values.push("");
+                },
+                children: getLabel("btnAgr").text
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => {
+                  for (let i = maxIndex; i >= 0; i--) {
+                    if (group.selection.has(i)) {
+                      Object.values(group.parameters).forEach(
+                        (c) => c.state.values.splice(i, 1)
+                      );
+                    }
+                  }
+                  group.selection.clear();
+                },
+                children: getLabel("btnDel").text
+              }
+            )
+          ] }) }) })
+        ]
+      }
+    );
+  }
+);
+
+class TableParameter extends Parameter {
+  constructor(params) {
+    super(params);
+    this.state.cssProps = params.cssProps ?? { TH: {} };
+  }
+}
+
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ParametersGroup {
+  constructor(params) {
+    __publicField$5(this, "component");
+    __publicField$5(this, "name");
+    __publicField$5(this, "parameters");
+    __publicField$5(this, "selection", /* @__PURE__ */ new Set());
+    this.component = params.component;
+    this.name = params.name;
+    this.parameters = Object.fromEntries(
+      Object.entries(params.parameters).map(([name, param]) => [
+        name,
+        new TableParameter(param)
+      ])
+    );
+    makeObservable(this, {
+      parameters: observable,
+      selection: observable
+    });
+  }
+  removeAll() {
+    Object.values(this.parameters).forEach((p) => p.clear());
+  }
+  asPayloadElement() {
+    return Object.keys(this.parameters).reduce(
+      (prev, current) => {
+        const elem = this.parameters[current].asPayloadElement();
+        elem && (prev[current] = elem);
+        return prev;
+      },
+      {}
+    );
+  }
+}
+
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+function isParametersGroup(param) {
+  return param.parameters !== void 0;
+}
+const _ParametersStore = class _ParametersStore {
+  constructor() {
+    __publicField$4(this, "parameters", {});
+    makeObservable(this, {
+      parameters: observable
+    });
+  }
+  static getInstance() {
+    if (!_ParametersStore.instance) {
+      _ParametersStore.instance = new _ParametersStore();
+    }
+    return _ParametersStore.instance;
+  }
+  /**
+   * Takes the string generated by the ParametersStore in the server
+   * and assigns it to the current parameters
+   */
+  fromResponse(owner, response) {
+    const params = JSON.parse(response);
+    Object.entries(params).forEach(([name, param]) => {
+      if (!this.parameters[owner]) {
+        this.parameters[owner] = {};
+      }
+      if (isParametersGroup(param)) {
+        this.parameters[owner][name] = new ParametersGroup(param);
+      } else {
+        this.parameters[owner][name] = new Parameter(param);
+      }
+    });
+  }
+  static getParametersFromResponse(response) {
+    const parsed = JSON.parse(response);
+    const newParameters = {};
+    Object.entries(parsed).forEach(([name, param]) => {
+      if (isParametersGroup(param)) {
+        newParameters[name] = new ParametersGroup(param);
+      } else {
+        newParameters[name] = new Parameter(param);
+      }
+    });
+    return newParameters;
+  }
+  static getParametersFromObject(response) {
+    const newParameters = {};
+    Object.entries(response).forEach(([name, param]) => {
+      if (param instanceof Parameter || param instanceof ParametersGroup) {
+        newParameters[name] = param;
+      } else {
+        if (isParametersGroup(param)) {
+          newParameters[name] = new ParametersGroup(param);
+        } else {
+          newParameters[name] = new Parameter(param);
+        }
+      }
+    });
+    return newParameters;
+  }
+  /**
+   * Returns the parameters for a given owner name.
+   */
+  getParameters(ownerName) {
+    return this.parameters[ownerName];
+  }
+  /**
+   * Returns an object that can be used to submit the parameters to the server
+   * in a format that the ParametersStore in the server expects.
+   */
+  getSubmitValue(owner) {
+    const submitObject = {};
+    Object.values(this.parameters[owner]).forEach((p) => {
+      if (p instanceof Parameter) {
+        submitObject[p.state.name] = p.getValues();
+      } else if (p instanceof ParametersGroup) {
+        for (const [name, param] of Object.entries(p.parameters)) {
+          submitObject[name] = param.getValues();
+        }
+      }
+    });
+    return JSON.stringify(submitObject);
+  }
+  /**
+   * Resets the parameters store.
+   */
+  reset() {
+    this.parameters = {};
+  }
+  static validate(parameters) {
+    let isValid = true;
+    let firstInvalid = null;
+    for (const p of Object.values(parameters)) {
+      if (p instanceof Parameter) {
+        isValid = p.validate() && isValid;
+        if (!firstInvalid && !isValid) {
+          firstInvalid = p;
+        }
+      } else if (p instanceof ParametersGroup) {
+        for (const pg of Object.values(p.parameters)) {
+          isValid = pg.validate() && isValid;
+          if (!firstInvalid && !isValid) {
+            firstInvalid = pg;
+          }
+        }
+      }
+    }
+    if (firstInvalid) {
+      document.querySelector(`[name="${firstInvalid.state.name}"]`)?.focus();
+    }
+    return isValid;
+  }
+};
+__publicField$4(_ParametersStore, "instance");
+let ParametersStore = _ParametersStore;
+
+const Parameters = observer(
+  ({
+    label,
+    ownerName,
+    parameters
+  }) => {
+    const params = parameters ?? ParametersStore.getInstance().getParameters(ownerName ?? "");
+    if (!params)
+      return;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      label,
+      Object.entries(params).map(([, c]) => {
+        if (c instanceof Parameter) {
+          return /* @__PURE__ */ jsx(ParameterRender, { index: 0, parameter: c }, c.state.name);
+        } else if (c instanceof ParametersGroup) {
+          if (c.component) {
+            const Component = importComponent(
+              c.component
+            );
+            return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Component, { group: c }, c.name) });
+          } else {
+            return /* @__PURE__ */ jsx(ParametersTable, { group: c }, c.name);
+          }
+        }
+      })
+    ] });
+  }
+);
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const _FilterConditionDTO = class _FilterConditionDTO {
+  constructor(props, type, parent) {
+    __publicField$3(this, "state", { label: "", op: "" });
+    __publicField$3(this, "parent");
+    __publicField$3(this, "allowedOps", /* @__PURE__ */ new Set());
+    __publicField$3(this, "Component", observer(() => {
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          name: "filterCondition",
+          onChange: (ev) => this.setOp(ev.target.value),
+          children: Object.entries(this.getOpMap()).map(([key, value], idx) => {
+            return /* @__PURE__ */ jsx(
+              "option",
+              {
+                selected: this.state.op === key,
+                value: key,
+                children: value.text
+              },
+              `${key}_${idx}`
+            );
+          })
+        }
+      );
+    }));
+    switch (type) {
+      case "S":
+        [
+          "CONTAINS",
+          "DISTINCT",
+          "ENDS_WITH",
+          "EQUAL",
+          "NOT_CONTAINS",
+          "NOT_ENDS_WITH",
+          "NOT_STARTS_WITH",
+          "STARTS_WITH",
+          "NOT_NULL",
+          "NULL",
+          "IN",
+          "NOT_IN"
+        ].forEach((op) => this.allowedOps.add(op));
+        break;
+      case "D":
+        [
+          "EQUAL",
+          "DISTINCT",
+          "LOWER_THAN",
+          "LOWER_OR_EQUAL_THAN",
+          "GREATER_THAN",
+          "GREATER_OR_EQUAL_THAN",
+          "NOT_NULL",
+          "NULL",
+          "IN",
+          "NOT_IN",
+          "RANGE"
+        ].forEach((op) => this.allowedOps.add(op));
+        break;
+      case "N":
+        [
+          "EQUAL",
+          "DISTINCT",
+          "LOWER_THAN",
+          "LOWER_OR_EQUAL_THAN",
+          "GREATER_THAN",
+          "GREATER_OR_EQUAL_THAN",
+          "NOT_NULL",
+          "NULL",
+          "IN",
+          "NOT_IN",
+          "RANGE"
+        ].forEach((op) => this.allowedOps.add(op));
+        break;
+    }
+    this.state = props;
+    this.parent = parent;
+    this.state.label = this.getLabelByFilterOp().text;
+    makeObservable(this, { state: observable, parent: observable });
+  }
+  getLabelByFilterOp() {
+    return _FilterConditionDTO.opLabels[this.state.op];
+  }
+  getOpMap() {
+    return Object.keys(_FilterConditionDTO.opLabels).reduce(
+      (acc, key) => {
+        if (this.allowedOps.has(key)) {
+          acc[key] = _FilterConditionDTO.opLabels[key];
+        }
+        return acc;
+      },
+      {}
+    );
+  }
+  setOp(op) {
+    if ((this.state.op === "NULL" || this.state.op === "NOT_NULL") && op !== "NOT_NULL" && op !== "NULL") {
+      this.parent.setValue("");
+    }
+    this.state.op = op;
+  }
+};
+__publicField$3(_FilterConditionDTO, "opLabels", {
+  CONTAINS: getLabel("lblFilLik"),
+  DISTINCT: getLabel("lblFilNotEqu"),
+  ENDS_WITH: getLabel("lblFilLikLef"),
+  EQUAL: getLabel("lblFilEqu"),
+  NOT_CONTAINS: getLabel("lblFilNotLik"),
+  NOT_ENDS_WITH: getLabel("lblFilNotLikLef"),
+  NOT_STARTS_WITH: getLabel("lblFilNotLikRig"),
+  STARTS_WITH: getLabel("lblFilLikRig"),
+  NOT_NULL: getLabel("lblFilNotNull"),
+  NULL: getLabel("lblFilNull"),
+  LOWER_THAN: getLabel("lblFilLowerThan"),
+  LOWER_OR_EQUAL_THAN: getLabel("lblFilLowerOrEqualThan"),
+  GREATER_THAN: getLabel("lblFilGreaterThan"),
+  GREATER_OR_EQUAL_THAN: getLabel("lblFilGreaterOrEqualThan"),
+  IN: getLabel("lblFilIn"),
+  NOT_IN: getLabel("lblFilNotIn"),
+  RANGE: getLabel("lblFilRange")
+});
+let FilterConditionDTO = _FilterConditionDTO;
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class FilterDTO {
+  constructor(params, filterType, isTd = true) {
+    __publicField$2(this, "type", "filter");
+    __publicField$2(this, "state");
+    __publicField$2(this, "isTd");
+    __publicField$2(this, "ref", null);
+    __publicField$2(this, "Component", observer(
+      ({
+        renderers,
+        multipleInputBoxProps
+      }) => {
+        const value = this.getValue();
+        const type = this.getInputType();
+        let visualizationComponent = null;
+        const error = this.state.validationError ? /* @__PURE__ */ jsx(FieldErrorMessage, { children: this.state.validationError }) : null;
+        const InputRenderer = renderers?.input || Input;
+        switch (this.state.filterCondition.state.op) {
+          case "CONTAINS":
+          case "DISTINCT":
+          case "ENDS_WITH":
+          case "EQUAL":
+          case "NOT_CONTAINS":
+          case "NOT_ENDS_WITH":
+          case "NOT_STARTS_WITH":
+          case "STARTS_WITH":
+          case "GREATER_OR_EQUAL_THAN":
+          case "GREATER_THAN":
+          case "LOWER_OR_EQUAL_THAN":
+          case "LOWER_THAN": {
+            visualizationComponent = /* @__PURE__ */ jsx(
+              InputRenderer,
+              {
+                onChange: (ev) => {
+                  this.setValue(ev.target.value);
+                },
+                type,
+                value,
+                ref: (el) => this.ref = el
+              }
+            );
+            break;
+          }
+          case "IN":
+          case "NOT_IN":
+            visualizationComponent = /* @__PURE__ */ jsxs(Box, { ...multipleInputBoxProps, children: [
+              /* @__PURE__ */ jsx(
+                InputRenderer,
+                {
+                  onKeyDown: (ev) => {
+                    if (ev.key === "Enter") {
+                      this.setMultipleValue(this.getValue());
+                      this.setValue("");
+                    }
+                  },
+                  onChange: (ev) => {
+                    this.setValue(ev.target.value);
+                    ev.preventDefault();
+                  },
+                  type,
+                  value,
+                  ref: (el) => this.ref = el
+                }
+              ),
+              [...this.state.multipleValue ?? /* @__PURE__ */ new Set()].map((x, idx) => /* @__PURE__ */ jsxs(Box, { ...multipleInputBoxProps, className: "multiplesValuesBox", children: [
+                /* @__PURE__ */ jsx(
+                  InputRenderer,
+                  {
+                    onChange: (ev) => {
+                      this.setMultipleValue(ev.target.value, idx);
+                    },
+                    value: x,
+                    type
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: "Trash",
+                    onClick: () => {
+                      this.removeMultipleValue(x);
+                    }
+                  }
+                )
+              ] }))
+            ] });
+            break;
+          case "NOT_NULL":
+          case "NULL":
+            const isFixed = this.state.filterType === "F";
+            isFixed && this.setValue("true");
+            visualizationComponent = /* @__PURE__ */ jsx(
+              Checkbox$1,
+              {
+                disabled: isFixed,
+                type: "checkbox",
+                onChange: (ev) => this.setValue(ev.target.checked ? "true" : "false"),
+                checked: value === "true",
+                ref: (el) => this.ref = el
+              }
+            );
+            break;
+          case "RANGE":
+            if (this.state.multipleValue && this.state.multipleValue?.length >= 0 && this.isUndefined(this.state.multipleValue[0])) {
+              this.state.multipleValue[0] = "";
+            }
+            visualizationComponent = /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                InputRenderer,
+                {
+                  value: this.state.multipleValue && this.state.multipleValue?.length >= 0 && !this.isUndefined(this.state.multipleValue[0]) ? this.state.multipleValue[0] : "",
+                  label: getLabel("lblProEleTo").text,
+                  title: getLabel("lblProEleFrom").text,
+                  type,
+                  onChange: (ev) => {
+                    this.setMultipleValue(ev.target.value, 0);
+                  },
+                  ref: (el) => this.ref = el
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                InputRenderer,
+                {
+                  value: this.state.multipleValue && this.state.multipleValue?.length >= 0 && this.state.multipleValue[1] ? this.state.multipleValue[1] : "",
+                  label: getLabel("lblProEleTo").text,
+                  title: getLabel("lblProEleTo").text,
+                  type,
+                  onChange: (ev) => {
+                    if ((this.state.multipleValue ?? []).length < 1) {
+                      this.setMultipleValue("", 0);
+                    }
+                    this.setMultipleValue(ev.target.value, 1);
+                  }
+                }
+              ) })
+            ] });
+            break;
+          default:
+            throw new Error(
+              "Unknown condition: " + this.state.filterCondition.state.op
+            );
+        }
+        return /* @__PURE__ */ jsxs(Box, { variant: "layout.design.semanticSearch.filterBox", children: [
+          !this.isTd && /* @__PURE__ */ jsx("span", { children: this.getLabel() }),
+          visualizationComponent,
+          error
+        ] });
+      }
+    ));
+    this.state = params;
+    filterType && (this.state.filterType = filterType);
+    if (params.filterCondition && typeof params.filterCondition === "string") {
+      this.state.filterCondition = new FilterConditionDTO(
+        {
+          op: params.filterCondition
+        },
+        params.valueType,
+        this
+      );
+    }
+    if (this.state.value && (this.state.filterCondition.state.op === "IN" || this.state.filterCondition.state.op === "NOT_IN" || this.state.filterCondition.state.op === "RANGE")) {
+      this.state.multipleValue = (String(this.state.value) ?? "").split(",");
+      this.state.value = void 0;
+    }
+    this.state.visualizationType = params.visualizationType.toUpperCase();
+    this.state.hasFixedType = !!this.state.valueType;
+    makeObservable(this, {
+      state: observable,
+      setValue: action
+    });
+    this.isTd = isTd;
+  }
+  isCheckBox() {
+    return this.state.filterCondition.state.op === "NULL" || this.state.filterCondition.state.op === "NOT_NULL";
+  }
+  getStoreValue() {
+    return ["IN", "NOT_IN", "RANGE"].includes(
+      this.state.filterCondition.state.op
+    ) ? this.state.multipleValue?.filter((c) => !!c).join(",") : this.state.value;
+  }
+  getValue() {
+    if (!this.state.value && this.isCheckBox()) {
+      if (!FiltersStore.getFilter(this.state.name, "F")) {
+        this.state.value = String(this.state.value === "true");
+      } else {
+        this.state.value = "true";
+      }
+    }
+    return this.state.value;
+  }
+  getValueTypeLabel() {
+    switch (this.state.valueType) {
+      case "D":
+        return getLabel("lblDate").text;
+      case "N":
+        return getLabel("lblNum").text;
+      case "S":
+        return getLabel("lblStr").text;
+      default:
+        return this.state.valueType;
+    }
+  }
+  setMultipleValue(value, idx) {
+    if (!this.state.multipleValue) {
+      this.state.multipleValue = [];
+    }
+    if (this.state.multipleValue) {
+      if (idx !== void 0) {
+        this.state.multipleValue[idx] = value;
+      } else {
+        this.state.multipleValue.push(this.state.value);
+      }
+    }
+  }
+  setValue(value) {
+    this.state.value = value;
+  }
+  resolveMultipleValueInPayload() {
+    if (this.state.filterCondition.state.op === "IN" || this.state.filterCondition.state.op === "NOT_IN") {
+      return this.state.multipleValue?.join(",");
+    } else if (this.state.filterCondition.state.op === "RANGE") {
+      return this.state.multipleValue?.slice(0, 2).join(",");
+    }
+  }
+  asPayloadElement() {
+    const aux = toJS(this.state);
+    aux.filterCondition = this.state.filterCondition.state.op;
+    aux.multipleValue && (aux.value = this.resolveMultipleValueInPayload());
+    return aux;
+  }
+  asFilterValue() {
+    const value = this.state.multipleValue ? this.resolveMultipleValueInPayload() : this.state.value;
+    return value ? {
+      condition: this.state.filterCondition.state.op,
+      value,
+      type: this.state.valueType
+    } : null;
+  }
+  getInputType() {
+    return this.state.valueType === "N" ? "number" : this.state.valueType === "D" ? "date" : "text";
+  }
+  removeMultipleValue(value) {
+    this.state.multipleValue = (this.state.multipleValue ?? []).filter(
+      (x) => x !== value
+    );
+  }
+  isUndefined(value) {
+    return !value || !(value !== "undefined");
+  }
+  getLabel() {
+    return `${this.state.title} (${this.state.filterCondition.state.label})`;
+  }
+  validate() {
+    const storeValue = this.getStoreValue();
+    const isValid = this.state.filterType === "U" || storeValue !== void 0 && storeValue !== "";
+    this.state.validationError = isValid ? void 0 : getLabel("msgReqField").text;
+    return isValid;
+  }
+  clear() {
+    this.state.value = "";
+    this.state.multipleValue = [];
+  }
+  hasFilledValue() {
+    return this.state.value || this.state.multipleValue?.some((x) => x);
+  }
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const _FiltersStore = class _FiltersStore {
+  constructor() {
+    __publicField$1(this, "available", {});
+    __publicField$1(this, "fixed", {});
+    __publicField$1(this, "dynamic", {});
+    makeObservable(this, {
+      available: observable,
+      fixed: observable,
+      dynamic: observable
+    });
+  }
+  /**
+   * Takes the string generated by the ParametersStore in the server
+   * and assigns it to the current filters
+   */
+  static getFiltersFromResponse(response, from = "available") {
+    const parsed = JSON.parse(response);
+    const newFilters = {};
+    Object.entries(parsed[from]).forEach(([name, param]) => {
+      newFilters[name] = new FilterDTO(param);
+    });
+    return newFilters;
+  }
+  static setFiltersFromObject(response) {
+    this.instance.available = this.getFiltersFromObject(response.available);
+    this.instance.dynamic = this.getFiltersFromObject(response.dynamic);
+    this.instance.fixed = this.getFiltersFromObject(response.fixed);
+  }
+  static getFiltersFromObject(response) {
+    const newFilters = {};
+    Object.entries(response).forEach(([name, param]) => {
+      if (!(param instanceof FilterDTO)) {
+        param = new FilterDTO(param);
+      }
+      newFilters[name] = param;
+    });
+    return newFilters;
+  }
+  /**
+   * Returns the filters for a given name.
+   */
+  static getFilter(name, type) {
+    return !type ? this.instance.available[name] : type === "F" ? this.instance.fixed[name] : this.instance.dynamic[name];
+  }
+  /**
+   * Set filter into store given owner name
+   */
+  static setFilter(value, type, replace = true) {
+    const newFilter = new FilterDTO(value.state, type);
+    if (!type) {
+      this.instance.available[value.state.name] = newFilter;
+    } else if (type === "F" && (!replace && !this.instance.fixed[value.state.name] || replace)) {
+      this.instance.fixed[value.state.name] = newFilter;
+    } else if (type === "U" && (!replace && !this.instance.dynamic[value.state.name] || replace)) {
+      this.instance.dynamic[value.state.name] = newFilter;
+    }
+  }
+  /**
+   * Remove into store given owner name
+   */
+  static removeFilter(x, type) {
+    if (!type) {
+      delete this.instance.available[x.state.name];
+      delete this.instance.fixed[x.state.name];
+      delete this.instance.dynamic[x.state.name];
+    } else if (type === "U") {
+      delete this.instance.dynamic[x.state.name];
+      x.state.filterType = void 0;
+    } else if (type === "F") {
+      delete this.instance.fixed[x.state.name];
+      x.state.filterType = void 0;
+    }
+  }
+  /**
+   * Resets the parameters store.
+   */
+  static reset() {
+    _FiltersStore.instance.available = {};
+    _FiltersStore.instance.fixed = {};
+    _FiltersStore.instance.dynamic = {};
+  }
+  static size() {
+    return Object.keys(_FiltersStore.instance.available).length;
+  }
+  static setFilters(filters, type) {
+    !type ? this.instance.available = filters : type === "F" ? this.instance.fixed = filters : this.instance.dynamic = filters;
+  }
+  static filters(type) {
+    return !type ? _FiltersStore.instance.available : type === "F" ? _FiltersStore.instance.fixed : _FiltersStore.instance.dynamic;
+  }
+  static parseFiltersAsFilterValue(values) {
+    return values.reduce((x, y) => {
+      const value = y.asFilterValue();
+      if (value) {
+        x[y.state.name] = value;
+      }
+      return x;
+    }, {});
+  }
+  static getFiltersAsFilterValue(type) {
+    return _FiltersStore.parseFiltersAsFilterValue(_FiltersStore.values(type));
+  }
+  static getAllFilters(includeAvailable) {
+    const retList = [];
+    includeAvailable && retList.push(...Object.values(_FiltersStore.instance.available));
+    retList.push(...Object.values(_FiltersStore.instance.fixed));
+    retList.push(...Object.values(_FiltersStore.instance.dynamic));
+    return retList;
+  }
+  static values(type) {
+    return !type ? Object.values(_FiltersStore.instance.available) : type === "F" ? Object.values(_FiltersStore.instance.fixed) : Object.values(_FiltersStore.instance.dynamic);
+  }
+  static entries(type) {
+    return !type ? Object.entries(_FiltersStore.instance.available) : type === "F" ? Object.entries(_FiltersStore.instance.fixed) : Object.entries(_FiltersStore.instance.dynamic);
+  }
+  static keys(type) {
+    return !type ? Object.keys(_FiltersStore.instance.available) : type === "F" ? Object.keys(_FiltersStore.instance.fixed) : Object.keys(_FiltersStore.instance.dynamic);
+  }
+  static async getFiltersById(id) {
+    const response = (
+      /* await ApiaApi.post<{
+        parameters: string;
+      }>(
+        makeApiaUrl({
+          ajaxUrl: 'apia.design.SemanticSearchAction.run',
+          action: 'getFiltersBySemSerId',
+          id,
+        }),
+      );*/
+      {}
+    );
+    const filters = this.getFiltersFromResponse(
+      response?.data?.parameters ?? "",
+      "dynamic"
+    );
+    Object.values(filters).forEach((x) => x.isTd = false);
+    return filters;
+  }
+  static asPayloadElement() {
+    return _FiltersStore.getAllFilters().map((x) => x.asPayloadElement());
+  }
+  static validate() {
+    let isValid = true;
+    let firstInvalid = null;
+    for (const f of _FiltersStore.getAllFilters()) {
+      isValid && (isValid = f.validate());
+      if (!isValid && !firstInvalid) {
+        firstInvalid = f;
+      }
+    }
+    firstInvalid?.ref?.focus();
+    return isValid;
+  }
+};
+__publicField$1(_FiltersStore, "instance", new _FiltersStore());
+let FiltersStore = _FiltersStore;
+
+const AttributeParsers = [
+  /**
+   * Allows to pass javascript event handlers through the format
+   * onEventDispatched, the main difficulty is that the html parser returns the
+   * attributes with lowercase, that's why any attribute of the type
+   * onEventDispatched will be passed to the component as onEventdispatched
+   * (note the lowercase 'd').
+   */
+  {
+    match: /^(?:data-)?on(.*)$/i,
+    parse([, originalAction], value) {
+      if (value.match(/^__contextMethod/))
+        return [
+          {
+            newName: `on${originalAction[0].toUpperCase()}${originalAction.slice(
+              1
+            )}`,
+            newValue: value
+          }
+        ];
+      let newName = `on${originalAction.charAt(0).toUpperCase()}${originalAction.slice(1)}`;
+      const composedEvent = originalAction.match(/^(mouse|key|double)(.*)$/i);
+      if (composedEvent) {
+        newName = `on${composedEvent[1].charAt(0).toUpperCase()}${composedEvent[1].slice(1)}${composedEvent[2].charAt(0).toUpperCase()}${composedEvent[2].slice(1)}`;
+      }
+      return [
+        {
+          newName,
+          newValue: (ev) => {
+            const evalString = value.replace(/return [^;\n\r]+/, "");
+            const f = eval(evalString);
+            f(ev);
+          }
+        }
+      ];
+    }
+  },
+  {
+    /**
+     * Allows to pass style objects as JSON strings
+     */
+    match: /^data-style$/,
+    parse(_match, value2) {
+      try {
+        return [{ newName: "style", newValue: JSON.parse(value2) }];
+      } catch (e) {
+        console.error({ value: value2, e });
+      }
+      return null;
+    }
+  },
+  {
+    /**
+     * Allows conditional rendering of a component
+     */
+    match: /^data-render$/,
+    parse(_match, originalValue) {
+      if (originalValue !== "" && !JSON.parse(originalValue)) {
+        throw new Command("COMMAND: PREVENT_RENDERING");
+      }
+      return [
+        {
+          newName: "data-render",
+          newValue: void 0
+        }
+      ];
+    }
+  },
+  {
+    /**
+     * Allow to pass json data as property to the components
+     */
+    match: /^data-json-([a-zA-Z][\w_]*)$/,
+    parse: ([, name], originalValue) => {
+      try {
+        return [
+          {
+            newName: name,
+            newValue: JSON.parse(originalValue)
+          }
+        ];
+      } catch (e) {
+        console.info(`Prop: ${name}, originalValue: ${originalValue}`);
+        console.error(e);
+        return null;
+      }
+    }
+  },
+  {
+    match: /^data(?:-dom)?-variant$/,
+    parse(_, newValue) {
+      return [
+        { newName: "data-variant", newValue },
+        { newName: "variant", newValue }
+      ];
+    }
+  },
+  {
+    match: /^data-dom-([a-zA-Z][\w_]*)/i,
+    parse([, name], newValue) {
+      return [{ newName: `data-${name}`, newValue }];
+    }
+  },
+  {
+    /**
+     * Change all the attributes whose name matches with data-(name) to just
+     * name
+     */
+    match: /^data-([a-zA-Z][\w_]*)$/,
+    parse: ([, newName2], newValue) => [{ newName: newName2, newValue }]
+  },
+  /**
+   * Allows to pass conditional data to a component. It accepts as value a JSON
+   * string with the following structure:
+   *
+   * data-condition-NAME_OF_ATTRIBUTE=`
+   * {
+   *  "condition": CONDITION,
+   *  "NAME_OF_ATTRIBUTE": VALUE_TO_PASS_TO_THE_COMPONENT
+   * }
+   *
+   * Where:
+   *  - NAME_OF_ATTRIBUTE can be anything you want, the only limitations are
+   *  the attribute names limitations. - CONDITION will be evaluated with a
+   *  ternary conditional, if it parses to true the value will be passed or
+   *  hidden elsewhere - VALUE_TO_PASS_TO_THE_COMPONENT Since all the attribute
+   *  will be parsed with JSON, the value to pass can be anything that
+   *      can be parsed this way.
+   */
+  {
+    match: /^data-condition-([a-zA-Z][\w_]*)$/,
+    parse: ([, newName2], value2) => {
+      try {
+        const parsedValue = JSON.parse(value2);
+        return [
+          {
+            newName: newName2,
+            newValue: parsedValue.condition ? parsedValue[newName2] : void 0
+          }
+        ];
+      } catch (e) {
+        console.error(e);
+      }
+      return null;
+    }
+  },
+  {
+    match: /^tabindex/i,
+    parse(_, newValue) {
+      return [{ newName: "tabIndex", newValue }];
+    }
+  }
+];
+
+const PathShortcuts = {};
+
+const AttributeFilters = ["data-template", "data-component", "style"];
+
+const AttributeReplacers = {
+  // Common html props
+  class: "className",
+  colspan: "colSpan",
+  for: "htmlFor",
+  readonly: "readOnly",
+  autocomplete: "autoComplete",
+  // Chart button
+  chartid: "chartId",
+  // Dynamic button
+  apiaprops: "apiaProps",
+  // Profiles props
+  // Users administration
+  isglobal: "isGlobal",
+  iscreate: "isCreate",
+  ldapfull: "ldapFull",
+  passwordprops: "passwordProps",
+  // Validation fields
+  initialvalue: "initialValue",
+  submitvalueparser: "submitValueParser",
+  validationclass: "validationClass",
+  validationfunction: "validationFunction",
+  validationrules: "validationRules",
+  allowpickbeforetoday: "allowPickBeforeToday",
+  evtmetafilters: "evtMetaFilters",
+  trafreemetafilters: "traFreeMetaFilters",
+  // Documents info modal
+  allowdownload: "allowDownload",
+  // Documents upload modal
+  allowpickfromdirectories: "allowPickFromDirectories",
+  allowpickfrommonitor: "allowPickFromMonitor",
+  // Document Info modal
+  frommonitor: "fromMonitor",
+  showhistory: "showHistory",
+  showdownloadinfo: "showDownloadInfo",
+  showpermissions: "showPermissions",
+  // LangPicker
+  currentlang: "currentLang",
+  // Change Dates Modal
+  dateinputname: "dateInputName",
+  initiallyexpanded: "initiallyExpanded",
+  buttonsactions: "buttonsActions",
+  // Reports
+  reportname: "reportName"
+};
+
+const ComplexReplacements = [
+  (domNode, _, customOptions, commentsData) => {
+    if (domNode.attribs["data-prevent-parse"] && domNode.attribs["data-prevent-parse"].trim() === "true") {
+      return null;
+    }
+    if (domNode.attributes.find((current) => current.name === "data-fragment")) {
+      const children = domToReact(
+        cloneDeep(domNode.children),
+        parseOptions(customOptions, commentsData)
+      );
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    return false;
+  }
+];
+
+const TagReplacers = {
+  div: Box,
+  button: Button,
+  container: Container,
+  h1: (props) => /* @__PURE__ */ jsx(Heading, { as: "h1", ...props }),
+  h2: (props) => /* @__PURE__ */ jsx(Heading, { as: "h2", ...props }),
+  h3: (props) => /* @__PURE__ */ jsx(Heading, { as: "h3", ...props }),
+  h4: (props) => /* @__PURE__ */ jsx(Heading, { as: "h4", ...props }),
+  h5: (props) => /* @__PURE__ */ jsx(Heading, { as: "h5", ...props }),
+  h6: (props) => /* @__PURE__ */ jsx(Heading, { as: "h6", ...props }),
+  img: Image,
+  label: Label,
+  input: Input,
+  p: Paragraph,
+  select: Select
+};
+
+const contextMethods = {};
+
+const AttributeValueParsers = (currentValue) => {
+  if (currentValue === "true")
+    return true;
+  if (currentValue === "false")
+    return false;
+  if (typeof currentValue === "string") {
+    const result = currentValue.match(/^__contextMethod\.(\w+)\.(\w+)$/);
+    if (result) {
+      return contextMethods[result[1]][result[2]];
+    }
+  }
+  return currentValue;
+};
+
+function isMessage(error) {
+  return !!(typeof error === "object" && error && "message" in error);
+}
+function processCommand(command) {
+  return Commands[command]();
+}
+const Commands = {
+  PREVENT_RENDERING: () => null
+};
+
+const CommentsParsers = [
+  {
+    /**
+     * This parser allows to put a comment with the structure:
+     * <!-- addRoute<newName,path/to/the/components> -->
+     * And then use it in replacement of the path:
+     *
+     * @example
+     *
+     * <!-- addRoute<modals,path/to/the/modals> -->
+     * <div data-component="modals/Info">...
+     */
+    match: /addRoute *<(.{2,}),(.+)>/,
+    parse(result, commentsData) {
+      const routeShourtcut = result[1];
+      const routePath = result[2];
+      const newData = cloneDeep(commentsData);
+      newData.customShortcuts.push([
+        parseShortcut(routeShourtcut),
+        routePath
+      ]);
+      return newData;
+    }
+  },
+  {
+    /**
+     * This parser allows anybody to put a comment with the structure:
+     * <!-- SuspenseComponent<path/to/Component> --> or
+     * <!-- SuspenseComponent<null> -->
+     * which will result in a custom for the lazy components.
+     */
+    match: /SuspenseComponent *<(\w+)>/,
+    parse(result, commentsData) {
+      const responseData = commentsData;
+      if (result[1].toLowerCase() === "spinner")
+        responseData.SuspenseComponent = Spinner$1;
+      else
+        responseData.SuspenseComponent = importTemplaterComponent(result[1]);
+      return responseData;
+    }
+  }
+];
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var _actuallyParse;
+console.time("Templater parse");
+console.time("Templater pre screen unlock");
+function importTemplaterComponent(path) {
+  return lazy(() => {
+    return new Promise((resolve) => {
+      import(
+        /* webpackChunkName: "[request]" */
+        /* webpackInclude: /\.tsx?$/ */
+        /* webpackPreload: true */
+        /* webpackExclude: /projectAnalysisTree/ */
+        `/src/dynamic/${path}`
+      ).then((result2) => {
+        resolve(result2);
+      }).catch((error) => {
+        resolve({
+          default: () => {
+            console.error(error);
+            throw new Error(
+              `The above error ocurred at component ${path}, does it exist?`
+            );
+          }
+        });
+      });
+    });
+  });
+}
+function parseShortcut(shortcut) {
+  if ("^($)[.".indexOf(shortcut) !== -1)
+    return `\\${shortcut}`;
+  return shortcut;
+}
+const parsedShortcuts = Object.entries(PathShortcuts).map(
+  ([shortcut, path]) => {
+    return [parseShortcut(shortcut), path];
+  }
+);
+const Wrapper = ({
+  children,
+  onMount
+}) => {
+  React.useEffect(() => {
+    if (onMount) {
+      onMount();
+    }
+    return () => {
+    };
+  }, []);
+  return children;
+};
+const Command = Error;
+function makeEmptyCommentsData() {
+  return { customShortcuts: [], SuspenseComponent: () => null };
+}
+const parseOptions = (customOptions, commentsData) => {
+  let actualCommentsData = commentsData ?? makeEmptyCommentsData();
+  return {
+    trim: true,
+    replace: (domNode) => {
+      if (customOptions?.debug)
+        console.log(domNode);
+      if (domNode.type.toLowerCase() === "comment") {
+        CommentsParsers.forEach((parser) => {
+          const matchResult = domNode.data.match(
+            parser.match
+          );
+          if (matchResult) {
+            actualCommentsData = parser.parse(matchResult, actualCommentsData);
+          }
+        });
+      }
+      if (domNode instanceof Element && domNode.attribs) {
+        let componentName = domNode.attribs["data-component"];
+        if (componentName) {
+          actualCommentsData.customShortcuts.forEach(
+            ([shortcut, replacement]) => {
+              if (componentName.match(new RegExp(`^${shortcut}.+`))) {
+                componentName = replacement + componentName.slice(shortcut.length);
+              }
+            }
+          );
+          parsedShortcuts.forEach(([shortcut, replacement]) => {
+            if (componentName.match(new RegExp(`^${shortcut}.+`))) {
+              componentName = replacement + componentName.slice(shortcut.length);
+            }
+          });
+          if (componentName.startsWith("@"))
+            componentName = componentName.slice(1);
+        }
+        try {
+          const Component = componentName ? importTemplaterComponent(componentName) : TagReplacers[domNode.name] ?? ((props3) => /* @__PURE__ */ jsx(Box$1, { as: domNode.name, ...props3 }));
+          for (let i = 0; i < ComplexReplacements.length; i++) {
+            const complexReplacement = ComplexReplacements[i];
+            const result2 = complexReplacement(
+              domNode,
+              Component,
+              customOptions,
+              commentsData
+            );
+            if (result2 !== false)
+              return /* @__PURE__ */ jsx(Suspense, { children: result2 });
+          }
+          [
+            ...AttributeFilters,
+            ...customOptions?.filterAttributes ?? []
+          ].forEach((att) => {
+            delete domNode.attribs[att];
+          });
+          const props2 = Object.entries(domNode.attribs).reduce(
+            (dictionary, [initialName, initialValue]) => {
+              const name = initialName;
+              const value = initialValue;
+              let hasParsed = false;
+              const returnDictionary = { ...dictionary };
+              for (let i = 0; i < AttributeParsers.length; i++) {
+                const parser = AttributeParsers[i];
+                const match = name.match(parser.match);
+                if (customOptions?.debug)
+                  console.log(parser.match, match);
+                if (match) {
+                  const parsed = parser.parse(match, value);
+                  if (customOptions?.debug)
+                    console.log(parser.match, parsed);
+                  if (parsed) {
+                    parsed.forEach(({ newName, newValue }) => {
+                      const finalName = {
+                        ...AttributeReplacers,
+                        ...customOptions?.attributesReplacement ?? {}
+                      }[newName] ?? newName;
+                      returnDictionary[finalName] = AttributeValueParsers(newValue);
+                    });
+                    hasParsed = true;
+                  }
+                  break;
+                }
+              }
+              if (!hasParsed) {
+                const newName = {
+                  ...AttributeReplacers,
+                  ...customOptions?.attributesReplacement ?? {}
+                }[name] ?? name;
+                returnDictionary[newName] = AttributeValueParsers(value);
+              }
+              return returnDictionary;
+            },
+            {}
+          );
+          const children = domToReact(
+            cloneDeep(domNode.children),
+            parseOptions(customOptions, actualCommentsData)
+          );
+          delete props2.children;
+          const { onComponentload } = props2;
+          if (onComponentload) {
+            delete props2.onComponentload;
+          }
+          if (actualCommentsData.SuspenseComponent) {
+            if (onComponentload) {
+              return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Wrapper, { onMount: onComponentload, children: /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null }) }) });
+            }
+            return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null }) });
+          }
+          if (onComponentload)
+            return /* @__PURE__ */ jsx(Wrapper, { onMount: onComponentload, children: /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null }) });
+          return /* @__PURE__ */ jsx(Component, { ...props2, children: domNode.children.length > 0 ? children : null });
+        } catch (e) {
+          if (isMessage(e)) {
+            const match = e.message.match(/COMMAND: *(\w[\w\d_-]*)/);
+            if (match) {
+              return processCommand(match[1]);
+            }
+          }
+          console.error(e);
+        }
+      }
+      return domNode;
+    },
+    htmlparser2: { lowerCaseAttributeNames: false }
+  };
+};
+const _Templater = class _Templater {
+  constructor() {
+    __publicField(this, "isDownloadingTemplate", false);
+    __publicField(this, "templates", {});
+    __privateAdd(this, _actuallyParse, (html, options) => {
+      let actualHTML = html;
+      if (window.onPreParseTemplate) {
+        const parser = new DOMParser();
+        const document2 = parser.parseFromString(html, "text/html");
+        window.onPreParseTemplate?.(document2);
+        actualHTML = document2.body.innerHTML;
+      }
+      return parse(actualHTML, options);
+    });
+    this.initTemplates();
+  }
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new _Templater();
+    }
+    return this._instance;
+  }
+  initTemplates() {
+    const templates = [
+      ...document.querySelectorAll("[data-template]")
+    ];
+    const templatesObject = templates.reduce((dictionary, template) => {
+      const name = template.getAttribute("data-template");
+      if (!name)
+        return dictionary;
+      return {
+        ...dictionary,
+        [name]: this.parseContent(name, template.outerHTML, {})
+      };
+    }, {});
+    templates.forEach((template) => template.remove());
+    this.templates = templatesObject;
+  }
+  /**
+   * This method parses the string looking for <script class="context"> tags
+   * and placeholders, run that code and make the replacements in the template
+   * string.
+   *
+   * @param content The HTML string
+   */
+  parseContent(templateName, content, props) {
+    function shoutError(error) {
+      console.error("%cParse template error", "font-size: 16px; margin: 10px");
+      throw new Error(`${error} at template ${templateName}`);
+    }
+    let context = {};
+    let newContent = content.replaceAll(
+      /data-json-([\w_-]+)="([^"]+)"/g,
+      (_2, propName, propValue) => {
+        return `data-json-${propName}='${propValue.replaceAll(
+          "'",
+          "&apos;"
+        )}'`;
+      }
+    ).replaceAll(
+      /<script [^>]*class="context"[^>]*>([\s\S]*?)<\/script>/g,
+      (_, scriptContent) => {
+        if (scriptContent.match(/window[^=;]*=/))
+          throw new Error("Assignment to window is forbidden");
+        try {
+          context = {
+            ...context,
+            ...eval(`{
+              let context = JSON.parse(\`${JSON.stringify(context).replaceAll(
+              '"',
+              '\\"'
+            )}\`);
+              ${scriptContent};
+              context
+            }`)
+          };
+        } catch (e) {
+          console.info(`Script contents: ${scriptContent}`);
+          console.info(`Props`, props);
+          shoutError(e);
+        }
+        return "";
+      }
+    );
+    const contextId = uniqueId$3();
+    const replacementVars = { context, props };
+    Object.entries(replacementVars).forEach(([varName, varContent]) => {
+      if (varContent)
+        Object.entries(varContent).forEach(([key, value]) => {
+          if (isFunction$1(value)) {
+            if (!contextMethods[contextId])
+              contextMethods[contextId] = {};
+            const methodId = uniqueId$3();
+            contextMethods[contextId][methodId] = value;
+            newContent = newContent.replaceAll(
+              new RegExp(`{{\\s*(${varName})\\??.${key}\\s*}}`, "g"),
+              `__contextMethod.${contextId}.${methodId}`
+            );
+          } else
+            newContent = newContent.replaceAll(
+              new RegExp(`{{\\s*(${varName})\\??.${key}\\s*}}`, "g"),
+              value !== void 0 ? value : ""
+            );
+        });
+    });
+    newContent = newContent.replaceAll(
+      /{{\s*(context|props)\?.([_$a-zA-Z]\w+)\s*}}/g,
+      ""
+    );
+    const result = newContent.match(
+      /\{\{(context|props)\.([_$a-zA-Z]\w+)\\s*}}/
+    );
+    if (result)
+      shoutError(`${result[1]}.${result[2]} is undefined`);
+    return newContent;
+  }
+  /**
+   * This method takes a template from the HTML Document and parses it to React
+   * Components.
+   *
+   * @param name The name of the template you are looking for, it must be specified as
+   * data-template="name" in the HTML element you want to use as template.
+   * @param options This argument allows you to alter the behavior of the parser, for example
+   * to replace some attribute names, parse some attributes with a custom parser function or
+   * discard some attributes. See the type IAlterDefaultOptions to get more information
+   *
+   * @returns A ReactComponent as the result of the parsed HTML template.
+   */
+  getTemplateByName(name, options) {
+    if (!this.templates[name])
+      throw new Error("There is no template with such name, ", name);
+    const component = __privateGet(this, _actuallyParse).call(this, this.parseContent(name, this.templates[name], options?.props), parseOptions(options));
+    return component;
+  }
+  /**
+   * This method parses a string in HTML to React Components.
+   *
+   * @param content The HTML string to parse to React Components
+   * @param options This argument allows you to alter the behavior of the parser, for example
+   * to replace some attribute names, parse some attributes with a custom parser function or
+   * discard some attributes. See the type IAlterDefaultOptions to get more information
+   *
+   * @returns A ReactComponent as the result of the parsed HTML template.
+   */
+  parseString(content2, options) {
+    return __privateGet(this, _actuallyParse).call(this, this.parseContent("parseStringTemplate", content2, options?.props), parseOptions(options));
+  }
+};
+_actuallyParse = new WeakMap();
+__publicField(_Templater, "_instance", null);
+let Templater = _Templater;
+
+export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, AutocompleteController, BaseButton, CalendarModal, Captcha, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, FilterConditionDTO, FilterDTO, FiltersStore, IconButton, IconInput, IconsList, LabelBox, LinearLoader, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, ProgressBar, RequiredMark, ScreenLocker, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, isParametersGroup, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton, useTabsContext };
 //# sourceMappingURL=index.js.map