@rpg-engine/long-bow 0.8.161 → 0.8.163

package/dist/long-bow.esm.js

@@ -27,6 +27,9 @@ import { Delete } from 'pixelarticons/react/Delete';
 import 'rpgui/rpgui.css';
 import 'rpgui/rpgui.min.js';
 import { Coins } from 'pixelarticons/react/Coins';
+import { Box } from 'pixelarticons/react/Box';
+import { Crown } from 'pixelarticons/react/Crown';
+import { Gift } from 'pixelarticons/react/Gift';
 import capitalize from 'lodash-es/capitalize';
 
 function _arrayLikeToArray(r, a) {
@@ -45103,6 +45106,58 @@ var CancelButton$1 = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-6bghe9-17"
 })(["flex:1;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:#ccc;border-radius:4px;padding:8px 12px;font-size:0.5rem;font-family:'Press Start 2P',cursive;cursor:pointer;text-transform:uppercase;letter-spacing:0.5px;transition:background 0.1s,border-color 0.1s;pointer-events:auto;&:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15);}"]);
 
+var GroupedRowContainer = function GroupedRowContainer(_ref) {
+  var mainRow = _ref.mainRow,
+    subRows = _ref.subRows,
+    _ref$badgeLabel = _ref.badgeLabel,
+    badgeLabel = _ref$badgeLabel === void 0 ? 'offers' : _ref$badgeLabel;
+  var _useState = useState(false),
+    expanded = _useState[0],
+    setExpanded = _useState[1];
+  var hasMultiple = subRows.length > 0;
+  var totalCount = subRows.length + 1;
+  return React.createElement(GroupWrapper, null, React.createElement(GroupHeader, {
+    "$clickable": hasMultiple,
+    onClick: hasMultiple ? function () {
+      return setExpanded(function (e) {
+        return !e;
+      });
+    } : undefined
+  }, mainRow, hasMultiple && React.createElement(GroupMeta, null, React.createElement(OfferBadge, null, totalCount, " ", badgeLabel), React.createElement(Chevron, {
+    "$expanded": expanded
+  }, "\u25B8"))), expanded && React.createElement(SubRows, null, subRows));
+};
+var GroupWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GroupedRowContainer__GroupWrapper",
+  componentId: "sc-12q03tq-0"
+})(["margin-bottom:2px;"]);
+var GroupHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GroupedRowContainer__GroupHeader",
+  componentId: "sc-12q03tq-1"
+})(["position:relative;cursor:", ";"], function (_ref2) {
+  var $clickable = _ref2.$clickable;
+  return $clickable ? 'pointer' : 'default';
+});
+var GroupMeta = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GroupedRowContainer__GroupMeta",
+  componentId: "sc-12q03tq-2"
+})(["position:absolute;right:180px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;pointer-events:none;"]);
+var OfferBadge = /*#__PURE__*/styled.span.withConfig({
+  displayName: "GroupedRowContainer__OfferBadge",
+  componentId: "sc-12q03tq-3"
+})(["font-family:'Press Start 2P',cursive;font-size:0.5rem;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.08);padding:2px 6px;border-radius:8px;white-space:nowrap;"]);
+var Chevron = /*#__PURE__*/styled.span.withConfig({
+  displayName: "GroupedRowContainer__Chevron",
+  componentId: "sc-12q03tq-4"
+})(["display:inline-block;font-size:0.7rem;color:rgba(255,255,255,0.4);transition:transform 0.2s ease;transform:rotate(", ");"], function (_ref3) {
+  var $expanded = _ref3.$expanded;
+  return $expanded ? '90deg' : '0deg';
+});
+var SubRows = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GroupedRowContainer__SubRows",
+  componentId: "sc-12q03tq-5"
+})(["margin-left:12px;padding-left:8px;border-left:2px solid rgba(245,158,11,0.25);> div > div{background:rgba(0,0,0,0.4);}"]);
+
 var LabelPill = function LabelPill(_ref) {
   var children = _ref.children,
     _ref$background = _ref.background,
@@ -45363,19 +45418,18 @@ var BuyOrderRow = function BuyOrderRow(_ref) {
     background: "rgba(34, 197, 94, 0.16)",
     borderColor: "rgba(34, 197, 94, 0.4)",
     color: "#bbf7d0"
-  }, requestTagLabel), buyOrder.itemRarity && React.createElement(LabelPill, {
-    background: rarityGlow != null ? rarityGlow : 'rgba(255,255,255,0.1)',
-    borderColor: "rgba(255,255,255,0.08)",
-    color: "#fff"
-  }, buyOrder.itemRarity), isOwn && React.createElement(LabelPill, {
+  }, requestTagLabel), isOwn && React.createElement(LabelPill, {
     background: STATUS_COLORS[buyOrder.status],
     borderColor: "transparent",
     color: "#fff"
-  }, formatStatusLabel(buyOrder.status)), timeRemaining && React.createElement(LabelPill, {
+  }, formatStatusLabel(buyOrder.status)), timeRemaining && React.createElement(SimpleTooltip, {
+    content: "Expires in",
+    direction: "top"
+  }, React.createElement(LabelPill, {
     background: "rgba(255,255,255,0.08)",
     borderColor: "rgba(255,255,255,0.08)",
     color: "#fff"
-  }, timeRemaining)))), isOwn && buyOrder.status === MarketplaceBuyOrderStatus.Active && onCancel && React.createElement(ActionSection, null, React.createElement(CTAButton, {
+  }, timeRemaining))))), isOwn && buyOrder.status === MarketplaceBuyOrderStatus.Active && onCancel && React.createElement(ActionSection, null, React.createElement(CTAButton, {
     icon: React.createElement(Delete, {
       width: 18,
       height: 18
@@ -45397,6 +45451,33 @@ var BuyOrderRow = function BuyOrderRow(_ref) {
     }
   })));
 };
+var GroupedBuyOrderRow = function GroupedBuyOrderRow(_ref2) {
+  var bestOrder = _ref2.bestOrder,
+    otherOrders = _ref2.otherOrders,
+    atlasJSON = _ref2.atlasJSON,
+    atlasIMG = _ref2.atlasIMG,
+    isOwn = _ref2.isOwn,
+    onCancel = _ref2.onCancel,
+    onFulfill = _ref2.onFulfill,
+    showRequestTag = _ref2.showRequestTag;
+  var makeRow = function makeRow(order) {
+    return React.createElement(BuyOrderRow, {
+      key: order._id,
+      buyOrder: order,
+      atlasJSON: atlasJSON,
+      atlasIMG: atlasIMG,
+      isOwn: isOwn,
+      onCancel: onCancel,
+      onFulfill: onFulfill,
+      showRequestTag: showRequestTag
+    });
+  };
+  return React.createElement(GroupedRowContainer, {
+    mainRow: makeRow(bestOrder),
+    subRows: otherOrders.map(makeRow),
+    badgeLabel: "requests"
+  });
+};
 // ── Styled components matching MarketplaceRows layout ──
 var RowWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyOrderRows__RowWrapper",
@@ -45413,8 +45494,8 @@ var SpriteContainer$3 = /*#__PURE__*/styled.div.withConfig({
 var RarityGlow = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyOrderRows__RarityGlow",
   componentId: "sc-zz5s5j-3"
-})(["width:32px;height:32px;", ""], function (_ref2) {
-  var $color = _ref2.$color;
+})(["width:32px;height:32px;", ""], function (_ref3) {
+  var $color = _ref3.$color;
   return $color ? "\n    border-color: " + $color + ";\n    box-shadow: 0 0 5px 8px " + $color + " inset, 0 0 8px 6px " + $color + ";\n  " : '';
 });
 var SpritePlaceholder = /*#__PURE__*/styled.div.withConfig({
@@ -45784,6 +45865,15 @@ var ConfirmRow = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-86ottl-13"
 })(["display:flex;justify-content:center;margin-top:4px;"]);
 
+var ItemRowWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemRowWrapper",
+  componentId: "sc-5g2skk-0"
+})(["display:flex;align-items:center;justify-content:space-between;padding:0.6rem 1rem;margin-bottom:4px;background:", ";border:1px solid rgba(255,255,255,0.05);border-radius:6px;border-left:4px solid ", ";transition:all 0.2s ease-in-out;&:hover{background:rgba(245,158,11,0.08);border-color:rgba(245,158,11,0.2);border-left-color:#f59e0b;box-shadow:0 4px 12px rgba(0,0,0,0.2);transform:translateY(-1px);}"], function (p) {
+  return p.$isHighlighted ? 'rgba(255, 215, 0, 0.08)' : 'rgba(0, 0, 0, 0.25)';
+}, function (p) {
+  return p.$isHighlighted ? '#ffd700' : 'transparent';
+});
+
 var MarketplaceRows = function MarketplaceRows(_ref) {
   var atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
@@ -45799,7 +45889,7 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
   var renderGems = function renderGems(item) {
     return item.attachedGems && onRenderGems(item);
   };
-  return React.createElement(MarketplaceWrapper, null, React.createElement(ItemSection$1, null, React.createElement(SpriteContainer$4, null, React.createElement(ItemInfoWrapper, {
+  return React.createElement(ItemRowWrapper, null, React.createElement(ItemSection$1, null, React.createElement(SpriteContainer$4, null, React.createElement(ItemInfoWrapper, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -45871,31 +45961,7 @@ var GroupedMarketplaceRow = function GroupedMarketplaceRow(_ref2) {
     characterId = _ref2.characterId,
     onBuy = _ref2.onBuy,
     onDCCoinClick = _ref2.onDCCoinClick;
-  var _useState = useState(false),
-    expanded = _useState[0],
-    setExpanded = _useState[1];
-  var totalOffers = otherListings.length + 1;
-  var hasMultiple = otherListings.length > 0;
-  return React.createElement(GroupWrapper, null, React.createElement(GroupHeader, {
-    onClick: hasMultiple ? function () {
-      return setExpanded(!expanded);
-    } : undefined,
-    clickable: hasMultiple
-  }, React.createElement(MarketplaceRows, {
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    item: bestListing.item,
-    itemPrice: bestListing.price,
-    dcEquivalentPrice: dcToGoldSwapRate > 0 ? getDCEquivalentPrice(bestListing.price) : undefined,
-    equipmentSet: equipmentSet,
-    onMarketPlaceItemBuy: function onMarketPlaceItemBuy() {
-      return onBuy(bestListing._id);
-    },
-    onDCCoinClick: onDCCoinClick,
-    disabled: bestListing.owner === characterId
-  }), hasMultiple && React.createElement(GroupMeta, null, React.createElement(OfferBadge, null, totalOffers, " offers"), React.createElement(Chevron, {
-    expanded: expanded
-  }, "\u25B8"))), expanded && React.createElement(SubRows, null, otherListings.map(function (listing) {
+  var makeRow = function makeRow(listing) {
     return React.createElement(MarketplaceRows, {
       key: listing._id,
       atlasIMG: atlasIMG,
@@ -45910,115 +45976,86 @@ var GroupedMarketplaceRow = function GroupedMarketplaceRow(_ref2) {
       onDCCoinClick: onDCCoinClick,
       disabled: listing.owner === characterId
     });
-  })));
+  };
+  return React.createElement(GroupedRowContainer, {
+    mainRow: makeRow(bestListing),
+    subRows: otherListings.map(makeRow),
+    badgeLabel: "offers"
+  });
 };
-var GroupWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__GroupWrapper",
-  componentId: "sc-wmpr1o-0"
-})(["margin-bottom:2px;"]);
-var GroupHeader = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__GroupHeader",
-  componentId: "sc-wmpr1o-1"
-})(["position:relative;cursor:", ";"], function (_ref3) {
-  var clickable = _ref3.clickable;
-  return clickable ? 'pointer' : 'default';
-});
-var GroupMeta = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__GroupMeta",
-  componentId: "sc-wmpr1o-2"
-})(["position:absolute;right:180px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;pointer-events:none;"]);
-var OfferBadge = /*#__PURE__*/styled.span.withConfig({
-  displayName: "MarketplaceRows__OfferBadge",
-  componentId: "sc-wmpr1o-3"
-})(["font-family:'Press Start 2P',cursive;font-size:0.5rem;color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.08);padding:2px 6px;border-radius:8px;white-space:nowrap;"]);
-var Chevron = /*#__PURE__*/styled.span.withConfig({
-  displayName: "MarketplaceRows__Chevron",
-  componentId: "sc-wmpr1o-4"
-})(["display:inline-block;font-size:0.7rem;color:rgba(255,255,255,0.4);transition:transform 0.2s ease;transform:rotate(", ");"], function (_ref4) {
-  var expanded = _ref4.expanded;
-  return expanded ? '90deg' : '0deg';
-});
-var SubRows = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__SubRows",
-  componentId: "sc-wmpr1o-5"
-})(["margin-left:12px;padding-left:8px;border-left:2px solid rgba(245,158,11,0.25);> div > div{background:rgba(0,0,0,0.4);}"]);
-var MarketplaceWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__MarketplaceWrapper",
-  componentId: "sc-wmpr1o-6"
-})(["display:flex;align-items:center;justify-content:space-between;padding:0.6rem 1rem;margin-bottom:4px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.05);border-radius:6px;border-left:4px solid transparent;transition:all 0.2s ease-in-out;&:hover{background:rgba(245,158,11,0.08);border-color:rgba(245,158,11,0.2);border-left-color:#f59e0b;box-shadow:0 4px 12px rgba(0,0,0,0.2);transform:translateY(-1px);}"]);
 var ItemSection$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__ItemSection",
-  componentId: "sc-wmpr1o-7"
+  componentId: "sc-wmpr1o-0"
 })(["display:flex;align-items:center;gap:0.75rem;flex:1;min-width:0;"]);
 var SpriteContainer$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__SpriteContainer",
-  componentId: "sc-wmpr1o-8"
+  componentId: "sc-wmpr1o-1"
 })(["position:relative;flex-shrink:0;min-width:44px;"]);
 var ItemDetails$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__ItemDetails",
-  componentId: "sc-wmpr1o-9"
+  componentId: "sc-wmpr1o-2"
 })(["display:flex;flex-direction:column;gap:0.2rem;min-width:0;margin-left:1rem;"]);
 var ItemName$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__ItemName",
-  componentId: "sc-wmpr1o-10"
+  componentId: "sc-wmpr1o-3"
 })(["font-family:'Press Start 2P',cursive;font-size:0.65rem;color:#ffffff;"]);
 var PriceRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__PriceRow",
-  componentId: "sc-wmpr1o-11"
+  componentId: "sc-wmpr1o-4"
 })(["display:flex;flex-direction:row;align-items:center;gap:0.5rem;margin-top:0.2rem;"]);
 var GoldPriceRow$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__GoldPriceRow",
-  componentId: "sc-wmpr1o-12"
+  componentId: "sc-wmpr1o-5"
 })(["display:flex;align-items:center;gap:0.3rem;"]);
 var GoldIcon$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "MarketplaceRows__GoldIcon",
-  componentId: "sc-wmpr1o-13"
+  componentId: "sc-wmpr1o-6"
 })(["display:flex;align-items:center;justify-content:center;position:relative;top:-0.6rem;left:-0.5rem;"]);
 var GoldPrice$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "MarketplaceRows__GoldPrice",
-  componentId: "sc-wmpr1o-14"
+  componentId: "sc-wmpr1o-7"
 })(["font-family:'Press Start 2P',cursive;font-size:0.6rem !important;color:#fef08a;line-height:1;"]);
 var DCPriceRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__DCPriceRow",
-  componentId: "sc-wmpr1o-15"
-})(["display:flex;align-items:center;gap:0.3rem;margin-left:0.5rem;cursor:", ";border-radius:4px;transition:opacity 0.15s;&:hover{opacity:", ";}"], function (_ref5) {
-  var $clickable = _ref5.$clickable;
+  componentId: "sc-wmpr1o-8"
+})(["display:flex;align-items:center;gap:0.3rem;margin-left:0.5rem;cursor:", ";border-radius:4px;transition:opacity 0.15s;&:hover{opacity:", ";}"], function (_ref3) {
+  var $clickable = _ref3.$clickable;
   return $clickable ? 'pointer' : 'default';
-}, function (_ref6) {
-  var $clickable = _ref6.$clickable;
+}, function (_ref4) {
+  var $clickable = _ref4.$clickable;
   return $clickable ? '0.75' : '1';
 });
 var DCCoinWrapper = /*#__PURE__*/styled.span.withConfig({
   displayName: "MarketplaceRows__DCCoinWrapper",
-  componentId: "sc-wmpr1o-16"
+  componentId: "sc-wmpr1o-9"
 })(["display:flex;align-items:center;justify-content:center;position:relative;top:-0.6rem;left:-0.5rem;"]);
 var DCPrice = /*#__PURE__*/styled.span.withConfig({
   displayName: "MarketplaceRows__DCPrice",
-  componentId: "sc-wmpr1o-17"
+  componentId: "sc-wmpr1o-10"
 })(["font-family:'Press Start 2P',cursive;font-size:0.6rem !important;color:rgba(254,240,138,0.65);white-space:nowrap;"]);
 var ActionSection$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__ActionSection",
-  componentId: "sc-wmpr1o-18"
+  componentId: "sc-wmpr1o-11"
 })(["flex-shrink:0;margin-left:0.75rem;"]);
 var QuantityContainer = /*#__PURE__*/styled.p.withConfig({
   displayName: "MarketplaceRows__QuantityContainer",
-  componentId: "sc-wmpr1o-19"
+  componentId: "sc-wmpr1o-12"
 })(["position:absolute;display:block;top:15px;left:-8px;font-size:", " !important;"], uiFonts.size.xsmall);
 var GemContainer = /*#__PURE__*/styled.p.withConfig({
   displayName: "MarketplaceRows__GemContainer",
-  componentId: "sc-wmpr1o-20"
+  componentId: "sc-wmpr1o-13"
 })(["position:absolute;display:block;top:-5px;left:-10px;font-size:", " !important;"], uiFonts.size.xsmall);
 var RarityContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__RarityContainer",
-  componentId: "sc-wmpr1o-21"
-})(["border-color:", ";box-shadow:", " inset,", ";width:32px;height:32px;"], function (_ref7) {
-  var item = _ref7.item;
+  componentId: "sc-wmpr1o-14"
+})(["border-color:", ";box-shadow:", " inset,", ";width:32px;height:32px;"], function (_ref5) {
+  var item = _ref5.item;
   return rarityColor(item);
-}, function (_ref8) {
-  var item = _ref8.item;
+}, function (_ref6) {
+  var item = _ref6.item;
   return "0 0 5px 8px " + rarityColor(item);
-}, function (_ref9) {
-  var item = _ref9.item;
+}, function (_ref7) {
+  var item = _ref7.item;
   return "0 0 8px 6px " + rarityColor(item);
 });
 
@@ -46187,9 +46224,34 @@ var BuyPanel = function BuyPanel(_ref) {
       return true;
     });
   }, [name, openBuyOrders, price, selectedRarity]);
+  var groupedBuyOrders = useMemo(function () {
+    var groups = new Map();
+    for (var _iterator2 = _createForOfIteratorHelperLoose(visibleBuyOrders), _step2; !(_step2 = _iterator2()).done;) {
+      var order = _step2.value;
+      var key = order.itemBlueprintKey;
+      if (!groups.has(key)) groups.set(key, []);
+      groups.get(key).push(order);
+    }
+    return Array.from(groups.values()).map(function (group) {
+      var sorted = [].concat(group).sort(function (a, b) {
+        return b.maxPrice - a.maxPrice;
+      });
+      return {
+        bestOrder: sorted[0],
+        otherOrders: sorted.slice(1)
+      };
+    }).sort(function (a, b) {
+      var totalGold = function totalGold(g) {
+        return [g.bestOrder].concat(g.otherOrders).reduce(function (sum, o) {
+          return sum + o.maxPrice;
+        }, 0);
+      };
+      return totalGold(b) - totalGold(a);
+    });
+  }, [visibleBuyOrders]);
   var showSellSection = browseMode === 'sell';
   var showBuySection = browseMode === 'buy';
-  var hasVisibleContent = showSellSection && groupedItems.length > 0 || showBuySection && visibleBuyOrders.length > 0;
+  var hasVisibleContent = showSellSection && groupedItems.length > 0 || showBuySection && groupedBuyOrders.length > 0;
   return React.createElement(React.Fragment, null, buyingItemId && buyingItem && hasDCBalance && React.createElement(MarketplaceBuyModal, {
     goldPrice: buyingItem.price,
     dcEquivalentPrice: getDCEquivalentPrice(buyingItem.price),
@@ -46252,7 +46314,9 @@ var BuyPanel = function BuyPanel(_ref) {
     height: 18
   }))), showFilters && React.createElement(OptionsWrapper, {
     showFilters: showFilters
-  }, React.createElement(WrapperContainer$1, null, React.createElement(StyledDropdown$5, {
+  }, React.createElement(WrapperContainer$1, {
+    "$sell": showSellSection
+  }, showSellSection && React.createElement(StyledDropdown$5, {
     options: itemTypeOptions,
     onChange: onChangeType,
     width: "100%"
@@ -46263,11 +46327,11 @@ var BuyPanel = function BuyPanel(_ref) {
       onChangeRarity(value);
     },
     width: "100%"
-  }), React.createElement(StyledDropdown$5, {
+  }), showSellSection && React.createElement(StyledDropdown$5, {
     options: orderByOptions,
     onChange: onChangeOrder,
     width: "100%"
-  })), React.createElement(FilterInputsWrapper, null, React.createElement("div", null, React.createElement("p", null, "Main level"), React.createElement("div", {
+  })), React.createElement(FilterInputsWrapper, null, showSellSection && React.createElement("div", null, React.createElement("p", null, "Main level"), React.createElement("div", {
     className: "input-group"
   }, React.createElement(Input, {
     onChange: function onChange(e) {
@@ -46291,7 +46355,7 @@ var BuyPanel = function BuyPanel(_ref) {
     min: 0,
     onBlur: enableHotkeys,
     onFocus: disableHotkeys
-  }))), React.createElement("div", null, React.createElement("p", null, "Secondary level"), React.createElement("div", {
+  }))), showSellSection && React.createElement("div", null, React.createElement("p", null, "Secondary level"), React.createElement("div", {
     className: "input-group"
   }, React.createElement(Input, {
     onChange: function onChange(e) {
@@ -46358,14 +46422,16 @@ var BuyPanel = function BuyPanel(_ref) {
       onBuy: setBuyingItemId,
       onDCCoinClick: onDCCoinClick
     });
-  })), showBuySection && React.createElement(MarketSection, null, React.createElement(SectionHeader, null, React.createElement(SectionTitle$2, null, "Buy Requests"), React.createElement(SectionMeta, null, visibleBuyOrders.length, " visible")), visibleBuyOrders.length === 0 ? React.createElement(SectionEmpty, null, "No public buy requests found.") : visibleBuyOrders.map(function (order) {
-    return React.createElement(BuyOrderRow, {
-      key: order._id,
-      buyOrder: order,
+  })), showBuySection && React.createElement(MarketSection, null, React.createElement(SectionHeader, null, React.createElement(SectionTitle$2, null, "Buy Requests"), React.createElement(SectionMeta, null, groupedBuyOrders.length, " groups")), groupedBuyOrders.length === 0 ? React.createElement(SectionEmpty, null, "No public buy requests found.") : groupedBuyOrders.map(function (_ref3) {
+    var bestOrder = _ref3.bestOrder,
+      otherOrders = _ref3.otherOrders;
+    return React.createElement(GroupedBuyOrderRow, {
+      key: bestOrder._id,
+      bestOrder: bestOrder,
+      otherOrders: otherOrders,
       atlasJSON: atlasJSON,
       atlasIMG: atlasIMG,
-      onFulfill: setFulfillingBuyOrderId,
-      showRequestTag: true
+      onFulfill: setFulfillingBuyOrderId
     });
   })))), React.createElement(PagerFooter, null, showSellSection && totalItems > itemsPerPage && React.createElement(Pager, {
     totalItems: totalItems,
@@ -46390,14 +46456,14 @@ var SearchField = /*#__PURE__*/styled.div.withConfig({
 var FilterButton$2 = /*#__PURE__*/styled.button.withConfig({
   displayName: "BuyPanel__FilterButton",
   componentId: "sc-1si8t7i-2"
-})(["width:36px;height:36px;border-radius:8px;border:1px solid ", ";background:", ";color:", ";cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color 0.15s,border-color 0.15s,background 0.15s;&:hover{color:#f59e0b;border-color:rgba(245,158,11,0.45);}"], function (_ref3) {
-  var $active = _ref3.$active;
-  return $active ? 'rgba(245, 158, 11, 0.55)' : 'rgba(255, 255, 255, 0.08)';
-}, function (_ref4) {
+})(["width:36px;height:36px;border-radius:8px;border:1px solid ", ";background:", ";color:", ";cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color 0.15s,border-color 0.15s,background 0.15s;&:hover{color:#f59e0b;border-color:rgba(245,158,11,0.45);}"], function (_ref4) {
   var $active = _ref4.$active;
-  return $active ? 'rgba(245, 158, 11, 0.14)' : 'rgba(255, 255, 255, 0.03)';
+  return $active ? 'rgba(245, 158, 11, 0.55)' : 'rgba(255, 255, 255, 0.08)';
 }, function (_ref5) {
   var $active = _ref5.$active;
+  return $active ? 'rgba(245, 158, 11, 0.14)' : 'rgba(255, 255, 255, 0.03)';
+}, function (_ref6) {
+  var $active = _ref6.$active;
   return $active ? '#f59e0b' : '#ccc';
 });
 var BrowseModeRow = /*#__PURE__*/styled.div.withConfig({
@@ -46407,18 +46473,21 @@ var BrowseModeRow = /*#__PURE__*/styled.div.withConfig({
 var OptionsWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyPanel__OptionsWrapper",
   componentId: "sc-1si8t7i-4"
-})(["width:95%;margin:0 auto;background:rgba(0,0,0,0.15);border-radius:4px;border:1px solid rgba(255,255,255,0.05);padding:10px;display:flex;flex-direction:column;gap:", ";"], function (_ref6) {
-  var showFilters = _ref6.showFilters;
+})(["width:95%;margin:0 auto;background:rgba(0,0,0,0.15);border-radius:4px;border:1px solid rgba(255,255,255,0.05);padding:10px;display:flex;flex-direction:column;gap:", ";"], function (_ref7) {
+  var showFilters = _ref7.showFilters;
   return showFilters ? '15px' : '0';
 });
 var FilterInputsWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyPanel__FilterInputsWrapper",
   componentId: "sc-1si8t7i-5"
-})(["display:grid;grid-template-columns:repeat(3,1fr);gap:15px;color:white;> div{display:flex;flex-direction:column;gap:5px;}p{margin:0;font-size:0.65rem;color:#aaa;text-transform:uppercase;letter-spacing:1px;}.input-group{display:flex;align-items:center;gap:5px;input{width:100%;height:10px;}}.separator-icon{flex-shrink:0;color:rgba(255,255,255,0.3);}"]);
+})(["display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px;color:white;> div{display:flex;flex-direction:column;gap:5px;}p{margin:0;font-size:0.65rem;color:#aaa;text-transform:uppercase;letter-spacing:1px;}.input-group{display:flex;align-items:center;gap:5px;input{width:100%;height:10px;}}.separator-icon{flex-shrink:0;color:rgba(255,255,255,0.3);}"]);
 var WrapperContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyPanel__WrapperContainer",
   componentId: "sc-1si8t7i-6"
-})(["display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;.rpgui-content .rpgui-dropdown-imp-header{padding:0px 10px 0 !important;}"]);
+})(["display:grid;grid-template-columns:", ";gap:15px;.rpgui-content .rpgui-dropdown-imp-header{padding:0px 10px 0 !important;}"], function (_ref8) {
+  var $sell = _ref8.$sell;
+  return $sell ? 'repeat(3, 1fr)' : 'minmax(0, 200px)';
+});
 var ItemComponentScrollWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyPanel__ItemComponentScrollWrapper",
   componentId: "sc-1si8t7i-7"
@@ -70148,9 +70217,9 @@ var StoreItemRow = function StoreItemRow(_ref) {
       resetQuantity();
     }
   };
-  return React.createElement(ItemWrapper$1, {
+  return React.createElement(ItemRowWrapper, {
     "$isHighlighted": ((_item$store = item.store) == null ? void 0 : _item$store.isHighlighted) || false
-  }, React.createElement(ItemIconContainer$2, null, React.createElement(SpriteFromAtlas, {
+  }, React.createElement(LeftSection, null, React.createElement(ItemIconContainer$2, null, React.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: item.texturePath,
@@ -70158,7 +70227,7 @@ var StoreItemRow = function StoreItemRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  })), React.createElement(ItemDetails$5, null, React.createElement(ItemName$6, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price, item.dcPrice ? " \xB7 " + item.dcPrice.toLocaleString() + " DC" : ''), React.createElement(ItemDescription, null, item.description)), React.createElement(Controls$1, null, showTextInput ? React.createElement(TextInput, {
+  })), React.createElement(ItemDetails$5, null, React.createElement(ItemName$6, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price, item.dcPrice ? " \xB7 " + item.dcPrice.toLocaleString() + " DC" : ''), React.createElement(ItemDescription, null, item.description))), React.createElement(Controls$1, null, showTextInput ? React.createElement(TextInput, {
     type: "text",
     value: textInputValue,
     placeholder: textInputPlaceholder,
@@ -70189,14 +70258,10 @@ var StoreItemRow = function StoreItemRow(_ref) {
     disabled: !hasRequiredAccount
   })));
 };
-var ItemWrapper$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "StoreItemRow__ItemWrapper",
+var LeftSection = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemRow__LeftSection",
   componentId: "sc-ptotuo-0"
-})(["display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;border-bottom:1px solid rgba(255,255,255,0.1);background:", ";border-left:", ";&:last-child{border-bottom:none;}"], function (props) {
-  return props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent';
-}, function (props) {
-  return props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent';
-});
+})(["display:flex;align-items:center;gap:0.75rem;flex:1;min-width:0;"]);
 var ItemIconContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemRow__ItemIconContainer",
   componentId: "sc-ptotuo-1"
@@ -70289,6 +70354,7 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
   var _useStoreFiltering = useStoreFiltering(items),
     searchQuery = _useStoreFiltering.searchQuery,
     setSearchQuery = _useStoreFiltering.setSearchQuery,
+    selectedCategory = _useStoreFiltering.selectedCategory,
     setSelectedCategory = _useStoreFiltering.setSelectedCategory,
     categoryOptions = _useStoreFiltering.categoryOptions,
     filteredItems = _useStoreFiltering.filteredItems;
@@ -70330,13 +70396,18 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     value: searchQuery,
     onChange: setSearchQuery,
     placeholder: "Search items..."
-  })), React.createElement(DropdownContainer$2, null, React.createElement(Dropdown, {
-    options: categoryOptions,
-    onChange: function onChange(value) {
-      return setSelectedCategory(value);
-    },
-    width: "100%"
-  }))), React.createElement(ScrollableContent, {
+  })), React.createElement(SegmentedToggle, {
+    options: categoryOptions.map(function (opt) {
+      return {
+        id: opt.value,
+        label: opt.option
+      };
+    }),
+    activeId: selectedCategory,
+    onChange: function onChange(id) {
+      return setSelectedCategory(id);
+    }
+  })), React.createElement(ScrollableContent, {
     items: filteredItems,
     renderItem: renderStoreItem,
     emptyMessage: "No items match your filters.",
@@ -70356,10 +70427,6 @@ var SearchBarContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemsSection__SearchBarContainer",
   componentId: "sc-l6f466-2"
 })(["flex:0.75;"]);
-var DropdownContainer$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "StoreItemsSection__DropdownContainer",
-  componentId: "sc-l6f466-3"
-})(["flex:0.25;min-width:140px;"]);
 
 var usePackFiltering = function usePackFiltering(packs) {
   var _useState = useState(''),
@@ -70377,12 +70444,48 @@ var usePackFiltering = function usePackFiltering(packs) {
   };
 };
 
-var StorePacksSection = function StorePacksSection(_ref) {
-  var packs = _ref.packs,
+var PackRowItem = function PackRowItem(_ref) {
+  var pack = _ref.pack,
     onAddToCart = _ref.onAddToCart,
-    onSelectPack = _ref.onSelectPack,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG;
+    renderPackIcon = _ref.renderPackIcon;
+  var _useQuantityControl = useQuantityControl(),
+    quantity = _useQuantityControl.quantity,
+    handleQuantityChange = _useQuantityControl.handleQuantityChange,
+    handleBlur = _useQuantityControl.handleBlur,
+    incrementQuantity = _useQuantityControl.incrementQuantity,
+    decrementQuantity = _useQuantityControl.decrementQuantity,
+    resetQuantity = _useQuantityControl.resetQuantity;
+  var handleAdd = function handleAdd() {
+    onAddToCart(pack, quantity);
+    resetQuantity();
+  };
+  return React.createElement(PackRow, null, React.createElement(LeftSection$1, null, React.createElement(PackIconContainer, null, renderPackIcon(pack)), React.createElement(PackDetails, null, React.createElement(PackName, null, pack.title), React.createElement(PackPrice, null, "$", pack.priceUSD), pack.description && React.createElement(PackDescription, null, pack.description))), React.createElement(Controls$2, null, React.createElement(ArrowsContainer$1, null, React.createElement(SelectArrow, {
+    direction: "left",
+    onPointerDown: decrementQuantity,
+    size: 24
+  }), React.createElement(QuantityInput$1, {
+    type: "number",
+    value: quantity,
+    onChange: handleQuantityChange,
+    onBlur: handleBlur,
+    min: 1,
+    max: 99,
+    className: "rpgui-input"
+  }), React.createElement(SelectArrow, {
+    direction: "right",
+    onPointerDown: incrementQuantity,
+    size: 24
+  })), React.createElement(CTAButton, {
+    icon: React.createElement(FaCartPlus, null),
+    label: "Add",
+    onClick: handleAdd
+  })));
+};
+var StorePacksSection = function StorePacksSection(_ref2) {
+  var packs = _ref2.packs,
+    onAddToCart = _ref2.onAddToCart,
+    atlasJSON = _ref2.atlasJSON,
+    atlasIMG = _ref2.atlasIMG;
   var _usePackFiltering = usePackFiltering(packs),
     searchQuery = _usePackFiltering.searchQuery,
     setSearchQuery = _usePackFiltering.setSearchQuery,
@@ -70411,20 +70514,13 @@ var StorePacksSection = function StorePacksSection(_ref) {
     });
   }, [atlasJSON, atlasIMG]);
   var renderPack = useCallback(function (pack) {
-    return React.createElement(PackRow, {
+    return React.createElement(PackRowItem, {
       key: pack.key,
-      onClick: function onClick() {
-        return onSelectPack == null ? void 0 : onSelectPack(pack);
-      }
-    }, React.createElement(PackIconContainer, null, renderPackIcon(pack)), React.createElement(PackDetails, null, React.createElement(PackName, null, pack.title), React.createElement(PackPrice, null, "$", pack.priceUSD), pack.description && React.createElement(PackDescription, null, pack.description)), React.createElement(Controls$2, null, React.createElement(CTAButton, {
-      icon: React.createElement(FaCartPlus, null),
-      label: "Add",
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        onAddToCart(pack);
-      }
-    })));
-  }, [onSelectPack, onAddToCart]);
+      pack: pack,
+      onAddToCart: onAddToCart,
+      renderPackIcon: renderPackIcon
+    });
+  }, [onAddToCart, renderPackIcon]);
   return React.createElement(ScrollableContent, {
     items: filteredPacks,
     renderItem: renderPack,
@@ -70438,34 +70534,46 @@ var StorePacksSection = function StorePacksSection(_ref) {
     maxHeight: "420px"
   });
 };
-var PackRow = /*#__PURE__*/styled.div.withConfig({
+var PackRow = /*#__PURE__*/styled(ItemRowWrapper).withConfig({
   displayName: "StorePacksSection__PackRow",
   componentId: "sc-ulazq3-0"
-})(["display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;border-bottom:1px solid rgba(255,255,255,0.1);cursor:pointer;&:last-child{border-bottom:none;}&:hover{background:rgba(255,255,255,0.04);}"]);
+})([""]);
+var LeftSection$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StorePacksSection__LeftSection",
+  componentId: "sc-ulazq3-1"
+})(["display:flex;align-items:center;gap:0.75rem;flex:1;min-width:0;"]);
 var PackIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "StorePacksSection__PackIconContainer",
-  componentId: "sc-ulazq3-1"
+  componentId: "sc-ulazq3-2"
 })(["width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;img{width:100%;height:100%;object-fit:cover;}"]);
 var PackDetails = /*#__PURE__*/styled.div.withConfig({
   displayName: "StorePacksSection__PackDetails",
-  componentId: "sc-ulazq3-2"
+  componentId: "sc-ulazq3-3"
 })(["flex:1;display:flex;flex-direction:column;gap:0.25rem;min-width:0;"]);
 var PackName = /*#__PURE__*/styled.div.withConfig({
   displayName: "StorePacksSection__PackName",
-  componentId: "sc-ulazq3-3"
+  componentId: "sc-ulazq3-4"
 })(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;"]);
 var PackPrice = /*#__PURE__*/styled.div.withConfig({
   displayName: "StorePacksSection__PackPrice",
-  componentId: "sc-ulazq3-4"
+  componentId: "sc-ulazq3-5"
 })(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:#fef08a;"]);
 var PackDescription = /*#__PURE__*/styled.div.withConfig({
   displayName: "StorePacksSection__PackDescription",
-  componentId: "sc-ulazq3-5"
+  componentId: "sc-ulazq3-6"
 })(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:rgba(255,255,255,0.7);line-height:1.4;"]);
 var Controls$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StorePacksSection__Controls",
-  componentId: "sc-ulazq3-6"
-})(["display:flex;align-items:center;flex-shrink:0;"]);
+  componentId: "sc-ulazq3-7"
+})(["display:flex;align-items:center;gap:0.5rem;flex-shrink:0;"]);
+var ArrowsContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StorePacksSection__ArrowsContainer",
+  componentId: "sc-ulazq3-8"
+})(["position:relative;display:flex;align-items:center;width:120px;height:42px;justify-content:space-between;"]);
+var QuantityInput$1 = /*#__PURE__*/styled.input.withConfig({
+  displayName: "StorePacksSection__QuantityInput",
+  componentId: "sc-ulazq3-9"
+})(["width:40px;text-align:center;margin:0 auto;font-size:0.875rem;background:rgba(0,0,0,0.2);color:#ffffff;border:none;padding:0.25rem;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}"]);
 
 var StoreItemDetails = function StoreItemDetails(_ref) {
   var item = _ref.item,
@@ -70537,6 +70645,7 @@ var Actions = /*#__PURE__*/styled.div.withConfig({
 })(["margin-top:auto;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.1);"]);
 
 var Store = function Store(_ref) {
+  var _tabsMap$activeTab;
   var items = _ref.items,
     _ref$packs = _ref.packs,
     packs = _ref$packs === void 0 ? [] : _ref$packs,
@@ -70560,7 +70669,8 @@ var Store = function Store(_ref) {
     customPacksContent = _ref.customPacksContent,
     customWalletContent = _ref.customWalletContent,
     _ref$packsTabLabel = _ref.packsTabLabel,
-    packsTabLabel = _ref$packsTabLabel === void 0 ? 'Packs' : _ref$packsTabLabel;
+    packsTabLabel = _ref$packsTabLabel === void 0 ? 'Packs' : _ref$packsTabLabel,
+    packsBadge = _ref.packsBadge;
   var _useState = useState(null),
     selectedPack = _useState[0],
     setSelectedPack = _useState[1];
@@ -70591,7 +70701,10 @@ var Store = function Store(_ref) {
   var _useState4 = useState(null),
     currentMetadataItem = _useState4[0],
     setCurrentMetadataItem = _useState4[1];
-  var handleAddPackToCart = function handleAddPackToCart(pack) {
+  var handleAddPackToCart = function handleAddPackToCart(pack, quantity) {
+    if (quantity === void 0) {
+      quantity = 1;
+    }
     var packItem = {
       key: pack.key,
       name: pack.title,
@@ -70623,7 +70736,7 @@ var Store = function Store(_ref) {
       maxStackSize: 1,
       isUsable: false
     };
-    handleAddToCart(packItem, 1);
+    handleAddToCart(packItem, quantity);
   };
   var filterItems = function filterItems(itemsToFilter, type) {
     return itemsToFilter.filter(function (item) {
@@ -70674,6 +70787,10 @@ var Store = function Store(_ref) {
     premium: {
       id: 'premium',
       title: 'Premium',
+      icon: React.createElement(Crown, {
+        width: 18,
+        height: 18
+      }),
       content: React.createElement(StorePacksSection, {
         packs: packs.filter(function (pack) {
           return pack.priceUSD >= 9.99;
@@ -70686,7 +70803,15 @@ var Store = function Store(_ref) {
     },
     packs: {
       id: 'packs',
-      title: packsTabLabel,
+      title: packsBadge ? React.createElement(TabLabelWithBadge, null, packsTabLabel, React.createElement(LabelPill, {
+        background: "#f59e0b",
+        borderColor: "#f59e0b",
+        color: "#000"
+      }, packsBadge)) : packsTabLabel,
+      icon: React.createElement(Gift, {
+        width: 18,
+        height: 18
+      }),
       content: customPacksContent != null ? customPacksContent : React.createElement(StorePacksSection, {
         packs: hidePremiumTab ? packs : packs.filter(function (pack) {
           return pack.priceUSD < 9.99;
@@ -70700,6 +70825,10 @@ var Store = function Store(_ref) {
     items: {
       id: 'items',
       title: 'Items',
+      icon: React.createElement(Box, {
+        width: 18,
+        height: 18
+      }),
       content: React.createElement(StoreItemsSection, {
         items: filteredItems.items,
         onAddToCart: handleAddToCart,
@@ -70712,12 +70841,13 @@ var Store = function Store(_ref) {
     wallet: {
       id: 'wallet',
       title: 'Wallet',
+      icon: React.createElement(Wallet, {
+        width: 18,
+        height: 18
+      }),
       content: customWalletContent != null ? customWalletContent : null
     }
   };
-  var tabs = availableTabIds.map(function (id) {
-    return tabsMap[id];
-  });
   return React.createElement(DraggableContainer, {
     title: "Store",
     onCloseButton: onClose,
@@ -70780,18 +70910,19 @@ var Store = function Store(_ref) {
     icon: React.createElement(FaShoppingCart, null),
     label: getTotalItems() + " items ($" + getTotalPrice().toFixed(2) + ")",
     onClick: openCart
-  }))), React.createElement(MainContent$1, null, React.createElement(InternalTabs, {
-    tabs: tabs,
-    activeTextColor: "#000000",
-    activeColor: "#fef08a",
-    inactiveColor: "#6b7280",
-    borderColor: "#f59e0b",
-    hoverColor: "#fef3c7",
-    activeTab: activeTab,
+  }))), React.createElement(MainContent$1, null, React.createElement(Tabs, {
+    options: availableTabIds.map(function (id) {
+      return {
+        id: id,
+        label: tabsMap[id].title,
+        icon: tabsMap[id].icon
+      };
+    }),
+    activeTabId: activeTab,
     onTabChange: function onTabChange(tabId) {
       return setActiveTab(tabId);
     }
-  })), cartItems.length > 0 && React.createElement(Footer$2, null, React.createElement(CartSummary, null, React.createElement(CartInfo, null, React.createElement("span", null, "Items in cart:"), React.createElement("span", null, getTotalItems())), React.createElement(CartInfo, null, React.createElement("span", null, "Total:"), React.createElement("span", null, "$", getTotalPrice().toFixed(2)))), React.createElement(CTAButton, {
+  }), React.createElement(TabContent, null, (_tabsMap$activeTab = tabsMap[activeTab]) == null ? void 0 : _tabsMap$activeTab.content)), cartItems.length > 0 && React.createElement(Footer$2, null, React.createElement(CartSummary, null, React.createElement(CartInfo, null, React.createElement("span", null, "Items in cart:"), React.createElement("span", null, getTotalItems())), React.createElement(CartInfo, null, React.createElement("span", null, "Total:"), React.createElement("span", null, "$", getTotalPrice().toFixed(2)))), React.createElement(CTAButton, {
     icon: React.createElement(FaShoppingCart, null),
     label: "Proceed to Checkout ($" + getTotalPrice().toFixed(2) + ")",
     onClick: openCart,
@@ -70817,26 +70948,34 @@ var CartButton = /*#__PURE__*/styled.div.withConfig({
 var MainContent$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__MainContent",
   componentId: "sc-64dj00-4"
-})(["flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;.rpgui-tabs-content{flex:1;overflow-y:auto;padding-right:0.5rem;}"]);
+})(["flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;"]);
+var TabContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Store__TabContent",
+  componentId: "sc-64dj00-5"
+})(["flex:1;overflow-y:auto;padding-right:0.5rem;"]);
 var Footer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__Footer",
-  componentId: "sc-64dj00-5"
+  componentId: "sc-64dj00-6"
 })(["display:flex;flex-direction:column;gap:1rem;padding:1rem;border-top:2px solid #f59e0b;background:rgba(0,0,0,0.2);flex-shrink:0;"]);
 var CartSummary = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__CartSummary",
-  componentId: "sc-64dj00-6"
+  componentId: "sc-64dj00-7"
 })(["display:flex;flex-direction:column;gap:0.5rem;"]);
 var CartInfo = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__CartInfo",
-  componentId: "sc-64dj00-7"
+  componentId: "sc-64dj00-8"
 })(["display:flex;align-items:center;gap:0.75rem;font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;span:last-child{color:#fef08a;}"]);
+var TabLabelWithBadge = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Store__TabLabelWithBadge",
+  componentId: "sc-64dj00-9"
+})(["display:inline-flex;align-items:center;gap:5px;"]);
 var LoadingMessage$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__LoadingMessage",
-  componentId: "sc-64dj00-8"
+  componentId: "sc-64dj00-10"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.white);
 var ErrorMessage$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__ErrorMessage",
-  componentId: "sc-64dj00-9"
+  componentId: "sc-64dj00-11"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.red);
 
 var PaymentMethodModal = function PaymentMethodModal(_ref) {
@@ -71128,7 +71267,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     }
     return null;
   };
-  return React.createElement(ItemWrapper$2, null, React.createElement(ItemIconContainer$3, null, React.createElement(SpriteContainer$6, null, React.createElement(ItemInfoWrapper, {
+  return React.createElement(ItemWrapper$1, null, React.createElement(ItemIconContainer$3, null, React.createElement(SpriteContainer$6, null, React.createElement(ItemInfoWrapper, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
@@ -71162,7 +71301,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     onPointerDown: function onPointerDown() {
       return onLeftClick();
     }
-  }), React.createElement(QuantityInput$1, {
+  }), React.createElement(QuantityInput$2, {
     type: "text",
     value: inputQty,
     onChange: handleQuantityChange,
@@ -71188,7 +71327,7 @@ var StyledArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
   displayName: "TradingItemRow__StyledArrow",
   componentId: "sc-mja0b5-0"
 })(["margin:0 1.5rem;"]);
-var ItemWrapper$2 = /*#__PURE__*/styled.div.withConfig({
+var ItemWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemWrapper",
   componentId: "sc-mja0b5-1"
 })(["width:100%;display:flex;justify-content:space-between;margin-bottom:0.5rem;padding:0.25rem;&:hover{background-color:", ";}"], uiColors.darkGray);
@@ -71212,7 +71351,7 @@ var QuantityContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
   componentId: "sc-mja0b5-6"
 })(["display:flex;min-width:90px;width:40%;justify-content:flex-end;align-items:center;flex:30%;gap:2px;position:relative;"]);
-var QuantityInput$1 = /*#__PURE__*/styled.input.withConfig({
+var QuantityInput$2 = /*#__PURE__*/styled.input.withConfig({
   displayName: "TradingItemRow__QuantityInput",
   componentId: "sc-mja0b5-7"
 })(["width:30px;text-align:center;background-color:", ";color:white;border:none;padding:1px;font-size:", ";position:relative;right:4px;"], uiColors.darkGray, uiFonts.size.small);
@@ -71510,5 +71649,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-6"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { ActionButtons, AsyncDropdown, BLUEPRINTS_PER_PAGE, BUY_ORDERS_PER_PAGE, BlueprintSearchModal, Button, ButtonTypes, BuyOrderPanel, BuyOrderRow, CTAButton, CartView, CharacterSelection, CharacterSkinSelectionModal, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DCWalletContent, DCWalletModal, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, GemSelector, GroupedMarketplaceRow, HISTORY_ITEMS_PER_PAGE, HistoryDialog, HistoryPanel, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, LoginStreakPanel, Marketplace, MarketplaceBuyModal, MarketplaceRows, MarketplaceSettingsPanel, MetadataCollector, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PaymentMethodModal, PlayersRow, ProgressBar$1 as ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, Store, TRANSACTION_TYPE_FILTER_ALL, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer$1 as TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener, useStoreCart };
+export { ActionButtons, AsyncDropdown, BLUEPRINTS_PER_PAGE, BUY_ORDERS_PER_PAGE, BlueprintSearchModal, Button, ButtonTypes, BuyOrderPanel, BuyOrderRow, CTAButton, CartView, CharacterSelection, CharacterSkinSelectionModal, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DCWalletContent, DCWalletModal, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, GemSelector, GroupedBuyOrderRow, GroupedMarketplaceRow, HISTORY_ITEMS_PER_PAGE, HistoryDialog, HistoryPanel, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, LoginStreakPanel, Marketplace, MarketplaceBuyModal, MarketplaceRows, MarketplaceSettingsPanel, MetadataCollector, MultitabType, NPCDialog, NPCDialogType, NPCMultiDialog, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PaymentMethodModal, PlayersRow, ProgressBar$1 as ProgressBar, PropertySelect, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, Store, TRANSACTION_TYPE_FILTER_ALL, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer$1 as TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener, useStoreCart };
 //# sourceMappingURL=long-bow.esm.js.map