@apia/components 4.0.19 → 4.0.24

package/dist/index.js

@@ -3,11 +3,11 @@ import * as React 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 { uniqueId as uniqueId$3, debounce, cloneDeep, isFunction } from 'lodash-es';
 import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, Progress, Label, Paragraph, Container, Form, focusOutline, makeStyledComponent, useThemeUI, Grid, Textarea } 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, customEvents, isChild, useUnmount, StatefulEmitter, shallowEqual as shallowEqual$1, debugDispatcher, getDateFormat, AudioRecorder, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, arrayOrArray } from '@apia/util';
+import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, EventEmitter, useMount, getLabel, getSpecificParent, customEvents, isChild, useUnmount, StatefulEmitter, shallowEqual as shallowEqual$1, getDateFormat, uniqueId as uniqueId$4, AudioRecorder, 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 { uniqueId as uniqueId$1, defaultNotifier, NotificationsList } from '@apia/notifications';
@@ -20,12 +20,14 @@ import { useMenuState, ControlledMenu, MenuItem, MenuDivider, SubMenu } from '@s
 import { shallowEqual } from '@apia/store';
 import AnimateHeight from 'react-animate-height';
 import { useUpdateEffect as useUpdateEffect$1 } from 'ahooks';
+import { FaCalendarAlt } from '@meronex/icons/fa';
 import dayjs from 'dayjs';
-import isFunction from 'lodash-es/isFunction';
+import Calendar from 'react-calendar';
 import ReactInputMask from 'react-input-mask';
 import { Collector } from '@apia/validations';
 import { Remarkable } from 'remarkable';
 import { IconButton as IconButton$2, ApiaUtil as ApiaUtil$1 } from '@apia/components';
+import isFunction$1 from 'lodash-es/isFunction';
 import { createFAsomeStore } from '@apia/dom-store';
 import { keyframes } from '@emotion/react';
 
@@ -1021,68 +1023,68 @@ var __publicField$r = (obj, key, value) => {
   __defNormalProp$r(obj, key + "" , value);
   return value;
 };
-var __accessCheck$d = (obj, member, msg) => {
+var __accessCheck$c = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$a = (obj, member, getter) => {
-  __accessCheck$d(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$d = (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$8 = (obj, member, value, setter) => {
-  __accessCheck$d(obj, member, "write to private field");
+var __privateSet$7 = (obj, member, value, setter) => {
+  __accessCheck$c(obj, member, "write to private field");
   member.set(obj, value);
   return value;
 };
 var __privateMethod$3 = (obj, member, method) => {
-  __accessCheck$d(obj, member, "access private method");
+  __accessCheck$c(obj, member, "access private method");
   return method;
 };
-var _isLocked, _onChangeCb, _onDestroyCb, _evaluate, evaluate_fn, _a$1;
+var _isLocked, _onChangeCb, _onDestroyCb, _evaluate, evaluate_fn, _a;
 class BodyScrollLocker {
   constructor() {
-    __privateAdd$d(this, _isLocked, false);
-    __privateAdd$d(this, _onChangeCb, () => {
+    __privateAdd$c(this, _isLocked, false);
+    __privateAdd$c(this, _onChangeCb, () => {
     });
-    __privateAdd$d(this, _onDestroyCb, () => {
+    __privateAdd$c(this, _onDestroyCb, () => {
     });
   }
   get isLocked() {
-    return __privateGet$a(this, _isLocked);
+    return __privateGet$9(this, _isLocked);
   }
   destroy() {
-    __privateGet$a(this, _onDestroyCb).call(this);
+    __privateGet$9(this, _onDestroyCb).call(this);
   }
   lock() {
-    __privateSet$8(this, _isLocked, true);
-    __privateGet$a(this, _onChangeCb).call(this);
+    __privateSet$7(this, _isLocked, true);
+    __privateGet$9(this, _onChangeCb).call(this);
   }
   unlock() {
-    __privateSet$8(this, _isLocked, false);
-    __privateGet$a(this, _onChangeCb).call(this);
+    __privateSet$7(this, _isLocked, false);
+    __privateGet$9(this, _onChangeCb).call(this);
   }
   onChange(cb) {
-    __privateSet$8(this, _onChangeCb, cb);
-    return () => __privateSet$8(this, _onChangeCb, () => {
+    __privateSet$7(this, _onChangeCb, cb);
+    return () => __privateSet$7(this, _onChangeCb, () => {
     });
   }
   onDestroy(cb) {
-    __privateSet$8(this, _onDestroyCb, cb);
-    return () => __privateSet$8(this, _onDestroyCb, () => {
+    __privateSet$7(this, _onDestroyCb, cb);
+    return () => __privateSet$7(this, _onDestroyCb, () => {
     });
   }
 }
 _isLocked = new WeakMap();
 _onChangeCb = new WeakMap();
 _onDestroyCb = new WeakMap();
-const BodyScrollLock = new (_a$1 = class {
+const BodyScrollLock = new (_a = class {
   constructor() {
-    __privateAdd$d(this, _evaluate);
+    __privateAdd$c(this, _evaluate);
     __publicField$r(this, "lockers", []);
   }
   getLocker() {
@@ -1103,7 +1105,7 @@ const BodyScrollLock = new (_a$1 = class {
   document.body.style.overflow = willLock ? "hidden" : "auto";
   if (!(willLock && document.body.scrollHeight > document.body.clientHeight))
     document.body.style.paddingRight = "0px";
-}, _a$1)();
+}, _a)();
 function useBodyScrollLock(isLocked) {
   useEffect(() => {
     const locker = BodyScrollLock.getLocker();
@@ -1374,6 +1376,7 @@ const OpenModal = (props) => {
         ...modalProps,
         onExited: () => {
           props.onClose?.();
+          props.onExited?.();
           if (!hasConfirmed.current) {
             props.onCancel?.();
           }
@@ -1414,30 +1417,30 @@ var __publicField$q = (obj, key, value) => {
   __defNormalProp$q(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$c = (obj, member, msg) => {
+var __accessCheck$b = (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$8 = (obj, member, getter) => {
+  __accessCheck$b(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$c = (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 __privateSet$7 = (obj, member, value, setter) => {
-  __accessCheck$c(obj, member, "write to private field");
+var __privateSet$6 = (obj, member, value, setter) => {
+  __accessCheck$b(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);
+    __privateSet$6(obj, member, value);
   },
   get _() {
-    return __privateGet$9(obj, member, getter);
+    return __privateGet$8(obj, member, getter);
   }
 });
 var _emitter$4, _maxId$1, _maxOverlay, _useModalsList;
@@ -1449,15 +1452,15 @@ class ApiaUtilModalHandler {
 class ApiaUtilModals {
   constructor() {
     __publicField$q(this, "overlays", []);
-    __privateAdd$c(this, _emitter$4, new EventEmitter());
-    __privateAdd$c(this, _maxId$1, 0);
-    __privateAdd$c(this, _maxOverlay, 0);
-    __privateAdd$c(this, _useModalsList, () => {
+    __privateAdd$b(this, _emitter$4, new EventEmitter());
+    __privateAdd$b(this, _maxId$1, 0);
+    __privateAdd$b(this, _maxOverlay, 0);
+    __privateAdd$b(this, _useModalsList, () => {
       const [modals, setModals] = useState(
         []
       );
       useMount(() => {
-        const u1 = __privateGet$9(this, _emitter$4).on("open", (ev) => {
+        const u1 = __privateGet$8(this, _emitter$4).on("open", (ev) => {
           setModals((current) => [
             ...current,
             {
@@ -1473,12 +1476,12 @@ class ApiaUtilModals {
             }
           ]);
         });
-        const u2 = __privateGet$9(this, _emitter$4).on("closeAll", () => {
+        const u2 = __privateGet$8(this, _emitter$4).on("closeAll", () => {
           setModals(
             (current) => current.map((modal) => ({ ...modal, isOpen: false }))
           );
         });
-        const u3 = __privateGet$9(this, _emitter$4).on("close", (modalId) => {
+        const u3 = __privateGet$8(this, _emitter$4).on("close", (modalId) => {
           setModals(
             (current) => current.map(
               (modal) => modal.id === modalId ? { ...modal, isOpen: false } : modal
@@ -1494,7 +1497,7 @@ class ApiaUtilModals {
       return modals;
     });
     __publicField$q(this, "Component", observer(() => {
-      const modals = __privateGet$9(this, _useModalsList).call(this);
+      const modals = __privateGet$8(this, _useModalsList).call(this);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         modals.map((current) => /* @__PURE__ */ jsx(OpenModal, { ...current }, current.id)),
         this.overlays.map((c) => c.render)
@@ -1509,13 +1512,13 @@ class ApiaUtilModals {
     });
   }
   close(id) {
-    __privateGet$9(this, _emitter$4).emit("close", id);
+    __privateGet$8(this, _emitter$4).emit("close", id);
   }
   open(props) {
     const id = props.id ?? `modal_${__privateWrapper$2(this, _maxId$1)._++}`;
-    __privateGet$9(this, _emitter$4).emit("open", { ...props, id });
+    __privateGet$8(this, _emitter$4).emit("open", { ...props, id });
     return new ApiaUtilModalHandler(() => {
-      __privateGet$9(this, _emitter$4).emit("close", id);
+      __privateGet$8(this, _emitter$4).emit("close", id);
     });
   }
   /**
@@ -1609,6 +1612,10 @@ const TabsContext = React__default.createContext(null);
 function useTabsContext() {
   return React__default.useContext(TabsContext);
 }
+const CurrentTabContext = React__default.createContext(null);
+function useCurrentTab() {
+  return React__default.useContext(CurrentTabContext);
+}
 
 const ContextMenu = observer(
   ({
@@ -1860,7 +1867,10 @@ function useShowScrollButtons() {
 }
 
 const TabsList = observer(
-  ({ arrowsBehavior = "focus" }) => {
+  ({
+    arrowsBehavior = "focus",
+    children
+  }) => {
     const controller = useTabsContext();
     const [showScrollButtons, setRef] = useShowScrollButtons();
     const onClickPrev = React__default.useCallback(() => {
@@ -1894,6 +1904,7 @@ const TabsList = observer(
         ...getVariant("layout.common.tabs.primary"),
         ref: setRef,
         children: [
+          children?.beforeFixedTabs,
           /* @__PURE__ */ jsx(Box, { className: "tabsList__fixedTabs", children: fixedTabs.map((current) => /* @__PURE__ */ jsx(Item, { tab: current }, current.id)) }),
           /* @__PURE__ */ jsx(
             ContextMenu,
@@ -1962,17 +1973,17 @@ var __publicField$o = (obj, key, value) => {
   __defNormalProp$o(obj, key + "" , value);
   return value;
 };
-var __accessCheck$b = (obj, member, msg) => {
+var __accessCheck$a = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateAdd$b = (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 __privateMethod$2 = (obj, member, method) => {
-  __accessCheck$b(obj, member, "access private method");
+  __accessCheck$a(obj, member, "access private method");
   return method;
 };
 var _innerAppend, innerAppend_fn;
@@ -1994,6 +2005,9 @@ class Tab {
   open(closeOthers) {
     this.controller.openTab(this.id, closeOthers);
   }
+  remove() {
+    this.controller.remove(this.id);
+  }
   toggle(isShown) {
     this.controller.toggleTab(this.state.id, isShown);
   }
@@ -2002,7 +2016,7 @@ class TabsController {
   constructor(id, props) {
     this.id = id;
     this.props = props;
-    __privateAdd$b(this, _innerAppend);
+    __privateAdd$a(this, _innerAppend);
     __publicField$o(this, "state", {
       isMultiple: false,
       openTabsHistory: /* @__PURE__ */ new Set(),
@@ -2035,7 +2049,7 @@ class TabsController {
   /**
    * Obviamente agrega un tab al listado de tabs
    */
-  append(tab, closeOthers) {
+  append(tab, behavior) {
     if (this.getTab(tab.id)) {
       void ApiaUtil.instance.dialogs.confirm({
         children: getLabel("msgTabIsOpen").text,
@@ -2046,10 +2060,10 @@ class TabsController {
             ...tab,
             id: `${tab.id}_${uniqueId$2()}`,
             additionalProps: tab.additionalProps ?? {}
-          }, closeOthers);
+          }, behavior);
       });
     } else
-      __privateMethod$2(this, _innerAppend, innerAppend_fn).call(this, tab, closeOthers);
+      __privateMethod$2(this, _innerAppend, innerAppend_fn).call(this, tab, behavior);
   }
   async closeAll(closeFixedTabsAsWell = false, force = false) {
     for (const tab of this.tabsList) {
@@ -2118,6 +2132,10 @@ class TabsController {
       this.openTab(this.tabsList[0].id);
     }
   }
+  remove(tabId) {
+    this.state.openTabsHistory.delete(this.state.tabs.get(tabId));
+    this.state.tabs.delete(tabId);
+  }
   async toggleTab(tabId, isShown) {
     const willBeOpen = isShown || !this.getTab(tabId)?.state.isOpen;
     if (willBeOpen) {
@@ -2260,11 +2278,19 @@ class TabsController {
   }
 }
 _innerAppend = new WeakSet();
-innerAppend_fn = function(tab, closeOthers = false) {
-  this.state.tabs.set(tab.id, new Tab(tab, this));
+innerAppend_fn = function(tab, behavior) {
+  const tabsArray = [...this.state.tabs.values()];
+  const afterId = behavior?.insertAfterId ?? tabsArray[tabsArray.length - 1]?.id;
+  for (let i = 0; i <= tabsArray.length; i++) {
+    if (!tabsArray[i] || tabsArray[i]?.id === afterId) {
+      tabsArray.splice(i + 1, 0, new Tab(tab, this));
+      break;
+    }
+  }
+  this.state.tabs = new Map(tabsArray.map((c) => [c.id, c]));
   if (tab.isOpen) {
-    this.openTab(tab.id, closeOthers);
-    this.focusTab(tab.id, closeOthers);
+    this.openTab(tab.id, behavior?.closeOthers);
+    this.focusTab(tab.id, behavior?.closeOthers);
   }
   this.checkAtLeastOneOpen();
 };
@@ -2291,6 +2317,8 @@ const InnerRenderer = observer(({ tab }) => {
       },
       tab.id
     );
+  const uns = useRef(() => {
+  });
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -2303,6 +2331,18 @@ const InnerRenderer = observer(({ tab }) => {
       sx: {
         display: state.isOpen ? void 0 : "none"
       },
+      ref: (el) => {
+        uns.current();
+        if (el instanceof HTMLElement) {
+          const handleFocus = () => {
+            tab.open();
+          };
+          el.addEventListener(customEvents.focus, handleFocus);
+          uns.current = () => {
+            el.removeEventListener(customEvents.focus, handleFocus);
+          };
+        }
+      },
       children: accordion ?? tabContent
     },
     state.id
@@ -2319,7 +2359,7 @@ const TabsContent = observer((props) => {
       ...getVariant("layout.common.tabs.primary.content"),
       ...props,
       children: controller.tabsList.map((tab) => {
-        return /* @__PURE__ */ jsx(InnerRenderer, { tab }, tab.id);
+        return /* @__PURE__ */ jsx(CurrentTabContext.Provider, { value: tab, children: /* @__PURE__ */ jsx(InnerRenderer, { tab }, tab.id) });
       })
     }
   );
@@ -2698,48 +2738,48 @@ var __publicField$n = (obj, key, value) => {
   __defNormalProp$n(obj, key + "" , value);
   return value;
 };
-var __accessCheck$a = (obj, member, msg) => {
+var __accessCheck$9 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$8 = (obj, member, getter) => {
-  __accessCheck$a(obj, member, "read from private field");
+var __privateGet$7 = (obj, member, getter) => {
+  __accessCheck$9(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$a = (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 __privateSet$6 = (obj, member, value, setter) => {
-  __accessCheck$a(obj, member, "write to private field");
+var __privateSet$5 = (obj, member, value, setter) => {
+  __accessCheck$9(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);
+    __privateSet$5(obj, member, value);
   },
   get _() {
-    return __privateGet$8(obj, member, getter);
+    return __privateGet$7(obj, member, getter);
   }
 });
 var _emitter$3, _maxIdAlert, _maxIdConfirm;
 class ApiaUtilDialogs {
   constructor() {
-    __privateAdd$a(this, _emitter$3, new EventEmitter());
-    __privateAdd$a(this, _maxIdAlert, 0);
-    __privateAdd$a(this, _maxIdConfirm, 0);
+    __privateAdd$9(this, _emitter$3, new EventEmitter());
+    __privateAdd$9(this, _maxIdAlert, 0);
+    __privateAdd$9(this, _maxIdConfirm, 0);
     __publicField$n(this, "Component", () => {
       const [confirmDialogs, setConfirmDialogs] = useState([]);
       const [alertsDialogs, setAlertsDialogs] = useState(
         []
       );
       useMount(() => {
-        const unsuscribe1 = __privateGet$8(this, _emitter$3).on("alert", (ev) => {
+        const unsuscribe1 = __privateGet$7(this, _emitter$3).on("alert", (ev) => {
           setAlertsDialogs((current) => [...current, ev]);
         });
-        const unsuscribe2 = __privateGet$8(this, _emitter$3).on("confirm", (ev) => {
+        const unsuscribe2 = __privateGet$7(this, _emitter$3).on("confirm", (ev) => {
           setConfirmDialogs((current) => [...current, ev]);
         });
         return () => {
@@ -2777,7 +2817,7 @@ class ApiaUtilDialogs {
   }
   alert(props) {
     return new Promise((resolve) => {
-      __privateGet$8(this, _emitter$3).emit("alert", {
+      __privateGet$7(this, _emitter$3).emit("alert", {
         ...props,
         onClose: () => resolve(),
         id: `confirm${__privateWrapper$1(this, _maxIdAlert)._++}`
@@ -2786,7 +2826,7 @@ class ApiaUtilDialogs {
   }
   confirm(props) {
     return new Promise((resolve) => {
-      __privateGet$8(this, _emitter$3).emit("confirm", {
+      __privateGet$7(this, _emitter$3).emit("confirm", {
         ...props,
         id: `confirm${__privateWrapper$1(this, _maxIdConfirm)._++}`,
         onCancel: () => resolve(false),
@@ -2850,31 +2890,31 @@ function parseStringToApiaNumber(value) {
   )}${decimalsString.length > 0 ? `${decimalSeparator$1}${decimalsString}` : ""}`;
 }
 
-var __accessCheck$9 = (obj, member, msg) => {
+var __accessCheck$8 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateAdd$9 = (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 __privateMethod$1 = (obj, member, method) => {
-  __accessCheck$9(obj, member, "access private method");
+  __accessCheck$8(obj, member, "access private method");
   return method;
 };
 var _parseString, parseString_fn, _findDelimiter, findDelimiter_fn, _parseCellValue, parseCellValue_fn;
 const delimiters = [",", ";", "	", "|"];
 class ApiaUtilParsers {
   constructor() {
-    __privateAdd$9(this, _parseString);
+    __privateAdd$8(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$9(this, _findDelimiter);
-    __privateAdd$9(this, _parseCellValue);
+    __privateAdd$8(this, _findDelimiter);
+    __privateAdd$8(this, _parseCellValue);
   }
   /**
    * Toma un número sin separadores de miles y lo devuelve en el formato
@@ -3033,25 +3073,25 @@ var __publicField$l = (obj, key, value) => {
   __defNormalProp$l(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$8 = (obj, member, msg) => {
+var __accessCheck$7 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
 };
-var __privateGet$7 = (obj, member, getter) => {
-  __accessCheck$8(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$8 = (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);
 };
-var __privateSet$5 = (obj, member, value, setter) => {
-  __accessCheck$8(obj, member, "write to private field");
+var __privateSet$4 = (obj, member, value, setter) => {
+  __accessCheck$7(obj, member, "write to private field");
   member.set(obj, value);
   return value;
 };
-var _timeout, _tooltipTimeout, _unsuscribe, _tooltipController, _tooltip;
+var _timeout, _tooltipTimeout, _unsuscribe, _tooltip;
 let y$1 = 0, x$1 = 0;
 document?.addEventListener("mousemove", (ev) => {
   x$1 = ev.clientX;
@@ -3060,55 +3100,53 @@ document?.addEventListener("mousemove", (ev) => {
 class AutomaticTooltip {
   constructor(tooltip = null, handler) {
     this.handler = handler;
-    __privateAdd$8(this, _timeout, 500);
-    __privateAdd$8(this, _tooltipTimeout, 0);
-    __privateAdd$8(this, _unsuscribe, null);
-    __privateAdd$8(this, _tooltipController, null);
+    __privateAdd$7(this, _timeout, 500);
+    __privateAdd$7(this, _tooltipTimeout, 0);
+    __privateAdd$7(this, _unsuscribe, null);
     __publicField$l(this, "ref", (el) => {
       var _a, _b;
-      (_a = __privateGet$7(this, _unsuscribe)) == null ? void 0 : _a.call(this);
+      (_a = __privateGet$6(this, _unsuscribe)) == null ? void 0 : _a.call(this);
       const listener = () => {
-        clearTimeout(__privateGet$7(this, _tooltipTimeout));
-        __privateSet$5(this, _tooltipTimeout, setTimeout(() => {
-          if (__privateGet$7(this, _tooltip)?.children)
-            __privateSet$5(this, _tooltipController, this.handler.open({
+        clearTimeout(__privateGet$6(this, _tooltipTimeout));
+        __privateSet$4(this, _tooltipTimeout, setTimeout(() => {
+          if (__privateGet$6(this, _tooltip)?.children)
+            this.handler.open({
               closeOnMouseLeaveTooltip: true,
               closeOnEscape: true,
               closeOnScrollOut: true,
-              ...__privateGet$7(this, _tooltip),
+              ...__privateGet$6(this, _tooltip),
               anchorPoint: { left: x$1 + 3, top: y$1 + 3 }
-            }));
-        }, __privateGet$7(this, _timeout)));
+            });
+        }, __privateGet$6(this, _timeout)));
       };
       const reset = () => {
-        clearTimeout(__privateGet$7(this, _tooltipTimeout));
+        clearTimeout(__privateGet$6(this, _tooltipTimeout));
       };
       if (el) {
         el.addEventListener("mousemove", listener);
         el.addEventListener("mouseleave", reset);
-        __privateSet$5(this, _unsuscribe, () => {
+        __privateSet$4(this, _unsuscribe, () => {
           el.removeEventListener("mousemove", listener);
           el.removeEventListener("mouseleave", reset);
         });
       } else {
-        (_b = __privateGet$7(this, _unsuscribe)) == null ? void 0 : _b.call(this);
+        (_b = __privateGet$6(this, _unsuscribe)) == null ? void 0 : _b.call(this);
         reset();
       }
     });
-    __privateAdd$8(this, _tooltip, null);
+    __privateAdd$7(this, _tooltip, null);
     __publicField$l(this, "update", (tooltip) => {
-      __privateSet$5(this, _tooltip, tooltip);
+      __privateSet$4(this, _tooltip, tooltip);
     });
-    __privateSet$5(this, _tooltip, tooltip);
+    __privateSet$4(this, _tooltip, tooltip);
     if (tooltip?.timeout !== void 0) {
-      __privateSet$5(this, _timeout, tooltip?.timeout);
+      __privateSet$4(this, _timeout, tooltip?.timeout);
     }
   }
 }
 _timeout = new WeakMap();
 _tooltipTimeout = new WeakMap();
 _unsuscribe = new WeakMap();
-_tooltipController = new WeakMap();
 _tooltip = new WeakMap();
 
 function isAttachToElementAFunction(attachToElement) {
@@ -3454,15 +3492,15 @@ var __publicField$k = (obj, key, value) => {
   __defNormalProp$k(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$7 = (obj, member, msg) => {
+var __accessCheck$6 = (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$5 = (obj, member, getter) => {
+  __accessCheck$6(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$7 = (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);
@@ -3470,10 +3508,10 @@ var __privateAdd$7 = (obj, member, value) => {
 var _emitter$2, _shoutChangedList;
 class ApiaUtilTooltips {
   constructor() {
-    __privateAdd$7(this, _emitter$2, new EventEmitter());
+    __privateAdd$6(this, _emitter$2, new EventEmitter());
     __publicField$k(this, "tooltips", []);
-    __privateAdd$7(this, _shoutChangedList, () => {
-      __privateGet$6(this, _emitter$2).emit("changedList", [...this.tooltips]);
+    __privateAdd$6(this, _shoutChangedList, () => {
+      __privateGet$5(this, _emitter$2).emit("changedList", [...this.tooltips]);
     });
     /**
      * Permite crear un tooltip que se abrirá automáticamente al estar parado
@@ -3492,11 +3530,11 @@ class ApiaUtilTooltips {
     });
     __publicField$k(this, "close", (id) => {
       this.tooltips = this.tooltips.filter((current) => current.id !== id);
-      __privateGet$6(this, _shoutChangedList).call(this);
+      __privateGet$5(this, _shoutChangedList).call(this);
     });
     __publicField$k(this, "closeAll", () => {
       this.tooltips = [];
-      __privateGet$6(this, _shoutChangedList).call(this);
+      __privateGet$5(this, _shoutChangedList).call(this);
     });
     __publicField$k(this, "open", (tooltip) => {
       const controller = new ApiaUtilTooltip(tooltip, () => {
@@ -3508,29 +3546,35 @@ class ApiaUtilTooltips {
       } else {
         this.tooltips = [...this.tooltips, controller];
       }
-      __privateGet$6(this, _shoutChangedList).call(this);
+      __privateGet$5(this, _shoutChangedList).call(this);
       return controller;
     });
     __publicField$k(this, "Component", () => {
       const [tooltips, setTooltips] = useState(this.tooltips);
       useMount(() => {
-        const unsuscribeToList = __privateGet$6(this, _emitter$2).on("changedList", (ev) => {
+        const unsuscribeToList = __privateGet$5(this, _emitter$2).on("changedList", (ev) => {
           setTooltips(ev);
         });
         return () => {
           unsuscribeToList();
         };
       });
-      return /* @__PURE__ */ jsx(FreeFocusInside, { sx: { position: "relative", zIndex: "tooltip" }, children: tooltips.map((current) => /* @__PURE__ */ createElement(
-        Tooltip,
+      return /* @__PURE__ */ jsx(
+        FreeFocusInside,
         {
-          ...current.props,
-          onClose: () => {
-            current.close();
-          },
-          key: current.id
+          ...{ sx: { position: "relative", zIndex: "tooltip" } },
+          children: tooltips.map((current) => /* @__PURE__ */ createElement(
+            Tooltip,
+            {
+              ...current.props,
+              onClose: () => {
+                current.close();
+              },
+              key: current.id
+            }
+          ))
         }
-      )) });
+      );
     });
     document.addEventListener("keydown", (ev) => {
       if (ev.code === "Escape" && this.tooltips.find((c) => c.props.closeOnEscape !== false)) {
@@ -3539,7 +3583,7 @@ class ApiaUtilTooltips {
         this.tooltips = this.tooltips.filter(
           (current) => current.props.closeOnEscape === false
         );
-        __privateGet$6(this, _shoutChangedList).call(this);
+        __privateGet$5(this, _shoutChangedList).call(this);
       }
     });
   }
@@ -3553,30 +3597,30 @@ var __publicField$j = (obj, key, value) => {
   __defNormalProp$j(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$6 = (obj, member, msg) => {
+var __accessCheck$5 = (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$4 = (obj, member, getter) => {
+  __accessCheck$5(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$6 = (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$4 = (obj, member, value, setter) => {
-  __accessCheck$6(obj, member, "write to private field");
+var __privateSet$3 = (obj, member, value, setter) => {
+  __accessCheck$5(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);
+    __privateSet$3(obj, member, value);
   },
   get _() {
-    return __privateGet$5(obj, member, getter);
+    return __privateGet$4(obj, member, getter);
   }
 });
 var _emitter$1, _items$1, _hooks, _maxId, _RenderMenu;
@@ -3585,14 +3629,14 @@ function isSubmenu(item) {
 }
 class ApiaUtilMenu {
   constructor() {
-    __privateAdd$6(this, _emitter$1, new EventEmitter());
-    __privateAdd$6(this, _items$1, []);
+    __privateAdd$5(this, _emitter$1, new EventEmitter());
+    __privateAdd$5(this, _items$1, []);
     __publicField$j(this, "menuProps", null);
-    __privateAdd$6(this, _hooks, {
+    __privateAdd$5(this, _hooks, {
       useIsOpen: () => {
         const [isOpen, setIsOpen] = useState(false);
         useMount(() => {
-          return __privateGet$5(this, _emitter$1).on("toggle", setIsOpen);
+          return __privateGet$4(this, _emitter$1).on("toggle", setIsOpen);
         });
         return [
           isOpen,
@@ -3603,18 +3647,18 @@ class ApiaUtilMenu {
       }
     });
     __publicField$j(this, "close", () => {
-      __privateGet$5(this, _emitter$1).emit("toggle", false);
+      __privateGet$4(this, _emitter$1).emit("toggle", false);
     });
     __publicField$j(this, "open", ({
       menuProps,
       items
     }) => {
-      __privateSet$4(this, _items$1, items);
+      __privateSet$3(this, _items$1, items);
       this.menuProps = menuProps;
-      __privateGet$5(this, _emitter$1).emit("toggle", true);
+      __privateGet$4(this, _emitter$1).emit("toggle", true);
     });
-    __privateAdd$6(this, _maxId, 0);
-    __privateAdd$6(this, _RenderMenu, (submenu) => {
+    __privateAdd$5(this, _maxId, 0);
+    __privateAdd$5(this, _RenderMenu, (submenu) => {
       const hasIcon = submenu.items.find(
         (c) => !!c.icon
       );
@@ -3627,7 +3671,7 @@ class ApiaUtilMenu {
             {
               label: current.label,
               className: hasIcon ? "with-icon" : "",
-              children: __privateGet$5(this, _RenderMenu).call(this, current)
+              children: __privateGet$4(this, _RenderMenu).call(this, current)
             },
             `submenu${__privateWrapper(this, _maxId)._++}`
           );
@@ -3647,7 +3691,7 @@ class ApiaUtilMenu {
       }) });
     });
     __publicField$j(this, "Component", () => {
-      const [isOpen, close] = __privateGet$5(this, _hooks).useIsOpen();
+      const [isOpen, close] = __privateGet$4(this, _hooks).useIsOpen();
       if (!isOpen)
         return null;
       return /* @__PURE__ */ jsx(FreeFocusInside, { children: /* @__PURE__ */ jsx(
@@ -3659,7 +3703,7 @@ class ApiaUtilMenu {
             close();
             this.menuProps?.onClose?.(ev);
           },
-          children: __privateGet$5(this, _RenderMenu).call(this, { label: "", items: __privateGet$5(this, _items$1) })
+          children: __privateGet$4(this, _RenderMenu).call(this, { label: "", items: __privateGet$4(this, _items$1) })
         }
       ) });
     });
@@ -3699,21 +3743,21 @@ var __publicField$h = (obj, key, value) => {
   __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$5 = (obj, member, msg) => {
+var __accessCheck$4 = (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$3 = (obj, member, getter) => {
+  __accessCheck$4(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$5 = (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$3 = (obj, member, value, setter) => {
-  __accessCheck$5(obj, member, "write to private field");
+var __privateSet$2 = (obj, member, value, setter) => {
+  __accessCheck$4(obj, member, "write to private field");
   member.set(obj, value);
   return value;
 };
@@ -3747,14 +3791,14 @@ const _ApiaUtil = class _ApiaUtil {
     this.tooltips = new ApiaUtilTooltips();
   }
   static get instance() {
-    if (!__privateGet$4(this, _instance)) {
-      __privateSet$3(this, _instance, new _ApiaUtil());
+    if (!__privateGet$3(this, _instance)) {
+      __privateSet$2(this, _instance, new _ApiaUtil());
     }
-    return __privateGet$4(this, _instance);
+    return __privateGet$3(this, _instance);
   }
 };
 _instance = new WeakMap();
-__privateAdd$5(_ApiaUtil, _instance, void 0);
+__privateAdd$4(_ApiaUtil, _instance, void 0);
 let ApiaUtil = _ApiaUtil;
 
 var __defProp$g = Object.defineProperty;
@@ -3863,7 +3907,7 @@ const OptionsBox = observer(() => {
       return /* @__PURE__ */ jsxs(
         Box,
         {
-          className: `autocomplete__option ${handler.focusedIndex === i ? "focused" : ""}`,
+          className: `autocomplete__option ${handler.focusedIndex === i ? "focused" : ""} ${handler.state.readOnly ? "readOnly" : ""}`,
           onMouseDown: (ev) => {
             ev.stopPropagation();
             ev.preventDefault();
@@ -3891,21 +3935,21 @@ var __publicField$f = (obj, key, value) => {
   __defNormalProp$f(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var __accessCheck$4 = (obj, member, msg) => {
+var __accessCheck$3 = (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$2 = (obj, member, getter) => {
+  __accessCheck$3(obj, member, "read from private field");
   return getter ? getter.call(obj) : member.get(obj);
 };
-var __privateAdd$4 = (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$2 = (obj, member, value, setter) => {
-  __accessCheck$4(obj, member, "write to private field");
+var __privateSet$1 = (obj, member, value, setter) => {
+  __accessCheck$3(obj, member, "write to private field");
   member.set(obj, value);
   return value;
 };
@@ -3923,7 +3967,7 @@ class AutocompleteController {
       value: "",
       width: 55
     });
-    __privateAdd$4(this, _actualSearch, (str) => {
+    __privateAdd$3(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;
@@ -3935,10 +3979,10 @@ class AutocompleteController {
         }
       });
     });
-    __privateAdd$4(this, _makeSearch, () => {
-      return debounce(__privateGet$3(this, _actualSearch), this.state.searchDebounce);
+    __privateAdd$3(this, _makeSearch, () => {
+      return debounce(__privateGet$2(this, _actualSearch), this.state.searchDebounce);
     });
-    __privateAdd$4(this, _search, __privateGet$3(this, _makeSearch).call(this));
+    __privateAdd$3(this, _search, __privateGet$2(this, _makeSearch).call(this));
     __publicField$f(this, "tooltipRef", null);
     Object.assign(this.state, properties);
     if (properties.value) {
@@ -3954,7 +3998,7 @@ class AutocompleteController {
     reaction(
       () => this.state.searchDebounce,
       () => {
-        __privateSet$2(this, _search, __privateGet$3(this, _makeSearch).call(this));
+        __privateSet$1(this, _search, __privateGet$2(this, _makeSearch).call(this));
       }
     );
     reaction(
@@ -3984,7 +4028,7 @@ class AutocompleteController {
   close(selectValue = true) {
     this.tooltipRef?.close();
     this.tooltipRef = null;
-    __privateGet$3(this, _actualSearch).call(this, "");
+    __privateGet$2(this, _actualSearch).call(this, "");
     if (selectValue) {
       let currentValue = this.state.options.find(
         (c) => c.value === this.state.focusedValue
@@ -4111,7 +4155,7 @@ class AutocompleteController {
       return;
     }
     this.state.showValue = str;
-    __privateGet$3(this, _search).call(this, str);
+    __privateGet$2(this, _search).call(this, str);
   }
   selectFocused() {
     this.close();
@@ -4120,16 +4164,18 @@ class AutocompleteController {
       this.setValue(newValue);
     }
   }
-  async setValue(value) {
-    if (this.state.disabled || this.state.readOnly) {
+  async setValue(value, props) {
+    if (this.state.disabled || this.state.readOnly || value === this.state.value && props?.fireOnChange !== false) {
       return;
     }
     const selectedOption = this.state.options.find((c) => c.value === value);
     const newValue = selectedOption?.value || "";
-    const onChangeResult = this.state.onChange?.(newValue, this);
-    if (onChangeResult instanceof Promise) {
-      if (!await onChangeResult) {
-        return;
+    if (props?.fireOnChange !== false) {
+      const onChangeResult = this.state.onChange?.(newValue, this);
+      if (onChangeResult instanceof Promise) {
+        if (!await onChangeResult) {
+          return;
+        }
       }
     }
     this.state.value = newValue;
@@ -4141,7 +4187,7 @@ _actualSearch = new WeakMap();
 _makeSearch = new WeakMap();
 _search = new WeakMap();
 
-const SearchBox = observer(() => {
+const SearchBox = observer((props) => {
   const handler = useAutocompleteContext();
   const breakpoint = useBreakpointIndex();
   const inputRef = useRef(null);
@@ -4167,6 +4213,7 @@ const SearchBox = observer(() => {
       /* @__PURE__ */ jsx(
         Input,
         {
+          ...props,
           ref: inputRef,
           className: `autocomplete__search ${handler.state.disabled ? "disabled" : ""} ${handler.state.readOnly ? "readOnly" : ""}`,
           onChange: (ev) => {
@@ -4225,6 +4272,7 @@ const KeyHandler$1 = observer((props) => {
               handler.focusPrevious();
               break;
             case "Enter":
+            case "NumpadEnter":
               ev.preventDefault();
               if (handler.isOpen) {
                 handler.selectFocused();
@@ -4279,10 +4327,10 @@ const Autocomplete = (props) => {
   });
   const prevProps = usePrevious(props.properties);
   if (!shallowEqual$1(prevProps.current, props.properties) && handler?.state) {
+    Object.assign(handler.state, props.properties);
     if (prevProps.current?.value !== props.properties?.value && props.properties?.value !== void 0) {
-      handler.setValue(props.properties.value);
+      handler.setValue(props.properties.value, { fireOnChange: false });
     }
-    Object.assign(handler.state, props.properties);
   }
   if (!handler) {
     return null;
@@ -4293,7 +4341,7 @@ const Autocomplete = (props) => {
       className: `autocomplete ${props.properties?.className || ""}`,
       "data-autocomplete-box": handler.state.id,
       ...getVariant("layout.common.components.autocomplete"),
-      children: /* @__PURE__ */ jsx(SearchBox, {})
+      children: /* @__PURE__ */ jsx(SearchBox, { ...props.inputProps })
     }
   ) });
 };
@@ -4673,122 +4721,29 @@ const Checkbox$1 = forwardRef(
 );
 Checkbox$1.displayName = "Checkbox";
 
-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, key + "" , value);
-  return value;
-};
-var __accessCheck$3 = (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");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-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$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$e(this, "focused", []);
-    __privateAdd$3(this, _onFocusCallbacks, []);
-    debugDispatcher.on(
-      "focusHistory",
-      () => {
-        console.info(this.focused);
-      },
-      "Muestra el historial de elementos que recibieron foco."
-    );
-  }
-  offFocus(cb) {
-    __privateSet$1(this, _onFocusCallbacks, __privateGet$2(this, _onFocusCallbacks).filter((current) => {
-      return current !== cb;
-    }));
-  }
-  onFocus(cb) {
-    __privateGet$2(this, _onFocusCallbacks).push(cb);
-    return () => {
-      this.offFocus(cb);
-    };
-  }
-  inDocument(el) {
-    return el instanceof Function || el instanceof HTMLElement && el.offsetParent !== null;
-  }
-  set focus(element) {
-    this.focused = this.focused.filter((el) => {
-      const existsInDocument = this.inDocument(el) && element !== el;
-      return existsInDocument;
-    });
-    this.focused.unshift(element);
-    if (this.focused.length > historySize) {
-      this.focused = this.focused.splice(0, historySize);
-    }
-    __privateGet$2(this, _onFocusCallbacks).forEach((cb) => {
-      return cb();
-    });
-  }
-  get list() {
-    return [...this.focused];
-  }
-  /**
-   * @param querySelector A query selector against which the element should match
-   * @returns The last HTMLElement if no querySelector argument provided or else, the last which matches
-   * against that query selector.
-   * */
-  last(querySelector, omit = 0) {
-    if (querySelector)
-      for (let i = omit; i <= this.focused.length; i++) {
-        const storedElement = this.focused[i];
-        const element = (
-          // eslint-disable-next-line no-nested-ternary
-          storedElement?.id !== void 0 ? storedElement : isFunction(storedElement) ? storedElement(false) : null
-        );
-        if (element && this.inDocument(element) && element.matches && element.matches(querySelector))
-          return element;
-      }
-    else
-      return this.focused[this.focused.length - 1];
-    return null;
-  }
-}, _onFocusCallbacks = new WeakMap(), _a)();
-
-const FieldErrorMessage = ({ children, name }) => {
-  const [ref, setRef] = React.useState(null);
-  React.useEffect(() => {
-    if (children) {
-      const event = new CustomEvent(customEvents.focus, { bubbles: true });
-      ref?.dispatchEvent(event);
-    }
-  }, [children, ref]);
-  if (children) {
+const CalModal = React__default.forwardRef(
+  ({ handleClickDay, calValue, locale }) => {
     return /* @__PURE__ */ jsx(
       Box,
       {
-        ref: setRef,
-        role: "alert",
-        "data-testid": name ? `err_${name}` : null,
-        sx: {
-          mb: "0",
-          color: "danger",
-          pt: "2"
-        },
-        children
+        ...getVariant("layout.common.components.datePicker"),
+        className: "datePicker",
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            onClickDay: handleClickDay,
+            locale,
+            value: calValue || /* @__PURE__ */ new Date(),
+            nextLabel: "\u203A",
+            next2Label: "\xBB",
+            prevLabel: "\u2039",
+            prev2Label: "\xAB"
+          }
+        )
       }
     );
   }
-  return null;
-};
+);
 
 const IconInput = ({
   additionalButtons,
@@ -4819,8 +4774,10 @@ const IconInput = ({
       if (onBlur && (!ev.relatedTarget || ev.relatedTarget && !isChild(
         ev.relatedTarget,
         (current) => current === parentRef.current
-      )))
+      ))) {
+        Object.assign(ev.target, { value: innerInputRef.current?.value });
         onBlur(ev);
+      }
     },
     [onBlur]
   );
@@ -4865,21 +4822,6 @@ const IconInput = ({
   );
 };
 
-const getFieldErrorStyles = (isValid) => {
-  return {
-    borderLeftStyle: !isValid ? "solid" : null,
-    borderLeftWidth: !isValid ? "4px" : null,
-    borderLeftColor: !isValid ? "danger" : void 0
-  };
-};
-const getFieldTouchedStyles = (isTouched) => {
-  return {
-    borderStyle: isTouched ? "solid" : null,
-    borderWidth: isTouched ? "1px" : null,
-    borderColor: isTouched ? "orange" : void 0
-  };
-};
-
 const DEFAULT_LOCALE = window.LANG_CODE;
 const DEFAULT_MASK_PLACEHOLDER = "_";
 const dateFormat = getDateFormat();
@@ -4892,9 +4834,11 @@ const DateInput = React__default.forwardRef(
   ({
     allowPickBeforeToday,
     buttonProps: outerButtonProps,
+    CalModalRenderer,
     className,
     error,
     getCustomMask,
+    inputClassName,
     isLoading,
     onBlur,
     onChange,
@@ -4904,63 +4848,55 @@ const DateInput = React__default.forwardRef(
     value: outerValue,
     ...props
   }, ref) => {
-    const id = React__default.useMemo(uniqueId$2, []);
+    const id = React__default.useMemo(uniqueId$3, []);
     const [inputValue, setInputValue] = React__default.useState(outerValue ?? "");
     const [calValue, setCalValue] = React__default.useState();
     const boxRef = React__default.useRef(null);
-    const { show, hide, ...modalProps } = useModal({
-      preFetcher() {
-        globalFocus.focus = () => boxRef.current?.querySelector(".iconButton");
-        return new Promise((resolve) => {
-          let currentSelectedDate = dayjs(inputValue, dateFormat);
-          if (!currentSelectedDate.isValid())
-            currentSelectedDate = dayjs(/* @__PURE__ */ new Date());
-          setCalValue(currentSelectedDate.toDate());
-          resolve();
-        });
-      }
-    });
+    const { deleteFiltersTimestamp, ...otherProps } = props;
+    const hasBlured = useRef(false);
     const [stateError, setError] = React__default.useState(error ?? null);
     const lastEmittedValue = React__default.useRef(outerValue ?? "");
-    useUpdateEffect(() => {
+    useUpdateEffect$1(() => {
       setInputValue(outerValue ?? "");
       lastEmittedValue.current = outerValue;
     }, [outerValue]);
-    useUpdateEffect(() => {
+    useUpdateEffect$1(() => {
       setError(error ?? null);
     }, [error]);
-    useUpdateEffect(() => {
+    useUpdateEffect$1(() => {
+      setError(null);
+      if (deleteFiltersTimestamp !== void 0) {
+        setCalendarValue("");
+      }
+    }, [deleteFiltersTimestamp]);
+    useUpdateEffect$1(() => {
       if (onError)
         onError(stateError);
+      if (stateError) {
+        setInputValue("");
+      }
+      if (onError)
+        onError(stateError ?? "");
     }, [stateError]);
     const shoutOnChange = React__default.useCallback(
       (newValue) => {
-        if (newValue !== lastEmittedValue.current && onChange) {
-          const result = onChange(newValue);
-          if (result) {
-            lastEmittedValue.current = newValue;
-          }
-          return result;
-        }
-        return true;
+        lastEmittedValue.current = newValue;
+        return onChange?.(newValue) ?? true;
       },
       [onChange]
     );
     const setCalendarValue = React__default.useCallback(
-      (value, nocheck) => {
+      (value, nocheck, avoidShout) => {
         if (value === "") {
-          void shoutOnChange("");
+          if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== inputValue)
+            void shoutOnChange("");
           setInputValue("");
+          setCalValue(/* @__PURE__ */ new Date());
           return;
         }
-        let newDate;
-        if (value !== "") {
-          newDate = dayjs(value, dateFormat);
-          if (!newDate.isValid())
-            newDate = dayjs(/* @__PURE__ */ new Date());
-        } else {
-          newDate = dayjs(/* @__PURE__ */ new Date());
-        }
+        let newDate = dayjs(value, dateFormat);
+        if (!newDate.isValid())
+          newDate = dayjs(/* @__PURE__ */ new Date(), dateFormat);
         const formattedDate = newDate.format(dateFormat);
         const today = /* @__PURE__ */ new Date();
         today.setHours(0, 0, 0, 0);
@@ -4973,16 +4909,27 @@ const DateInput = React__default.forwardRef(
           setInputValue("");
           setError(window.MSG_FEC_FIN_MAY_FEC_INI);
         } else {
-          const shoutResult = shoutOnChange(value === "" ? "" : formattedDate);
-          if (shoutResult === false) {
-            setInputValue(shoutResult || "");
-            setError(null);
-          } else if (typeof shoutResult === "string") {
-            setInputValue("");
-            setError(shoutResult);
-          } else {
+          if (avoidShout) {
             setInputValue(formattedDate);
             setError(null);
+            setCalValue(newDate.toDate());
+          } else {
+            const shoutResult = shoutOnChange(
+              value === "" ? "" : formattedDate
+            );
+            if (shoutResult === false) {
+              setInputValue(shoutResult || "");
+              setError(null);
+              setCalValue(/* @__PURE__ */ new Date());
+            } else if (typeof shoutResult === "string") {
+              setInputValue("");
+              setError(shoutResult);
+              setCalValue(/* @__PURE__ */ new Date());
+            } else {
+              setInputValue(formattedDate);
+              setError(null);
+              setCalValue(newDate.toDate());
+            }
           }
         }
       },
@@ -4990,40 +4937,70 @@ const DateInput = React__default.forwardRef(
     );
     const selectDate = React__default.useCallback(
       (val) => {
-        hide();
         const newValue = dayjs(val).format(dateFormat);
         setCalendarValue(newValue, true);
       },
-      [hide, setCalendarValue]
+      [setCalendarValue]
     );
-    const onCloseCalendarModal = React__default.useCallback(() => {
-      hide();
-    }, [hide]);
+    useEffect(() => {
+      if (stateError !== "" && stateError !== null) {
+        ApiaUtil.instance.notifications.notify({
+          message: stateError,
+          type: "warning"
+        });
+      }
+    }, [stateError]);
     const handleBlur = React__default.useCallback(
       (ev) => {
+        hasBlured.current = true;
+        if (ev.target.value && !dayjs(ev.target.value, dateFormat, true).isValid()) {
+          setInputValue("");
+          onError?.(window.MSG_INVALID_DATE);
+          return;
+        }
         if (onBlur && !isChild(ev.relatedTarget, (current) => {
           return current.id === `DateModal${id}` || current.id === `DateInput${id}`;
         })) {
-          onBlur(ev);
+          const newEvent = {
+            ...ev,
+            target: ev.target.matches("input.dateInput") ? ev.target : ev.target.closest(".dateInput")?.querySelector(
+              "input"
+            )
+          };
+          const actualBlur = onBlur instanceof Promise ? onBlur : (ev2) => new Promise((resolve) => {
+            const result = onBlur?.(ev2);
+            resolve(result);
+          });
+          void actualBlur(newEvent).then((result) => {
+            if (typeof result === "string") {
+              setError(result);
+            } else if (result === false) {
+              setInputValue("");
+            }
+          });
         }
       },
-      [id, onBlur]
+      [id, onBlur, onError]
     );
     const inputProps = React__default.useMemo(
       () => ({
-        ...props,
-        className: "dateInput",
-        value: renderLabel ? renderLabel(inputValue) : inputValue,
-        inputRef: ref,
+        ...otherProps,
+        className: `dateInput ${inputClassName ?? ""}`,
+        value: stateError ? "" : renderLabel ? renderLabel(inputValue) : inputValue,
+        ref,
         onChange: (ev) => {
           setInputValue(ev.target.value);
           if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== ev.target.value && ev.target.value !== "")
             setError(null);
         },
         onBlur: (ev) => {
-          if (!(props.readOnly || getCustomMask))
-            setCalendarValue(ev.target.value);
-          handleBlur(ev);
+          if (!(props.readOnly || getCustomMask || document.querySelector(".overlay.screenLock")))
+            setCalendarValue(ev.target.value, false, true);
+          if (hasBlured.current) {
+            hasBlured.current = false;
+          } else if (!document.querySelector(".overlay.screenLock")) {
+            handleBlur(ev);
+          }
         },
         onKeyDown: (ev) => {
           if (ev.key === "Enter")
@@ -5031,18 +5008,21 @@ const DateInput = React__default.forwardRef(
         }
       }),
       [
-        getCustomMask,
-        handleBlur,
+        otherProps,
+        inputClassName,
+        stateError,
+        renderLabel,
         inputValue,
-        props,
         ref,
-        renderLabel,
-        setCalendarValue
+        props.readOnly,
+        getCustomMask,
+        setCalendarValue,
+        handleBlur
       ]
     );
     const buttonProps = React__default.useMemo(
       () => ({
-        disabled: props.disabled ?? props.readOnly,
+        disabled: props.disabled || props.readOnly,
         "aria-label": window.LBL_PICK_DATE,
         ...outerButtonProps
       }),
@@ -5060,60 +5040,118 @@ const DateInput = React__default.forwardRef(
               `#DateInput${id} input`
             )?.focus();
           },
-          type: "button",
           title: getLabel("btnAiDelete").text,
-          "aria-label": getLabel("btnAiDelete").text
+          "aria-label": getLabel("btnAiDelete").text,
+          type: "button"
         }
       ),
       [id, onDelete, setCalendarValue]
     );
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        CalendarModal,
-        {
-          ...modalProps,
-          calValue,
-          locale: DEFAULT_LOCALE,
-          handleClickDay: selectDate,
-          onCancel: onCloseCalendarModal,
-          id: `DateModal${id}`
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Box,
-        {
-          ...getVariant("forms.dateInput"),
-          className: `${className ?? ""} dateInput`,
-          id: `DateInput${id}`,
-          ref: boxRef,
-          children: [
-            /* @__PURE__ */ jsx(
-              IconInput,
-              {
-                additionalButtons: inputValue && inputValue !== getMaskForDateFormat().replaceAll(
-                  "9",
-                  DEFAULT_MASK_PLACEHOLDER
-                ) && !props.readOnly && !props.disabled ? additionalButtons : void 0,
-                isLoading,
-                maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
-                mask: getCustomMask ? getCustomMask() : getMaskForDateFormat(),
-                icon: icons.Calendar,
-                onBlur: handleBlur,
-                buttonProps,
-                inputProps,
-                readOnly: props.readOnly,
-                sx: getFieldErrorStyles(stateError === null),
-                onClick: show
-              }
-            ),
-            stateError && /* @__PURE__ */ jsx(FieldErrorMessage, { children: stateError })
-          ]
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        ...getVariant("forms.dateInput"),
+        className: `${className ?? ""} dateInput`,
+        id: `DateInput${id}`,
+        ref: boxRef,
+        onBlur: (e) => {
+          if (hasBlured.current) {
+            hasBlured.current = false;
+          } else if (!document.querySelector(".overlay.screenLock")) {
+            handleBlur(e);
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          IconInput,
+          {
+            additionalButtons: inputValue && inputValue !== getMaskForDateFormat().replaceAll(
+              "9",
+              DEFAULT_MASK_PLACEHOLDER
+            ) && !props.readOnly && !props.disabled ? additionalButtons : void 0,
+            buttonProps,
+            className: `${stateError !== null ? "field__withError" : ""}`,
+            icon: FaCalendarAlt,
+            inputProps,
+            isLoading,
+            mask: getCustomMask ? getCustomMask() : getMaskForDateFormat(),
+            maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
+            onClick: (ev) => {
+              const tooltip = ApiaUtil.instance.tooltips.open({
+                attachToElement() {
+                  return ev.target.closest(
+                    "button"
+                  );
+                },
+                attachToElementAnchorPoint: "center",
+                closeOnClick: false,
+                closeOnClickOut: true,
+                closeOnEscape: true,
+                closeOnMouseLeaveTooltip: false,
+                closeOnMouseLeaveAttachedElement: false,
+                closeOnScrollOut: true,
+                children: CalModalRenderer ? /* @__PURE__ */ jsx(
+                  CalModalRenderer,
+                  {
+                    calValue,
+                    locale: DEFAULT_LOCALE,
+                    handleClickDay: (ev2) => {
+                      selectDate(ev2);
+                      setCalValue(ev2);
+                      tooltip.close();
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  CalModal,
+                  {
+                    calValue,
+                    locale: DEFAULT_LOCALE,
+                    handleClickDay: (ev2) => {
+                      selectDate(ev2);
+                      setCalValue(ev2);
+                      tooltip.close();
+                    }
+                  }
+                ),
+                initialFocusGetter(el) {
+                  return el.querySelector(`.react-calendar__tile--active`);
+                },
+                minSize: { width: 350, height: 310 }
+              });
+            },
+            readOnly: props.readOnly
+          }
+        )
+      }
+    ) });
   }
 );
-DateInput.displayName = "DateInput";
+
+const FieldErrorMessage = ({ children, name }) => {
+  const [ref, setRef] = React.useState(null);
+  React.useEffect(() => {
+    if (children) {
+      const event = new CustomEvent(customEvents.focus, { bubbles: true });
+      ref?.dispatchEvent(event);
+    }
+  }, [children, ref]);
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: setRef,
+        role: "alert",
+        "data-testid": name ? `err_${name}` : null,
+        sx: {
+          mb: "0",
+          color: "danger",
+          pt: "2"
+        },
+        children
+      }
+    );
+  }
+  return null;
+};
 
 function fillZeros(amount) {
   return Array(Math.max(0, amount)).fill(0).join("");
@@ -5275,6 +5313,21 @@ const RequiredMark = ({
   return isRequired && !isReadonly && !isFormReadonly ? /* @__PURE__ */ jsx("span", { className: "requiredMark", title: getLabel("msgReqField").text, children: "*" }) : null;
 };
 
+const getFieldErrorStyles = (isValid) => {
+  return {
+    borderLeftStyle: !isValid ? "solid" : null,
+    borderLeftWidth: !isValid ? "4px" : null,
+    borderLeftColor: !isValid ? "danger" : void 0
+  };
+};
+const getFieldTouchedStyles = (isTouched) => {
+  return {
+    borderStyle: isTouched ? "solid" : null,
+    borderWidth: isTouched ? "1px" : null,
+    borderColor: isTouched ? "orange" : void 0
+  };
+};
+
 injectStyles("layout.common.components.fieldLabel", {
   display: "flex",
   flexDirection: "column",
@@ -5381,10 +5434,12 @@ const AutoEllipsis = ({
   const timeout = useRef(0);
   const ref = useCallback(
     (el) => {
-      if (!el)
+      if (!el || !document.contains(el))
         return;
       unsuscribe.current();
       function showBox() {
+        if (!el || !document.contains(el))
+          return;
         document.querySelectorAll(".autoellipsis_clone").forEach((c) => c.remove());
         clone.current = el.cloneNode(true);
         const target = findParent?.(el) ?? el;
@@ -5416,18 +5471,17 @@ const AutoEllipsis = ({
         clone.current.style.fill = "var(--theme-ui-colors-palette-text-primary)";
         clone.current.style.pointerEvents = "none";
         clone.current.style.wordBreak = "break-all";
+        clone.current.classList.add("autoellipsis_clone");
         const overridenStyles = overrideStyles?.(el);
         if (overridenStyles) {
-          for (let i = 0; i < (overridenStyles?.length ?? 0); i++) {
+          Object.entries(overridenStyles).forEach(([name, value]) => {
+            if (name.match(/webkit/))
+              return;
             try {
-              const name = overridenStyles[i];
-              const value = overridenStyles[name];
-              if (!name.match(/webkit/)) {
-                clone.current.style[name] = value;
-              }
+              clone.current.style[name] = value;
             } catch (e) {
             }
-          }
+          });
         }
         clone.current.addEventListener("mouseleave", (ev) => {
           if (isChild(
@@ -5437,8 +5491,17 @@ const AutoEllipsis = ({
             return;
           clone.current?.remove();
         });
+        let interval = 0;
         function close() {
+          clone.current?.remove();
+          document.removeEventListener("scroll", close);
+          clearInterval(interval);
         }
+        interval = setInterval(() => {
+          if (!document.contains(el)) {
+            close();
+          }
+        }, 100);
         document.addEventListener("scroll", close);
         document.body.append(clone.current);
         const cloneBounding = clone.current.getBoundingClientRect();
@@ -5665,19 +5728,40 @@ const AccordionItemContent = ({
   const duration = handler.hooks.usePropsSelector(
     (current) => current.animationDuration
   );
-  return /* @__PURE__ */ jsxs(Box, { className: "accordion__item", "data-id": id, children: [
-    button,
-    /* @__PURE__ */ jsx(
-      AnimateHeight,
-      {
-        className: "accordion__item__content",
-        height: isExpanded ? "auto" : 0,
-        duration,
-        id: `accordion__${handler.id}__${id}`,
-        children: actualChildren
-      }
-    )
-  ] });
+  const uns = useRef(() => {
+  });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "accordion__item",
+      "data-id": id,
+      ref: (el) => {
+        uns.current();
+        if (el instanceof HTMLElement) {
+          const handleFocus = () => {
+            handler.toggleItem(id, true);
+          };
+          el.addEventListener(customEvents.focus, handleFocus);
+          uns.current = () => {
+            el.removeEventListener(customEvents.focus, handleFocus);
+          };
+        }
+      },
+      children: [
+        button,
+        /* @__PURE__ */ jsx(
+          AnimateHeight,
+          {
+            className: `accordion__item__content ${isExpanded ? " expanded" : ""}`,
+            height: isExpanded ? "auto" : 0,
+            duration,
+            id: `accordion__${handler.id}__${id}`,
+            children: actualChildren
+          }
+        )
+      ]
+    }
+  );
 };
 
 const AccordionItem = ({
@@ -5873,6 +5957,7 @@ const LabelBox = ({
   tooltip,
   closeTooltip,
   onClose,
+  variant,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(
@@ -5880,17 +5965,16 @@ const LabelBox = ({
     {
       ...props,
       title: tooltip,
-      className: `labelBox ${className ?? ""}`,
-      variant: "layout.common.boxes.labelBox",
+      className: `labelBox ${className ?? ""} ${variant || "normal"}`,
+      ...getVariant("layout.common.boxes.labelBox"),
       children: [
         /* @__PURE__ */ jsx(Box, { className: "labelAndIcon", as: "span", children: label }),
-        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+        onClose && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
           Close,
           {
             type: "button",
             className: "closeButton",
             onClick: onClose,
-            disabled: !onClose,
             title: closeTooltip,
             variant: "icon-outline-danger"
           }
@@ -5900,10 +5984,10 @@ const LabelBox = ({
   );
 };
 
-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$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;
 };
 let maxId = 0;
@@ -5913,8 +5997,8 @@ class ChatMessage {
     this.messageType = messageType;
     this.attachments = attachments;
     this.reference = reference;
-    __publicField$d(this, "id");
-    __publicField$d(this, "clone", () => new ChatMessage(
+    __publicField$e(this, "id");
+    __publicField$e(this, "clone", () => new ChatMessage(
       this.message,
       this.messageType,
       this.attachments.map((x) => {
@@ -6051,12 +6135,13 @@ const Dropzone = ({
   className,
   messageError,
   progress = 0,
-  defaultLabel = getLabel("lblUploadDrag").text,
+  defaultLabel = getLabel("btnUploadClass").text,
   draggingLabel = getLabel("lblDroping").text,
   onClick,
-  onChange
+  onChange,
+  handleInfoButton
 }) => {
-  const innerSx = messageError ? { borderLeft: "7px solid", borderLeftColor: "danger" } : {};
+  const innerSx = messageError ? { borderLeft: "2px solid", borderColor: "danger" } : {};
   const fileInputRef = useRef(null);
   const handleClick = (ev) => {
     onClick?.(ev);
@@ -6078,38 +6163,61 @@ const Dropzone = ({
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      tabIndex: 0,
       ...getVariant("layout.execution.components.uploader.dropzone"),
-      sx: { ...innerSx, sx },
-      className: `dropzone ${className ?? ""}`,
-      onClick: handleClick,
-      onDrop: (e) => {
-        e.preventDefault();
-        const newFiles = Array.from(e.dataTransfer.files);
-        setIsDragging(false);
-        onChange?.(newFiles);
-      },
-      onDragEnter: handleDragStart,
-      onDragLeave: handleDragLeave,
-      onDragOver: handleDragOver,
+      className: "dropzone__container",
       children: [
-        progress > 0 && progress < 100 && /* @__PURE__ */ jsx(Progress, { max: 100, value: progress, className: "progressBar" }),
-        messageError ? /* @__PURE__ */ jsx(Box, { color: "danger", children: messageError }) : isDragging ? draggingLabel : defaultLabel,
-        /* @__PURE__ */ jsx(
-          "input",
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            multiple: true,
-            type: "file",
-            ref: fileInputRef,
-            style: { display: "none" },
-            onChange: (e) => {
-              e.preventDefault();
-              if (e.target.files) {
-                const newFiles = Array.from([...e.target.files]);
-                onChange?.(newFiles);
-                e.target.value = "";
+            tabIndex: 0,
+            sx: { ...innerSx, sx },
+            className: `dropzone ${className ?? ""}`,
+            onClick: handleClick,
+            onKeyDown: (ev) => {
+              if (ev.code === "Enter" || ev.code === "Space") {
+                handleClick(ev);
               }
-            }
+            },
+            onDrop: (e) => {
+              e.preventDefault();
+              const newFiles = Array.from(e.dataTransfer.files);
+              setIsDragging(false);
+              onChange?.(newFiles);
+            },
+            onDragEnter: handleDragStart,
+            onDragLeave: handleDragLeave,
+            onDragOver: handleDragOver,
+            children: [
+              progress > 0 && progress < 100 && /* @__PURE__ */ jsx(Progress, { max: 100, value: progress, className: "progressBar" }),
+              messageError ? /* @__PURE__ */ jsx(Box, { color: "danger", children: messageError }) : isDragging ? draggingLabel : defaultLabel,
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  multiple: true,
+                  type: "file",
+                  ref: fileInputRef,
+                  style: { display: "none" },
+                  onChange: (e) => {
+                    e.preventDefault();
+                    if (e.target.files) {
+                      const newFiles = Array.from([...e.target.files]);
+                      onChange?.(newFiles);
+                      e.target.value = "";
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        handleInfoButton && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "info",
+            iconSize: "Sm",
+            icon: "Info",
+            onMouseEnter: handleInfoButton,
+            onClick: handleClick
           }
         )
       ]
@@ -6117,6 +6225,86 @@ const Dropzone = ({
   );
 };
 
+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, key + "" , value);
+  return value;
+};
+class UploadHandler {
+  constructor(props) {
+    this.props = props;
+    __publicField$d(this, "state", { inProgressFiles: [], uploadedFiles: [] });
+    makeAutoObservable(this);
+    this.state.uploadedFiles = this.props.initialFiles;
+  }
+  delete(file) {
+    this.props.onDelete(file).then((res) => {
+      if (res === true) {
+        this.state.uploadedFiles = this.state.uploadedFiles.filter(
+          (c) => c !== file
+        );
+      } else if (typeof res === "string") {
+        ApiaUtil.instance.notifications.notify({
+          message: res
+        });
+      }
+    });
+  }
+  start(files) {
+    files.forEach((file) => {
+      const newUpload = {
+        abortController: new AbortController(),
+        id: uniqueId$4("file_upload"),
+        file,
+        progress: 0
+      };
+      this.state.inProgressFiles.push(newUpload);
+      this.props.onUpload(newUpload).then((res) => {
+        this.state.inProgressFiles = this.state.inProgressFiles.filter(
+          (c) => c.id !== newUpload.id
+        );
+        if (typeof res === "string") {
+          ApiaUtil.instance.notifications.notify({
+            message: res,
+            icon: ""
+          });
+        } else if (res) {
+          this.state.uploadedFiles.push(res);
+        }
+      });
+    });
+  }
+}
+const Uploader = observer(({ handler }) => {
+  return /* @__PURE__ */ jsxs(Box, { className: "file_uploader", children: [
+    /* @__PURE__ */ jsx(Box, { className: "file_uploader__dropzone", children: (handler.props.isMultiple || handler.state.uploadedFiles.length === 0 && handler.state.inProgressFiles.length === 0) && /* @__PURE__ */ jsx(
+      Dropzone,
+      {
+        onChange: (ev) => {
+          handler.start(ev);
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { className: "file_uploader__in_progress", children: handler.state.inProgressFiles.map((c) => /* @__PURE__ */ jsx(
+      Dropzone,
+      {
+        progress: c.progress,
+        messageError: c.error
+      },
+      c.file.name
+    )) }),
+    /* @__PURE__ */ jsx(Box, { className: "file_uploader__files_list", children: handler.state.uploadedFiles.map((c) => /* @__PURE__ */ jsx(
+      FileCard,
+      {
+        name: c.name,
+        handleClose: () => handler.delete(c)
+      },
+      c.id
+    )) })
+  ] });
+});
+
 const FileAttachment = observer(
   ({
     attachment,
@@ -6187,14 +6375,15 @@ const Attachments = observer(
   ({
     attachments,
     onRemove,
-    onAddDescription
+    onAddDescription,
+    className
   }) => {
     if (!attachments.length)
       return null;
     return /* @__PURE__ */ jsx(
       Box,
       {
-        className: "attachments",
+        className: `attachments ${className}`,
         ...getVariant("layout.common.chat.attachments"),
         children: attachments.map((x) => /* @__PURE__ */ jsx(
           FileAttachment,
@@ -6804,7 +6993,7 @@ const _Templater = class _Templater {
     Object.entries(replacementVars).forEach(([varName, varContent]) => {
       if (varContent)
         Object.entries(varContent).forEach(([key, value]) => {
-          if (isFunction$1(value)) {
+          if (isFunction(value)) {
             if (!contextMethods[contextId])
               contextMethods[contextId] = {};
             const methodId = uniqueId$3();
@@ -6903,38 +7092,43 @@ const Message = observer(
   }
 );
 
-const History = observer(({ messages }) => {
-  let currentType = "";
-  return /* @__PURE__ */ jsx(AutoscrollContainer, { sx: { flexGrow: 1, overflow: "auto" }, children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      ...getVariant("layout.common.chat.history"),
-      className: "chat_history",
-      children: messages.map((current, i) => {
-        let first = false;
-        let last = false;
-        if (currentType !== current.messageType) {
-          currentType = current.messageType;
-          first = true;
-        }
-        if (i === messages.length - 1 || messages[i + 1].messageType !== current.messageType) {
-          last = true;
-        }
-        return /* @__PURE__ */ jsx(
-          Message,
-          {
-            className: first ? "first" : last ? "last" : void 0,
-            type: current.messageType,
-            id: String(current.id),
-            attachments: current.attachments,
-            reference: current.reference,
-            message: current.message
+const History = observer(
+  ({
+    messages,
+    className
+  }) => {
+    let currentType = "";
+    return /* @__PURE__ */ jsx(AutoscrollContainer, { className, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        ...getVariant("layout.common.chat.history"),
+        className: "chat_history",
+        children: messages.map((current, i) => {
+          let first = false;
+          let last = false;
+          if (currentType !== current.messageType) {
+            currentType = current.messageType;
+            first = true;
           }
-        );
-      })
-    }
-  ) });
-});
+          if (i === messages.length - 1 || messages[i + 1].messageType !== current.messageType) {
+            last = true;
+          }
+          return /* @__PURE__ */ jsx(
+            Message,
+            {
+              className: first ? "first" : last ? "last" : void 0,
+              type: current.messageType,
+              id: String(current.id),
+              attachments: current.attachments,
+              reference: current.reference,
+              message: current.message
+            }
+          );
+        })
+      }
+    ) });
+  }
+);
 
 function getBase64FromFile(f) {
   return ((f2) => new Promise((resolve, reject) => {
@@ -6980,7 +7174,8 @@ const TextArea = observer(
     onPrev,
     onNext,
     value,
-    attachments
+    attachments,
+    className
   }) => {
     const fileInputRef = useRef(null);
     const searchControlsRef = useRef(null);
@@ -7072,7 +7267,7 @@ const TextArea = observer(
           ev.preventDefault();
           onSubmit();
         },
-        className: "search_controls",
+        className: `search_controls ${className}`,
         ...getVariant("layout.common.chat.form"),
         children: [
           dragging ? /* @__PURE__ */ jsx(
@@ -7089,7 +7284,6 @@ const TextArea = observer(
               children: getLabel("msgAiDragAndDrop").text
             }
           ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            " ",
             /* @__PURE__ */ jsx(
               AutogrowTextarea,
               {
@@ -7241,7 +7435,7 @@ class CameraController {
   }
   async closeCamera() {
     if (!this.videoElement.srcObject)
-      return null;
+      return;
     const canvas = document.createElement("canvas");
     canvas.width = this.videoElement.videoWidth;
     canvas.height = this.videoElement.videoHeight;
@@ -7280,9 +7474,10 @@ var __publicField$a = (obj, key, value) => {
   return value;
 };
 class ChatController {
-  constructor(props, onMessageSubmit, additionalOptions) {
+  constructor(props, onMessageSubmit, additionalOptions, classNames) {
     this.onMessageSubmit = onMessageSubmit;
     this.additionalOptions = additionalOptions;
+    this.classNames = classNames;
     __publicField$a(this, "currentIndex", 0);
     __publicField$a(this, "state", {
       isLoading: false,
@@ -7346,7 +7541,13 @@ class ChatController {
         }
       }
     });
-    __publicField$a(this, "History", observer(() => /* @__PURE__ */ jsx(History, { messages: this.state.messages })));
+    __publicField$a(this, "History", observer(() => /* @__PURE__ */ jsx(
+      History,
+      {
+        messages: this.state.messages,
+        className: this.classNames?.history
+      }
+    )));
     __publicField$a(this, "Attachments", observer(() => /* @__PURE__ */ jsx(
       Attachments,
       {
@@ -7354,6 +7555,7 @@ class ChatController {
         onRemove: (a) => {
           this.removeAttachment(a);
         },
+        className: this.classNames?.attachments,
         onAddDescription: (a, ev) => this.state.currentMessage.addAttachmentDescription(a, ev)
       }
     )));
@@ -7361,6 +7563,7 @@ class ChatController {
       TextArea,
       {
         additionalOptions: this.additionalOptions,
+        className: this.classNames?.textarea,
         value: this.state.currentMessage.message,
         isLoading: this.state.isLoading,
         isRecording: this.internalAudioRecorder.state.recording,
@@ -7539,7 +7742,8 @@ class FloatingChatController extends ChatController {
     super(
       { isWindowOpen: false, ...props },
       props.onMessageSubmit,
-      props.additionalOptions
+      props.additionalOptions,
+      props.classNames
     );
     __publicField$9(this, "modalTitle");
     __publicField$9(this, "Window", observer(() => {
@@ -7737,7 +7941,7 @@ const CollapsiblePanel = React__default.forwardRef(
         className: `collapsiblePanel ${className ?? ""}`,
         ...getVariant("layout.common.components.collapsiblePanel"),
         ref: (el) => {
-          if (isFunction(outerRef))
+          if (isFunction$1(outerRef))
             outerRef(el);
           setRef(el);
         },
@@ -10929,5 +11133,5 @@ const _FiltersStore = class _FiltersStore {
 __publicField(_FiltersStore, "instance", new _FiltersStore());
 let FiltersStore = _FiltersStore;
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, AutoscrollContainer, BaseButton, CalendarModal, Captcha, ChatController, ChatMessage, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingChatController, 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, getBase64FromBlob, getBase64FromFile, getFieldErrorStyles, getFieldTouchedStyles, getFileExtension, importComponent, isImage, isParametersGroup, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton, useTabsContext };
+export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, AutoscrollContainer, BaseButton, CalendarModal, Captcha, ChatController, ChatMessage, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingChatController, 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, UploadHandler, Uploader, WaiTypeAhead, getBase64FromBlob, getBase64FromFile, getFieldErrorStyles, getFieldTouchedStyles, getFileExtension, importComponent, isImage, isParametersGroup, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useModal, useModalContext, useOtherTagButton, useTabsContext };
 //# sourceMappingURL=index.js.map