@rpg-engine/long-bow 0.5.13 → 0.5.15

package/dist/long-bow.esm.js

@@ -1,9 +1,9 @@
 import React, { Component, useState, useEffect, useRef, useMemo, Fragment } from 'react';
 import styled from 'styled-components';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, 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 } from 'react-icons/rx';
+import { RxPaperPlane, RxMagnifyingGlass } from 'react-icons/rx';
 import Draggable from 'react-draggable';
 import ReactDOM from 'react-dom';
 import { camelCase } from 'lodash-es';
@@ -12553,15 +12553,11 @@ var Chat = function Chat(_ref) {
     return dayjs(createdAt || new Date()).format('HH:mm') + " " + (emitter != null && emitter.name ? emitter.name + ": " : 'Unknown: ') + " " + message;
   };
   var onRenderChatMessages = function onRenderChatMessages(chatMessages) {
-    return chatMessages != null && chatMessages.length ? chatMessages == null ? void 0 : chatMessages.map(function (_ref2, index) {
-      var _id = _ref2._id,
-        createdAt = _ref2.createdAt,
-        emitter = _ref2.emitter,
-        message = _ref2.message;
+    return chatMessages != null && chatMessages.length ? chatMessages == null ? void 0 : chatMessages.map(function (chatMessage, index) {
       return React.createElement(Message, {
         color: (styles == null ? void 0 : styles.textColor) || '#c65102',
-        key: _id + "_" + index
-      }, onRenderMessageLines(emitter, createdAt, message));
+        key: chatMessage._id + "_" + index
+      }, onRenderMessageLines(chatMessage.emitter, chatMessage.createdAt, chatMessage.message));
     }) : React.createElement(Message, {
       color: (styles == null ? void 0 : styles.textColor) || '#c65102'
     }, "No messages available.");
@@ -12608,8 +12604,8 @@ var ChatContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1bk05n6-0"
 })(["height:", ";width:", ";padding:10px;background-color:rgba(0,0,0,0.2);height:auto;"], function (props) {
   return props.height;
-}, function (_ref3) {
-  var width = _ref3.width;
+}, function (_ref2) {
+  var width = _ref2.width;
   return width;
 });
 var TextField = /*#__PURE__*/styled.input.withConfig({
@@ -12623,8 +12619,8 @@ var MessagesContainer = /*#__PURE__*/styled.div.withConfig({
 var Message = /*#__PURE__*/styled.div.withConfig({
   displayName: "Chat__Message",
   componentId: "sc-1bk05n6-3"
-})(["margin-bottom:8px;color:", ";"], function (_ref4) {
-  var color = _ref4.color;
+})(["margin-bottom:8px;color:", ";"], function (_ref3) {
+  var color = _ref3.color;
   return color;
 });
 var Form = /*#__PURE__*/styled.form.withConfig({
@@ -12634,11 +12630,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 (_ref5) {
-  var buttonColor = _ref5.buttonColor;
+})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref4) {
+  var buttonColor = _ref4.buttonColor;
   return buttonColor;
-}, function (_ref6) {
-  var buttonBackgroundColor = _ref6.buttonBackgroundColor;
+}, function (_ref5) {
+  var buttonBackgroundColor = _ref5.buttonBackgroundColor;
   return buttonBackgroundColor;
 });
 
@@ -12664,6 +12660,174 @@ var uiColors = {
   white: '#fff'
 };
 
+var SearchCharacter = function SearchCharacter(_ref) {
+  var onChangeCharacterName = _ref.onChangeCharacterName,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    recentCharacters = _ref.recentCharacters,
+    setShowSearchCharacter = _ref.setShowSearchCharacter,
+    onCharacterClick = _ref.onCharacterClick,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      textColor: '#c65102',
+      buttonColor: '#005b96',
+      buttonBackgroundColor: 'rgba(0,0,0,.2)',
+      width: '80%',
+      height: 'auto'
+    } : _ref$styles;
+  var _useState = useState(''),
+    characterName = _useState[0],
+    setCharacterName = _useState[1];
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+    if (!characterName || characterName.trim() === '') return;
+    onChangeCharacterName(characterName);
+  };
+  var handleCharacterClick = function handleCharacterClick(character) {
+    if (!onCharacterClick) return;
+    setCharacterName('');
+    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, {
+    onSubmit: handleSubmit
+  }, React.createElement(Column, {
+    flex: 70
+  }, React.createElement(TextField$1, {
+    value: characterName,
+    id: "inputCharacterName",
+    onChange: function onChange(e) {
+      setCharacterName(e.target.value);
+      onChangeCharacterName(e.target.value);
+    },
+    height: 20,
+    type: "text",
+    autoComplete: "off",
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onPointerDown: onFocus,
+    autoFocus: true
+  })), React.createElement(Column, {
+    justifyContent: "flex-end"
+  }, React.createElement(SearchButton, {
+    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.createElement(RxMagnifyingGlass, {
+    size: 15
+  })))), recentCharacters && recentCharacters.length > 0 && React.createElement(ListContainer, null, recentCharacters.map(function (character) {
+    return React.createElement(ListElement, {
+      onPointerDown: function onPointerDown() {
+        return handleCharacterClick(character);
+      },
+      key: character._id
+    }, character.name);
+  })));
+};
+var SearchCharacterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchCharacter__SearchCharacterContainer",
+  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;
+});
+var Form$1 = /*#__PURE__*/styled.form.withConfig({
+  displayName: "SearchCharacter__Form",
+  componentId: "sc-172lyfr-1"
+})(["display:flex;width:100%;justify-content:center;align-items:center;"]);
+var TextField$1 = /*#__PURE__*/styled.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;"]);
+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;
+  return buttonColor;
+}, function (_ref4) {
+  var buttonBackgroundColor = _ref4.buttonBackgroundColor;
+  return buttonBackgroundColor;
+});
+var ListContainer = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "SearchCharacter__ListContainer",
+  componentId: "sc-172lyfr-4"
+})(["border:none;overflow-y:scroll;list-style:none;padding:0;"]);
+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);
+
+var ChatRevamp = function ChatRevamp(_ref) {
+  var chatMessages = _ref.chatMessages,
+    onSendGlobalChatMessage = _ref.onSendGlobalChatMessage,
+    onChangeCharacterName = _ref.onChangeCharacterName,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onCloseButton = _ref.onCloseButton,
+    styles = _ref.styles,
+    tabs = _ref.tabs,
+    onChangeTab = _ref.onChangeTab,
+    activeTab = _ref.activeTab,
+    privateChatCharacters = _ref.privateChatCharacters,
+    onCharacterClick = _ref.onCharacterClick,
+    onSendPrivateChatMessage = _ref.onSendPrivateChatMessage;
+  var _useState = useState(true),
+    showSearchCharacter = _useState[0],
+    setShowSearchCharacter = _useState[1];
+  useEffect(function () {
+    setShowSearchCharacter(true);
+  }, [activeTab]);
+  var isPrivate = activeTab === 'private';
+  return React.createElement(React.Fragment, null, React.createElement(TabContainer, null, tabs.map(function (tab, index) {
+    return React.createElement(Tab, {
+      key: tab.label + "_" + index,
+      active: tab.id === activeTab,
+      onPointerDown: function onPointerDown() {
+        return onChangeTab(tab.id);
+      }
+    }, tab.label);
+  })), isPrivate && showSearchCharacter ? React.createElement(SearchCharacter, {
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onChangeCharacterName: onChangeCharacterName,
+    styles: styles,
+    recentCharacters: privateChatCharacters,
+    setShowSearchCharacter: setShowSearchCharacter,
+    onCharacterClick: onCharacterClick
+  }) : React.createElement(Chat, {
+    chatMessages: chatMessages,
+    onSendChatMessage: isPrivate ? onSendPrivateChatMessage : onSendGlobalChatMessage,
+    sendMessage: true,
+    onCloseButton: onCloseButton,
+    styles: styles,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }));
+};
+var TabContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__TabContainer",
+  componentId: "sc-1sdiknw-0"
+})(["width:100%;display:flex;gap:10px;"]);
+var Tab = /*#__PURE__*/styled.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) {
+  return props.active ? '#c65102' : uiColors.gray;
+}, function (props) {
+  return props.active ? uiColors.orange : 'transparent';
+}, function (props) {
+  return props.active ? 'white' : uiColors.raisinBlack;
+});
+
 var _excluded$2 = ["innerRef"];
 var Input = function Input(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
@@ -12767,7 +12931,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
     width: '100%',
     height: '80%',
     className: "chat-body dark-background"
-  }, onRenderChatMessages(chatMessages)), React.createElement(Form$1, {
+  }, onRenderChatMessages(chatMessages)), React.createElement(Form$2, {
     onSubmit: handleSubmit
   }, React.createElement(Column, {
     flex: 70
@@ -12808,7 +12972,7 @@ var CustomContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
 })(["display:block;opacity:", ";&:hover{opacity:1;}.dark-background{background-color:", " !important;}.chat-body{&.rpgui-container.framed-grey{background:unset;}max-height:170px;overflow-y:auto;}"], function (props) {
   return props.opacity;
 }, uiColors.darkGray);
-var Form$1 = /*#__PURE__*/styled.form.withConfig({
+var Form$2 = /*#__PURE__*/styled.form.withConfig({
   displayName: "ChatDeprecated__Form",
   componentId: "sc-fuuod3-4"
 })(["display:flex;width:100%;justify-content:center;align-items:center;"]);
@@ -13252,7 +13416,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React.createElement(ListElement, {
+    return React.createElement(ListElement$1, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -13270,7 +13434,7 @@ var Container$8 = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.fontSize;
 });
-var ListElement = /*#__PURE__*/styled.li.withConfig({
+var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
   displayName: "RelativeListMenu__ListElement",
   componentId: "sc-7hohf-1"
 })(["margin-right:0.5rem;"]);
@@ -15578,7 +15742,6 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     isDepotSystem = _ref.isDepotSystem,
     onPositionChangeEnd = _ref.onPositionChangeEnd,
     onPositionChangeStart = _ref.onPositionChangeStart;
-  var MAX_SLOTS_PER_PAGE = 20;
   var _useState = useState({
       isOpen: false,
       maxQuantity: 1,
@@ -15589,10 +15752,6 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   var _useState2 = useState(-1),
     settingShortcutIndex = _useState2[0],
     setSettingShortcutIndex = _useState2[1];
-  var _useState3 = useState(1),
-    currentPage = _useState3[0],
-    setCurrentPage = _useState3[1];
-  var totalPages = Math.ceil(itemContainer.slotQty / MAX_SLOTS_PER_PAGE);
   var handleSetShortcut = function handleSetShortcut(item, index) {
     if (item.type === ItemType.Consumable || item.type === ItemType.Tool) {
       setItemShortcut == null ? void 0 : setItemShortcut(item.key, index);
@@ -15600,11 +15759,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   };
   var onRenderSlots = function onRenderSlots() {
     var slots = [];
-    var start = (currentPage - 1) * MAX_SLOTS_PER_PAGE;
-    var end = start + MAX_SLOTS_PER_PAGE;
-    for (var i = start; i < end && i < itemContainer.slotQty; i++) {
+    for (var i = 0; i < itemContainer.slotQty; i++) {
       var _itemContainer$slots;
-      console.log(itemContainer);
       slots.push(React.createElement(ItemSlot, {
         isContextMenuDisabled: disableContextMenu,
         key: i,
@@ -15655,16 +15811,6 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     }
     return slots;
   };
-  var goToNextPage = function goToNextPage() {
-    setCurrentPage(function (current) {
-      return Math.min(current + 1, totalPages);
-    });
-  };
-  var goToPreviousPage = function goToPreviousPage() {
-    setCurrentPage(function (current) {
-      return Math.max(current - 1, 1);
-    });
-  };
   return React.createElement(React.Fragment, null, React.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose,
@@ -15681,23 +15827,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots()), totalPages > 1 && React.createElement(ArrowContainer$1, null, currentPage > 1 && React.createElement(SelectArrow, {
-    className: 'arrow .arrow-up',
-    direction: "left",
-    onPointerDown: function onPointerDown() {
-      if (currentPage > 1) {
-        goToPreviousPage();
-      }
-    }
-  }), currentPage < totalPages && React.createElement(SelectArrow, {
-    className: 'arrow .arrow-down',
-    direction: "right",
-    onPointerDown: function onPointerDown() {
-      if (currentPage < totalPages) {
-        goToNextPage();
-      }
-    }
-  }))), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
+  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
     quantity: quantitySelect.maxQuantity,
     onConfirm: function onConfirm(quantity) {
       quantitySelect.callback(quantity);
@@ -15720,15 +15850,11 @@ 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;"]);
+})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:auto;"]);
 var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__QuantitySelectorContainer",
   componentId: "sc-15y5p9l-1"
 })(["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 ArrowContainer$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemContainer__ArrowContainer",
-  componentId: "sc-15y5p9l-2"
-})(["margin-top:10px;margin-bottom:30px;span:first-child{margin-left:20px;}span:last-child{margin-right:20px;}"]);
 
 var LeaderboardTable = function LeaderboardTable(props) {
   var items = props.items,
@@ -15862,7 +15988,7 @@ var ListMenu = function ListMenu(_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);
@@ -15878,7 +16004,7 @@ var Container$j = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
+var ListElement$2 = /*#__PURE__*/styled.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -17999,7 +18125,8 @@ var TradingItemRow = function TradingItemRow(_ref) {
     traderItem = _ref.traderItem,
     selectedQty = _ref.selectedQty,
     equipmentSet = _ref.equipmentSet,
-    scale = _ref.scale;
+    scale = _ref.scale,
+    isBuy = _ref.isBuy;
   var onLeftClick = function onLeftClick(qty) {
     if (qty === void 0) {
       qty = 1;
@@ -18013,6 +18140,39 @@ var TradingItemRow = function TradingItemRow(_ref) {
     }
     onQuantityChange(traderItem, Math.min((_traderItem$stackQty = traderItem.stackQty) != null ? _traderItem$stackQty : 999, selectedQty + qty));
   };
+  var renderAccountTypeIndicator = function renderAccountTypeIndicator() {
+    if (isBuy && traderItem.canBePurchasedOnlyByPremiumPlans) {
+      return traderItem.canBePurchasedOnlyByPremiumPlans.map(function (accountType) {
+        if (accountType !== UserAccountTypes.Free) {
+          var backgroundColor;
+          var textColor = 'black';
+          switch (accountType) {
+            case UserAccountTypes.PremiumBronze:
+              backgroundColor = '#CD7F32';
+              break;
+            case UserAccountTypes.PremiumSilver:
+              backgroundColor = '#C0C0C0';
+              break;
+            case UserAccountTypes.PremiumGold:
+              backgroundColor = '#FFD700';
+              break;
+            case UserAccountTypes.PremiumUltimate:
+              backgroundColor = '#002E99';
+              break;
+            default:
+              return null;
+          }
+          return React.createElement(PremiumLabel, {
+            backgroundColor: backgroundColor,
+            textColor: textColor,
+            key: accountType
+          }, capitalize(accountType) + ' PA');
+        }
+        return null;
+      });
+    }
+    return null;
+  };
   return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer$1, null, React.createElement(SpriteContainer$2, null, React.createElement(ItemInfoWrapper, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -18032,7 +18192,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
   })))), React.createElement(ItemNameContainer, null, React.createElement(NameValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "250px"
-  }, capitalize(traderItem.name))), React.createElement("p", null, "$", traderItem.price))), React.createElement(QuantityContainer$1, null, React.createElement(SelectArrow, {
+  }, capitalize(traderItem.name))), React.createElement("p", null, "$", traderItem.price), React.createElement("p", null, renderAccountTypeIndicator()))), React.createElement(QuantityContainer$1, null, React.createElement(SelectArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "left",
@@ -18054,45 +18214,55 @@ var TradingItemRow = function TradingItemRow(_ref) {
     onPointerDown: onRightClick.bind(null, outerQty)
   })));
 };
+var PremiumLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "TradingItemRow__PremiumLabel",
+  componentId: "sc-mja0b5-0"
+})(["background-color:", ";color:", ";font-weight:bold;padding:2px 5px;border-radius:5px;margin-right:5px;margin-bottom:5px;display:inline-block;"], function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+}, function (_ref3) {
+  var textColor = _ref3.textColor;
+  return textColor;
+});
 var StyledArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
   displayName: "TradingItemRow__StyledArrow",
-  componentId: "sc-mja0b5-0"
+  componentId: "sc-mja0b5-1"
 })(["margin:40px;"]);
 var ItemWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemWrapper",
-  componentId: "sc-mja0b5-1"
+  componentId: "sc-mja0b5-2"
 })(["width:100%;margin:auto;display:flex;justify-content:space-between;margin-bottom:1rem;&:hover{background-color:", ";}padding:0.5rem;"], uiColors.darkGray);
 var ItemNameContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemNameContainer",
-  componentId: "sc-mja0b5-2"
+  componentId: "sc-mja0b5-3"
 })(["flex:60%;"]);
 var ItemIconContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemIconContainer",
-  componentId: "sc-mja0b5-3"
+  componentId: "sc-mja0b5-4"
 })(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 58px;"]);
 var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__SpriteContainer",
-  componentId: "sc-mja0b5-4"
+  componentId: "sc-mja0b5-5"
 })(["position:relative;top:-0.5rem;left:0.5rem;"]);
 var NameValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__NameValue",
-  componentId: "sc-mja0b5-5"
+  componentId: "sc-mja0b5-6"
 })(["p{font-size:0.75rem;margin:0;}"]);
 var Item$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "TradingItemRow__Item",
-  componentId: "sc-mja0b5-6"
+  componentId: "sc-mja0b5-7"
 })(["color:white;text-align:center;z-index:1;width:100%;"]);
 var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__TextOverlay",
-  componentId: "sc-mja0b5-7"
+  componentId: "sc-mja0b5-8"
 })(["width:100%;position:relative;"]);
 var QuantityContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
-  componentId: "sc-mja0b5-8"
+  componentId: "sc-mja0b5-9"
 })(["position:relative;display:flex;min-width:100px;width:40%;justify-content:center;align-items:center;flex:40%;"]);
 var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityDisplay",
-  componentId: "sc-mja0b5-9"
+  componentId: "sc-mja0b5-10"
 })(["font-size:", ";"], uiFonts.size.small);
 
 var TradingMenu = function TradingMenu(_ref) {
@@ -18178,7 +18348,8 @@ var TradingMenu = function TradingMenu(_ref) {
       traderItem: tradeItem,
       selectedQty: (_qtyMap$get = qtyMap.get(tradeItem.key)) != null ? _qtyMap$get : 0,
       equipmentSet: equipmentSet,
-      scale: scale
+      scale: scale,
+      isBuy: isBuy()
     }));
   })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold)), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold())), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
@@ -18324,5 +18495,5 @@ var ButtonWrapper$3 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-gptoxp-5"
 })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
 
-export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, rarityColor, useEventListener };
+export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, ChatRevamp, CheckButton, CircularController, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, HistoryDialog, ImageCarousel, ImgSide, Input, InputRadio$1 as InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, Leaderboard, ListMenu, Marketplace, MarketplaceRows, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PlayersRow, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, Shortcuts, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, rarityColor, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map