@rpg-engine/long-bow 0.5.41 → 0.5.43

package/dist/long-bow.esm.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 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 dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import { RxPaperPlane, RxMagnifyingGlass } from 'react-icons/rx';
+import { RxPaperPlane, RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import Draggable from 'react-draggable';
 import ReactDOM from 'react-dom';
 import { camelCase } from 'lodash-es';
@@ -12602,11 +12602,8 @@ var Chat = function Chat(_ref) {
 var ChatContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Chat__ChatContainer",
   componentId: "sc-1bk05n6-0"
-})(["height:", ";width:", ";padding:10px;background-color:rgba(0,0,0,0.2);height:auto;"], function (props) {
+})(["height:", " !important;width:100%;padding:10px;background-color:rgba(0,0,0,0.2);height:auto;"], function (props) {
   return props.height;
-}, function (_ref2) {
-  var width = _ref2.width;
-  return width;
 });
 var TextField = /*#__PURE__*/styled.input.withConfig({
   displayName: "Chat__TextField",
@@ -12615,12 +12612,12 @@ var TextField = /*#__PURE__*/styled.input.withConfig({
 var MessagesContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Chat__MessagesContainer",
   componentId: "sc-1bk05n6-2"
-})(["height:70%;margin-bottom:10px;.chat-body{max-height:auto;overflow-y:auto;}"]);
+})(["height:70%;margin-bottom:10px;overflow-y:auto;"]);
 var Message = /*#__PURE__*/styled.div.withConfig({
   displayName: "Chat__Message",
   componentId: "sc-1bk05n6-3"
-})(["margin-bottom:8px;color:", ";"], function (_ref3) {
-  var color = _ref3.color;
+})(["margin-bottom:8px;color:", ";"], function (_ref2) {
+  var color = _ref2.color;
   return color;
 });
 var Form = /*#__PURE__*/styled.form.withConfig({
@@ -12630,11 +12627,11 @@ var Form = /*#__PURE__*/styled.form.withConfig({
 var Button$1 = /*#__PURE__*/styled.button.withConfig({
   displayName: "Chat__Button",
   componentId: "sc-1bk05n6-5"
-})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref4) {
-  var buttonColor = _ref4.buttonColor;
+})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref3) {
+  var buttonColor = _ref3.buttonColor;
   return buttonColor;
-}, function (_ref5) {
-  var buttonBackgroundColor = _ref5.buttonBackgroundColor;
+}, function (_ref4) {
+  var buttonBackgroundColor = _ref4.buttonBackgroundColor;
   return buttonBackgroundColor;
 });
 
@@ -12689,31 +12686,30 @@ var SearchCharacter = function SearchCharacter(_ref) {
     onCharacterClick(character);
     setShowSearchCharacter(false);
   };
-  return React.createElement(SearchCharacterContainer, {
-    width: (styles == null ? void 0 : styles.width) || '80%',
-    height: (styles == null ? void 0 : styles.height) || 'auto'
-  }, React.createElement(Form$1, {
+  return React.createElement(SearchContainer, null, React.createElement(Form$1, {
     onSubmit: handleSubmit
   }, React.createElement(Column, {
     flex: 70
   }, React.createElement(TextField$1, {
     value: characterName,
-    id: "inputCharacterName",
+    id: "characterName",
+    name: 'characterName',
     onChange: function onChange(e) {
       setCharacterName(e.target.value);
       onChangeCharacterName(e.target.value);
     },
+    placeholder: 'Search for a character...',
     height: 20,
     type: "text",
     autoComplete: "off",
     onFocus: onFocus,
     onBlur: onBlur,
     onPointerDown: onFocus,
-    autoFocus: true,
-    placeholder: "Type a character name..."
+    autoFocus: true
   })), React.createElement(Column, {
     justifyContent: "flex-end"
   }, React.createElement(SearchButton, {
+    type: 'submit',
     buttonColor: (styles == null ? void 0 : styles.buttonColor) || '#005b96',
     buttonBackgroundColor: (styles == null ? void 0 : styles.buttonBackgroundColor) || 'rgba(0,0,0,.5)',
     id: "chat-send-button",
@@ -12731,15 +12727,10 @@ var SearchCharacter = function SearchCharacter(_ref) {
     }, character.name);
   })));
 };
-var SearchCharacterContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SearchCharacter__SearchCharacterContainer",
+var SearchContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchCharacter__SearchContainer",
   componentId: "sc-172lyfr-0"
-})(["height:", ";width:", ";padding:10px;background-color:rgba(0,0,0,0.2);height:auto;"], function (props) {
-  return props.height;
-}, function (_ref2) {
-  var width = _ref2.width;
-  return width;
-});
+})(["width:100%;"]);
 var Form$1 = /*#__PURE__*/styled.form.withConfig({
   displayName: "SearchCharacter__Form",
   componentId: "sc-172lyfr-1"
@@ -12751,11 +12742,11 @@ var TextField$1 = /*#__PURE__*/styled.input.withConfig({
 var SearchButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "SearchCharacter__SearchButton",
   componentId: "sc-172lyfr-3"
-})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref3) {
-  var buttonColor = _ref3.buttonColor;
+})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref2) {
+  var buttonColor = _ref2.buttonColor;
   return buttonColor;
-}, function (_ref4) {
-  var buttonBackgroundColor = _ref4.buttonBackgroundColor;
+}, function (_ref3) {
+  var buttonBackgroundColor = _ref3.buttonBackgroundColor;
   return buttonBackgroundColor;
 });
 var ListContainer = /*#__PURE__*/styled.ul.withConfig({
@@ -12765,7 +12756,7 @@ var ListContainer = /*#__PURE__*/styled.ul.withConfig({
 var ListElement = /*#__PURE__*/styled.li.withConfig({
   displayName: "SearchCharacter__ListElement",
   componentId: "sc-172lyfr-5"
-})(["margin:0.5rem 0 !important;font-size:", ";&:hover{color:#ff0;background-color:", ";}button{all:unset;}"], uiFonts.size.small, uiColors.darkGray);
+})(["margin:0.5rem 0 !important;font-size:", ";padding:0.5rem 2px;&:hover{color:#ff0;background-color:", ";}button{all:unset;}"], uiFonts.size.small, uiColors.darkGray);
 
 var ChatRevamp = function ChatRevamp(_ref) {
   var chatMessages = _ref.chatMessages,
@@ -12780,14 +12771,29 @@ var ChatRevamp = function ChatRevamp(_ref) {
     activeTab = _ref.activeTab,
     privateChatCharacters = _ref.privateChatCharacters,
     onCharacterClick = _ref.onCharacterClick,
-    onSendPrivateChatMessage = _ref.onSendPrivateChatMessage;
+    onSendPrivateChatMessage = _ref.onSendPrivateChatMessage,
+    recentChatCharacters = _ref.recentChatCharacters,
+    _ref$recentSelectedCh = _ref.recentSelectedChatCharacterId,
+    recentSelectedChatCharacterId = _ref$recentSelectedCh === void 0 ? '' : _ref$recentSelectedCh,
+    onPreviousChatCharacterClick = _ref.onPreviousChatCharacterClick,
+    onRemoveRecentChatCharacter = _ref.onRemoveRecentChatCharacter,
+    _ref$unseenMessageCha = _ref.unseenMessageCharacterIds,
+    unseenMessageCharacterIds = _ref$unseenMessageCha === void 0 ? [] : _ref$unseenMessageCha;
   var _useState = useState(true),
-    showSearchCharacter = _useState[0],
-    setShowSearchCharacter = _useState[1];
+    showSearchCharacterUI = _useState[0],
+    setShowSearchCharacterUI = _useState[1];
+  var _useState2 = useState(false),
+    showRecentChats = _useState2[0],
+    setShowRecentChats = _useState2[1];
   useEffect(function () {
-    setShowSearchCharacter(true);
+    setShowSearchCharacterUI(true);
   }, [activeTab]);
   var isPrivate = activeTab === 'private';
+  var handlePreviousChatCharacterClick = function handlePreviousChatCharacterClick(character) {
+    if (!onPreviousChatCharacterClick) return;
+    onPreviousChatCharacterClick(character);
+    setShowSearchCharacterUI(false);
+  };
   return React.createElement(React.Fragment, null, React.createElement(TabContainer, null, tabs.map(function (tab, index) {
     return React.createElement(Tab, {
       key: tab.label + "_" + index,
@@ -12796,13 +12802,54 @@ var ChatRevamp = function ChatRevamp(_ref) {
         return onChangeTab(tab.id);
       }
     }, tab.label);
-  })), isPrivate && showSearchCharacter ? React.createElement(SearchCharacter, {
+  })), React.createElement(PrivateChatContainer, {
+    width: (styles == null ? void 0 : styles.width) || '80%',
+    height: (styles == null ? void 0 : styles.height) || 'auto'
+  }, React.createElement(RecentChatTabContainer, {
+    isPrivate: isPrivate,
+    isOpen: showRecentChats
+  }, React.createElement(RecentChatTopBar, {
+    isOpen: showRecentChats
+  }, React.createElement(BurgerIconContainer, {
+    onPointerDown: function onPointerDown() {
+      return setShowRecentChats(function (t) {
+        return !t;
+      });
+    },
+    hasUnseenMessages: (unseenMessageCharacterIds == null ? void 0 : unseenMessageCharacterIds.length) > 0 ? true : false
+  }, React.createElement(BurgerLineIcon, null), React.createElement(BurgerLineIcon, null), React.createElement(BurgerLineIcon, null)), showRecentChats && React.createElement(SearchButton$1, {
+    onPointerDown: function onPointerDown() {
+      return setShowSearchCharacterUI(true);
+    }
+  }, React.createElement(RxMagnifyingGlass, {
+    size: 16,
+    color: uiColors.white
+  }))), React.createElement(RecentChatLogContainer, {
+    isOpen: showRecentChats
+  }, recentChatCharacters == null ? void 0 : recentChatCharacters.map(function (character) {
+    return React.createElement(ListElementContainer, {
+      key: character._id
+    }, React.createElement(ListElement$1, {
+      active: character._id === recentSelectedChatCharacterId,
+      onPointerDown: function onPointerDown() {
+        return handlePreviousChatCharacterClick(character);
+      }
+    }, React.createElement(StatusDot, {
+      isUnseen: (unseenMessageCharacterIds == null ? void 0 : unseenMessageCharacterIds.includes(character._id)) || false
+    }), character.name), React.createElement(CloseButton, {
+      onPointerDown: function onPointerDown() {
+        return onRemoveRecentChatCharacter == null ? void 0 : onRemoveRecentChatCharacter(character);
+      }
+    }, React.createElement(RxCross2, {
+      size: 16
+    })));
+  }))), isPrivate && showSearchCharacterUI ? React.createElement(SearchCharacter, {
     onFocus: onFocus,
     onBlur: onBlur,
     onChangeCharacterName: onChangeCharacterName,
     styles: styles,
     recentCharacters: privateChatCharacters,
-    setShowSearchCharacter: setShowSearchCharacter,
+    setShowSearchCharacter: setShowSearchCharacterUI,
     onCharacterClick: onCharacterClick
   }) : React.createElement(Chat, {
     chatMessages: chatMessages,
@@ -12812,7 +12859,7 @@ var ChatRevamp = function ChatRevamp(_ref) {
     styles: styles,
     onFocus: onFocus,
     onBlur: onBlur
-  }));
+  })));
 };
 var TabContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ChatRevamp__TabContainer",
@@ -12828,6 +12875,70 @@ var Tab = /*#__PURE__*/styled.button.withConfig({
 }, function (props) {
   return props.active ? 'white' : uiColors.raisinBlack;
 });
+var PrivateChatContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__PrivateChatContainer",
+  componentId: "sc-1sdiknw-2"
+})(["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;
+}, function (_ref3) {
+  var height = _ref3.height;
+  return height;
+});
+var RecentChatTabContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__RecentChatTabContainer",
+  componentId: "sc-1sdiknw-3"
+})(["display:", ";flex-direction:column;border-right:1px solid ", ";outline:none;width:", " !important;transition:width 0.3s ease-in-out;overflow:hidden;@media (max-width:768px){width:", " !important;}"], function (props) {
+  return props.isPrivate ? 'flex' : 'none';
+}, uiColors.gray, function (props) {
+  return props.isOpen ? '20%' : '30px';
+}, function (props) {
+  return props.isOpen ? '40%' : '30px';
+});
+var RecentChatTopBar = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__RecentChatTopBar",
+  componentId: "sc-1sdiknw-4"
+})(["display:flex;align-items:center;justify-content:space-between;height:30px;"]);
+var SearchButton$1 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ChatRevamp__SearchButton",
+  componentId: "sc-1sdiknw-5"
+})(["border:none;background-color:transparent;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:4px;position:relative;"]);
+var BurgerIconContainer = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ChatRevamp__BurgerIconContainer",
+  componentId: "sc-1sdiknw-6"
+})(["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.span.withConfig({
+  displayName: "ChatRevamp__BurgerLineIcon",
+  componentId: "sc-1sdiknw-7"
+})(["width:1rem;height:2px;background-color:#ffffff;"]);
+var RecentChatLogContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__RecentChatLogContainer",
+  componentId: "sc-1sdiknw-8"
+})(["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.div.withConfig({
+  displayName: "ChatRevamp__ListElementContainer",
+  componentId: "sc-1sdiknw-9"
+})(["display:flex;justify-content:space-between;align-items:center;"]);
+var ListElement$1 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ChatRevamp__ListElement",
+  componentId: "sc-1sdiknw-10"
+})(["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;}"], uiFonts.size.small, function (props) {
+  return props.active ? uiColors.yellow : uiColors.white;
+});
+var StatusDot = /*#__PURE__*/styled.span.withConfig({
+  displayName: "ChatRevamp__StatusDot",
+  componentId: "sc-1sdiknw-11"
+})(["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 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ChatRevamp__CloseButton",
+  componentId: "sc-1sdiknw-12"
+})(["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 _excluded$2 = ["innerRef"];
 var Input = function Input(_ref) {
@@ -12925,7 +13036,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
     opacity: opacity
   }, React.createElement(ErrorBoundary$1, {
     fallback: React.createElement("p", null, "Oops! Your chat has crashed.")
-  }, onCloseButton && React.createElement(CloseButton, {
+  }, onCloseButton && React.createElement(CloseButton$1, {
     onPointerDown: onCloseButton
   }, "X"), React.createElement(RPGUIContainer, {
     type: RPGUIContainerTypes.FramedGrey,
@@ -12959,7 +13070,7 @@ var Container$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ChatDeprecated__Container",
   componentId: "sc-fuuod3-0"
 })(["position:relative;"]);
-var CloseButton = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ChatDeprecated__CloseButton",
   componentId: "sc-fuuod3-1"
 })(["position:absolute;top:2px;right:0px;color:white;z-index:22;font-size:0.7rem;"]);
@@ -13301,7 +13412,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
   }, React.createElement(Title, null, imgSrc && React.createElement(Icon, {
     src: imgSrc,
     width: imgWidth
-  }), title)), onCloseButton && React.createElement(CloseButton$1, {
+  }), title)), onCloseButton && React.createElement(CloseButton$2, {
     className: "container-close",
     onPointerDown: onCloseButton
   }, "X"), children));
@@ -13315,7 +13426,7 @@ var Container$6 = /*#__PURE__*/styled.div.withConfig({
   var width = _ref2.width;
   return width;
 });
-var CloseButton$1 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$2 = /*#__PURE__*/styled.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;}"]);
@@ -13525,7 +13636,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React.createElement(ListElement$1, {
+    return React.createElement(ListElement$2, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -13543,7 +13654,7 @@ var Container$8 = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.fontSize;
 });
-var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
+var ListElement$2 = /*#__PURE__*/styled.li.withConfig({
   displayName: "RelativeListMenu__ListElement",
   componentId: "sc-7hohf-1"
 })(["margin-right:0.5rem;"]);
@@ -15574,7 +15685,7 @@ var ImageCarousel = function ImageCarousel(_ref) {
     onPointerDown: function onPointerDown() {
       return goToNextImage();
     }
-  }))), onCloseButton && React.createElement(CloseButton$2, {
+  }))), onCloseButton && React.createElement(CloseButton$3, {
     className: "container-close",
     onPointerDown: onCloseButton
   }, "X"));
@@ -15605,7 +15716,7 @@ var Description$1 = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.isTextFixed ? 'none' : 'rgba(0, 0, 0, 0.6)';
 });
-var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$3 = /*#__PURE__*/styled.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;}"]);
@@ -15890,7 +16001,7 @@ var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
   return React.createElement(StyledContainer, {
     type: RPGUIContainerTypes.Framed,
     width: "25rem"
-  }, React.createElement(CloseButton$3, {
+  }, React.createElement(CloseButton$4, {
     className: "container-close",
     onPointerDown: onClose
   }, "X"), React.createElement("h2", null, "Select quantity to move"), React.createElement(StyledForm, {
@@ -15948,7 +16059,7 @@ var StyledInput = /*#__PURE__*/styled(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$3 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemQuantitySelector__CloseButton",
   componentId: "sc-yfdtpn-3"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
@@ -15981,6 +16092,7 @@ var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1b8cosc-0"
 })(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
 
+var MIN_SLOTS_FOR_SCROLL = 20;
 var ItemContainer$1 = function ItemContainer(_ref) {
   var itemContainer = _ref.itemContainer,
     onClose = _ref.onClose,
@@ -16136,7 +16248,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React.createElement(ItemsContainer, {
     className: "item-container-body",
-    ref: containerRef
+    ref: containerRef,
+    isScrollable: itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL
   }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ItemQuantitySelectorModal, {
     quantitySelect: quantitySelect,
     setQuantitySelect: setQuantitySelect
@@ -16145,7 +16258,10 @@ var ItemContainer$1 = function ItemContainer(_ref) {
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
   componentId: "sc-15y5p9l-0"
-})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:auto;overflow-x:hidden;width:415px;"]);
+})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:", ";overflow-x:hidden;width:415px;"], function (_ref2) {
+  var isScrollable = _ref2.isScrollable;
+  return isScrollable ? 'scroll' : 'hidden';
+});
 
 var LeaderboardTable = function LeaderboardTable(props) {
   var items = props.items,
@@ -16279,7 +16395,7 @@ var ListMenu = function ListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React.createElement(ListElement$2, {
+    return React.createElement(ListElement$3, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -16295,7 +16411,7 @@ var Container$k = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$2 = /*#__PURE__*/styled.li.withConfig({
+var ListElement$3 = /*#__PURE__*/styled.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -17953,7 +18069,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React.createElement(CloseButton$4, {
+  }, onCloseButton && React.createElement(CloseButton$5, {
     onPointerDown: onCloseButton
   }, "X"), React.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -17989,7 +18105,7 @@ var SkillSplitDiv = /*#__PURE__*/styled.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$4 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -18399,7 +18515,7 @@ var TimeWidget = function TimeWidget(_ref) {
     scale = _ref.scale;
   return React.createElement(Draggable, {
     scale: scale
-  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$5, {
+  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$6, {
     onPointerDown: onClose
   }, "X"), React.createElement(DayNightContainer, null, React.createElement(DayNightPeriod, {
     periodOfDay: periodOfDay
@@ -18413,7 +18529,7 @@ var Time = /*#__PURE__*/styled.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$5 = /*#__PURE__*/styled.p.withConfig({
+var CloseButton$6 = /*#__PURE__*/styled.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);