@apia/components 1.0.1 → 1.0.2

package/dist/index.js

@@ -1,13 +1,10 @@
-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 { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React 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 React__default, { createContext, useContext, useMemo, useEffect, useState, useRef, forwardRef, useCallback, useTransition, useDeferredValue, Children, memo, isValidElement, cloneElement, createElement, lazy } from 'react';
 import { shallowEqual } from '@apia/store';
+import { Box, getVariant, Button, Flex, spacing, Spinner, IconButton as IconButton$1, Image, Input, useBreakpointIndex, Close, responsive, Heading, useThemeUI, injectStyles, Select, focusOutline, makeStyledComponent, Label, Progress, Grid } from '@apia/theme';
+import { findScrollContainer, getSpecificParent, getLabel, useUpdateEffect, debugDispatcher, useCombinedRefs, focus, focusSelector, getFocusSelector, screenLocker, customEvents, isChild, getDateFormat, persistentStorage, disableChildrenFocus, enableChildrenFocus, EventEmitter, useDebouncedCallback, getIndex, addBoundary, noNaN, 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';
@@ -19,908 +16,11 @@ 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 = () => {
@@ -1116,7 +216,7 @@ const KeyHandler$1 = (props) => {
   }, [handler, ref]);
   const variant = handler.hooks.usePropsSelector((current) => current.variant);
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     __spreadValues$U(__spreadProps$J(__spreadValues$U({}, props), {
       ref: setRef
     }), variant ? getVariant(variant) : void 0)
@@ -1494,7 +594,7 @@ const IconButton = React.forwardRef(
       return typeof icon === "string" ? icons[icon] : icon;
     }, [icon]);
     return /* @__PURE__ */ jsx(
-      IconButton$2,
+      IconButton$1,
       __spreadProps$G(__spreadValues$R(__spreadProps$G(__spreadValues$R({
         id,
         ref,
@@ -1650,9 +750,9 @@ const SimpleButton = React.forwardRef(
         sx: __spreadValues$Q(__spreadValues$Q({}, simpleButton), buttonSx),
         children: [
           Icon && iconPosition === "left" && /* @__PURE__ */ jsx(Icon, { title: "", size: iconSize, color: iconColor }),
-          /* @__PURE__ */ jsx(Box$1, { as: "span", className: "button__content", sx: spanSx, children: children != null ? children : title }),
+          /* @__PURE__ */ jsx(Box, { 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$1, { className: "spinner", sx: loadingSx, children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, color: "inherit" }) })
+          isLoading && /* @__PURE__ */ jsx(Box, { className: "spinner", sx: loadingSx, children: /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, color: "inherit" }) })
         ]
       })
     );
@@ -2188,7 +1288,7 @@ const Overlay = React.forwardRef(
         nodeRef: innerRef,
         unmountOnExit: true,
         children: /* @__PURE__ */ jsx(
-          Box$1,
+          Box,
           __spreadProps$C(__spreadValues$N(__spreadProps$C(__spreadValues$N({
             className: `${className} overlay`,
             ref: assignRefs
@@ -2233,7 +1333,7 @@ const DialogHeader = ({
 }) => {
   const breakpointIndex = useBreakpointIndex();
   const Title = /* @__PURE__ */ jsx(
-    Heading$1,
+    Heading,
     {
       as: "h3",
       sx: {
@@ -2265,7 +1365,7 @@ const DialogHeader = ({
     [close, hideCloseButton]
   );
   const NavBarElement = NavBar && /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     {
       sx: {
         display: "flex",
@@ -2281,7 +1381,7 @@ const DialogHeader = ({
     }
   );
   return breakpointIndex > 3 ? /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     {
       className,
       sx: {
@@ -2301,7 +1401,7 @@ const DialogHeader = ({
       ]
     }
   ) : /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     {
       className,
       sx: {
@@ -2315,7 +1415,7 @@ const DialogHeader = ({
       },
       children: [
         /* @__PURE__ */ jsxs(
-          Box$1,
+          Box,
           {
             sx: {
               display: "flex",
@@ -2486,13 +1586,13 @@ const Modal = forwardRef(
                 unmountOnExit: true,
                 nodeRef,
                 children: /* @__PURE__ */ jsx(
-                  Box$1,
+                  Box,
                   __spreadProps$B(__spreadValues$M({
                     ref: nodeRef,
                     className: "modal__variantWrapper"
                   }, variant ? getVariant(variant) : {}), {
                     children: /* @__PURE__ */ jsxs(
-                      Box$1,
+                      Box,
                       {
                         id,
                         role: "dialog",
@@ -2521,7 +1621,7 @@ const Modal = forwardRef(
                             }
                           ),
                           /* @__PURE__ */ jsx(
-                            Box$1,
+                            Box,
                             {
                               className: "modal__content",
                               id: typeof children === "string" ? `${innerId}_Description` : void 0,
@@ -2719,7 +1819,7 @@ const DialogButtonBar = ({
   className
 }) => {
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     __spreadProps$y(__spreadValues$J({
       className: `${className != null ? className : ""} buttonsBar`
     }, getVariant("layout.common.modals.buttonsBar")), {
@@ -2766,14 +1866,14 @@ const Confirm = ({
 }) => {
   const { descriptionId } = useModalContext();
   return /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     __spreadProps$x(__spreadValues$I({}, getVariant(variant != null ? variant : "layout.common.modals.confirm")), {
       className: `${className != null ? className : ""} confirm`,
       children: [
-        /* @__PURE__ */ jsx(Box$1, { ref: contentRef, className: "confirm__content", id: descriptionId, children }),
+        /* @__PURE__ */ jsx(Box, { ref: contentRef, className: "confirm__content", id: descriptionId, children }),
         /* @__PURE__ */ jsxs(DialogButtonBar, { className: "confirm__buttonBar", children: [
           /* @__PURE__ */ jsx(
-            Box$1,
+            Box,
             {
               className: "confirm__customButtons",
               onClick: useCallback(
@@ -2786,9 +1886,9 @@ const Confirm = ({
               children: additionalButtons
             }
           ),
-          /* @__PURE__ */ jsxs(Box$1, { className: "confirm__defaultButtons", children: [
+          /* @__PURE__ */ jsxs(Box, { className: "confirm__defaultButtons", children: [
             /* @__PURE__ */ jsx(
-              Box$1,
+              Box,
               {
                 className: "confirm__customButtonsOnRight",
                 onClick: useCallback(
@@ -2835,13 +1935,13 @@ const Confirm = ({
 const LinearLoader = () => {
   const theme = useThemeUI();
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     {
       sx: {
         "*": { height: "6.5px !important" }
       },
       children: /* @__PURE__ */ jsx(
-        Box$1,
+        Box,
         {
           sx: {
             zIndex: "tooltip",
@@ -2910,7 +2010,7 @@ const ScreenLock = () => {
   }, [locks.linear, hasReleasedFirstTime]);
   if (!locks.linear && !locks.common && !locks.white && !locks.forced)
     return null;
-  return /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
     Overlay,
     {
       isOpen: true,
@@ -2923,7 +2023,7 @@ const ScreenLock = () => {
       transitionDuration: hasReleasedFirstTime ? void 0 : 0,
       children: [
         locks.linear ? /* @__PURE__ */ jsx(LinearLoader, {}) : /* @__PURE__ */ jsx(Spinner, { ref, sx: { "*": { color: "primary" } } }),
-        /* @__PURE__ */ jsx(Box$1, { tabIndex: 0, title: window.WAIT_A_SECOND })
+        /* @__PURE__ */ jsx(Box, { tabIndex: 0, title: window.WAIT_A_SECOND })
       ]
     }
   ) });
@@ -2939,7 +2039,7 @@ const FieldErrorMessage = ({ children, name }) => {
   }, [children, ref]);
   if (children) {
     return /* @__PURE__ */ jsx(
-      Box$1,
+      Box,
       {
         ref: setRef,
         role: "alert",
@@ -3038,7 +2138,7 @@ const IconInput = (_a) => {
     [onBlur]
   );
   return /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     __spreadProps$v(__spreadValues$G({}, getVariant("forms.iconInput")), {
       className: `${className != null ? className : ""} iconInput`,
       ref: parentRef,
@@ -3329,7 +2429,7 @@ const DateInput = React__default.forwardRef(
         })
       ),
       /* @__PURE__ */ jsxs(
-        Box$1,
+        Box,
         __spreadProps$u(__spreadValues$F({}, getVariant("forms.dateInput")), {
           className: `${className != null ? className : ""} dateInput`,
           id: `DateInput${id}`,
@@ -3611,7 +2711,7 @@ const FieldLabel = forwardRef(
     ]);
     var _a2, _b2;
     return /* @__PURE__ */ jsxs(
-      Box$1,
+      Box,
       __spreadProps$s(__spreadValues$D(__spreadProps$s(__spreadValues$D({
         as: as != null ? as : "label"
       }, props), {
@@ -3620,7 +2720,7 @@ const FieldLabel = forwardRef(
         "aria-label": (_b2 = props["aria-label"]) != null ? _b2 : label,
         ref,
         children: [
-          /* @__PURE__ */ jsxs(Box$1, { className: "fieldLabel__label", children: [
+          /* @__PURE__ */ jsxs(Box, { className: "fieldLabel__label", children: [
             requiredMarkPosition === "before" && /* @__PURE__ */ jsx(
               RequiredMark,
               {
@@ -3640,8 +2740,8 @@ const FieldLabel = forwardRef(
             ),
             !avoidSemicolon && ":"
           ] }),
-          /* @__PURE__ */ jsx(Box$1, { children }),
-          error && /* @__PURE__ */ jsx(Box$1, { className: "fieldLabel__error", children: error })
+          /* @__PURE__ */ jsx(Box, { children }),
+          error && /* @__PURE__ */ jsx(Box, { className: "fieldLabel__error", children: error })
         ]
       })
     );
@@ -3651,7 +2751,7 @@ FieldLabel.displayName = "FieldLabel";
 
 const Checkbox = (props) => {
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     {
       className: "accordion__item__button__check",
       onClick: (ev) => {
@@ -3788,7 +2888,7 @@ const AutoEllipsis = ({
     };
   }, []);
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     {
       ref,
       sx: {
@@ -3892,7 +2992,7 @@ const makeResponsiveComponent = ({
       }, [innerBreakpoints]);
       const deferBreakPoint = useDeferredValue(breakPoint);
       const deferContainerWidth = useDeferredValue(containerWidth);
-      return /* @__PURE__ */ jsx(Box$1, { ref, children: hasRendered ? /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(Box, { ref, children: hasRendered ? /* @__PURE__ */ jsx(
         Component,
         __spreadProps$r(__spreadValues$C({}, props), {
           breakPoint: deferBreakPoint,
@@ -3966,7 +3066,7 @@ const DefaultAccordionItemButton = (props) => {
       "aria-label": props.ariaLabel,
       tabIndex: props.tabIndex,
       children: [
-        /* @__PURE__ */ jsxs(Box$1, { className: "accordion__item__button__leftGroup", children: [
+        /* @__PURE__ */ jsxs(Box, { className: "accordion__item__button__leftGroup", children: [
           props.checked !== void 0 && /* @__PURE__ */ jsx(
             Checkbox,
             {
@@ -3975,9 +3075,9 @@ const DefaultAccordionItemButton = (props) => {
               onChange: setIsChecked
             }
           ),
-          /* @__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__ */ 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__ */ jsxs(Box$1, { className: "accordion__item__button__rightGroup", children: [
+        /* @__PURE__ */ jsxs(Box, { className: "accordion__item__button__rightGroup", children: [
           props.rightButtons,
           /* @__PURE__ */ jsx(
             Icon$1,
@@ -4034,7 +3134,7 @@ const AccordionItemContent = ({
     (current) => current.animationDuration
   );
   const id = handler.hooks.useItemId();
-  return /* @__PURE__ */ jsxs(Box$1, { className: "accordion__item", "data-id": id, children: [
+  return /* @__PURE__ */ jsxs(Box, { className: "accordion__item", "data-id": id, children: [
     button,
     /* @__PURE__ */ jsx(
       AnimateHeight,
@@ -4384,7 +3484,7 @@ const CollapsiblePanel = React__default.forwardRef(
       };
     }, [id, isCollapsed, onClose, onOpen, ref]);
     return /* @__PURE__ */ jsxs(
-      Box$1,
+      Box,
       __spreadProps$n(__spreadValues$x({
         className: `collapsiblePanel ${className != null ? className : ""}`
       }, getVariant("layout.common.components.collapsiblePanel")), {
@@ -4394,7 +3494,7 @@ const CollapsiblePanel = React__default.forwardRef(
           setRef(el);
         },
         children: [
-          /* @__PURE__ */ jsxs(Box$1, { className: "collapsiblePanel__label", children: [
+          /* @__PURE__ */ jsxs(Box, { className: "collapsiblePanel__label", children: [
             /* @__PURE__ */ jsxs(
               Button,
               __spreadProps$n(__spreadValues$x({}, getVariant("inherit")), {
@@ -4782,7 +3882,7 @@ const ListboxKeyhandler = ({ children, className }) => {
     [getState, id, onConfirmSelection]
   );
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     __spreadProps$j(__spreadValues$t({}, getVariant(variant)), {
       className,
       id,
@@ -4946,7 +4046,7 @@ const Combobox = (_a) => {
       }
     ),
     /* @__PURE__ */ jsx(
-      Box$1,
+      Box,
       __spreadProps$i(__spreadValues$s({
         as: "ul",
         id: `${id}__list__container`,
@@ -5554,7 +4654,7 @@ const NoMemoListbox = makeStyledComponent(
         className: `listbox ${props.showSearchbox ? "withSearchbox" : ""} ${(_a = props.className) != null ? _a : ""}`
       }, props.ulProps), {
         children: props.showSearchbox ? /* @__PURE__ */ jsx(Combobox, __spreadProps$g(__spreadValues$q({}, props.ulProps), { children: indexedChildren })) : /* @__PURE__ */ jsx(
-          Box$1,
+          Box,
           __spreadProps$g(__spreadValues$q({
             ref,
             as: "ul",
@@ -6805,7 +5905,7 @@ const Tooltip = ({
     onClose
   });
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     __spreadProps$9(__spreadValues$h({
       className: `tooltip__wrapper ${className != null ? className : ""}`
     }, getVariant(variant)), {
@@ -7129,7 +6229,7 @@ const KeyHandler = ({
     [onIconGetDetails, storeId]
   );
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     {
       className: "iconsList__keyHandler",
       tabIndex: 0,
@@ -7362,7 +6462,7 @@ const Icon = (props) => {
   });
   const Renderer = useIconRendererContext();
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     {
       ref,
       role: "gridcell",
@@ -7410,7 +6510,7 @@ const IconWrapper = ({
   rowIndex,
   colIndex
 }) => {
-  return icon === justToFillTheRow ? /* @__PURE__ */ jsx(Box$1, { sx: { width: `${iconWidth}px` }, className: "fill__the__row" }) : /* @__PURE__ */ jsx(
+  return icon === justToFillTheRow ? /* @__PURE__ */ jsx(Box, { sx: { width: `${iconWidth}px` }, className: "fill__the__row" }) : /* @__PURE__ */ jsx(
     Icon,
     __spreadValues$c({
       rowIndex,
@@ -7425,8 +6525,8 @@ const DefaultIconRendererNoMemo = (props) => {
     console.error({ props });
     throw new Error("The icon has no imageUrl nor icon defined");
   }
-  return /* @__PURE__ */ jsxs(Box$1, { title: props.label, className: "iconsList__icon__wrapper", children: [
-    /* @__PURE__ */ jsxs(Box$1, { className: "iconsList__icon__image__wrapper", children: [
+  return /* @__PURE__ */ jsxs(Box, { title: props.label, className: "iconsList__icon__wrapper", children: [
+    /* @__PURE__ */ jsxs(Box, { className: "iconsList__icon__image__wrapper", children: [
       props.imageUrl && /* @__PURE__ */ jsx(
         Image,
         {
@@ -7438,7 +6538,7 @@ const DefaultIconRendererNoMemo = (props) => {
       ),
       props.icon && /* @__PURE__ */ jsx(Icon$1, { icon: props.icon, title: props.ariaLabel })
     ] }),
-    /* @__PURE__ */ jsx(Box$1, { className: "iconsList__icon__label", children: props.label })
+    /* @__PURE__ */ jsx(Box, { className: "iconsList__icon__label", children: props.label })
   ] });
 };
 const DefaultIconRenderer = memo(DefaultIconRendererNoMemo);
@@ -7490,7 +6590,7 @@ const IconsListNonForwarded = (props, ref) => {
           onIconGetDetails: propsRef.current.onIconGetDetails,
           onIconKeyDown: propsRef.current.onIconKeyDown,
           storeId,
-          children: /* @__PURE__ */ jsx(Box$1, { ref: gridRef, children: Array(rows).fill(1).map((_, i) => {
+          children: /* @__PURE__ */ jsx(Box, { ref: gridRef, children: Array(rows).fill(1).map((_, i) => {
             const icons = getRowIcons({
               breakPoint,
               i,
@@ -7808,7 +6908,7 @@ const ToolbarItemButton = ({
       }, context.itemsState[id]);
   });
   return /* @__PURE__ */ jsx(
-    IconButton$1,
+    IconButton$2,
     {
       className: `toolbar__button ${innerIsToggled ? "toggled" : ""}`,
       size: iconSize != null ? iconSize : "Md",
@@ -7850,7 +6950,7 @@ const ToolbarItem = (props) => {
     return /* @__PURE__ */ jsx(ToolbarInput, { tool: props });
   }
   if (isSeparator(props)) {
-    return /* @__PURE__ */ jsx(Box$1, { className: "toolbar__separator", children: "\xA0" });
+    return /* @__PURE__ */ jsx(Box, { className: "toolbar__separator", children: "\xA0" });
   }
   return /* @__PURE__ */ jsx(ToolbarItemButton, __spreadValues$7({}, props));
 };
@@ -7883,7 +6983,7 @@ const Toolbar = makeStyledComponent(
     useMount(() => {
       getController == null ? void 0 : getController(controller);
     });
-    return /* @__PURE__ */ jsx(controller.Context, { children: /* @__PURE__ */ jsx(Box$1, __spreadProps$6(__spreadValues$6({ className: "toolbar" }, getVariant("layout.components.toolbar")), { children })) });
+    return /* @__PURE__ */ jsx(controller.Context, { children: /* @__PURE__ */ jsx(Box, __spreadProps$6(__spreadValues$6({ className: "toolbar" }, getVariant("layout.components.toolbar")), { children })) });
   },
   true
 );
@@ -8203,7 +7303,7 @@ const TabsList = ({
   const [isOpen, setIsOpen] = React__default.useState(false);
   const [targetId, setTargetId] = React__default.useState("");
   return /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     __spreadProps$3(__spreadValues$3({
       id: `tabsList-${id}`,
       className: "tabsList__wrapper",
@@ -8217,7 +7317,7 @@ const TabsList = ({
         )) ;
       }, []),
       children: [
-        /* @__PURE__ */ jsx(Box$1, { className: "tabsList__fixedTabs", children: fixedTabs.map((current) => /* @__PURE__ */ jsx(Item, { tabId: current.id }, current.id)) }),
+        /* @__PURE__ */ jsx(Box, { className: "tabsList__fixedTabs", children: fixedTabs.map((current) => /* @__PURE__ */ jsx(Item, { tabId: current.id }, current.id)) }),
         /* @__PURE__ */ jsx(
           ContextMenu,
           {
@@ -8228,7 +7328,7 @@ const TabsList = ({
           }
         ),
         /* @__PURE__ */ jsx(
-          Box$1,
+          Box,
           {
             className: `noScrollbar tabs__list ${orientation === "vertical" ? "vertical" : ""}`,
             onContextMenu: React__default.useCallback((e) => {
@@ -8658,14 +7758,14 @@ const TabsContent = (props) => {
     }
   });
   return /* @__PURE__ */ jsx(
-    Box$1,
+    Box,
     __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$1,
+          Box,
           {
             "aria-hidden": !current.isOpen,
             "aria-labelledby": `tab-${id}-${current.id}`,
@@ -8675,7 +7775,7 @@ const TabsContent = (props) => {
             role: "tabpanel",
             children: [
               /* @__PURE__ */ jsx(Render, { tab: current }),
-              current.isLoading && /* @__PURE__ */ jsx(Box$1, { className: "tabs__content__spinner__wrapper", children: /* @__PURE__ */ jsx(Spinner, {}) })
+              current.isLoading && /* @__PURE__ */ jsx(Box, { className: "tabs__content__spinner__wrapper", children: /* @__PURE__ */ jsx(Spinner, {}) })
             ]
           },
           current.id
@@ -8776,7 +7876,7 @@ const NonForwardedTabs = (_a, ref) => {
         [handler, id, isMultiple, onOpenTab, orientation]
       ),
       children: /* @__PURE__ */ jsx(
-        Box$1,
+        Box,
         __spreadProps(__spreadValues({}, props), {
           onKeyDown: React__default.useCallback(
             (ev) => {
@@ -8795,4 +7895,4 @@ const Tabs = React__default.forwardRef(
   NonForwardedTabs
 );
 
-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 };
+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 };