@rpg-engine/long-bow 0.8.227 → 0.8.229

package/dist/components/Marketplace/CharacterTradePanel.d.ts

@@ -0,0 +1,28 @@
+import { ICharacter, ICharacterListing } from '@rpg-engine/shared';
+import React from 'react';
+export interface ICharacterTradePanelProps {
+    characterListings: ICharacterListing[];
+    characterListingsTotal: number;
+    characterListingsPage: number;
+    characterListingsItemsPerPage: number;
+    onCharacterListingsPageChange: (page: number) => void;
+    onCharacterBuy: (listingId: string) => void;
+    characterNameFilter?: string;
+    onCharacterNameFilterChange?: (name: string) => void;
+    characterListingsLoading?: boolean;
+    myCharacterListings: ICharacterListing[];
+    myCharacterListingsTotal: number;
+    myCharacterListingsPage: number;
+    onMyCharacterListingsPageChange: (page: number) => void;
+    onCharacterDelist: (listingId: string) => void;
+    accountCharacters: ICharacter[];
+    onCharacterList: (characterId: string, price: number) => void;
+    activeCharacterId?: string;
+    atlasJSON: any;
+    atlasIMG: any;
+    characterAtlasJSON?: any;
+    characterAtlasIMG?: any;
+    enableHotkeys?: () => void;
+    disableHotkeys?: () => void;
+}
+export declare const CharacterTradePanel: React.FC<ICharacterTradePanelProps>;

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export * from './components/Marketplace/HistoryPanel';
 export * from './components/Marketplace/BlueprintSearchModal';
 export * from './components/Marketplace/CharacterMarketplacePanel';
 export * from './components/Marketplace/CharacterMarketplaceRows';
+export * from './components/Marketplace/CharacterTradePanel';
 export * from './components/Marketplace/CharacterDetailModal';
 export * from './components/Marketplace/CharacterListingForm';
 export * from './components/Marketplace/CharacterListingModal';

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

@@ -7202,7 +7202,7 @@ var DynamicText = function DynamicText(_ref) {
 var TextContainer = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "DynamicText__TextContainer",
   componentId: "sc-1ggl9nd-0"
-})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]);
+})(["font-size:0.8rem !important;line-height:1.6;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;margin:0;"]);
 
 var img$4 = 'data:image/gif;base64,R0lGODlhEAAQAPIAAAAAABQYLiw1TUBJc2hvmQAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtJbWFnZU1hZ2ljaw1nYW1tYT0wLjQ1NDU1ACH5BAEUAAAALAAAAAAQABAAAAM9CLrc/lCFGSKYJJP5AhlguDnBMIVgxXgmJapSSp3mKs/pKrT0IMCXUk+2Cgh2oSOnaDz+lswZpSOFUq2KBAAh/wtJbWFnZU1hZ2ljaw1nYW1tYT0wLjQ1NDU1ACH5BAEUAAAALAAAAAAQABAAAAIzhI+py90Bg4OjDrjCELxfFQhQx0mIJkaeaYRp5LJADMdnqXbyOJLYTdKBejjZoRaZJBMFACH/C0ltYWdlTWFnaWNrDWdhbW1hPTAuNDU0NTUAIfkEARQAAAAsAAAAABAAEAAAAjKEj6nL7Y+CDE6OO+QKQ/ifKYEgfR4VddPohQe7lmR0xidNTib65uacYP2AQWGuMlEUAAA7';
 
@@ -7289,18 +7289,15 @@ var NPCDialogText = function NPCDialogText(_ref) {
 var Container$p = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
-})([""]);
+})(["width:100%;height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:24px;"]);
 var TextContainer$1 = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "NPCDialogText__TextContainer",
   componentId: "sc-1cxkdh9-1"
-})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]);
+})(["font-size:0.8rem !important;line-height:1.6;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;margin:0;flex:1;"]);
 var PressSpaceIndicator = /*#__PURE__*/styled__default.img.withConfig({
   displayName: "NPCDialogText__PressSpaceIndicator",
   componentId: "sc-1cxkdh9-2"
-})(["position:absolute;right:", ";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"], function (_ref2) {
-  var right = _ref2.right;
-  return right;
-});
+})(["position:absolute;left:0;bottom:-0.5rem;height:20px;object-fit:contain;object-position:left;image-rendering:-webkit-optimize-contrast;cursor:pointer;"]);
 
 //@ts-ignore
 var useEventListener = function useEventListener(type, handler, el) {
@@ -7514,10 +7511,8 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
     src: imagePath || img$6
-  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$r, null, React__default.createElement(CloseIcon, {
-    onPointerDown: _onClose
-  }, "X"), React__default.createElement(TextContainer$2, {
-    flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$r, null, React__default.createElement(TextContainer$2, {
+    flex: type === exports.NPCDialogType.TextAndThumbnail ? '1' : '100%'
   }, React__default.createElement(NPCDialogText, {
     type: type,
     text: text || 'No text provided.',
@@ -7527,33 +7522,37 @@ var NPCDialog = function NPCDialog(_ref) {
         _onClose();
       }
     }
-  })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
+  })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(CloseButton$6, {
+    onPointerDown: _onClose
+  }, React__default.createElement(fa.FaTimes, {
+    size: 12
+  })), React__default.createElement(NPCThumbnail, {
     src: imagePath || img$6
   })))));
 };
 var Container$r = /*#__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;"]);
-var CloseIcon = /*#__PURE__*/styled__default.p.withConfig({
-  displayName: "NPCDialog__CloseIcon",
+})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:flex-start;align-items:center;position:relative;padding:1rem 1rem 0.5rem 1rem;"]);
+var CloseButton$6 = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "NPCDialog__CloseButton",
   componentId: "sc-1b4aw74-1"
-})(["position:absolute;top:-1.5rem;right:-0.4rem;cursor:pointer;color:white;font-size:1.1rem !important;"]);
+})(["position:absolute;top:-12px;right:-12px;width:26px;height:26px;background:#000;border:2px solid #fff;border-radius:2px;color:#fff;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;padding:0;box-shadow:0 2px 0px rgba(0,0,0,1);transition:all 0.1s;&:hover{background:#333;border-color:#eee;}&:active{transform:translateY(2px);box-shadow:0 0 0px rgba(0,0,0,1);}"]);
 var TextContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCDialog__TextContainer",
   componentId: "sc-1b4aw74-2"
-})(["flex:", " 0 0;width:355px;"], function (_ref2) {
+})(["flex:", ";height:100%;padding-right:1.5rem;display:flex;flex-direction:column;"], function (_ref2) {
   var flex = _ref2.flex;
   return flex;
 });
 var ThumbnailContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCDialog__ThumbnailContainer",
   componentId: "sc-1b4aw74-3"
-})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]);
+})(["flex-shrink:0;position:relative;width:116px;height:116px;border:4px solid #1a100c;border-radius:2px;box-shadow:inset 0 0 0 2px rgba(0,0,0,0.4),0 0 0 2px #d4a373,0 0 0 4px #000;background:#3e2723;display:flex;justify-content:center;align-items:center;margin-right:8px;padding:2px;"]);
 var NPCThumbnail = /*#__PURE__*/styled__default.img.withConfig({
   displayName: "NPCDialog__NPCThumbnail",
   componentId: "sc-1b4aw74-4"
-})(["image-rendering:pixelated;height:128px;width:128px;"]);
+})(["image-rendering:pixelated;height:100%;width:100%;object-fit:contain;border-radius:1px;"]);
 
 (function (ImgSide) {
   ImgSide["right"] = "right";
@@ -7782,7 +7781,7 @@ var ImageCarousel = function ImageCarousel(_ref) {
     onPointerDown: function onPointerDown() {
       return goToNextImage();
     }
-  }))), onCloseButton && React__default.createElement(CloseButton$6, {
+  }))), onCloseButton && React__default.createElement(CloseButton$7, {
     className: "container-close",
     onPointerDown: onCloseButton
   }, "X"));
@@ -7813,7 +7812,7 @@ var Description$1 = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.isTextFixed ? 'none' : 'rgba(0, 0, 0, 0.6)';
 });
-var CloseButton$6 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$7 = /*#__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;}"]);
@@ -8230,7 +8229,7 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     children = _ref.children;
   return React__default.createElement(Container$u, null, React__default.createElement(Overlay$2, {
     onClick: onBack
-  }), React__default.createElement(Modal, null, React__default.createElement(CloseButton$7, {
+  }), React__default.createElement(Modal, null, React__default.createElement(CloseButton$8, {
     onClick: onBack
   }, React__default.createElement(fa.FaTimes, null)), React__default.createElement(Header$4, null, React__default.createElement(SpriteContainer$2, null, React__default.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
@@ -8253,7 +8252,7 @@ var Modal = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BaseInformationDetails__Modal",
   componentId: "sc-1vguuz8-2"
 })(["position:relative;background-color:rgba(0,0,0,0.95);border-radius:4px;padding:12px;overflow:hidden;z-index:1;font-family:'Press Start 2P',cursive;border:1px solid ", ";box-shadow:0 2px 4px rgba(0,0,0,0.2);width:90%;height:90vh;max-width:800px;max-height:800px;@media (max-width:768px){width:100%;height:100%;border-radius:0;padding:8px;}&::-webkit-scrollbar{width:2px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;opacity:0.5;&:hover{opacity:1;}}scrollbar-width:thin;scrollbar-color:", " transparent;"], uiColors.darkGray, uiColors.yellow, uiColors.yellow);
-var CloseButton$7 = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$8 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "BaseInformationDetails__CloseButton",
   componentId: "sc-1vguuz8-3"
 })(["position:absolute;top:20px;right:20px;background:none;border:none;color:", ";font-size:1.2rem;cursor:pointer;padding:0;z-index:1;transition:transform 0.2s ease;&:hover{transform:scale(1.1);}"], uiColors.yellow);
@@ -8646,7 +8645,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       zIndex: 9999
     },
     "$isMobile": isMobile
-  }, React__default.createElement(FilterHeader, null, React__default.createElement(FilterTitle, null, "Advanced Filters"), React__default.createElement(CloseButton$8, {
+  }, React__default.createElement(FilterHeader, null, React__default.createElement(FilterTitle, null, "Advanced Filters"), React__default.createElement(CloseButton$9, {
     onClick: handleClose
   }, "\xD7")), sections.map(renderFilterSection), hasActiveFilters && React__default.createElement(ClearFiltersButton, {
     onClick: onClearAll
@@ -8718,7 +8717,7 @@ var ClearFiltersButton = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "AdvancedFilters__ClearFiltersButton",
   componentId: "sc-1xj6ldr-10"
 })(["width:100%;background:transparent;color:#666;border:none;padding:0.75rem 0;margin-top:0.5rem;cursor:pointer;font-size:0.65rem;transition:all 0.2s;border-top:1px solid #333;text-transform:uppercase;letter-spacing:0.05em;font-family:'Press Start 2P',cursive;&:hover{color:#ffd700;}"]);
-var CloseButton$8 = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$9 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "AdvancedFilters__CloseButton",
   componentId: "sc-1xj6ldr-11"
 })(["background:transparent;border:none;color:#999;font-size:1.5rem;line-height:1;cursor:pointer;padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;&:hover{color:#ffd700;}"]);
@@ -10059,7 +10058,7 @@ var QuantitySelector = function QuantitySelector(_ref) {
   return React__default.createElement(StyledContainer, {
     type: exports.RPGUIContainerTypes.Framed,
     width: "25rem"
-  }, React__default.createElement(CloseButton$9, {
+  }, React__default.createElement(CloseButton$a, {
     className: "container-close",
     onPointerDown: onClose
   }, "X"), React__default.createElement("h2", null, title), React__default.createElement(StyledForm, {
@@ -10104,7 +10103,7 @@ var StyledContainer = /*#__PURE__*/styled__default(RPGUIContainer).withConfig({
   displayName: "QuantitySelector__StyledContainer",
   componentId: "sc-z4ut57-0"
 })(["position:relative;display:flex;flex-direction:column;align-items:center;padding:1rem;h2{margin:0;margin-bottom:1rem;font-size:1rem;}"]);
-var CloseButton$9 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "QuantitySelector__CloseButton",
   componentId: "sc-z4ut57-1"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;cursor:pointer;"]);
@@ -11096,7 +11095,7 @@ var BlueprintSearchModal = function BlueprintSearchModal(_ref) {
   }), React__default.createElement(ModalContainer$2, null, React__default.createElement(ModalContent$2, {
     onClick: stopPropagation,
     onPointerDown: stopPropagation
-  }, React__default.createElement(Header$8, null, React__default.createElement(Title$9, null, "Select Item"), React__default.createElement(CloseButton$a, {
+  }, React__default.createElement(Header$8, null, React__default.createElement(Title$9, null, "Select Item"), React__default.createElement(CloseButton$b, {
     onPointerDown: handleClose,
     "aria-label": "Close"
   }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(InputWrapper, null, React__default.createElement("p", null, "SEARCH"), React__default.createElement(StyledInput$2, {
@@ -11162,7 +11161,7 @@ var Title$9 = /*#__PURE__*/styled__default.h3.withConfig({
   displayName: "BlueprintSearchModal__Title",
   componentId: "sc-i7bssq-4"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
-var CloseButton$a = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$b = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "BlueprintSearchModal__CloseButton",
   componentId: "sc-i7bssq-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;pointer-events:auto;&:hover{color:#ffffff;}"]);
@@ -11308,7 +11307,7 @@ var BuyOrderDetailsModal = function BuyOrderDetailsModal(_ref) {
   }, React__default.createElement(ModalContent$3, {
     onClick: stopPropagation,
     onPointerDown: stopPropagation
-  }, React__default.createElement(Header$9, null, React__default.createElement(Title$a, null, "Place Buy Request"), React__default.createElement(CloseButton$b, {
+  }, React__default.createElement(Header$9, null, React__default.createElement(Title$a, null, "Place Buy Request"), React__default.createElement(CloseButton$c, {
     onPointerDown: handleClose,
     "aria-label": "Close"
   }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(ItemDisplay, null, React__default.createElement(SpriteWrapper$2, null, React__default.createElement(SpriteFromAtlas, {
@@ -11380,7 +11379,7 @@ var Title$a = /*#__PURE__*/styled__default.h3.withConfig({
   displayName: "BuyOrderDetailsModal__Title",
   componentId: "sc-6bghe9-4"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
-var CloseButton$b = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$c = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "BuyOrderDetailsModal__CloseButton",
   componentId: "sc-6bghe9-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;pointer-events:auto;&:hover{color:#ffffff;}"]);
@@ -11932,7 +11931,7 @@ var MarketplaceBuyModal = function MarketplaceBuyModal(_ref) {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React__default.createElement(Header$a, null, React__default.createElement(Title$b, null, "Confirm Purchase"), React__default.createElement(CloseButton$c, {
+  }, React__default.createElement(Header$a, null, React__default.createElement(Title$b, null, "Confirm Purchase"), React__default.createElement(CloseButton$d, {
     onPointerDown: onClose,
     "aria-label": "Close"
   }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(Options, null, React__default.createElement(RadioOption, {
@@ -11985,7 +11984,7 @@ var Title$b = /*#__PURE__*/styled__default.h3.withConfig({
   displayName: "MarketplaceBuyModal__Title",
   componentId: "sc-86ottl-4"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
-var CloseButton$c = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$d = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "MarketplaceBuyModal__CloseButton",
   componentId: "sc-86ottl-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;pointer-events:auto;&:hover{color:#ffffff;}"]);
@@ -13436,7 +13435,7 @@ var CharacterDetailModal = function CharacterDetailModal(_ref) {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React__default.createElement(Header$b, null, React__default.createElement(Title$c, null, "Character Details"), React__default.createElement(CloseButton$d, {
+  }, React__default.createElement(Header$b, null, React__default.createElement(Title$c, null, "Character Details"), React__default.createElement(CloseButton$e, {
     onPointerDown: handleClose,
     "aria-label": "Close",
     type: "button"
@@ -13515,7 +13514,7 @@ var Title$c = /*#__PURE__*/styled__default.h3.withConfig({
   displayName: "CharacterDetailModal__Title",
   componentId: "sc-1kdn1l6-4"
 })(["margin:0;font-family:'Press Start 2P',cursive !important;font-size:0.6rem !important;color:#fef08a !important;"]);
-var CloseButton$d = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$e = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "CharacterDetailModal__CloseButton",
   componentId: "sc-1kdn1l6-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.5);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;&:hover{color:#fff;}"]);
@@ -13979,7 +13978,7 @@ var CharacterListingModal = function CharacterListingModal(_ref) {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React__default.createElement(Header$c, null, React__default.createElement(Title$d, null, "List Character for Sale"), React__default.createElement(CloseButton$e, {
+  }, React__default.createElement(Header$c, null, React__default.createElement(Title$d, null, "List Character for Sale"), React__default.createElement(CloseButton$f, {
     onPointerDown: handleClose,
     "aria-label": "Close",
     type: "button"
@@ -14064,7 +14063,7 @@ var Title$d = /*#__PURE__*/styled__default.h3.withConfig({
   displayName: "CharacterListingModal__Title",
   componentId: "sc-1uxkx35-4"
 })(["margin:0;font-family:'Press Start 2P',cursive !important;font-size:0.65rem !important;color:#fef08a !important;"]);
-var CloseButton$e = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$f = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "CharacterListingModal__CloseButton",
   componentId: "sc-1uxkx35-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;pointer-events:auto;&:hover{color:#ffffff;}"]);
@@ -14359,6 +14358,103 @@ var EmptySubtext = /*#__PURE__*/styled__default.span.withConfig({
   componentId: "sc-su21a6-17"
 })(["font-family:'Press Start 2P',cursive !important;font-size:0.38rem !important;color:#52525b !important;text-align:center;max-width:260px;line-height:1.6;"]);
 
+var CharacterTradePanel = function CharacterTradePanel(_ref) {
+  var characterListings = _ref.characterListings,
+    characterListingsTotal = _ref.characterListingsTotal,
+    characterListingsPage = _ref.characterListingsPage,
+    characterListingsItemsPerPage = _ref.characterListingsItemsPerPage,
+    onCharacterListingsPageChange = _ref.onCharacterListingsPageChange,
+    onCharacterBuy = _ref.onCharacterBuy,
+    characterNameFilter = _ref.characterNameFilter,
+    onCharacterNameFilterChange = _ref.onCharacterNameFilterChange,
+    characterListingsLoading = _ref.characterListingsLoading,
+    myCharacterListings = _ref.myCharacterListings,
+    myCharacterListingsTotal = _ref.myCharacterListingsTotal,
+    myCharacterListingsPage = _ref.myCharacterListingsPage,
+    onMyCharacterListingsPageChange = _ref.onMyCharacterListingsPageChange,
+    onCharacterDelist = _ref.onCharacterDelist,
+    accountCharacters = _ref.accountCharacters,
+    onCharacterList = _ref.onCharacterList,
+    activeCharacterId = _ref.activeCharacterId,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    characterAtlasJSON = _ref.characterAtlasJSON,
+    characterAtlasIMG = _ref.characterAtlasIMG,
+    enableHotkeys = _ref.enableHotkeys,
+    disableHotkeys = _ref.disableHotkeys;
+  var _useState = React.useState('browse'),
+    subTab = _useState[0],
+    setSubTab = _useState[1];
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(CharacterSubTabs, null, React__default.createElement(CharacterSubTab, {
+    "$active": subTab === 'browse',
+    onClick: function onClick() {
+      return setSubTab('browse');
+    },
+    type: "button"
+  }, "Browse"), React__default.createElement(CharacterSubTab, {
+    "$active": subTab === 'my-listings',
+    onClick: function onClick() {
+      return setSubTab('my-listings');
+    },
+    type: "button"
+  }, "My Listings")), subTab === 'browse' && React__default.createElement(CharacterMarketplacePanel, {
+    characterListings: characterListings,
+    totalCount: characterListingsTotal,
+    currentPage: characterListingsPage,
+    itemsPerPage: characterListingsItemsPerPage,
+    onPageChange: onCharacterListingsPageChange,
+    onCharacterBuy: onCharacterBuy,
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    characterAtlasJSON: characterAtlasJSON != null ? characterAtlasJSON : atlasJSON,
+    characterAtlasIMG: characterAtlasIMG != null ? characterAtlasIMG : atlasIMG,
+    enableHotkeys: enableHotkeys,
+    disableHotkeys: disableHotkeys,
+    nameFilter: characterNameFilter,
+    onNameFilterChange: onCharacterNameFilterChange,
+    isLoading: characterListingsLoading
+  }), subTab === 'my-listings' && React__default.createElement(MyCharacterListingsPanel, {
+    myCharacterListings: myCharacterListings,
+    totalCount: myCharacterListingsTotal,
+    currentPage: myCharacterListingsPage,
+    itemsPerPage: 10,
+    onPageChange: onMyCharacterListingsPageChange,
+    onCharacterDelist: onCharacterDelist,
+    accountCharacters: accountCharacters,
+    onCharacterList: onCharacterList,
+    activeCharacterId: activeCharacterId,
+    atlasJSON: atlasJSON,
+    atlasIMG: atlasIMG,
+    characterAtlasJSON: characterAtlasJSON != null ? characterAtlasJSON : atlasJSON,
+    characterAtlasIMG: characterAtlasIMG != null ? characterAtlasIMG : atlasIMG,
+    enableHotkeys: enableHotkeys,
+    disableHotkeys: disableHotkeys
+  }));
+};
+var CharacterSubTabs = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "CharacterTradePanel__CharacterSubTabs",
+  componentId: "sc-qjqvzx-0"
+})(["display:flex;gap:8px;width:95%;margin:10px auto 0 auto;padding:8px;background:rgba(0,0,0,0.2);border-radius:4px;border:1px solid rgba(255,255,255,0.05);"]);
+var CharacterSubTab = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "CharacterTradePanel__CharacterSubTab",
+  componentId: "sc-qjqvzx-1"
+})(["flex:1;padding:8px 12px;font-family:'Press Start 2P',cursive;font-size:0.45rem;border-radius:4px;border:1px solid ", ";background:", ";color:", ";cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;text-transform:uppercase;letter-spacing:0.5px;&:hover{border-color:", ";color:", ";}"], function (_ref2) {
+  var $active = _ref2.$active;
+  return $active ? '#f59e0b' : 'rgba(255,255,255,0.12)';
+}, function (_ref3) {
+  var $active = _ref3.$active;
+  return $active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)';
+}, function (_ref4) {
+  var $active = _ref4.$active;
+  return $active ? '#f59e0b' : '#777';
+}, function (_ref5) {
+  var $active = _ref5.$active;
+  return $active ? '#f59e0b' : 'rgba(255,255,255,0.3)';
+}, function (_ref6) {
+  var $active = _ref6.$active;
+  return $active ? '#f59e0b' : '#bbb';
+});
+
 var Marketplace = function Marketplace(props) {
   var onClose = props.onClose,
     scale = props.scale,
@@ -14450,9 +14546,6 @@ var Marketplace = function Marketplace(props) {
   var _useState3 = React.useState(false),
     isBlueprintSearchOpen = _useState3[0],
     setIsBlueprintSearchOpen = _useState3[1];
-  var _useState4 = React.useState('browse'),
-    characterSubTab = _useState4[0],
-    setCharacterSubTab = _useState4[1];
   var handleCurrencyChange = function handleCurrencyChange(value) {
     setAcceptedCurrency(value);
     onAcceptedCurrencyChange == null ? void 0 : onAcceptedCurrencyChange(value);
@@ -14532,51 +14625,31 @@ var Marketplace = function Marketplace(props) {
     }]),
     activeTabId: activeTab,
     onTabChange: handleTabChange
-  }), activeTab === 'marketplace' && React__default.createElement(BuyPanel, Object.assign({}, props)), activeTab === 'characters' && React__default.createElement(React__default.Fragment, null, React__default.createElement(CharacterSubTabs, null, React__default.createElement(CharacterSubTab, {
-    "$active": characterSubTab === 'browse',
-    onClick: function onClick() {
-      return setCharacterSubTab('browse');
-    },
-    type: "button"
-  }, "Browse"), React__default.createElement(CharacterSubTab, {
-    "$active": characterSubTab === 'my-listings',
-    onClick: function onClick() {
-      return setCharacterSubTab('my-listings');
-    },
-    type: "button"
-  }, "My Listings")), characterSubTab === 'browse' && React__default.createElement(CharacterMarketplacePanel, {
+  }), activeTab === 'marketplace' && React__default.createElement(BuyPanel, Object.assign({}, props)), activeTab === 'characters' && React__default.createElement(CharacterTradePanel, {
     characterListings: characterListings != null ? characterListings : [],
-    totalCount: characterListingsTotal != null ? characterListingsTotal : 0,
-    currentPage: characterListingsPage != null ? characterListingsPage : 1,
-    itemsPerPage: characterListingsItemsPerPage != null ? characterListingsItemsPerPage : 10,
-    onPageChange: onCharacterListingsPageChange != null ? onCharacterListingsPageChange : function () {},
+    characterListingsTotal: characterListingsTotal != null ? characterListingsTotal : 0,
+    characterListingsPage: characterListingsPage != null ? characterListingsPage : 1,
+    characterListingsItemsPerPage: characterListingsItemsPerPage != null ? characterListingsItemsPerPage : 10,
+    onCharacterListingsPageChange: onCharacterListingsPageChange != null ? onCharacterListingsPageChange : function () {},
     onCharacterBuy: onCharacterBuy != null ? onCharacterBuy : function () {},
-    atlasJSON: props.atlasJSON,
-    atlasIMG: props.atlasIMG,
-    characterAtlasJSON: characterAtlasJSON != null ? characterAtlasJSON : props.atlasJSON,
-    characterAtlasIMG: characterAtlasIMG != null ? characterAtlasIMG : props.atlasIMG,
-    enableHotkeys: props.enableHotkeys,
-    disableHotkeys: props.disableHotkeys,
-    nameFilter: characterNameFilter,
-    onNameFilterChange: onCharacterNameFilterChange,
-    isLoading: characterListingsLoading
-  }), characterSubTab === 'my-listings' && React__default.createElement(MyCharacterListingsPanel, {
+    characterNameFilter: characterNameFilter,
+    onCharacterNameFilterChange: onCharacterNameFilterChange,
+    characterListingsLoading: characterListingsLoading,
     myCharacterListings: myCharacterListings != null ? myCharacterListings : [],
-    totalCount: myCharacterListingsTotal != null ? myCharacterListingsTotal : 0,
-    currentPage: myCharacterListingsPage != null ? myCharacterListingsPage : 1,
-    itemsPerPage: 10,
-    onPageChange: onMyCharacterListingsPageChange != null ? onMyCharacterListingsPageChange : function () {},
+    myCharacterListingsTotal: myCharacterListingsTotal != null ? myCharacterListingsTotal : 0,
+    myCharacterListingsPage: myCharacterListingsPage != null ? myCharacterListingsPage : 1,
+    onMyCharacterListingsPageChange: onMyCharacterListingsPageChange != null ? onMyCharacterListingsPageChange : function () {},
     onCharacterDelist: onCharacterDelist != null ? onCharacterDelist : function () {},
     accountCharacters: accountCharacters != null ? accountCharacters : [],
     onCharacterList: onCharacterList != null ? onCharacterList : function () {},
     activeCharacterId: props.characterId,
     atlasJSON: props.atlasJSON,
     atlasIMG: props.atlasIMG,
-    characterAtlasJSON: characterAtlasJSON != null ? characterAtlasJSON : props.atlasJSON,
-    characterAtlasIMG: characterAtlasIMG != null ? characterAtlasIMG : props.atlasIMG,
+    characterAtlasJSON: characterAtlasJSON,
+    characterAtlasIMG: characterAtlasIMG,
     enableHotkeys: props.enableHotkeys,
     disableHotkeys: props.disableHotkeys
-  })), activeTab === 'sell' && React__default.createElement(ManagmentPanel, Object.assign({}, props, {
+  }), activeTab === 'sell' && React__default.createElement(ManagmentPanel, Object.assign({}, props, {
     acceptedCurrency: acceptedCurrency
   })), activeTab === 'buy-orders' && React__default.createElement(React__default.Fragment, null, React__default.createElement(BuyOrderPanel, {
     atlasJSON: props.atlasJSON,
@@ -14637,29 +14710,6 @@ var PagerContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Marketplace__PagerContainer",
   componentId: "sc-h904b1-0"
 })(["display:flex;justify-content:center;align-items:center;width:95%;margin:6px auto 0 auto;padding:4px 10px;"]);
-var CharacterSubTabs = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "Marketplace__CharacterSubTabs",
-  componentId: "sc-h904b1-1"
-})(["display:flex;gap:8px;width:95%;margin:10px auto 0 auto;padding:8px;background:rgba(0,0,0,0.2);border-radius:4px;border:1px solid rgba(255,255,255,0.05);"]);
-var CharacterSubTab = /*#__PURE__*/styled__default.button.withConfig({
-  displayName: "Marketplace__CharacterSubTab",
-  componentId: "sc-h904b1-2"
-})(["flex:1;padding:8px 12px;font-family:'Press Start 2P',cursive;font-size:0.45rem;border-radius:4px;border:1px solid ", ";background:", ";color:", ";cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;text-transform:uppercase;letter-spacing:0.5px;&:hover{border-color:", ";color:", ";}"], function (_ref) {
-  var $active = _ref.$active;
-  return $active ? '#f59e0b' : 'rgba(255,255,255,0.12)';
-}, function (_ref2) {
-  var $active = _ref2.$active;
-  return $active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)';
-}, function (_ref3) {
-  var $active = _ref3.$active;
-  return $active ? '#f59e0b' : '#777';
-}, function (_ref4) {
-  var $active = _ref4.$active;
-  return $active ? '#f59e0b' : 'rgba(255,255,255,0.3)';
-}, function (_ref5) {
-  var $active = _ref5.$active;
-  return $active ? '#f59e0b' : '#bbb';
-});
 
 var CharacterMarketplaceRows = function CharacterMarketplaceRows(_ref) {
   var listing = _ref.listing,
@@ -16312,7 +16362,7 @@ var SkillInfoModal = function SkillInfoModal(_ref) {
     onPointerDown: stopPropagation
   }, React__default.createElement(Header$d, null, React__default.createElement(Title$i, {
     "$color": info.color
-  }, info.name), React__default.createElement(CloseButton$f, {
+  }, info.name), React__default.createElement(CloseButton$g, {
     onPointerDown: onClose
   }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(Section$4, null, React__default.createElement(Label$7, null, "What it does"), React__default.createElement(Text$1, null, info.description)), React__default.createElement(Section$4, null, React__default.createElement(Label$7, null, "How to train"), React__default.createElement(Text$1, null, info.howToTrain)), info.notes && React__default.createElement(Section$4, null, React__default.createElement(Label$7, null, "Notes"), React__default.createElement(Text$1, null, info.notes)))));
 };
@@ -16339,7 +16389,7 @@ var Title$i = /*#__PURE__*/styled__default.h3.withConfig({
   var $color = _ref2.$color;
   return $color;
 });
-var CloseButton$f = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$g = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "SkillInfoModal__CloseButton",
   componentId: "sc-pqkzdj-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;pointer-events:auto;&:hover{color:#ffffff;}"]);
@@ -16481,7 +16531,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React__default.createElement(CloseButton$g, {
+  }, onCloseButton && React__default.createElement(CloseButton$h, {
     onPointerDown: onCloseButton
   }, "X"), selectedInfo && React__default.createElement(SkillInfoModal, {
     info: selectedInfo,
@@ -16524,7 +16574,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$g = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$h = /*#__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;"]);
@@ -37692,7 +37742,7 @@ var CartView = function CartView(_ref2) {
   }
   return React__default.createElement(Container$M, null, React__default.createElement(Header$g, null, React__default.createElement(Title$n, null, "Shopping Cart (", cartItems.reduce(function (s, ci) {
     return s + ci.quantity;
-  }, 0), ")"), React__default.createElement(CloseButton$h, {
+  }, 0), ")"), React__default.createElement(CloseButton$i, {
     onPointerDown: onClose
   }, React__default.createElement(Cancel.Cancel, null))), React__default.createElement(MainContent$1, null, cartItems.length === 0 ? React__default.createElement(EmptyCart, null, React__default.createElement(Box.Box, null), "Your cart is empty") : React__default.createElement(CartItems, null, cartItems.map(function (cartItem) {
     var _cartItem$metadata, _cartItem$metadata2, _cartItem$item$region2, _cartItem$item$region3;
@@ -37745,7 +37795,7 @@ var Title$n = /*#__PURE__*/styled__default.h2.withConfig({
   displayName: "CartView__Title",
   componentId: "sc-ydtyl1-2"
 })(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#ffffff;margin:0;"]);
-var CloseButton$h = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$i = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CartView__CloseButton",
   componentId: "sc-ydtyl1-3"
 })(["padding:0.5rem;min-width:unset;width:42px;height:42px;display:flex;font-size:1.5rem;align-items:center;color:white;justify-content:center;"]);
@@ -38372,7 +38422,7 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React__default.createElement(Header$h, null, React__default.createElement(Title$o, null, "How would you like to pay?"), React__default.createElement(CloseButton$i, {
+  }, React__default.createElement(Header$h, null, React__default.createElement(Title$o, null, "How would you like to pay?"), React__default.createElement(CloseButton$j, {
     onPointerDown: onClose,
     "aria-label": "Close"
   }, React__default.createElement(Cancel.Cancel, null))), React__default.createElement(Options$1, null, React__default.createElement(RadioOption$2, {
@@ -38422,7 +38472,7 @@ var Title$o = /*#__PURE__*/styled__default.h3.withConfig({
   displayName: "PaymentMethodModal__Title",
   componentId: "sc-1dxy6lr-4"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
-var CloseButton$i = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$j = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "PaymentMethodModal__CloseButton",
   componentId: "sc-1dxy6lr-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;&:hover{color:#ffffff;}"]);
@@ -40281,7 +40331,7 @@ var TimeWidget = function TimeWidget(_ref) {
   return React__default.createElement(Draggable, {
     scale: scale,
     cancel: ".time-widget-close,.time-widget-container,.time-widget-container *"
-  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$j, {
+  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$k, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React__default.createElement(DayNightContainer, {
@@ -40298,7 +40348,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$j = /*#__PURE__*/styled__default.p.withConfig({
+var CloseButton$k = /*#__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);
@@ -40820,6 +40870,7 @@ exports.CharacterMarketplacePanel = CharacterMarketplacePanel;
 exports.CharacterMarketplaceRows = CharacterMarketplaceRows;
 exports.CharacterSelection = CharacterSelection;
 exports.CharacterSkinSelectionModal = CharacterSkinSelectionModal;
+exports.CharacterTradePanel = CharacterTradePanel;
 exports.Chat = Chat;
 exports.ChatDeprecated = ChatDeprecated;
 exports.ChatRevamp = ChatRevamp;