@apia/components 1.0.0 → 1.0.1

package/dist/index.js

@@ -1,10 +1,13 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Box as Box$1, Input, getVariant, makeStyledComponent, Button, Flex, spacing, Spinner, IconButton as IconButton$2, Image, useBreakpointIndex, Close, responsive, Heading as Heading$1, useThemeUI, injectStyles, Select, focusOutline, Label, Progress, Grid } from '@apia/theme';
 import * as React from 'react';
-import React__default, { createContext, useContext, useMemo, useEffect, useState, useRef, forwardRef, useCallback, useTransition, useDeferredValue, Children, memo, isValidElement, cloneElement, createElement, lazy } from 'react';
+import React__default, { useRef, useCallback, useState, useEffect, createContext, useContext, useMemo, forwardRef, useTransition, useDeferredValue, Children, memo, isValidElement, cloneElement, createElement, lazy } from 'react';
+import { ApiaApi, makeApiaUrl } from '@apia/api';
+import { useMount, useLatest, arrayOrArray, findScrollContainer, getSpecificParent, getLabel, useUpdateEffect, debugDispatcher, useCombinedRefs, focus, focusSelector, getFocusSelector, screenLocker, customEvents, isChild, getDateFormat, persistentStorage, disableChildrenFocus, enableChildrenFocus, EventEmitter, useDebouncedCallback, getIndex, addBoundary, noNaN, usePrevious, useUnmount, usePropsSelector, PropsStore } from '@apia/util';
+import { Box, Heading, Input as Input$1 } from 'theme-ui';
+import { IconButton as IconButton$1, ApiaUtil as ApiaUtil$1 } from '@apia/components';
+import { Icon as Icon$1, icons, isIconName } from '@apia/icons';
 import { shallowEqual } from '@apia/store';
-import { Box, getVariant, Button, Flex, spacing, Spinner, IconButton as IconButton$1, Image, Input, useBreakpointIndex, Close, responsive, Heading, useThemeUI, injectStyles, Select, focusOutline, makeStyledComponent, Label, Progress, Grid } from '@apia/theme';
-import { findScrollContainer, getSpecificParent, getLabel, useUpdateEffect, debugDispatcher, useCombinedRefs, focus, focusSelector, getFocusSelector, screenLocker, customEvents, isChild, getDateFormat, persistentStorage, disableChildrenFocus, enableChildrenFocus, EventEmitter, useDebouncedCallback, getIndex, addBoundary, noNaN, usePrevious, useMount, useUnmount, useLatest, usePropsSelector, PropsStore } from '@apia/util';
-import { icons, Icon as Icon$1, isIconName } from '@apia/icons';
 import { uniqueId as uniqueId$1, isFunction as isFunction$1, clone } from 'lodash-es';
 import dayjs from 'dayjs';
 import { isFunction, uniqueId as uniqueId$2 } from 'lodash';
@@ -16,11 +19,908 @@ 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';
 import { defaultNotifier, NotificationsList } from '@apia/notifications';
 import { ControlledMenu, MenuDivider, SubMenu, MenuItem, useMenuState } from '@szhsin/react-menu';
 import { shallowEqual as shallowEqual$1 } from 'react-redux';
 
+var __async$5 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const useGetChatData = () => {
+  const data = useRef(null);
+  const cbs = useRef([]);
+  const useData = useCallback(() => {
+    const [state, setState] = useState(data.current);
+    useMount(() => {
+      setState(data.current);
+      const cb = () => {
+        setState(data.current);
+      };
+      cbs.current.push(cb);
+      return () => {
+        cbs.current = cbs.current.filter((search) => search !== cb);
+      };
+    });
+    return state;
+  }, []);
+  const setData = useCallback((newData) => {
+    data.current = newData;
+    cbs.current.forEach((current) => current(data.current));
+  }, []);
+  const setDataRef = useLatest(setData);
+  const fetchData = useCallback(() => __async$5(void 0, null, function* () {
+    try {
+      const newData = yield ApiaApi.post(
+        makeApiaUrl({
+          ajaxUrl: "apia/server.chat",
+          action: "callback",
+          tabId: window.TAB_ID
+        }),
+        { postDataTreatement: "stringify" }
+      );
+      if (!(newData == null ? void 0 : newData.data))
+        return;
+      setDataRef.current({
+        status: newData.data.status,
+        users: arrayOrArray(newData.data.users.user),
+        groups: arrayOrArray(newData.data.groups.group),
+        conversations: arrayOrArray(newData.data.conversations.conversation)
+      });
+    } catch (error) {
+    }
+  }), [setDataRef]);
+  useMount(() => {
+    const interval = setInterval(() => __async$5(void 0, null, function* () {
+      yield fetchData();
+    }), 1e3);
+    return () => {
+      clearInterval(interval);
+    };
+  });
+  return { fetchData, useData };
+};
+
+var __async$4 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const chatRequestHandlers = {
+  closeChat: (conversationId) => __async$4(void 0, null, function* () {
+    const newData = yield ApiaApi.post(
+      makeApiaUrl({
+        ajaxUrl: "apia/server.chat",
+        action: "quitConversation",
+        tabId: window.TAB_ID,
+        conversationId
+      }),
+      { postDataTreatement: "stringify" }
+    );
+    return newData;
+  }),
+  sendMessage: (conversationId, message) => __async$4(void 0, null, function* () {
+    const newData = yield ApiaApi.post(
+      makeApiaUrl({
+        ajaxUrl: "apia/server.chat",
+        action: "sendMessage",
+        tabId: window.TAB_ID,
+        conversationId,
+        message
+      }),
+      { postDataTreatement: "stringify" }
+    );
+    return newData;
+  }),
+  openConversation: (userId, title) => __async$4(void 0, null, function* () {
+    const newData = yield ApiaApi.post(
+      makeApiaUrl({
+        ajaxUrl: "apia/server.chat",
+        action: "startConversation",
+        tabId: window.TAB_ID,
+        title,
+        userId
+      }),
+      { postDataTreatement: "stringify" }
+    );
+    return newData;
+  })
+};
+
+var __async$3 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const ChatRoomHeader = ({
+  conversation,
+  setShow
+}) => {
+  const { fetchData } = useChatContext();
+  return /* @__PURE__ */ jsxs(Box, { className: "chatRoom__header", onClick: () => setShow((prev) => !prev), children: [
+    /* @__PURE__ */ jsx(Heading, { as: "h6", children: conversation == null ? void 0 : conversation.title }),
+    /* @__PURE__ */ jsx(Box, { className: "chatRoom__header__rightButtons", children: /* @__PURE__ */ jsx(
+      IconButton$1,
+      {
+        className: "closeButton",
+        variant: "icon-outline-danger",
+        onClick: (e) => __async$3(void 0, null, function* () {
+          e.stopPropagation();
+          e.preventDefault();
+          if (!(conversation == null ? void 0 : conversation.id))
+            return;
+          yield chatRequestHandlers.closeChat(conversation.id);
+          fetchData();
+        }),
+        icon: "CloseThin",
+        size: "Md"
+      }
+    ) })
+  ] });
+};
+
+var __async$2 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const useChatRoomState = (conversation, messagesRef) => {
+  const { context } = useChatContext();
+  const [showChat, setShowChat] = useState(true);
+  const [message, setMessage] = useState("");
+  const [messageHistory, setMessageHistory] = useState([]);
+  const localMessagesRef = messagesRef;
+  const scrollToBottom = useCallback(() => {
+    if (localMessagesRef == null ? void 0 : localMessagesRef.current) {
+      localMessagesRef.current.scrollTop = localMessagesRef.current.scrollHeight;
+    }
+  }, [localMessagesRef]);
+  useMount(() => {
+    var _a;
+    const messageInput = document.querySelector(
+      `#id_${(_a = conversation == null ? void 0 : conversation.id) != null ? _a : ""}`
+    );
+    if (messageInput) {
+      messageInput == null ? void 0 : messageInput.focus();
+    }
+  });
+  useEffect(() => {
+    if (!(conversation == null ? void 0 : conversation.messages))
+      return;
+    setMessageHistory((prev) => {
+      var _a;
+      return [
+        ...prev,
+        ...arrayOrArray((_a = conversation == null ? void 0 : conversation.messages) == null ? void 0 : _a.message).filter((current) => {
+          return !current.fromMe;
+        })
+      ];
+    });
+  }, [conversation, conversation == null ? void 0 : conversation.messages, scrollToBottom]);
+  const chatData = context.useData();
+  const sendMessageHandler = (e) => __async$2(void 0, null, function* () {
+    var _a;
+    if (e.code === "Enter" && ((_a = e == null ? void 0 : e.currentTarget) == null ? void 0 : _a.value.trim())) {
+      setMessageHistory((prev) => {
+        var _a2, _b;
+        return [
+          ...prev,
+          {
+            content: message,
+            fromMe: true,
+            extraId: (_b = (_a2 = chatData == null ? void 0 : chatData.status) == null ? void 0 : _a2.id) != null ? _b : "1",
+            from: window.CURRENT_USER_LOGIN,
+            type: "text"
+          }
+        ];
+      });
+      if (!(conversation == null ? void 0 : conversation.id))
+        return;
+      yield chatRequestHandlers.sendMessage(conversation.id, message);
+      scrollToBottom();
+      setMessage("");
+    }
+  });
+  let initialized = false;
+  let from = "";
+  let showFrom = true;
+  const chatContent = messageHistory == null ? void 0 : messageHistory.map((current, idx) => {
+    if (!initialized) {
+      from = current.from;
+      showFrom = true;
+      initialized = true;
+    } else {
+      if (from !== current.from) {
+        from = current.from;
+        showFrom = true;
+      } else {
+        showFrom = false;
+      }
+    }
+    return current.content ? /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: current.fromMe ? "from__me" : "from__notMe",
+        children: [
+          /* @__PURE__ */ jsx(Box, { as: "span", className: "userContact", children: showFrom && current.from }),
+          /* @__PURE__ */ jsx(Box, { as: "span", className: "message", children: current.content })
+        ]
+      },
+      Math.random() + idx
+    ) : null;
+  });
+  return {
+    chatContent,
+    showChat,
+    message,
+    setShowChat,
+    setMessage,
+    sendMessageHandler
+  };
+};
+
+const ChatRoom = ({
+  position,
+  conversation
+}) => {
+  var _a;
+  const messagesRef = useRef(null);
+  const {
+    showChat,
+    chatContent,
+    message,
+    setMessage,
+    setShowChat,
+    sendMessageHandler
+  } = useChatRoomState(conversation, messagesRef);
+  return /* @__PURE__ */ jsxs(Box$1, { className: "chatRoom", sx: { right: position }, children: [
+    /* @__PURE__ */ jsx(ChatRoomHeader, { conversation, setShow: setShowChat }),
+    /* @__PURE__ */ jsxs(Box$1, { className: `chatRoom__content  ${showChat ? "show" : ""}`, children: [
+      /* @__PURE__ */ jsx(Box$1, { className: "chatRoom__messages", ref: messagesRef, children: chatContent }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `id_${(_a = conversation == null ? void 0 : conversation.id) != null ? _a : ""}`,
+          className: "messageInput",
+          type: "text",
+          value: message,
+          placeholder: "Escribe un mensaje",
+          onChange: (e) => setMessage(e.currentTarget.value),
+          onKeyDown: (e) => sendMessageHandler(e)
+        }
+      )
+    ] })
+  ] });
+};
+
+var __defProp$W = Object.defineProperty;
+var __defProps$L = Object.defineProperties;
+var __getOwnPropDescs$L = 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$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));
+const ChatRoomList = () => {
+  var _a, _b;
+  const { useData } = useChatContext();
+  return /* @__PURE__ */ jsx(
+    Box,
+    __spreadProps$L(__spreadValues$W({
+      className: "chatRoom__list"
+    }, getVariant("layout.common.components.apiaChat.chatRoom")), {
+      children: (_b = (_a = useData()) == null ? void 0 : _a.conversations) == null ? void 0 : _b.map((current, idx) => {
+        if (!current)
+          return;
+        return /* @__PURE__ */ jsx(
+          ChatRoom,
+          {
+            position: 320 * (idx + 1),
+            conversation: current
+          },
+          current == null ? void 0 : current.id
+        );
+      })
+    })
+  );
+};
+
+var __async$1 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const ChatUsersList = ({ users }) => {
+  const [showUsers, setShowUsers] = useState(true);
+  const { fetchData } = useChatContext();
+  return /* @__PURE__ */ jsxs(Box, { className: "chatManager__users", children: [
+    /* @__PURE__ */ jsxs(
+      Heading,
+      {
+        className: "chatManager__title",
+        as: "h6",
+        onClick: () => setShowUsers((prev) => !prev),
+        children: [
+          /* @__PURE__ */ jsx(Icon$1, { name: showUsers ? "ArrowDownThin" : "ArrowRightThin", title: "" }),
+          "Usuarios"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "ul",
+        className: `chatManager__users__list ${showUsers ? "show" : ""}`,
+        children: users == null ? void 0 : users.map((current) => {
+          return current && /* @__PURE__ */ jsx(
+            Box,
+            {
+              as: "li",
+              className: "chatManager__list__item",
+              onClick: () => __async$1(void 0, null, function* () {
+                var _a;
+                const res = yield chatRequestHandlers.openConversation(
+                  current.id,
+                  current.name
+                );
+                if (!((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.status))
+                  return;
+                fetchData();
+              }),
+              children: current == null ? void 0 : current.name
+            },
+            current == null ? void 0 : current.id
+          );
+        })
+      }
+    )
+  ] });
+};
+
+const ChatGroupsList = ({ groups }) => {
+  const [showGroups, setShowGroups] = useState(true);
+  return /* @__PURE__ */ jsxs(Box, { className: "chatManager__groups", children: [
+    /* @__PURE__ */ jsxs(
+      Heading,
+      {
+        as: "h6",
+        className: "chatManager__title",
+        onClick: () => setShowGroups((prev) => !prev),
+        children: [
+          /* @__PURE__ */ jsx(Icon$1, { name: showGroups ? "ArrowDownThin" : "ArrowRightThin", title: "" }),
+          "Grupos"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "ul",
+        className: `chatManager__groups__list ${showGroups ? "show" : ""}`,
+        children: groups == null ? void 0 : groups.map((current) => {
+          return /* @__PURE__ */ jsx(Box, { as: "li", className: "chatManager__list__item", children: current == null ? void 0 : current.name }, current.id);
+        })
+      }
+    )
+  ] });
+};
+
+const ChatSearchBar = ({
+  show,
+  setSearchValue
+}) => {
+  return /* @__PURE__ */ jsx(Box, { className: `chatManager__searchBar ${show ? "show" : ""}`, children: /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      placeholder: `${show ? "Buscar" : ""}`,
+      onChange: (e) => setSearchValue(e.target.value)
+    }
+  ) });
+};
+
+const ChatManagerHeader = ({
+  showSearchBar,
+  showManager,
+  setShowManager,
+  setShowSearchBar
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "chatManager__header",
+      onClick: () => {
+        setShowManager((prev) => !prev);
+        setShowSearchBar(false);
+      },
+      children: [
+        /* @__PURE__ */ jsx(Heading, { as: "h6", children: "Chat" }),
+        /* @__PURE__ */ jsxs(Box, { className: "chatManager__header__rightButtons", children: [
+          /* @__PURE__ */ jsx(
+            IconButton$1,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setShowSearchBar((prev) => !prev);
+                const searchBar = document.querySelector(
+                  ".chatManager__searchBar input"
+                );
+                if (searchBar && !showSearchBar) {
+                  searchBar == null ? void 0 : searchBar.focus();
+                }
+              },
+              icon: "Search",
+              size: "Md"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton$1,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                new ApiaUtil$1().menu.open({
+                  menuProps: {
+                    anchorRef: {
+                      current: e.target.closest(
+                        ".ellipsis"
+                      )
+                    }
+                  },
+                  items: [
+                    {
+                      children: /* @__PURE__ */ jsx(Fragment, { children: showManager ? "Minimizar" : "Maximizar" }),
+                      onClick: () => setShowManager((prev) => !prev),
+                      key: "1"
+                    },
+                    {
+                      children: /* @__PURE__ */ jsx(Fragment, { children: "Cerrar" }),
+                      onClick: () => console.log("hola"),
+                      key: "2"
+                    },
+                    {
+                      children: /* @__PURE__ */ jsx(Fragment, { children: "Desconectar" }),
+                      onClick: () => console.log("hola"),
+                      key: "3"
+                    }
+                  ]
+                });
+              },
+              icon: "Ellipsis",
+              size: "Md",
+              className: "ellipsis"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+const useSearchContacts = (initialUsers, initialGroups) => {
+  const [filteredUsers, setFilteredUsers] = useState(initialUsers);
+  const [filteredGroups, setFilteredGroups] = useState(initialGroups);
+  const [searchValue, setSearchValue] = useState("");
+  useEffect(() => {
+    if (searchValue.trim() === "") {
+      setFilteredUsers(initialUsers);
+      setFilteredGroups(initialGroups);
+    } else {
+      const filtered1 = initialUsers == null ? void 0 : initialUsers.filter(
+        (item) => item.name.toLowerCase().includes(searchValue.toLowerCase())
+      );
+      const filtered2 = initialGroups == null ? void 0 : initialGroups.filter(
+        (item) => item.name.toLowerCase().includes(searchValue.toLowerCase())
+      );
+      setFilteredUsers(filtered1);
+      setFilteredGroups(filtered2);
+    }
+  }, [searchValue, initialUsers, initialGroups]);
+  return {
+    filteredUsers,
+    filteredGroups,
+    setSearchValue
+  };
+};
+
+var __defProp$V = Object.defineProperty;
+var __defProps$K = Object.defineProperties;
+var __getOwnPropDescs$K = 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));
+const ChatManager = () => {
+  const {
+    context: { useData }
+  } = useChatContext();
+  const [showManager, setShowManager] = useState(true);
+  const [showSearchBar, setShowSearchBar] = useState(false);
+  const chatData = useData();
+  const { filteredGroups, filteredUsers, setSearchValue } = useSearchContacts(
+    chatData == null ? void 0 : chatData.users,
+    chatData == null ? void 0 : chatData.groups
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    __spreadProps$K(__spreadValues$V({
+      className: `chatManager__container `
+    }, getVariant("layout.common.components.apiaChat.chatManager")), {
+      children: [
+        /* @__PURE__ */ jsx(
+          ChatManagerHeader,
+          {
+            showManager,
+            showSearchBar,
+            setShowManager,
+            setShowSearchBar
+          }
+        ),
+        /* @__PURE__ */ jsx(ChatSearchBar, { show: showSearchBar, setSearchValue }),
+        /* @__PURE__ */ jsxs(Box, { className: `chatManager__content ${showManager ? "show" : ""}`, children: [
+          /* @__PURE__ */ jsx(ChatUsersList, { users: filteredUsers }),
+          /* @__PURE__ */ jsx(ChatGroupsList, { groups: filteredGroups }),
+          /* @__PURE__ */ jsx(Box, { className: "chatManager__requests" })
+        ] })
+      ]
+    })
+  );
+};
+
+const ChatContext = createContext(null);
+function useChatContext() {
+  const context = useContext(ChatContext);
+  if (!context)
+    throw new Error("There is no Chat Context");
+  return {
+    context,
+    useData: context.useData,
+    fetchData: context.fetchData
+  };
+}
+const ChatWrapper = () => {
+  const { useData, fetchData } = useGetChatData();
+  return /* @__PURE__ */ jsxs(ChatContext.Provider, { value: { useData, fetchData }, children: [
+    /* @__PURE__ */ jsx(ChatManager, {}),
+    /* @__PURE__ */ jsx(ChatRoomList, {})
+  ] });
+};
+
+const chatRoom = (theme) => {
+  return {
+    position: "absolute",
+    bottom: "0px",
+    display: "flex",
+    flexDirection: "row-reverse",
+    gap: "15px",
+    alignItems: "end",
+    ".chatRoom": {
+      width: "310px",
+      background: "palette.background.paper",
+      boxShadow: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
+      bottom: "-0px",
+      transition: "bottom 0.2s ease",
+      borderTopLeftRadius: "8px",
+      borderTopRightRadius: "8px",
+      position: "fixed",
+      zIndex: "menu",
+      "&.show": {
+        bottom: "0px"
+      }
+    },
+    ".chatRoom__header": {
+      height: "38px",
+      borderTopLeftRadius: "8px",
+      borderTopRightRadius: "8px",
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      background: "aliceblue",
+      alignItems: "center",
+      border: "1px solid",
+      borderColor: "palette.gray.750",
+      h6: {
+        borderTopLeftRadius: "6px",
+        borderTopRightRadius: "6px",
+        pl: "10px"
+      }
+    },
+    ".chatRoom__header__rightButtons": {
+      ".closeButton": {
+        background: "none",
+        border: "none",
+        height: "38px",
+        width: "38px",
+        borderTopRightRadius: "6px",
+        ":hover, :focus": {
+          background: "palette.error.dark"
+        }
+      }
+    },
+    ".chatRoom__content": {
+      height: "0px",
+      transition: "height 0.2s ease",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      border: "1px solid",
+      borderColor: "palette.gray.750",
+      borderTop: "none",
+      "&.show": { height: "330px" }
+    },
+    ".chatRoom__messages": {
+      display: "flex",
+      flexDirection: "column",
+      p: "10px",
+      gap: "10px",
+      overflow: "auto",
+      ".from__me": {
+        alignSelf: "end",
+        //cambiar
+        width: "50%",
+        borderRadius: "8px",
+        display: "flex",
+        flexDirection: "column",
+        ".message": {
+          background: "#1c6f97",
+          color: "palette.text.secondary",
+          borderRadius: "8px",
+          p: "10px"
+        }
+      },
+      ".from__notMe": {
+        alignSelf: "start",
+        //cambiar
+        width: "50%",
+        color: "palette.text.primary",
+        borderRadius: "8px",
+        display: "flex",
+        flexDirection: "column",
+        ".userContact": {
+          fontSize: "13px",
+          pl: "7px"
+        },
+        ".message": {
+          background: "aliceblue",
+          color: "palette.text.primary",
+          borderRadius: "8px",
+          p: "10px"
+        }
+      }
+    },
+    input: {
+      border: "1px solid",
+      borderColor: "palette.border.ghost"
+    }
+  };
+};
+
+const chatManager = (theme) => {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    width: "292px",
+    position: "fixed",
+    bottom: "0px",
+    right: "16px",
+    boxShadow: "rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px",
+    background: "palette.background.paper",
+    maxHeight: "438px",
+    zIndex: "menu",
+    ".chatManager__header": {
+      background: "palette.primary.main",
+      borderTopLeftRadius: "6px",
+      borderTopRightRadius: "6px",
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      height: "38px",
+      alignItems: "center",
+      h6: {
+        pl: "10px",
+        color: "palette.text.secondary"
+      }
+    },
+    ".chatManager__header__rightButtons": {
+      display: "flex",
+      flexDirection: "row",
+      itemAlign: "center",
+      height: "100%",
+      button: {
+        background: "none",
+        width: "38px",
+        height: "38px",
+        ":hover": {
+          background: theme.palette.lightenColor(theme.palette.primary.main, 5)
+        }
+      },
+      ".ellipsis": {
+        borderTopRightRadius: "6px",
+        svg: {
+          width: "25px",
+          height: "25px",
+          maxHeight: "25px",
+          maxWidth: "25px"
+        }
+      }
+    },
+    ".chatManager__searchBar": {
+      height: "0px",
+      transition: "height 0.2s ease",
+      "&.show": {
+        height: "35px"
+      },
+      input: {
+        height: "35px",
+        border: "none",
+        borderBottom: "1px solid",
+        borderColor: "palette.border.ghost"
+      }
+    },
+    ".chatManager__title": {
+      py: "10px",
+      pl: "10px",
+      border: "1px solid",
+      borderColor: "palette.gray.850",
+      //todo cambiar
+      background: "aliceblue",
+      display: "flex",
+      alignItems: "center"
+    },
+    ".chatManager__content": {
+      display: "flex",
+      flexDirection: "column",
+      overflow: "auto",
+      height: "0px",
+      transition: "height 0.2s ease",
+      "&.show": {
+        height: "400px"
+      }
+    },
+    ".chatManager__users": {
+      display: "flex",
+      flexDirection: "column",
+      ".chatManager__users__list": {
+        display: "none",
+        flexDirection: "column",
+        "&.show": {
+          display: "flex"
+        }
+      }
+    },
+    ".chatManager__groups": {
+      display: "flex",
+      flexDirection: "column",
+      ".chatManager__groups__list": {
+        display: "none",
+        flexDirection: "column",
+        "&.show": {
+          display: "flex"
+        }
+      }
+    },
+    ".chatManager__list__item": {
+      p: "5px 10px",
+      borderBottom: "1px solid",
+      borderColor: "palette.border.ghost",
+      ":hover": {
+        background: "palette.gray.900"
+      }
+    }
+  };
+};
+
+const styles$5 = {
+  chatManager,
+  chatRoom
+};
+
+const ApiaChat = makeStyledComponent(
+  "ApiaChat",
+  "layout.common.components.apiaChat",
+  styles$5,
+  () => /* @__PURE__ */ jsx(ChatWrapper, {})
+);
+
 const AccordionContext = createContext(null);
 const AccordionItemContext = createContext(null);
 const useAccordionContext = () => {
@@ -135,25 +1035,25 @@ class AccordionHandler {
   }
 }
 
-var __defProp$S = Object.defineProperty;
-var __defProps$I = Object.defineProperties;
-var __getOwnPropDescs$I = 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$U = Object.defineProperty;
+var __defProps$J = Object.defineProperties;
+var __getOwnPropDescs$J = 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$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$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$I = (a, b) => __defProps$I(a, __getOwnPropDescs$I(b));
+var __spreadProps$J = (a, b) => __defProps$J(a, __getOwnPropDescs$J(b));
 const KeyHandler$1 = (props) => {
   const [ref, setRef] = useState(null);
   const handler = useAccordionContext();
@@ -216,32 +1116,32 @@ const KeyHandler$1 = (props) => {
   }, [handler, ref]);
   const variant = handler.hooks.usePropsSelector((current) => current.variant);
   return /* @__PURE__ */ jsx(
-    Box,
-    __spreadValues$S(__spreadProps$I(__spreadValues$S({}, props), {
+    Box$1,
+    __spreadValues$U(__spreadProps$J(__spreadValues$U({}, props), {
       ref: setRef
     }), variant ? getVariant(variant) : void 0)
   );
 };
 
-var __defProp$R = Object.defineProperty;
-var __defProps$H = Object.defineProperties;
-var __getOwnPropDescs$H = 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$T = Object.defineProperty;
+var __defProps$I = Object.defineProperties;
+var __getOwnPropDescs$I = 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$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$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$H = (a, b) => __defProps$H(a, __getOwnPropDescs$H(b));
+var __spreadProps$I = (a, b) => __defProps$I(a, __getOwnPropDescs$I(b));
 function makeRowKey(rowIndex) {
   return `row_${typeof rowIndex === "number" ? rowIndex : rowIndex.rowIndex}`;
 }
@@ -279,7 +1179,7 @@ function getDistinctors(storeId) {
               focused: state.focusedRow === distinctions.rowIndex
             }
           },
-          etc: __spreadProps$H(__spreadValues$R({}, state.allowSelection ? {
+          etc: __spreadProps$I(__spreadValues$T({}, state.allowSelection ? {
             "aria-selected": state.selectedRows.includes(
               distinctions.rowIndex
             )
@@ -345,7 +1245,7 @@ const keysMakers$1 = {
 };
 function getInitialState$1(initialState) {
   var _a, _b, _c;
-  return __spreadProps$H(__spreadValues$R(__spreadValues$R({}, defaultState), initialState), {
+  return __spreadProps$I(__spreadValues$T(__spreadValues$T({}, 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);
@@ -409,33 +1309,33 @@ const AccordionItemButton = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
 
-var __defProp$Q = Object.defineProperty;
-var __defProps$G = Object.defineProperties;
-var __getOwnPropDescs$G = 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$S = Object.defineProperty;
+var __defProps$H = Object.defineProperties;
+var __getOwnPropDescs$H = 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$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$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$G = (a, b) => __defProps$G(a, __getOwnPropDescs$G(b));
+var __spreadProps$H = (a, b) => __defProps$H(a, __getOwnPropDescs$H(b));
 var __objRest$g = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$R.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$T.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$R)
-    for (var prop of __getOwnPropSymbols$R(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$R.call(source, prop))
+  if (source != null && __getOwnPropSymbols$T)
+    for (var prop of __getOwnPropSymbols$T(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$T.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -469,7 +1369,7 @@ const BaseButton = (_a) => {
   ]);
   return /* @__PURE__ */ jsx(
     Button,
-    __spreadProps$G(__spreadValues$Q(__spreadProps$G(__spreadValues$Q({
+    __spreadProps$H(__spreadValues$S(__spreadProps$H(__spreadValues$S({
       id,
       name,
       onClick
@@ -482,7 +1382,7 @@ const BaseButton = (_a) => {
         Flex,
         {
           as: "span",
-          sx: __spreadValues$Q({
+          sx: __spreadValues$S({
             color: "inherit",
             width: "100%",
             flexDirection: "row",
@@ -504,33 +1404,33 @@ const BaseButton = (_a) => {
   );
 };
 
-var __defProp$P = Object.defineProperty;
-var __defProps$F = Object.defineProperties;
-var __getOwnPropDescs$F = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$Q = Object.getOwnPropertySymbols;
-var __hasOwnProp$Q = Object.prototype.hasOwnProperty;
-var __propIsEnum$Q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$P = (obj, key, value) => key in obj ? __defProp$P(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$P = (a, b) => {
+var __defProp$R = Object.defineProperty;
+var __defProps$G = Object.defineProperties;
+var __getOwnPropDescs$G = 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$Q.call(b, prop))
-      __defNormalProp$P(a, prop, b[prop]);
-  if (__getOwnPropSymbols$Q)
-    for (var prop of __getOwnPropSymbols$Q(b)) {
-      if (__propIsEnum$Q.call(b, prop))
-        __defNormalProp$P(a, prop, b[prop]);
+    if (__hasOwnProp$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$F = (a, b) => __defProps$F(a, __getOwnPropDescs$F(b));
+var __spreadProps$G = (a, b) => __defProps$G(a, __getOwnPropDescs$G(b));
 var __objRest$f = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$Q.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$Q)
-    for (var prop of __getOwnPropSymbols$Q(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$Q.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;
@@ -594,8 +1494,8 @@ const IconButton = React.forwardRef(
       return typeof icon === "string" ? icons[icon] : icon;
     }, [icon]);
     return /* @__PURE__ */ jsx(
-      IconButton$1,
-      __spreadProps$F(__spreadValues$P(__spreadProps$F(__spreadValues$P({
+      IconButton$2,
+      __spreadProps$G(__spreadValues$R(__spreadProps$G(__spreadValues$R({
         id,
         ref,
         onClick: React.useCallback(
@@ -624,33 +1524,33 @@ const IconButton = React.forwardRef(
 );
 IconButton.displayName = "IconButton";
 
-var __defProp$O = Object.defineProperty;
-var __defProps$E = Object.defineProperties;
-var __getOwnPropDescs$E = 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$Q = Object.defineProperty;
+var __defProps$F = Object.defineProperties;
+var __getOwnPropDescs$F = 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$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$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$E = (a, b) => __defProps$E(a, __getOwnPropDescs$E(b));
+var __spreadProps$F = (a, b) => __defProps$F(a, __getOwnPropDescs$F(b));
 var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$P.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$P)
-    for (var prop of __getOwnPropSymbols$P(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$P.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;
@@ -736,7 +1636,7 @@ const SimpleButton = React.forwardRef(
     const Icon = React.useMemo(() => icon, [icon]);
     return /* @__PURE__ */ jsxs(
       Button,
-      __spreadProps$E(__spreadValues$O(__spreadValues$O({
+      __spreadProps$F(__spreadValues$Q(__spreadValues$Q({
         ref,
         id,
         name,
@@ -747,12 +1647,12 @@ const SimpleButton = React.forwardRef(
         disabled: isLoading != null ? isLoading : disabled,
         className
       }, getVariant(`${variant}${size !== "md" && size ? `-${size}` : ""}`)), buttonProps), {
-        sx: __spreadValues$O(__spreadValues$O({}, simpleButton), buttonSx),
+        sx: __spreadValues$Q(__spreadValues$Q({}, simpleButton), buttonSx),
         children: [
           Icon && iconPosition === "left" && /* @__PURE__ */ jsx(Icon, { title: "", size: iconSize, color: iconColor }),
-          /* @__PURE__ */ jsx(Box, { as: "span", className: "button__content", sx: spanSx, children: children != null ? children : title }),
+          /* @__PURE__ */ jsx(Box$1, { as: "span", className: "button__content", sx: spanSx, children: children != null ? children : title }),
           Icon && iconPosition === "right" && /* @__PURE__ */ jsx(Icon, { title: "", size: iconSize, color: iconColor }),
-          isLoading && /* @__PURE__ */ jsx(Box, { className: "spinner", sx: loadingSx, children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, color: "inherit" }) })
+          isLoading && /* @__PURE__ */ jsx(Box$1, { className: "spinner", sx: loadingSx, children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, color: "inherit" }) })
         ]
       })
     );
@@ -795,25 +1695,25 @@ function useOtherTagButton(props) {
   };
 }
 
-var __defProp$N = Object.defineProperty;
-var __defProps$D = Object.defineProperties;
-var __getOwnPropDescs$D = 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$P = Object.defineProperty;
+var __defProps$E = Object.defineProperties;
+var __getOwnPropDescs$E = 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$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$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$D = (a, b) => __defProps$D(a, __getOwnPropDescs$D(b));
+var __spreadProps$E = (a, b) => __defProps$E(a, __getOwnPropDescs$E(b));
 const Captcha = ({
   name,
   imageUrl,
@@ -827,7 +1727,7 @@ const Captcha = ({
   };
   return /* @__PURE__ */ jsxs(
     Flex,
-    __spreadProps$D(__spreadValues$N({
+    __spreadProps$E(__spreadValues$P({
       sx: {
         flexDirection: "column"
       },
@@ -872,33 +1772,33 @@ const Captcha = ({
   );
 };
 
-var __defProp$M = Object.defineProperty;
-var __defProps$C = Object.defineProperties;
-var __getOwnPropDescs$C = 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$O = Object.defineProperty;
+var __defProps$D = Object.defineProperties;
+var __getOwnPropDescs$D = 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$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$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$C = (a, b) => __defProps$C(a, __getOwnPropDescs$C(b));
+var __spreadProps$D = (a, b) => __defProps$D(a, __getOwnPropDescs$D(b));
 var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$N.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$N)
-    for (var prop of __getOwnPropSymbols$N(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$N.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;
@@ -960,7 +1860,7 @@ const Checkbox$1 = forwardRef(
       // eslint-disable-next-line react/forbid-elements
       /* @__PURE__ */ jsx(
         "input",
-        __spreadValues$M({
+        __spreadValues$O({
           type: "checkbox",
           onClick: props.onClick,
           "aria-checked": isChecked,
@@ -982,7 +1882,7 @@ const Checkbox$1 = forwardRef(
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Button,
-        __spreadProps$C(__spreadValues$M(__spreadProps$C(__spreadValues$M({}, props), {
+        __spreadProps$D(__spreadValues$O(__spreadProps$D(__spreadValues$O({}, props), {
           onClick: (ev) => {
             var _a3;
             if (readOnly) {
@@ -1221,33 +2121,33 @@ function useBodyScrollLock(isLocked) {
   }, [isLocked]);
 }
 
-var __defProp$L = Object.defineProperty;
-var __defProps$B = Object.defineProperties;
-var __getOwnPropDescs$B = 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$N = Object.defineProperty;
+var __defProps$C = Object.defineProperties;
+var __getOwnPropDescs$C = 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$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$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$B = (a, b) => __defProps$B(a, __getOwnPropDescs$B(b));
+var __spreadProps$C = (a, b) => __defProps$C(a, __getOwnPropDescs$C(b));
 var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$M.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$O.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$O)
+    for (var prop of __getOwnPropSymbols$O(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$O.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1288,8 +2188,8 @@ const Overlay = React.forwardRef(
         nodeRef: innerRef,
         unmountOnExit: true,
         children: /* @__PURE__ */ jsx(
-          Box,
-          __spreadProps$B(__spreadValues$L(__spreadProps$B(__spreadValues$L({
+          Box$1,
+          __spreadProps$C(__spreadValues$N(__spreadProps$C(__spreadValues$N({
             className: `${className} overlay`,
             ref: assignRefs
           }, props), {
@@ -1333,7 +2233,7 @@ const DialogHeader = ({
 }) => {
   const breakpointIndex = useBreakpointIndex();
   const Title = /* @__PURE__ */ jsx(
-    Heading,
+    Heading$1,
     {
       as: "h3",
       sx: {
@@ -1365,7 +2265,7 @@ const DialogHeader = ({
     [close, hideCloseButton]
   );
   const NavBarElement = NavBar && /* @__PURE__ */ jsx(
-    Box,
+    Box$1,
     {
       sx: {
         display: "flex",
@@ -1381,7 +2281,7 @@ const DialogHeader = ({
     }
   );
   return breakpointIndex > 3 ? /* @__PURE__ */ jsxs(
-    Box,
+    Box$1,
     {
       className,
       sx: {
@@ -1401,7 +2301,7 @@ const DialogHeader = ({
       ]
     }
   ) : /* @__PURE__ */ jsxs(
-    Box,
+    Box$1,
     {
       className,
       sx: {
@@ -1415,7 +2315,7 @@ const DialogHeader = ({
       },
       children: [
         /* @__PURE__ */ jsxs(
-          Box,
+          Box$1,
           {
             sx: {
               display: "flex",
@@ -1433,25 +2333,25 @@ const DialogHeader = ({
   );
 };
 
-var __defProp$K = Object.defineProperty;
-var __defProps$A = Object.defineProperties;
-var __getOwnPropDescs$A = 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$M = Object.defineProperty;
+var __defProps$B = Object.defineProperties;
+var __getOwnPropDescs$B = 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) => {
   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$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;
 };
-var __spreadProps$A = (a, b) => __defProps$A(a, __getOwnPropDescs$A(b));
+var __spreadProps$B = (a, b) => __defProps$B(a, __getOwnPropDescs$B(b));
 const Modal = forwardRef(
   ({
     animationDuration = 150,
@@ -1539,7 +2439,7 @@ const Modal = forwardRef(
                   getFocusSelector(":not(.modal__closeButton)")
                 );
               },
-              __spreadProps$A(__spreadValues$K({}, initialFocusConfiguration), { focusEvenWhenScreenLocked: true })
+              __spreadProps$B(__spreadValues$M({}, initialFocusConfiguration), { focusEvenWhenScreenLocked: true })
             );
           }
         }
@@ -1586,13 +2486,13 @@ const Modal = forwardRef(
                 unmountOnExit: true,
                 nodeRef,
                 children: /* @__PURE__ */ jsx(
-                  Box,
-                  __spreadProps$A(__spreadValues$K({
+                  Box$1,
+                  __spreadProps$B(__spreadValues$M({
                     ref: nodeRef,
                     className: "modal__variantWrapper"
                   }, variant ? getVariant(variant) : {}), {
                     children: /* @__PURE__ */ jsxs(
-                      Box,
+                      Box$1,
                       {
                         id,
                         role: "dialog",
@@ -1603,7 +2503,7 @@ const Modal = forwardRef(
                         className: "modal__main",
                         "data-scroll-lock-scrollable": true,
                         sx: React__default.useMemo(() => {
-                          return __spreadValues$K({
+                          return __spreadValues$M({
                             variant: `layout.common.modals.${size}`
                           }, maxWidth !== void 0 ? { maxWidth } : {});
                         }, [maxWidth, size]),
@@ -1621,7 +2521,7 @@ const Modal = forwardRef(
                             }
                           ),
                           /* @__PURE__ */ jsx(
-                            Box,
+                            Box$1,
                             {
                               className: "modal__content",
                               id: typeof children === "string" ? `${innerId}_Description` : void 0,
@@ -1643,33 +2543,33 @@ const Modal = forwardRef(
 );
 Modal.displayName = "Modal";
 
-var __defProp$J = Object.defineProperty;
-var __defProps$z = Object.defineProperties;
-var __getOwnPropDescs$z = 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$L = Object.defineProperty;
+var __defProps$A = Object.defineProperties;
+var __getOwnPropDescs$A = 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$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$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$z = (a, b) => __defProps$z(a, __getOwnPropDescs$z(b));
+var __spreadProps$A = (a, b) => __defProps$A(a, __getOwnPropDescs$A(b));
 var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$K.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$K)
-    for (var prop of __getOwnPropSymbols$K(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$K.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;
@@ -1679,7 +2579,7 @@ const CalendarModal = React__default.forwardRef(
     var _b = _a, { handleClickDay, onCancel, calValue, locale, size } = _b, props = __objRest$b(_b, ["handleClickDay", "onCancel", "calValue", "locale", "size"]);
     return /* @__PURE__ */ jsx(
       Modal,
-      __spreadProps$z(__spreadValues$J({
+      __spreadProps$A(__spreadValues$L({
         noHeader: true,
         size: size != null ? size : "cal",
         shouldCloseOnEsc: true,
@@ -1709,25 +2609,25 @@ const CalendarModal = React__default.forwardRef(
 );
 CalendarModal.displayName = "CalendarModal";
 
-var __defProp$I = Object.defineProperty;
-var __defProps$y = Object.defineProperties;
-var __getOwnPropDescs$y = 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$K = Object.defineProperty;
+var __defProps$z = Object.defineProperties;
+var __getOwnPropDescs$z = 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$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$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$y = (a, b) => __defProps$y(a, __getOwnPropDescs$y(b));
+var __spreadProps$z = (a, b) => __defProps$z(a, __getOwnPropDescs$z(b));
 function useModal(configuration) {
   var _a, _b, _c;
   const [isLoading, setIsLoading] = React__default.useState(false);
@@ -1738,7 +2638,7 @@ function useModal(configuration) {
     Portal,
     hide: hidePortal,
     show: showPortal
-  } = usePortal(__spreadProps$y(__spreadValues$I({}, configuration == null ? void 0 : configuration.portalArgs), {
+  } = usePortal(__spreadProps$z(__spreadValues$K({}, configuration == null ? void 0 : configuration.portalArgs), {
     containerId: "AppModals",
     autoRemoveContainer: false,
     escToHide: false,
@@ -1795,32 +2695,32 @@ function useModal(configuration) {
   };
 }
 
-var __defProp$H = Object.defineProperty;
-var __defProps$x = Object.defineProperties;
-var __getOwnPropDescs$x = Object.getOwnPropertyDescriptors;
-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$J = Object.defineProperty;
+var __defProps$y = Object.defineProperties;
+var __getOwnPropDescs$y = 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$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$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$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
+var __spreadProps$y = (a, b) => __defProps$y(a, __getOwnPropDescs$y(b));
 const DialogButtonBar = ({
   children,
   className
 }) => {
   return /* @__PURE__ */ jsx(
-    Box,
-    __spreadProps$x(__spreadValues$H({
+    Box$1,
+    __spreadProps$y(__spreadValues$J({
       className: `${className != null ? className : ""} buttonsBar`
     }, getVariant("layout.common.modals.buttonsBar")), {
       children
@@ -1828,25 +2728,25 @@ const DialogButtonBar = ({
   );
 };
 
-var __defProp$G = Object.defineProperty;
-var __defProps$w = Object.defineProperties;
-var __getOwnPropDescs$w = 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$I = Object.defineProperty;
+var __defProps$x = Object.defineProperties;
+var __getOwnPropDescs$x = 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$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$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$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
+var __spreadProps$x = (a, b) => __defProps$x(a, __getOwnPropDescs$x(b));
 const Confirm = ({
   children,
   additionalButtons,
@@ -1866,14 +2766,14 @@ const Confirm = ({
 }) => {
   const { descriptionId } = useModalContext();
   return /* @__PURE__ */ jsxs(
-    Box,
-    __spreadProps$w(__spreadValues$G({}, getVariant(variant != null ? variant : "layout.common.modals.confirm")), {
+    Box$1,
+    __spreadProps$x(__spreadValues$I({}, 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 }),
+        /* @__PURE__ */ jsx(Box$1, { ref: contentRef, className: "confirm__content", id: descriptionId, children }),
         /* @__PURE__ */ jsxs(DialogButtonBar, { className: "confirm__buttonBar", children: [
           /* @__PURE__ */ jsx(
-            Box,
+            Box$1,
             {
               className: "confirm__customButtons",
               onClick: useCallback(
@@ -1886,9 +2786,9 @@ const Confirm = ({
               children: additionalButtons
             }
           ),
-          /* @__PURE__ */ jsxs(Box, { className: "confirm__defaultButtons", children: [
+          /* @__PURE__ */ jsxs(Box$1, { className: "confirm__defaultButtons", children: [
             /* @__PURE__ */ jsx(
-              Box,
+              Box$1,
               {
                 className: "confirm__customButtonsOnRight",
                 onClick: useCallback(
@@ -1916,7 +2816,7 @@ const Confirm = ({
             ),
             onCancel && !hideCancelButton && /* @__PURE__ */ jsx(
               SimpleButton,
-              __spreadProps$w(__spreadValues$G({
+              __spreadProps$x(__spreadValues$I({
                 onClick: onCancel,
                 title: cancelText
               }, getVariant("secondary")), {
@@ -1935,13 +2835,13 @@ const Confirm = ({
 const LinearLoader = () => {
   const theme = useThemeUI();
   return /* @__PURE__ */ jsx(
-    Box,
+    Box$1,
     {
       sx: {
         "*": { height: "6.5px !important" }
       },
       children: /* @__PURE__ */ jsx(
-        Box,
+        Box$1,
         {
           sx: {
             zIndex: "tooltip",
@@ -1958,25 +2858,25 @@ const LinearLoader = () => {
   );
 };
 
-var __defProp$F = Object.defineProperty;
-var __defProps$v = Object.defineProperties;
-var __getOwnPropDescs$v = 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$H = Object.defineProperty;
+var __defProps$w = Object.defineProperties;
+var __getOwnPropDescs$w = Object.getOwnPropertyDescriptors;
+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$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$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$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
+var __spreadProps$w = (a, b) => __defProps$w(a, __getOwnPropDescs$w(b));
 const ScreenLock = () => {
   const ref = React__default.useRef(null);
   const [hasReleasedFirstTime, setHasReleasedFirstTime] = useState(false);
@@ -1989,11 +2889,11 @@ const ScreenLock = () => {
   React__default.useEffect(() => {
     const suscriptions = [
       screenLocker.on("lockStateChange", (ev) => {
-        setLocks((current) => __spreadProps$v(__spreadValues$F({}, current), { [ev.lockName]: ev.isLocked }));
+        setLocks((current) => __spreadProps$w(__spreadValues$H({}, current), { [ev.lockName]: ev.isLocked }));
         setHasReleasedFirstTime(ev.hasReleasedFirstTime);
       }),
       screenLocker.on("forcedStateChange", (ev) => {
-        setLocks((current) => __spreadProps$v(__spreadValues$F({}, current), { forced: ev.isForced }));
+        setLocks((current) => __spreadProps$w(__spreadValues$H({}, current), { forced: ev.isForced }));
         setHasReleasedFirstTime(ev.hasReleasedFirstTime);
       })
     ];
@@ -2010,7 +2910,7 @@ const ScreenLock = () => {
   }, [locks.linear, hasReleasedFirstTime]);
   if (!locks.linear && !locks.common && !locks.white && !locks.forced)
     return null;
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsxs(
     Overlay,
     {
       isOpen: true,
@@ -2023,7 +2923,7 @@ const ScreenLock = () => {
       transitionDuration: hasReleasedFirstTime ? void 0 : 0,
       children: [
         locks.linear ? /* @__PURE__ */ jsx(LinearLoader, {}) : /* @__PURE__ */ jsx(Spinner, { ref, sx: { "*": { color: "primary" } } }),
-        /* @__PURE__ */ jsx(Box, { tabIndex: 0, title: window.WAIT_A_SECOND })
+        /* @__PURE__ */ jsx(Box$1, { tabIndex: 0, title: window.WAIT_A_SECOND })
       ]
     }
   ) });
@@ -2039,7 +2939,7 @@ const FieldErrorMessage = ({ children, name }) => {
   }, [children, ref]);
   if (children) {
     return /* @__PURE__ */ jsx(
-      Box,
+      Box$1,
       {
         ref: setRef,
         role: "alert",
@@ -2056,33 +2956,33 @@ const FieldErrorMessage = ({ children, name }) => {
   return null;
 };
 
-var __defProp$E = Object.defineProperty;
-var __defProps$u = Object.defineProperties;
-var __getOwnPropDescs$u = 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$G = Object.defineProperty;
+var __defProps$v = Object.defineProperties;
+var __getOwnPropDescs$v = 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$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$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$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
+var __spreadProps$v = (a, b) => __defProps$v(a, __getOwnPropDescs$v(b));
 var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$F.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$F)
-    for (var prop of __getOwnPropSymbols$F(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$F.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;
@@ -2138,26 +3038,26 @@ const IconInput = (_a) => {
     [onBlur]
   );
   return /* @__PURE__ */ jsxs(
-    Box,
-    __spreadProps$u(__spreadValues$E({}, getVariant("forms.iconInput")), {
+    Box$1,
+    __spreadProps$v(__spreadValues$G({}, getVariant("forms.iconInput")), {
       className: `${className != null ? className : ""} iconInput`,
       ref: parentRef,
       onBlur: handleBlur,
       children: [
         /* @__PURE__ */ jsx(
           Input,
-          __spreadValues$E(__spreadValues$E({
+          __spreadValues$G(__spreadValues$G({
             disabled: isLoading != null ? isLoading : disabled,
             ref: assignInputRef,
             readOnly,
-            sx: __spreadValues$E({ variant: "forms.input" }, inputSx),
+            sx: __spreadValues$G({ variant: "forms.input" }, inputSx),
             "data-variant": "forms.input"
           }, rest), actualInputProps)
         ),
         additionalButtonsPosition === "before" && additionalButtons,
         !hideButton && /* @__PURE__ */ jsx(
           IconButton,
-          __spreadValues$E({
+          __spreadValues$G({
             onClick,
             icon,
             disabled: readOnly != null ? readOnly : disabled,
@@ -2186,33 +3086,33 @@ const getFieldTouchedStyles = (isTouched) => {
   };
 };
 
-var __defProp$D = Object.defineProperty;
-var __defProps$t = Object.defineProperties;
-var __getOwnPropDescs$t = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
-var __hasOwnProp$E = Object.prototype.hasOwnProperty;
-var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$D = (a, b) => {
+var __defProp$F = Object.defineProperty;
+var __defProps$u = Object.defineProperties;
+var __getOwnPropDescs$u = 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$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$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$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
+var __spreadProps$u = (a, b) => __defProps$u(a, __getOwnPropDescs$u(b));
 var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$E.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$G.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$G)
+    for (var prop of __getOwnPropSymbols$G(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$G.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2360,7 +3260,7 @@ const DateInput = React__default.forwardRef(
       [id, onBlur]
     );
     const inputProps = React__default.useMemo(
-      () => __spreadProps$t(__spreadValues$D({}, props), {
+      () => __spreadProps$u(__spreadValues$F({}, props), {
         className: "dateInput",
         value: renderLabel ? renderLabel(inputValue) : inputValue,
         ref,
@@ -2392,7 +3292,7 @@ const DateInput = React__default.forwardRef(
     const buttonProps = React__default.useMemo(
       () => {
         var _a3;
-        return __spreadValues$D({
+        return __spreadValues$F({
           disabled: (_a3 = props.disabled) != null ? _a3 : props.readOnly,
           "aria-label": window.LBL_PICK_DATE
         }, outerButtonProps);
@@ -2420,7 +3320,7 @@ const DateInput = React__default.forwardRef(
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         CalendarModal,
-        __spreadProps$t(__spreadValues$D({}, modalProps), {
+        __spreadProps$u(__spreadValues$F({}, modalProps), {
           calValue,
           locale: DEFAULT_LOCALE,
           handleClickDay: selectDate,
@@ -2429,8 +3329,8 @@ const DateInput = React__default.forwardRef(
         })
       ),
       /* @__PURE__ */ jsxs(
-        Box,
-        __spreadProps$t(__spreadValues$D({}, getVariant("forms.dateInput")), {
+        Box$1,
+        __spreadProps$u(__spreadValues$F({}, getVariant("forms.dateInput")), {
           className: `${className != null ? className : ""} dateInput`,
           id: `DateInput${id}`,
           ref: boxRef,
@@ -2463,33 +3363,33 @@ const DateInput = React__default.forwardRef(
 );
 DateInput.displayName = "DateInput";
 
-var __defProp$C = Object.defineProperty;
-var __defProps$s = Object.defineProperties;
-var __getOwnPropDescs$s = 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$E = Object.defineProperty;
+var __defProps$t = Object.defineProperties;
+var __getOwnPropDescs$t = 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$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$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$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
+var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
 var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$D.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$D)
-    for (var prop of __getOwnPropSymbols$D(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$D.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;
@@ -2609,7 +3509,7 @@ const NumberInput = React__default.forwardRef(
     }, [value]);
     return /* @__PURE__ */ jsx(
       Input,
-      __spreadProps$s(__spreadValues$C({}, props), {
+      __spreadProps$t(__spreadValues$E({}, props), {
         onFocus: React__default.useCallback(
           (ev) => {
             var _a2;
@@ -2649,33 +3549,33 @@ const RequiredMark = ({
   return isRequired && !isReadonly && !isFormReadonly ? /* @__PURE__ */ jsx("abbr", { className: "requiredMark", title: getLabel("msgReqField").text, children: "*" }) : null;
 };
 
-var __defProp$B = Object.defineProperty;
-var __defProps$r = Object.defineProperties;
-var __getOwnPropDescs$r = 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$D = Object.defineProperty;
+var __defProps$s = Object.defineProperties;
+var __getOwnPropDescs$s = 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$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$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$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
+var __spreadProps$s = (a, b) => __defProps$s(a, __getOwnPropDescs$s(b));
 var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$C.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$C)
-    for (var prop of __getOwnPropSymbols$C(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$C.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;
@@ -2711,8 +3611,8 @@ const FieldLabel = forwardRef(
     ]);
     var _a2, _b2;
     return /* @__PURE__ */ jsxs(
-      Box,
-      __spreadProps$r(__spreadValues$B(__spreadProps$r(__spreadValues$B({
+      Box$1,
+      __spreadProps$s(__spreadValues$D(__spreadProps$s(__spreadValues$D({
         as: as != null ? as : "label"
       }, props), {
         className: `fieldLabel ${(_a2 = props.className) != null ? _a2 : ""}`
@@ -2720,7 +3620,7 @@ const FieldLabel = forwardRef(
         "aria-label": (_b2 = props["aria-label"]) != null ? _b2 : label,
         ref,
         children: [
-          /* @__PURE__ */ jsxs(Box, { className: "fieldLabel__label", children: [
+          /* @__PURE__ */ jsxs(Box$1, { className: "fieldLabel__label", children: [
             requiredMarkPosition === "before" && /* @__PURE__ */ jsx(
               RequiredMark,
               {
@@ -2740,8 +3640,8 @@ const FieldLabel = forwardRef(
             ),
             !avoidSemicolon && ":"
           ] }),
-          /* @__PURE__ */ jsx(Box, { children }),
-          error && /* @__PURE__ */ jsx(Box, { className: "fieldLabel__error", children: error })
+          /* @__PURE__ */ jsx(Box$1, { children }),
+          error && /* @__PURE__ */ jsx(Box$1, { className: "fieldLabel__error", children: error })
         ]
       })
     );
@@ -2751,7 +3651,7 @@ FieldLabel.displayName = "FieldLabel";
 
 const Checkbox = (props) => {
   return /* @__PURE__ */ jsx(
-    Box,
+    Box$1,
     {
       className: "accordion__item__button__check",
       onClick: (ev) => {
@@ -2859,7 +3759,7 @@ const AutoEllipsis = ({
         const cloneBounding = clone.current.getBoundingClientRect();
         const difX = Math.abs(cloneBounding.width - bound.width);
         const difY = Math.abs(cloneBounding.height - bound.height);
-        if (difX < 50 && difY < 30) {
+        if (difX < 50 && difY < 10) {
           clone.current.remove();
         }
       }
@@ -2888,7 +3788,7 @@ const AutoEllipsis = ({
     };
   }, []);
   return /* @__PURE__ */ jsx(
-    Box,
+    Box$1,
     {
       ref,
       sx: {
@@ -2902,25 +3802,25 @@ const AutoEllipsis = ({
   );
 };
 
-var __defProp$A = Object.defineProperty;
-var __defProps$q = Object.defineProperties;
-var __getOwnPropDescs$q = 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$C = Object.defineProperty;
+var __defProps$r = Object.defineProperties;
+var __getOwnPropDescs$r = 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$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$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$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
+var __spreadProps$r = (a, b) => __defProps$r(a, __getOwnPropDescs$r(b));
 function calcBreakPoint(currentWidth, breakPoints) {
   let currentIndex = 0;
   while (currentIndex < breakPoints.length && currentWidth > breakPoints[currentIndex])
@@ -2992,9 +3892,9 @@ const makeResponsiveComponent = ({
       }, [innerBreakpoints]);
       const deferBreakPoint = useDeferredValue(breakPoint);
       const deferContainerWidth = useDeferredValue(containerWidth);
-      return /* @__PURE__ */ jsx(Box, { ref, children: hasRendered ? /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Box$1, { ref, children: hasRendered ? /* @__PURE__ */ jsx(
         Component,
-        __spreadProps$q(__spreadValues$A({}, props), {
+        __spreadProps$r(__spreadValues$C({}, props), {
           breakPoint: deferBreakPoint,
           breakPointWidth: breakPoints[deferBreakPoint],
           containerWidth: deferContainerWidth
@@ -3005,25 +3905,25 @@ const makeResponsiveComponent = ({
   );
 };
 
-var __defProp$z = Object.defineProperty;
-var __defProps$p = Object.defineProperties;
-var __getOwnPropDescs$p = 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$B = Object.defineProperty;
+var __defProps$q = Object.defineProperties;
+var __getOwnPropDescs$q = 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$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$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$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
+var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
 const DefaultAccordionItemButton = (props) => {
   var _a, _b, _c, _d, _e, _f;
   const handler = useAccordionContext();
@@ -3056,7 +3956,7 @@ const DefaultAccordionItemButton = (props) => {
   );
   return /* @__PURE__ */ jsxs(
     SimpleButton,
-    __spreadProps$p(__spreadValues$z({}, props.domButtonProps), {
+    __spreadProps$q(__spreadValues$B({}, props.domButtonProps), {
       className: `accordion__item__button ${(_a = props.className) != null ? _a : ""} ${(_c = (_b = props.domButtonProps) == null ? void 0 : _b.className) != null ? _c : ""}`,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
@@ -3066,7 +3966,7 @@ const DefaultAccordionItemButton = (props) => {
       "aria-label": props.ariaLabel,
       tabIndex: props.tabIndex,
       children: [
-        /* @__PURE__ */ jsxs(Box, { className: "accordion__item__button__leftGroup", children: [
+        /* @__PURE__ */ jsxs(Box$1, { className: "accordion__item__button__leftGroup", children: [
           props.checked !== void 0 && /* @__PURE__ */ jsx(
             Checkbox,
             {
@@ -3075,9 +3975,9 @@ const DefaultAccordionItemButton = (props) => {
               onChange: setIsChecked
             }
           ),
-          /* @__PURE__ */ jsx(Box, { as: "h3", className: "accordion__item__button__label", children: /* @__PURE__ */ jsx(AutoEllipsis, { overrideStyles: () => ({ textAlign: "left" }), children: (_e = (_d = props.label) != null ? _d : props.title) != null ? _e : props.ariaLabel }) })
+          /* @__PURE__ */ jsx(Box$1, { as: "h3", className: "accordion__item__button__label", children: /* @__PURE__ */ jsx(AutoEllipsis, { overrideStyles: () => ({ textAlign: "left" }), children: (_e = (_d = props.label) != null ? _d : props.title) != null ? _e : props.ariaLabel }) })
         ] }),
-        /* @__PURE__ */ jsxs(Box, { className: "accordion__item__button__rightGroup", children: [
+        /* @__PURE__ */ jsxs(Box$1, { className: "accordion__item__button__rightGroup", children: [
           props.rightButtons,
           /* @__PURE__ */ jsx(
             Icon$1,
@@ -3093,19 +3993,19 @@ const DefaultAccordionItemButton = (props) => {
   );
 };
 
-var __defProp$y = Object.defineProperty;
-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$A = Object.defineProperty;
+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$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$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;
 };
@@ -3125,7 +4025,7 @@ const AccordionItemContent = ({
     return true;
   });
   if (button === null && buttonProps)
-    button = /* @__PURE__ */ jsx(DefaultAccordionItemButton, __spreadValues$y({}, buttonProps));
+    button = /* @__PURE__ */ jsx(DefaultAccordionItemButton, __spreadValues$A({}, buttonProps));
   const handler = useAccordionContext();
   const isExpanded = handler.hooks.useItemStateSelector(
     (current) => current.isExpanded
@@ -3134,7 +4034,7 @@ const AccordionItemContent = ({
     (current) => current.animationDuration
   );
   const id = handler.hooks.useItemId();
-  return /* @__PURE__ */ jsxs(Box, { className: "accordion__item", "data-id": id, children: [
+  return /* @__PURE__ */ jsxs(Box$1, { className: "accordion__item", "data-id": id, children: [
     button,
     /* @__PURE__ */ jsx(
       AnimateHeight,
@@ -3149,33 +4049,33 @@ const AccordionItemContent = ({
   ] });
 };
 
-var __defProp$x = Object.defineProperty;
-var __defProps$o = Object.defineProperties;
-var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
-var __hasOwnProp$y = Object.prototype.hasOwnProperty;
-var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$x = (a, b) => {
+var __defProp$z = Object.defineProperty;
+var __defProps$p = Object.defineProperties;
+var __getOwnPropDescs$p = 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$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$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 __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
 var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$y.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$y)
-    for (var prop of __getOwnPropSymbols$y(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$y.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;
@@ -3195,7 +4095,7 @@ const AccordionItem = (_a) => {
     hasRegistered.current = true;
     context.registerItem(id, { isChecked: false, isExpanded: false });
   }
-  return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(AccordionItemContent, __spreadProps$o(__spreadValues$x({ id }, props), { children })) });
+  return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(AccordionItemContent, __spreadProps$p(__spreadValues$z({ id }, props), { children })) });
 };
 
 const NoMemoApiaDateFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) => {
@@ -3247,25 +4147,25 @@ const NoMemoApiaDateFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) =
 };
 const ApiaDateFilter = React.forwardRef(NoMemoApiaDateFilter);
 
-var __defProp$w = Object.defineProperty;
-var __defProps$n = Object.defineProperties;
-var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
-var __hasOwnProp$x = Object.prototype.hasOwnProperty;
-var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$w = (a, b) => {
+var __defProp$y = Object.defineProperty;
+var __defProps$o = Object.defineProperties;
+var __getOwnPropDescs$o = 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$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$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 __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(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(
@@ -3316,7 +4216,7 @@ const NoMemoApiaFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) => {
     if (filter.type === "apiaNumber") {
       return /* @__PURE__ */ jsx(
         NumberInput,
-        __spreadProps$n(__spreadValues$w({
+        __spreadProps$o(__spreadValues$y({
           "aria-readonly": filter.readonly,
           readOnly: filter.readonly,
           value,
@@ -3359,7 +4259,7 @@ const NoMemoApiaFilter = ({ filter, onChange, onBlur, onPressEnter }, ref) => {
       }
     ) : /* @__PURE__ */ jsx(
       Input,
-      __spreadProps$n(__spreadValues$w({
+      __spreadProps$o(__spreadValues$y({
         "aria-readonly": filter.readonly,
         readOnly: filter.readonly,
         value,
@@ -3390,25 +4290,25 @@ const ApiaFilter = React.memo(React.forwardRef(NoMemoApiaFilter));
 
 const styles$4 = {};
 
-var __defProp$v = Object.defineProperty;
-var __defProps$m = Object.defineProperties;
-var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
-var __hasOwnProp$w = Object.prototype.hasOwnProperty;
-var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$v = (a, b) => {
+var __defProp$x = Object.defineProperty;
+var __defProps$n = Object.defineProperties;
+var __getOwnPropDescs$n = 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$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$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$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
 injectStyles("layout.common.components.collapsiblePanel", styles$4);
 const CollapsiblePanel = React__default.forwardRef(
   ({
@@ -3484,8 +4384,8 @@ const CollapsiblePanel = React__default.forwardRef(
       };
     }, [id, isCollapsed, onClose, onOpen, ref]);
     return /* @__PURE__ */ jsxs(
-      Box,
-      __spreadProps$m(__spreadValues$v({
+      Box$1,
+      __spreadProps$n(__spreadValues$x({
         className: `collapsiblePanel ${className != null ? className : ""}`
       }, getVariant("layout.common.components.collapsiblePanel")), {
         ref: (el) => {
@@ -3494,10 +4394,10 @@ const CollapsiblePanel = React__default.forwardRef(
           setRef(el);
         },
         children: [
-          /* @__PURE__ */ jsxs(Box, { className: "collapsiblePanel__label", children: [
+          /* @__PURE__ */ jsxs(Box$1, { className: "collapsiblePanel__label", children: [
             /* @__PURE__ */ jsxs(
               Button,
-              __spreadProps$m(__spreadValues$v({}, getVariant("inherit")), {
+              __spreadProps$n(__spreadValues$x({}, getVariant("inherit")), {
                 "aria-expanded": !isCollapsed,
                 onClick: (ev) => callOnOpen(true, ev),
                 type: "button",
@@ -3529,33 +4429,33 @@ const CollapsiblePanel = React__default.forwardRef(
 );
 CollapsiblePanel.displayName = "CollapsiblePanel";
 
-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$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]);
+var __defProp$w = Object.defineProperty;
+var __defProps$m = Object.defineProperties;
+var __getOwnPropDescs$m = 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$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 __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
 var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$v.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$v)
-    for (var prop of __getOwnPropSymbols$v(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$v.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;
@@ -3567,7 +4467,7 @@ const AlertModal = ({ children, onClose, title }) => {
   }), { hide } = _a, modalProps = __objRest$5(_a, ["hide"]);
   return /* @__PURE__ */ jsx(
     Modal,
-    __spreadProps$l(__spreadValues$u({}, modalProps), {
+    __spreadProps$m(__spreadValues$w({}, modalProps), {
       sx: useMemo(
         () => ({
           ".modal__content .confirm__content": {
@@ -3593,33 +4493,33 @@ const AlertModal = ({ children, onClose, title }) => {
   );
 };
 
-var __defProp$t = Object.defineProperty;
-var __defProps$k = Object.defineProperties;
-var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
-var __hasOwnProp$u = Object.prototype.hasOwnProperty;
-var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$t = (a, b) => {
+var __defProp$v = Object.defineProperty;
+var __defProps$l = Object.defineProperties;
+var __getOwnPropDescs$l = 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$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$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$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
 var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$u.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$w.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$w)
+    for (var prop of __getOwnPropSymbols$w(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$w.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -3653,46 +4553,46 @@ const ConfirmModal = (_a) => {
   }, [hide]);
   return /* @__PURE__ */ jsx(
     Modal,
-    __spreadProps$k(__spreadValues$t({}, modalProps), {
+    __spreadProps$l(__spreadValues$v({}, modalProps), {
       initialFocusGetter: useCallback(
         (current) => current.querySelector(".confirm__confirmButton"),
         []
       ),
       title,
-      children: /* @__PURE__ */ jsx(Confirm, __spreadProps$k(__spreadValues$t({}, props), { onCancel: handleCancel, onConfirm: handleConfirm }))
+      children: /* @__PURE__ */ jsx(Confirm, __spreadProps$l(__spreadValues$v({}, props), { onCancel: handleCancel, onConfirm: handleConfirm }))
     })
   );
 };
 
 const ListboxContext = createContext({});
 
-var __defProp$s = Object.defineProperty;
-var __defProps$j = Object.defineProperties;
-var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
-var __hasOwnProp$t = Object.prototype.hasOwnProperty;
-var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$s = (a, b) => {
+var __defProp$u = Object.defineProperty;
+var __defProps$k = Object.defineProperties;
+var __getOwnPropDescs$k = 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$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$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$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
 var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$v.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$v)
+    for (var prop of __getOwnPropSymbols$v(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$v.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -3714,14 +4614,14 @@ const ListboxItem = memo(
       ((_a2 = domProps.className) == null ? void 0 : _a2.includes("separator")) && /* @__PURE__ */ jsx("li", { className: "separator" }),
       /* @__PURE__ */ jsx(
         "li",
-        __spreadProps$j(__spreadValues$s({}, domProps), {
+        __spreadProps$k(__spreadValues$u({}, 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$j(__spreadValues$s({}, ev), {
+              onDoubleClickNode == null ? void 0 : onDoubleClickNode(__spreadProps$k(__spreadValues$u({}, ev), {
                 target: ev.target.closest(
                   '[role="option"]'
                 )
@@ -3731,7 +4631,7 @@ const ListboxItem = memo(
           ),
           onMouseDown: useCallback(
             (ev) => {
-              onClickNode == null ? void 0 : onClickNode(__spreadProps$j(__spreadValues$s({}, ev), {
+              onClickNode == null ? void 0 : onClickNode(__spreadProps$k(__spreadValues$u({}, ev), {
                 target: ev.target.closest(
                   '[role="option"]'
                 )
@@ -3821,25 +4721,25 @@ shout_fn = function({ clear } = { clear: true }) {
   }
 };
 
-var __defProp$r = Object.defineProperty;
-var __defProps$i = Object.defineProperties;
-var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
-var __hasOwnProp$s = Object.prototype.hasOwnProperty;
-var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$r = (a, b) => {
+var __defProp$t = Object.defineProperty;
+var __defProps$j = Object.defineProperties;
+var __getOwnPropDescs$j = 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$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$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));
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
 const ListboxKeyhandler = ({ children, className }) => {
   const {
     listboxActions,
@@ -3882,8 +4782,8 @@ const ListboxKeyhandler = ({ children, className }) => {
     [getState, id, onConfirmSelection]
   );
   return /* @__PURE__ */ jsx(
-    Box,
-    __spreadProps$i(__spreadValues$r({}, getVariant(variant)), {
+    Box$1,
+    __spreadProps$j(__spreadValues$t({}, getVariant(variant)), {
       className,
       id,
       onKeyDown: useCallback(
@@ -3895,9 +4795,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$i(__spreadValues$r({}, ev), { target: cell, currentTarget: cell }));
+          onPressKeyOnNode == null ? void 0 : onPressKeyOnNode(__spreadProps$j(__spreadValues$t({}, ev), { target: cell, currentTarget: cell }));
           if (ev.code === "Enter") {
-            onPressEnterOnNode == null ? void 0 : onPressEnterOnNode(__spreadProps$i(__spreadValues$r({}, ev), { target: cell, currentTarget: cell }));
+            onPressEnterOnNode == null ? void 0 : onPressEnterOnNode(__spreadProps$j(__spreadValues$t({}, ev), { target: cell, currentTarget: cell }));
           }
           if (ev.isDefaultPrevented() || ev.isPropagationStopped())
             return;
@@ -3986,33 +4886,33 @@ const ListboxKeyhandler = ({ children, className }) => {
   );
 };
 
-var __defProp$q = Object.defineProperty;
-var __defProps$h = Object.defineProperties;
-var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
-var __hasOwnProp$r = Object.prototype.hasOwnProperty;
-var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$q = (a, b) => {
+var __defProp$s = Object.defineProperty;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = 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$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$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$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
 var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$r.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$r)
-    for (var prop of __getOwnPropSymbols$r(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$r.call(source, prop))
+  if (source != null && __getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -4046,8 +4946,8 @@ const Combobox = (_a) => {
       }
     ),
     /* @__PURE__ */ jsx(
-      Box,
-      __spreadProps$h(__spreadValues$q({
+      Box$1,
+      __spreadProps$i(__spreadValues$s({
         as: "ul",
         id: `${id}__list__container`,
         role: "listbox",
@@ -4064,25 +4964,25 @@ const Combobox = (_a) => {
   ] });
 };
 
-var __defProp$p = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
-var __hasOwnProp$q = Object.prototype.hasOwnProperty;
-var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$p = (a, b) => {
+var __defProp$r = Object.defineProperty;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = 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$q.call(b, prop))
-      __defNormalProp$p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b)) {
-      if (__propIsEnum$q.call(b, prop))
-        __defNormalProp$p(a, prop, b[prop]);
+    if (__hasOwnProp$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 __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
 const styles$3 = {
   "&:focus-within": {
     ".listbox__list": {
@@ -4114,7 +5014,7 @@ const styles$3 = {
     whiteSpace: "nowrap",
     textOverflow: "ellipsis",
     "&:hover": (theme) => {
-      return __spreadProps$g(__spreadValues$p({}, theme.palette.getOneState(
+      return __spreadProps$h(__spreadValues$r({}, theme.palette.getOneState(
         { backgroundColor: "palette.background.paper" },
         "hover"
       )), {
@@ -4124,17 +5024,17 @@ const styles$3 = {
   }
 };
 
-var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
-var __hasOwnProp$p = Object.prototype.hasOwnProperty;
-var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
+var __hasOwnProp$r = Object.prototype.hasOwnProperty;
+var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
 var __objRest$1 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$p.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$p)
-    for (var prop of __getOwnPropSymbols$p(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.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;
@@ -4600,25 +5500,25 @@ function useListboxContextValue(props) {
   return useMemo(() => props, [...Object.values(props)]);
 }
 
-var __defProp$o = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
-var __hasOwnProp$o = Object.prototype.hasOwnProperty;
-var __propIsEnum$o = 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$q = 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$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$o.call(b, prop))
-      __defNormalProp$o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(b)) {
-      if (__propIsEnum$o.call(b, prop))
-        __defNormalProp$o(a, prop, b[prop]);
+    if (__hasOwnProp$q.call(b, prop))
+      __defNormalProp$q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
+        __defNormalProp$q(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
 const NoMemoListbox = makeStyledComponent(
   "Listbox",
   "layout.components.listbox",
@@ -4650,12 +5550,12 @@ const NoMemoListbox = makeStyledComponent(
     });
     return /* @__PURE__ */ jsx(ListboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       ListboxKeyhandler,
-      __spreadProps$f(__spreadValues$o({
+      __spreadProps$g(__spreadValues$q({
         className: `listbox ${props.showSearchbox ? "withSearchbox" : ""} ${(_a = props.className) != null ? _a : ""}`
       }, props.ulProps), {
-        children: props.showSearchbox ? /* @__PURE__ */ jsx(Combobox, __spreadProps$f(__spreadValues$o({}, props.ulProps), { children: indexedChildren })) : /* @__PURE__ */ jsx(
-          Box,
-          __spreadProps$f(__spreadValues$o({
+        children: props.showSearchbox ? /* @__PURE__ */ jsx(Combobox, __spreadProps$g(__spreadValues$q({}, props.ulProps), { children: indexedChildren })) : /* @__PURE__ */ jsx(
+          Box$1,
+          __spreadProps$g(__spreadValues$q({
             ref,
             as: "ul",
             role: "listbox",
@@ -4674,25 +5574,25 @@ const NoMemoListbox = makeStyledComponent(
 );
 const Listbox = memo(NoMemoListbox);
 
-var __defProp$n = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = 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$p = 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$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$n.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
+    if (__hasOwnProp$p.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
 const ProgressBar = ({
   id,
   progress = 0,
@@ -4712,7 +5612,7 @@ const ProgressBar = ({
     ),
     /* @__PURE__ */ jsx(
       Progress,
-      __spreadProps$e(__spreadValues$n({
+      __spreadProps$f(__spreadValues$p({
         id,
         max: 100,
         value: progress
@@ -4726,25 +5626,25 @@ const ProgressBar = ({
   ] });
 };
 
-var __defProp$m = 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$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$o = 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$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$m.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$m(a, prop, b[prop]);
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
 const styles$2 = {
   height: "iconmd",
   width: "iconmd",
@@ -4757,7 +5657,7 @@ const LoaderSpinner = makeStyledComponent(
   ({ className }) => {
     return /* @__PURE__ */ jsx(
       Spinner,
-      __spreadProps$d(__spreadValues$m({}, getVariant("layout.common.components.loaderSpinner")), {
+      __spreadProps$e(__spreadValues$o({}, getVariant("layout.common.components.loaderSpinner")), {
         className
       })
     );
@@ -4944,23 +5844,23 @@ const operations = {
   recalculateIndexByResize
 };
 
-var __defProp$l = Object.defineProperty;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = 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$n = Object.defineProperty;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = 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$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
-const getInitialState = (props) => __spreadValues$l({
+const getInitialState = (props) => __spreadValues$n({
   focusedColumn: 1,
   focusedRow: 1,
   focusedId: 0
@@ -5012,19 +5912,19 @@ const useStore = ({
   ];
 };
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = 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$m = Object.defineProperty;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = 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$k.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
@@ -5037,28 +5937,28 @@ const OpenModal = (props) => {
   if (previousOpenProp.current !== props.isOpen && !props.isOpen) {
     modalProps.hide();
   }
-  return /* @__PURE__ */ jsx(Modal, __spreadValues$k(__spreadValues$k({}, props), modalProps));
+  return /* @__PURE__ */ jsx(Modal, __spreadValues$m(__spreadValues$m({}, props), modalProps));
 };
 
-var __defProp$j = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = 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$l = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = 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$j.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
 var __accessCheck$6 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
@@ -5107,7 +6007,7 @@ class ApiaUtilModals extends EventEmitter {
         const u1 = this.on("open", (ev) => {
           setModals((current) => [
             ...current,
-            __spreadProps$c(__spreadValues$j({}, ev), {
+            __spreadProps$d(__spreadValues$l({}, ev), {
               isOpen: true,
               onExited: () => {
                 var _a;
@@ -5121,13 +6021,13 @@ class ApiaUtilModals extends EventEmitter {
         });
         const u2 = this.on("closeAll", () => {
           setModals(
-            (current) => current.map((modal) => __spreadProps$c(__spreadValues$j({}, modal), { isOpen: false }))
+            (current) => current.map((modal) => __spreadProps$d(__spreadValues$l({}, modal), { isOpen: false }))
           );
         });
         const u3 = this.on("close", (modalId) => {
           setModals(
             (current) => current.map(
-              (modal) => modal.id === modalId ? __spreadProps$c(__spreadValues$j({}, modal), { isOpen: false }) : modal
+              (modal) => modal.id === modalId ? __spreadProps$d(__spreadValues$l({}, modal), { isOpen: false }) : modal
             )
           );
         });
@@ -5141,7 +6041,7 @@ class ApiaUtilModals extends EventEmitter {
     });
     this.Component = () => {
       const modals = __privateGet$5(this, _useModalsList).call(this);
-      return /* @__PURE__ */ jsx(Fragment, { children: modals.map((current) => /* @__PURE__ */ jsx(OpenModal, __spreadValues$j({}, current), current.id)) });
+      return /* @__PURE__ */ jsx(Fragment, { children: modals.map((current) => /* @__PURE__ */ jsx(OpenModal, __spreadValues$l({}, current), current.id)) });
     };
     document.addEventListener("openModal", (event) => {
       const cevent = event;
@@ -5151,32 +6051,32 @@ class ApiaUtilModals extends EventEmitter {
   open(props) {
     var _a;
     const id = (_a = props.id) != null ? _a : `modal_${__privateWrapper$2(this, _maxId$1)._++}`;
-    this.emit("open", __spreadProps$c(__spreadValues$j({}, props), { id }));
+    this.emit("open", __spreadProps$d(__spreadValues$l({}, props), { id }));
     return new ApiaUtilModalHandler(id, this);
   }
 }
 _maxId$1 = new WeakMap();
 _useModalsList = new WeakMap();
 
-var __defProp$i = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = 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$k = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = 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$i.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.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));
 class ApiaUtilNotifications {
   constructor() {
     this.close = (id) => {
@@ -5187,7 +6087,7 @@ class ApiaUtilNotifications {
     };
     this.notify = (notification) => {
       var _a;
-      defaultNotifier.notify(__spreadProps$b(__spreadValues$i({}, notification), {
+      defaultNotifier.notify(__spreadProps$c(__spreadValues$k({}, notification), {
         type: (_a = notification.type) != null ? _a : "warning"
       }));
     };
@@ -5284,25 +6184,25 @@ class ApiaUtilTabsController {
   }
 }
 
-var __defProp$h = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = 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$j = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = 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$h.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
 var __accessCheck$5 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
@@ -5361,10 +6261,10 @@ class ApiaUtilDialogs extends EventEmitter {
         []
       );
       return /* @__PURE__ */ jsxs(Fragment, { children: [
-        alertsDialogs.map((current) => /* @__PURE__ */ createElement(AlertModal, __spreadProps$a(__spreadValues$h({}, current), { key: current.id }))),
+        alertsDialogs.map((current) => /* @__PURE__ */ createElement(AlertModal, __spreadProps$b(__spreadValues$j({}, current), { key: current.id }))),
         confirmDialogs.map((current) => /* @__PURE__ */ createElement(
           ConfirmModal,
-          __spreadProps$a(__spreadValues$h({}, current), {
+          __spreadProps$b(__spreadValues$j({}, current), {
             key: current.id,
             onCancel: () => {
               var _a;
@@ -5383,7 +6283,7 @@ class ApiaUtilDialogs extends EventEmitter {
   }
   alert(props) {
     return new Promise((resolve) => {
-      this.emit("alert", __spreadProps$a(__spreadValues$h({}, props), {
+      this.emit("alert", __spreadProps$b(__spreadValues$j({}, props), {
         onClose: () => resolve(),
         id: `confirm${__privateWrapper$1(this, _maxIdAlert)._++}`
       }));
@@ -5391,7 +6291,7 @@ class ApiaUtilDialogs extends EventEmitter {
   }
   confirm(props) {
     return new Promise((resolve) => {
-      this.emit("confirm", __spreadProps$a(__spreadValues$h({}, props), {
+      this.emit("confirm", __spreadProps$b(__spreadValues$j({}, props), {
         id: `confirm${__privateWrapper$1(this, _maxIdConfirm)._++}`,
         onCancel: () => resolve(false),
         onConfirm: () => resolve(true)
@@ -5476,25 +6376,25 @@ class ApiaUtilTooltip {
   }
 }
 
-var __defProp$g = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = 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$i = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = 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$g.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 var __accessCheck$4 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
@@ -5531,7 +6431,7 @@ class AutomaticTooltip {
         __privateSet$2(this, _tooltipTimeout, setTimeout(() => {
           var _a2;
           if ((_a2 = __privateGet$3(this, _tooltip)) == null ? void 0 : _a2.children)
-            new ApiaUtil().tooltips.open(__spreadProps$9(__spreadValues$g({
+            new ApiaUtil().tooltips.open(__spreadProps$a(__spreadValues$i({
               closeOnMouseLeaveTooltip: true,
               closeOnEscape: true,
               closeOnScrollOut: true
@@ -5842,25 +6742,25 @@ function useHandlers({
   };
 }
 
-var __defProp$f = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = 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$h = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = 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$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
 const Tooltip = ({
   anchorPoint,
   attachToElement,
@@ -5891,7 +6791,7 @@ const Tooltip = ({
     preferredOrientationY,
     preferredSize
   });
-  const sx = __spreadValues$f({
+  const sx = __spreadValues$h({
     position: "fixed"
   }, calculatedPosition);
   const { handleOnClick } = useHandlers({
@@ -5905,8 +6805,8 @@ const Tooltip = ({
     onClose
   });
   return /* @__PURE__ */ jsx(
-    Box,
-    __spreadProps$8(__spreadValues$f({
+    Box$1,
+    __spreadProps$9(__spreadValues$h({
       className: `tooltip__wrapper ${className != null ? className : ""}`
     }, getVariant(variant)), {
       sx,
@@ -5916,25 +6816,25 @@ const Tooltip = ({
   );
 };
 
-var __defProp$e = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = 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$g = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = 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$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 var __accessCheck$3 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
@@ -6001,7 +6901,7 @@ class ApiaUtilTooltips extends EventEmitter {
       });
       return /* @__PURE__ */ jsx(Fragment, { children: tooltips.map((current) => /* @__PURE__ */ createElement(
         Tooltip,
-        __spreadProps$7(__spreadValues$e({}, current.props), {
+        __spreadProps$8(__spreadValues$g({}, current.props), {
           onClose: current.close.bind(current),
           key: current.id
         })
@@ -6019,25 +6919,25 @@ class ApiaUtilTooltips extends EventEmitter {
 }
 _shoutChangedList = new WeakMap();
 
-var __defProp$d = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __defProp$f = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = 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$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 var __accessCheck$2 = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
@@ -6103,14 +7003,14 @@ class ApiaUtilMenu extends EventEmitter {
         if (isSubmenu(current)) {
           return /* @__PURE__ */ jsx(SubMenu, { label: current.label, children: __privateGet$1(this, _RenderMenu).call(this, current) }, `submenu${__privateWrapper(this, _maxId)._++}`);
         }
-        return /* @__PURE__ */ createElement(MenuItem, __spreadProps$6(__spreadValues$d({}, current), { key: current.key }));
+        return /* @__PURE__ */ createElement(MenuItem, __spreadProps$7(__spreadValues$f({}, current), { key: current.key }));
       }) });
     });
     this.Component = () => {
       const [isOpen, close] = __privateGet$1(this, _hooks).useIsOpen();
       return /* @__PURE__ */ jsx(
         ControlledMenu,
-        __spreadProps$6(__spreadValues$d({}, __privateGet$1(this, _menuProps)), {
+        __spreadProps$7(__spreadValues$f({}, __privateGet$1(this, _menuProps)), {
           state: isOpen ? "open" : "closed",
           onClose: close,
           children: __privateGet$1(this, _RenderMenu).call(this, { label: "", items: __privateGet$1(this, _items) })
@@ -6229,7 +7129,7 @@ const KeyHandler = ({
     [onIconGetDetails, storeId]
   );
   return /* @__PURE__ */ jsx(
-    Box,
+    Box$1,
     {
       className: "iconsList__keyHandler",
       tabIndex: 0,
@@ -6329,19 +7229,19 @@ const KeyHandler = ({
   );
 };
 
-var __defProp$c = Object.defineProperty;
-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) => {
+var __defProp$e = Object.defineProperty;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = 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$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]);
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
     }
   return a;
 };
@@ -6364,7 +7264,7 @@ const styles$1 = {
     flexDirection: "column",
     gap: 3,
     "&:hover": (theme) => {
-      return __spreadValues$c({}, theme.palette.getOneState(
+      return __spreadValues$e({}, theme.palette.getOneState(
         { backgroundColor: "palette.background.paper" },
         "hover"
       ));
@@ -6381,7 +7281,7 @@ const styles$1 = {
   },
   ".iconsList__keyHandler:focus": {
     outline: "none",
-    ".focused .iconsList__icon__wrapper": __spreadValues$c({}, focusOutline)
+    ".focused .iconsList__icon__wrapper": __spreadValues$e({}, focusOutline)
   }
 };
 
@@ -6437,19 +7337,19 @@ function useIconRendererContext() {
   return context;
 }
 
-var __defProp$b = Object.defineProperty;
-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) => {
+var __defProp$d = Object.defineProperty;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = 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$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]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
@@ -6462,7 +7362,7 @@ const Icon = (props) => {
   });
   const Renderer = useIconRendererContext();
   return /* @__PURE__ */ jsx(
-    Box,
+    Box$1,
     {
       ref,
       role: "gridcell",
@@ -6483,24 +7383,24 @@ const Icon = (props) => {
         [props.width]
       ),
       "aria-colindex": props.colIndex,
-      children: /* @__PURE__ */ jsx(Renderer, __spreadValues$b({}, props))
+      children: /* @__PURE__ */ jsx(Renderer, __spreadValues$d({}, props))
     }
   );
 };
 
-var __defProp$a = Object.defineProperty;
-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) => {
+var __defProp$c = Object.defineProperty;
+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$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]);
+    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;
 };
@@ -6510,9 +7410,9 @@ const IconWrapper = ({
   rowIndex,
   colIndex
 }) => {
-  return icon === justToFillTheRow ? /* @__PURE__ */ jsx(Box, { sx: { width: `${iconWidth}px` }, className: "fill__the__row" }) : /* @__PURE__ */ jsx(
+  return icon === justToFillTheRow ? /* @__PURE__ */ jsx(Box$1, { sx: { width: `${iconWidth}px` }, className: "fill__the__row" }) : /* @__PURE__ */ jsx(
     Icon,
-    __spreadValues$a({
+    __spreadValues$c({
       rowIndex,
       colIndex,
       width: iconWidth
@@ -6525,8 +7425,8 @@ const DefaultIconRendererNoMemo = (props) => {
     console.error({ props });
     throw new Error("The icon has no imageUrl nor icon defined");
   }
-  return /* @__PURE__ */ jsxs(Box, { title: props.label, className: "iconsList__icon__wrapper", children: [
-    /* @__PURE__ */ jsxs(Box, { className: "iconsList__icon__image__wrapper", children: [
+  return /* @__PURE__ */ jsxs(Box$1, { title: props.label, className: "iconsList__icon__wrapper", children: [
+    /* @__PURE__ */ jsxs(Box$1, { className: "iconsList__icon__image__wrapper", children: [
       props.imageUrl && /* @__PURE__ */ jsx(
         Image,
         {
@@ -6538,7 +7438,7 @@ const DefaultIconRendererNoMemo = (props) => {
       ),
       props.icon && /* @__PURE__ */ jsx(Icon$1, { icon: props.icon, title: props.ariaLabel })
     ] }),
-    /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", children: props.label })
+    /* @__PURE__ */ jsx(Box$1, { className: "iconsList__icon__label", children: props.label })
   ] });
 };
 const DefaultIconRenderer = memo(DefaultIconRendererNoMemo);
@@ -6590,7 +7490,7 @@ const IconsListNonForwarded = (props, ref) => {
           onIconGetDetails: propsRef.current.onIconGetDetails,
           onIconKeyDown: propsRef.current.onIconKeyDown,
           storeId,
-          children: /* @__PURE__ */ jsx(Box, { ref: gridRef, children: Array(rows).fill(1).map((_, i) => {
+          children: /* @__PURE__ */ jsx(Box$1, { ref: gridRef, children: Array(rows).fill(1).map((_, i) => {
             const icons = getRowIcons({
               breakPoint,
               i,
@@ -6671,86 +7571,97 @@ function importComponent(path) {
   });
 }
 
-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) => {
+var __defProp$b = Object.defineProperty;
+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$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$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;
 };
 const styles = {
+  alignItems: "center",
   backgroundColor: "palette.background.default",
-  "ul.listbox__list": {
+  display: "flex",
+  gap: "2px",
+  py: "4px",
+  px: "8px",
+  "& > *": {
+    alignItems: "center",
+    borderRadius: "4px",
     display: "flex",
-    padding: "4px",
-    gap: "2px",
-    "[data-separator]": {
-      "&:focus, &.focused": {
-        outline: "none"
+    flexShrink: 0,
+    justifyContent: "center",
+    outline: "none !important",
+    p: 0
+  },
+  ".toolbar__button": {
+    border: "none",
+    borderRadius: "4px",
+    height: "32px",
+    width: "32px",
+    background: "transparent",
+    svg: {
+      path: {
+        fill: "palette.text.primary"
       }
     },
-    ".listbox__row": {
-      p: 0,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
-    ".iconButton": {
-      borderRadius: "4px",
-      height: "32px",
-      width: "32px",
-      background: "transparent",
+    "&:disabled": {
       svg: {
         path: {
-          fill: "palette.text.primary"
-        }
-      },
-      "&:disabled": {
-        svg: {
-          path: {
-            fill: "palette.border.section"
-          }
+          fill: "palette.border.section"
         }
       }
-    },
-    ".separator": {
-      borderLeft: "1px solid",
-      borderRight: "1px solid",
-      borderColor: "palette.gray.750",
-      height: "60%",
-      width: "3px"
-    },
-    ".toggled": (theme) => {
-      return __spreadValues$9({}, theme.palette.getOneState(
-        { backgroundColor: theme.palette.background.default },
-        "selected"
-      ));
     }
+  },
+  ".fieldLabel": {
+    display: "flex",
+    flexDirection: "row",
+    gap: 3,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  ".toolbar__input": {
+    borderRadius: "4px",
+    p: 3,
+    width: "80px"
+  },
+  ".toolbar__separator": {
+    borderLeft: "1px solid",
+    borderRight: "1px solid",
+    borderColor: "palette.gray.750",
+    height: "60%",
+    width: "3px"
+  },
+  ".toggled": (theme) => {
+    return __spreadValues$b({}, theme.palette.getOneState(
+      { backgroundColor: theme.palette.background.default },
+      "selected"
+    ));
   }
 };
 
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+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$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$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;
 };
@@ -6766,7 +7677,7 @@ class ToolbarController extends EventEmitter {
           this.itemsState[id] = initialState;
           this.on("updateItemState", (evId) => {
             if (evId === id) {
-              setState(__spreadValues$8({}, this.itemsState[id]));
+              setState(__spreadValues$a({}, this.itemsState[id]));
             }
           });
         }, []);
@@ -6774,7 +7685,7 @@ class ToolbarController extends EventEmitter {
       }
     };
     this.setItemState = (id, newState) => {
-      this.itemsState[id] = __spreadValues$8(__spreadValues$8({}, this.itemsState[id]), newState);
+      this.itemsState[id] = __spreadValues$a(__spreadValues$a({}, this.itemsState[id]), newState);
       this.emit("updateItemState", id);
     };
     this.Context = ({ children }) => {
@@ -6792,19 +7703,42 @@ const useToolbarControllerContext = () => {
   return context;
 };
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+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$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$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 ToolbarInput = ({ tool }) => {
+  const input = /* @__PURE__ */ jsx(Input, __spreadValues$9({ className: "toolbar__input" }, tool.inputProps));
+  if (tool.label)
+    return /* @__PURE__ */ jsx(FieldLabel, { label: tool.label, children: input });
+  return input;
+};
+
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$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;
 };
@@ -6868,21 +7802,22 @@ const ToolbarItemButton = ({
         setInnerIsToggled(!!context.itemsState[id].toggled);
       }
     } else
-      context.itemsState[id] = __spreadValues$7({
+      context.itemsState[id] = __spreadValues$8({
         disabled: isDisabled,
         toggled: innerIsToggled
       }, context.itemsState[id]);
   });
   return /* @__PURE__ */ jsx(
-    IconButton$2,
+    IconButton$1,
     {
-      className: `toolbarItem ${innerIsToggled ? "toggled" : ""}`,
+      className: `toolbar__button ${innerIsToggled ? "toggled" : ""}`,
       size: iconSize != null ? iconSize : "Md",
       icon,
       onClick: handleClick,
       "data-id": id,
       title,
-      disabled: isDisabled
+      disabled: isDisabled,
+      variant: "icon-outline"
     }
   );
 };
@@ -6890,8 +7825,39 @@ const ToolbarItemButton = ({
 function isSeparator(params) {
   return !!params.separator;
 }
+function isInput(params) {
+  return params.type === "input";
+}
+
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+const ToolbarItem = (props) => {
+  if (isInput(props)) {
+    return /* @__PURE__ */ jsx(ToolbarInput, { tool: props });
+  }
+  if (isSeparator(props)) {
+    return /* @__PURE__ */ jsx(Box$1, { className: "toolbar__separator", children: "\xA0" });
+  }
+  return /* @__PURE__ */ jsx(ToolbarItemButton, __spreadValues$7({}, props));
+};
 
 var __defProp$6 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
 var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
 var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
@@ -6907,59 +7873,19 @@ var __spreadValues$6 = (a, b) => {
     }
   return a;
 };
-const ToolbarItem = (props) => {
-  if (isSeparator(props)) {
-    return /* @__PURE__ */ jsx(Box, { className: "separator", children: "\xA0" });
-  }
-  return /* @__PURE__ */ jsx(ToolbarItemButton, __spreadValues$6({}, props));
-};
-
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 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.");
-          const { id, title } = props;
-          return /* @__PURE__ */ jsx(
-            ListboxItem,
-            {
-              label: title,
-              "data-separator": id ? void 0 : "true",
-              children: current
-            },
-            id != null ? id : `separator${separator++}`
-          );
-        })
-      }
-    ) });
-  }
+    return /* @__PURE__ */ jsx(controller.Context, { children: /* @__PURE__ */ jsx(Box$1, __spreadProps$6(__spreadValues$6({ className: "toolbar" }, getVariant("layout.components.toolbar")), { children })) });
+  },
+  true
 );
 
 const TabsContext = React__default.createContext(
@@ -7277,7 +8203,7 @@ const TabsList = ({
   const [isOpen, setIsOpen] = React__default.useState(false);
   const [targetId, setTargetId] = React__default.useState("");
   return /* @__PURE__ */ jsxs(
-    Box,
+    Box$1,
     __spreadProps$3(__spreadValues$3({
       id: `tabsList-${id}`,
       className: "tabsList__wrapper",
@@ -7291,7 +8217,7 @@ const TabsList = ({
         )) ;
       }, []),
       children: [
-        /* @__PURE__ */ jsx(Box, { className: "tabsList__fixedTabs", children: fixedTabs.map((current) => /* @__PURE__ */ jsx(Item, { tabId: current.id }, current.id)) }),
+        /* @__PURE__ */ jsx(Box$1, { className: "tabsList__fixedTabs", children: fixedTabs.map((current) => /* @__PURE__ */ jsx(Item, { tabId: current.id }, current.id)) }),
         /* @__PURE__ */ jsx(
           ContextMenu,
           {
@@ -7302,7 +8228,7 @@ const TabsList = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          Box,
+          Box$1,
           {
             className: `noScrollbar tabs__list ${orientation === "vertical" ? "vertical" : ""}`,
             onContextMenu: React__default.useCallback((e) => {
@@ -7732,14 +8658,14 @@ const TabsContent = (props) => {
     }
   });
   return /* @__PURE__ */ jsx(
-    Box,
+    Box$1,
     __spreadProps$1(__spreadValues$1(__spreadValues$1({
       className: "tabs__content__wrapper"
     }, getVariant("layout.common.tabs.primary.content")), props), {
       children: tabs == null ? void 0 : tabs.map((current) => {
         const Render = current.content;
         return /* @__PURE__ */ jsxs(
-          Box,
+          Box$1,
           {
             "aria-hidden": !current.isOpen,
             "aria-labelledby": `tab-${id}-${current.id}`,
@@ -7749,7 +8675,7 @@ const TabsContent = (props) => {
             role: "tabpanel",
             children: [
               /* @__PURE__ */ jsx(Render, { tab: current }),
-              current.isLoading && /* @__PURE__ */ jsx(Box, { className: "tabs__content__spinner__wrapper", children: /* @__PURE__ */ jsx(Spinner, {}) })
+              current.isLoading && /* @__PURE__ */ jsx(Box$1, { className: "tabs__content__spinner__wrapper", children: /* @__PURE__ */ jsx(Spinner, {}) })
             ]
           },
           current.id
@@ -7850,7 +8776,7 @@ const NonForwardedTabs = (_a, ref) => {
         [handler, id, isMultiple, onOpenTab, orientation]
       ),
       children: /* @__PURE__ */ jsx(
-        Box,
+        Box$1,
         __spreadProps(__spreadValues({}, props), {
           onKeyDown: React__default.useCallback(
             (ev) => {
@@ -7869,4 +8795,4 @@ const Tabs = React__default.forwardRef(
   NonForwardedTabs
 );
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, BaseButton, CalendarModal, Captcha, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, DateInput, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, IconButton, IconInput, IconsList, LinearLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLock, SimpleButton, Tabs, TabsContent, TabsController, TabsList, Toolbar, ToolbarController, ToolbarItem, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton };
+export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaChat, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, BaseButton, CalendarModal, Captcha, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, DateInput, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, IconButton, IconInput, IconsList, LinearLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLock, SimpleButton, Tabs, TabsContent, TabsController, TabsList, Toolbar, ToolbarController, ToolbarItem, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton };