@rpg-engine/long-bow 0.6.69 → 0.6.71

package/dist/long-bow.esm.js

@@ -2,15 +2,16 @@ import React, { useState, useEffect, Component, useRef, useContext, createContex
 import { BeatLoader } from 'react-spinners';
 import styled, { css, keyframes } from 'styled-components';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane, RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import Draggable from 'react-draggable';
 import ReactDOM from 'react-dom';
-import { camelCase } from 'lodash-es';
+import { camelCase, debounce } from 'lodash-es';
 import { observer } from 'mobx-react-lite';
 import { AiFillCaretRight } from 'react-icons/ai';
+import 'react-tippy/dist/tippy.css';
 import 'rpgui/rpgui.css';
 import 'rpgui/rpgui.min.js';
 import capitalize from 'lodash-es/capitalize';
@@ -25940,7 +25941,8 @@ var RightArrow = /*#__PURE__*/styled.span.withConfig({
 
 var Ellipsis = function Ellipsis(_ref) {
   var children = _ref.children,
-    maxLines = _ref.maxLines,
+    _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     maxWidth = _ref.maxWidth,
     fontSize = _ref.fontSize,
     center = _ref.center;
@@ -28788,109 +28790,156 @@ var Table = /*#__PURE__*/styled.table.withConfig({
 var TableRow = /*#__PURE__*/styled.tr.withConfig({
   displayName: "Table__TableRow",
   componentId: "sc-1c24pcj-1"
-})(["&:nth-child(even){background-color:rgba(255,255,255,0.05) !important;}"]);
+})(["&:nth-child(even){background-color:rgba(255,255,255,0.05) !important;}&:hover{background-color:rgba(255,255,255,0.1) !important;}"]);
 var TableHeader = /*#__PURE__*/styled.th.withConfig({
   displayName: "Table__TableHeader",
   componentId: "sc-1c24pcj-2"
-})(["text-align:left;padding:0.5rem;color:", " !important;border-bottom:1px solid ", ";"], uiColors.yellow, uiColors.lightGray);
+})(["text-align:left;padding:0.5rem;color:", " !important;border-bottom:1px solid ", ";text-shadow:-2px 0 black,0 2px black,2px 0 black,0 -2px black;"], uiColors.yellow, uiColors.lightGray);
 var TableCell = /*#__PURE__*/styled.td.withConfig({
   displayName: "Table__TableCell",
   componentId: "sc-1c24pcj-3"
-})(["padding:0.5rem;color:", ";border-bottom:1px solid ", ";"], uiColors.white, uiColors.lightGray);
+})(["padding:0.5rem;color:", ";border-bottom:1px solid ", ";text-shadow:-2px 0 black,0 2px black,2px 0 black,0 -2px black;"], uiColors.white, uiColors.lightGray);
 var ActionButtons = /*#__PURE__*/styled.div.withConfig({
   displayName: "Table__ActionButtons",
   componentId: "sc-1c24pcj-4"
 })(["display:flex;gap:10px;align-items:center;"]);
+var UserActionLink = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Table__UserActionLink",
+  componentId: "sc-1c24pcj-5"
+})(["color:", " !important;cursor:pointer;margin-right:0.5rem;&:hover{text-decoration:underline;}"], function (_ref) {
+  var color = _ref.color;
+  return color;
+});
 
-var SearchFriend = function SearchFriend(props) {
-  var searchedCharacters = props.searchedCharacters,
-    friendRequests = props.friendRequests,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onSearch = props.onSearch,
-    onSendFriendRequest = props.onSendFriendRequest,
-    onAcceptRequest = props.onAcceptRequest,
-    onRejectRequest = props.onRejectRequest;
+var SearchFriend = function SearchFriend(_ref) {
+  var searchedCharacters = _ref.searchedCharacters,
+    friendRequests = _ref.friendRequests,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onSearch = _ref.onSearch,
+    onSendFriendRequest = _ref.onSendFriendRequest,
+    onAcceptRequest = _ref.onAcceptRequest,
+    onRejectRequest = _ref.onRejectRequest;
   var _useState = useState(''),
     characterName = _useState[0],
     setCharacterName = _useState[1];
+  var debouncedSearch = useCallback(debounce(function (name) {
+    onSearch(name);
+  }, 300), []);
+  var handleInputChange = function handleInputChange(e) {
+    var name = e.target.value;
+    setCharacterName(name);
+    debouncedSearch(name);
+  };
   var handleSubmit = function handleSubmit(event) {
     event.preventDefault();
-    if (!characterName || characterName.trim() === '') return;
-    onSearch(characterName);
+    if (characterName.trim()) {
+      onSearch(characterName);
+    }
   };
-  return React.createElement(React.Fragment, null, React.createElement(Form$3, {
+  var searchTabContent = React.createElement(ListContainer$1, null, React.createElement(SearchForm, {
     onSubmit: handleSubmit
-  }, React.createElement(Column, {
-    flex: 70
-  }, React.createElement(TextField$2, {
+  }, React.createElement(SearchInput, {
     value: characterName,
     id: "characterName",
     name: "characterName",
-    onChange: function onChange(e) {
-      setCharacterName(e.target.value);
-    },
-    height: 20,
+    onChange: handleInputChange,
     type: "text",
     autoComplete: "off",
     onFocus: onFocus,
     onBlur: onBlur,
     onPointerDown: onFocus,
-    autoFocus: true
-  })), React.createElement(Column, {
-    justifyContent: "flex-end"
-  }, React.createElement(Button, {
-    type: "submit",
-    buttonType: ButtonTypes.RPGUIButton
-  }, "Search"))), React.createElement(ListContainer$1, null, searchedCharacters.map(function (character) {
-    return React.createElement(ListElement$3, {
+    autoFocus: true,
+    placeholder: "Search for a character..."
+  })), React.createElement(CharacterList, {
+    characters: searchedCharacters,
+    onAction: onSendFriendRequest,
+    actionLabel: "Add Friend"
+  }));
+  var requestsTabContent = React.createElement(ListContainer$1, null, React.createElement(FriendRequestSection, {
+    friendRequests: friendRequests,
+    onAccept: onAcceptRequest,
+    onReject: onRejectRequest
+  }));
+  var tabs = [{
+    id: 'search',
+    title: 'Search',
+    content: searchTabContent
+  }, {
+    id: 'requests',
+    title: "Requests (" + friendRequests.length + ")",
+    content: requestsTabContent
+  }];
+  return React.createElement(Container$g, null, React.createElement(TableTab, {
+    tabs: tabs,
+    activeTextColor: "#000",
+    inactiveColor: "#777",
+    borderColor: "#f59e0b"
+  }));
+};
+var CharacterList = function CharacterList(_ref2) {
+  var characters = _ref2.characters,
+    onAction = _ref2.onAction,
+    actionLabel = _ref2.actionLabel;
+  return React.createElement(ListContainer$1, null, characters.map(function (character) {
+    return React.createElement(ListItem, {
       key: character._id
-    }, React.createElement("p", null, character.name), React.createElement(Button, {
-      buttonType: ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
-        return onSendFriendRequest(character);
+    }, React.createElement(CharacterName, null, character.name), React.createElement(UserActionLink, {
+      color: uiColors.lightGreen,
+      onClick: function onClick() {
+        return onAction(character);
       }
-    }, "Add Friend"));
-  })), React.createElement(FriendRequestTitle, null, "Friend Requests ", React.createElement("span", null, "(", friendRequests.length, ")")), friendRequests.length > 0 && React.createElement(ListContainer$1, null, friendRequests.map(function (character) {
-    return React.createElement(ListElement$3, {
+    }, actionLabel));
+  }));
+};
+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(ListItem, {
       key: character._id
-    }, React.createElement("p", null, character.name), React.createElement(AcceptRejectButtonContainer, null, React.createElement(Button, {
-      buttonType: ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
-        return onAcceptRequest(character);
+    }, React.createElement(CharacterName, null, character.name), React.createElement(AcceptRejectActions, null, React.createElement(UserActionLink, {
+      color: uiColors.lightGreen,
+      onClick: function onClick() {
+        return onAccept(character);
       }
-    }, "Accept"), React.createElement(Button, {
-      buttonType: ButtonTypes.RPGUIButton,
-      onPointerDown: function onPointerDown() {
-        return onRejectRequest(character);
+    }, "Accept"), React.createElement(UserActionLink, {
+      color: uiColors.red,
+      onClick: function onClick() {
+        return onReject(character);
       }
     }, "Reject")));
   })));
 };
-var Form$3 = /*#__PURE__*/styled.form.withConfig({
-  displayName: "SearchFriend__Form",
+var Container$g = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchFriend__Container",
   componentId: "sc-1lt1ols-0"
-})(["display:flex;width:100%;justify-content:center;align-items:center;margin-top:1rem;"]);
-var TextField$2 = /*#__PURE__*/styled.input.withConfig({
-  displayName: "SearchFriend__TextField",
+})(["display:flex;flex-direction:column;gap:1rem;"]);
+var SearchForm = /*#__PURE__*/styled.form.withConfig({
+  displayName: "SearchFriend__SearchForm",
   componentId: "sc-1lt1ols-1"
-})(["width:100%;background-color:rgba(0,0,0,0.25) !important;border:none !important;max-height:28px !important;"]);
+})(["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-2"
-})(["width:100%;c4height:50vh;border:none;overflow-y:scroll;list-style:none;padding:0;@media (max-width:768px){max-height:90wh;}"]);
-var ListElement$3 = /*#__PURE__*/styled.li.withConfig({
-  displayName: "SearchFriend__ListElement",
   componentId: "sc-1lt1ols-3"
-})(["margin:0.5rem 0 !important;font-size:", ";padding:0.5rem 2px;display:flex;align-items:center;justify-content:space-between;"], uiFonts.size.small);
-var FriendRequestTitle = /*#__PURE__*/styled.h3.withConfig({
-  displayName: "SearchFriend__FriendRequestTitle",
+})(["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"
-})(["font-size:", " !important;margin-top:0.5rem !important;text-align:center;gap:0.5rem;"], uiFonts.size.small);
-var AcceptRejectButtonContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SearchFriend__AcceptRejectButtonContainer",
+})(["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"
-})(["display:flex;justify-content:space-between;gap:0.5rem;"]);
+})(["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,
@@ -28930,12 +28979,12 @@ var FriendList = function FriendList(_ref) {
       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(UserAction, {
-      color: uiColors.yellow,
+    })), 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(UserAction, {
+    }, "Chat"), React.createElement(UserActionLink, {
       color: uiColors.red,
       onClick: function onClick() {
         return onRemoveFriend(friend);
@@ -28970,13 +29019,6 @@ var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "FriendList__ButtonContainer",
   componentId: "sc-3jf9vt-3"
 })(["display:flex;justify-content:center;align-items:center;width:100%;margin-top:1rem;"]);
-var UserAction = /*#__PURE__*/styled.span.withConfig({
-  displayName: "FriendList__UserAction",
-  componentId: "sc-3jf9vt-4"
-})(["color:", " !important;cursor:pointer;margin-right:0.5rem;&:hover{text-decoration:underline;}"], function (_ref3) {
-  var color = _ref3.color;
-  return color;
-});
 
 var IS_MOBILE_OR_TABLET = /*#__PURE__*/isMobileOrTablet();
 
@@ -29073,7 +29115,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$g, null, React.createElement(DynamicText, {
+  return React.createElement(Container$h, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -29091,7 +29133,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$g = /*#__PURE__*/styled.div.withConfig({
+var Container$h = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -29243,7 +29285,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React.createElement(Container$h, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$i, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -29253,7 +29295,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$h = /*#__PURE__*/styled.div.withConfig({
+var Container$i = /*#__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;"]);
@@ -29314,7 +29356,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$i, null, React.createElement(CloseIcon, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$j, null, React.createElement(CloseIcon, {
     onPointerDown: _onClose
   }, "X"), React.createElement(TextContainer$1, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
@@ -29330,7 +29372,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$j = /*#__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;"]);
@@ -29391,7 +29433,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$j, 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$k, 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() {
@@ -29433,7 +29475,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
+var Container$k = /*#__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;"]);
@@ -29862,7 +29904,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React.createElement(Container$k, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
+  return React.createElement(Container$l, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -29880,7 +29922,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -30483,7 +30525,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React.createElement(Container$l, {
+  return React.createElement(Container$m, {
     x: x,
     y: y
   }, React.createElement("ul", {
@@ -30492,7 +30534,7 @@ var ListMenu = function ListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React.createElement(ListElement$4, {
+    return React.createElement(ListElement$3, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -30500,7 +30542,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__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) {
@@ -30508,7 +30550,7 @@ var Container$l = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$4 = /*#__PURE__*/styled.li.withConfig({
+var ListElement$3 = /*#__PURE__*/styled.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -30519,7 +30561,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$m, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$n, 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));
@@ -30533,7 +30575,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__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);
@@ -30546,7 +30588,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
   var onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     message = _ref.message;
-  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$n, {
+  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$o, {
     onPointerDown: onClose
   }, React.createElement(DraggableContainer, {
     width: "auto",
@@ -30569,7 +30611,7 @@ var Background = /*#__PURE__*/styled.div.withConfig({
   displayName: "ConfirmModal__Background",
   componentId: "sc-11qkyu1-0"
 })(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "ConfirmModal__Container",
   componentId: "sc-11qkyu1-1"
 })(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
@@ -31085,12 +31127,12 @@ var TabBody = function TabBody(_ref) {
   var id = _ref.id,
     children = _ref.children,
     styles = _ref.styles;
-  return React.createElement(Container$o, {
+  return React.createElement(Container$p, {
     styles: styles,
     "data-tab-id": id
   }, children);
 };
-var Container$o = /*#__PURE__*/styled.div.withConfig({
+var Container$p = /*#__PURE__*/styled.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:100%;height:", ";overflow-y:auto;"], function (props) {
@@ -31708,7 +31750,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$p, {
+  return React.createElement(Container$q, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -31738,7 +31780,7 @@ var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$q = /*#__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) {
@@ -31869,54 +31911,256 @@ var Thumbnail = /*#__PURE__*/styled.img.withConfig({
   componentId: "sc-15s2boc-8"
 })(["color:white;z-index:22;width:32px * 1.5;margin-right:0.5rem;position:relative;top:-4px;"]);
 
-var QuestList = function QuestList(_ref) {
-  var quests = _ref.quests,
-    onClose = _ref.onClose,
-    scale = _ref.scale;
-  return React.createElement(QuestDraggableContainer$1, {
-    type: RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
-    },
-    width: "520px",
-    scale: scale
-  }, React.createElement("div", {
+var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
+  var children = _ref.children;
+  return React.createElement(Container$r, null, children);
+};
+var Container$r = /*#__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;}"]);
+
+var RPGUIOverrides = function RPGUIOverrides(_ref) {
+  var children = _ref.children;
+  return React.createElement(RPGUIScrollbar, null, children);
+};
+
+//@ts-ignore
+var _RPGUI = RPGUI;
+var RPGUIRoot = function RPGUIRoot(_ref) {
+  var children = _ref.children;
+  return React.createElement(RPGUIOverrides, null, React.createElement("div", {
+    className: "rpgui-content"
+  }, children));
+};
+
+var SimpleTooltip = function SimpleTooltip(_ref) {
+  var content = _ref.content,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'top' : _ref$direction,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? uiColors.raisinBlack : _ref$backgroundColor,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? uiColors.white : _ref$textColor,
+    children = _ref.children,
+    _ref$showDelay = _ref.showDelay,
+    showDelay = _ref$showDelay === void 0 ? 200 : _ref$showDelay,
+    _ref$hideDelay = _ref.hideDelay,
+    hideDelay = _ref$hideDelay === void 0 ? 200 : _ref$hideDelay;
+  var _useState = useState(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
+  var _useState2 = useState({
+      top: 0,
+      left: 0
+    }),
+    tooltipPosition = _useState2[0],
+    setTooltipPosition = _useState2[1];
+  var tooltipRef = useRef(null);
+  var triggerRef = useRef(null);
+  var timeoutRef = useRef();
+  var calculatePosition = function calculatePosition() {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    var triggerRect = triggerRef.current.getBoundingClientRect();
+    var tooltipRect = tooltipRef.current.getBoundingClientRect();
+    var top, left;
+    switch (direction) {
+      case 'top':
+        top = triggerRect.top - tooltipRect.height - 8;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'bottom':
+        top = triggerRect.bottom + 8;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'left':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.left - tooltipRect.width - 8;
+        break;
+      case 'right':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.right + 8;
+        break;
+      default:
+        top = triggerRect.top - tooltipRect.height - 8;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+    }
+    // Ensure the tooltip stays within the viewport
+    if (left < 8) left = 8;
+    if (left + tooltipRect.width > window.innerWidth) left = window.innerWidth - tooltipRect.width - 8;
+    if (top < 8) top = 8;
+    if (top + tooltipRect.height > window.innerHeight) top = window.innerHeight - tooltipRect.height - 8;
+    setTooltipPosition({
+      top: Math.round(top),
+      left: Math.round(left)
+    });
+  };
+  var showTooltip = function showTooltip() {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(function () {
+      setVisible(true);
+      calculatePosition();
+    }, showDelay);
+  };
+  var hideTooltip = function hideTooltip() {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(function () {
+      setVisible(false);
+    }, hideDelay);
+  };
+  useEffect(function () {
+    var handleMouseMove = function handleMouseMove(event) {
+      if (visible && tooltipRef.current && triggerRef.current) {
+        var tooltipRect = tooltipRef.current.getBoundingClientRect();
+        var triggerRect = triggerRef.current.getBoundingClientRect();
+        var isOutsideTooltip = event.clientX < tooltipRect.left || event.clientX > tooltipRect.right || event.clientY < tooltipRect.top || event.clientY > tooltipRect.bottom;
+        var isOutsideTrigger = event.clientX < triggerRect.left || event.clientX > triggerRect.right || event.clientY < triggerRect.top || event.clientY > triggerRect.bottom;
+        if (isOutsideTooltip && isOutsideTrigger) {
+          hideTooltip();
+        }
+      }
+    };
+    var handleScroll = function handleScroll() {
+      if (visible) {
+        hideTooltip();
+      }
+    };
+    var handleResize = function handleResize() {
+      if (visible) {
+        calculatePosition();
+      }
+    };
+    document.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize);
+    return function () {
+      document.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timeoutRef.current);
+    };
+  }, [visible]);
+  return React.createElement(TooltipContainer, {
+    ref: triggerRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: showTooltip,
+    onBlur: hideTooltip
+  }, children, visible && ReactDOM.createPortal(React.createElement(RPGUIRoot, null, React.createElement(TooltipBox, {
+    ref: tooltipRef,
+    direction: direction,
+    backgroundColor: backgroundColor,
+    textColor: textColor,
     style: {
-      width: '100%'
+      top: tooltipPosition.top,
+      left: tooltipPosition.left
     }
-  }, React.createElement(Title$8, null, "Quests"), React.createElement("hr", {
-    className: "golden"
-  }), React.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
-    return React.createElement("div", {
-      className: "quest-item",
+  }, content)), document.body));
+};
+var TooltipContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleTooltip__TooltipContainer",
+  componentId: "sc-l46vpo-0"
+})(["display:inline-block;cursor:inherit;"]);
+var fadeIn$1 = /*#__PURE__*/keyframes(["from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}"]);
+var TooltipBox = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleTooltip__TooltipBox",
+  componentId: "sc-l46vpo-1"
+})(["position:fixed;z-index:1000;background-color:", ";color:", ";padding:8px;border-radius:4px;font-size:0.65rem;max-width:250px;box-shadow:0px 4px 8px rgba(0,0,0,0.1);animation:", " 0.2s ease-out;line-height:1.3;"], function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+}, function (_ref3) {
+  var textColor = _ref3.textColor;
+  return textColor;
+}, fadeIn$1);
+
+var QuestList = function QuestList(_ref) {
+  var quests = _ref.quests;
+  return React.createElement(QuestListContainer, null, quests && quests.length > 0 ? React.createElement(React.Fragment, null, React.createElement(Table, null, React.createElement("thead", null, React.createElement(TableRow, null, React.createElement(TableHeader, null, "Status"), React.createElement(TableHeader, null, "Title"), React.createElement(TableHeader, null, "Description"), React.createElement(TableHeader, null, "Objectives"), React.createElement(TableHeader, null, "Rewards"))), React.createElement("tbody", null, quests.map(function (quest, i) {
+    var _quest$status;
+    return React.createElement(TableRow, {
       key: i
-    }, React.createElement("span", {
-      className: "quest-number"
-    }, i + 1), React.createElement("div", {
-      className: "quest-detail"
-    }, React.createElement("p", {
-      className: "quest-detail__title"
-    }, quest.title), React.createElement("p", {
-      className: "quest-detail__description"
-    }, quest.description)));
-  }) : React.createElement(NoQuestContainer, null, React.createElement("p", null, "There are no ongoing quests")))));
+    }, React.createElement(TableCell, {
+      style: {
+        color: getStatusColor(quest.status)
+      }
+    }, (_quest$status = quest.status) != null ? _quest$status : 'Unknown'), React.createElement(TableCell, null, React.createElement(SimpleTooltip, {
+      content: formatText(quest.title),
+      direction: "bottom"
+    }, React.createElement(Ellipsis, {
+      maxWidth: "300px"
+    }, formatText(quest.title)))), React.createElement(TableCell, null, React.createElement(SimpleTooltip, {
+      content: quest.description,
+      direction: "bottom"
+    }, React.createElement(Ellipsis, {
+      maxWidth: "300px"
+    }, quest.description))), React.createElement(TableCell, null, React.createElement(SimpleTooltip, {
+      content: formatObjectives(quest.objectives),
+      direction: "bottom"
+    }, React.createElement(Ellipsis, {
+      maxWidth: "300px"
+    }, formatObjectives(quest.objectives)))), React.createElement(TableCell, null, React.createElement(SimpleTooltip, {
+      content: formatRewards(quest.rewards),
+      direction: "bottom"
+    }, React.createElement(Ellipsis, {
+      maxWidth: "200px"
+    }, formatRewards(quest.rewards)))));
+  })))) : React.createElement(NoQuestContainer, null, React.createElement("p", null, "There are no ongoing quests")));
 };
-var QuestDraggableContainer$1 = /*#__PURE__*/styled(DraggableContainer).withConfig({
-  displayName: "QuestList__QuestDraggableContainer",
-  componentId: "sc-1a2vx6q-0"
-})([".container-close{top:10px;right:10px;}.quest-title{text-align:left;margin-left:44px;margin-top:20px;color:yellow;}.quest-desc{margin-top:12px;margin-left:44px;}.rpgui-progress{min-width:80%;margin:0 auto;}"]);
-var Title$8 = /*#__PURE__*/styled.h1.withConfig({
-  displayName: "QuestList__Title",
-  componentId: "sc-1a2vx6q-1"
-})(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
+// Updated helper function to format objectives
+var formatObjectives = function formatObjectives(objectives) {
+  return objectives.map(function (objective) {
+    if ('killCountTarget' in objective) {
+      // This is an IQuestObjectiveKill
+      var killObjective = objective;
+      return "Kill " + formatText(killObjective.creatureKeys.join(', ')) + ": " + killObjective.killCount + "/" + killObjective.killCountTarget;
+    } else if ('targetNPCkey' in objective) {
+      var _interactionObjective;
+      // This is an IQuestObjectiveInteraction
+      var interactionObjective = objective;
+      return "Interact with NPC: " + formatText((_interactionObjective = interactionObjective.targetNPCkey) != null ? _interactionObjective : 'Unknown');
+    } else {
+      return 'Unknown objective';
+    }
+  }).join('; ');
+};
+// Other helper functions remain the same
+var formatRewards = function formatRewards(rewards) {
+  return rewards.map(function (reward) {
+    return "" + formatText(reward.itemKeys.map(function (itemKey) {
+      return itemKey + ' x' + reward.qty;
+    }).join(', ')) + (reward.spellKeys ? ", Spells: " + formatText(reward.spellKeys.join(', ')) : '');
+  }).join('; ');
+};
+var formatText = function formatText(text) {
+  return text.split('-').map(function (word) {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  }).join(' ');
+};
+var getStatusColor = function getStatusColor(status) {
+  switch (status) {
+    case QuestStatus.Pending:
+      return uiColors.orange;
+    // Orange
+    case QuestStatus.InProgress:
+      return uiColors.blue;
+    // Deep Sky Blue
+    case QuestStatus.Completed:
+      return uiColors.lightGreen;
+    // Lime Green
+    default:
+      return uiColors.white;
+    // Default to white
+  }
+};
+// Styled components
 var QuestListContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestList__QuestListContainer",
-  componentId: "sc-1a2vx6q-2"
-})(["margin-top:20px;margin-bottom:40px;overflow-y:auto;max-height:400px;.quest-item{display:flex;align-items:flex-start;margin-bottom:12px;}.quest-number{border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin-right:16px;background-color:brown;flex-shrink:0;}.quest-number.completed{background-color:yellow;}p{margin:0;}.quest-detail__title{color:yellow;}.quest-detail__description{margin-top:5px;}.Noquest-detail__description{margin-top:5px;margin:auto;}"]);
+  componentId: "sc-1a2vx6q-0"
+})(["margin-top:20px;margin-bottom:40px;overflow-y:auto;max-height:400px;background-color:", ";padding:20px;border-radius:10px;border:1px solid ", ";font-size:0.7rem;"], uiColors.darkGray, uiColors.gray);
 var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestList__NoQuestContainer",
-  componentId: "sc-1a2vx6q-3"
-})(["text-align:center;p{margin-top:5px;}"]);
+  componentId: "sc-1a2vx6q-1"
+})(["text-align:center;p{margin-top:5px;color:", ";}"], uiColors.lightGray);
 
 var InputRadio$1 = function InputRadio(_ref) {
   var name = _ref.name,
@@ -31950,29 +32194,6 @@ var InputRadio$1 = function InputRadio(_ref) {
   }));
 };
 
-var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
-  var children = _ref.children;
-  return React.createElement(Container$q, null, children);
-};
-var Container$q = /*#__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;}"]);
-
-var RPGUIOverrides = function RPGUIOverrides(_ref) {
-  var children = _ref.children;
-  return React.createElement(RPGUIScrollbar, null, children);
-};
-
-//@ts-ignore
-var _RPGUI = RPGUI;
-var RPGUIRoot = function RPGUIRoot(_ref) {
-  var children = _ref.children;
-  return React.createElement(RPGUIOverrides, null, React.createElement("div", {
-    className: "rpgui-content"
-  }, children));
-};
-
 var Shortcuts = function Shortcuts(_ref) {
   var shortcuts = _ref.shortcuts,
     onShortcutCast = _ref.onShortcutCast,
@@ -32110,7 +32331,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
   var width = value > 0 ? Math.max(1, Math.min(100, value)) : 0;
-  return React.createElement(Container$r, {
+  return React.createElement(Container$s, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -32119,7 +32340,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$r = /*#__PURE__*/styled.div.withConfig({
+var Container$s = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -32399,7 +32620,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$s, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$9, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$t, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$8, 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"
@@ -32425,11 +32646,11 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React.createElement(Description$2, null, description));
 };
-var Container$s = /*#__PURE__*/styled.div.withConfig({
+var Container$t = /*#__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);
-var Title$9 = /*#__PURE__*/styled.div.withConfig({
+var Title$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Title",
   componentId: "sc-4hbw3q-1"
 })(["font-size:", ";font-weight:bold;margin-bottom:0.5rem;display:flex;align-items:center;margin:0;"], uiFonts.size.medium);
@@ -32479,7 +32700,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$t, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$u, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -32504,7 +32725,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$t = /*#__PURE__*/styled.div.withConfig({
+var Container$u = /*#__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;}"]);
@@ -32545,13 +32766,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$u, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$v, {
     ref: ref
   }, React.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$u = /*#__PURE__*/styled.div.withConfig({
+var Container$v = /*#__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;"]);
@@ -32611,7 +32832,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React.createElement(Container$v, {
+  }, React.createElement(Container$w, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -32624,13 +32845,13 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React.createElement(Info, null, React.createElement(Title$a, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$9, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React.createElement(Description$3, null, description)), React.createElement(Divider, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
     className: "mana"
   }, manaCost))));
 };
-var Container$v = /*#__PURE__*/styled.button.withConfig({
+var Container$w = /*#__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) {
@@ -32645,7 +32866,7 @@ var Info = /*#__PURE__*/styled.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$a = /*#__PURE__*/styled.p.withConfig({
+var Title$9 = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Title",
   componentId: "sc-j96fa2-3"
 })(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
@@ -32709,7 +32930,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$w, null, React.createElement(Title$b, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$x, null, React.createElement(Title$a, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -32741,11 +32962,11 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$b = /*#__PURE__*/styled.h1.withConfig({
+var Title$a = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$w = /*#__PURE__*/styled.div.withConfig({
+var Container$x = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -33231,7 +33452,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$c, null, Capitalize(type), " Menu"), React.createElement("hr", {
+  }, React.createElement(Title$b, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
   })), React.createElement(TradingComponentScrollWrapper, {
     id: "TraderContainer"
@@ -33262,7 +33483,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$c = /*#__PURE__*/styled.h1.withConfig({
+var Title$b = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -33296,11 +33517,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$x, {
+  return React.createElement(Container$y, {
     maxLines: maxLines
   }, children);
 };
-var Container$x = /*#__PURE__*/styled.div.withConfig({
+var Container$y = /*#__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) {
@@ -33408,7 +33629,7 @@ var TutorialStepper = /*#__PURE__*/React.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React.createElement(Container$y, null, React.createElement(Stepper, {
+  return React.createElement(Container$z, null, React.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -33425,7 +33646,7 @@ var LessonBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$y = /*#__PURE__*/styled.div.withConfig({
+var Container$z = /*#__PURE__*/styled.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);
@@ -33446,5 +33667,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TableTab, TabsContainer, TextArea, TimeWidget, TradingMenu, Truncate, TutorialStepper, _RPGUI, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
+export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, Stepper, TabBody, Table, TableCell, TableHeader, TableRow, TableTab, TabsContainer, TextArea, TimeWidget, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map