@rpg-engine/long-bow 0.6.86 → 0.6.88

package/dist/components/ChatRevamp/SearchCharacter.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
+import { ICharacter } from '@rpg-engine/shared/dist/types/character.types';
+import React from 'react';
 import { IStyles } from '../Chat/Chat';
-import type { PrivateChatCharacter } from './ChatRevamp';
 interface ISearchCharacterProps {
     onFocus?: () => void;
     onBlur?: () => void;
     onChangeCharacterName: (characterName: string) => void;
     styles?: IStyles;
-    recentCharacters?: PrivateChatCharacter[];
-    onCharacterClick?: (character: PrivateChatCharacter) => void;
+    recentCharacters?: ICharacter[];
+    onCharacterClick?: (character: ICharacter) => void;
     hideSearchCharacterUI: () => void;
 }
-export declare const SearchCharacter: ({ onChangeCharacterName, onBlur, onFocus, recentCharacters, hideSearchCharacterUI, onCharacterClick, styles, }: ISearchCharacterProps) => JSX.Element;
+export declare const SearchCharacter: React.FC<ISearchCharacterProps>;
 export {};

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

@@ -26392,29 +26392,27 @@ var SearchCharacter = function SearchCharacter(_ref) {
     onCharacterClick = _ref.onCharacterClick,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {
-      textColor: '#c65102',
-      buttonColor: '#005b96',
-      buttonBackgroundColor: 'rgba(0,0,0,.2)',
-      width: '80%',
+      textColor: uiColors.white,
+      buttonColor: uiColors.orange,
+      buttonBackgroundColor: uiColors.darkGray,
+      width: '100%',
       height: 'auto'
     } : _ref$styles;
   var _useState = React.useState(''),
     characterName = _useState[0],
     setCharacterName = _useState[1];
+  var _useState2 = React.useState(false),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
   var searchCharacterRef = React.useRef(null);
   React.useEffect(function () {
-    var timer = setTimeout(function () {
-      if (searchCharacterRef.current) {
-        searchCharacterRef.current.focus();
-      }
-    }, 100);
-    return function () {
-      return clearTimeout(timer);
-    };
+    if (searchCharacterRef.current) {
+      searchCharacterRef.current.focus();
+    }
   }, []);
   var handleSubmit = function handleSubmit(event) {
     event.preventDefault();
-    if (!characterName || characterName.trim() === '') return;
+    if (!characterName.trim()) return;
     onChangeCharacterName(characterName);
   };
   var handleCharacterClick = function handleCharacterClick(character) {
@@ -26423,77 +26421,131 @@ var SearchCharacter = function SearchCharacter(_ref) {
     onCharacterClick(character);
     hideSearchCharacterUI();
   };
-  return React__default.createElement(SearchContainer, null, React__default.createElement(Form$2, {
+  var handleFocus = function handleFocus() {
+    setIsFocused(true);
+    onFocus == null ? void 0 : onFocus();
+  };
+  var handleBlur = function handleBlur() {
+    setIsFocused(false);
+    onBlur == null ? void 0 : onBlur();
+  };
+  return React__default.createElement(SearchContainer, {
+    width: styles.width || 'auto'
+  }, React__default.createElement(Form$2, {
     onSubmit: handleSubmit
-  }, React__default.createElement(Column, {
-    flex: 70
-  }, React__default.createElement(TextField$1, {
+  }, React__default.createElement(InputWrapper, {
+    isFocused: isFocused
+  }, React__default.createElement(SearchIcon, null, React__default.createElement(rx.RxMagnifyingGlass, null)), React__default.createElement(TextField$1, {
     value: characterName,
     ref: searchCharacterRef,
-    id: "characterName",
-    name: 'characterName',
     onChange: function onChange(e) {
       setCharacterName(e.target.value);
       onChangeCharacterName(e.target.value);
     },
-    placeholder: 'Search for a character...',
-    height: 20,
+    placeholder: "Search for a character...",
     type: "text",
     autoComplete: "off",
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onPointerDown: onFocus
-  })), React__default.createElement(Column, {
-    justifyContent: "flex-end"
-  }, React__default.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",
-    style: {
-      borderRadius: '20%'
-    }
-  }, React__default.createElement(rx.RxMagnifyingGlass, {
-    size: 15
-  })))), recentCharacters && recentCharacters.length > 0 && React__default.createElement(ListContainer, null, recentCharacters.map(function (character) {
-    return React__default.createElement(ListElement, {
-      onPointerDown: function onPointerDown() {
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }), characterName && React__default.createElement(ClearButton, {
+    onClick: function onClick() {
+      return setCharacterName('');
+    },
+    type: "button"
+  }, React__default.createElement(rx.RxCross2, null))), React__default.createElement(SearchButton, {
+    type: "submit",
+    buttonColor: styles.buttonColor,
+    buttonBackgroundColor: styles.buttonBackgroundColor
+  }, "Search")), recentCharacters && recentCharacters.length > 0 && React__default.createElement(ResultsContainer, null, React__default.createElement(ResultsTitle, null, "Recent Characters"), React__default.createElement(ResultsList, null, recentCharacters.map(function (character) {
+    return React__default.createElement(ResultItem, {
+      key: character._id,
+      onClick: function onClick() {
         return handleCharacterClick(character);
-      },
-      key: character._id
-    }, character.name);
-  })));
+      }
+    }, React__default.createElement(CharacterAvatar, {
+      src: character.textureKey || '/default-avatar.png',
+      alt: character.name
+    }), React__default.createElement(CharacterInfo, null, React__default.createElement(CharacterName, null, React__default.createElement(Ellipsis, {
+      maxLines: 1,
+      maxWidth: "150px"
+    }, character.name)), React__default.createElement(CharacterDescription, null, React__default.createElement(Ellipsis, {
+      maxLines: 1,
+      maxWidth: "150px"
+    }, "Class: " + character["class"] + ", Level: " + character.skills.level))));
+  }))));
 };
 var SearchContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SearchCharacter__SearchContainer",
   componentId: "sc-172lyfr-0"
-})(["width:100%;"]);
+})(["width:", ";max-width:600px;margin:0 auto;"], function (_ref2) {
+  var width = _ref2.width;
+  return width;
+});
 var Form$2 = /*#__PURE__*/styled__default.form.withConfig({
   displayName: "SearchCharacter__Form",
   componentId: "sc-172lyfr-1"
-})(["display:flex;width:100%;justify-content:center;align-items:center;"]);
+})(["display:flex;gap:10px;margin-bottom:20px;"]);
+var InputWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SearchCharacter__InputWrapper",
+  componentId: "sc-172lyfr-2"
+})(["position:relative;flex-grow:1;display:flex;align-items:center;background-color:", ";border-radius:24px;padding:8px 16px;transition:all 0.3s ease;box-shadow:", ";"], uiColors.raisinBlack, function (_ref3) {
+  var isFocused = _ref3.isFocused;
+  return isFocused ? "0 0 0 2px " + uiColors.orange : 'none';
+});
+var SearchIcon = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "SearchCharacter__SearchIcon",
+  componentId: "sc-172lyfr-3"
+})(["color:", ";margin-right:8px;"], uiColors.gray);
 var TextField$1 = /*#__PURE__*/styled__default.input.withConfig({
   displayName: "SearchCharacter__TextField",
-  componentId: "sc-172lyfr-2"
-})(["width:100%;background-color:rgba(0,0,0,0.25) !important;border:none !important;max-height:28px !important;"]);
+  componentId: "sc-172lyfr-4"
+})(["width:100%;background-color:transparent;border:none;color:", ";font-size:", ";outline:none;&::placeholder{color:", ";}"], uiColors.white, uiFonts.size.medium, uiColors.gray);
+var ClearButton = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "SearchCharacter__ClearButton",
+  componentId: "sc-172lyfr-5"
+})(["background:none;border:none;color:", ";cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;"], uiColors.gray);
 var SearchButton = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "SearchCharacter__SearchButton",
-  componentId: "sc-172lyfr-3"
-})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref2) {
-  var buttonColor = _ref2.buttonColor;
-  return buttonColor;
-}, function (_ref3) {
-  var buttonBackgroundColor = _ref3.buttonBackgroundColor;
+  componentId: "sc-172lyfr-6"
+})(["background-color:", ";color:", ";border:none;border-radius:24px;padding:8px 16px;font-size:", ";font-weight:bold;cursor:pointer;transition:all 0.3s ease;&:hover{background-color:", ";color:", ";}"], function (_ref4) {
+  var buttonBackgroundColor = _ref4.buttonBackgroundColor;
   return buttonBackgroundColor;
-});
-var ListContainer = /*#__PURE__*/styled__default.ul.withConfig({
-  displayName: "SearchCharacter__ListContainer",
-  componentId: "sc-172lyfr-4"
-})(["border:none;overflow-y:scroll;list-style:none;padding:0;"]);
-var ListElement = /*#__PURE__*/styled__default.li.withConfig({
-  displayName: "SearchCharacter__ListElement",
-  componentId: "sc-172lyfr-5"
-})(["margin:0.5rem 0 !important;font-size:", ";padding:0.5rem 2px;&:hover{color:#ff0;background-color:", ";}button{all:unset;}"], uiFonts.size.small, uiColors.darkGray);
+}, function (_ref5) {
+  var buttonColor = _ref5.buttonColor;
+  return buttonColor;
+}, uiFonts.size.medium, uiColors.orange, uiColors.white);
+var ResultsContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SearchCharacter__ResultsContainer",
+  componentId: "sc-172lyfr-7"
+})(["background-color:", ";border-radius:8px;padding:16px;"], uiColors.raisinBlack);
+var ResultsTitle = /*#__PURE__*/styled__default.h3.withConfig({
+  displayName: "SearchCharacter__ResultsTitle",
+  componentId: "sc-172lyfr-8"
+})(["color:", ";font-size:", ";margin-bottom:12px;"], uiColors.white, uiFonts.size.medium);
+var ResultsList = /*#__PURE__*/styled__default.ul.withConfig({
+  displayName: "SearchCharacter__ResultsList",
+  componentId: "sc-172lyfr-9"
+})(["list-style-type:none;padding:0;margin:0;"]);
+var ResultItem = /*#__PURE__*/styled__default.li.withConfig({
+  displayName: "SearchCharacter__ResultItem",
+  componentId: "sc-172lyfr-10"
+})(["display:flex;align-items:center;padding:8px;cursor:pointer;border-radius:4px;transition:all 0.2s ease;&:hover{background-color:", ";}"], uiColors.darkGray);
+var CharacterAvatar = /*#__PURE__*/styled__default.img.withConfig({
+  displayName: "SearchCharacter__CharacterAvatar",
+  componentId: "sc-172lyfr-11"
+})(["width:40px;height:40px;border-radius:50%;margin-right:12px;object-fit:cover;"]);
+var CharacterInfo = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SearchCharacter__CharacterInfo",
+  componentId: "sc-172lyfr-12"
+})(["flex-grow:1;"]);
+var CharacterName = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SearchCharacter__CharacterName",
+  componentId: "sc-172lyfr-13"
+})(["color:", ";font-size:", ";font-weight:bold;margin-bottom:4px;"], uiColors.white, uiFonts.size.medium);
+var CharacterDescription = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "SearchCharacter__CharacterDescription",
+  componentId: "sc-172lyfr-14"
+})(["color:", ";font-size:", ";"], uiColors.gray, uiFonts.size.small);
 
 var ChatRevamp = function ChatRevamp(_ref) {
   var chatMessages = _ref.chatMessages,
@@ -26530,31 +26582,31 @@ var ChatRevamp = function ChatRevamp(_ref) {
     onPreviousChatCharacterClick(character);
     hideSearchCharacterUI();
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(TabContainer, null, tabs.map(function (tab, index) {
+  return React__default.createElement(ChatContainer$1, null, React__default.createElement(TabContainer, null, tabs.map(function (tab, index) {
     return React__default.createElement(Tab, {
       key: tab.label + "_" + index,
       active: tab.id === activeTab,
-      onPointerDown: function onPointerDown() {
+      onClick: function onClick() {
         return onChangeTab(tab.id);
       }
     }, tab.label);
   })), React__default.createElement(PrivateChatContainer, {
     width: (styles == null ? void 0 : styles.width) || '80%',
     height: (styles == null ? void 0 : styles.height) || 'auto'
-  }, React__default.createElement(RecentChatTabContainer, {
+  }, isPrivate && React__default.createElement(RecentChatTabContainer, {
     isPrivate: isPrivate,
     isOpen: showRecentChats
   }, React__default.createElement(RecentChatTopBar, {
     isOpen: showRecentChats
   }, React__default.createElement(BurgerIconContainer, {
-    onPointerDown: function onPointerDown() {
+    onClick: function onClick() {
       return setShowRecentChats(function (t) {
         return !t;
       });
     },
     hasUnseenMessages: (unseenMessageCharacterIds == null ? void 0 : unseenMessageCharacterIds.length) > 0 || false
   }, React__default.createElement(BurgerLineIcon, null), React__default.createElement(BurgerLineIcon, null), React__default.createElement(BurgerLineIcon, null)), showRecentChats && React__default.createElement(SearchButton$1, {
-    onPointerDown: function onPointerDown() {
+    onClick: function onClick() {
       return showSearchCharacterUI();
     }
   }, React__default.createElement(rx.RxMagnifyingGlass, {
@@ -26565,15 +26617,18 @@ var ChatRevamp = function ChatRevamp(_ref) {
   }, recentChatCharacters == null ? void 0 : recentChatCharacters.map(function (character) {
     return React__default.createElement(ListElementContainer, {
       key: character._id
-    }, React__default.createElement(ListElement$1, {
+    }, React__default.createElement(ListElement, {
       active: character._id === recentSelectedChatCharacterId,
-      onPointerDown: function onPointerDown() {
+      onClick: function onClick() {
         return handlePreviousChatCharacterClick(character);
       }
     }, React__default.createElement(StatusDot, {
       isUnseen: (unseenMessageCharacterIds == null ? void 0 : unseenMessageCharacterIds.includes(character._id)) || false
-    }), character.name), React__default.createElement(CloseButton$1, {
-      onPointerDown: function onPointerDown() {
+    }), React__default.createElement(Ellipsis, {
+      maxLines: 1,
+      maxWidth: "140px"
+    }, character.name)), React__default.createElement(CloseButton$1, {
+      onClick: function onClick() {
         return onRemoveRecentChatCharacter == null ? void 0 : onRemoveRecentChatCharacter(character);
       }
     }, React__default.createElement(rx.RxCross2, {
@@ -26597,24 +26652,30 @@ var ChatRevamp = function ChatRevamp(_ref) {
     onBlur: onBlur
   })));
 };
+var ChatContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ChatRevamp__ChatContainer",
+  componentId: "sc-1sdiknw-0"
+})(["display:flex;flex-direction:column;gap:10px;max-width:1200px;margin:0 auto;"]);
 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"
-})(["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) {
+  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:", ";transition:all 0.3s ease;cursor:pointer;&:hover{background-color:", ";}"], function (props) {
   return props.active ? '#c65102' : uiColors.gray;
 }, function (props) {
   return props.active ? uiColors.orange : 'transparent';
 }, function (props) {
   return props.active ? 'white' : uiColors.raisinBlack;
+}, function (props) {
+  return props.active ? uiColors.orange : uiColors.lightGray;
 });
 var PrivateChatContainer = /*#__PURE__*/styled__default.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) {
+  componentId: "sc-1sdiknw-3"
+})(["width:", ";min-height:", " !important;padding:10px;background-color:rgba(0,0,0,0.2);height:auto;display:flex;gap:10px;border-radius:0 0 10px 10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);"], function (_ref2) {
   var width = _ref2.width;
   return width;
 }, function (_ref3) {
@@ -26623,7 +26684,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:", " !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) {
@@ -26633,48 +26694,48 @@ 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({
+var ListElement = /*#__PURE__*/styled__default.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) {
+  componentId: "sc-1sdiknw-11"
+})(["margin:0.5rem 0 !important;font-size:", " !important;padding:8px;border-radius:4px;all:unset;color:", ";width:100%;position:relative;display:flex;align-items:center;gap:4px;transition:all 0.2s ease;&:hover{background-color:rgba(255,255,255,0.1);}"], 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({
   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);
+  componentId: "sc-1sdiknw-13"
+})(["all:unset;font-size:", ";margin:0 0.5rem;transition:all 0.2s ease-in-out;background-color:", ";color:", ";border-radius:50%;padding:4px;display:flex;align-items:center;justify-content:center;&:hover{background-color:", ";color:", ";}"], uiFonts.size.xxsmall, uiColors.red, uiColors.white, uiColors.white, uiColors.red);
 
 var CheckButton = function CheckButton(_ref) {
   var items = _ref.items,
@@ -27328,7 +27389,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React__default.createElement(ListElement$2, {
+    return React__default.createElement(ListElement$1, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -27346,7 +27407,7 @@ var Container$9 = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.fontSize;
 });
-var ListElement$2 = /*#__PURE__*/styled__default.li.withConfig({
+var ListElement$1 = /*#__PURE__*/styled__default.li.withConfig({
   displayName: "RelativeListMenu__ListElement",
   componentId: "sc-7hohf-1"
 })(["margin-right:0.5rem;"]);
@@ -28853,7 +28914,7 @@ var SearchFriend = function SearchFriend(_ref) {
       onSearch(characterName);
     }
   };
-  var searchTabContent = React__default.createElement(ListContainer$1, null, React__default.createElement(SearchForm, {
+  var searchTabContent = React__default.createElement(ListContainer, null, React__default.createElement(SearchForm, {
     onSubmit: handleSubmit
   }, React__default.createElement(SearchInput, {
     value: characterName,
@@ -28872,7 +28933,7 @@ var SearchFriend = function SearchFriend(_ref) {
     onAction: onSendFriendRequest,
     actionLabel: "Add Friend"
   }));
-  var requestsTabContent = React__default.createElement(ListContainer$1, null, React__default.createElement(FriendRequestSection, {
+  var requestsTabContent = React__default.createElement(ListContainer, null, React__default.createElement(FriendRequestSection, {
     friendRequests: friendRequests,
     onAccept: onAcceptRequest,
     onReject: onRejectRequest
@@ -28897,10 +28958,10 @@ var CharacterList = function CharacterList(_ref2) {
   var characters = _ref2.characters,
     onAction = _ref2.onAction,
     actionLabel = _ref2.actionLabel;
-  return React__default.createElement(ListContainer$1, null, characters.map(function (character) {
+  return React__default.createElement(ListContainer, null, characters.map(function (character) {
     return React__default.createElement(ListItem, {
       key: character._id
-    }, React__default.createElement(CharacterName, null, character.name), React__default.createElement(UserActionLink, {
+    }, React__default.createElement(CharacterName$1, null, character.name), React__default.createElement(UserActionLink, {
       color: uiColors.lightGreen,
       onClick: function onClick() {
         return onAction(character);
@@ -28912,10 +28973,10 @@ var FriendRequestSection = function FriendRequestSection(_ref3) {
   var friendRequests = _ref3.friendRequests,
     onAccept = _ref3.onAccept,
     onReject = _ref3.onReject;
-  return React__default.createElement(React__default.Fragment, null, friendRequests.length > 0 && React__default.createElement(ListContainer$1, null, friendRequests.map(function (character) {
+  return React__default.createElement(React__default.Fragment, null, friendRequests.length > 0 && React__default.createElement(ListContainer, null, friendRequests.map(function (character) {
     return React__default.createElement(ListItem, {
       key: character._id
-    }, React__default.createElement(CharacterName, null, character.name), React__default.createElement(AcceptRejectActions, null, React__default.createElement(UserActionLink, {
+    }, React__default.createElement(CharacterName$1, null, character.name), React__default.createElement(AcceptRejectActions, null, React__default.createElement(UserActionLink, {
       color: uiColors.lightGreen,
       onClick: function onClick() {
         return onAccept(character);
@@ -28940,7 +29001,7 @@ var SearchInput = /*#__PURE__*/styled__default.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__default.ul.withConfig({
+var ListContainer = /*#__PURE__*/styled__default.ul.withConfig({
   displayName: "SearchFriend__ListContainer",
   componentId: "sc-1lt1ols-3"
 })(["list-style:none;padding:0;margin:0;width:100%;max-height:50vh;overflow-y:auto;@media (max-width:768px){max-height:90vh;}"]);
@@ -28948,7 +29009,7 @@ var ListItem = /*#__PURE__*/styled__default.li.withConfig({
   displayName: "SearchFriend__ListItem",
   componentId: "sc-1lt1ols-4"
 })(["display:flex;align-items:center;justify-content:space-between;padding:0.5rem;border-bottom:1px solid rgba(255,255,255,0.1);"]);
-var CharacterName = /*#__PURE__*/styled__default.p.withConfig({
+var CharacterName$1 = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "SearchFriend__CharacterName",
   componentId: "sc-1lt1ols-5"
 })(["font-size:", ";margin:0;"], uiFonts.size.small);
@@ -30547,7 +30608,7 @@ var ListMenu = function ListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React__default.createElement(ListElement$3, {
+    return React__default.createElement(ListElement$2, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -30563,7 +30624,7 @@ var Container$m = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$3 = /*#__PURE__*/styled__default.li.withConfig({
+var ListElement$2 = /*#__PURE__*/styled__default.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -30822,7 +30883,7 @@ var BuyPanel = function BuyPanel(_ref) {
       enableHotkeys == null ? void 0 : enableHotkeys();
     },
     message: "Are you sure to buy this item?"
-  }), React__default.createElement(InputWrapper, null, React__default.createElement("p", null, "Search By Name"), React__default.createElement(Input, {
+  }), React__default.createElement(InputWrapper$1, null, React__default.createElement("p", null, "Search By Name"), React__default.createElement(Input, {
     onChange: function onChange(e) {
       setName(e.target.value);
       onChangeNameInput(e.target.value);
@@ -30925,7 +30986,7 @@ var BuyPanel = function BuyPanel(_ref) {
     });
   })));
 };
-var InputWrapper = /*#__PURE__*/styled__default.div.withConfig({
+var InputWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BuyPanel__InputWrapper",
   componentId: "sc-1si8t7i-0"
 })(["width:95%;display:flex !important;justify-content:flex-start;align-items:center;margin:auto;p{width:auto;margin-right:20px;}input{width:68%;height:10px;}"]);
@@ -31002,7 +31063,7 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
       enableHotkeys == null ? void 0 : enableHotkeys();
     },
     message: "Are you sure to remove this item?"
-  }), React__default.createElement(InputWrapper$1, null, React__default.createElement("p", null, "Search By Name"), React__default.createElement(Input, {
+  }), React__default.createElement(InputWrapper$2, null, React__default.createElement("p", null, "Search By Name"), React__default.createElement(Input, {
     onChange: function onChange(e) {
       setName(e.target.value);
       onChangeNameInput(e.target.value);
@@ -31069,7 +31130,7 @@ var Flex$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ManagmentPanel__Flex",
   componentId: "sc-1yyi6jn-0"
 })(["display:flex;gap:5px;align-items:center;"]);
-var InputWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
+var InputWrapper$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ManagmentPanel__InputWrapper",
   componentId: "sc-1yyi6jn-1"
 })(["width:95%;display:flex !important;justify-content:flex-start;align-items:center;margin:auto;p{width:auto;margin-right:20px;}input{width:68%;height:10px;}"]);