@apia/components 0.3.3 → 0.3.5

package/dist/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { createContext, useContext, useMemo, useEffect, useState, useRef, forwardRef, useCallback, useTransition, useDeferredValue, Children, memo, isValidElement, cloneElement, lazy } from 'react';
 import { shallowEqual } from '@apia/store';
 import { Box, getVariant, Button, Flex, spacing, Spinner, IconButton as IconButton$1, Image, Input, useBreakpointIndex, Close, responsive, Heading, useThemeUI, injectStyles, Select, focusOutline, makeStyledComponent, Label, Progress, Grid } from '@apia/theme';
-import { findScrollContainer, getSpecificParent, getLabel, useUpdateEffect, debugDispatcher, useCombinedRefs, focus, focusSelector, getFocusSelector, screenLocker, customEvents, isChild, getDateFormat, persistentStorage, disableChildrenFocus, enableChildrenFocus, EventEmitter, useDebouncedCallback, getIndex, addBoundary, noNaN, useMount, makeSingleImperativeComponent, useLatest, useImperativeComponentEvents, usePrevious, arrayOrArray } from '@apia/util';
+import { findScrollContainer, getSpecificParent, getLabel, useUpdateEffect, debugDispatcher, useCombinedRefs, focus, focusSelector, getFocusSelector, screenLocker, customEvents, isChild, getDateFormat, persistentStorage, disableChildrenFocus, enableChildrenFocus, EventEmitter, useDebouncedCallback, getIndex, addBoundary, noNaN, useLatest, usePrevious, useMount, makeSingleImperativeComponent, useImperativeComponentEvents } from '@apia/util';
 import { icons, Icon as Icon$1 } from '@apia/icons';
 import { uniqueId as uniqueId$1, isFunction as isFunction$1 } from 'lodash-es';
 import dayjs from 'dayjs';
@@ -16,6 +16,7 @@ import { BarLoader } from 'react-spinners';
 import AnimateHeight from 'react-animate-height';
 import { useUpdateEffect as useUpdateEffect$1 } from 'ahooks';
 import { createFAsomeStore } from '@apia/dom-store';
+import { ApiaUtil } from '@apia/objects';
 import { IconButton as IconButton$2 } from '@apia/components';
 
 const AccordionContext = createContext(null);
@@ -132,32 +133,32 @@ class AccordionHandler {
   }
 }
 
-var __defProp$F = Object.defineProperty;
-var __defProps$w = Object.defineProperties;
-var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
-var __hasOwnProp$G = Object.prototype.hasOwnProperty;
-var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$F = (a, b) => {
+var __defProp$G = Object.defineProperty;
+var __defProps$x = Object.defineProperties;
+var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
+var __hasOwnProp$H = Object.prototype.hasOwnProperty;
+var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$G = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$G = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$G.call(b, prop))
-      __defNormalProp$F(a, prop, b[prop]);
-  if (__getOwnPropSymbols$G)
-    for (var prop of __getOwnPropSymbols$G(b)) {
-      if (__propIsEnum$G.call(b, prop))
-        __defNormalProp$F(a, prop, b[prop]);
+    if (__hasOwnProp$H.call(b, prop))
+      __defNormalProp$G(a, prop, b[prop]);
+  if (__getOwnPropSymbols$H)
+    for (var prop of __getOwnPropSymbols$H(b)) {
+      if (__propIsEnum$H.call(b, prop))
+        __defNormalProp$G(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
+var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
 const KeyHandler$1 = (props) => {
   const [ref, setRef] = useState(null);
   const handler = useAccordionContext();
   useEffect(() => {
     if (ref) {
       ref.addEventListener("keydown", (ev) => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
         const accordionItem = (_a = ev.target) == null ? void 0 : _a.closest(
           ".accordion__item"
         );
@@ -182,6 +183,24 @@ const KeyHandler$1 = (props) => {
               ".accordion__item__button"
             )) == null ? void 0 : _g.focus();
           }
+        } else if (ev.code === "ArrowLeft") {
+          if ((_h = allItems[currentIndex]) == null ? void 0 : _h.querySelector(
+            '[aria-expanded="true"]'
+          )) {
+            ev.preventDefault();
+            (_j = (_i = allItems[currentIndex]) == null ? void 0 : _i.querySelector(
+              ".accordion__item__button"
+            )) == null ? void 0 : _j.click();
+          }
+        } else if (ev.code === "ArrowRight") {
+          if ((_k = allItems[currentIndex]) == null ? void 0 : _k.querySelector(
+            '[aria-expanded="false"]'
+          )) {
+            ev.preventDefault();
+            (_m = (_l = allItems[currentIndex]) == null ? void 0 : _l.querySelector(
+              ".accordion__item__button"
+            )) == null ? void 0 : _m.click();
+          }
         } else if (ev.code === "Space") {
           ev.preventDefault();
           ev.stopPropagation();
@@ -196,31 +215,31 @@ const KeyHandler$1 = (props) => {
   const variant = handler.hooks.usePropsSelector((current) => current.variant);
   return /* @__PURE__ */ jsx(
     Box,
-    __spreadValues$F(__spreadProps$w(__spreadValues$F({}, props), {
+    __spreadValues$G(__spreadProps$x(__spreadValues$G({}, props), {
       ref: setRef
     }), variant ? getVariant(variant) : void 0)
   );
 };
 
-var __defProp$E = Object.defineProperty;
-var __defProps$v = Object.defineProperties;
-var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
-var __hasOwnProp$F = Object.prototype.hasOwnProperty;
-var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$E = (a, b) => {
+var __defProp$F = Object.defineProperty;
+var __defProps$w = Object.defineProperties;
+var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
+var __hasOwnProp$G = Object.prototype.hasOwnProperty;
+var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$F = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$F.call(b, prop))
-      __defNormalProp$E(a, prop, b[prop]);
-  if (__getOwnPropSymbols$F)
-    for (var prop of __getOwnPropSymbols$F(b)) {
-      if (__propIsEnum$F.call(b, prop))
-        __defNormalProp$E(a, prop, b[prop]);
+    if (__hasOwnProp$G.call(b, prop))
+      __defNormalProp$F(a, prop, b[prop]);
+  if (__getOwnPropSymbols$G)
+    for (var prop of __getOwnPropSymbols$G(b)) {
+      if (__propIsEnum$G.call(b, prop))
+        __defNormalProp$F(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
+var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
 function makeRowKey(rowIndex) {
   return `row_${typeof rowIndex === "number" ? rowIndex : rowIndex.rowIndex}`;
 }
@@ -258,7 +277,7 @@ function getDistinctors(storeId) {
               focused: state.focusedRow === distinctions.rowIndex
             }
           },
-          etc: __spreadProps$v(__spreadValues$E({}, state.allowSelection ? {
+          etc: __spreadProps$w(__spreadValues$F({}, state.allowSelection ? {
             "aria-selected": state.selectedRows.includes(
               distinctions.rowIndex
             )
@@ -324,7 +343,7 @@ const keysMakers$1 = {
 };
 function getInitialState$1(initialState) {
   var _a, _b, _c;
-  return __spreadProps$v(__spreadValues$E(__spreadValues$E({}, defaultState), initialState), {
+  return __spreadProps$w(__spreadValues$F(__spreadValues$F({}, defaultState), initialState), {
     searchFunction: (_a = initialState.searchFunction) != null ? _a : (label, searchString) => !!label.match(new RegExp(searchString)),
     startsWithFunction: (_b = initialState.startsWithFunction) != null ? _b : (label, searchString) => {
       return label.startsWith(searchString);
@@ -388,33 +407,33 @@ const AccordionItemButton = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
 
-var __defProp$D = Object.defineProperty;
-var __defProps$u = Object.defineProperties;
-var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
-var __hasOwnProp$E = Object.prototype.hasOwnProperty;
-var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$D = (a, b) => {
+var __defProp$E = Object.defineProperty;
+var __defProps$v = Object.defineProperties;
+var __getOwnPropDescs$v = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
+var __hasOwnProp$F = Object.prototype.hasOwnProperty;
+var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$E = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$E.call(b, prop))
-      __defNormalProp$D(a, prop, b[prop]);
-  if (__getOwnPropSymbols$E)
-    for (var prop of __getOwnPropSymbols$E(b)) {
-      if (__propIsEnum$E.call(b, prop))
-        __defNormalProp$D(a, prop, b[prop]);
+    if (__hasOwnProp$F.call(b, prop))
+      __defNormalProp$E(a, prop, b[prop]);
+  if (__getOwnPropSymbols$F)
+    for (var prop of __getOwnPropSymbols$F(b)) {
+      if (__propIsEnum$F.call(b, prop))
+        __defNormalProp$E(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
+var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
 var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$E.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$F.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$E)
-    for (var prop of __getOwnPropSymbols$E(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$E.call(source, prop))
+  if (source != null && __getOwnPropSymbols$F)
+    for (var prop of __getOwnPropSymbols$F(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$F.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -448,7 +467,7 @@ const BaseButton = (_a) => {
   ]);
   return /* @__PURE__ */ jsx(
     Button,
-    __spreadProps$u(__spreadValues$D(__spreadProps$u(__spreadValues$D({
+    __spreadProps$v(__spreadValues$E(__spreadProps$v(__spreadValues$E({
       id,
       name,
       onClick
@@ -461,7 +480,7 @@ const BaseButton = (_a) => {
         Flex,
         {
           as: "span",
-          sx: __spreadValues$D({
+          sx: __spreadValues$E({
             color: "inherit",
             width: "100%",
             flexDirection: "row",
@@ -483,33 +502,33 @@ const BaseButton = (_a) => {
   );
 };
 
-var __defProp$C = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
-var __hasOwnProp$D = Object.prototype.hasOwnProperty;
-var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$C = (a, b) => {
+var __defProp$D = Object.defineProperty;
+var __defProps$u = Object.defineProperties;
+var __getOwnPropDescs$u = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
+var __hasOwnProp$E = Object.prototype.hasOwnProperty;
+var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$D = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$D.call(b, prop))
-      __defNormalProp$C(a, prop, b[prop]);
-  if (__getOwnPropSymbols$D)
-    for (var prop of __getOwnPropSymbols$D(b)) {
-      if (__propIsEnum$D.call(b, prop))
-        __defNormalProp$C(a, prop, b[prop]);
+    if (__hasOwnProp$E.call(b, prop))
+      __defNormalProp$D(a, prop, b[prop]);
+  if (__getOwnPropSymbols$E)
+    for (var prop of __getOwnPropSymbols$E(b)) {
+      if (__propIsEnum$E.call(b, prop))
+        __defNormalProp$D(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
 var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$D.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$E.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$D)
-    for (var prop of __getOwnPropSymbols$D(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$D.call(source, prop))
+  if (source != null && __getOwnPropSymbols$E)
+    for (var prop of __getOwnPropSymbols$E(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$E.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -574,7 +593,7 @@ const IconButton = React.forwardRef(
     }, [icon]);
     return /* @__PURE__ */ jsx(
       IconButton$1,
-      __spreadProps$t(__spreadValues$C(__spreadProps$t(__spreadValues$C({
+      __spreadProps$u(__spreadValues$D(__spreadProps$u(__spreadValues$D({
         id,
         ref,
         onClick: React.useCallback(
@@ -603,33 +622,33 @@ const IconButton = React.forwardRef(
 );
 IconButton.displayName = "IconButton";
 
-var __defProp$B = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
-var __hasOwnProp$C = Object.prototype.hasOwnProperty;
-var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$B = (a, b) => {
+var __defProp$C = Object.defineProperty;
+var __defProps$t = Object.defineProperties;
+var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
+var __hasOwnProp$D = Object.prototype.hasOwnProperty;
+var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$C = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$C.call(b, prop))
-      __defNormalProp$B(a, prop, b[prop]);
-  if (__getOwnPropSymbols$C)
-    for (var prop of __getOwnPropSymbols$C(b)) {
-      if (__propIsEnum$C.call(b, prop))
-        __defNormalProp$B(a, prop, b[prop]);
+    if (__hasOwnProp$D.call(b, prop))
+      __defNormalProp$C(a, prop, b[prop]);
+  if (__getOwnPropSymbols$D)
+    for (var prop of __getOwnPropSymbols$D(b)) {
+      if (__propIsEnum$D.call(b, prop))
+        __defNormalProp$C(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
 var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$C.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$D.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$C)
-    for (var prop of __getOwnPropSymbols$C(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$C.call(source, prop))
+  if (source != null && __getOwnPropSymbols$D)
+    for (var prop of __getOwnPropSymbols$D(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$D.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -657,6 +676,7 @@ const simpleButton = {
 const SimpleButton = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
+      buttonSx,
       children = null,
       className,
       disabled = false,
@@ -674,6 +694,7 @@ const SimpleButton = React.forwardRef(
       type = "button",
       variant = "primary"
     } = _b, buttonProps = __objRest$d(_b, [
+      "buttonSx",
       "children",
       "className",
       "disabled",
@@ -713,7 +734,7 @@ const SimpleButton = React.forwardRef(
     const Icon = React.useMemo(() => icon, [icon]);
     return /* @__PURE__ */ jsxs(
       Button,
-      __spreadProps$s(__spreadValues$B(__spreadValues$B({
+      __spreadProps$t(__spreadValues$C(__spreadValues$C({
         ref,
         id,
         name,
@@ -724,7 +745,7 @@ const SimpleButton = React.forwardRef(
         disabled: isLoading != null ? isLoading : disabled,
         className
       }, getVariant(`${variant}${size !== "md" && size ? `-${size}` : ""}`)), buttonProps), {
-        sx: simpleButton,
+        sx: __spreadValues$C(__spreadValues$C({}, simpleButton), buttonSx),
         children: [
           Icon && iconPosition === "left" && /* @__PURE__ */ jsx(Icon, { title: "", size: iconSize, color: iconColor }),
           /* @__PURE__ */ jsx(Box, { as: "span", className: "button__content", sx: spanSx, children: children != null ? children : title }),
@@ -772,25 +793,25 @@ function useOtherTagButton(props) {
   };
 }
 
-var __defProp$A = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
-var __hasOwnProp$B = Object.prototype.hasOwnProperty;
-var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$A = (a, b) => {
+var __defProp$B = Object.defineProperty;
+var __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
+var __hasOwnProp$C = Object.prototype.hasOwnProperty;
+var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$B = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$B.call(b, prop))
-      __defNormalProp$A(a, prop, b[prop]);
-  if (__getOwnPropSymbols$B)
-    for (var prop of __getOwnPropSymbols$B(b)) {
-      if (__propIsEnum$B.call(b, prop))
-        __defNormalProp$A(a, prop, b[prop]);
+    if (__hasOwnProp$C.call(b, prop))
+      __defNormalProp$B(a, prop, b[prop]);
+  if (__getOwnPropSymbols$C)
+    for (var prop of __getOwnPropSymbols$C(b)) {
+      if (__propIsEnum$C.call(b, prop))
+        __defNormalProp$B(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
 const Captcha = ({
   name,
   imageUrl,
@@ -804,7 +825,7 @@ const Captcha = ({
   };
   return /* @__PURE__ */ jsxs(
     Flex,
-    __spreadProps$r(__spreadValues$A({
+    __spreadProps$s(__spreadValues$B({
       sx: {
         flexDirection: "column"
       },
@@ -849,33 +870,33 @@ const Captcha = ({
   );
 };
 
-var __defProp$z = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
-var __hasOwnProp$A = Object.prototype.hasOwnProperty;
-var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$z = (a, b) => {
+var __defProp$A = Object.defineProperty;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
+var __hasOwnProp$B = Object.prototype.hasOwnProperty;
+var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$A = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$A.call(b, prop))
-      __defNormalProp$z(a, prop, b[prop]);
-  if (__getOwnPropSymbols$A)
-    for (var prop of __getOwnPropSymbols$A(b)) {
-      if (__propIsEnum$A.call(b, prop))
-        __defNormalProp$z(a, prop, b[prop]);
+    if (__hasOwnProp$B.call(b, prop))
+      __defNormalProp$A(a, prop, b[prop]);
+  if (__getOwnPropSymbols$B)
+    for (var prop of __getOwnPropSymbols$B(b)) {
+      if (__propIsEnum$B.call(b, prop))
+        __defNormalProp$A(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
 var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$A.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$B.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$A)
-    for (var prop of __getOwnPropSymbols$A(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$A.call(source, prop))
+  if (source != null && __getOwnPropSymbols$B)
+    for (var prop of __getOwnPropSymbols$B(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$B.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -937,7 +958,7 @@ const Checkbox$1 = forwardRef(
       // eslint-disable-next-line react/forbid-elements
       /* @__PURE__ */ jsx(
         "input",
-        __spreadValues$z({
+        __spreadValues$A({
           type: "checkbox",
           onClick: props.onClick,
           "aria-checked": isChecked,
@@ -959,7 +980,7 @@ const Checkbox$1 = forwardRef(
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Button,
-        __spreadProps$q(__spreadValues$z(__spreadProps$q(__spreadValues$z({}, props), {
+        __spreadProps$r(__spreadValues$A(__spreadProps$r(__spreadValues$A({}, props), {
           onClick: (ev) => {
             var _a3;
             if (readOnly) {
@@ -1094,6 +1115,14 @@ const globalFocus = new (_a$1 = class {
   }
 }, _onFocusCallbacks = new WeakMap(), _a$1)();
 
+const ModalContext = createContext(null);
+function useModalContext() {
+  const context = useContext(ModalContext);
+  if (!context)
+    throw new Error("There is no ModalContext");
+  return context;
+}
+
 var __accessCheck$1 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
@@ -1190,33 +1219,33 @@ function useBodyScrollLock(isLocked) {
   }, [isLocked]);
 }
 
-var __defProp$y = Object.defineProperty;
-var __defProps$p = Object.defineProperties;
-var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
-var __hasOwnProp$z = Object.prototype.hasOwnProperty;
-var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$y = (a, b) => {
+var __defProp$z = Object.defineProperty;
+var __defProps$q = Object.defineProperties;
+var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
+var __hasOwnProp$A = Object.prototype.hasOwnProperty;
+var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$z = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$z.call(b, prop))
-      __defNormalProp$y(a, prop, b[prop]);
-  if (__getOwnPropSymbols$z)
-    for (var prop of __getOwnPropSymbols$z(b)) {
-      if (__propIsEnum$z.call(b, prop))
-        __defNormalProp$y(a, prop, b[prop]);
+    if (__hasOwnProp$A.call(b, prop))
+      __defNormalProp$z(a, prop, b[prop]);
+  if (__getOwnPropSymbols$A)
+    for (var prop of __getOwnPropSymbols$A(b)) {
+      if (__propIsEnum$A.call(b, prop))
+        __defNormalProp$z(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
 var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$z.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$A.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$z)
-    for (var prop of __getOwnPropSymbols$z(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$z.call(source, prop))
+  if (source != null && __getOwnPropSymbols$A)
+    for (var prop of __getOwnPropSymbols$A(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$A.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1258,7 +1287,7 @@ const Overlay = React.forwardRef(
         unmountOnExit: true,
         children: /* @__PURE__ */ jsx(
           Box,
-          __spreadProps$p(__spreadValues$y(__spreadProps$p(__spreadValues$y({
+          __spreadProps$q(__spreadValues$z(__spreadProps$q(__spreadValues$z({
             className: `${className} overlay`,
             ref: assignRefs
           }, props), {
@@ -1402,28 +1431,25 @@ const DialogHeader = ({
   );
 };
 
-var __defProp$x = Object.defineProperty;
-var __defProps$o = Object.defineProperties;
-var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
-var __hasOwnProp$y = Object.prototype.hasOwnProperty;
-var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$x = (a, b) => {
+var __defProp$y = Object.defineProperty;
+var __defProps$p = Object.defineProperties;
+var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
+var __hasOwnProp$z = Object.prototype.hasOwnProperty;
+var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$y = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$y.call(b, prop))
-      __defNormalProp$x(a, prop, b[prop]);
-  if (__getOwnPropSymbols$y)
-    for (var prop of __getOwnPropSymbols$y(b)) {
-      if (__propIsEnum$y.call(b, prop))
-        __defNormalProp$x(a, prop, b[prop]);
+    if (__hasOwnProp$z.call(b, prop))
+      __defNormalProp$y(a, prop, b[prop]);
+  if (__getOwnPropSymbols$z)
+    for (var prop of __getOwnPropSymbols$z(b)) {
+      if (__propIsEnum$z.call(b, prop))
+        __defNormalProp$y(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
-const ModalContext = React__default.createContext(
-  {}
-);
+var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
 const Modal = forwardRef(
   ({
     animationDuration = 150,
@@ -1451,6 +1477,11 @@ const Modal = forwardRef(
     title = "",
     variant
   }, ref) => {
+    const lastTitle = useRef(title);
+    const [innerTitle, setInnerTitle] = useState(title);
+    if (lastTitle.current !== title && innerTitle !== title) {
+      setInnerTitle(title);
+    }
     const [isOpenInner, setIsOpen] = useState(isOpen);
     const innerId = React__default.useMemo(() => {
       return `Modal${uniqueId$2()}`;
@@ -1506,7 +1537,7 @@ const Modal = forwardRef(
                   getFocusSelector(":not(.modal__closeButton)")
                 );
               },
-              __spreadProps$o(__spreadValues$x({}, initialFocusConfiguration), { focusEvenWhenScreenLocked: true })
+              __spreadProps$p(__spreadValues$y({}, initialFocusConfiguration), { focusEvenWhenScreenLocked: true })
             );
           }
         }
@@ -1522,8 +1553,16 @@ const Modal = forwardRef(
       ModalContext.Provider,
       {
         value: React__default.useMemo(() => {
-          return { descriptionId: `${innerId}_Description` };
-        }, [innerId]),
+          return {
+            changeTitle: (newTitle) => {
+              setInnerTitle(newTitle);
+            },
+            close: () => {
+              closeHandler();
+            },
+            descriptionId: `${innerId}_Description`
+          };
+        }, [closeHandler, innerId]),
         children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(
           Overlay,
           {
@@ -1546,7 +1585,7 @@ const Modal = forwardRef(
                 nodeRef,
                 children: /* @__PURE__ */ jsx(
                   Box,
-                  __spreadProps$o(__spreadValues$x({
+                  __spreadProps$p(__spreadValues$y({
                     ref: nodeRef,
                     className: "modal__variantWrapper"
                   }, variant ? getVariant(variant) : {}), {
@@ -1562,7 +1601,7 @@ const Modal = forwardRef(
                         className: "modal__main",
                         "data-scroll-lock-scrollable": true,
                         sx: React__default.useMemo(() => {
-                          return __spreadValues$x({
+                          return __spreadValues$y({
                             variant: `layout.common.modals.${size}`
                           }, maxWidth !== void 0 ? { maxWidth } : {});
                         }, [maxWidth, size]),
@@ -1573,7 +1612,7 @@ const Modal = forwardRef(
                             {
                               className: "modal__header",
                               NavBar,
-                              title,
+                              title: innerTitle,
                               close: closeHandler,
                               hideCloseButton,
                               id: `${innerId}_Header`
@@ -1602,33 +1641,33 @@ const Modal = forwardRef(
 );
 Modal.displayName = "Modal";
 
-var __defProp$w = Object.defineProperty;
-var __defProps$n = Object.defineProperties;
-var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
-var __hasOwnProp$x = Object.prototype.hasOwnProperty;
-var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$w = (a, b) => {
+var __defProp$x = Object.defineProperty;
+var __defProps$o = Object.defineProperties;
+var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
+var __hasOwnProp$y = Object.prototype.hasOwnProperty;
+var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$x = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$x.call(b, prop))
-      __defNormalProp$w(a, prop, b[prop]);
-  if (__getOwnPropSymbols$x)
-    for (var prop of __getOwnPropSymbols$x(b)) {
-      if (__propIsEnum$x.call(b, prop))
-        __defNormalProp$w(a, prop, b[prop]);
+    if (__hasOwnProp$y.call(b, prop))
+      __defNormalProp$x(a, prop, b[prop]);
+  if (__getOwnPropSymbols$y)
+    for (var prop of __getOwnPropSymbols$y(b)) {
+      if (__propIsEnum$y.call(b, prop))
+        __defNormalProp$x(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
+var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
 var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$x.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$y.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$x)
-    for (var prop of __getOwnPropSymbols$x(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$x.call(source, prop))
+  if (source != null && __getOwnPropSymbols$y)
+    for (var prop of __getOwnPropSymbols$y(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$y.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1638,7 +1677,7 @@ const CalendarModal = React__default.forwardRef(
     var _b = _a, { handleClickDay, onCancel, calValue, locale, size } = _b, props = __objRest$a(_b, ["handleClickDay", "onCancel", "calValue", "locale", "size"]);
     return /* @__PURE__ */ jsx(
       Modal,
-      __spreadProps$n(__spreadValues$w({
+      __spreadProps$o(__spreadValues$x({
         noHeader: true,
         size: size != null ? size : "cal",
         shouldCloseOnEsc: true,
@@ -1668,25 +1707,25 @@ const CalendarModal = React__default.forwardRef(
 );
 CalendarModal.displayName = "CalendarModal";
 
-var __defProp$v = Object.defineProperty;
-var __defProps$m = Object.defineProperties;
-var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
-var __hasOwnProp$w = Object.prototype.hasOwnProperty;
-var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$v = (a, b) => {
+var __defProp$w = Object.defineProperty;
+var __defProps$n = Object.defineProperties;
+var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
+var __hasOwnProp$x = Object.prototype.hasOwnProperty;
+var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$w = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$w.call(b, prop))
-      __defNormalProp$v(a, prop, b[prop]);
-  if (__getOwnPropSymbols$w)
-    for (var prop of __getOwnPropSymbols$w(b)) {
-      if (__propIsEnum$w.call(b, prop))
-        __defNormalProp$v(a, prop, b[prop]);
+    if (__hasOwnProp$x.call(b, prop))
+      __defNormalProp$w(a, prop, b[prop]);
+  if (__getOwnPropSymbols$x)
+    for (var prop of __getOwnPropSymbols$x(b)) {
+      if (__propIsEnum$x.call(b, prop))
+        __defNormalProp$w(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
+var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
 function useModal(configuration) {
   var _a, _b, _c;
   const [isLoading, setIsLoading] = React__default.useState(false);
@@ -1697,7 +1736,7 @@ function useModal(configuration) {
     Portal,
     hide: hidePortal,
     show: showPortal
-  } = usePortal(__spreadProps$m(__spreadValues$v({}, configuration == null ? void 0 : configuration.portalArgs), {
+  } = usePortal(__spreadProps$n(__spreadValues$w({}, configuration == null ? void 0 : configuration.portalArgs), {
     containerId: "AppModals",
     autoRemoveContainer: false,
     escToHide: false,
@@ -1754,32 +1793,32 @@ function useModal(configuration) {
   };
 }
 
-var __defProp$u = Object.defineProperty;
-var __defProps$l = Object.defineProperties;
-var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
-var __hasOwnProp$v = Object.prototype.hasOwnProperty;
-var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$u = (a, b) => {
+var __defProp$v = Object.defineProperty;
+var __defProps$m = Object.defineProperties;
+var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
+var __hasOwnProp$w = Object.prototype.hasOwnProperty;
+var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$v = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$v.call(b, prop))
-      __defNormalProp$u(a, prop, b[prop]);
-  if (__getOwnPropSymbols$v)
-    for (var prop of __getOwnPropSymbols$v(b)) {
-      if (__propIsEnum$v.call(b, prop))
-        __defNormalProp$u(a, prop, b[prop]);
+    if (__hasOwnProp$w.call(b, prop))
+      __defNormalProp$v(a, prop, b[prop]);
+  if (__getOwnPropSymbols$w)
+    for (var prop of __getOwnPropSymbols$w(b)) {
+      if (__propIsEnum$w.call(b, prop))
+        __defNormalProp$v(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
+var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
 const DialogButtonBar = ({
   children,
   className
 }) => {
   return /* @__PURE__ */ jsx(
     Box,
-    __spreadProps$l(__spreadValues$u({
+    __spreadProps$m(__spreadValues$v({
       className: `${className != null ? className : ""} buttonsBar`
     }, getVariant("layout.common.modals.buttonsBar")), {
       children
@@ -1787,25 +1826,25 @@ const DialogButtonBar = ({
   );
 };
 
-var __defProp$t = Object.defineProperty;
-var __defProps$k = Object.defineProperties;
-var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
-var __hasOwnProp$u = Object.prototype.hasOwnProperty;
-var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$t = (a, b) => {
+var __defProp$u = Object.defineProperty;
+var __defProps$l = Object.defineProperties;
+var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
+var __hasOwnProp$v = Object.prototype.hasOwnProperty;
+var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$u = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$u.call(b, prop))
-      __defNormalProp$t(a, prop, b[prop]);
-  if (__getOwnPropSymbols$u)
-    for (var prop of __getOwnPropSymbols$u(b)) {
-      if (__propIsEnum$u.call(b, prop))
-        __defNormalProp$t(a, prop, b[prop]);
+    if (__hasOwnProp$v.call(b, prop))
+      __defNormalProp$u(a, prop, b[prop]);
+  if (__getOwnPropSymbols$v)
+    for (var prop of __getOwnPropSymbols$v(b)) {
+      if (__propIsEnum$v.call(b, prop))
+        __defNormalProp$u(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
+var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
 const Confirm = ({
   children,
   additionalButtons,
@@ -1823,10 +1862,10 @@ const Confirm = ({
   onConfirm,
   variant
 }) => {
-  const { descriptionId } = useContext(ModalContext);
+  const { descriptionId } = useModalContext();
   return /* @__PURE__ */ jsxs(
     Box,
-    __spreadProps$k(__spreadValues$t({}, getVariant(variant != null ? variant : "layout.common.modals.confirm")), {
+    __spreadProps$l(__spreadValues$u({}, getVariant(variant != null ? variant : "layout.common.modals.confirm")), {
       className: `${className != null ? className : ""} confirm`,
       children: [
         /* @__PURE__ */ jsx(Box, { ref: contentRef, className: "confirm__content", id: descriptionId, children }),
@@ -1875,7 +1914,7 @@ const Confirm = ({
             ),
             onCancel && !hideCancelButton && /* @__PURE__ */ jsx(
               SimpleButton,
-              __spreadProps$k(__spreadValues$t({
+              __spreadProps$l(__spreadValues$u({
                 onClick: onCancel,
                 title: cancelText
               }, getVariant("secondary")), {
@@ -1917,25 +1956,25 @@ const LinearLoader = () => {
   );
 };
 
-var __defProp$s = Object.defineProperty;
-var __defProps$j = Object.defineProperties;
-var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
-var __hasOwnProp$t = Object.prototype.hasOwnProperty;
-var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$s = (a, b) => {
+var __defProp$t = Object.defineProperty;
+var __defProps$k = Object.defineProperties;
+var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
+var __hasOwnProp$u = Object.prototype.hasOwnProperty;
+var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$t = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$t.call(b, prop))
-      __defNormalProp$s(a, prop, b[prop]);
-  if (__getOwnPropSymbols$t)
-    for (var prop of __getOwnPropSymbols$t(b)) {
-      if (__propIsEnum$t.call(b, prop))
-        __defNormalProp$s(a, prop, b[prop]);
+    if (__hasOwnProp$u.call(b, prop))
+      __defNormalProp$t(a, prop, b[prop]);
+  if (__getOwnPropSymbols$u)
+    for (var prop of __getOwnPropSymbols$u(b)) {
+      if (__propIsEnum$u.call(b, prop))
+        __defNormalProp$t(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
+var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
 const ScreenLock = () => {
   const ref = React__default.useRef(null);
   const [hasReleasedFirstTime, setHasReleasedFirstTime] = useState(false);
@@ -1948,11 +1987,11 @@ const ScreenLock = () => {
   React__default.useEffect(() => {
     const suscriptions = [
       screenLocker.on("lockStateChange", (ev) => {
-        setLocks((current) => __spreadProps$j(__spreadValues$s({}, current), { [ev.lockName]: ev.isLocked }));
+        setLocks((current) => __spreadProps$k(__spreadValues$t({}, current), { [ev.lockName]: ev.isLocked }));
         setHasReleasedFirstTime(ev.hasReleasedFirstTime);
       }),
       screenLocker.on("forcedStateChange", (ev) => {
-        setLocks((current) => __spreadProps$j(__spreadValues$s({}, current), { forced: ev.isForced }));
+        setLocks((current) => __spreadProps$k(__spreadValues$t({}, current), { forced: ev.isForced }));
         setHasReleasedFirstTime(ev.hasReleasedFirstTime);
       })
     ];
@@ -2015,33 +2054,33 @@ const FieldErrorMessage = ({ children, name }) => {
   return null;
 };
 
-var __defProp$r = Object.defineProperty;
-var __defProps$i = Object.defineProperties;
-var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
-var __hasOwnProp$s = Object.prototype.hasOwnProperty;
-var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$r = (a, b) => {
+var __defProp$s = Object.defineProperty;
+var __defProps$j = Object.defineProperties;
+var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
+var __hasOwnProp$t = Object.prototype.hasOwnProperty;
+var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$s = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$s.call(b, prop))
-      __defNormalProp$r(a, prop, b[prop]);
-  if (__getOwnPropSymbols$s)
-    for (var prop of __getOwnPropSymbols$s(b)) {
-      if (__propIsEnum$s.call(b, prop))
-        __defNormalProp$r(a, prop, b[prop]);
+    if (__hasOwnProp$t.call(b, prop))
+      __defNormalProp$s(a, prop, b[prop]);
+  if (__getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(b)) {
+      if (__propIsEnum$t.call(b, prop))
+        __defNormalProp$s(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
 var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$s.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$s)
-    for (var prop of __getOwnPropSymbols$s(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source, prop))
+  if (source != null && __getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2098,25 +2137,25 @@ const IconInput = (_a) => {
   );
   return /* @__PURE__ */ jsxs(
     Box,
-    __spreadProps$i(__spreadValues$r({}, getVariant("forms.iconInput")), {
+    __spreadProps$j(__spreadValues$s({}, getVariant("forms.iconInput")), {
       className: `${className != null ? className : ""} iconInput`,
       ref: parentRef,
       onBlur: handleBlur,
       children: [
         /* @__PURE__ */ jsx(
           Input,
-          __spreadValues$r(__spreadValues$r({
+          __spreadValues$s(__spreadValues$s({
             disabled: isLoading != null ? isLoading : disabled,
             ref: assignInputRef,
             readOnly,
-            sx: __spreadValues$r({ variant: "forms.input" }, inputSx),
+            sx: __spreadValues$s({ variant: "forms.input" }, inputSx),
             "data-variant": "forms.input"
           }, rest), actualInputProps)
         ),
         additionalButtonsPosition === "before" && additionalButtons,
         !hideButton && /* @__PURE__ */ jsx(
           IconButton,
-          __spreadValues$r({
+          __spreadValues$s({
             onClick,
             icon,
             disabled: readOnly != null ? readOnly : disabled,
@@ -2145,33 +2184,33 @@ const getFieldTouchedStyles = (isTouched) => {
   };
 };
 
-var __defProp$q = Object.defineProperty;
-var __defProps$h = Object.defineProperties;
-var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
-var __hasOwnProp$r = Object.prototype.hasOwnProperty;
-var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$q = (a, b) => {
+var __defProp$r = Object.defineProperty;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
+var __hasOwnProp$s = Object.prototype.hasOwnProperty;
+var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$r = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$r.call(b, prop))
-      __defNormalProp$q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(b)) {
-      if (__propIsEnum$r.call(b, prop))
-        __defNormalProp$q(a, prop, b[prop]);
+    if (__hasOwnProp$s.call(b, prop))
+      __defNormalProp$r(a, prop, b[prop]);
+  if (__getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(b)) {
+      if (__propIsEnum$s.call(b, prop))
+        __defNormalProp$r(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
 var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$r.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$s.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$r.call(source, prop))
+  if (source != null && __getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2319,7 +2358,7 @@ const DateInput = React__default.forwardRef(
       [id, onBlur]
     );
     const inputProps = React__default.useMemo(
-      () => __spreadProps$h(__spreadValues$q({}, props), {
+      () => __spreadProps$i(__spreadValues$r({}, props), {
         className: "dateInput",
         value: renderLabel ? renderLabel(inputValue) : inputValue,
         ref,
@@ -2351,7 +2390,7 @@ const DateInput = React__default.forwardRef(
     const buttonProps = React__default.useMemo(
       () => {
         var _a3;
-        return __spreadValues$q({
+        return __spreadValues$r({
           disabled: (_a3 = props.disabled) != null ? _a3 : props.readOnly,
           "aria-label": window.LBL_PICK_DATE
         }, outerButtonProps);
@@ -2379,7 +2418,7 @@ const DateInput = React__default.forwardRef(
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         CalendarModal,
-        __spreadProps$h(__spreadValues$q({}, modalProps), {
+        __spreadProps$i(__spreadValues$r({}, modalProps), {
           calValue,
           locale: DEFAULT_LOCALE,
           handleClickDay: selectDate,
@@ -2389,7 +2428,7 @@ const DateInput = React__default.forwardRef(
       ),
       /* @__PURE__ */ jsxs(
         Box,
-        __spreadProps$h(__spreadValues$q({}, getVariant("forms.dateInput")), {
+        __spreadProps$i(__spreadValues$r({}, getVariant("forms.dateInput")), {
           className: `${className != null ? className : ""} dateInput`,
           id: `DateInput${id}`,
           ref: boxRef,
@@ -2422,33 +2461,33 @@ const DateInput = React__default.forwardRef(
 );
 DateInput.displayName = "DateInput";
 
-var __defProp$p = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
-var __hasOwnProp$q = Object.prototype.hasOwnProperty;
-var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$p = (a, b) => {
+var __defProp$q = Object.defineProperty;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
+var __hasOwnProp$r = Object.prototype.hasOwnProperty;
+var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$q = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$q.call(b, prop))
-      __defNormalProp$p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b)) {
-      if (__propIsEnum$q.call(b, prop))
-        __defNormalProp$p(a, prop, b[prop]);
+    if (__hasOwnProp$r.call(b, prop))
+      __defNormalProp$q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(b)) {
+      if (__propIsEnum$r.call(b, prop))
+        __defNormalProp$q(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
 var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$r.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
+  if (source != null && __getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$r.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2568,7 +2607,7 @@ const NumberInput = React__default.forwardRef(
     }, [value]);
     return /* @__PURE__ */ jsx(
       Input,
-      __spreadProps$g(__spreadValues$p({}, props), {
+      __spreadProps$h(__spreadValues$q({}, props), {
         onFocus: React__default.useCallback(
           (ev) => {
             var _a2;
@@ -2608,33 +2647,33 @@ const RequiredMark = ({
   return isRequired && !isReadonly && !isFormReadonly ? /* @__PURE__ */ jsx("abbr", { className: "requiredMark", title: getLabel("msgReqField").text, children: "*" }) : null;
 };
 
-var __defProp$o = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
-var __hasOwnProp$p = Object.prototype.hasOwnProperty;
-var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$o = (a, b) => {
+var __defProp$p = Object.defineProperty;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$p = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$p.call(b, prop))
-      __defNormalProp$o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(b)) {
-      if (__propIsEnum$p.call(b, prop))
-        __defNormalProp$o(a, prop, b[prop]);
+    if (__hasOwnProp$q.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
 var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
+  if (source != null && __getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2671,7 +2710,7 @@ const FieldLabel = forwardRef(
     var _a2, _b2;
     return /* @__PURE__ */ jsxs(
       Box,
-      __spreadProps$f(__spreadValues$o(__spreadProps$f(__spreadValues$o({
+      __spreadProps$g(__spreadValues$p(__spreadProps$g(__spreadValues$p({
         as: as != null ? as : "label"
       }, props), {
         className: `fieldLabel ${(_a2 = props.className) != null ? _a2 : ""}`
@@ -2818,7 +2857,7 @@ const AutoEllipsis = ({
         const cloneBounding = clone.current.getBoundingClientRect();
         const difX = Math.abs(cloneBounding.width - bound.width);
         const difY = Math.abs(cloneBounding.height - bound.height);
-        if (difX < 10 && difY < 10) {
+        if (difX < 50 && difY < 30) {
           clone.current.remove();
         }
       }
@@ -2861,25 +2900,25 @@ const AutoEllipsis = ({
   );
 };
 
-var __defProp$n = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
-var __hasOwnProp$o = Object.prototype.hasOwnProperty;
-var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$n = (a, b) => {
+var __defProp$o = Object.defineProperty;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
+var __hasOwnProp$p = Object.prototype.hasOwnProperty;
+var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$o = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$o.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(b)) {
-      if (__propIsEnum$o.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
+    if (__hasOwnProp$p.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
 function calcBreakPoint(currentWidth, breakPoints) {
   let currentIndex = 0;
   while (currentIndex < breakPoints.length && currentWidth > breakPoints[currentIndex])
@@ -2953,7 +2992,7 @@ const makeResponsiveComponent = ({
       const deferContainerWidth = useDeferredValue(containerWidth);
       return /* @__PURE__ */ jsx(Box, { ref, children: hasRendered ? /* @__PURE__ */ jsx(
         Component,
-        __spreadProps$e(__spreadValues$n({}, props), {
+        __spreadProps$f(__spreadValues$o({}, props), {
           breakPoint: deferBreakPoint,
           breakPointWidth: breakPoints[deferBreakPoint],
           containerWidth: deferContainerWidth
@@ -2964,22 +3003,61 @@ const makeResponsiveComponent = ({
   );
 };
 
+var __defProp$n = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
 const DefaultAccordionItemButton = (props) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f;
   const handler = useAccordionContext();
   const { isExpanded } = handler.hooks.useItemStateSelector((props2) => props2);
   const id = handler.hooks.useItemId();
   const [isChecked, setIsChecked] = useIsChecked(props);
-  const handleClick = useCallback(() => {
-    handler.udpateItem(id, (current) => ({
-      isExpanded: !current.isExpanded
-    }));
-  }, [handler, id]);
+  const handleClick = useCallback(
+    (ev) => {
+      var _a2;
+      (_a2 = props.onClick) == null ? void 0 : _a2.call(props, ev);
+      if (!ev.isDefaultPrevented())
+        handler.udpateItem(id, (current) => ({
+          isExpanded: !current.isExpanded
+        }));
+    },
+    [handler, id, props]
+  );
+  const handleKeyDown = useCallback(
+    (ev) => {
+      var _a2;
+      if (ev.code === "Enter") {
+        (_a2 = props.onUserPressEnter) == null ? void 0 : _a2.call(props, ev);
+        if (!ev.isDefaultPrevented() && props.rightButtons)
+          handler.udpateItem(id, (current) => ({
+            isExpanded: !current.isExpanded
+          }));
+      }
+    },
+    [handler, id, props]
+  );
   return /* @__PURE__ */ jsxs(
     SimpleButton,
-    {
-      className: "accordion__item__button",
+    __spreadProps$e(__spreadValues$n({}, props.domButtonProps), {
+      className: `accordion__item__button ${(_a = props.className) != null ? _a : ""} ${(_c = (_b = props.domButtonProps) == null ? void 0 : _b.className) != null ? _c : ""}`,
       onClick: handleClick,
+      onKeyDown: handleKeyDown,
       "aria-expanded": isExpanded,
       "aria-controls": `accordion__${handler.id}__${id}`,
       "aria-checked": isChecked,
@@ -2996,18 +3074,21 @@ const DefaultAccordionItemButton = (props) => {
               onChange: setIsChecked
             }
           ),
-          /* @__PURE__ */ jsx(Box, { as: "h3", className: "accordion__item__button__label", children: /* @__PURE__ */ jsx(AutoEllipsis, { overrideStyles: () => ({ textAlign: "left" }), children: (_b = (_a = props.label) != null ? _a : props.title) != null ? _b : props.ariaLabel }) })
+          /* @__PURE__ */ jsx(Box, { as: "h3", className: "accordion__item__button__label", children: /* @__PURE__ */ jsx(AutoEllipsis, { overrideStyles: () => ({ textAlign: "left" }), children: (_e = (_d = props.label) != null ? _d : props.title) != null ? _e : props.ariaLabel }) })
         ] }),
-        /* @__PURE__ */ jsx(Box, { className: "accordion__item__button__rightGroup", children: /* @__PURE__ */ jsx(
-          Icon$1,
-          {
-            name: isExpanded ? "ArrowUpThin" : "ArrowDownThin",
-            title: (_c = props.title) != null ? _c : props.ariaLabel,
-            size: 23
-          }
-        ) })
+        /* @__PURE__ */ jsxs(Box, { className: "accordion__item__button__rightGroup", children: [
+          props.rightButtons,
+          /* @__PURE__ */ jsx(
+            Icon$1,
+            {
+              name: isExpanded ? "ArrowUpThin" : "ArrowDownThin",
+              title: (_f = props.title) != null ? _f : props.ariaLabel,
+              size: 23
+            }
+          )
+        ] })
       ]
-    }
+    })
   );
 };
 
@@ -4201,6 +4282,11 @@ const moveFocusAndToggleSelection = makeOperation((state, { isShiftKey, which },
   }
   state.isEverythingSelected = false;
 });
+const resetFocus = makeOperation((state, _, keys) => {
+  keys.push(makeRowKey(state.focusedRow));
+  state.focusedRow = 0;
+  keys.push(makeRowKey(0));
+});
 const searchElementsByStartingCharacters = makeOperation((state, payload, keys) => {
   const currentIndex = state.shownRows.findIndex(
     (current) => current === state.focusedRow
@@ -4347,6 +4433,7 @@ const operations$1 = {
    * acuerdo a las especificaciones de wai-aria.
    */
   moveFocusAndToggleSelection,
+  resetFocus,
   /**
    * Este método debe utilizarse para la búsqueda por caracter simple o
    * múltiple en cuanto a la implementación de las funcionalidades
@@ -4429,9 +4516,10 @@ function useShoutSelectionChange(onSelectionChange, registerCallback) {
   );
 }
 
-function useIndexedChildren(children) {
+function useIndexedChildren(children, listboxActions) {
   return useMemo(
     function makeChildrenIndices() {
+      listboxActions.resetFocus(null);
       return Children.map(children, (child, rowIndex) => {
         if (isValidElement(child) && child.type === ListboxItem) {
           return cloneElement(
@@ -4444,7 +4532,7 @@ function useIndexedChildren(children) {
         return child;
       });
     },
-    [children]
+    [children, listboxActions]
   );
 }
 
@@ -4541,7 +4629,7 @@ const NoMemoListbox = makeStyledComponent(
     );
     useShoutSelectionChange(props.onSelectionChange, registerCallback);
     useUpdateRowCount(props.children, listboxActions);
-    const indexedChildren = useIndexedChildren(props.children);
+    const indexedChildren = useIndexedChildren(props.children, listboxActions);
     const { onClick, onFocus } = useListboxAutofocus(storeId, getState);
     const ref = useListbox("listbox", null);
     const variant = props.unstyled ? "" : "layout.components.listbox";
@@ -4917,413 +5005,12 @@ const useStore = ({
   ];
 };
 
-function isAttachToElementAFunction(attachToElement) {
-  return attachToElement instanceof Function && getParamNames(attachToElement).length === 0;
-}
-
-const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
-const ARGUMENT_NAMES = /([^\s,]+)/g;
-function getParamNames(func) {
-  const fnStr = func.toString().replace(STRIP_COMMENTS, "");
-  let result = fnStr.slice(fnStr.indexOf("(") + 1, fnStr.indexOf(")")).match(ARGUMENT_NAMES);
-  if (result === null)
-    result = [];
-  return result;
-}
-function determineAnchorPoint({
-  attachToElement,
-  attachToElementAnchorPoint
-}) {
-  let actualAnchorPoint = { left: 0, top: 0 };
-  const element = isAttachToElementAFunction(attachToElement) ? attachToElement() : attachToElement.current;
-  if (element) {
-    const rect = element.getBoundingClientRect();
-    const point = attachToElementAnchorPoint != null ? attachToElementAnchorPoint : "topRight";
-    switch (point) {
-      case "bottomLeft":
-        actualAnchorPoint = {
-          left: rect.left,
-          top: rect.bottom
-        };
-        break;
-      case "bottomRight":
-        actualAnchorPoint = {
-          left: rect.right,
-          top: rect.bottom
-        };
-        break;
-      case "center":
-        actualAnchorPoint = {
-          left: (rect.left + rect.right) / 2,
-          top: (rect.bottom + rect.top) / 2
-        };
-        break;
-      case "topLeft":
-        actualAnchorPoint = {
-          left: rect.left,
-          top: rect.top
-        };
-        break;
-      case "topRight":
-        actualAnchorPoint = {
-          left: rect.right,
-          top: rect.top
-        };
-        break;
-    }
-  } else {
-    console.warn(
-      "Cannot resolve element, will use default positioning ",
-      attachToElement
-    );
-  }
-  return actualAnchorPoint;
-}
-function calculateTooltipPosition({
-  anchorPoint,
-  attachToElement,
-  attachToElementAnchorPoint,
-  minSize,
-  preferredOrientationX,
-  preferredOrientationY,
-  preferredSize = { height: "auto", width: "auto" }
-}) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  let actualAnchorPoint = anchorPoint;
-  if (attachToElement) {
-    actualAnchorPoint = determineAnchorPoint({
-      attachToElement,
-      attachToElementAnchorPoint
-    });
-  }
-  if (actualAnchorPoint) {
-    const availableBottomSpace = window.innerHeight - actualAnchorPoint.top;
-    const availableTopSpace = actualAnchorPoint.top;
-    const availableLeftSpace = actualAnchorPoint.left;
-    const availableRightSpace = window.innerWidth - actualAnchorPoint.left;
-    const isEnoughToRight = ((_a = minSize == null ? void 0 : minSize.width) != null ? _a : 0) <= availableRightSpace;
-    const isEnoughToLeft = ((_b = minSize == null ? void 0 : minSize.width) != null ? _b : 0) <= availableLeftSpace;
-    const isEnoughToBottom = ((_c = minSize == null ? void 0 : minSize.height) != null ? _c : 0) <= availableBottomSpace;
-    const isEnoughToTop = ((_d = minSize == null ? void 0 : minSize.height) != null ? _d : 0) <= availableTopSpace;
-    const preferredWidth = preferredSize.width === "auto" ? Infinity : preferredSize.width;
-    const preferredHeight = preferredSize.height === "auto" ? Infinity : preferredSize.height;
-    const position = {
-      "& > *": {
-        width: "100%",
-        height: "100%"
-      },
-      width: preferredSize.width === "auto" ? "auto" : "100%",
-      height: preferredSize.height === "auto" ? "auto" : "100%"
-    };
-    if (preferredOrientationX === "left") {
-      if (isEnoughToLeft) {
-        position.maxWidth = Math.min(preferredWidth, availableLeftSpace);
-        position.right = window.innerWidth - actualAnchorPoint.left;
-      } else if (isEnoughToRight) {
-        position.maxWidth = Math.min(preferredWidth, availableRightSpace);
-        position.left = actualAnchorPoint.left;
-      } else {
-        position.left = 0;
-        position.maxWidth = "100vw";
-      }
-    } else {
-      if (isEnoughToRight) {
-        position.maxWidth = Math.min(preferredWidth, availableRightSpace);
-        position.left = actualAnchorPoint.left;
-      } else if (isEnoughToLeft) {
-        position.maxWidth = Math.min(preferredWidth, availableLeftSpace);
-        position.right = window.innerWidth - actualAnchorPoint.left;
-      } else {
-        position.left = 0;
-        position.maxWidth = "100vw";
-      }
-    }
-    if (preferredOrientationY === "top") {
-      if (isEnoughToTop) {
-        position.maxHeight = Math.min(preferredHeight, availableTopSpace);
-        position.bottom = window.innerHeight - actualAnchorPoint.top;
-      } else if (isEnoughToBottom) {
-        position.maxHeight = Math.min(preferredHeight, availableBottomSpace);
-        position.top = actualAnchorPoint.top;
-      } else {
-        position.maxHeight = "100vh";
-        position.top = 0;
-      }
-    } else {
-      if (isEnoughToBottom) {
-        position.maxHeight = Math.min(preferredHeight, availableBottomSpace);
-        position.top = actualAnchorPoint.top;
-      } else if (isEnoughToTop) {
-        position.maxHeight = Math.min(preferredHeight, availableTopSpace);
-        position.bottom = window.innerHeight - actualAnchorPoint.top;
-      } else {
-        position.maxHeight = "100vh";
-        position.top = 0;
-      }
-    }
-    position.minHeight = typeof position.maxHeight === "number" ? Math.min(position.maxHeight, (_e = minSize == null ? void 0 : minSize.height) != null ? _e : 0) : (_f = minSize == null ? void 0 : minSize.height) != null ? _f : 0;
-    position.minWidth = typeof position.minWidth === "number" ? Math.min(position.minWidth, (_g = minSize == null ? void 0 : minSize.width) != null ? _g : 0) : (_h = minSize == null ? void 0 : minSize.width) != null ? _h : 0;
-    return position;
-  }
-  return { left: 0, top: 0, width: "auto", height: "auto" };
-}
-function useHandlers({
-  attachToElement,
-  closeOnClick,
-  closeOnClickOut,
-  closeOnEscape,
-  closeOnMouseLeaveTooltip,
-  closeOnMouseLeaveAttachedElement,
-  closeOnScrollOut
-}) {
-  const hasInited = useRef(false);
-  const close = useCallback(() => {
-    tooltipsHandler("close", void 0);
-  }, []);
-  useMount(() => {
-    function handleEscape(ev) {
-      if (ev.code === "Escape" && closeOnEscape) {
-        close();
-      }
-    }
-    function handleMouseDownOut(ev) {
-      if (!hasInited.current)
-        return;
-      if (closeOnClickOut && !isChild(
-        ev.target,
-        (current) => {
-          var _a;
-          return (_a = current.classList) == null ? void 0 : _a.contains("tooltip__wrapper");
-        }
-      )) {
-        close();
-      }
-    }
-    function handleScroll(ev) {
-      if (!hasInited.current)
-        return;
-      if (closeOnScrollOut && !isChild(
-        ev.target,
-        (current) => {
-          var _a;
-          return (_a = current.classList) == null ? void 0 : _a.contains("tooltip__wrapper");
-        }
-      )) {
-        close();
-      }
-    }
-    function handleMouseLeave(event) {
-      if (!hasInited.current || !closeOnMouseLeaveAttachedElement && !closeOnMouseLeaveTooltip)
-        return;
-      const resolvedAttachToElement = attachToElement ? isAttachToElementAFunction(attachToElement) ? attachToElement() : attachToElement.current : null;
-      const isTooltipTheTarget = isChild(
-        event.target,
-        (current) => current.classList.contains("tooltip__wrapper")
-      );
-      const isAttachedTheTarget = isChild(
-        event.target,
-        (current) => current === resolvedAttachToElement
-      );
-      const isTooltipRelated = isChild(
-        event.relatedTarget,
-        (current) => current.classList.contains("tooltip__wrapper")
-      );
-      const isAttachedRelated = isChild(
-        event.relatedTarget,
-        (current) => current === resolvedAttachToElement
-      );
-      if (!isTooltipTheTarget && !isAttachedTheTarget && !closeOnMouseLeaveAttachedElement && !closeOnMouseLeaveTooltip)
-        return;
-      if (isTooltipRelated || isAttachedRelated)
-        return;
-      if (isAttachedTheTarget && !closeOnMouseLeaveAttachedElement)
-        return;
-      if (isTooltipTheTarget && !closeOnMouseLeaveTooltip)
-        return;
-      close();
-    }
-    document.addEventListener("keydown", handleEscape);
-    document.addEventListener("mousedown", handleMouseDownOut);
-    document.addEventListener("scroll", handleScroll);
-    document.addEventListener("mouseout", handleMouseLeave);
-    setTimeout(() => {
-      hasInited.current = true;
-    }, 0);
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.removeEventListener("click", handleMouseDownOut);
-      document.removeEventListener("scroll", handleScroll);
-      document.removeEventListener("mouseout", handleMouseLeave);
-    };
-  });
-  return {
-    handleOnClick: useCallback(
-      (ev) => {
-        ev.stopPropagation();
-        if (closeOnClick) {
-          close();
-        }
-      },
-      [close, closeOnClick]
-    )
-  };
-}
-
-var __defProp$8 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const Tooltip = ({
-  anchorPoint,
-  attachToElement,
-  attachToElementAnchorPoint,
-  children,
-  className,
-  closeOnClick = false,
-  closeOnClickOut = true,
-  closeOnEscape = true,
-  closeOnMouseLeaveTooltip = true,
-  closeOnMouseLeaveAttachedElement = true,
-  closeOnScrollOut = true,
-  minSize,
-  preferredOrientationX = "right",
-  preferredOrientationY = "bottom",
-  preferredSize = { height: "auto", width: "auto" },
-  variant = "layout.common.tooltips.primary"
-}) => {
-  const calculatedPosition = calculateTooltipPosition({
-    anchorPoint,
-    attachToElement,
-    attachToElementAnchorPoint,
-    minSize,
-    preferredOrientationX,
-    preferredOrientationY,
-    preferredSize
-  });
-  const sx = __spreadValues$8({
-    position: "fixed"
-  }, calculatedPosition);
-  const { handleOnClick } = useHandlers({
-    attachToElement,
-    closeOnEscape,
-    closeOnClickOut,
-    closeOnClick,
-    closeOnMouseLeaveTooltip,
-    closeOnMouseLeaveAttachedElement,
-    closeOnScrollOut
-  });
-  return /* @__PURE__ */ jsx(
-    Box,
-    __spreadProps$1(__spreadValues$8({
-      className: `tooltip__wrapper ${className != null ? className : ""}`
-    }, getVariant(variant)), {
-      sx,
-      onClick: handleOnClick,
-      children
-    })
-  );
-};
-
-var __defProp$7 = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-injectStyles("layout.common.tooltips.primary", {
-  background: "white",
-  border: "1px solid #ccc",
-  p: 3,
-  zIndex: "tooltip"
-});
-const [, tooltipsHandler, TooltipsProvider] = makeSingleImperativeComponent()({
-  Component: () => {
-    const [tooltip, setTooltip] = useState(null);
-    const tooltipRef = useLatest(tooltip);
-    useImperativeComponentEvents({
-      open: setTooltip,
-      close() {
-        var _a, _b;
-        (_b = (_a = tooltipRef.current) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a);
-        setTooltip(null);
-      }
-    });
-    if (!tooltip)
-      return null;
-    return /* @__PURE__ */ jsx(Tooltip, __spreadValues$7({}, tooltip));
-  }
-});
-function useTooltip(tooltip) {
-  const isOpen = useRef(false);
-  const open = useCallback(
-    (otherProps) => {
-      setTimeout(() => {
-        isOpen.current = true;
-        if (!tooltip && !(otherProps == null ? void 0 : otherProps.children))
-          throw new Error("There is no children set for the current tooltip");
-        tooltipsHandler("open", __spreadProps(__spreadValues$7(__spreadValues$7({}, tooltip), otherProps), {
-          onClose() {
-            var _a, _b;
-            (_a = tooltip == null ? void 0 : tooltip.onClose) == null ? void 0 : _a.call(tooltip);
-            (_b = otherProps == null ? void 0 : otherProps.onClose) == null ? void 0 : _b.call(otherProps);
-            isOpen.current = false;
-          }
-        }));
-      }, 0);
-    },
-    [tooltip]
-  );
-  return {
-    close: useCallback(() => {
-      tooltipsHandler("close", void 0);
-    }, []),
-    open,
-    toggle: useCallback(
-      (otherProps) => {
-        if (isOpen.current) {
-          tooltipsHandler("close", void 0);
-        } else
-          open(otherProps);
-      },
-      [open]
-    )
-  };
-}
-
-function findIcon(icons, arg) {
-  var _a, _b;
-  const iconId = arg instanceof HTMLElement ? (_b = (_a = arg.closest(".iconsList__iconWrapper[data-id]")) == null ? void 0 : _a.dataset) == null ? void 0 : _b.id : arg;
-  if (iconId !== void 0) {
-    const icon = icons.find((current) => String(current.id) === iconId);
-    return icon != null ? icon : null;
+function findIcon(icons, arg) {
+  var _a, _b;
+  const iconId = arg instanceof HTMLElement ? (_b = (_a = arg.closest(".iconsList__iconWrapper[data-id]")) == null ? void 0 : _a.dataset) == null ? void 0 : _b.id : arg;
+  if (iconId !== void 0) {
+    const icon = icons.find((current) => String(current.id) === iconId);
+    return icon != null ? icon : null;
   }
 }
 const KeyHandler = ({
@@ -5337,22 +5024,20 @@ const KeyHandler = ({
 }) => {
   const { actions, getState, useProps } = useIconsListStoreContext();
   const ref = useProps("grid", null);
-  const { open } = useTooltip({
-    minSize: { width: 200, height: 0 }
-  });
   const showIconDetails = useCallback(
     (icon) => {
       if (onIconGetDetails) {
-        open({
-          children: onIconGetDetails(icon),
+        new ApiaUtil().tooltips.open({
           attachToElement: () => document.querySelector(
             `#${storeId} .iconsList__iconWrapper[data-id="${icon.id}"]`
           ),
-          closeOnClick: false
+          children: onIconGetDetails(icon),
+          closeOnClick: false,
+          minSize: { width: 200, height: 0 }
         });
       }
     },
-    [onIconGetDetails, open, storeId]
+    [onIconGetDetails, storeId]
   );
   return /* @__PURE__ */ jsx(
     Box,
@@ -5456,19 +5141,19 @@ const KeyHandler = ({
   );
 };
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
@@ -5491,7 +5176,7 @@ const styles$1 = {
     flexDirection: "column",
     gap: 3,
     "&:hover": (theme) => {
-      return __spreadValues$6({}, theme.palette.getOneState(
+      return __spreadValues$8({}, theme.palette.getOneState(
         { backgroundColor: "palette.background.paper" },
         "hover"
       ));
@@ -5508,7 +5193,7 @@ const styles$1 = {
   },
   ".iconsList__keyHandler:focus": {
     outline: "none",
-    ".focused .iconsList__icon__wrapper": __spreadValues$6({}, focusOutline)
+    ".focused .iconsList__icon__wrapper": __spreadValues$8({}, focusOutline)
   }
 };
 
@@ -5551,15 +5236,254 @@ function getRowIcons({
         justToFillTheRow
       )
     );
-  return actualIcons;
-}
+  return actualIcons;
+}
+
+const IconRendererContext = createContext(
+  null
+);
+function useIconRendererContext() {
+  const context = useContext(IconRendererContext);
+  if (!context)
+    throw new Error("There is no IconRendererContext");
+  return context;
+}
+
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+const Icon = (props) => {
+  var _a;
+  const { useProps } = useIconsListStoreContext();
+  const ref = useProps("cell", {
+    columnIndex: props.colIndex,
+    rowIndex: props.rowIndex
+  });
+  const Renderer = useIconRendererContext();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      role: "gridcell",
+      "data-id": props.id,
+      className: `iconsList__iconWrapper ${(_a = props.className) != null ? _a : ""}`,
+      "aria-label": props.ariaLabel,
+      sx: useMemo(
+        () => ({
+          width: `${props.width}px`,
+          ".iconsList__icon__image__wrapper": {
+            height: `${props.width - 4}px`
+          },
+          ".iconsList__icon__image": {
+            maxHeight: `${props.width - 32}px`,
+            maxWidth: `${props.width - 32}px`
+          }
+        }),
+        [props.width]
+      ),
+      "aria-colindex": props.colIndex,
+      children: /* @__PURE__ */ jsx(Renderer, __spreadValues$7({}, props))
+    }
+  );
+};
+
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
+    }
+  return a;
+};
+const IconWrapper = ({
+  icon,
+  iconWidth,
+  rowIndex,
+  colIndex
+}) => {
+  return icon === justToFillTheRow ? /* @__PURE__ */ jsx(Box, { sx: { width: `${iconWidth}px` }, className: "fill__the__row" }) : /* @__PURE__ */ jsx(
+    Icon,
+    __spreadValues$6({
+      rowIndex,
+      colIndex,
+      width: iconWidth
+    }, icon)
+  );
+};
+
+const DefaultIconRendererNoMemo = (props) => {
+  if (!props.icon && !props.imageUrl) {
+    console.error({ props });
+    throw new Error("The icon has no imageUrl nor icon defined");
+  }
+  return /* @__PURE__ */ jsxs(Box, { title: props.label, className: "iconsList__icon__wrapper", children: [
+    /* @__PURE__ */ jsxs(Box, { className: "iconsList__icon__image__wrapper", children: [
+      props.imageUrl && /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: "iconsList__icon__image",
+          src: props.imageUrl,
+          role: "decoration"
+        }
+      ),
+      props.icon && /* @__PURE__ */ jsx(Icon$1, { icon: props.icon, title: props.ariaLabel })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", children: props.label })
+  ] });
+};
+const DefaultIconRenderer = memo(DefaultIconRendererNoMemo);
+
+const IconsListNonForwarded = (props, ref) => {
+  var _a, _b, _c;
+  const propsRef = useLatest(props);
+  let render = () => {
+  };
+  const previousProps = usePrevious(props);
+  if (!shallowEqual(props, previousProps.current)) {
+    setTimeout(() => render(), 0);
+  }
+  const ResponsiveContainer = useMemo(() => {
+    var _a2, _b2;
+    const iconWidth = (_a2 = propsRef.current.iconWidth) != null ? _a2 : 100;
+    const minGap = (_b2 = propsRef.current.minHorizontalGap) != null ? _b2 : 30;
+    const blockWidth = iconWidth + minGap;
+    const styledComponent = (styledComponentProps) => {
+      var _a3, _b3;
+      const { breakPoint, containerWidth } = styledComponentProps;
+      const [, doRender] = useState(true);
+      render = useCallback(() => doRender((current) => !current), []);
+      const storeId = useMemo(() => uniqueId("IconsList"), []);
+      const [actions, , , , Context] = useStore({ storeId });
+      const rows = Math.ceil(propsRef.current.icons.length / breakPoint);
+      const sx = useStyles({
+        breakPoint,
+        containerWidth,
+        iconWidth: (_a3 = propsRef.current.iconWidth) != null ? _a3 : 100,
+        verticalGap: propsRef.current.verticalGap,
+        removeHorizontalPadding: propsRef.current.removeHorizontalPadding
+      });
+      useEffect(() => {
+        actions.recalculateIndexByResize();
+      }, [breakPoint]);
+      const IconRenderer = (_b3 = propsRef.current.iconRenderer) != null ? _b3 : DefaultIconRenderer;
+      return /* @__PURE__ */ jsx(IconRendererContext.Provider, { value: IconRenderer, children: /* @__PURE__ */ jsx(Context, { children: /* @__PURE__ */ jsx(
+        KeyHandler,
+        {
+          icons: propsRef.current.icons,
+          onIconClick: propsRef.current.onIconClick,
+          onIconDoubleClick: propsRef.current.onIconDoubleClick,
+          onIconGetDetails: propsRef.current.onIconGetDetails,
+          onIconKeyDown: propsRef.current.onIconKeyDown,
+          storeId,
+          children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              id: storeId,
+              role: "grid",
+              "aria-rowcount": rows,
+              "aria-colcount": breakPoint,
+              children: Array(rows).fill(1).map((_, i) => {
+                const icons = getRowIcons({
+                  breakPoint,
+                  i,
+                  icons: propsRef.current.icons
+                });
+                return /* @__PURE__ */ jsx(
+                  Grid,
+                  {
+                    "aria-rowindex": i + 1,
+                    role: "row",
+                    ref,
+                    sx,
+                    children: icons.map((current, j) => {
+                      var _a4;
+                      return /* @__PURE__ */ jsx(
+                        IconWrapper,
+                        {
+                          colIndex: j + 1,
+                          icon: current,
+                          iconWidth: (_a4 = propsRef.current.iconWidth) != null ? _a4 : 100,
+                          rowIndex: i + 1
+                        },
+                        uniqueId(String(j + i))
+                      );
+                    })
+                  },
+                  i
+                );
+              })
+            }
+          )
+        }
+      ) }) });
+    };
+    const Component = makeResponsiveComponent({
+      breakPoints: getBreakpoints(blockWidth),
+      Component: makeStyledComponent(
+        "IconsList",
+        "layout.common.components.iconsList",
+        styles$1,
+        styledComponent
+      ),
+      debounce: 50
+    });
+    return Component;
+  }, []);
+  if (((_a = previousProps.current) == null ? void 0 : _a.iconWidth) !== props.iconWidth) {
+    const iconWidth = (_b = props.iconWidth) != null ? _b : 100;
+    const minGap = (_c = props.minHorizontalGap) != null ? _c : 30;
+    const blockWidth = iconWidth + minGap;
+    setTimeout(
+      () => ResponsiveContainer.setBreakpoints.current(getBreakpoints(blockWidth)),
+      0
+    );
+  }
+  return /* @__PURE__ */ jsx(ResponsiveContainer, {});
+};
+IconsListNonForwarded.displayName = "IconsList";
+const IconsList = forwardRef(
+  IconsListNonForwarded
+);
 
-const IconRendererContext = createContext(null);
-function useIconRendererContext() {
-  const context = useContext(IconRendererContext);
-  if (!context)
-    throw new Error("There is no IconRendererContext");
-  return context;
+function importComponent(path) {
+  return lazy(() => {
+    return new Promise((resolve) => {
+      import(
+        /* webpackInclude: /\.tsx?$/ */
+        `/customComponents/${path}`
+      ).then((result) => {
+        resolve(result);
+      }).catch((error) => {
+        resolve({
+          default: () => {
+            console.error(error);
+            return /* @__PURE__ */ jsx(Fragment, { children: "Error" });
+          }
+        });
+      });
+    });
+  });
 }
 
 var __defProp$5 = Object.defineProperty;
@@ -5578,39 +5502,55 @@ var __spreadValues$5 = (a, b) => {
     }
   return a;
 };
-const Icon = (props) => {
-  var _a;
-  const { useProps } = useIconsListStoreContext();
-  const ref = useProps("cell", {
-    columnIndex: props.colIndex,
-    rowIndex: props.rowIndex
-  });
-  const Renderer = useIconRendererContext();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      role: "gridcell",
-      "data-id": props.id,
-      className: `iconsList__iconWrapper ${(_a = props.className) != null ? _a : ""}`,
-      "aria-label": props.ariaLabel,
-      sx: useMemo(
-        () => ({
-          width: `${props.width}px`,
-          ".iconsList__icon__image__wrapper": {
-            height: `${props.width - 4}px`
-          },
-          ".iconsList__icon__image": {
-            maxHeight: `${props.width - 32}px`,
-            maxWidth: `${props.width - 32}px`
+const styles = {
+  backgroundColor: "palette.background.default",
+  "ul.listbox__list": {
+    display: "flex",
+    padding: "4px",
+    gap: "2px",
+    "[data-separator]": {
+      "&:focus, &.focused": {
+        outline: "none"
+      }
+    },
+    ".listbox__row": {
+      p: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    ".iconButton": {
+      borderRadius: "4px",
+      height: "32px",
+      width: "32px",
+      background: "transparent",
+      svg: {
+        path: {
+          fill: "palette.text.primary"
+        }
+      },
+      "&:disabled": {
+        svg: {
+          path: {
+            fill: "palette.border.section"
           }
-        }),
-        [props.width]
-      ),
-      "aria-colindex": props.colIndex,
-      children: /* @__PURE__ */ jsx(Renderer, __spreadValues$5({}, props))
+        }
+      }
+    },
+    ".separator": {
+      borderLeft: "1px solid",
+      borderRight: "1px solid",
+      borderColor: "palette.gray.750",
+      height: "60%",
+      width: "3px"
+    },
+    ".toggled": (theme) => {
+      return __spreadValues$5({}, theme.palette.getOneState(
+        { backgroundColor: theme.palette.background.default },
+        "selected"
+      ));
     }
-  );
+  }
 };
 
 var __defProp$4 = Object.defineProperty;
@@ -5629,291 +5569,470 @@ var __spreadValues$4 = (a, b) => {
     }
   return a;
 };
-const IconWrapper = ({
-  icon,
-  iconWidth,
-  rowIndex,
-  colIndex
-}) => {
-  return icon === justToFillTheRow ? /* @__PURE__ */ jsx(Box, { sx: { width: `${iconWidth}px` }, className: "fill__the__row" }) : /* @__PURE__ */ jsx(
-    Icon,
-    __spreadValues$4({
-      rowIndex,
-      colIndex,
-      width: iconWidth
-    }, icon)
-  );
+class ToolbarController extends EventEmitter {
+  constructor() {
+    super(...arguments);
+    this.eventListeners = {};
+    this.itemsState = {};
+    this.hooks = {
+      useItemState: (id, initialState) => {
+        const [state, setState] = useState(initialState);
+        useEffect(() => {
+          this.itemsState[id] = initialState;
+          this.on("updateItemState", (evId) => {
+            if (evId === id) {
+              setState(__spreadValues$4({}, this.itemsState[id]));
+            }
+          });
+        }, []);
+        return state;
+      }
+    };
+    this.setItemState = (id, newState) => {
+      this.itemsState[id] = __spreadValues$4(__spreadValues$4({}, this.itemsState[id]), newState);
+      this.emit("updateItemState", id);
+    };
+    this.Context = ({ children }) => {
+      return /* @__PURE__ */ jsx(ToolbarControllerContext.Provider, { value: this, children });
+    };
+  }
+}
+const ToolbarControllerContext = createContext(
+  null
+);
+const useToolbarControllerContext = () => {
+  const context = useContext(ToolbarControllerContext);
+  if (!context)
+    throw new Error("There is no Toolbar controller context");
+  return context;
+};
+
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+const ToolbarItemButton = ({
+  id,
+  action,
+  allowToggle,
+  defaultToggled,
+  disabled,
+  icon,
+  iconSize,
+  title,
+  toggled: toggledProp
+}) => {
+  const [innerIsToggled, setInnerIsToggled] = useState(
+    toggledProp != null ? toggledProp : allowToggle ? defaultToggled != null ? defaultToggled : false : false
+  );
+  const [isDisabled, setIsDisabled] = useState(!!disabled);
+  const lastToggledProp = useRef(toggledProp);
+  if (toggledProp !== void 0 && innerIsToggled !== toggledProp && lastToggledProp.current !== toggledProp) {
+    lastToggledProp.current = toggledProp;
+    setInnerIsToggled(toggledProp);
+  }
+  const handleClick = useCallback(() => {
+    if (lastToggledProp.current !== void 0) {
+      action({ isToggled: !lastToggledProp.current });
+    } else if (allowToggle) {
+      let isToggled = false;
+      setInnerIsToggled((current) => {
+        isToggled = !current;
+        return isToggled;
+      });
+      action({ isToggled });
+    } else {
+      action({ isToggled: false });
+    }
+  }, [action, allowToggle]);
+  const context = useToolbarControllerContext();
+  useEffect(() => {
+    const unsuscribe1 = context.on("updateItemState", (evId) => {
+      if (evId === id) {
+        setInnerIsToggled(!!context.itemsState[evId].toggled);
+        setIsDisabled(!!context.itemsState[evId].disabled);
+      }
+    });
+    const unsuscribe2 = context.on("pressEnter", (evId) => {
+      if (evId === id)
+        handleClick();
+    });
+    return () => {
+      unsuscribe1();
+      unsuscribe2();
+    };
+  }, [context, id, handleClick]);
+  useMount(() => {
+    if (context.itemsState[id]) {
+      if (context.itemsState[id].disabled !== void 0) {
+        setIsDisabled(!!context.itemsState[id].disabled);
+      }
+      if (context.itemsState[id].toggled !== void 0) {
+        setInnerIsToggled(!!context.itemsState[id].toggled);
+      }
+    } else
+      context.itemsState[id] = __spreadValues$3({
+        disabled: isDisabled,
+        toggled: innerIsToggled
+      }, context.itemsState[id]);
+  });
+  return /* @__PURE__ */ jsx(
+    IconButton$2,
+    {
+      className: `toolbarItem ${innerIsToggled ? "toggled" : ""}`,
+      size: iconSize != null ? iconSize : "Md",
+      icon,
+      onClick: handleClick,
+      "data-id": id,
+      title,
+      disabled: isDisabled
+    }
+  );
+};
+
+function isSeparator(params) {
+  return !!params.separator;
+}
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+const ToolbarItem = (props) => {
+  if (isSeparator(props)) {
+    return /* @__PURE__ */ jsx(Box, { className: "separator", children: "\xA0" });
+  }
+  return /* @__PURE__ */ jsx(ToolbarItemButton, __spreadValues$2({}, props));
 };
 
-const DefaultIconRendererNoMemo = (props) => {
-  return /* @__PURE__ */ jsxs(Box, { title: props.label, className: "iconsList__icon__wrapper", children: [
-    /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__image__wrapper", children: /* @__PURE__ */ jsx(
-      Image,
+const Toolbar = makeStyledComponent(
+  "toolbar",
+  "layout.components.toolbar",
+  styles,
+  ({ children, getController }) => {
+    const controller = useMemo(() => new ToolbarController(), []);
+    let separator = 0;
+    useMount(() => {
+      getController == null ? void 0 : getController(controller);
+    });
+    return /* @__PURE__ */ jsx(controller.Context, { children: /* @__PURE__ */ jsx(
+      Listbox,
       {
-        className: "iconsList__icon__image",
-        src: props.imageUrl,
-        role: "decoration"
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", children: props.label })
-  ] });
-};
-const DefaultIconRenderer = memo(DefaultIconRendererNoMemo);
-
-const IconsListNonForwarded = (props, ref) => {
-  var _a, _b, _c;
-  const propsRef = useLatest(props);
-  let render = () => {
-  };
-  const previousProps = usePrevious(props);
-  if (!shallowEqual(props, previousProps.current)) {
-    setTimeout(() => render(), 0);
-  }
-  const ResponsiveContainer = useMemo(() => {
-    var _a2, _b2;
-    const iconWidth = (_a2 = propsRef.current.iconWidth) != null ? _a2 : 100;
-    const minGap = (_b2 = propsRef.current.minHorizontalGap) != null ? _b2 : 30;
-    const blockWidth = iconWidth + minGap;
-    const styledComponent = (styledComponentProps) => {
-      var _a3, _b3;
-      const { breakPoint, containerWidth } = styledComponentProps;
-      const [, doRender] = useState(true);
-      render = useCallback(() => doRender((current) => !current), []);
-      const storeId = useMemo(() => uniqueId("IconsList"), []);
-      const [actions, , , , Context] = useStore({ storeId });
-      const rows = Math.ceil(propsRef.current.icons.length / breakPoint);
-      const sx = useStyles({
-        breakPoint,
-        containerWidth,
-        iconWidth: (_a3 = propsRef.current.iconWidth) != null ? _a3 : 100,
-        verticalGap: propsRef.current.verticalGap,
-        removeHorizontalPadding: propsRef.current.removeHorizontalPadding
-      });
-      useEffect(() => {
-        actions.recalculateIndexByResize();
-      }, [breakPoint]);
-      const IconRenderer = (_b3 = propsRef.current.iconRenderer) != null ? _b3 : DefaultIconRenderer;
-      return /* @__PURE__ */ jsx(IconRendererContext.Provider, { value: IconRenderer, children: /* @__PURE__ */ jsx(Context, { children: /* @__PURE__ */ jsx(
-        KeyHandler,
-        {
-          icons: propsRef.current.icons,
-          onIconClick: propsRef.current.onIconClick,
-          onIconDoubleClick: propsRef.current.onIconDoubleClick,
-          onIconGetDetails: propsRef.current.onIconGetDetails,
-          onIconKeyDown: propsRef.current.onIconKeyDown,
-          storeId,
-          children: /* @__PURE__ */ jsx(
-            Box,
-            {
-              id: storeId,
-              role: "grid",
-              "aria-rowcount": rows,
-              "aria-colcount": breakPoint,
-              children: arrayOrArray(rows).fill(1).map((_, i) => {
-                const icons = getRowIcons({
-                  breakPoint,
-                  i,
-                  icons: propsRef.current.icons
-                });
-                return /* @__PURE__ */ jsx(
-                  Grid,
-                  {
-                    "aria-rowindex": i + 1,
-                    role: "row",
-                    ref,
-                    sx,
-                    children: icons.map((current, j) => {
-                      var _a4;
-                      return /* @__PURE__ */ jsx(
-                        IconWrapper,
-                        {
-                          colIndex: j + 1,
-                          icon: current,
-                          iconWidth: (_a4 = propsRef.current.iconWidth) != null ? _a4 : 100,
-                          rowIndex: i + 1
-                        },
-                        uniqueId(String(j + i))
-                      );
-                    })
-                  },
-                  i
-                );
-              })
+        className: "toolbar",
+        onPressKeyOnNode: (ev) => {
+          if (ev.code === "Enter" || ev.code === "Space") {
+            const target = ev.target;
+            const item = target.querySelector(".toolbarItem");
+            const id = item.dataset.id;
+            if (!id) {
+              console.error("Error event", ev);
+              throw new Error(
+                "Cannot find target in toolbar press enter event."
+              );
             }
-          )
-        }
-      ) }) });
-    };
-    const Component = makeResponsiveComponent({
-      breakPoints: getBreakpoints(blockWidth),
-      Component: makeStyledComponent(
-        "IconsList",
-        "layout.common.components.iconsList",
-        styles$1,
-        styledComponent
-      ),
-      debounce: 50
-    });
-    return Component;
-  }, []);
-  if (((_a = previousProps.current) == null ? void 0 : _a.iconWidth) !== props.iconWidth) {
-    const iconWidth = (_b = props.iconWidth) != null ? _b : 100;
-    const minGap = (_c = props.minHorizontalGap) != null ? _c : 30;
-    const blockWidth = iconWidth + minGap;
-    setTimeout(
-      () => ResponsiveContainer.setBreakpoints.current(getBreakpoints(blockWidth)),
-      0
-    );
+            controller.emit("pressEnter", id);
+          }
+        },
+        children: Children.toArray(children).map((current) => {
+          const props = current == null ? void 0 : current.props;
+          if (!props)
+            throw new Error("Toolbar items must be of ToolbarItem type.");
+          const { id, title } = props;
+          return /* @__PURE__ */ jsx(
+            ListboxItem,
+            {
+              label: title,
+              "data-separator": id ? void 0 : "true",
+              children: current
+            },
+            id != null ? id : `separator${separator++}`
+          );
+        })
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx(ResponsiveContainer, {});
-};
-IconsListNonForwarded.displayName = "IconsList";
-const IconsList = forwardRef(
-  IconsListNonForwarded
 );
 
-function importComponent(path) {
-  return lazy(() => {
-    return new Promise((resolve) => {
-      import(
-        /* webpackInclude: /\.tsx?$/ */
-        `/customComponents/${path}`
-      ).then((result) => {
-        resolve(result);
-      }).catch((error) => {
-        resolve({
-          default: () => {
-            console.error(error);
-            return /* @__PURE__ */ jsx(Fragment, { children: "Error" });
-          }
-        });
-      });
-    });
-  });
+function isAttachToElementAFunction(attachToElement) {
+  return attachToElement instanceof Function && getParamNames(attachToElement).length === 0;
+}
+
+const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
+const ARGUMENT_NAMES = /([^\s,]+)/g;
+function getParamNames(func) {
+  const fnStr = func.toString().replace(STRIP_COMMENTS, "");
+  let result = fnStr.slice(fnStr.indexOf("(") + 1, fnStr.indexOf(")")).match(ARGUMENT_NAMES);
+  if (result === null)
+    result = [];
+  return result;
+}
+function determineAnchorPoint({
+  attachToElement,
+  attachToElementAnchorPoint
+}) {
+  let actualAnchorPoint = { left: 0, top: 0 };
+  const element = isAttachToElementAFunction(attachToElement) ? attachToElement() : attachToElement.current;
+  if (element) {
+    const rect = element.getBoundingClientRect();
+    const point = attachToElementAnchorPoint != null ? attachToElementAnchorPoint : "topRight";
+    switch (point) {
+      case "bottomLeft":
+        actualAnchorPoint = {
+          left: rect.left,
+          top: rect.bottom
+        };
+        break;
+      case "bottomRight":
+        actualAnchorPoint = {
+          left: rect.right,
+          top: rect.bottom
+        };
+        break;
+      case "center":
+        actualAnchorPoint = {
+          left: (rect.left + rect.right) / 2,
+          top: (rect.bottom + rect.top) / 2
+        };
+        break;
+      case "topLeft":
+        actualAnchorPoint = {
+          left: rect.left,
+          top: rect.top
+        };
+        break;
+      case "topRight":
+        actualAnchorPoint = {
+          left: rect.right,
+          top: rect.top
+        };
+        break;
+    }
+  } else {
+    console.warn(
+      "Cannot resolve element, will use default positioning ",
+      attachToElement
+    );
+  }
+  return actualAnchorPoint;
 }
-
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
+function calculateTooltipPosition({
+  anchorPoint,
+  attachToElement,
+  attachToElementAnchorPoint,
+  minSize,
+  preferredOrientationX,
+  preferredOrientationY,
+  preferredSize = { height: "auto", width: "auto" }
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  let actualAnchorPoint = anchorPoint;
+  if (attachToElement) {
+    actualAnchorPoint = determineAnchorPoint({
+      attachToElement,
+      attachToElementAnchorPoint
+    });
+  }
+  if (actualAnchorPoint) {
+    const availableBottomSpace = window.innerHeight - actualAnchorPoint.top;
+    const availableTopSpace = actualAnchorPoint.top;
+    const availableLeftSpace = actualAnchorPoint.left;
+    const availableRightSpace = window.innerWidth - actualAnchorPoint.left;
+    const isEnoughToRight = ((_a = minSize == null ? void 0 : minSize.width) != null ? _a : 0) <= availableRightSpace;
+    const isEnoughToLeft = ((_b = minSize == null ? void 0 : minSize.width) != null ? _b : 0) <= availableLeftSpace;
+    const isEnoughToBottom = ((_c = minSize == null ? void 0 : minSize.height) != null ? _c : 0) <= availableBottomSpace;
+    const isEnoughToTop = ((_d = minSize == null ? void 0 : minSize.height) != null ? _d : 0) <= availableTopSpace;
+    const preferredWidth = preferredSize.width === "auto" ? Infinity : preferredSize.width;
+    const preferredHeight = preferredSize.height === "auto" ? Infinity : preferredSize.height;
+    const position = {
+      "& > *": {
+        width: "100%",
+        height: "100%"
+      },
+      width: preferredSize.width === "auto" ? "auto" : "100%",
+      height: preferredSize.height === "auto" ? "auto" : "100%"
+    };
+    if (preferredOrientationX === "left") {
+      if (isEnoughToLeft) {
+        position.maxWidth = Math.min(preferredWidth, availableLeftSpace);
+        position.right = window.innerWidth - actualAnchorPoint.left;
+      } else if (isEnoughToRight) {
+        position.maxWidth = Math.min(preferredWidth, availableRightSpace);
+        position.left = actualAnchorPoint.left;
+      } else {
+        position.left = 0;
+        position.maxWidth = "100vw";
+      }
+    } else {
+      if (isEnoughToRight) {
+        position.maxWidth = Math.min(preferredWidth, availableRightSpace);
+        position.left = actualAnchorPoint.left;
+      } else if (isEnoughToLeft) {
+        position.maxWidth = Math.min(preferredWidth, availableLeftSpace);
+        position.right = window.innerWidth - actualAnchorPoint.left;
+      } else {
+        position.left = 0;
+        position.maxWidth = "100vw";
+      }
     }
-  return a;
-};
-const styles = {
-  backgroundColor: "palette.background.default",
-  "ul.listbox__list": {
-    display: "flex",
-    padding: "4px",
-    gap: "2px",
-    "[data-separator]": {
-      "&:focus, &.focused": {
-        outline: "none"
+    if (preferredOrientationY === "top") {
+      if (isEnoughToTop) {
+        position.maxHeight = Math.min(preferredHeight, availableTopSpace);
+        position.bottom = window.innerHeight - actualAnchorPoint.top;
+      } else if (isEnoughToBottom) {
+        position.maxHeight = Math.min(preferredHeight, availableBottomSpace);
+        position.top = actualAnchorPoint.top;
+      } else {
+        position.maxHeight = "100vh";
+        position.top = 0;
       }
-    },
-    ".listbox__row": {
-      p: 0,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    ".iconButton": {
-      borderRadius: "4px",
-      height: "32px",
-      width: "32px",
-      background: "transparent",
-      svg: {
-        path: {
-          fill: "palette.text.primary"
-        }
-      },
-      "&:disabled": {
-        svg: {
-          path: {
-            fill: "palette.border.section"
-          }
-        }
+    } else {
+      if (isEnoughToBottom) {
+        position.maxHeight = Math.min(preferredHeight, availableBottomSpace);
+        position.top = actualAnchorPoint.top;
+      } else if (isEnoughToTop) {
+        position.maxHeight = Math.min(preferredHeight, availableTopSpace);
+        position.bottom = window.innerHeight - actualAnchorPoint.top;
+      } else {
+        position.maxHeight = "100vh";
+        position.top = 0;
       }
-    },
-    ".separator": {
-      borderLeft: "1px solid",
-      borderRight: "1px solid",
-      borderColor: "palette.gray.750",
-      height: "60%",
-      width: "3px"
-    },
-    ".toggled": (theme) => {
-      return __spreadValues$3({}, theme.palette.getOneState(
-        { backgroundColor: theme.palette.background.default },
-        "selected"
-      ));
     }
+    position.minHeight = typeof position.maxHeight === "number" ? Math.min(position.maxHeight, (_e = minSize == null ? void 0 : minSize.height) != null ? _e : 0) : (_f = minSize == null ? void 0 : minSize.height) != null ? _f : 0;
+    position.minWidth = typeof position.minWidth === "number" ? Math.min(position.minWidth, (_g = minSize == null ? void 0 : minSize.width) != null ? _g : 0) : (_h = minSize == null ? void 0 : minSize.width) != null ? _h : 0;
+    return position;
   }
-};
-
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
+  return { left: 0, top: 0, width: "auto", height: "auto" };
+}
+function useHandlers({
+  attachToElement,
+  closeOnClick,
+  closeOnClickOut,
+  closeOnEscape,
+  closeOnMouseLeaveTooltip,
+  closeOnMouseLeaveAttachedElement,
+  closeOnScrollOut,
+  onClose
+}) {
+  const hasInited = useRef(false);
+  const close = useCallback(() => {
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  useMount(() => {
+    function handleEscape(ev) {
+      if (ev.code === "Escape" && closeOnEscape) {
+        close();
+      }
     }
-  return a;
-};
-class ToolbarController extends EventEmitter {
-  constructor() {
-    super(...arguments);
-    this.eventListeners = {};
-    this.itemsState = {};
-    this.hooks = {
-      useItemState: (id, initialState) => {
-        const [state, setState] = useState(initialState);
-        useEffect(() => {
-          this.itemsState[id] = initialState;
-          this.on("updateItemState", (evId) => {
-            if (evId === id) {
-              setState(__spreadValues$2({}, this.itemsState[id]));
-            }
-          });
-        }, []);
-        return state;
+    function handleMouseDownOut(ev) {
+      if (!hasInited.current)
+        return;
+      if (closeOnClickOut && !isChild(
+        ev.target,
+        (current) => {
+          var _a;
+          return (_a = current.classList) == null ? void 0 : _a.contains("tooltip__wrapper");
+        }
+      )) {
+        close();
       }
+    }
+    function handleScroll(ev) {
+      if (!hasInited.current)
+        return;
+      if (closeOnScrollOut && !isChild(
+        ev.target,
+        (current) => {
+          var _a;
+          return (_a = current.classList) == null ? void 0 : _a.contains("tooltip__wrapper");
+        }
+      )) {
+        close();
+      }
+    }
+    function handleMouseLeave(event) {
+      if (!hasInited.current || !closeOnMouseLeaveAttachedElement && !closeOnMouseLeaveTooltip)
+        return;
+      const resolvedAttachToElement = attachToElement ? isAttachToElementAFunction(attachToElement) ? attachToElement() : attachToElement.current : null;
+      const isTooltipTheTarget = isChild(
+        event.target,
+        (current) => current.classList.contains("tooltip__wrapper")
+      );
+      const isAttachedTheTarget = isChild(
+        event.target,
+        (current) => current === resolvedAttachToElement
+      );
+      const isTooltipRelated = isChild(
+        event.relatedTarget,
+        (current) => current.classList.contains("tooltip__wrapper")
+      );
+      const isAttachedRelated = isChild(
+        event.relatedTarget,
+        (current) => current === resolvedAttachToElement
+      );
+      if (!isTooltipTheTarget && !isAttachedTheTarget && !closeOnMouseLeaveAttachedElement && !closeOnMouseLeaveTooltip)
+        return;
+      if (isTooltipRelated || isAttachedRelated)
+        return;
+      if (isAttachedTheTarget && !closeOnMouseLeaveAttachedElement)
+        return;
+      if (isTooltipTheTarget && !closeOnMouseLeaveTooltip)
+        return;
+      close();
+    }
+    document.addEventListener("keydown", handleEscape);
+    document.addEventListener("mousedown", handleMouseDownOut);
+    document.addEventListener("scroll", handleScroll);
+    document.addEventListener("mouseout", handleMouseLeave);
+    setTimeout(() => {
+      hasInited.current = true;
+    }, 0);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("click", handleMouseDownOut);
+      document.removeEventListener("scroll", handleScroll);
+      document.removeEventListener("mouseout", handleMouseLeave);
     };
-    this.setItemState = (id, newState) => {
-      this.itemsState[id] = __spreadValues$2(__spreadValues$2({}, this.itemsState[id]), newState);
-      this.emit("updateItemState", id);
-    };
-    this.Context = ({ children }) => {
-      return /* @__PURE__ */ jsx(ToolbarControllerContext.Provider, { value: this, children });
-    };
-  }
+  });
+  return {
+    handleOnClick: useCallback(
+      (ev) => {
+        ev.stopPropagation();
+        if (closeOnClick) {
+          close();
+        }
+      },
+      [close, closeOnClick]
+    )
+  };
 }
-const ToolbarControllerContext = createContext(
-  null
-);
-const useToolbarControllerContext = () => {
-  const context = useContext(ToolbarControllerContext);
-  if (!context)
-    throw new Error("There is no Toolbar controller context");
-  return context;
-};
 
 var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
 var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
 var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
@@ -5929,90 +6048,63 @@ var __spreadValues$1 = (a, b) => {
     }
   return a;
 };
-const ToolbarItemButton = ({
-  id,
-  action,
-  allowToggle,
-  defaultToggled,
-  disabled,
-  icon,
-  iconSize,
-  title,
-  toggled: toggledProp
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const Tooltip = ({
+  anchorPoint,
+  attachToElement,
+  attachToElementAnchorPoint,
+  children,
+  className,
+  closeOnClick = false,
+  closeOnClickOut = true,
+  closeOnEscape = true,
+  closeOnMouseLeaveTooltip = true,
+  closeOnMouseLeaveAttachedElement = true,
+  closeOnScrollOut = true,
+  minSize,
+  onClose,
+  preferredOrientationX = "right",
+  preferredOrientationY = "bottom",
+  preferredSize = { height: "auto", width: "auto" },
+  variant = "layout.common.tooltips.primary"
 }) => {
-  const [innerIsToggled, setInnerIsToggled] = useState(
-    toggledProp != null ? toggledProp : allowToggle ? defaultToggled != null ? defaultToggled : false : false
-  );
-  const [isDisabled, setIsDisabled] = useState(!!disabled);
-  const lastToggledProp = useRef(toggledProp);
-  if (toggledProp !== void 0 && innerIsToggled !== toggledProp && lastToggledProp.current !== toggledProp) {
-    lastToggledProp.current = toggledProp;
-    setInnerIsToggled(toggledProp);
-  }
-  const handleClick = useCallback(() => {
-    if (lastToggledProp.current !== void 0) {
-      action({ isToggled: !lastToggledProp.current });
-    } else if (allowToggle) {
-      let isToggled = false;
-      setInnerIsToggled((current) => {
-        isToggled = !current;
-        return isToggled;
-      });
-      action({ isToggled });
-    } else {
-      action({ isToggled: false });
-    }
-  }, [action, allowToggle]);
-  const context = useToolbarControllerContext();
-  useEffect(() => {
-    const unsuscribe1 = context.on("updateItemState", (evId) => {
-      if (evId === id) {
-        setInnerIsToggled(!!context.itemsState[evId].toggled);
-        setIsDisabled(!!context.itemsState[evId].disabled);
-      }
-    });
-    const unsuscribe2 = context.on("pressEnter", (evId) => {
-      if (evId === id)
-        handleClick();
-    });
-    return () => {
-      unsuscribe1();
-      unsuscribe2();
-    };
-  }, [context, id, handleClick]);
-  useMount(() => {
-    if (context.itemsState[id]) {
-      if (context.itemsState[id].disabled !== void 0) {
-        setIsDisabled(!!context.itemsState[id].disabled);
-      }
-      if (context.itemsState[id].toggled !== void 0) {
-        setInnerIsToggled(!!context.itemsState[id].toggled);
-      }
-    } else
-      context.itemsState[id] = __spreadValues$1({
-        disabled: isDisabled,
-        toggled: innerIsToggled
-      }, context.itemsState[id]);
+  const calculatedPosition = calculateTooltipPosition({
+    anchorPoint,
+    attachToElement,
+    attachToElementAnchorPoint,
+    minSize,
+    preferredOrientationX,
+    preferredOrientationY,
+    preferredSize
+  });
+  const sx = __spreadValues$1({
+    position: "fixed"
+  }, calculatedPosition);
+  const { handleOnClick } = useHandlers({
+    attachToElement,
+    closeOnEscape,
+    closeOnClickOut,
+    closeOnClick,
+    closeOnMouseLeaveTooltip,
+    closeOnMouseLeaveAttachedElement,
+    closeOnScrollOut,
+    onClose
   });
   return /* @__PURE__ */ jsx(
-    IconButton$2,
-    {
-      className: `toolbarItem ${innerIsToggled ? "toggled" : ""}`,
-      size: iconSize != null ? iconSize : "Md",
-      icon,
-      onClick: handleClick,
-      "data-id": id,
-      title,
-      disabled: isDisabled
-    }
+    Box,
+    __spreadProps$1(__spreadValues$1({
+      className: `tooltip__wrapper ${className != null ? className : ""}`
+    }, getVariant(variant)), {
+      sx,
+      onClick: handleOnClick,
+      children
+    })
   );
 };
 
-function isSeparator(params) {
-  return !!params.separator;
-}
-
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -6028,61 +6120,59 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const ToolbarItem = (props) => {
-  if (isSeparator(props)) {
-    return /* @__PURE__ */ jsx(Box, { className: "separator", children: "\xA0" });
-  }
-  return /* @__PURE__ */ jsx(ToolbarItemButton, __spreadValues({}, props));
-};
-
-const Toolbar = makeStyledComponent(
-  "toolbar",
-  "layout.components.toolbar",
-  styles,
-  ({ children, getController }) => {
-    const controller = useMemo(() => new ToolbarController(), []);
-    let separator = 0;
-    useMount(() => {
-      getController == null ? void 0 : getController(controller);
-    });
-    return /* @__PURE__ */ jsx(controller.Context, { children: /* @__PURE__ */ jsx(
-      Listbox,
-      {
-        className: "toolbar",
-        onPressKeyOnNode: (ev) => {
-          if (ev.code === "Enter" || ev.code === "Space") {
-            const target = ev.target;
-            const item = target.querySelector(".toolbarItem");
-            const id = item.dataset.id;
-            if (!id) {
-              console.error("Error event", ev);
-              throw new Error(
-                "Cannot find target in toolbar press enter event."
-              );
-            }
-            controller.emit("pressEnter", id);
-          }
-        },
-        children: Children.toArray(children).map((current) => {
-          const props = current == null ? void 0 : current.props;
-          if (!props)
-            throw new Error(
-              "Toolbar items must be of ToolbarItem type and have an id defined."
-            );
-          const { id, title } = props;
-          return /* @__PURE__ */ jsx(
-            ListboxItem,
-            {
-              label: title,
-              "data-separator": id ? void 0 : "true",
-              children: current
-            },
-            id != null ? id : `separator${separator++}`
-          );
-        })
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const [, tooltipsHandler, TooltipsProvider] = makeSingleImperativeComponent()({
+  Component: () => {
+    const [tooltip, setTooltip] = useState(null);
+    const tooltipRef = useLatest(tooltip);
+    useImperativeComponentEvents({
+      open: setTooltip,
+      close() {
+        var _a, _b;
+        (_b = (_a = tooltipRef.current) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a);
+        setTooltip(null);
       }
-    ) });
+    });
+    if (!tooltip)
+      return null;
+    return /* @__PURE__ */ jsx(Tooltip, __spreadValues({}, tooltip));
   }
-);
+});
+function useTooltip(tooltip) {
+  const isOpen = useRef(false);
+  const open = useCallback(
+    (otherProps) => {
+      setTimeout(() => {
+        isOpen.current = true;
+        if (!tooltip && !(otherProps == null ? void 0 : otherProps.children))
+          throw new Error("There is no children set for the current tooltip");
+        tooltipsHandler("open", __spreadProps(__spreadValues(__spreadValues({}, tooltip), otherProps), {
+          onClose() {
+            var _a, _b;
+            (_a = tooltip == null ? void 0 : tooltip.onClose) == null ? void 0 : _a.call(tooltip);
+            (_b = otherProps == null ? void 0 : otherProps.onClose) == null ? void 0 : _b.call(otherProps);
+            isOpen.current = false;
+          }
+        }));
+      }, 0);
+    },
+    [tooltip]
+  );
+  return {
+    close: useCallback(() => {
+      tooltipsHandler("close", void 0);
+    }, []),
+    open,
+    toggle: useCallback(
+      (otherProps) => {
+        if (isOpen.current) {
+          tooltipsHandler("close", void 0);
+        } else
+          open(otherProps);
+      },
+      [open]
+    )
+  };
+}
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, AutoEllipsis, BaseButton, CalendarModal, Captcha, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, DateInput, DialogButtonBar, FieldErrorMessage, FieldLabel, IconButton, IconInput, IconsList, LinearLoader, Listbox, ListboxItem, LoaderSpinner, Modal, ModalContext, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLock, SimpleButton, Toolbar, ToolbarController, ToolbarItem, TooltipsProvider, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, tooltipsHandler, useAccordionContext, useModal, useOtherTagButton, useTooltip };
+export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, AutoEllipsis, BaseButton, CalendarModal, Captcha, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, DateInput, DefaultIconRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, IconButton, IconInput, IconsList, LinearLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLock, SimpleButton, Toolbar, ToolbarController, ToolbarItem, Tooltip, TooltipsProvider, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, tooltipsHandler, useAccordionContext, useModal, useModalContext, useOtherTagButton, useTooltip };