@apia/components 4.0.44 → 5.0.0

package/dist/index.js

@@ -4,10 +4,10 @@ import React__default, { createContext, useContext, useEffect, useMemo, useState
 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, cloneDeep, isFunction as isFunction$1 } from 'lodash-es';
-import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, focusOutline, makeStyledComponent, useThemeUI, Label as Label$1, Progress, Grid, Paragraph, Container, Textarea } from '@apia/theme';
+import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, focusOutline, makeStyledComponent, useThemeUI, Label as Label$1, Progress, Grid, Paragraph, Container, Switch, 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, getLabel, dateToApiaFormat, dateFromApiaFormat, isChild, EventEmitter, useUnmount, useMount, StatefulEmitter, shallowEqual as shallowEqual$1, getSpecificParent, getDateFormat, customEvents, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, uniqueId as uniqueId$4, useMatchScrollDirection, arrayOrArray } from '@apia/util';
+import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, getLabel, dateToApiaFormat, dateFromApiaFormat, isChild, EventEmitter, useUnmount, useMount, StatefulEmitter, shallowEqual as shallowEqual$1, getSpecificParent, uniqueId as uniqueId$4, getDateFormat, customEvents, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, toBoolean, useMatchScrollDirection, 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';
@@ -21,13 +21,14 @@ import { shallowEqual } from '@apia/store';
 import AnimateHeight from 'react-animate-height';
 import { useUpdateEffect as useUpdateEffect$1, useScroll } from 'ahooks';
 import { FaCalendarAlt, FaBars } from '@meronex/icons/fa';
-import dayjs from 'dayjs';
-import Calendar from 'react-calendar';
 import ReactInputMask from 'react-input-mask';
+import Calendar from 'react-calendar';
+import dayjs from 'dayjs';
 import isFunction from 'lodash-es/isFunction';
 import { createFAsomeStore } from '@apia/dom-store';
 import { keyframes } from '@emotion/react';
 import { Remarkable } from 'remarkable';
+import { makeApiaUsersModal2, makeApiaPoolsModals2 } from '@apia/api';
 
 const AccordionContext = createContext(null);
 const AccordionItemContext = createContext(null);
@@ -38,10 +39,10 @@ const useAccordionContext = () => {
   return context;
 };
 
-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);
+var __defProp$p = Object.defineProperty;
+var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$p = (obj, key, value) => {
+  __defNormalProp$p(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 function makeItemStateSelectorHook(handler) {
@@ -73,10 +74,10 @@ class AccordionHandler {
   constructor(id, props) {
     this.id = id;
     this.props = props;
-    __publicField$o(this, "itemsState", {});
-    __publicField$o(this, "itemsStateListeners", {});
-    __publicField$o(this, "propsListeners", []);
-    __publicField$o(this, "hooks", {
+    __publicField$p(this, "itemsState", {});
+    __publicField$p(this, "itemsStateListeners", {});
+    __publicField$p(this, "propsListeners", []);
+    __publicField$p(this, "hooks", {
       useAccordionContextProvider: () => {
         const Provider = useMemo(
           () => ({ children }) => /* @__PURE__ */ jsx(AccordionContext.Provider, { value: this, children }),
@@ -1019,10 +1020,10 @@ const WindowModal = forwardRef(
   }
 );
 
-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);
+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, key + "" , value);
   return value;
 };
 var __accessCheck$d = (obj, member, msg) => {
@@ -1087,7 +1088,7 @@ _onDestroyCb = new WeakMap();
 const BodyScrollLock = new (_a = class {
   constructor() {
     __privateAdd$d(this, _evaluate);
-    __publicField$n(this, "lockers", []);
+    __publicField$o(this, "lockers", []);
   }
   getLocker() {
     const locker = new BodyScrollLocker();
@@ -1432,10 +1433,10 @@ const OpenModal = (props) => {
   );
 };
 
-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, 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, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$c = (obj, member, msg) => {
@@ -1479,14 +1480,14 @@ class ApiaUtilModalHandler {
 }
 class ApiaUtilModals {
   constructor() {
-    __publicField$m(this, "overlays", []);
-    __publicField$m(this, "modals", []);
+    __publicField$n(this, "overlays", []);
+    __publicField$n(this, "modals", []);
     __privateAdd$c(this, _maxId$1, 0);
     __privateAdd$c(this, _maxOverlay, 0);
     __privateAdd$c(this, _innerClose, (id) => {
       this.modals = this.modals.filter((s) => s.id !== id);
     });
-    __publicField$m(this, "Component", observer(() => {
+    __publicField$n(this, "Component", observer(() => {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         this.modals.map((current) => /* @__PURE__ */ jsx(OpenModal, { ...current }, current.id)),
         this.overlays.map((c) => c.render)
@@ -1576,29 +1577,37 @@ _maxId$1 = new WeakMap();
 _maxOverlay = new WeakMap();
 _innerClose = new WeakMap();
 
-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);
+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, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 class ApiaUtilNotifications {
-  constructor() {
-    __publicField$l(this, "close", (id) => {
+  constructor(util) {
+    this.util = util;
+    __publicField$m(this, "close", (id) => {
       defaultNotifier.close(id);
     });
-    __publicField$l(this, "closeAll", () => {
+    __publicField$m(this, "closeAll", () => {
       defaultNotifier.closeAll();
     });
-    __publicField$l(this, "notify", (notification) => {
-      defaultNotifier.notify({
-        ...notification,
-        type: notification.type ?? "warning"
-      });
+    __publicField$m(this, "notify", (notification) => {
+      if (notification.type === "modal") {
+        this.util.dialogs.alert({
+          children: notification.message,
+          title: notification.title || ""
+        });
+      } else {
+        defaultNotifier.notify({
+          ...notification,
+          type: notification.type ?? "warning"
+        });
+      }
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    __publicField$l(this, "useSelector", (selector) => defaultNotifier.useSelector(selector));
-    __publicField$l(this, "Component", () => {
+    __publicField$m(this, "useSelector", (selector) => defaultNotifier.useSelector(selector));
+    __publicField$m(this, "Component", () => {
       return /* @__PURE__ */ jsx(NotificationsList, {});
     });
   }
@@ -2021,10 +2030,10 @@ const AlertModal = ({
   );
 };
 
-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, 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;
 };
 var __accessCheck$b = (obj, member, msg) => {
@@ -2058,9 +2067,9 @@ class ApiaUtilDialogs {
   constructor() {
     __privateAdd$b(this, _maxIdAlert, 0);
     __privateAdd$b(this, _maxIdConfirm, 0);
-    __publicField$k(this, "alerts", []);
-    __publicField$k(this, "dialogs", []);
-    __publicField$k(this, "Component", observer(() => {
+    __publicField$l(this, "alerts", []);
+    __publicField$l(this, "dialogs", []);
+    __publicField$l(this, "Component", observer(() => {
       const removeModal = useCallback(
         (which) => {
           this.dialogs = this.dialogs.filter((search) => search !== which);
@@ -2330,10 +2339,10 @@ parseCellValue_fn = function(cellValue) {
   return cellValue.match(/^\s*"?([^"]+)"?[\s\r\n]*$/)?.[1] ?? cellValue;
 };
 
-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);
+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;
 };
 let maxId = 0;
@@ -2341,14 +2350,14 @@ class ApiaUtilTooltip {
   constructor(props, close) {
     this.props = props;
     this.close = close;
-    __publicField$j(this, "id", `tooltip__${maxId++}`);
+    __publicField$k(this, "id", `tooltip__${maxId++}`);
   }
 }
 
-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, 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, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$9 = (obj, member, msg) => {
@@ -2381,7 +2390,7 @@ class AutomaticTooltip {
     __privateAdd$9(this, _timeout$1, 500);
     __privateAdd$9(this, _tooltipTimeout, 0);
     __privateAdd$9(this, _unsuscribe, null);
-    __publicField$i(this, "ref", (el) => {
+    __publicField$j(this, "ref", (el) => {
       var _a, _b;
       (_a = __privateGet$7(this, _unsuscribe)) == null ? void 0 : _a.call(this);
       const listener = () => {
@@ -2413,7 +2422,7 @@ class AutomaticTooltip {
       }
     });
     __privateAdd$9(this, _tooltip, null);
-    __publicField$i(this, "update", (tooltip) => {
+    __publicField$j(this, "update", (tooltip) => {
       __privateSet$5(this, _tooltip, tooltip);
     });
     __privateSet$5(this, _tooltip, tooltip);
@@ -2764,10 +2773,10 @@ const Tooltip = ({
   );
 };
 
-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$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, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 var __accessCheck$8 = (obj, member, msg) => {
@@ -2787,7 +2796,7 @@ var _emitter$2, _shoutChangedList;
 class ApiaUtilTooltips {
   constructor() {
     __privateAdd$8(this, _emitter$2, new EventEmitter());
-    __publicField$h(this, "tooltips", []);
+    __publicField$i(this, "tooltips", []);
     __privateAdd$8(this, _shoutChangedList, () => {
       __privateGet$6(this, _emitter$2).emit("changedList", [...this.tooltips]);
     });
@@ -2795,7 +2804,7 @@ class ApiaUtilTooltips {
      * Permite crear un tooltip que se abrirá automáticamente al estar parado
      * sobre un elemento durante 300ms
      */
-    __publicField$h(this, "useHover", (tooltip) => {
+    __publicField$i(this, "useHover", (tooltip) => {
       let tt = void 0;
       tt = useMemo(() => {
         tt?.ref(null);
@@ -2806,15 +2815,15 @@ class ApiaUtilTooltips {
       });
       return tt;
     });
-    __publicField$h(this, "close", (id) => {
+    __publicField$i(this, "close", (id) => {
       this.tooltips = this.tooltips.filter((current) => current.id !== id);
       __privateGet$6(this, _shoutChangedList).call(this);
     });
-    __publicField$h(this, "closeAll", () => {
+    __publicField$i(this, "closeAll", () => {
       this.tooltips = [];
       __privateGet$6(this, _shoutChangedList).call(this);
     });
-    __publicField$h(this, "open", (tooltip) => {
+    __publicField$i(this, "open", (tooltip) => {
       const controller = new ApiaUtilTooltip(tooltip, () => {
         this.close(controller.id);
         controller.props.onClose?.();
@@ -2827,7 +2836,7 @@ class ApiaUtilTooltips {
       __privateGet$6(this, _shoutChangedList).call(this);
       return controller;
     });
-    __publicField$h(this, "Component", () => {
+    __publicField$i(this, "Component", () => {
       const [tooltips, setTooltips] = useState(this.tooltips);
       useMount(() => {
         const unsuscribeToList = __privateGet$6(this, _emitter$2).on("changedList", (ev) => {
@@ -2869,10 +2878,10 @@ class ApiaUtilTooltips {
 _emitter$2 = new WeakMap();
 _shoutChangedList = new WeakMap();
 
-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$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) => {
@@ -2909,7 +2918,7 @@ class ApiaUtilMenu {
   constructor() {
     __privateAdd$7(this, _emitter$1, new EventEmitter());
     __privateAdd$7(this, _items$1, []);
-    __publicField$g(this, "menuProps", null);
+    __publicField$h(this, "menuProps", null);
     __privateAdd$7(this, _hooks, {
       useIsOpen: () => {
         const [isOpen, setIsOpen] = useState(false);
@@ -2924,10 +2933,10 @@ class ApiaUtilMenu {
         ];
       }
     });
-    __publicField$g(this, "close", () => {
+    __publicField$h(this, "close", () => {
       __privateGet$5(this, _emitter$1).emit("toggle", false);
     });
-    __publicField$g(this, "open", ({
+    __publicField$h(this, "open", ({
       menuProps,
       items
     }) => {
@@ -2968,7 +2977,7 @@ class ApiaUtilMenu {
         return /* @__PURE__ */ createElement(MenuItem, { ...current, key: current.key }, children);
       }) });
     });
-    __publicField$g(this, "Component", () => {
+    __publicField$h(this, "Component", () => {
       const [isOpen, close] = __privateGet$5(this, _hooks).useIsOpen();
       if (!isOpen)
         return null;
@@ -2993,17 +3002,17 @@ _hooks = new WeakMap();
 _maxId = new WeakMap();
 _RenderMenu = new WeakMap();
 
-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$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;
 };
 class ApiaUtilMouse extends EventEmitter {
   constructor() {
     super();
-    __publicField$f(this, "x", 0);
-    __publicField$f(this, "y", 0);
+    __publicField$g(this, "x", 0);
+    __publicField$g(this, "y", 0);
     document.addEventListener("mousemove", (ev) => {
       this.x = ev.clientX;
       this.y = ev.clientY;
@@ -3015,10 +3024,10 @@ class ApiaUtilMouse extends EventEmitter {
   }
 }
 
-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$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$6 = (obj, member, msg) => {
@@ -3042,15 +3051,15 @@ var __privateSet$3 = (obj, member, value, setter) => {
 var _instance;
 const _ApiaUtil = class _ApiaUtil {
   constructor() {
-    __publicField$e(this, "dialogs");
-    __publicField$e(this, "menu");
-    __publicField$e(this, "modals");
-    __publicField$e(this, "mouse");
-    __publicField$e(this, "notifications");
-    __publicField$e(this, "parsers");
-    __publicField$e(this, "tabs");
-    __publicField$e(this, "tooltips");
-    __publicField$e(this, "Component", () => {
+    __publicField$f(this, "dialogs");
+    __publicField$f(this, "menu");
+    __publicField$f(this, "modals");
+    __publicField$f(this, "mouse");
+    __publicField$f(this, "notifications");
+    __publicField$f(this, "parsers");
+    __publicField$f(this, "tabs");
+    __publicField$f(this, "tooltips");
+    __publicField$f(this, "Component", () => {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(this.dialogs.Component, {}),
         /* @__PURE__ */ jsx(this.modals.Component, {}),
@@ -3063,7 +3072,7 @@ const _ApiaUtil = class _ApiaUtil {
     this.menu = new ApiaUtilMenu();
     this.modals = new ApiaUtilModals();
     this.mouse = new ApiaUtilMouse();
-    this.notifications = new ApiaUtilNotifications();
+    this.notifications = new ApiaUtilNotifications(this);
     this.parsers = new ApiaUtilParsers();
     this.tabs = new ApiaUtilTabsController();
     this.tooltips = new ApiaUtilTooltips();
@@ -3079,22 +3088,22 @@ _instance = new WeakMap();
 __privateAdd$6(_ApiaUtil, _instance, void 0);
 let ApiaUtil = _ApiaUtil;
 
-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;
 };
 class ScreenLocker {
   constructor() {
-    __publicField$d(this, "emitter", new StatefulEmitter({
+    __publicField$e(this, "emitter", new StatefulEmitter({
       locks: {
         common: { count: 0 },
         linear: { count: 0 },
         white: { count: 1 }
       }
     }));
-    __publicField$d(this, "lock", (options) => {
+    __publicField$e(this, "lock", (options) => {
       this.emitter.setState("locks", (s) => {
         const key = options?.type ?? "common";
         return {
@@ -3110,11 +3119,11 @@ class ScreenLocker {
         };
       });
     });
-    __publicField$d(this, "hasReleased", false);
+    __publicField$e(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$d(this, "release", () => {
+    __publicField$e(this, "release", () => {
       if (this.hasReleased)
         return;
       this.hasReleased = true;
@@ -3130,11 +3139,11 @@ class ScreenLocker {
     /**
      * This method notifies when the screenLock is released by the first time.
      */
-    __publicField$d(this, "onRelease", this.emitter.on.bind(this.emitter, "release"));
+    __publicField$e(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$d(this, "Component", () => {
+    __publicField$e(this, "Component", () => {
       const locks = this.emitter.useState("locks");
       const style = {
         alignItems: "center",
@@ -3207,10 +3216,10 @@ const OptionsBox = observer(() => {
   }) });
 });
 
-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$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$5 = (obj, member, msg) => {
@@ -3234,7 +3243,7 @@ var __privateSet$2 = (obj, member, value, setter) => {
 var _actualSearch, _timeout;
 class AutocompleteController {
   constructor(properties) {
-    __publicField$c(this, "state", {
+    __publicField$d(this, "state", {
       disabled: false,
       readOnly: false,
       id: uniqueId$3("autocomplete"),
@@ -3267,13 +3276,17 @@ class AutocompleteController {
       }
     });
     __privateAdd$5(this, _timeout, 0);
-    __publicField$c(this, "tooltipRef", null);
+    __publicField$d(this, "tooltipRef", null);
     Object.assign(this.state, properties);
     if (properties.value) {
       this.state.showValue = String(
         properties.options?.find((c) => c.value === properties.value)?.label
       );
       this.state.focusedValue = properties.value;
+    } else if (properties.options) {
+      this.state.value = properties.options[0]?.value;
+      this.state.showValue = properties.options[0]?.label?.toString?.() || "";
+      properties.onChange?.(this.state.value, this);
     }
     makeAutoObservable(this, {
       getAutocompleteBox: false,
@@ -3468,7 +3481,7 @@ class AutocompleteController {
 _actualSearch = new WeakMap();
 _timeout = new WeakMap();
 
-const SearchBox = observer((props) => {
+const UnobservedSearchBox = forwardRef((props, ref) => {
   const handler = useAutocompleteContext();
   const breakpoint = useBreakpointIndex();
   const inputRef = useRef(null);
@@ -3484,6 +3497,7 @@ const SearchBox = observer((props) => {
     breakpoint <= 3 ? /* @__PURE__ */ jsx(
       Select,
       {
+        ref,
         disabled: handler.state.disabled,
         onChange: (ev) => {
           handler.setValue(ev.target.value);
@@ -3495,7 +3509,13 @@ const SearchBox = observer((props) => {
         Input,
         {
           ...props,
-          ref: inputRef,
+          ref: (el) => {
+            inputRef.current = el;
+            try {
+              ref(el);
+            } catch (_) {
+            }
+          },
           className: `autocomplete__search ${handler.state.disabled ? "disabled" : ""} ${handler.state.readOnly ? "readOnly" : ""}`,
           onChange: async (ev) => {
             handler.search(ev.target.value);
@@ -3527,6 +3547,9 @@ const SearchBox = observer((props) => {
     ] })
   ] });
 });
+const SearchBox = observer(
+  UnobservedSearchBox
+);
 
 const KeyHandler$1 = observer((props) => {
   const handler = useAutocompleteContext();
@@ -3599,7 +3622,7 @@ const KeyHandler$1 = observer((props) => {
   );
 });
 
-const Autocomplete = (props) => {
+const Autocomplete = forwardRef((props, ref) => {
   const [handler] = useState(() => {
     const newHandler = props.handler ?? new AutocompleteController(props.properties ?? {});
     props.getHandler?.(newHandler);
@@ -3622,10 +3645,10 @@ const Autocomplete = (props) => {
       className: `autocomplete ${props.properties?.className || ""}`,
       "data-autocomplete-box": handler.state.id,
       ...getVariant("layout.common.components.autocomplete"),
-      children: /* @__PURE__ */ jsx(SearchBox, { ...props.inputProps })
+      children: /* @__PURE__ */ jsx(SearchBox, { ref, ...props.inputProps })
     }
   ) });
-};
+});
 
 const AutogrowTextarea = observer(
   (props) => {
@@ -4002,30 +4025,6 @@ const Checkbox$1 = forwardRef(
 );
 Checkbox$1.displayName = "Checkbox";
 
-const CalModal = React__default.forwardRef(
-  ({ handleClickDay, calValue, locale }) => {
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        ...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"
-          }
-        )
-      }
-    );
-  }
-);
-
 const IconInput = ({
   additionalButtons,
   additionalButtonsPosition = "before",
@@ -4102,6 +4101,50 @@ const IconInput = ({
   );
 };
 
+const CalModal = React__default.forwardRef(
+  ({ handleClickDay, calValue, locale, onBlur }) => {
+    const uns = useRef(() => {
+    });
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ...getVariant("layout.common.components.datePicker"),
+        className: "datePicker",
+        ref: (el) => {
+          uns.current();
+          if (el instanceof HTMLElement) {
+            const h = (ev) => {
+              onBlur?.(ev);
+            };
+            el.addEventListener("blur", h, { capture: true });
+            uns.current = () => {
+              el.removeEventListener("blur", h, { capture: true });
+            };
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            onClickDay: handleClickDay,
+            locale,
+            value: calValue || /* @__PURE__ */ new Date(),
+            nextLabel: "\u203A",
+            next2Label: "\xBB",
+            prevLabel: "\u2039",
+            prev2Label: "\xAB"
+          }
+        )
+      }
+    );
+  }
+);
+
+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;
+};
 const DEFAULT_LOCALE = window.LANG_CODE;
 const DEFAULT_MASK_PLACEHOLDER = "_";
 const dateFormat = getDateFormat();
@@ -4110,334 +4153,210 @@ const getMaskForDateFormat = () => {
     return "9999/99/99";
   return "99/99/9999";
 };
-const DateInput = React__default.forwardRef(
-  ({
-    allowPickBeforeToday,
-    buttonProps: outerButtonProps,
-    CalModalRenderer,
-    className,
-    error,
-    getCustomMask,
-    inputClassName,
-    isLoading,
-    onBlur,
-    onChange,
-    onDelete,
-    onError,
-    renderLabel,
-    value: outerValue,
-    avoidErrorMessage,
-    ...props
-  }, ref) => {
-    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 { deleteFiltersTimestamp, ...otherProps } = props;
-    const hasBlured = useRef(false);
-    const [stateError, setError] = React__default.useState(error ?? null);
-    const [isFocused, setIsFocused] = React__default.useState(false);
-    const lastEmittedValue = React__default.useRef(outerValue ?? "");
-    useUpdateEffect$1(() => {
-      setInputValue(outerValue ?? "");
-      lastEmittedValue.current = outerValue;
-    }, [outerValue]);
-    useUpdateEffect$1(() => {
-      setError(error ?? null);
-    }, [error]);
-    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 (lastEmittedValue.current !== newValue) {
-          lastEmittedValue.current = newValue;
-          return onChange?.(newValue) ?? true;
-        }
+class DateInputController {
+  constructor() {
+    __publicField$c(this, "props", {});
+    __publicField$c(this, "state", {});
+    __publicField$c(this, "_ref", null);
+    __publicField$c(this, "error", false);
+    __publicField$c(this, "inputValue", "");
+    __publicField$c(this, "value", null);
+    __publicField$c(this, "previousValue", "");
+    this.props.id = uniqueId$4("date-input");
+    makeAutoObservable(this);
+  }
+  clear() {
+    this.setValueFromString("");
+    this.focus();
+  }
+  focus() {
+    const input = this._ref?.querySelector("input");
+    if (input) {
+      input.focus();
+      setTimeout(() => {
+        window.requestAnimationFrame(() => {
+          input.setSelectionRange(0, input.value.length);
+        });
+      }, 0);
+    }
+  }
+  ref(el) {
+    this._ref = el;
+  }
+  get calendarElementId() {
+    return `DateModal${this.props.id}`;
+  }
+  isInsidePicker(el) {
+    return !!el?.closest(`#${this.props.id}, #${this.calendarElementId}`);
+  }
+  onBlur(ev) {
+    if (!this.isInsidePicker(ev.relatedTarget)) {
+      if (this.error) {
+        this.inputValue = "";
+        this.value = null;
+        this.error = false;
+      }
+      this.props.onBlur?.(this.inputValue, ev);
+    }
+  }
+  onInputChange(ev) {
+    this.setValueFromString(ev.target.value);
+  }
+  onCalendarSelect(value) {
+    this.setValue(value);
+  }
+  openCalendar(ev) {
+    const tooltip = ApiaUtil.instance.tooltips.open({
+      attachToElement() {
+        return ev.target.closest("button");
       },
-      [onChange]
-    );
-    const setCalendarValue = React__default.useCallback(
-      (value, nocheck, avoidShout) => {
-        if (value === "") {
-          void shoutOnChange(value);
-          setInputValue(value);
-          setCalValue(void 0);
-          return;
-        }
-        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);
-        if (formattedDate !== inputValue && nocheck !== true) {
-          void shoutOnChange("");
-          setInputValue("");
-          setError(window.MSG_INVALID_DATE);
-        } else if (allowPickBeforeToday === false && newDate.isBefore(today)) {
-          void shoutOnChange("");
-          setInputValue("");
-          setError(window.MSG_FEC_FIN_MAY_FEC_INI);
-        } 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());
-            }
+      attachToElementAnchorPoint: "center",
+      closeOnClick: false,
+      closeOnClickOut: true,
+      closeOnEscape: true,
+      closeOnMouseLeaveTooltip: false,
+      closeOnMouseLeaveAttachedElement: false,
+      closeOnScrollOut: true,
+      children: /* @__PURE__ */ jsx("div", { id: this.calendarElementId, children: /* @__PURE__ */ jsx(
+        CalModal,
+        {
+          calValue: this.value || /* @__PURE__ */ new Date(),
+          locale: DEFAULT_LOCALE,
+          handleClickDay: (date) => {
+            tooltip.close();
+            this.onCalendarSelect(date);
+            this.focus();
           }
         }
+      ) }),
+      initialFocusGetter(el) {
+        return el.querySelector(`.react-calendar__tile--active`);
       },
-      [allowPickBeforeToday, inputValue, shoutOnChange]
-    );
-    const selectDate = React__default.useCallback(
-      (val) => {
-        const newValue = dayjs(val).format(dateFormat);
-        setCalendarValue(newValue, true);
-      },
-      [setCalendarValue]
-    );
-    useEffect(() => {
-      if (stateError !== "" && stateError !== null && !avoidErrorMessage) {
-        ApiaUtil.instance.notifications.notify({
-          message: stateError,
-          type: "warning"
+      minSize: { width: 350, height: 310 },
+      onClose: () => {
+        window.requestAnimationFrame(() => {
+          if (!this.isInsidePicker(document.activeElement)) {
+            this.props.onBlur?.(this.inputValue);
+          }
         });
       }
-    }, [avoidErrorMessage, 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}`;
-        })) {
-          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, onError]
-    );
-    const inputProps = React__default.useMemo(
-      () => ({
-        ...otherProps,
-        className: `dateInput ${inputClassName ?? ""}`,
-        value: stateError ? "" : renderLabel ? renderLabel(inputValue) : inputValue,
-        ref,
-        onChange: (ev) => {
-          if (props.readOnly) {
-            return;
-          }
-          setInputValue(ev.target.value);
-          if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== ev.target.value && ev.target.value !== "") {
-            setError(null);
-            const hasPlaceHolder = ev.target.value.match(/_/);
-            if (!hasPlaceHolder)
-              return onChange?.(ev.target.value);
-          } else if (getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) === ev.target.value) {
-            setCalendarValue("");
-          }
-        },
-        onBlur: (ev) => {
-          setIsFocused(false);
-          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);
-          }
-        },
-        onFocus: () => {
-          setIsFocused(true);
-        },
-        onKeyDown: (ev) => {
-          if (ev.key === "Enter")
-            setCalendarValue(inputValue);
-        }
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [
-        otherProps,
-        inputClassName,
-        stateError,
-        renderLabel,
-        inputValue,
-        ref,
-        props.readOnly,
-        getCustomMask,
-        setCalendarValue,
-        handleBlur
-      ]
-    );
-    const buttonProps = React__default.useMemo(
-      () => ({
-        disabled: props.disabled || props.readOnly,
-        "aria-label": window.LBL_PICK_DATE,
-        ...outerButtonProps
-      }),
-      [outerButtonProps, props.disabled, props.readOnly]
-    );
-    const additionalButtons = React__default.useMemo(() => {
-      const doDelete = (e) => {
-        e?.stopPropagation();
-        setCalendarValue("");
-        onDelete?.();
-        document.querySelector(`#DateInput${id} input`)?.focus();
-      };
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          role: "button",
-          tabIndex: 0,
-          onMouseDown: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          },
-          onClick: (e) => {
-            e.stopPropagation();
-            doDelete(e);
-          },
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              doDelete(e);
-            }
-          },
-          "aria-label": getLabel("btnAiDelete").text,
-          title: getLabel("btnAiDelete").text,
-          children: /* @__PURE__ */ jsx(Close, { type: "button", className: "delete_date_button" })
+    });
+  }
+  setValueFromString(str, fire = true) {
+    if (str === "") {
+      this.inputValue = "";
+      this.setValue(null, fire);
+    } else if (str !== this.inputValue) {
+      const hasPlaceHolder = str.match(/_/);
+      if (!hasPlaceHolder) {
+        const value = dayjs(str, dateFormat);
+        const formattedDate = value.format(dateFormat);
+        if (value.isValid() && formattedDate === str) {
+          this.setValue(value.toDate(), fire);
+        } else {
+          this.inputValue = str;
+          this.props.onError?.(getLabel("msgInvalidDate").text);
+          this.error = true;
         }
-      );
-    }, [id, onDelete, setCalendarValue]);
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      } else {
+        this.inputValue = str;
+      }
+    }
+  }
+  async setValue(date, fire = true) {
+    this.error = false;
+    if (date !== this.value) {
+      const dateValue = dayjs(date);
+      const newValue = dateValue.isValid() ? dateValue.format(dateFormat) : "";
+      const res = fire ? await this.props.onChange?.(newValue) : null;
+      this.inputValue = newValue || "";
+      if (typeof res !== "string") {
+        this.value = date;
+      } else {
+        this.error = true;
+        this.value = null;
+        this.props.onError?.(res);
+      }
+    }
+  }
+  render(props) {
+    const { onBlur, onChange, onError, id } = props;
+    Object.assign(this.props, {
+      onBlur,
+      onChange,
+      onError,
+      id: id ?? this.props.id
+    });
+    const { value, disabled, readonly } = props;
+    Object.assign(this.state, { readonly, value, disabled });
+    if (value !== void 0 && this.previousValue !== value) {
+      this.previousValue = value;
+      this.setValueFromString(value, false);
+    }
+  }
+}
+const DateInput = observer(
+  ({
+    className,
+    disabled,
+    id: outerId,
+    inputRef,
+    onBlur,
+    onChange,
+    onError,
+    readonly,
+    value: outerValue
+  }) => {
+    const controller = useMemo(() => new DateInputController(), []);
+    controller.render({
+      className,
+      disabled,
+      id: outerId,
+      inputRef,
+      onBlur,
+      onChange,
+      onError,
+      readonly,
+      value: outerValue
+    });
+    return /* @__PURE__ */ jsx(
       Box,
       {
         ...getVariant("forms.dateInput"),
         className: `${className ?? ""} dateInput`,
-        id: `DateInput${id}`,
-        ref: boxRef,
-        onBlur: (e) => {
-          setIsFocused(false);
-          if (hasBlured.current) {
-            hasBlured.current = false;
-          } else if (!document.querySelector(".overlay.screenLock")) {
-            handleBlur(e);
-          }
-        },
+        id: controller.props.id,
+        onBlur: controller.onBlur.bind(controller),
+        ref: controller.ref.bind(controller),
         children: /* @__PURE__ */ jsx(
           IconInput,
           {
-            additionalButtons: (
-              // mostrar sólo si el campo tiene valor, no está en modo placeholder,
-              // no es readOnly/disabled Y el input está enfocado
-              inputValue && inputValue !== getMaskForDateFormat().replaceAll(
-                "9",
-                DEFAULT_MASK_PLACEHOLDER
-              ) && !props.readOnly && !props.disabled && isFocused ? additionalButtons : void 0
-            ),
-            buttonProps,
-            className: `${stateError !== null ? "field__withError" : ""}`,
+            additionalButtons: controller.inputValue && getMaskForDateFormat().replaceAll("9", DEFAULT_MASK_PLACEHOLDER) !== controller.inputValue ? /* @__PURE__ */ jsx(
+              Close,
+              {
+                as: "button",
+                onClick: controller.clear.bind(controller),
+                className: "delete_date_button",
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+              }
+            ) : void 0,
+            buttonProps: { disabled },
             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 }
-              });
+            inputProps: {
+              disabled,
+              onChange: controller.onInputChange.bind(controller),
+              value: controller.inputValue
             },
-            readOnly: props.readOnly
+            mask: getMaskForDateFormat(),
+            maskPlaceholder: DEFAULT_MASK_PLACEHOLDER,
+            onClick: controller.openCalendar.bind(controller),
+            readOnly: readonly
           }
         )
       }
-    ) });
+    );
   }
 );
 
@@ -4660,7 +4579,7 @@ const FieldLabel = forwardRef(
       {
         as: as ?? "label",
         ...props,
-        className: `fieldLabel ${props.className ?? ""}`,
+        className: `fieldLabel ${props.className ?? ""} ${error ? "field_with_error" : ""}`,
         ...getVariant("layout.common.components.fieldLabel"),
         "aria-label": props["aria-label"] ?? label,
         ref,
@@ -7725,7 +7644,7 @@ const Dropzone = ({
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      ...getVariant("layout.execution.components.uploader.dropzone"),
+      ...getVariant("layout.common.components.uploader.dropzone"),
       className: "dropzone__container",
       children: [
         /* @__PURE__ */ jsxs(
@@ -8828,6 +8747,253 @@ const MDRenderer = ({ str }) => {
 };
 var index = memo(MDRenderer);
 
+const SwitchCard = observer(
+  ({
+    align = "left",
+    icon,
+    label,
+    notSwitchedLabel,
+    onClose,
+    onSwitch,
+    switchedLabel,
+    switchProps,
+    value,
+    disabled
+  }) => {
+    const [isSwitched, setIsSwitched] = useState(toBoolean(value));
+    useEffect(() => {
+      setIsSwitched(toBoolean(value));
+    }, [value]);
+    const handleSwitchChange = (e) => {
+      const newValue = e.target.checked;
+      setIsSwitched(newValue);
+      if (onSwitch) {
+        onSwitch(newValue);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: "switch__card",
+        ...getVariant("layout.common.components.switchCard"),
+        children: [
+          align === "left" && /* @__PURE__ */ jsx(
+            Switch,
+            {
+              disabled,
+              checked: isSwitched,
+              ...switchProps,
+              onChange: handleSwitchChange
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { className: "label__container", title: label, children: [
+            icon && /* @__PURE__ */ jsx(Icon$1, { name: icon, title: "" }),
+            label
+          ] }),
+          (switchedLabel && isSwitched || align === "right" || onClose) && /* @__PURE__ */ jsxs(Box, { className: "switch__container", children: [
+            !notSwitchedLabel && (isSwitched ? getLabel("lblCanUpdate").text : getLabel("lblCannotUpdate").text),
+            align === "right" && /* @__PURE__ */ jsx(
+              Switch,
+              {
+                disabled,
+                checked: isSwitched,
+                ...switchProps,
+                onChange: handleSwitchChange,
+                className: "switch",
+                title: isSwitched ? getLabel("lblCanUpdate").text : getLabel("lblCannotUpdate").text
+              }
+            ),
+            onClose && !disabled && /* @__PURE__ */ jsx(Close, { disabled, onClick: onClose })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+const PermissionsList = observer(() => {
+  const controller = usePermissionsContext();
+  const state = controller.permissions;
+  return /* @__PURE__ */ jsxs(Box, { className: "permissions__list", children: [
+    state.users && state.users.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: getLabel("sbtUsers").text }),
+      /* @__PURE__ */ jsx(Box, { as: "ul", children: state.users.map((c) => {
+        return /* @__PURE__ */ jsx(Box, { as: "li", children: /* @__PURE__ */ jsx(
+          SwitchCard,
+          {
+            disabled: controller.disabled,
+            label: c.userLogin,
+            align: "right",
+            icon: "User2",
+            onClose: () => controller.onChangeUsers(
+              controller.permissions.users.filter(
+                (s) => s.userId !== c.userId
+              )
+            ),
+            onSwitch: (isSwitched) => c.canUpdate = isSwitched,
+            value: c.canUpdate
+          }
+        ) }, c.userId);
+      }) })
+    ] }),
+    state.pools && state.pools.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: getLabel("lblPool").text }),
+      /* @__PURE__ */ jsx(Box, { as: "ul", children: state.pools.map((c) => {
+        return /* @__PURE__ */ jsx(Box, { as: "li", children: /* @__PURE__ */ jsx(
+          SwitchCard,
+          {
+            label: c.poolName,
+            align: "right",
+            icon: "Groups",
+            onClose: () => controller.onChangePools(
+              controller.permissions.pools.filter(
+                (s) => s.poolId !== c.poolId
+              )
+            ),
+            onSwitch: (isSwitched) => c.canUpdate = isSwitched,
+            value: c.canUpdate
+          }
+        ) }, c.poolName);
+      }) })
+    ] })
+  ] });
+});
+
+const UserModalBtn = observer(() => {
+  const context = usePermissionsContext();
+  return /* @__PURE__ */ jsx(
+    SimpleButton,
+    {
+      disabled: context.disabled,
+      variant: "outline",
+      onClick: () => {
+        makeApiaUsersModal2().openModal({
+          title: window.LBL_ADD_USER
+        }).then((selected) => {
+          context.onChangeUsers(
+            selected.reduce(
+              (acc, c) => {
+                const newItem = {
+                  userId: c.row.id,
+                  userLogin: String(c.row.cells[0].children),
+                  canUpdate: false
+                };
+                if (!acc.some((c2) => c2.userId === newItem.userId)) {
+                  acc.push(newItem);
+                }
+                return acc;
+              },
+              [...context.permissions.users]
+            )
+          );
+        });
+      },
+      children: getLabel("btnAddUser").text
+    }
+  );
+});
+
+const PoolModalBtn = observer(() => {
+  const context = usePermissionsContext();
+  return /* @__PURE__ */ jsx(
+    SimpleButton,
+    {
+      disabled: context.disabled,
+      variant: "outline",
+      onClick: () => {
+        makeApiaPoolsModals2().openModal({
+          title: window.LBL_ADD_GROUP
+        }).then((selected) => {
+          context.onChangePools(
+            selected.reduce(
+              (acc, c) => {
+                const newItem = {
+                  poolId: c.row.id,
+                  poolName: String(c.row.cells[0].children),
+                  canUpdate: false
+                };
+                if (!acc.some((c2) => c2.poolId === newItem.poolId)) {
+                  acc.push(newItem);
+                }
+                return acc;
+              },
+              [...context.permissions.pools]
+            )
+          );
+        });
+      },
+      children: getLabel("btnAddPool").text
+    }
+  );
+});
+
+const PermissionsContext = createContext(null);
+function usePermissionsContext() {
+  return useContext(PermissionsContext);
+}
+const Permissions = observer(
+  ({
+    everyonePermissionsValue,
+    collapsePermissions,
+    disabled,
+    onChangeEveryonePermissions,
+    onChangeUsers,
+    onChangePools,
+    permissions
+  }) => {
+    return /* @__PURE__ */ jsx(
+      CollapsiblePanel,
+      {
+        label: /* @__PURE__ */ jsx("span", { children: getLabel("lblPer").text }),
+        id: "permissions",
+        collapseIconToRight: true,
+        closedIcon: "ArrowUpThin",
+        openIcon: "ArrowDownThin",
+        className: "uploader__permissions",
+        collapsed: collapsePermissions,
+        children: /* @__PURE__ */ jsx(
+          PermissionsContext.Provider,
+          {
+            value: {
+              onChangeUsers,
+              onChangePools,
+              permissions,
+              disabled
+            },
+            children: /* @__PURE__ */ jsxs(Box, { ...getVariant("layout.common.components.uploader.permissions"), children: [
+              /* @__PURE__ */ jsxs("label", { className: "uploader__permissions_selection", children: [
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  /* @__PURE__ */ jsx("span", { children: getLabel("lblTod").text }),
+                  /* @__PURE__ */ jsxs(
+                    Select,
+                    {
+                      disabled,
+                      onChange: (ev) => {
+                        onChangeEveryonePermissions(
+                          ev.target.value
+                        );
+                      },
+                      value: everyonePermissionsValue,
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "M", children: getLabel("lblPerMod").text }),
+                        /* @__PURE__ */ jsx("option", { value: "R", children: getLabel("lblPerVer").text }),
+                        /* @__PURE__ */ jsx("option", { value: "", children: getLabel("lblAccessDenied").text })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(UserModalBtn, {}),
+                /* @__PURE__ */ jsx(PoolModalBtn, {})
+              ] }),
+              /* @__PURE__ */ jsx(PermissionsList, {})
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+
 const TabsContext = React__default.createContext(null);
 function useTabsContext() {
   return React__default.useContext(TabsContext);
@@ -11234,5 +11400,5 @@ const _FiltersStore = class _FiltersStore {
 __publicField(_FiltersStore, "instance", new _FiltersStore());
 let FiltersStore = _FiltersStore;
 
-export { Accordion, AccordionAside, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, Aside, AsideLoader, AsidePanel, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, BaseButton, BodyAside, CalendarModal, Captcha, CenteredHeaderButtons, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DeadSessionModal, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FavoriteIcon, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingAside, FooterButtons, FooterResponsiveButtons, HamburguerMenu, Header, HeaderButtons, IconButton, IconInput, IconsList, Label, LabelBox, LinearLoader, LinearSpinnerLock, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, index as MDRenderer, Modal, ModalContext, NumberInput, Overlay, Pagination, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, ProgressBar, RequiredMark, ScreenLocker, ShowResponsive, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, TwoColumns, TwoColumnsList, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, isFavoriteIcon, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
+export { Accordion, AccordionAside, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, Aside, AsideLoader, AsidePanel, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, BaseButton, BodyAside, CalendarModal, Captcha, CenteredHeaderButtons, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DeadSessionModal, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FavoriteIcon, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingAside, FooterButtons, FooterResponsiveButtons, HamburguerMenu, Header, HeaderButtons, IconButton, IconInput, IconsList, Label, LabelBox, LinearLoader, LinearSpinnerLock, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, index as MDRenderer, Modal, ModalContext, NumberInput, Overlay, Pagination, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, Permissions, ProgressBar, RequiredMark, ScreenLocker, ShowResponsive, SimpleButton, SortableList, SortableListItem, SwitchCard, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, TwoColumns, TwoColumnsList, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, isFavoriteIcon, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
 //# sourceMappingURL=index.js.map