@rpg-engine/long-bow 0.8.122 → 0.8.124

package/dist/long-bow.esm.js

@@ -30803,6 +30803,78 @@ var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1wuddg2-1"
 })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
 
+var UI_BREAKPOINT_MOBILE = '950px';
+var UI_BREAKPOINT_SMALL_LAPTOP = '1400px';
+
+var InternalTabs = function InternalTabs(_ref) {
+  var _tabs$, _tabs$find;
+  var tabs = _ref.tabs,
+    _ref$activeColor = _ref.activeColor,
+    activeColor = _ref$activeColor === void 0 ? '#fef08a' : _ref$activeColor,
+    _ref$activeTextColor = _ref.activeTextColor,
+    activeTextColor = _ref$activeTextColor === void 0 ? '#000000' : _ref$activeTextColor,
+    _ref$inactiveColor = _ref.inactiveColor,
+    inactiveColor = _ref$inactiveColor === void 0 ? '#6b7280' : _ref$inactiveColor,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? '#f59e0b' : _ref$borderColor,
+    _ref$hoverColor = _ref.hoverColor,
+    hoverColor = _ref$hoverColor === void 0 ? '#fef3c7' : _ref$hoverColor,
+    onTabChange = _ref.onTabChange,
+    externalActiveTab = _ref.activeTab;
+  var _useState = useState((_tabs$ = tabs[0]) == null ? void 0 : _tabs$.id),
+    internalActiveTab = _useState[0],
+    setInternalActiveTab = _useState[1];
+  var activeTabId = externalActiveTab != null ? externalActiveTab : internalActiveTab;
+  var handleTabClick = function handleTabClick(tabId) {
+    setInternalActiveTab(tabId);
+    onTabChange == null ? void 0 : onTabChange(tabId);
+  };
+  return React.createElement(TableWrapper, null, React.createElement(TabHeader, {
+    borderColor: borderColor
+  }, tabs.map(function (tab) {
+    return React.createElement(TabButton, {
+      key: tab.id,
+      active: activeTabId === tab.id,
+      activeColor: activeColor,
+      activeTextColor: activeTextColor,
+      inactiveColor: inactiveColor,
+      borderColor: borderColor,
+      hoverColor: hoverColor,
+      onClick: function onClick() {
+        return handleTabClick(tab.id);
+      }
+    }, tab.title);
+  })), React.createElement(ContentWrapper, null, (_tabs$find = tabs.find(function (tab) {
+    return tab.id === activeTabId;
+  })) == null ? void 0 : _tabs$find.content));
+};
+var TableWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InternalTabs__TableWrapper",
+  componentId: "sc-ldufv0-0"
+})(["width:100%;"]);
+var TabHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InternalTabs__TabHeader",
+  componentId: "sc-ldufv0-1"
+})(["display:flex;border-bottom:1px solid ", ";"], function (props) {
+  return props.borderColor;
+});
+var TabButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "InternalTabs__TabButton",
+  componentId: "sc-ldufv0-2"
+})(["flex:1;padding:0.25rem 0.5rem;font-size:0.75rem;font-weight:500;border-right:1px solid ", ";background-color:", ";color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;@media (min-width:480px){padding:0.375rem 0.75rem;font-size:0.8125rem;}@media (min-width:", "){padding:0.5rem 1rem;font-size:0.875rem;}&:last-child{border-right:none;}&:hover{background-color:", ";}"], function (props) {
+  return props.borderColor;
+}, function (props) {
+  return props.active ? props.activeColor : 'transparent';
+}, function (props) {
+  return props.active ? props.activeTextColor : props.inactiveColor;
+}, UI_BREAKPOINT_MOBILE, function (props) {
+  return props.active ? props.activeColor : props.hoverColor;
+});
+var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InternalTabs__ContentWrapper",
+  componentId: "sc-ldufv0-3"
+})(["width:100%;"]);
+
 var Table = /*#__PURE__*/styled.table.withConfig({
   displayName: "Table",
   componentId: "sc-1c24pcj-0"
@@ -30831,18 +30903,33 @@ var UserActionLink = /*#__PURE__*/styled.span.withConfig({
   return color;
 });
 
-var SearchFriend = function SearchFriend(_ref) {
-  var searchedCharacters = _ref.searchedCharacters,
+var FriendList = function FriendList(_ref) {
+  var friends = _ref.friends,
     friendRequests = _ref.friendRequests,
-    onBlur = _ref.onBlur,
+    searchedCharacters = _ref.searchedCharacters,
     onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
     onSearch = _ref.onSearch,
-    onSendFriendRequest = _ref.onSendFriendRequest,
     onAcceptRequest = _ref.onAcceptRequest,
-    onRejectRequest = _ref.onRejectRequest;
+    onSendFriendRequest = _ref.onSendFriendRequest,
+    onRemoveFriend = _ref.onRemoveFriend,
+    onOpenPrivateMessage = _ref.onOpenPrivateMessage,
+    onRejectRequest = _ref.onRejectRequest,
+    onAddFriend = _ref.onAddFriend,
+    onBackFriendList = _ref.onBackFriendList;
   var _useState = useState(''),
     characterName = _useState[0],
     setCharacterName = _useState[1];
+  var _useState2 = useState('friends'),
+    activeTab = _useState2[0],
+    setActiveTab = _useState2[1];
+  useEffect(function () {
+    if (activeTab === 'search') {
+      onAddFriend == null ? void 0 : onAddFriend();
+    } else {
+      onBackFriendList == null ? void 0 : onBackFriendList();
+    }
+  }, [activeTab]);
   var debouncedSearch = useCallback(debounce(function (name) {
     onSearch(name);
   }, 300), []);
@@ -30857,6 +30944,27 @@ var SearchFriend = function SearchFriend(_ref) {
       onSearch(characterName);
     }
   };
+  var friendsTabContent = friends.length > 0 ? React.createElement(ScrollableArea, null, React.createElement(Table, null, React.createElement("thead", null, React.createElement(TableRow, null, React.createElement(TableHeader, null, "Online"), React.createElement(TableHeader, null, "Name"), React.createElement(TableHeader, null, "Actions"))), React.createElement("tbody", null, friends.map(function (friend) {
+    return React.createElement(TableRow, {
+      key: friend._id
+    }, React.createElement(TableCell, null, React.createElement(IsOnlineBadge, {
+      "$isOnline": friend.isOnline
+    })), React.createElement(TableCell, null, friend.name), React.createElement(TableCell, null, React.createElement(ActionButtons, null, React.createElement(UserActionLink, {
+      color: uiColors.white,
+      onClick: function onClick() {
+        return onOpenPrivateMessage(friend);
+      }
+    }, "Chat"), React.createElement(UserActionLink, {
+      color: uiColors.red,
+      onClick: function onClick() {
+        return onRemoveFriend(friend);
+      }
+    }, "Remove"))));
+  })))) : React.createElement(EmptyStateContainer, null, React.createElement(EmptyStateText, null, "You don't have any friends yet"), React.createElement(AddFriendCTA, {
+    onClick: function onClick() {
+      return setActiveTab('search');
+    }
+  }, "Add your first friend"));
   var searchTabContent = React.createElement(ListContainer$1, null, React.createElement(SearchForm, {
     onSubmit: handleSubmit
   }, React.createElement(SearchInput, {
@@ -30869,7 +30977,6 @@ var SearchFriend = function SearchFriend(_ref) {
     onFocus: onFocus,
     onBlur: onBlur,
     onPointerDown: onFocus,
-    autoFocus: true,
     placeholder: "Search for a character..."
   })), React.createElement(CharacterList, {
     characters: searchedCharacters,
@@ -30882,6 +30989,10 @@ var SearchFriend = function SearchFriend(_ref) {
     onReject: onRejectRequest
   }));
   var tabs = [{
+    id: 'friends',
+    title: "Friends (" + friends.length + ")",
+    content: friendsTabContent
+  }, {
     id: 'search',
     title: 'Search',
     content: searchTabContent
@@ -30890,8 +31001,10 @@ var SearchFriend = function SearchFriend(_ref) {
     title: "Requests (" + friendRequests.length + ")",
     content: requestsTabContent
   }];
-  return React.createElement(Container$l, null, React.createElement(InternalTabs, {
+  return React.createElement(ListWrapper, null, React.createElement(InternalTabs, {
     tabs: tabs,
+    activeTab: activeTab,
+    onTabChange: setActiveTab,
     activeTextColor: "#000",
     inactiveColor: "#777",
     borderColor: "#f59e0b"
@@ -30916,7 +31029,7 @@ var FriendRequestSection = function FriendRequestSection(_ref3) {
   var friendRequests = _ref3.friendRequests,
     onAccept = _ref3.onAccept,
     onReject = _ref3.onReject;
-  return React.createElement(React.Fragment, null, friendRequests.length > 0 && React.createElement(ListContainer$1, null, friendRequests.map(function (character) {
+  return React.createElement(React.Fragment, null, friendRequests.length > 0 ? React.createElement(ListContainer$1, null, friendRequests.map(function (character) {
     return React.createElement(ListItem, {
       key: character._id
     }, React.createElement(CharacterName, null, character.name), React.createElement(AcceptRejectActions, null, React.createElement(UserActionLink, {
@@ -30930,94 +31043,7 @@ var FriendRequestSection = function FriendRequestSection(_ref3) {
         return onReject(character);
       }
     }, "Reject")));
-  })));
-};
-var Container$l = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SearchFriend__Container",
-  componentId: "sc-1lt1ols-0"
-})(["display:flex;flex-direction:column;gap:1rem;"]);
-var SearchForm = /*#__PURE__*/styled.form.withConfig({
-  displayName: "SearchFriend__SearchForm",
-  componentId: "sc-1lt1ols-1"
-})(["display:flex;align-items:center;width:100%;margin-top:1rem;"]);
-var SearchInput = /*#__PURE__*/styled.input.withConfig({
-  displayName: "SearchFriend__SearchInput",
-  componentId: "sc-1lt1ols-2"
-})(["width:100%;background-color:rgba(0,0,0,0.25);border:none;padding:0.5rem;font-size:", ";"], uiFonts.size.small);
-var ListContainer$1 = /*#__PURE__*/styled.ul.withConfig({
-  displayName: "SearchFriend__ListContainer",
-  componentId: "sc-1lt1ols-3"
-})(["list-style:none;padding:0;margin:0;width:100%;max-height:50vh;overflow-y:auto;@media (max-width:768px){max-height:90vh;}"]);
-var ListItem = /*#__PURE__*/styled.li.withConfig({
-  displayName: "SearchFriend__ListItem",
-  componentId: "sc-1lt1ols-4"
-})(["display:flex;align-items:center;justify-content:space-between;padding:0.5rem;border-bottom:1px solid rgba(255,255,255,0.1);"]);
-var CharacterName = /*#__PURE__*/styled.p.withConfig({
-  displayName: "SearchFriend__CharacterName",
-  componentId: "sc-1lt1ols-5"
-})(["font-size:", ";margin:0;"], uiFonts.size.small);
-var AcceptRejectActions = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SearchFriend__AcceptRejectActions",
-  componentId: "sc-1lt1ols-6"
-})(["display:flex;gap:0.5rem;"]);
-
-var FriendList = function FriendList(_ref) {
-  var friends = _ref.friends,
-    friendRequests = _ref.friendRequests,
-    searchedCharacters = _ref.searchedCharacters,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur,
-    onSearch = _ref.onSearch,
-    onAcceptRequest = _ref.onAcceptRequest,
-    onSendFriendRequest = _ref.onSendFriendRequest,
-    onRemoveFriend = _ref.onRemoveFriend,
-    onOpenPrivateMessage = _ref.onOpenPrivateMessage,
-    onRejectRequest = _ref.onRejectRequest,
-    onAddFriend = _ref.onAddFriend,
-    onBackFriendList = _ref.onBackFriendList;
-  var _useState = useState(false),
-    isAddFriendUI = _useState[0],
-    setIsAddFriendUI = _useState[1];
-  useEffect(function () {
-    if (isAddFriendUI) {
-      onAddFriend == null ? void 0 : onAddFriend();
-    } else {
-      onBackFriendList == null ? void 0 : onBackFriendList();
-    }
-  }, [isAddFriendUI]);
-  return React.createElement(ListWrapper, null, isAddFriendUI ? React.createElement(SearchFriend, {
-    searchedCharacters: searchedCharacters,
-    onSendFriendRequest: onSendFriendRequest,
-    onAcceptRequest: onAcceptRequest,
-    onRejectRequest: onRejectRequest,
-    friendRequests: friendRequests,
-    onSearch: onSearch,
-    onBlur: onBlur,
-    onFocus: onFocus
-  }) : React.createElement(React.Fragment, null, React.createElement(ScrollableArea, null, React.createElement(Table, null, React.createElement("thead", null, React.createElement(TableRow, null, React.createElement(TableHeader, null, "Online"), React.createElement(TableHeader, null, "Name"), React.createElement(TableHeader, null, "Actions"))), React.createElement("tbody", null, friends.map(function (friend) {
-    return React.createElement(TableRow, {
-      key: friend._id
-    }, React.createElement(TableCell, null, React.createElement(IsOnlineBadge, {
-      "$isOnline": friend.isOnline
-    })), React.createElement(TableCell, null, friend.name), React.createElement(TableCell, null, React.createElement(ActionButtons, null, React.createElement(UserActionLink, {
-      color: uiColors.white,
-      onClick: function onClick() {
-        return onOpenPrivateMessage(friend);
-      }
-    }, "Chat"), React.createElement(UserActionLink, {
-      color: uiColors.red,
-      onClick: function onClick() {
-        return onRemoveFriend(friend);
-      }
-    }, "Remove"))));
-  }))))), React.createElement(ButtonContainer$1, null, React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    onClick: function onClick() {
-      return setIsAddFriendUI(function (prev) {
-        return !prev;
-      });
-    }
-  }, isAddFriendUI ? 'Back' : 'Add New Friend')));
+  })) : React.createElement(EmptyMessage, null, "No pending friend requests"));
 };
 // Styled components for FriendList UI
 var ListWrapper = /*#__PURE__*/styled.div.withConfig({
@@ -31031,14 +31057,50 @@ var ScrollableArea = /*#__PURE__*/styled.div.withConfig({
 var IsOnlineBadge = /*#__PURE__*/styled.div.withConfig({
   displayName: "FriendList__IsOnlineBadge",
   componentId: "sc-3jf9vt-2"
-})(["width:10px;height:10px;border-radius:50%;background-color:", ";margin-right:1rem;"], function (_ref2) {
-  var $isOnline = _ref2.$isOnline;
+})(["width:10px;height:10px;border-radius:50%;background-color:", ";margin-right:1rem;"], function (_ref4) {
+  var $isOnline = _ref4.$isOnline;
   return $isOnline ? uiColors.lightGreen : uiColors.red;
 });
-var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "FriendList__ButtonContainer",
+var SearchForm = /*#__PURE__*/styled.form.withConfig({
+  displayName: "FriendList__SearchForm",
   componentId: "sc-3jf9vt-3"
-})(["display:flex;justify-content:center;align-items:center;width:100%;margin-top:1rem;"]);
+})(["display:flex;align-items:center;width:100%;margin-top:1rem;"]);
+var SearchInput = /*#__PURE__*/styled.input.withConfig({
+  displayName: "FriendList__SearchInput",
+  componentId: "sc-3jf9vt-4"
+})(["width:100%;background-color:rgba(0,0,0,0.25);border:none;padding:0.5rem;font-size:", ";"], uiFonts.size.small);
+var ListContainer$1 = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "FriendList__ListContainer",
+  componentId: "sc-3jf9vt-5"
+})(["list-style:none;padding:0;margin:0;width:100%;max-height:50vh;overflow-y:auto;@media (max-width:768px){max-height:90vh;}"]);
+var ListItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "FriendList__ListItem",
+  componentId: "sc-3jf9vt-6"
+})(["display:flex;align-items:center;justify-content:space-between;padding:0.5rem;border-bottom:1px solid rgba(255,255,255,0.1);"]);
+var CharacterName = /*#__PURE__*/styled.p.withConfig({
+  displayName: "FriendList__CharacterName",
+  componentId: "sc-3jf9vt-7"
+})(["font-size:", ";margin:0;"], uiFonts.size.small);
+var AcceptRejectActions = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FriendList__AcceptRejectActions",
+  componentId: "sc-3jf9vt-8"
+})(["display:flex;gap:0.5rem;"]);
+var EmptyMessage = /*#__PURE__*/styled.p.withConfig({
+  displayName: "FriendList__EmptyMessage",
+  componentId: "sc-3jf9vt-9"
+})(["text-align:center;color:#888;padding:1rem;font-size:", ";"], uiFonts.size.small);
+var EmptyStateContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FriendList__EmptyStateContainer",
+  componentId: "sc-3jf9vt-10"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1rem;"]);
+var EmptyStateText = /*#__PURE__*/styled.p.withConfig({
+  displayName: "FriendList__EmptyStateText",
+  componentId: "sc-3jf9vt-11"
+})(["text-align:center;color:#888;font-size:", ";margin:0;"], uiFonts.size.small);
+var AddFriendCTA = /*#__PURE__*/styled.button.withConfig({
+  displayName: "FriendList__AddFriendCTA",
+  componentId: "sc-3jf9vt-12"
+})(["background-color:", ";color:#000;border:none;padding:0.5rem 1rem;font-size:", ";cursor:pointer;border-radius:4px;transition:opacity 0.2s;&:hover{opacity:0.8;}"], uiColors.lightGreen, uiFonts.size.small);
 
 var IS_MOBILE_OR_TABLET = /*#__PURE__*/isMobileOrTablet();
 
@@ -31135,7 +31197,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$m, null, React.createElement(DynamicText, {
+  return React.createElement(Container$l, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -31153,7 +31215,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -31305,7 +31367,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React.createElement(Container$n, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$m, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -31315,7 +31377,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestionDialog__Container",
   componentId: "sc-bxc5u0-0"
 })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -31376,7 +31438,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$o, null, React.createElement(CloseIcon, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$n, null, React.createElement(CloseIcon, {
     onPointerDown: _onClose
   }, "X"), React.createElement(TextContainer$1, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
@@ -31392,7 +31454,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$o = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__Container",
   componentId: "sc-1b4aw74-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -31453,7 +31515,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$p, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
+  }, React.createElement(React.Fragment, null, React.createElement(Container$o, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -31495,7 +31557,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCMultiDialog__Container",
   componentId: "sc-rvu5wg-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -31766,78 +31828,6 @@ var FadeInCarouselImg = /*#__PURE__*/styled(CarouselImg).withConfig({
   componentId: "sc-gdvbly-5"
 })(["animation:", " 0.5s;"], fadeIn);
 
-var UI_BREAKPOINT_MOBILE = '950px';
-var UI_BREAKPOINT_SMALL_LAPTOP = '1400px';
-
-var InternalTabs = function InternalTabs(_ref) {
-  var _tabs$, _tabs$find;
-  var tabs = _ref.tabs,
-    _ref$activeColor = _ref.activeColor,
-    activeColor = _ref$activeColor === void 0 ? '#fef08a' : _ref$activeColor,
-    _ref$activeTextColor = _ref.activeTextColor,
-    activeTextColor = _ref$activeTextColor === void 0 ? '#000000' : _ref$activeTextColor,
-    _ref$inactiveColor = _ref.inactiveColor,
-    inactiveColor = _ref$inactiveColor === void 0 ? '#6b7280' : _ref$inactiveColor,
-    _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? '#f59e0b' : _ref$borderColor,
-    _ref$hoverColor = _ref.hoverColor,
-    hoverColor = _ref$hoverColor === void 0 ? '#fef3c7' : _ref$hoverColor,
-    onTabChange = _ref.onTabChange,
-    externalActiveTab = _ref.activeTab;
-  var _useState = useState((_tabs$ = tabs[0]) == null ? void 0 : _tabs$.id),
-    internalActiveTab = _useState[0],
-    setInternalActiveTab = _useState[1];
-  var activeTabId = externalActiveTab != null ? externalActiveTab : internalActiveTab;
-  var handleTabClick = function handleTabClick(tabId) {
-    setInternalActiveTab(tabId);
-    onTabChange == null ? void 0 : onTabChange(tabId);
-  };
-  return React.createElement(TableWrapper, null, React.createElement(TabHeader, {
-    borderColor: borderColor
-  }, tabs.map(function (tab) {
-    return React.createElement(TabButton, {
-      key: tab.id,
-      active: activeTabId === tab.id,
-      activeColor: activeColor,
-      activeTextColor: activeTextColor,
-      inactiveColor: inactiveColor,
-      borderColor: borderColor,
-      hoverColor: hoverColor,
-      onClick: function onClick() {
-        return handleTabClick(tab.id);
-      }
-    }, tab.title);
-  })), React.createElement(ContentWrapper, null, (_tabs$find = tabs.find(function (tab) {
-    return tab.id === activeTabId;
-  })) == null ? void 0 : _tabs$find.content));
-};
-var TableWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InternalTabs__TableWrapper",
-  componentId: "sc-ldufv0-0"
-})(["width:100%;"]);
-var TabHeader = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InternalTabs__TabHeader",
-  componentId: "sc-ldufv0-1"
-})(["display:flex;border-bottom:1px solid ", ";"], function (props) {
-  return props.borderColor;
-});
-var TabButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "InternalTabs__TabButton",
-  componentId: "sc-ldufv0-2"
-})(["flex:1;padding:0.25rem 0.5rem;font-size:0.75rem;font-weight:500;border-right:1px solid ", ";background-color:", ";color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;@media (min-width:480px){padding:0.375rem 0.75rem;font-size:0.8125rem;}@media (min-width:", "){padding:0.5rem 1rem;font-size:0.875rem;}&:last-child{border-right:none;}&:hover{background-color:", ";}"], function (props) {
-  return props.borderColor;
-}, function (props) {
-  return props.active ? props.activeColor : 'transparent';
-}, function (props) {
-  return props.active ? props.activeTextColor : props.inactiveColor;
-}, UI_BREAKPOINT_MOBILE, function (props) {
-  return props.active ? props.activeColor : props.hoverColor;
-});
-var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InternalTabs__ContentWrapper",
-  componentId: "sc-ldufv0-3"
-})(["width:100%;"]);
-
 var TOOLTIP_OFFSET = 10;
 var MIN_VISIBLE_HEIGHT = 100;
 var useTooltipPosition = function useTooltipPosition() {
@@ -31934,7 +31924,7 @@ var Pagination = function Pagination(_ref) {
     totalPages = _ref.totalPages,
     onPageChange = _ref.onPageChange,
     className = _ref.className;
-  return React.createElement(Container$q, {
+  return React.createElement(Container$p, {
     className: className
   }, React.createElement(PaginationButton$1, {
     onClick: function onClick() {
@@ -31952,7 +31942,7 @@ var Pagination = function Pagination(_ref) {
     size: 12
   })));
 };
-var Container$q = /*#__PURE__*/styled.div.withConfig({
+var Container$p = /*#__PURE__*/styled.div.withConfig({
   displayName: "Pagination__Container",
   componentId: "sc-3k4m4u-0"
 })(["display:flex;align-items:center;justify-content:center;gap:16px;padding:8px;"]);
@@ -32060,12 +32050,12 @@ var PaginatedContent = function PaginatedContent(_ref) {
     setCurrentPage = _usePagination.setCurrentPage,
     paginatedItems = _usePagination.paginatedItems,
     totalPages = _usePagination.totalPages;
-  return React.createElement(Container$r, {
+  return React.createElement(Container$q, {
     className: className
   }, (searchOptions || filterOptions) && React.createElement(SearchHeader$1, {
     searchOptions: searchOptions,
     filterOptions: filterOptions
-  }), items.length === 0 ? React.createElement(EmptyMessage, null, emptyMessage) : React.createElement(React.Fragment, null, React.createElement(Content, {
+  }), items.length === 0 ? React.createElement(EmptyMessage$1, null, emptyMessage) : React.createElement(React.Fragment, null, React.createElement(Content, {
     className: "PaginatedContent-content " + layout,
     "$gridColumns": gridColumns,
     "$itemHeight": itemHeight
@@ -32082,7 +32072,7 @@ var PaginatedContent = function PaginatedContent(_ref) {
     onPageChange: setCurrentPage
   }))));
 };
-var Container$r = /*#__PURE__*/styled.div.withConfig({
+var Container$q = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaginatedContent__Container",
   componentId: "sc-lzp9hn-0"
 })(["display:flex;flex-direction:column;gap:0.5rem;min-height:400px;width:100%;"]);
@@ -32101,7 +32091,7 @@ var PaginationContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaginatedContent__PaginationContainer",
   componentId: "sc-lzp9hn-2"
 })(["display:flex;justify-content:center;padding:0.5rem;@media (min-width:480px){padding:1rem;}"]);
-var EmptyMessage = /*#__PURE__*/styled.div.withConfig({
+var EmptyMessage$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaginatedContent__EmptyMessage",
   componentId: "sc-lzp9hn-3"
 })(["text-align:center;color:#9ca3af;padding:2rem;flex:1;display:flex;align-items:center;justify-content:center;"]);
@@ -32204,7 +32194,7 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     atlasIMG = _ref.atlasIMG,
     onBack = _ref.onBack,
     children = _ref.children;
-  return React.createElement(Container$s, null, React.createElement(Overlay, {
+  return React.createElement(Container$r, null, React.createElement(Overlay, {
     onClick: onBack
   }), React.createElement(Modal, null, React.createElement(CloseButton$5, {
     onClick: onBack
@@ -32217,7 +32207,7 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     imgScale: 1
   })), React.createElement(Title$3, null, name)), React.createElement(Content$1, null, children)));
 };
-var Container$s = /*#__PURE__*/styled.div.withConfig({
+var Container$r = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Container",
   componentId: "sc-1vguuz8-0"
 })(["position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:9999;"]);
@@ -32259,7 +32249,7 @@ var Collapsible = function Collapsible(_ref) {
   var _useState = useState(defaultOpen),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
-  return React.createElement(Container$t, {
+  return React.createElement(Container$s, {
     className: className
   }, React.createElement(Header$3, {
     onClick: function onClick() {
@@ -32267,7 +32257,7 @@ var Collapsible = function Collapsible(_ref) {
     }
   }, React.createElement(Title$4, null, title), React.createElement(Icon$1, null, isOpen ? React.createElement(FaChevronUp, null) : React.createElement(FaChevronDown, null))), isOpen && React.createElement(Content$2, null, children));
 };
-var Container$t = /*#__PURE__*/styled.div.withConfig({
+var Container$s = /*#__PURE__*/styled.div.withConfig({
   displayName: "Collapsible__Container",
   componentId: "sc-s4h8ey-0"
 })(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";"], uiColors.darkGray);
@@ -32597,7 +32587,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       onClose();
     }
   };
-  return React.createElement(Container$u, null, React.createElement(FilterButton, {
+  return React.createElement(Container$t, null, React.createElement(FilterButton, {
     onClick: onToggle,
     "$hasActiveFilters": hasActiveFilters,
     ref: buttonRef
@@ -32628,7 +32618,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
     onClick: onClearAll
   }, "Clear All Filters"))));
 };
-var Container$u = /*#__PURE__*/styled.div.withConfig({
+var Container$t = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__Container",
   componentId: "sc-1xj6ldr-0"
 })(["position:relative;margin-left:0.5rem;"]);
@@ -33722,7 +33712,7 @@ var InformationCenter = function InformationCenter(_ref) {
     minWidth: "300px",
     cancelDrag: ".PaginatedContent-content",
     onCloseButton: onClose
-  }, React.createElement(Container$v, null, React.createElement(InternalTabs, {
+  }, React.createElement(Container$u, null, React.createElement(InternalTabs, {
     tabs: tabs,
     activeTextColor: "#000000",
     activeTab: activeTab,
@@ -33733,7 +33723,7 @@ var InformationCenter = function InformationCenter(_ref) {
     hoverColor: "#fef3c7"
   })));
 };
-var Container$v = /*#__PURE__*/styled.div.withConfig({
+var Container$u = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenter__Container",
   componentId: "sc-1ttl62e-0"
 })(["width:100%;max-width:100%;margin:0 auto;padding:0.125rem;overflow:hidden;box-sizing:border-box;@media (min-width:320px){padding:0.25rem;}@media (min-width:360px){padding:0.5rem;}@media (min-width:480px){padding:0.75rem;}"]);
@@ -33904,7 +33894,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React.createElement(Container$w, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+  return React.createElement(Container$v, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -33922,7 +33912,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$w = /*#__PURE__*/styled.div.withConfig({
+var Container$v = /*#__PURE__*/styled.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -34466,13 +34456,13 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "25rem",
     onCloseButton: onClose
-  }, React.createElement(Container$x, null, React.createElement(Header$4, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
+  }, React.createElement(Container$w, null, React.createElement(Header$4, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
       _onChange(color);
     }
-  })), React.createElement(ButtonContainer$2, null, React.createElement(Button, {
+  })), React.createElement(ButtonContainer$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     type: "button",
     onClick: handleConfirm
@@ -34482,7 +34472,7 @@ var ColorSelector = function ColorSelector(_ref) {
     onClose: handleClose
   }));
 };
-var Container$x = /*#__PURE__*/styled.div.withConfig({
+var Container$w = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemPropertyColorSelector__Container",
   componentId: "sc-me1r4z-0"
 })(["text-align:center;background:inherit;display:flex;flex-direction:column;gap:1.5rem;align-items:center;width:100%;max-width:24rem;margin:0 auto;"]);
@@ -34494,7 +34484,7 @@ var ColorPickerWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemPropertyColorSelector__ColorPickerWrapper",
   componentId: "sc-me1r4z-2"
 })(["display:flex;justify-content:center;width:100%;.react-colorful{width:100%;max-width:200px;}"]);
-var ButtonContainer$2 = /*#__PURE__*/styled.div.withConfig({
+var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemPropertyColorSelector__ButtonContainer",
   componentId: "sc-me1r4z-3"
 })(["display:flex;justify-content:center;width:100%;"]);
@@ -34838,7 +34828,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$y, {
+  return React.createElement(Container$x, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -34855,7 +34845,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$y = /*#__PURE__*/styled.div.withConfig({
+var Container$x = /*#__PURE__*/styled.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", ";}"], function (props) {
@@ -34874,7 +34864,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$z, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$y, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -34888,7 +34878,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$z = /*#__PURE__*/styled.div.withConfig({
+var Container$y = /*#__PURE__*/styled.div.withConfig({
   displayName: "Pager__Container",
   componentId: "sc-1ekmf50-0"
 })(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
@@ -34942,7 +34932,7 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     maxLines: 1,
     maxWidth: "200px",
     fontSize: "10px"
-  }, "$", itemPrice)))), React.createElement(ButtonContainer$3, null, React.createElement(Button, {
+  }, "$", itemPrice)))), React.createElement(ButtonContainer$2, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: disabled,
     onPointerDown: function onPointerDown() {
@@ -34984,7 +34974,7 @@ var PriceValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__PriceValue",
   componentId: "sc-wmpr1o-7"
 })(["margin-left:40px;"]);
-var ButtonContainer$3 = /*#__PURE__*/styled.div.withConfig({
+var ButtonContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__ButtonContainer",
   componentId: "sc-wmpr1o-8"
 })(["margin:auto;"]);
@@ -35409,13 +35399,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React.createElement(Container$A, {
+  return React.createElement(Container$z, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$A = /*#__PURE__*/styled.div.withConfig({
+var Container$z = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -35753,7 +35743,7 @@ var PartyManagerRow = function PartyManagerRow(_ref) {
   }, charName, " ", isCurrentUser ? '(You)' : '', " ", isLeader ? '(Leader)' : '')), React.createElement(TextContainer$5, null, React.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "300px"
-  }, charClass)), React.createElement(ButtonContainer$4, null, canRemove && React.createElement(HighlightedText, {
+  }, charClass)), React.createElement(ButtonContainer$3, null, canRemove && React.createElement(HighlightedText, {
     onPointerDown: function onPointerDown() {
       return onRemovePlayer(id);
     }
@@ -35771,7 +35761,7 @@ var TextContainer$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyManagerRows__TextContainer",
   componentId: "sc-uqajew-1"
 })(["color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"], uiColors.white);
-var ButtonContainer$4 = /*#__PURE__*/styled.div.withConfig({
+var ButtonContainer$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyManagerRows__ButtonContainer",
   componentId: "sc-uqajew-2"
 })(["display:flex;align-items:center;gap:1rem;justify-content:flex-start;"]);
@@ -36070,7 +36060,7 @@ var ProgressBar$1 = function ProgressBar(_ref) {
   // Round only for display, not for calculation
   var displayValue = Math.round(value);
   var displayMax = Math.round(max);
-  return React.createElement(Container$B, {
+  return React.createElement(Container$A, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -36102,7 +36092,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$B = /*#__PURE__*/styled.div.withConfig({
+var Container$A = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", " @media (max-width:950px){transform:scale(", ");}"], function (props) {
@@ -36343,9 +36333,9 @@ var InputRadio = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React.createElement(Container$C, null, children);
+  return React.createElement(Container$B, null, children);
 };
-var Container$C = /*#__PURE__*/styled.div.withConfig({
+var Container$B = /*#__PURE__*/styled.div.withConfig({
   displayName: "RPGUIScrollbar__Container",
   componentId: "sc-p3msmb-0"
 })([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
@@ -36502,7 +36492,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
   // Ensure the width is at least 1% if value is greater than 0, capped at 99.99%
   var width = value > 0 ? Math.max(1, Math.min(99.99, value)) : 0;
-  return React.createElement(Container$D, {
+  return React.createElement(Container$C, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -36511,7 +36501,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$D = /*#__PURE__*/styled.div.withConfig({
+var Container$C = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -36899,7 +36889,7 @@ var SocialModal = function SocialModal(_ref) {
     title: "Social Channels",
     width: "500px",
     onCloseButton: onClose
-  }, React.createElement(Container$E, null, React.createElement(HeaderImage, {
+  }, React.createElement(Container$D, null, React.createElement(HeaderImage, {
     src: img$9,
     alt: ""
   }), React.createElement(ButtonsContainer$3, null, React.createElement(MainButtons, null, React.createElement(SocialButton$1, {
@@ -36917,7 +36907,7 @@ var SocialModal = function SocialModal(_ref) {
     onClick: handleWhatsAppClick
   }, React.createElement(FaWhatsapp, null), " Join WhatsApp")))));
 };
-var Container$E = /*#__PURE__*/styled.div.withConfig({
+var Container$D = /*#__PURE__*/styled.div.withConfig({
   displayName: "SocialModal__Container",
   componentId: "sc-tbjhp9-0"
 })(["width:100%;display:flex;flex-direction:column;gap:16px;background-color:#5c4132;position:relative;border-radius:8px;overflow:hidden;&:before,&:after{content:'';position:absolute;left:0;right:0;height:3px;}&:before{bottom:0;background:linear-gradient( to right,#5c4132 0%,#2b1810 2%,#2b1810 98%,#5c4132 100% );}"]);
@@ -36963,7 +36953,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$F, null, React.createElement(Header$6, null, React.createElement("div", null, React.createElement(Title$b, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$E, null, React.createElement(Header$6, null, React.createElement("div", null, React.createElement(Title$b, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -36989,7 +36979,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React.createElement(Description$4, null, description));
 };
-var Container$F = /*#__PURE__*/styled.div.withConfig({
+var Container$E = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
@@ -37043,7 +37033,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React.createElement(ModalPortal, null, React.createElement(Container$G, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$F, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -37068,7 +37058,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$G = /*#__PURE__*/styled.div.withConfig({
+var Container$F = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -37109,13 +37099,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$H, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$G, {
     ref: ref
   }, React.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$H = /*#__PURE__*/styled.div.withConfig({
+var Container$G = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -37217,7 +37207,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React.createElement(Container$I, {
+  }, React.createElement(Container$H, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -37236,7 +37226,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$I = /*#__PURE__*/styled.button.withConfig({
+var Container$H = /*#__PURE__*/styled.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -37316,7 +37306,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$J, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$I, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -37353,7 +37343,7 @@ var Title$d = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$J = /*#__PURE__*/styled.div.withConfig({
+var Container$I = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -57738,7 +57728,7 @@ var CTAButton = function CTAButton(_ref) {
     iconColor = _ref$iconColor === void 0 ? '#f59e0b' : _ref$iconColor,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  return React.createElement(ButtonContainer$5, {
+  return React.createElement(ButtonContainer$4, {
     className: className,
     onPointerDown: disabled ? undefined : onClick,
     "$fullWidth": fullWidth,
@@ -57752,7 +57742,7 @@ var CTAButton = function CTAButton(_ref) {
     "$disabled": disabled
   }, label)));
 };
-var ButtonContainer$5 = /*#__PURE__*/styled.div.withConfig({
+var ButtonContainer$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CTAButton__ButtonContainer",
   componentId: "sc-1azvwn5-0"
 })(["display:inline-flex;align-items:center;padding:0.75rem 1.25rem;background:rgba(0,0,0,0.3);border:2px solid #f59e0b;box-shadow:0 0 10px rgba(245,158,11,0.3);border-radius:4px;cursor:", ";transition:all 0.2s;position:relative;opacity:", ";color:", ";", " &:hover{background:", ";box-shadow:", ";transform:", ";}&:active{transform:", ";box-shadow:", ";}&:before{content:'';position:absolute;inset:-1px;border-radius:5px;padding:1px;background:linear-gradient(45deg,#f59e0b,#fbbf24,#f59e0b);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:destination-out;}"], function (props) {
@@ -57861,7 +57851,7 @@ var CartView = function CartView(_ref2) {
       return _ref3.apply(this, arguments);
     };
   }();
-  return React.createElement(Container$K, null, React.createElement(Header$7, null, React.createElement(Title$e, null, "Shopping Cart"), React.createElement(CloseButton$9, {
+  return React.createElement(Container$J, null, React.createElement(Header$7, null, React.createElement(Title$e, null, "Shopping Cart"), React.createElement(CloseButton$9, {
     onPointerDown: onClose
   }, React.createElement(FaTimes, null))), React.createElement(CartItems, null, cartItems.length === 0 ? React.createElement(EmptyCart, null, "Your cart is empty") : cartItems.map(function (cartItem) {
     var _cartItem$metadata, _cartItem$metadata2;
@@ -57897,7 +57887,7 @@ var CartView = function CartView(_ref2) {
     disabled: cartItems.length === 0 || isLoading
   })));
 };
-var Container$K = /*#__PURE__*/styled.div.withConfig({
+var Container$J = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__Container",
   componentId: "sc-ydtyl1-0"
 })(["display:flex;flex-direction:column;width:100%;height:100%;gap:1.5rem;padding:1.5rem;"]);
@@ -58251,9 +58241,9 @@ var ScrollableContent = function ScrollableContent(_ref) {
     _ref$maxHeight = _ref.maxHeight,
     maxHeight = _ref$maxHeight === void 0 ? '500px' : _ref$maxHeight;
   if (items.length === 0) {
-    return React.createElement(EmptyMessage$1, null, emptyMessage);
+    return React.createElement(EmptyMessage$2, null, emptyMessage);
   }
-  return React.createElement(Container$L, {
+  return React.createElement(Container$K, {
     className: className
   }, (searchOptions || filterOptions) && React.createElement(HeaderContainer$3, null, React.createElement(HeaderContent$1, null, searchOptions && React.createElement(SearchContainer$3, null, React.createElement(StyledSearchBar$2, {
     value: searchOptions.value,
@@ -58274,7 +58264,7 @@ var ScrollableContent = function ScrollableContent(_ref) {
     }, renderItem(item));
   })));
 };
-var Container$L = /*#__PURE__*/styled.div.withConfig({
+var Container$K = /*#__PURE__*/styled.div.withConfig({
   displayName: "ScrollableContent__Container",
   componentId: "sc-xhh2um-0"
 })(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
@@ -58310,7 +58300,7 @@ var Content$4 = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.$gridColumns;
 });
-var EmptyMessage$1 = /*#__PURE__*/styled.div.withConfig({
+var EmptyMessage$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ScrollableContent__EmptyMessage",
   componentId: "sc-xhh2um-8"
 })(["text-align:center;color:#9ca3af;padding:2rem;flex:1;display:flex;align-items:center;justify-content:center;"]);
@@ -58890,7 +58880,7 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     if (typeof imageUrl === 'string') return imageUrl;
     return imageUrl["default"] || imageUrl.src;
   };
-  return React.createElement(Container$M, null, React.createElement(Header$9, null, React.createElement(BackButton, {
+  return React.createElement(Container$L, null, React.createElement(Header$9, null, React.createElement(BackButton, {
     onClick: onBack
   }, React.createElement(FaArrowLeft, null), React.createElement("span", null, "Back"))), React.createElement(Content$5, null, React.createElement(DetailsGrid, null, React.createElement(ItemIcon, null, React.createElement("img", {
     src: getImageSrc(),
@@ -58904,7 +58894,7 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     fullWidth: true
   }))));
 };
-var Container$M = /*#__PURE__*/styled.div.withConfig({
+var Container$L = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__Container",
   componentId: "sc-k3ho5z-0"
 })(["display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;height:100%;"]);
@@ -59167,7 +59157,7 @@ var Store = function Store(_ref) {
     onAddToCart: function onAddToCart() {
       return handleAddPackToCart(selectedPack);
     }
-  }) : React.createElement(Container$N, null, React.createElement(TopBar$1, null, React.createElement(HistoryButton, null, onShowHistory && React.createElement(CTAButton, {
+  }) : React.createElement(Container$M, null, React.createElement(TopBar$1, null, React.createElement(HistoryButton, null, onShowHistory && React.createElement(CTAButton, {
     icon: React.createElement(FaHistory, null),
     label: "History",
     onClick: onShowHistory
@@ -59193,7 +59183,7 @@ var Store = function Store(_ref) {
     fullWidth: true
   }))));
 };
-var Container$N = /*#__PURE__*/styled.div.withConfig({
+var Container$M = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__Container",
   componentId: "sc-64dj00-0"
 })(["display:flex;flex-direction:column;width:100%;height:100%;gap:1rem;position:relative;"]);
@@ -59564,7 +59554,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$O, null, React.createElement(Title$f, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$N, null, React.createElement(Title$f, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -59592,7 +59582,7 @@ var TradingMenu = function TradingMenu(_ref) {
     onPointerDown: onClose
   }, "Cancel"))));
 };
-var Container$O = /*#__PURE__*/styled.div.withConfig({
+var Container$N = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
@@ -59626,11 +59616,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React.createElement(Container$P, {
+  return React.createElement(Container$O, {
     maxLines: maxLines
   }, children);
 };
-var Container$P = /*#__PURE__*/styled.div.withConfig({
+var Container$O = /*#__PURE__*/styled.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -59738,7 +59728,7 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React.createElement(Container$Q, null, React.createElement(Stepper, {
+  return React.createElement(Container$P, null, React.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -59755,7 +59745,7 @@ var LessonBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$Q = /*#__PURE__*/styled.div.withConfig({
+var Container$P = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);