@rpg-engine/long-bow 0.7.0 → 0.7.1

package/dist/long-bow.cjs.development.js

@@ -13,6 +13,7 @@ var uuid = require('uuid');
 var shared = require('@rpg-engine/shared');
 var dayjs = _interopDefault(require('dayjs'));
 var reactErrorBoundary = require('react-error-boundary');
+var fa = require('react-icons/fa');
 var rx = require('react-icons/rx');
 var Draggable = _interopDefault(require('react-draggable'));
 var ReactDOM = _interopDefault(require('react-dom'));
@@ -26095,38 +26096,23 @@ var Container$4 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-b34498-0"
 })(["display:flex;flex-direction:column;align-items:center;image-rendering:pixelated;"]);
 
-var Column = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "Column",
-  componentId: "sc-1pesqff-0"
-})(["flex:", ";display:flex;flex-wrap:", ";align-items:", ";justify-content:", ";"], function (props) {
-  return props.flex || 'auto';
-}, function (props) {
-  return props.flexWrap || 'nowrap';
-}, function (props) {
-  return props.alignItems || 'flex-start';
-}, function (props) {
-  return props.justifyContent || 'flex-start';
-});
-
 var Chat = function Chat(_ref) {
   var chatMessages = _ref.chatMessages,
     onSendChatMessage = _ref.onSendChatMessage,
+    onCloseButton = _ref.onCloseButton,
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
-      textColor: '#c65102',
-      buttonColor: '#005b96',
-      buttonBackgroundColor: 'rgba(0,0,0,.2)',
-      width: '80%',
-      height: 'auto'
+      textColor: '#ff6600',
+      buttonColor: '#ff6600',
+      buttonBackgroundColor: '#333',
+      width: '100%',
+      height: '100%'
     } : _ref$styles;
   var _useState = React.useState(''),
     message = _useState[0],
     setMessage = _useState[1];
-  React.useEffect(function () {
-    scrollChatToBottom();
-  }, []);
   React.useEffect(function () {
     scrollChatToBottom();
   }, [chatMessages]);
@@ -26138,98 +26124,89 @@ var Chat = function Chat(_ref) {
   };
   var handleSubmit = function handleSubmit(event) {
     event.preventDefault();
-    if (!message || message.trim() === '') return;
+    if (!message.trim()) return;
     onSendChatMessage(message);
     setMessage('');
   };
-  var getInputValue = function getInputValue(value) {
-    setMessage(value);
-  };
-  var onRenderMessageLines = function onRenderMessageLines(emitter, createdAt, message) {
-    return dayjs(createdAt || new Date()).format('HH:mm') + " " + (emitter != null && emitter.name ? emitter.name + ": " : 'Unknown: ') + " " + message;
+  var truncateName = function truncateName(name, maxLength) {
+    if (maxLength === void 0) {
+      maxLength = 10;
+    }
+    return name.length > maxLength ? name.slice(0, maxLength) + '...' : name;
   };
-  var onRenderChatMessages = function onRenderChatMessages(chatMessages) {
-    return chatMessages != null && chatMessages.length ? chatMessages == null ? void 0 : chatMessages.map(function (chatMessage, index) {
-      return React__default.createElement(Message, {
-        color: (styles == null ? void 0 : styles.textColor) || '#c65102',
-        key: chatMessage._id + "_" + index
-      }, onRenderMessageLines(chatMessage.emitter, chatMessage.createdAt, chatMessage.message));
-    }) : React__default.createElement(Message, {
-      color: (styles == null ? void 0 : styles.textColor) || '#c65102'
-    }, "No messages available.");
+  var formatMessage = function formatMessage(chatMessage) {
+    var timestamp = dayjs(chatMessage.createdAt).format('HH:mm');
+    var truncatedName = truncateName(chatMessage.emitter.name);
+    return timestamp + " " + truncatedName + ": " + chatMessage.message;
   };
   return React__default.createElement(ChatContainer, {
-    width: (styles == null ? void 0 : styles.width) || '80%',
-    height: (styles == null ? void 0 : styles.height) || 'auto'
-  }, React__default.createElement(reactErrorBoundary.ErrorBoundary, {
+    width: styles.width || 'auto',
+    height: styles.height || 'auto'
+  }, React__default.createElement(CloseButton, {
+    onClick: onCloseButton
+  }, React__default.createElement(fa.FaTimes, null)), React__default.createElement(reactErrorBoundary.ErrorBoundary, {
     fallback: React__default.createElement("p", null, "Oops! Your chat has crashed.")
   }, React__default.createElement(MessagesContainer, {
     className: "chat-body"
-  }, onRenderChatMessages(chatMessages)), React__default.createElement(Form, {
+  }, chatMessages.map(function (chatMessage, index) {
+    return React__default.createElement(Message, {
+      color: styles.textColor || uiColors.yellow,
+      key: chatMessage._id + "_" + index
+    }, formatMessage(chatMessage));
+  })), React__default.createElement(Form, {
     onSubmit: handleSubmit
-  }, React__default.createElement(Column, {
-    flex: 70
   }, React__default.createElement(TextField, {
     value: message,
-    id: "inputMessage",
     onChange: function onChange(e) {
-      return getInputValue(e.target.value);
+      return setMessage(e.target.value);
     },
-    height: 20,
     type: "text",
     autoComplete: "off",
     onFocus: onFocus,
     onBlur: onBlur,
     onPointerDown: onFocus,
-    autoFocus: true
-  })), React__default.createElement(Column, {
-    justifyContent: "flex-end"
-  }, React__default.createElement(Button$1, {
-    buttonColor: (styles == null ? void 0 : styles.buttonColor) || '#005b96',
-    buttonBackgroundColor: (styles == null ? void 0 : styles.buttonBackgroundColor) || 'rgba(0,0,0,.5)',
-    id: "chat-send-button",
-    style: {
-      borderRadius: '20%'
-    }
-  }, React__default.createElement(rx.RxPaperPlane, {
-    size: 15
-  }))))));
+    autoFocus: true,
+    placeholder: "Type your message..."
+  }), React__default.createElement(SendButton, {
+    type: "submit",
+    disabled: !message.trim()
+  }, "\u25B6"))));
 };
 var ChatContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Chat__ChatContainer",
   componentId: "sc-1bk05n6-0"
-})(["height:", " !important;width:100%;padding:10px;background-color:rgba(0,0,0,0.2);height:auto;"], function (props) {
+})(["width:", ";height:", ";background-color:#1e1e1e81;display:flex;flex-direction:column;position:relative;"], function (props) {
+  return props.width;
+}, function (props) {
   return props.height;
 });
-var TextField = /*#__PURE__*/styled__default.input.withConfig({
-  displayName: "Chat__TextField",
-  componentId: "sc-1bk05n6-1"
-})(["width:100%;background-color:rgba(0,0,0,0.25) !important;border:none !important;max-height:28px !important;"]);
 var MessagesContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Chat__MessagesContainer",
-  componentId: "sc-1bk05n6-2"
-})(["height:70%;margin-bottom:10px;overflow-y:auto;"]);
+  componentId: "sc-1bk05n6-1"
+})(["flex-grow:1;overflow-y:auto;padding:10px;margin-left:0.9rem;&::-webkit-scrollbar{width:6px;}&::-webkit-scrollbar-track{background:#333;}&::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;}&::-webkit-scrollbar-thumb:hover{background:#222;}&::-webkit-scrollbar-corner{background:#333;}&::-webkit-scrollbar-button{background:#333;}&::-webkit-scrollbar-button:hover{background:#222;}"]);
 var Message = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Chat__Message",
-  componentId: "sc-1bk05n6-3"
-})(["margin-bottom:8px;color:", ";"], function (_ref2) {
+  componentId: "sc-1bk05n6-2"
+})(["margin-bottom:4px;color:", ";font-family:'Press Start 2P',cursive;font-size:0.7rem;white-space:pre-wrap;word-break:break-word;"], function (_ref2) {
   var color = _ref2.color;
   return color;
 });
 var Form = /*#__PURE__*/styled__default.form.withConfig({
   displayName: "Chat__Form",
+  componentId: "sc-1bk05n6-3"
+})(["display:flex;width:100%;padding:5px;"]);
+var TextField = /*#__PURE__*/styled__default.input.withConfig({
+  displayName: "Chat__TextField",
   componentId: "sc-1bk05n6-4"
-})(["display:flex;width:100%;justify-content:center;align-items:center;"]);
-var Button$1 = /*#__PURE__*/styled__default.button.withConfig({
-  displayName: "Chat__Button",
+})(["flex-grow:1;background-color:transparent;color:#ff6600;border:none;font-family:'Press Start 2P',cursive;font-size:0.7rem;border-radius:5px;margin-left:0.9rem;&::placeholder{color:", ";font-size:0.7rem;}&:focus{outline:none;}"], uiColors.lightGray);
+var SendButton = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "Chat__SendButton",
   componentId: "sc-1bk05n6-5"
-})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref3) {
-  var buttonColor = _ref3.buttonColor;
-  return buttonColor;
-}, function (_ref4) {
-  var buttonBackgroundColor = _ref4.buttonBackgroundColor;
-  return buttonBackgroundColor;
-});
+})(["background-color:transparent;color:#ff6600;border:none;padding:0 10px;font-size:18px;cursor:pointer;transition:color 0.3s ease;&:hover{color:#ff8533;}&:disabled{color:#666;cursor:not-allowed;}"]);
+var CloseButton = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "Chat__CloseButton",
+  componentId: "sc-1bk05n6-6"
+})(["position:absolute;top:-10px;right:-10px;background-color:transparent;border:none;color:white;font-size:16px;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:color 0.3s ease;&:hover{color:", ";}"], uiColors.darkYellow);
 
 var _excluded$2 = ["innerRef"];
 var Input = function Input(_ref) {
@@ -26269,6 +26246,19 @@ var Container$5 = /*#__PURE__*/styled__default.div.withConfig({
   return width;
 });
 
+var Column = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Column",
+  componentId: "sc-1pesqff-0"
+})(["flex:", ";display:flex;flex-wrap:", ";align-items:", ";justify-content:", ";"], function (props) {
+  return props.flex || 'auto';
+}, function (props) {
+  return props.flexWrap || 'nowrap';
+}, function (props) {
+  return props.alignItems || 'flex-start';
+}, function (props) {
+  return props.justifyContent || 'flex-start';
+});
+
 var ChatDeprecated = function ChatDeprecated(_ref) {
   var chatMessages = _ref.chatMessages,
     onSendChatMessage = _ref.onSendChatMessage,
@@ -26326,7 +26316,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
     opacity: opacity
   }, React__default.createElement(reactErrorBoundary.ErrorBoundary, {
     fallback: React__default.createElement("p", null, "Oops! Your chat has crashed.")
-  }, onCloseButton && React__default.createElement(CloseButton, {
+  }, onCloseButton && React__default.createElement(CloseButton$1, {
     onPointerDown: onCloseButton
   }, "X"), React__default.createElement(RPGUIContainer, {
     type: exports.RPGUIContainerTypes.FramedGrey,
@@ -26360,7 +26350,7 @@ var Container$6 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatDeprecated__Container",
   componentId: "sc-fuuod3-0"
 })(["position:relative;"]);
-var CloseButton = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatDeprecated__CloseButton",
   componentId: "sc-fuuod3-1"
 })(["position:absolute;top:2px;right:0px;color:white;z-index:22;font-size:0.7rem;"]);
@@ -26575,7 +26565,7 @@ var ChatRevamp = function ChatRevamp(_ref) {
       }), React__default.createElement(Ellipsis, {
         maxWidth: "140px",
         maxLines: 1
-      }, character.name)), React__default.createElement(CloseButton$1, {
+      }, character.name)), React__default.createElement(CloseButton$2, {
         onPointerDown: function onPointerDown() {
           return onRemoveRecentChatCharacter == null ? void 0 : onRemoveRecentChatCharacter(character);
         }
@@ -26606,7 +26596,7 @@ var ChatRevamp = function ChatRevamp(_ref) {
       onBlur: onBlur
     });
   };
-  return React__default.createElement(React__default.Fragment, null, renderTabs(), React__default.createElement(PrivateChatContainer, {
+  return React__default.createElement(Container$7, null, renderTabs(), React__default.createElement(PrivateChatContainer, {
     width: (styles == null ? void 0 : styles.width) || '80%',
     height: (styles == null ? void 0 : styles.height) || 'auto'
   }, React__default.createElement(RecentChatTabContainer, {
@@ -26614,13 +26604,17 @@ var ChatRevamp = function ChatRevamp(_ref) {
     isOpen: showRecentChats
   }, renderRecentChatTopBar(), renderRecentChatList()), renderChatContent()));
 };
+var Container$7 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ChatRevamp__Container",
+  componentId: "sc-1sdiknw-0"
+})(["max-width:800px;"]);
 var TabContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__TabContainer",
-  componentId: "sc-1sdiknw-0"
+  componentId: "sc-1sdiknw-1"
 })(["width:100%;display:flex;gap:10px;"]);
 var Tab = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ChatRevamp__Tab",
-  componentId: "sc-1sdiknw-1"
+  componentId: "sc-1sdiknw-2"
 })(["width:120px;color:white;font-size:0.8rem;all:unset;padding:0.6rem;font-size:0.8rem;border-radius:5px 5px 0 0;border-width:0.25rem 0.25rem 0 0.25rem;border-style:solid;border-color:", ";background-color:", ";color:", ";"], function (props) {
   return props.active ? '#c65102' : uiColors.gray;
 }, function (props) {
@@ -26630,7 +26624,7 @@ var Tab = /*#__PURE__*/styled__default.button.withConfig({
 });
 var PrivateChatContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__PrivateChatContainer",
-  componentId: "sc-1sdiknw-2"
+  componentId: "sc-1sdiknw-3"
 })(["width:", ";min-height:", " !important;padding:10px;background-color:rgba(0,0,0,0.2);height:auto;display:flex;gap:10px;"], function (_ref2) {
   var width = _ref2.width;
   return width;
@@ -26640,7 +26634,7 @@ var PrivateChatContainer = /*#__PURE__*/styled__default.div.withConfig({
 });
 var RecentChatTabContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__RecentChatTabContainer",
-  componentId: "sc-1sdiknw-3"
+  componentId: "sc-1sdiknw-4"
 })(["display:", ";flex-direction:column;border-right:1px solid ", ";outline:none;width:", ";max-width:200px;min-width:", ";transition:all 0.3s ease-in-out;overflow:hidden;@media (max-width:768px){width:", ";min-width:", ";}"], function (props) {
   return props.isPrivate ? 'flex' : 'none';
 }, uiColors.gray, function (props) {
@@ -26654,47 +26648,47 @@ var RecentChatTabContainer = /*#__PURE__*/styled__default.div.withConfig({
 });
 var RecentChatTopBar = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__RecentChatTopBar",
-  componentId: "sc-1sdiknw-4"
+  componentId: "sc-1sdiknw-5"
 })(["display:flex;align-items:center;justify-content:space-between;height:30px;"]);
 var SearchButton$1 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ChatRevamp__SearchButton",
-  componentId: "sc-1sdiknw-5"
+  componentId: "sc-1sdiknw-6"
 })(["border:none;background-color:transparent;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:4px;position:relative;"]);
 var BurgerIconContainer = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ChatRevamp__BurgerIconContainer",
-  componentId: "sc-1sdiknw-6"
+  componentId: "sc-1sdiknw-7"
 })(["border:none;background-color:transparent;display:flex;flex-direction:column;align-items:flex-end;padding:4px;gap:2px;position:relative;&:after{content:'';width:6px;height:6px;position:absolute;top:0;right:2px;border-radius:50%;background-color:", ";display:", ";}"], uiColors.lightGreen, function (props) {
   return props.hasUnseenMessages ? 'block' : 'none';
 });
 var BurgerLineIcon = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "ChatRevamp__BurgerLineIcon",
-  componentId: "sc-1sdiknw-7"
+  componentId: "sc-1sdiknw-8"
 })(["width:1rem;height:2px;background-color:#ffffff;"]);
 var RecentChatLogContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__RecentChatLogContainer",
-  componentId: "sc-1sdiknw-8"
+  componentId: "sc-1sdiknw-9"
 })(["border:none;list-style:none;display:flex;opacity:", ";flex-direction:column;gap:0.5rem;transition:opacity 0.3s ease-in-out;padding:0;margin:0;flex:1;"], function (props) {
   return props.isOpen ? 1 : 0;
 });
 var ListElementContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__ListElementContainer",
-  componentId: "sc-1sdiknw-9"
+  componentId: "sc-1sdiknw-10"
 })(["display:flex;justify-content:space-between;align-items:center;"]);
 var ListElement$1 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ChatRevamp__ListElement",
-  componentId: "sc-1sdiknw-10"
+  componentId: "sc-1sdiknw-11"
 })(["margin:0.5rem 0 !important;font-size:", " !important;padding:2px;all:unset;color:", ";width:100%;position:relative;display:flex;align-items:center;gap:4px;&:hover{color:#ff0;}max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], uiFonts.size.small, function (props) {
   return props.active ? uiColors.yellow : uiColors.white;
 });
 var StatusDot = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "ChatRevamp__StatusDot",
-  componentId: "sc-1sdiknw-11"
+  componentId: "sc-1sdiknw-12"
 })(["width:6px;height:6px;border-radius:50%;background-color:", ";display:inline-block;margin-right:6px;"], function (props) {
   return props.isUnseen ? uiColors.lightGreen : uiColors.gray;
 });
-var CloseButton$1 = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$2 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ChatRevamp__CloseButton",
-  componentId: "sc-1sdiknw-12"
+  componentId: "sc-1sdiknw-13"
 })(["all:unset;font-size:", ";margin:0 0.5rem;transition:all 0.2s ease-in-out;background-color:", ";color:", ";&:hover{background-color:", ";color:", ";}"], uiFonts.size.xxsmall, uiColors.red, uiColors.white, uiColors.white, uiColors.red);
 
 var CheckButton = function CheckButton(_ref) {
@@ -26904,7 +26898,7 @@ var CircularController = function CircularController(_ref) {
     length: 12
   }).map(function (_, i) {
     return renderShortcut(i);
-  })), React__default.createElement(Button$2, {
+  })), React__default.createElement(Button$1, {
     onTouchStart: onTouchStart,
     onTouchEnd: onTouchEnd.bind(null, onActionClick)
   }, React__default.createElement("div", {
@@ -26914,11 +26908,11 @@ var CircularController = function CircularController(_ref) {
     onTouchEnd: onTouchEnd.bind(null, onCancelClick)
   }, React__default.createElement("span", null, "X")));
 };
-var Button$2 = /*#__PURE__*/styled__default.button.withConfig({
+var Button$1 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "CircularController__Button",
   componentId: "sc-1fewf3h-0"
 })(["width:4.3rem;height:4.3rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;position:relative;transition:all 0.1s;margin-top:-3rem;top:-144px;&.active{background-color:", ";border-color:", ";}.sword{transform:rotate(-45deg);height:2.5rem;width:1.9rem;pointer-events:none;}"], uiColors.lightGray, uiColors.darkGray, uiColors.gray, uiColors.yellow);
-var CancelButton = /*#__PURE__*/styled__default(Button$2).withConfig({
+var CancelButton = /*#__PURE__*/styled__default(Button$1).withConfig({
   displayName: "CircularController__CancelButton",
   componentId: "sc-1fewf3h-1"
 })(["width:3rem;height:3rem;font-size:0.8rem;position:relative;left:2.6rem;span{margin-top:4px;margin-left:2px;pointer-events:none;}"]);
@@ -27037,7 +27031,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
     },
     defaultPosition: initialPosition,
     scale: scale
-  }, React__default.createElement(Container$7, {
+  }, React__default.createElement(Container$8, {
     ref: draggableRef,
     width: width,
     height: height || 'auto',
@@ -27051,12 +27045,12 @@ var DraggableContainer = function DraggableContainer(_ref) {
   }, React__default.createElement(Title, null, imgSrc && React__default.createElement(Icon, {
     src: imgSrc,
     width: imgWidth
-  }), title)), onCloseButton && React__default.createElement(CloseButton$2, {
+  }), title)), onCloseButton && React__default.createElement(CloseButton$3, {
     className: "container-close",
     onPointerDown: onCloseButton
   }, "X"), children));
 };
-var Container$7 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$8 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__Container",
   componentId: "sc-184mpyl-0"
 })(["height:", ";width:", ";min-width:", ";min-height:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;overflow-y:hidden;", " ", " &.rpgui-container{padding-top:1.5rem;}"], function (props) {
@@ -27077,7 +27071,7 @@ var Container$7 = /*#__PURE__*/styled__default.div.withConfig({
   var isFullScreen = _ref6.isFullScreen;
   return isFullScreen && styled.css(["justify-content:center;align-items:flex-start;align-content:flex-start;"]);
 });
-var CloseButton$2 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__CloseButton",
   componentId: "sc-184mpyl-1"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;@media (max-width:950px){font-size:1.7rem;padding:12px;}"]);
@@ -27140,11 +27134,11 @@ var countItemFromInventory = function countItemFromInventory(itemKey, inventory)
 var modalRoot = /*#__PURE__*/document.getElementById('modal-root');
 var ModalPortal = function ModalPortal(_ref) {
   var children = _ref.children;
-  return ReactDOM.createPortal(React__default.createElement(Container$8, {
+  return ReactDOM.createPortal(React__default.createElement(Container$9, {
     className: "rpgui-content"
   }, children), modalRoot);
 };
-var Container$8 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ModalPortal__Container",
   componentId: "sc-dgmp04-0"
 })(["position:static !important;"]);
@@ -27340,7 +27334,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$9, Object.assign({
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$a, Object.assign({
     fontSize: fontSize,
     ref: ref
   }, pos), React__default.createElement("ul", {
@@ -27357,7 +27351,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   }))));
 };
-var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
+var Container$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "RelativeListMenu__Container",
   componentId: "sc-7hohf-0"
 })(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
@@ -27387,7 +27381,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$a, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$b, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -27415,7 +27409,7 @@ var MobileItemTooltip = function MobileItemTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$a = /*#__PURE__*/styled__default.div.withConfig({
+var Container$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MobileItemTooltip__Container",
   componentId: "sc-ku4p1j-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:640px){flex-direction:column;}"]);
@@ -27815,7 +27809,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
       setDraggingItem(item);
     }
   };
-  return React__default.createElement(Container$b, {
+  return React__default.createElement(Container$c, {
     isDraggingItem: !!draggingItem,
     item: item,
     className: "rpgui-icon empty-slot",
@@ -27893,7 +27887,7 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
     setIsTooltipVisible: setTooltipVisible
   }));
 });
-var Container$b = /*#__PURE__*/styled__default.div.withConfig({
+var Container$c = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
 })(["margin:0.1rem;.react-draggable-dragging{opacity:", ";}position:relative;.sprite-from-atlas-img--item{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;border-radius:12px;pointer-events:none;animation:", ";@keyframes bg-color-change{0%{background-color:rgba(255 255 255 / 0.5);}50%{background-color:transparent;}100%{background-color:rgba(255 255 255 / 0.5);}}}"], function (_ref2) {
@@ -28009,7 +28003,7 @@ var ItemInfo = function ItemInfo(_ref) {
     });
   };
   var skillName = (_item$minRequirements = item.minRequirements) == null ? void 0 : (_item$minRequirements2 = _item$minRequirements.skill) == null ? void 0 : _item$minRequirements2.name;
-  return React__default.createElement(Container$c, {
+  return React__default.createElement(Container$d, {
     item: item
   }, React__default.createElement(Header, null, React__default.createElement("div", null, React__default.createElement(Title$1, null, item.name), item.rarity !== 'Common' && React__default.createElement(Rarity, {
     item: item
@@ -28023,7 +28017,7 @@ var ItemInfo = function ItemInfo(_ref) {
     "$isSpecial": true
   }, "Two handed"), React__default.createElement(Description, null, item.description), item.maxStackSize && item.maxStackSize !== 1 && React__default.createElement(StackInfo, null, "x", Math.round(((_item$stackQty = item.stackQty) != null ? _item$stackQty : 1) * 100) / 100, "(", item.maxStackSize, ")"), renderMissingStatistic().length > 0 && React__default.createElement(MissingStatistics, null, React__default.createElement(Statistic, null, "Equipped Diff"), itemToCompare && renderMissingStatistic()));
 };
-var Container$c = /*#__PURE__*/styled__default.div.withConfig({
+var Container$d = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemInfo__Container",
   componentId: "sc-1xm4q8k-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:18rem;@media (max-width:640px){width:80vw;}"], uiFonts.size.small, function (_ref2) {
@@ -28169,7 +28163,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$d, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$e, {
     ref: ref
   }, React__default.createElement(ItemInfoDisplay, {
     item: item,
@@ -28178,7 +28172,7 @@ var ItemTooltip = function ItemTooltip(_ref) {
     equipmentSet: equipmentSet
   })));
 };
-var Container$d = /*#__PURE__*/styled__default.div.withConfig({
+var Container$e = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemTooltip__Container",
   componentId: "sc-11d9r7x-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -28537,7 +28531,7 @@ var Dropdown = function Dropdown(_ref) {
       onChange(selectedValue);
     }
   }, [selectedValue]);
-  return React__default.createElement(Container$e, {
+  return React__default.createElement(Container$f, {
     onMouseLeave: function onMouseLeave() {
       return setOpened(false);
     },
@@ -28565,7 +28559,7 @@ var Dropdown = function Dropdown(_ref) {
     }, option.option);
   })));
 };
-var Container$e = /*#__PURE__*/styled__default.div.withConfig({
+var Container$f = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Dropdown__Container",
   componentId: "sc-8arn65-0"
 })(["position:relative;width:", ";"], function (props) {
@@ -28681,7 +28675,7 @@ var DraggedItem = function DraggedItem(_ref) {
   var centeredX = x - OFFSET;
   var centeredY = y - OFFSET;
   var stackInfo = onRenderStackInfo((_item$_id = item == null ? void 0 : item._id) != null ? _item$_id : '', (_item$stackQty = item == null ? void 0 : item.stackQty) != null ? _item$stackQty : 0);
-  return React__default.createElement(Container$f, null, React__default.createElement(SpriteContainer, {
+  return React__default.createElement(Container$g, null, React__default.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React__default.createElement(SpriteFromAtlas, {
@@ -28699,7 +28693,7 @@ var DraggedItem = function DraggedItem(_ref) {
   }), stackInfo));
 };
 var pulse = "\n  @keyframes pulse {\n    0%, 100% {\n      transform: scale(1) rotate(-3deg);\n    }\n    50% {\n      transform: scale(0.95) rotate(-3deg);\n    }\n  }\n";
-var Container$f = /*#__PURE__*/styled__default.div.withConfig({
+var Container$g = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -28907,7 +28901,7 @@ var SearchFriend = function SearchFriend(_ref) {
     title: "Requests (" + friendRequests.length + ")",
     content: requestsTabContent
   }];
-  return React__default.createElement(Container$g, null, React__default.createElement(TableTab, {
+  return React__default.createElement(Container$h, null, React__default.createElement(TableTab, {
     tabs: tabs,
     activeTextColor: "#000",
     inactiveColor: "#777",
@@ -28949,7 +28943,7 @@ var FriendRequestSection = function FriendRequestSection(_ref3) {
     }, "Reject")));
   })));
 };
-var Container$g = /*#__PURE__*/styled__default.div.withConfig({
+var Container$h = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SearchFriend__Container",
   componentId: "sc-1lt1ols-0"
 })(["display:flex;flex-direction:column;gap:1rem;"]);
@@ -29152,7 +29146,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = React.useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React__default.createElement(Container$h, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$i, null, React__default.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -29170,7 +29164,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$h = /*#__PURE__*/styled__default.div.withConfig({
+var Container$i = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -29322,7 +29316,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React__default.createElement(Container$i, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$j, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -29332,7 +29326,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$i = /*#__PURE__*/styled__default.div.withConfig({
+var Container$j = /*#__PURE__*/styled__default.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;"]);
@@ -29392,7 +29386,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$j, null, React__default.createElement(CloseIcon, {
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$k, null, React__default.createElement(CloseIcon, {
     onPointerDown: _onClose
   }, "X"), React__default.createElement(TextContainer$1, {
     flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
@@ -29408,7 +29402,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$j = /*#__PURE__*/styled__default.div.withConfig({
+var Container$k = /*#__PURE__*/styled__default.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;"]);
@@ -29468,7 +29462,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: exports.RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$k, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$l, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
     flex: '70%'
   }, React__default.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -29510,7 +29504,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$k = /*#__PURE__*/styled__default.div.withConfig({
+var Container$l = /*#__PURE__*/styled__default.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;"]);
@@ -29659,7 +29653,7 @@ var ImageCarousel = function ImageCarousel(_ref) {
     onPointerDown: function onPointerDown() {
       return goToNextImage();
     }
-  }))), onCloseButton && React__default.createElement(CloseButton$3, {
+  }))), onCloseButton && React__default.createElement(CloseButton$4, {
     className: "container-close",
     onPointerDown: onCloseButton
   }, "X"));
@@ -29690,7 +29684,7 @@ var Description$1 = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.isTextFixed ? 'none' : 'rgba(0, 0, 0, 0.6)';
 });
-var CloseButton$3 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ImageCarousel__CloseButton",
   componentId: "sc-jl6f8-4"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;@media (max-width:950px){font-size:1.7rem;padding:12px;}"]);
@@ -29939,7 +29933,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }
     return null;
   };
-  return React__default.createElement(Container$l, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
+  return React__default.createElement(Container$m, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
     id: "shortcuts_list"
   }, Array.from({
     length: 12
@@ -29957,7 +29951,7 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     }, getContent(i));
   })));
 };
-var Container$l = /*#__PURE__*/styled__default.div.withConfig({
+var Container$m = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ShortcutsSetter__Container",
   componentId: "sc-xuouuf-0"
 })(["p{margin:0;margin-left:0.5rem;font-size:10px;}width:100%;"]);
@@ -30068,7 +30062,7 @@ var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
   return React__default.createElement(StyledContainer, {
     type: exports.RPGUIContainerTypes.Framed,
     width: "25rem"
-  }, React__default.createElement(CloseButton$4, {
+  }, React__default.createElement(CloseButton$5, {
     className: "container-close",
     onPointerDown: onClose
   }, "X"), React__default.createElement("h2", null, "Select quantity to move"), React__default.createElement(StyledForm, {
@@ -30126,7 +30120,7 @@ var StyledInput = /*#__PURE__*/styled__default(Input).withConfig({
   displayName: "ItemQuantitySelector__StyledInput",
   componentId: "sc-yfdtpn-2"
 })(["text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
-var CloseButton$4 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$5 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemQuantitySelector__CloseButton",
   componentId: "sc-yfdtpn-3"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
@@ -30559,7 +30553,7 @@ var ListMenu = function ListMenu(_ref) {
     onSelected = _ref.onSelected,
     x = _ref.x,
     y = _ref.y;
-  return React__default.createElement(Container$m, {
+  return React__default.createElement(Container$n, {
     x: x,
     y: y
   }, React__default.createElement("ul", {
@@ -30576,7 +30570,7 @@ var ListMenu = function ListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   })));
 };
-var Container$m = /*#__PURE__*/styled__default.div.withConfig({
+var Container$n = /*#__PURE__*/styled__default.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) {
@@ -30595,7 +30589,7 @@ var Pager = function Pager(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React__default.createElement(Container$n, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
+  return React__default.createElement(Container$o, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -30609,7 +30603,7 @@ var Pager = function Pager(_ref) {
     }
   }, '>')));
 };
-var Container$n = /*#__PURE__*/styled__default.div.withConfig({
+var Container$o = /*#__PURE__*/styled__default.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);
@@ -30622,7 +30616,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
   var onConfirm = _ref.onConfirm,
     onClose = _ref.onClose,
     message = _ref.message;
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$o, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Background, null), React__default.createElement(Container$p, {
     onPointerDown: onClose
   }, React__default.createElement(DraggableContainer, {
     width: "auto",
@@ -30645,7 +30639,7 @@ var Background = /*#__PURE__*/styled__default.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$o = /*#__PURE__*/styled__default.div.withConfig({
+var Container$p = /*#__PURE__*/styled__default.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;"]);
@@ -31162,13 +31156,13 @@ var TabBody = function TabBody(_ref) {
     children = _ref.children,
     styles = _ref.styles,
     centerContent = _ref.centerContent;
-  return React__default.createElement(Container$p, {
+  return React__default.createElement(Container$q, {
     styles: styles,
     "data-tab-id": id,
     centerContent: centerContent
   }, children);
 };
-var Container$p = /*#__PURE__*/styled__default.div.withConfig({
+var Container$q = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TabBody__Container",
   componentId: "sc-196oof2-0"
 })(["width:", ";height:", ";overflow-y:auto;display:", ";justify-content:", ";align-items:", ";"], function (props) {
@@ -31796,7 +31790,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$q, {
+  return React__default.createElement(Container$r, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -31826,7 +31820,7 @@ var TextOverlay$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$q = /*#__PURE__*/styled__default.div.withConfig({
+var Container$r = /*#__PURE__*/styled__default.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) {
@@ -32118,9 +32112,9 @@ var InputRadio$1 = function InputRadio(_ref) {
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React__default.createElement(Container$r, null, children);
+  return React__default.createElement(Container$s, null, children);
 };
-var Container$r = /*#__PURE__*/styled__default.div.withConfig({
+var Container$s = /*#__PURE__*/styled__default.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;}"]);
@@ -32276,7 +32270,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__default.createElement(Container$s, {
+  return React__default.createElement(Container$t, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -32285,7 +32279,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$s = /*#__PURE__*/styled__default.div.withConfig({
+var Container$t = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -32508,7 +32502,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React__default.createElement(CloseButton$5, {
+  }, onCloseButton && React__default.createElement(CloseButton$6, {
     onPointerDown: onCloseButton
   }, "X"), React__default.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -32543,7 +32537,7 @@ var SkillSplitDiv = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillsContainer__SkillSplitDiv",
   componentId: "sc-1g0c67q-2"
 })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$5 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$6 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -32565,7 +32559,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$t, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$8, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$u, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$8, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -32591,7 +32585,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React__default.createElement(Description$2, null, description));
 };
-var Container$t = /*#__PURE__*/styled__default.div.withConfig({
+var Container$u = /*#__PURE__*/styled__default.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);
@@ -32645,7 +32639,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$u, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$v, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -32670,7 +32664,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$u = /*#__PURE__*/styled__default.div.withConfig({
+var Container$v = /*#__PURE__*/styled__default.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;}"]);
@@ -32711,13 +32705,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$v, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$w, {
     ref: ref
   }, React__default.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$v = /*#__PURE__*/styled__default.div.withConfig({
+var Container$w = /*#__PURE__*/styled__default.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;"]);
@@ -32790,7 +32784,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React__default.createElement(Container$w, {
+  }, React__default.createElement(Container$x, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -32809,7 +32803,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$w = /*#__PURE__*/styled__default.button.withConfig({
+var Container$x = /*#__PURE__*/styled__default.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) {
@@ -32888,7 +32882,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$x, null, React__default.createElement(Title$a, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$y, null, React__default.createElement(Title$a, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -32924,7 +32918,7 @@ var Title$a = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$x = /*#__PURE__*/styled__default.div.withConfig({
+var Container$y = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -33171,7 +33165,7 @@ var TimeWidget = function TimeWidget(_ref) {
     scale = _ref.scale;
   return React__default.createElement(Draggable, {
     scale: scale
-  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$6, {
+  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$7, {
     onPointerDown: onClose
   }, "X"), React__default.createElement(DayNightContainer, null, React__default.createElement(DayNightPeriod, {
     periodOfDay: periodOfDay
@@ -33185,7 +33179,7 @@ var Time = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$6 = /*#__PURE__*/styled__default.p.withConfig({
+var CloseButton$7 = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);
@@ -33475,11 +33469,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React__default.createElement(Container$y, {
+  return React__default.createElement(Container$z, {
     maxLines: maxLines
   }, children);
 };
-var Container$y = /*#__PURE__*/styled__default.div.withConfig({
+var Container$z = /*#__PURE__*/styled__default.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) {
@@ -33587,7 +33581,7 @@ var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
       };
     });
   }, [lessons, imageStyle]);
-  return React__default.createElement(Container$z, null, React__default.createElement(Stepper, {
+  return React__default.createElement(Container$A, null, React__default.createElement(Stepper, {
     steps: generateLessons,
     finalCTAButton: {
       label: 'Close',
@@ -33604,7 +33598,7 @@ var LessonBody = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
   componentId: "sc-7tgzv2-1"
 })([""]);
-var Container$z = /*#__PURE__*/styled__default.div.withConfig({
+var Container$A = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__Container",
   componentId: "sc-7tgzv2-2"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);