@apia/components 0.2.4 → 0.3.0

package/dist/index.js

@@ -1,9 +1,9 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useContext, useMemo, useEffect, useState, useRef, forwardRef, useCallback, Children, memo, isValidElement, cloneElement, lazy } 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, injectStyles, useThemeUI, Select, focusOutline, makeStyledComponent, Label, Progress, Grid } from '@apia/theme';
-import { findScrollContainer, getSpecificParent, useUpdateEffect, debugDispatcher, useCombinedRefs, focus, focusSelector, getFocusSelector, screenLocker, customEvents, isChild, getDateFormat, getLabel, persistentStorage, disableChildrenFocus, enableChildrenFocus, EventEmitter, useDebouncedCallback, getIndex, addBoundary, noNaN, useMount, makeSingleImperativeComponent, useLatest, useImperativeComponentEvents, usePrevious } from '@apia/util';
+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 { 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 { IconButton as IconButton$2 } from '@apia/components';
 
 const AccordionContext = createContext(null);
 const AccordionItemContext = createContext(null);
@@ -131,25 +132,25 @@ class AccordionHandler {
   }
 }
 
-var __defProp$z = Object.defineProperty;
-var __defProps$u = Object.defineProperties;
-var __getOwnPropDescs$u = 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$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$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$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$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
+var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
 const KeyHandler$1 = (props) => {
   const [ref, setRef] = useState(null);
   const handler = useAccordionContext();
@@ -195,31 +196,31 @@ const KeyHandler$1 = (props) => {
   const variant = handler.hooks.usePropsSelector((current) => current.variant);
   return /* @__PURE__ */ jsx(
     Box,
-    __spreadValues$z(__spreadProps$u(__spreadValues$z({}, props), {
+    __spreadValues$F(__spreadProps$w(__spreadValues$F({}, props), {
       ref: setRef
     }), variant ? getVariant(variant) : void 0)
   );
 };
 
-var __defProp$y = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = 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$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$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$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$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
 function makeRowKey(rowIndex) {
   return `row_${typeof rowIndex === "number" ? rowIndex : rowIndex.rowIndex}`;
 }
@@ -257,7 +258,7 @@ function getDistinctors(storeId) {
               focused: state.focusedRow === distinctions.rowIndex
             }
           },
-          etc: __spreadProps$t(__spreadValues$y({}, state.allowSelection ? {
+          etc: __spreadProps$v(__spreadValues$E({}, state.allowSelection ? {
             "aria-selected": state.selectedRows.includes(
               distinctions.rowIndex
             )
@@ -323,7 +324,7 @@ const keysMakers$1 = {
 };
 function getInitialState$1(initialState) {
   var _a, _b, _c;
-  return __spreadProps$t(__spreadValues$y(__spreadValues$y({}, defaultState), initialState), {
+  return __spreadProps$v(__spreadValues$E(__spreadValues$E({}, 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);
@@ -387,33 +388,33 @@ const AccordionItemButton = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
 
-var __defProp$x = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = 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$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$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$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$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
-var __objRest$d = (source, exclude) => {
+var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
+var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$y.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$y)
-    for (var prop of __getOwnPropSymbols$y(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$y.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;
@@ -432,7 +433,7 @@ const BaseButton = (_a) => {
     variant = "primary",
     type = "button",
     SXProps
-  } = _b, buttonProps = __objRest$d(_b, [
+  } = _b, buttonProps = __objRest$f(_b, [
     "id",
     "name",
     "onClick",
@@ -447,7 +448,7 @@ const BaseButton = (_a) => {
   ]);
   return /* @__PURE__ */ jsx(
     Button,
-    __spreadProps$s(__spreadValues$x(__spreadProps$s(__spreadValues$x({
+    __spreadProps$u(__spreadValues$D(__spreadProps$u(__spreadValues$D({
       id,
       name,
       onClick
@@ -460,7 +461,7 @@ const BaseButton = (_a) => {
         Flex,
         {
           as: "span",
-          sx: __spreadValues$x({
+          sx: __spreadValues$D({
             color: "inherit",
             width: "100%",
             flexDirection: "row",
@@ -482,33 +483,33 @@ const BaseButton = (_a) => {
   );
 };
 
-var __defProp$w = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = 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$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$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$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$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
-var __objRest$c = (source, exclude) => {
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$x.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$x)
-    for (var prop of __getOwnPropSymbols$x(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$x.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;
@@ -534,7 +535,7 @@ const IconButton = React.forwardRef(
       title,
       type = "button",
       variant = "icon"
-    } = _b, rest = __objRest$c(_b, [
+    } = _b, rest = __objRest$e(_b, [
       "className",
       "disabled",
       "icon",
@@ -573,7 +574,7 @@ const IconButton = React.forwardRef(
     }, [icon]);
     return /* @__PURE__ */ jsx(
       IconButton$1,
-      __spreadProps$r(__spreadValues$w(__spreadProps$r(__spreadValues$w({
+      __spreadProps$t(__spreadValues$C(__spreadProps$t(__spreadValues$C({
         id,
         ref,
         onClick: React.useCallback(
@@ -602,33 +603,33 @@ const IconButton = React.forwardRef(
 );
 IconButton.displayName = "IconButton";
 
-var __defProp$v = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = 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$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$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$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$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
-var __objRest$b = (source, exclude) => {
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$w.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$C.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$w)
-    for (var prop of __getOwnPropSymbols$w(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$w.call(source, prop))
+  if (source != null && __getOwnPropSymbols$C)
+    for (var prop of __getOwnPropSymbols$C(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$C.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -640,7 +641,10 @@ const simpleButton = {
   alignItems: "center",
   justifyContent: "center",
   svg: {
-    flexShrink: 0
+    flexShrink: 0,
+    path: {
+      fill: "currentColor"
+    }
   },
   ".toggled": {
     backgroundColor: "primary"
@@ -669,7 +673,7 @@ const SimpleButton = React.forwardRef(
       title,
       type = "button",
       variant = "primary"
-    } = _b, buttonProps = __objRest$b(_b, [
+    } = _b, buttonProps = __objRest$d(_b, [
       "children",
       "className",
       "disabled",
@@ -695,7 +699,8 @@ const SimpleButton = React.forwardRef(
         right: 0,
         bottom: 0,
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        justifyContent: "center"
       }),
       []
     );
@@ -708,7 +713,7 @@ const SimpleButton = React.forwardRef(
     const Icon = React.useMemo(() => icon, [icon]);
     return /* @__PURE__ */ jsxs(
       Button,
-      __spreadProps$q(__spreadValues$v(__spreadValues$v({
+      __spreadProps$s(__spreadValues$B(__spreadValues$B({
         ref,
         id,
         name,
@@ -767,25 +772,25 @@ function useOtherTagButton(props) {
   };
 }
 
-var __defProp$u = Object.defineProperty;
-var __defProps$p = Object.defineProperties;
-var __getOwnPropDescs$p = 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$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$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$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$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
 const Captcha = ({
   name,
   imageUrl,
@@ -799,7 +804,7 @@ const Captcha = ({
   };
   return /* @__PURE__ */ jsxs(
     Flex,
-    __spreadProps$p(__spreadValues$u({
+    __spreadProps$r(__spreadValues$A({
       sx: {
         flexDirection: "column"
       },
@@ -823,7 +828,7 @@ const Captcha = ({
               {
                 icon: "Refresh",
                 type: "button",
-                "aria-label": "TODO: Etiqueta activar audio",
+                "aria-label": getLabel("lblCaptchaActivateAudio").text,
                 onClick: handleSyncClick
               }
             ),
@@ -832,7 +837,7 @@ const Captcha = ({
               {
                 icon: "Volume",
                 type: "button",
-                "aria-label": "TODO: Etiqueta activar audio",
+                "aria-label": getLabel("lblCaptchaActivateAudio").text,
                 onClick: () => {
                 }
               }
@@ -844,33 +849,33 @@ const Captcha = ({
   );
 };
 
-var __defProp$t = Object.defineProperty;
-var __defProps$o = Object.defineProperties;
-var __getOwnPropDescs$o = 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$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$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$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$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
-var __objRest$a = (source, exclude) => {
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$u.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$u)
-    for (var prop of __getOwnPropSymbols$u(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$u.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;
@@ -885,7 +890,7 @@ const Checkbox$1 = forwardRef(
       name,
       native,
       indeterminate
-    } = _b, props = __objRest$a(_b, [
+    } = _b, props = __objRest$c(_b, [
       "onChange",
       "required",
       "disabled",
@@ -932,7 +937,7 @@ const Checkbox$1 = forwardRef(
       // eslint-disable-next-line react/forbid-elements
       /* @__PURE__ */ jsx(
         "input",
-        __spreadValues$t({
+        __spreadValues$z({
           type: "checkbox",
           onClick: props.onClick,
           "aria-checked": isChecked,
@@ -954,7 +959,7 @@ const Checkbox$1 = forwardRef(
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Button,
-        __spreadProps$o(__spreadValues$t(__spreadProps$o(__spreadValues$t({}, props), {
+        __spreadProps$q(__spreadValues$z(__spreadProps$q(__spreadValues$z({}, props), {
           onClick: (ev) => {
             var _a3;
             if (readOnly) {
@@ -1185,33 +1190,33 @@ function useBodyScrollLock(isLocked) {
   }, [isLocked]);
 }
 
-var __defProp$s = Object.defineProperty;
-var __defProps$n = Object.defineProperties;
-var __getOwnPropDescs$n = 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$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$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$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$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
-var __objRest$9 = (source, exclude) => {
+var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$z.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$t)
-    for (var prop of __getOwnPropSymbols$t(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
+  if (source != null && __getOwnPropSymbols$z)
+    for (var prop of __getOwnPropSymbols$z(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$z.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1227,7 +1232,7 @@ const Overlay = React.forwardRef(
       shouldAvoidInitialFocusTrap,
       stretch,
       transitionDuration = 150
-    } = _b, props = __objRest$9(_b, [
+    } = _b, props = __objRest$b(_b, [
       "children",
       "className",
       "onExited",
@@ -1253,7 +1258,7 @@ const Overlay = React.forwardRef(
         unmountOnExit: true,
         children: /* @__PURE__ */ jsx(
           Box,
-          __spreadProps$n(__spreadValues$s(__spreadProps$n(__spreadValues$s({
+          __spreadProps$p(__spreadValues$y(__spreadProps$p(__spreadValues$y({
             className: `${className} overlay`,
             ref: assignRefs
           }, props), {
@@ -1397,25 +1402,25 @@ const DialogHeader = ({
   );
 };
 
-var __defProp$r = Object.defineProperty;
-var __defProps$m = Object.defineProperties;
-var __getOwnPropDescs$m = 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$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$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$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$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
+var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
 const ModalContext = React__default.createContext(
   {}
 );
@@ -1501,7 +1506,7 @@ const Modal = forwardRef(
                   getFocusSelector(":not(.modal__closeButton)")
                 );
               },
-              __spreadProps$m(__spreadValues$r({}, initialFocusConfiguration), { focusEvenWhenScreenLocked: true })
+              __spreadProps$o(__spreadValues$x({}, initialFocusConfiguration), { focusEvenWhenScreenLocked: true })
             );
           }
         }
@@ -1541,7 +1546,7 @@ const Modal = forwardRef(
                 nodeRef,
                 children: /* @__PURE__ */ jsx(
                   Box,
-                  __spreadProps$m(__spreadValues$r({
+                  __spreadProps$o(__spreadValues$x({
                     ref: nodeRef,
                     className: "modal__variantWrapper"
                   }, variant ? getVariant(variant) : {}), {
@@ -1557,7 +1562,7 @@ const Modal = forwardRef(
                         className: "modal__main",
                         "data-scroll-lock-scrollable": true,
                         sx: React__default.useMemo(() => {
-                          return __spreadValues$r({
+                          return __spreadValues$x({
                             variant: `layout.common.modals.${size}`
                           }, maxWidth !== void 0 ? { maxWidth } : {});
                         }, [maxWidth, size]),
@@ -1597,43 +1602,43 @@ const Modal = forwardRef(
 );
 Modal.displayName = "Modal";
 
-var __defProp$q = Object.defineProperty;
-var __defProps$l = Object.defineProperties;
-var __getOwnPropDescs$l = 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$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$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$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$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
-var __objRest$8 = (source, exclude) => {
+var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$r.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$x.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$x)
+    for (var prop of __getOwnPropSymbols$x(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$x.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const CalendarModal = React__default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { handleClickDay, onCancel, calValue, locale, size } = _b, props = __objRest$8(_b, ["handleClickDay", "onCancel", "calValue", "locale", "size"]);
+    var _b = _a, { handleClickDay, onCancel, calValue, locale, size } = _b, props = __objRest$a(_b, ["handleClickDay", "onCancel", "calValue", "locale", "size"]);
     return /* @__PURE__ */ jsx(
       Modal,
-      __spreadProps$l(__spreadValues$q({
+      __spreadProps$n(__spreadValues$w({
         noHeader: true,
         size: size != null ? size : "cal",
         shouldCloseOnEsc: true,
@@ -1663,25 +1668,25 @@ const CalendarModal = React__default.forwardRef(
 );
 CalendarModal.displayName = "CalendarModal";
 
-var __defProp$p = Object.defineProperty;
-var __defProps$k = Object.defineProperties;
-var __getOwnPropDescs$k = 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$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]);
+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$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$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
+var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
 function useModal(configuration) {
   var _a, _b, _c;
   const [isLoading, setIsLoading] = React__default.useState(false);
@@ -1692,7 +1697,7 @@ function useModal(configuration) {
     Portal,
     hide: hidePortal,
     show: showPortal
-  } = usePortal(__spreadProps$k(__spreadValues$p({}, configuration == null ? void 0 : configuration.portalArgs), {
+  } = usePortal(__spreadProps$m(__spreadValues$v({}, configuration == null ? void 0 : configuration.portalArgs), {
     containerId: "AppModals",
     autoRemoveContainer: false,
     escToHide: false,
@@ -1749,32 +1754,32 @@ function useModal(configuration) {
   };
 }
 
-var __defProp$o = Object.defineProperty;
-var __defProps$j = Object.defineProperties;
-var __getOwnPropDescs$j = 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$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$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$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$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
+var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
 const DialogButtonBar = ({
   children,
   className
 }) => {
   return /* @__PURE__ */ jsx(
     Box,
-    __spreadProps$j(__spreadValues$o({
+    __spreadProps$l(__spreadValues$u({
       className: `${className != null ? className : ""} buttonsBar`
     }, getVariant("layout.common.modals.buttonsBar")), {
       children
@@ -1782,76 +1787,46 @@ const DialogButtonBar = ({
   );
 };
 
-var __defProp$n = Object.defineProperty;
-var __defProps$i = Object.defineProperties;
-var __getOwnPropDescs$i = 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$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$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$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$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
-function getConfirmButton(ref) {
-  return ref == null ? void 0 : ref.querySelector('button[type="submit"]');
-}
-injectStyles("layout.common.modals.confirm", {
-  display: "flex",
-  flexDirection: "column",
-  gap: spacing(4),
-  width: "100%",
-  ".confirm__content": {
-    overflow: "auto",
-    flexBasis: "100%",
-    wordBreak: "break-word",
-    display: "flex",
-    flexDirection: "column"
-  },
-  ".confirm__buttonBar": {
-    display: "flex",
-    justifyContent: "space-between",
-    flexBasis: "40px",
-    flexGrow: 0,
-    flexShrink: 0,
-    ".confirm__defaultButtons": {
-      display: "flex",
-      gap: spacing(3)
-    },
-    ".confirm__customButtons": {
-      width: "auto"
-    }
-  }
-});
+var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
 const Confirm = ({
+  children,
   additionalButtons,
   additionalButtonsOnRight,
-  children,
-  confirmButtonText: confirmText = window.BTN_CONFIRM,
-  cancelButtonText: cancelText = window.BTN_CANCEL,
-  confirmButtonVariant: confirmType = "primary",
+  cancelButtonText: cancelText = getLabel("btnCan").text,
+  className,
+  confirmButtonText: confirmText = getLabel("btnCon").text,
+  confirmButtonVariant = "primary",
+  contentRef,
   disabled,
   hideCancelButton,
   hideConfirmButton,
-  onConfirm: onConfirmOk,
-  onCancel: onConfirmCancel,
   isLoading,
-  contentRef,
-  className,
+  onCancel,
+  onConfirm,
   variant
 }) => {
-  const { descriptionId } = React.useContext(ModalContext);
+  const { descriptionId } = useContext(ModalContext);
   return /* @__PURE__ */ jsxs(
     Box,
-    __spreadProps$i(__spreadValues$n({}, getVariant(variant != null ? variant : "layout.common.modals.confirm")), {
+    __spreadProps$k(__spreadValues$t({}, 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 }),
@@ -1860,14 +1835,12 @@ const Confirm = ({
             Box,
             {
               className: "confirm__customButtons",
-              onClick: React.useCallback(
+              onClick: useCallback(
                 (ev) => {
-                  if (getSpecificParent(ev.target, (current) => {
-                    return current.tagName === "BUTTON";
-                  }))
-                    onConfirmCancel == null ? void 0 : onConfirmCancel(ev);
+                  if (ev.target.closest("button"))
+                    onCancel == null ? void 0 : onCancel();
                 },
-                [onConfirmCancel]
+                [onCancel]
               ),
               children: additionalButtons
             }
@@ -1877,14 +1850,12 @@ const Confirm = ({
               Box,
               {
                 className: "confirm__customButtonsOnRight",
-                onClick: React.useCallback(
+                onClick: useCallback(
                   (ev) => {
-                    if (getSpecificParent(ev.target, (current) => {
-                      return current.tagName === "BUTTON";
-                    }))
-                      onConfirmCancel == null ? void 0 : onConfirmCancel(ev);
+                    if (ev.target.closest("button"))
+                      onCancel == null ? void 0 : onCancel();
                   },
-                  [onConfirmCancel]
+                  [onCancel]
                 ),
                 children: additionalButtonsOnRight
               }
@@ -1892,9 +1863,9 @@ const Confirm = ({
             !hideConfirmButton && /* @__PURE__ */ jsx(
               SimpleButton,
               {
-                onClick: onConfirmOk,
+                onClick: onConfirm,
                 title: confirmText,
-                variant: confirmType,
+                variant: confirmButtonVariant,
                 disabled: isLoading != null ? isLoading : disabled,
                 isLoading,
                 className: "confirm__confirmButton",
@@ -1902,10 +1873,10 @@ const Confirm = ({
                 children: confirmText
               }
             ),
-            onConfirmCancel && !hideCancelButton && /* @__PURE__ */ jsx(
+            onCancel && !hideCancelButton && /* @__PURE__ */ jsx(
               SimpleButton,
-              __spreadProps$i(__spreadValues$n({
-                onClick: onConfirmCancel,
+              __spreadProps$k(__spreadValues$t({
+                onClick: onCancel,
                 title: cancelText
               }, getVariant("secondary")), {
                 disabled: isLoading,
@@ -1946,25 +1917,25 @@ const LinearLoader = () => {
   );
 };
 
-var __defProp$m = Object.defineProperty;
-var __defProps$h = Object.defineProperties;
-var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$m = (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$n.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$m(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$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
 const ScreenLock = () => {
   const ref = React__default.useRef(null);
   const [hasReleasedFirstTime, setHasReleasedFirstTime] = useState(false);
@@ -1977,11 +1948,11 @@ const ScreenLock = () => {
   React__default.useEffect(() => {
     const suscriptions = [
       screenLocker.on("lockStateChange", (ev) => {
-        setLocks((current) => __spreadProps$h(__spreadValues$m({}, current), { [ev.lockName]: ev.isLocked }));
+        setLocks((current) => __spreadProps$j(__spreadValues$s({}, current), { [ev.lockName]: ev.isLocked }));
         setHasReleasedFirstTime(ev.hasReleasedFirstTime);
       }),
       screenLocker.on("forcedStateChange", (ev) => {
-        setLocks((current) => __spreadProps$h(__spreadValues$m({}, current), { forced: ev.isForced }));
+        setLocks((current) => __spreadProps$j(__spreadValues$s({}, current), { forced: ev.isForced }));
         setHasReleasedFirstTime(ev.hasReleasedFirstTime);
       })
     ];
@@ -2044,33 +2015,33 @@ const FieldErrorMessage = ({ children, name }) => {
   return null;
 };
 
-var __defProp$l = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
-var __hasOwnProp$m = Object.prototype.hasOwnProperty;
-var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (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$m.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$l(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$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
-var __objRest$7 = (source, exclude) => {
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$m.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$m)
-    for (var prop of __getOwnPropSymbols$m(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.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;
@@ -2092,7 +2063,7 @@ const IconInput = (_a) => {
     onClick,
     onBlur,
     readOnly
-  } = _b, rest = __objRest$7(_b, [
+  } = _b, rest = __objRest$9(_b, [
     "additionalButtons",
     "additionalButtonsPosition",
     "buttonProps",
@@ -2109,7 +2080,7 @@ const IconInput = (_a) => {
     "onBlur",
     "readOnly"
   ]);
-  const _a2 = inputProps != null ? inputProps : {}, { sx: inputSx } = _a2, actualInputProps = __objRest$7(_a2, ["sx"]);
+  const _a2 = inputProps != null ? inputProps : {}, { sx: inputSx } = _a2, actualInputProps = __objRest$9(_a2, ["sx"]);
   const innerButtonRef = React__default.useRef(null);
   const assignButtonRef = useCombinedRefs(buttonRef, innerButtonRef);
   const innerInputRef = React__default.useRef(null);
@@ -2127,25 +2098,25 @@ const IconInput = (_a) => {
   );
   return /* @__PURE__ */ jsxs(
     Box,
-    __spreadProps$g(__spreadValues$l({}, getVariant("forms.iconInput")), {
+    __spreadProps$i(__spreadValues$r({}, getVariant("forms.iconInput")), {
       className: `${className != null ? className : ""} iconInput`,
       ref: parentRef,
       onBlur: handleBlur,
       children: [
         /* @__PURE__ */ jsx(
           Input,
-          __spreadValues$l(__spreadValues$l({
+          __spreadValues$r(__spreadValues$r({
             disabled: isLoading != null ? isLoading : disabled,
             ref: assignInputRef,
             readOnly,
-            sx: __spreadValues$l({ variant: "forms.input" }, inputSx),
+            sx: __spreadValues$r({ variant: "forms.input" }, inputSx),
             "data-variant": "forms.input"
           }, rest), actualInputProps)
         ),
         additionalButtonsPosition === "before" && additionalButtons,
         !hideButton && /* @__PURE__ */ jsx(
           IconButton,
-          __spreadValues$l({
+          __spreadValues$r({
             onClick,
             icon,
             disabled: readOnly != null ? readOnly : disabled,
@@ -2174,33 +2145,33 @@ const getFieldTouchedStyles = (isTouched) => {
   };
 };
 
-var __defProp$k = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (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$l.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$k(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$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-var __objRest$6 = (source, exclude) => {
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.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$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.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;
@@ -2228,7 +2199,7 @@ const DateInput = React__default.forwardRef(
       onError,
       renderLabel,
       value: outerValue
-    } = _b, props = __objRest$6(_b, [
+    } = _b, props = __objRest$8(_b, [
       "allowPickBeforeToday",
       "buttonProps",
       "className",
@@ -2260,7 +2231,7 @@ const DateInput = React__default.forwardRef(
           resolve();
         });
       }
-    }), { show, hide } = _a2, modalProps = __objRest$6(_a2, ["show", "hide"]);
+    }), { show, hide } = _a2, modalProps = __objRest$8(_a2, ["show", "hide"]);
     const [stateError, setError] = React__default.useState(error != null ? error : null);
     const lastEmittedValue = React__default.useRef(outerValue != null ? outerValue : "");
     useUpdateEffect(() => {
@@ -2348,7 +2319,7 @@ const DateInput = React__default.forwardRef(
       [id, onBlur]
     );
     const inputProps = React__default.useMemo(
-      () => __spreadProps$f(__spreadValues$k({}, props), {
+      () => __spreadProps$h(__spreadValues$q({}, props), {
         className: "dateInput",
         value: renderLabel ? renderLabel(inputValue) : inputValue,
         ref,
@@ -2380,7 +2351,7 @@ const DateInput = React__default.forwardRef(
     const buttonProps = React__default.useMemo(
       () => {
         var _a3;
-        return __spreadValues$k({
+        return __spreadValues$q({
           disabled: (_a3 = props.disabled) != null ? _a3 : props.readOnly,
           "aria-label": window.LBL_PICK_DATE
         }, outerButtonProps);
@@ -2408,7 +2379,7 @@ const DateInput = React__default.forwardRef(
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         CalendarModal,
-        __spreadProps$f(__spreadValues$k({}, modalProps), {
+        __spreadProps$h(__spreadValues$q({}, modalProps), {
           calValue,
           locale: DEFAULT_LOCALE,
           handleClickDay: selectDate,
@@ -2418,7 +2389,7 @@ const DateInput = React__default.forwardRef(
       ),
       /* @__PURE__ */ jsxs(
         Box,
-        __spreadProps$f(__spreadValues$k({}, getVariant("forms.dateInput")), {
+        __spreadProps$h(__spreadValues$q({}, getVariant("forms.dateInput")), {
           className: `${className != null ? className : ""} dateInput`,
           id: `DateInput${id}`,
           ref: boxRef,
@@ -2451,33 +2422,33 @@ const DateInput = React__default.forwardRef(
 );
 DateInput.displayName = "DateInput";
 
-var __defProp$j = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (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$k.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$j(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$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-var __objRest$5 = (source, exclude) => {
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.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$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.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;
@@ -2557,7 +2528,7 @@ function formatValueToShow(value, avoidDecimalRestriction = false) {
 }
 const NumberInput = React__default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { value, avoidDecimalRestriction } = _b, props = __objRest$5(_b, ["value", "avoidDecimalRestriction"]);
+    var _b = _a, { value, avoidDecimalRestriction } = _b, props = __objRest$7(_b, ["value", "avoidDecimalRestriction"]);
     const [actualValue, setActualValue] = React__default.useState("");
     const [showValue, setShowValue] = React__default.useState("");
     const lastEmittedValue = React__default.useRef("");
@@ -2597,7 +2568,7 @@ const NumberInput = React__default.forwardRef(
     }, [value]);
     return /* @__PURE__ */ jsx(
       Input,
-      __spreadProps$e(__spreadValues$j({}, props), {
+      __spreadProps$g(__spreadValues$p({}, props), {
         onFocus: React__default.useCallback(
           (ev) => {
             var _a2;
@@ -2637,33 +2608,33 @@ const RequiredMark = ({
   return isRequired && !isReadonly && !isFormReadonly ? /* @__PURE__ */ jsx("abbr", { className: "requiredMark", title: getLabel("msgReqField").text, children: "*" }) : null;
 };
 
-var __defProp$i = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (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$j.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$i(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$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-var __objRest$4 = (source, exclude) => {
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
+  if (source != null && __getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2687,7 +2658,7 @@ const FieldLabel = forwardRef(
       label,
       required,
       requiredMarkPosition = "after"
-    } = _b, props = __objRest$4(_b, [
+    } = _b, props = __objRest$6(_b, [
       "as",
       "avoidSemicolon",
       "children",
@@ -2700,7 +2671,7 @@ const FieldLabel = forwardRef(
     var _a2, _b2;
     return /* @__PURE__ */ jsxs(
       Box,
-      __spreadProps$d(__spreadValues$i(__spreadProps$d(__spreadValues$i({
+      __spreadProps$f(__spreadValues$o(__spreadProps$f(__spreadValues$o({
         as: as != null ? as : "label"
       }, props), {
         className: `fieldLabel ${(_a2 = props.className) != null ? _a2 : ""}`
@@ -2775,6 +2746,224 @@ function useIsChecked(props) {
   ];
 }
 
+const AutoEllipsis = ({
+  children,
+  findParent,
+  overrideStyles
+}) => {
+  const unsuscribe = useRef(() => {
+  });
+  const clone = useRef(null);
+  const ref = useCallback(
+    (el) => {
+      if (!el)
+        return;
+      unsuscribe.current();
+      function handleMouseEnter() {
+        var _a;
+        clone.current = el.cloneNode(true);
+        Object.entries(window.getComputedStyle((_a = findParent == null ? void 0 : findParent(el)) != null ? _a : el)).forEach(
+          ([name, value]) => {
+            if (name.match(/webkit/))
+              return;
+            try {
+              clone.current.style[name] = value;
+            } catch (e) {
+            }
+          }
+        );
+        const bound = el.getBoundingClientRect();
+        clone.current.style.position = "fixed";
+        clone.current.style.left = `${bound.left - 1}px`;
+        clone.current.style.top = `${bound.top - 1}px`;
+        clone.current.style.width = `${bound.width + 8}px`;
+        clone.current.style.whiteSpace = "break-spaces";
+        clone.current.style.overflow = "visible";
+        clone.current.style.textOverflow = "unset";
+        clone.current.style.background = "var(--theme-ui-colors-palette-background-paper)";
+        clone.current.style.color = "var(--theme-ui-colors-palette-text-primary)";
+        clone.current.style.border = "1px solid";
+        clone.current.style.borderColor = "var(--theme-ui-colors-palette-border-field)";
+        clone.current.style.zIndex = "1000000";
+        clone.current.style.height = "auto";
+        clone.current.style.fill = "var(--theme-ui-colors-palette-text-primary)";
+        clone.current.style.pointerEvents = "none";
+        const overridenStyles = overrideStyles == null ? void 0 : overrideStyles(el);
+        if (overridenStyles) {
+          Object.entries(overridenStyles).forEach(([name, value]) => {
+            if (name.match(/webkit/))
+              return;
+            try {
+              clone.current.style[name] = value;
+            } catch (e) {
+            }
+          });
+        }
+        clone.current.addEventListener("mouseleave", (ev) => {
+          var _a2;
+          if (isChild(
+            ev.relatedTarget,
+            (current) => current === el
+          ))
+            return;
+          (_a2 = clone.current) == null ? void 0 : _a2.remove();
+        });
+        function close() {
+          var _a2;
+          (_a2 = clone.current) == null ? void 0 : _a2.remove();
+          document.removeEventListener("scroll", close);
+        }
+        document.addEventListener("scroll", close);
+        document.body.append(clone.current);
+        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) {
+          clone.current.remove();
+        }
+      }
+      function handleMouseLeave(ev) {
+        var _a;
+        if (isChild(
+          ev.relatedTarget,
+          (current) => current === clone.current
+        ))
+          return;
+        (_a = clone.current) == null ? void 0 : _a.remove();
+      }
+      el.addEventListener("mouseenter", handleMouseEnter);
+      el.addEventListener("mouseleave", handleMouseLeave);
+      unsuscribe.current = () => {
+        el.removeEventListener("mouseenter", handleMouseEnter);
+        el.removeEventListener("mouseleave", handleMouseLeave);
+      };
+    },
+    [findParent, overrideStyles]
+  );
+  useEffect(() => {
+    return () => {
+      var _a;
+      (_a = clone.current) == null ? void 0 : _a.remove();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      sx: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
+      className: "autoellipsis__container",
+      children
+    }
+  );
+};
+
+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));
+function calcBreakPoint(currentWidth, breakPoints) {
+  let currentIndex = 0;
+  while (currentIndex < breakPoints.length && currentWidth > breakPoints[currentIndex])
+    currentIndex++;
+  return currentIndex;
+}
+const makeResponsiveComponent = ({
+  breakPoints,
+  Component,
+  defaultBreakpoint
+}) => {
+  const setBreakpoints = {
+    current: () => {
+    }
+  };
+  return Object.assign(
+    function ResponsiveComponent(props) {
+      var _a;
+      const [breakPoint, setCurrentBreakpoint] = useState(
+        defaultBreakpoint != null ? defaultBreakpoint : 4
+      );
+      const [innerBreakpoints, setInnerBreakpoints] = useState(
+        (_a = props.breakPoints) != null ? _a : breakPoints
+      );
+      setBreakpoints.current = setInnerBreakpoints;
+      const [containerWidth, setContainerWidth] = useState(
+        breakPoints[defaultBreakpoint != null ? defaultBreakpoint : 4]
+      );
+      const observer = useRef(null);
+      const shouldDisconnect = useRef(false);
+      const [hasRendered, setHasRendered] = useState(false);
+      const [, startTransition] = useTransition();
+      const ref = useCallback(
+        (element) => {
+          var _a2;
+          if (!element)
+            return;
+          (_a2 = observer.current) == null ? void 0 : _a2.disconnect();
+          observer.current = new ResizeObserver((resizeProps) => {
+            if (resizeProps[0].contentRect.width === 0)
+              return;
+            startTransition(() => {
+              setContainerWidth(resizeProps[0].contentRect.width);
+              setCurrentBreakpoint(
+                calcBreakPoint(
+                  resizeProps[0].contentRect.width,
+                  innerBreakpoints
+                )
+              );
+              setHasRendered(true);
+            });
+          });
+          if (element)
+            observer.current.observe(element);
+        },
+        [innerBreakpoints]
+      );
+      useEffect(() => {
+        shouldDisconnect.current = false;
+        return () => {
+          shouldDisconnect.current = true;
+          setTimeout(() => {
+            var _a2;
+            if (shouldDisconnect.current) {
+              (_a2 = observer.current) == null ? void 0 : _a2.disconnect();
+            }
+          }, 2e3);
+        };
+      }, [innerBreakpoints]);
+      const deferBreakPoint = useDeferredValue(breakPoint);
+      const deferContainerWidth = useDeferredValue(containerWidth);
+      return /* @__PURE__ */ jsx(Box, { ref, children: hasRendered ? /* @__PURE__ */ jsx(
+        Component,
+        __spreadProps$e(__spreadValues$n({}, props), {
+          breakPoint: deferBreakPoint,
+          breakPointWidth: breakPoints[deferBreakPoint],
+          containerWidth: deferContainerWidth
+        })
+      ) : null });
+    },
+    { setBreakpoints }
+  );
+};
+
 const DefaultAccordionItemButton = (props) => {
   var _a, _b, _c;
   const handler = useAccordionContext();
@@ -2796,6 +2985,7 @@ const DefaultAccordionItemButton = (props) => {
       "aria-checked": isChecked,
       title: props.title,
       "aria-label": props.ariaLabel,
+      tabIndex: props.tabIndex,
       children: [
         /* @__PURE__ */ jsxs(Box, { className: "accordion__item__button__leftGroup", children: [
           props.checked !== void 0 && /* @__PURE__ */ jsx(
@@ -2806,13 +2996,14 @@ const DefaultAccordionItemButton = (props) => {
               onChange: setIsChecked
             }
           ),
-          /* @__PURE__ */ jsx(Box, { as: "h3", className: "accordion__item__button__label", 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: (_b = (_a = props.label) != null ? _a : props.title) != null ? _b : props.ariaLabel }) })
         ] }),
         /* @__PURE__ */ jsx(Box, { className: "accordion__item__button__rightGroup", children: /* @__PURE__ */ jsx(
           Icon$1,
           {
-            name: isExpanded ? "Minus" : "Plus",
-            title: (_c = props.title) != null ? _c : props.ariaLabel
+            name: isExpanded ? "ArrowUpThin" : "ArrowDownThin",
+            title: (_c = props.title) != null ? _c : props.ariaLabel,
+            size: 23
           }
         ) })
       ]
@@ -2820,19 +3011,19 @@ const DefaultAccordionItemButton = (props) => {
   );
 };
 
-var __defProp$h = Object.defineProperty;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
+var __defProp$m = Object.defineProperty;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$i.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
@@ -2852,7 +3043,7 @@ const AccordionItemContent = ({
     return true;
   });
   if (button === null && buttonProps)
-    button = /* @__PURE__ */ jsx(DefaultAccordionItemButton, __spreadValues$h({}, buttonProps));
+    button = /* @__PURE__ */ jsx(DefaultAccordionItemButton, __spreadValues$m({}, buttonProps));
   const handler = useAccordionContext();
   const isExpanded = handler.hooks.useItemStateSelector(
     (current) => current.isExpanded
@@ -2876,33 +3067,33 @@ const AccordionItemContent = ({
   ] });
 };
 
-var __defProp$g = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = 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) => {
+var __defProp$l = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
   for (var prop in b || (b = {}))
-    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]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$3 = (source, exclude) => {
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
+  if (source != null && __getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2911,7 +3102,7 @@ const AccordionItem = (_a) => {
   var _b = _a, {
     children,
     id
-  } = _b, props = __objRest$3(_b, [
+  } = _b, props = __objRest$5(_b, [
     "children",
     "id"
   ]);
@@ -2922,7 +3113,7 @@ const AccordionItem = (_a) => {
     hasRegistered.current = true;
     context.registerItem(id, { isChecked: false, isExpanded: false });
   }
-  return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(AccordionItemContent, __spreadProps$c(__spreadValues$g({ id }, props), { children })) });
+  return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(AccordionItemContent, __spreadProps$d(__spreadValues$l({ id }, props), { children })) });
 };
 
 const NoMemoApiaDateFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) => {
@@ -2974,25 +3165,25 @@ const NoMemoApiaDateFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) =
 };
 const ApiaDateFilter = React.forwardRef(NoMemoApiaDateFilter);
 
-var __defProp$f = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = 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$k = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (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$l.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 const NoMemoApiaFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const [value, setValue] = React.useState(
@@ -3043,7 +3234,7 @@ const NoMemoApiaFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) => {
     if (filter.type === "apiaNumber") {
       return /* @__PURE__ */ jsx(
         NumberInput,
-        __spreadProps$b(__spreadValues$f({
+        __spreadProps$c(__spreadValues$k({
           "aria-readonly": filter.readonly,
           readOnly: filter.readonly,
           value,
@@ -3086,7 +3277,7 @@ const NoMemoApiaFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) => {
       }
     ) : /* @__PURE__ */ jsx(
       Input,
-      __spreadProps$b(__spreadValues$f({
+      __spreadProps$c(__spreadValues$k({
         "aria-readonly": filter.readonly,
         readOnly: filter.readonly,
         value,
@@ -3115,41 +3306,41 @@ const NoMemoApiaFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) => {
 };
 const ApiaFilter = React.memo(React.forwardRef(NoMemoApiaFilter));
 
-const styles$3 = {};
+const styles$4 = {};
 
-var __defProp$e = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = 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$j = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$j = (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$k.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
-injectStyles("layout.common.components.collapsiblePanel", styles$3);
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+injectStyles("layout.common.components.collapsiblePanel", styles$4);
 const CollapsiblePanel = React__default.forwardRef(
   ({
     children,
     className,
-    closedIcon = "ArrowDown",
+    closedIcon = "ArrowDownThin",
     collapsed,
     defaultCollapsed,
     disableChildrenFocus: disableChildrenFocus$1,
-    iconSize = "iconXs",
+    iconSize = "20px",
     id,
     onClose,
     onOpen,
-    openIcon = "ArrowRight",
+    openIcon = "ArrowRightThin",
     label,
     titleButtons,
     minHeight = 0
@@ -3210,7 +3401,7 @@ const CollapsiblePanel = React__default.forwardRef(
     }, [id, isCollapsed, onClose, onOpen, ref]);
     return /* @__PURE__ */ jsxs(
       Box,
-      __spreadProps$a(__spreadValues$e({
+      __spreadProps$b(__spreadValues$j({
         className: `collapsiblePanel ${className != null ? className : ""}`
       }, getVariant("layout.common.components.collapsiblePanel")), {
         ref: (el) => {
@@ -3222,15 +3413,14 @@ const CollapsiblePanel = React__default.forwardRef(
           /* @__PURE__ */ jsxs(Box, { className: "collapsiblePanel__label", children: [
             /* @__PURE__ */ jsxs(
               Button,
-              __spreadProps$a(__spreadValues$e({}, getVariant("inherit")), {
+              __spreadProps$b(__spreadValues$j({}, getVariant("inherit")), {
                 "aria-expanded": !isCollapsed,
                 onClick: (ev) => callOnOpen(true, ev),
                 type: "button",
                 className: "collapsiblePanel__label__button",
-                onKeyDown: console.log,
                 children: [
                   isCollapsed ? /* @__PURE__ */ jsx(Icon$1, { title: "", icon: openIcon, size: iconSize }) : /* @__PURE__ */ jsx(Icon$1, { title: "", icon: closedIcon, size: iconSize }),
-                  label
+                  /* @__PURE__ */ jsx("span", { className: "title", children: label })
                 ]
               })
             ),
@@ -3255,35 +3445,160 @@ const CollapsiblePanel = React__default.forwardRef(
 );
 CollapsiblePanel.displayName = "CollapsiblePanel";
 
-const ListboxContext = createContext({});
+var __defProp$i = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __objRest$4 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const AlertModal = ({ children, onClose, title }) => {
+  const _a = useModal({
+    isDefaultOpen: true,
+    onExited: onClose
+  }), { hide } = _a, modalProps = __objRest$4(_a, ["hide"]);
+  return /* @__PURE__ */ jsx(
+    Modal,
+    __spreadProps$a(__spreadValues$i({}, modalProps), {
+      sx: useMemo(
+        () => ({
+          ".modal__content .confirm__content": {
+            overflow: "visible"
+          }
+        }),
+        []
+      ),
+      initialFocusGetter: useCallback((ref) => {
+        return ref == null ? void 0 : ref.querySelector(".confirm__confirmButton");
+      }, []),
+      title,
+      children: /* @__PURE__ */ jsx(
+        Confirm,
+        {
+          onConfirm: useCallback(() => {
+            hide();
+          }, [hide]),
+          children
+        }
+      )
+    })
+  );
+};
 
-var __defProp$d = Object.defineProperty;
+var __defProp$h = Object.defineProperty;
 var __defProps$9 = Object.defineProperties;
 var __getOwnPropDescs$9 = 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 __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (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$i.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __objRest$3 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const ConfirmModal = (_a) => {
+  var _b = _a, {
+    onConfirm,
+    onCancel,
+    title
+  } = _b, props = __objRest$3(_b, [
+    "onConfirm",
+    "onCancel",
+    "title"
+  ]);
+  const hasConfirmed = useRef(false);
+  const _a2 = useModal({
+    isDefaultOpen: true,
+    onExited: () => {
+      if (hasConfirmed.current)
+        onConfirm == null ? void 0 : onConfirm();
+      else
+        onCancel == null ? void 0 : onCancel();
+    }
+  }), { hide } = _a2, modalProps = __objRest$3(_a2, ["hide"]);
+  const handleCancel = useCallback(() => {
+    hide();
+  }, [hide]);
+  const handleConfirm = useCallback(() => {
+    hasConfirmed.current = true;
+    hide();
+  }, [hide]);
+  return /* @__PURE__ */ jsx(Modal, __spreadProps$9(__spreadValues$h({}, modalProps), { title, children: /* @__PURE__ */ jsx(Confirm, __spreadProps$9(__spreadValues$h({}, props), { onCancel: handleCancel, onConfirm: handleConfirm })) }));
+};
+
+const ListboxContext = createContext({});
+
+var __defProp$g = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = 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$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$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$h.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$h)
+    for (var prop of __getOwnPropSymbols$h(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$h.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -3305,14 +3620,14 @@ const ListboxItem = memo(
       ((_a2 = domProps.className) == null ? void 0 : _a2.includes("separator")) && /* @__PURE__ */ jsx("li", { className: "separator" }),
       /* @__PURE__ */ jsx(
         "li",
-        __spreadProps$9(__spreadValues$d({}, domProps), {
+        __spreadProps$8(__spreadValues$g({}, domProps), {
           className: `${(_c = (_b2 = domProps.className) == null ? void 0 : _b2.split(" ").filter((current) => current !== "separator").join(" ")) != null ? _c : ""} listbox__row`,
           ref,
           role: "option",
           onDoubleClick: useCallback(
             (ev) => {
               ev.preventDefault();
-              onDoubleClickNode == null ? void 0 : onDoubleClickNode(__spreadProps$9(__spreadValues$d({}, ev), {
+              onDoubleClickNode == null ? void 0 : onDoubleClickNode(__spreadProps$8(__spreadValues$g({}, ev), {
                 target: ev.target.closest(
                   '[role="option"]'
                 )
@@ -3322,7 +3637,7 @@ const ListboxItem = memo(
           ),
           onMouseDown: useCallback(
             (ev) => {
-              onClickNode == null ? void 0 : onClickNode(__spreadProps$9(__spreadValues$d({}, ev), {
+              onClickNode == null ? void 0 : onClickNode(__spreadProps$8(__spreadValues$g({}, ev), {
                 target: ev.target.closest(
                   '[role="option"]'
                 )
@@ -3412,25 +3727,25 @@ shout_fn = function({ clear } = { clear: true }) {
   }
 };
 
-var __defProp$c = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = 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$f = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = 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$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$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$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 const ListboxKeyhandler = ({ children, className }) => {
   const {
     listboxActions,
@@ -3474,7 +3789,7 @@ const ListboxKeyhandler = ({ children, className }) => {
   );
   return /* @__PURE__ */ jsx(
     Box,
-    __spreadProps$8(__spreadValues$c({}, getVariant(variant)), {
+    __spreadProps$7(__spreadValues$f({}, getVariant(variant)), {
       className,
       id,
       onKeyDown: useCallback(
@@ -3486,9 +3801,9 @@ const ListboxKeyhandler = ({ children, className }) => {
               "There is no cell on keydown event, it must be an error."
             );
           const state = getState();
-          onPressKeyOnNode == null ? void 0 : onPressKeyOnNode(__spreadProps$8(__spreadValues$c({}, ev), { target: cell, currentTarget: cell }));
+          onPressKeyOnNode == null ? void 0 : onPressKeyOnNode(__spreadProps$7(__spreadValues$f({}, ev), { target: cell, currentTarget: cell }));
           if (ev.code === "Enter") {
-            onPressEnterOnNode == null ? void 0 : onPressEnterOnNode(__spreadProps$8(__spreadValues$c({}, ev), { target: cell, currentTarget: cell }));
+            onPressEnterOnNode == null ? void 0 : onPressEnterOnNode(__spreadProps$7(__spreadValues$f({}, ev), { target: cell, currentTarget: cell }));
           }
           if (ev.isDefaultPrevented() || ev.isPropagationStopped())
             return;
@@ -3577,33 +3892,33 @@ const ListboxKeyhandler = ({ children, className }) => {
   );
 };
 
-var __defProp$b = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = 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$e = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = 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$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$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$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$c.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$c)
-    for (var prop of __getOwnPropSymbols$c(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$c.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;
@@ -3638,7 +3953,7 @@ const Combobox = (_a) => {
     ),
     /* @__PURE__ */ jsx(
       Box,
-      __spreadProps$7(__spreadValues$b({
+      __spreadProps$6(__spreadValues$e({
         as: "ul",
         id: `${id}__list__container`,
         role: "listbox",
@@ -3655,26 +3970,26 @@ const Combobox = (_a) => {
   ] });
 };
 
-var __defProp$a = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = 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$d = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = 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$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$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$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-const styles$2 = {
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+const styles$3 = {
   "&:focus-within": {
     ".listbox__list": {
       outline: "none"
@@ -3705,7 +4020,7 @@ const styles$2 = {
     whiteSpace: "nowrap",
     textOverflow: "ellipsis",
     "&:hover": (theme) => {
-      return __spreadProps$6(__spreadValues$a({}, theme.palette.getOneState(
+      return __spreadProps$5(__spreadValues$d({}, theme.palette.getOneState(
         { backgroundColor: "palette.background.paper" },
         "hover"
       )), {
@@ -3715,17 +4030,17 @@ const styles$2 = {
   }
 };
 
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.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$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.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;
@@ -4179,34 +4494,34 @@ function useUpdateRowCount(children, listboxActions) {
     [listboxActions, children]
   );
 }
-
-function useListboxContextValue(props) {
-  return useMemo(() => props, [...Object.values(props)]);
-}
-
-var __defProp$9 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+
+function useListboxContextValue(props) {
+  return useMemo(() => props, [...Object.values(props)]);
+}
+
+var __defProp$c = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = 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$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 const NoMemoListbox = makeStyledComponent(
   "Listbox",
   "layout.components.listbox",
-  styles$2,
+  styles$3,
   (props) => {
     var _a, _b, _c;
     const storeId = useMemo(() => uniqueId("Listbox"), []);
@@ -4234,12 +4549,12 @@ const NoMemoListbox = makeStyledComponent(
     });
     return /* @__PURE__ */ jsx(ListboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       ListboxKeyhandler,
-      __spreadProps$5(__spreadValues$9({
+      __spreadProps$4(__spreadValues$c({
         className: `listbox ${props.showSearchbox ? "withSearchbox" : ""} ${(_a = props.className) != null ? _a : ""}`
       }, props.ulProps), {
-        children: props.showSearchbox ? /* @__PURE__ */ jsx(Combobox, __spreadProps$5(__spreadValues$9({}, props.ulProps), { children: indexedChildren })) : /* @__PURE__ */ jsx(
+        children: props.showSearchbox ? /* @__PURE__ */ jsx(Combobox, __spreadProps$4(__spreadValues$c({}, props.ulProps), { children: indexedChildren })) : /* @__PURE__ */ jsx(
           Box,
-          __spreadProps$5(__spreadValues$9({
+          __spreadProps$4(__spreadValues$c({
             ref,
             as: "ul",
             role: "listbox",
@@ -4258,25 +4573,25 @@ const NoMemoListbox = makeStyledComponent(
 );
 const Listbox = memo(NoMemoListbox);
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = 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) => {
+var __defProp$b = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = 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$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]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 const ProgressBar = ({
   id,
   progress = 0,
@@ -4296,7 +4611,7 @@ const ProgressBar = ({
     ),
     /* @__PURE__ */ jsx(
       Progress,
-      __spreadProps$4(__spreadValues$8({
+      __spreadProps$3(__spreadValues$b({
         id,
         max: 100,
         value: progress
@@ -4310,26 +4625,26 @@ const ProgressBar = ({
   ] });
 };
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = 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) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = 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$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]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const styles$1 = {
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const styles$2 = {
   height: "iconmd",
   width: "iconmd",
   background: "palette.background.paper"
@@ -4337,192 +4652,17 @@ const styles$1 = {
 const LoaderSpinner = makeStyledComponent(
   "LoaderSpinner",
   "layout.common.components.loaderSpinner",
-  styles$1,
+  styles$2,
   ({ className }) => {
     return /* @__PURE__ */ jsx(
       Spinner,
-      __spreadProps$3(__spreadValues$7({}, getVariant("layout.common.components.loaderSpinner")), {
+      __spreadProps$2(__spreadValues$a({}, getVariant("layout.common.components.loaderSpinner")), {
         className
       })
     );
   }
 );
 
-const AutoEllipsis = ({ children }) => {
-  const unsuscribe = useRef(() => {
-  });
-  const clone = useRef(null);
-  const ref = useCallback((el) => {
-    if (!el)
-      return;
-    unsuscribe.current();
-    function handleMouseEnter() {
-      clone.current = el.cloneNode(true);
-      Object.entries(window.getComputedStyle(el)).forEach(([name, value]) => {
-        try {
-          clone.current.style[name] = value;
-        } catch (e) {
-        }
-      });
-      const bound = el.getBoundingClientRect();
-      clone.current.style.position = "fixed";
-      clone.current.style.left = `${bound.left - 1}px`;
-      clone.current.style.top = `${bound.top - 1}px`;
-      clone.current.style.width = `${bound.width + 2}px`;
-      clone.current.style.whiteSpace = "break-spaces";
-      clone.current.style.overflow = "visible";
-      clone.current.style.textOverflow = "unset";
-      clone.current.style.background = "var(--theme-ui-colors-palette-background-paper)";
-      clone.current.style.border = "1px solid";
-      clone.current.style.borderColor = "var(--theme-ui-colors-palette-border-field)";
-      clone.current.style.zIndex = "1000";
-      clone.current.style.height = "auto";
-      clone.current.style.pointerEvents = "none";
-      clone.current.addEventListener("mouseleave", (ev) => {
-        var _a;
-        if (isChild(ev.relatedTarget, (current) => current === el))
-          return;
-        (_a = clone.current) == null ? void 0 : _a.remove();
-      });
-      document.body.append(clone.current);
-      const cloneBounding = clone.current.getBoundingClientRect();
-      if (cloneBounding.width - 2 === bound.width && cloneBounding.height - 2 === bound.height) {
-        clone.current.remove();
-      }
-    }
-    function handleMouseLeave(ev) {
-      var _a;
-      if (isChild(
-        ev.relatedTarget,
-        (current) => current === clone.current
-      ))
-        return;
-      (_a = clone.current) == null ? void 0 : _a.remove();
-    }
-    el.addEventListener("mouseenter", handleMouseEnter);
-    el.addEventListener("mouseleave", handleMouseLeave);
-    unsuscribe.current = () => {
-      el.removeEventListener("mouseenter", handleMouseEnter);
-      el.removeEventListener("mouseleave", handleMouseLeave);
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      sx: {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap"
-      },
-      children
-    }
-  );
-};
-
-var __defProp$6 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-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;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-function calcBreakPoint(currentWidth, breakPoints) {
-  let currentIndex = 0;
-  while (currentIndex < breakPoints.length && currentWidth > breakPoints[currentIndex])
-    currentIndex++;
-  return currentIndex;
-}
-const makeResponsiveComponent = ({
-  breakPoints,
-  Component,
-  debounce,
-  defaultBreakpoint
-}) => {
-  const setBreakpoints = {
-    current: () => {
-    }
-  };
-  return Object.assign(
-    function ResponsiveComponent(props) {
-      var _a;
-      const [breakPoint, setCurrentBreakpoint] = useState(
-        defaultBreakpoint != null ? defaultBreakpoint : 4
-      );
-      const [innerBreakpoints, setInnerBreakpoints] = useState(
-        (_a = props.breakPoints) != null ? _a : breakPoints
-      );
-      setBreakpoints.current = setInnerBreakpoints;
-      const [containerWidth, setContainerWidth] = useState(
-        breakPoints[defaultBreakpoint != null ? defaultBreakpoint : 4]
-      );
-      const observer = useRef(null);
-      const timeout = useRef(0);
-      const shouldDisconnect = useRef(false);
-      const [hasRendered, setHasRendered] = useState(false);
-      const ref = useCallback(
-        (element) => {
-          var _a2;
-          if (!element)
-            return;
-          (_a2 = observer.current) == null ? void 0 : _a2.disconnect();
-          observer.current = new ResizeObserver((resizeProps) => {
-            if (resizeProps[0].contentRect.width === 0)
-              return;
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(() => {
-              setContainerWidth(resizeProps[0].contentRect.width);
-              setCurrentBreakpoint(
-                calcBreakPoint(
-                  resizeProps[0].contentRect.width,
-                  innerBreakpoints
-                )
-              );
-              setHasRendered(true);
-            }, debounce != null ? debounce : 100);
-          });
-          if (element)
-            observer.current.observe(element);
-        },
-        [innerBreakpoints]
-      );
-      useEffect(() => {
-        shouldDisconnect.current = false;
-        return () => {
-          shouldDisconnect.current = true;
-          setTimeout(() => {
-            var _a2;
-            if (shouldDisconnect.current) {
-              (_a2 = observer.current) == null ? void 0 : _a2.disconnect();
-            }
-          }, 2e3);
-        };
-      }, [innerBreakpoints]);
-      return /* @__PURE__ */ jsx(Box, { ref, children: hasRendered ? /* @__PURE__ */ jsx(
-        Component,
-        __spreadProps$2(__spreadValues$6({}, props), {
-          breakPoint,
-          breakPointWidth: breakPoints[breakPoint],
-          containerWidth
-        })
-      ) : null });
-    },
-    { setBreakpoints }
-  );
-};
-
 const distinctors = {
   grid: [
     (_, state) => {
@@ -4699,23 +4839,23 @@ const operations = {
   recalculateIndexByResize
 };
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-const getInitialState = (props) => __spreadValues$5({
+const getInitialState = (props) => __spreadValues$9({
   focusedColumn: 1,
   focusedRow: 1,
   focusedId: 0
@@ -5019,21 +5159,21 @@ function useHandlers({
   };
 }
 
-var __defProp$4 = Object.defineProperty;
+var __defProp$8 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+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$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(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;
 };
@@ -5065,7 +5205,7 @@ const Tooltip = ({
     preferredOrientationY,
     preferredSize
   });
-  const sx = __spreadValues$4({
+  const sx = __spreadValues$8({
     position: "fixed"
   }, calculatedPosition);
   const { handleOnClick } = useHandlers({
@@ -5079,7 +5219,7 @@ const Tooltip = ({
   });
   return /* @__PURE__ */ jsx(
     Box,
-    __spreadProps$1(__spreadValues$4({
+    __spreadProps$1(__spreadValues$8({
       className: `tooltip__wrapper ${className != null ? className : ""}`
     }, getVariant(variant)), {
       sx,
@@ -5089,21 +5229,21 @@ const Tooltip = ({
   );
 };
 
-var __defProp$3 = Object.defineProperty;
+var __defProp$7 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-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) => {
+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$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]);
+    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;
 };
@@ -5128,7 +5268,7 @@ const [, tooltipsHandler, TooltipsProvider] = makeSingleImperativeComponent()({
     });
     if (!tooltip)
       return null;
-    return /* @__PURE__ */ jsx(Tooltip, __spreadValues$3({}, tooltip));
+    return /* @__PURE__ */ jsx(Tooltip, __spreadValues$7({}, tooltip));
   }
 });
 function useTooltip(tooltip) {
@@ -5139,7 +5279,7 @@ function useTooltip(tooltip) {
         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$3(__spreadValues$3({}, tooltip), otherProps), {
+        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);
@@ -5306,23 +5446,23 @@ const KeyHandler = ({
   );
 };
 
-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) => {
+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$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]);
+    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 styles = {
+const styles$1 = {
   "&, *": {
     textAlign: "center"
   },
@@ -5341,7 +5481,7 @@ const styles = {
     flexDirection: "column",
     gap: 3,
     "&:hover": (theme) => {
-      return __spreadValues$2({}, theme.palette.getOneState(
+      return __spreadValues$6({}, theme.palette.getOneState(
         { backgroundColor: "palette.background.paper" },
         "hover"
       ));
@@ -5358,7 +5498,7 @@ const styles = {
   },
   ".iconsList__keyHandler:focus": {
     outline: "none",
-    ".focused .iconsList__icon__wrapper": __spreadValues$2({}, focusOutline)
+    ".focused .iconsList__icon__wrapper": __spreadValues$6({}, focusOutline)
   }
 };
 
@@ -5412,19 +5552,19 @@ function useIconRendererContext() {
   return context;
 }
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
@@ -5451,30 +5591,31 @@ const Icon = (props) => {
             height: `${props.width - 4}px`
           },
           ".iconsList__icon__image": {
-            maxHeight: `${props.width - 8}px`
+            maxHeight: `${props.width - 32}px`,
+            maxWidth: `${props.width - 32}px`
           }
         }),
         [props.width]
       ),
       "aria-colindex": props.colIndex,
-      children: /* @__PURE__ */ jsx(Renderer, __spreadValues$1({}, props))
+      children: /* @__PURE__ */ jsx(Renderer, __spreadValues$5({}, props))
     }
   );
 };
 
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
     }
   return a;
 };
@@ -5486,7 +5627,7 @@ const IconWrapper = ({
 }) => {
   return icon === justToFillTheRow ? /* @__PURE__ */ jsx(Box, { sx: { width: `${iconWidth}px` }, className: "fill__the__row" }) : /* @__PURE__ */ jsx(
     Icon,
-    __spreadValues({
+    __spreadValues$4({
       rowIndex,
       colIndex,
       width: iconWidth
@@ -5558,7 +5699,7 @@ const IconsListNonForwarded = (props, ref) => {
               role: "grid",
               "aria-rowcount": rows,
               "aria-colcount": breakPoint,
-              children: Array(rows).fill(1).map((_, i) => {
+              children: arrayOrArray(rows).fill(1).map((_, i) => {
                 const icons = getRowIcons({
                   breakPoint,
                   i,
@@ -5598,7 +5739,7 @@ const IconsListNonForwarded = (props, ref) => {
       Component: makeStyledComponent(
         "IconsList",
         "layout.common.components.iconsList",
-        styles,
+        styles$1,
         styledComponent
       ),
       debounce: 50
@@ -5641,4 +5782,297 @@ function importComponent(path) {
   });
 }
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, ApiaFilter, AutoEllipsis, BaseButton, CalendarModal, Captcha, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, DateInput, DialogButtonBar, FieldErrorMessage, FieldLabel, IconButton, IconInput, IconsList, LinearLoader, Listbox, ListboxItem, LoaderSpinner, Modal, ModalContext, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLock, SimpleButton, TooltipsProvider, WaiTypeAhead, getConfirmButton, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, tooltipsHandler, useAccordionContext, useModal, useOtherTagButton, useTooltip };
+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 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"
+          }
+        }
+      }
+    },
+    ".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"
+      ));
+    }
+  }
+};
+
+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;
+};
+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;
+      }
+    };
+    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 });
+    };
+  }
+}
+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 __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(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$1({
+        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 = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(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({}, 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++}`
+          );
+        })
+      }
+    ) });
+  }
+);
+
+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 };