@rpg-engine/long-bow 0.8.160 → 0.8.162

package/dist/long-bow.esm.js

@@ -21,12 +21,15 @@ import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
 import { Store as Store$1 } from 'pixelarticons/react/Store';
 import { Wallet } from 'pixelarticons/react/Wallet';
+import { SortVertical } from 'pixelarticons/react/SortVertical';
 import { Search } from 'pixelarticons/react/Search';
 import { Delete } from 'pixelarticons/react/Delete';
 import 'rpgui/rpgui.css';
 import 'rpgui/rpgui.min.js';
-import { SortVertical } from 'pixelarticons/react/SortVertical';
 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) {
@@ -44501,9 +44504,13 @@ var Pager = function Pager(_ref) {
   var totalItems = _ref.totalItems,
     currentPage = _ref.currentPage,
     itemsPerPage = _ref.itemsPerPage,
-    onPageChange = _ref.onPageChange;
+    onPageChange = _ref.onPageChange,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React.createElement(Container$A, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+  return React.createElement(Container$A, null, !compact && React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, {
+    "$compact": compact
+  }, React.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -44524,7 +44531,19 @@ var Container$A = /*#__PURE__*/styled.div.withConfig({
 var PagerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Pager__PagerContainer",
   componentId: "sc-1ekmf50-1"
-})(["display:flex;justify-content:center;align-items:center;gap:5px;p{margin:0;}div{color:white;}button{width:40px;height:40px;background-color:", ";border:none;border-radius:5px;color:white;:hover{background-color:", ";}:disabled{opacity:0.5;}&.active{background-color:", ";font-weight:bold;color:black;}}"], uiColors.darkGray, uiColors.lightGray, uiColors.orange);
+})(["display:flex;justify-content:center;align-items:center;gap:5px;p{margin:0;}div{color:white;", "}button{width:", " !important;height:", " !important;font-size:", " !important;background-color:", ";border:none;border-radius:5px;color:white;:hover{background-color:", ";}:disabled{opacity:0.5;}&.active{background-color:", ";font-weight:bold;color:black;}}"], function (_ref2) {
+  var $compact = _ref2.$compact;
+  return $compact && "\n      font-size: 0.55rem !important;\n      padding: 2px 6px !important;\n      min-width: unset !important;\n    ";
+}, function (_ref3) {
+  var $compact = _ref3.$compact;
+  return $compact ? '24px' : '40px';
+}, function (_ref4) {
+  var $compact = _ref4.$compact;
+  return $compact ? '24px' : '40px';
+}, function (_ref5) {
+  var $compact = _ref5.$compact;
+  return $compact ? '0.55rem' : 'inherit';
+}, uiColors.darkGray, uiColors.lightGray, uiColors.orange);
 
 var Tabs = function Tabs(_ref) {
   var options = _ref.options,
@@ -44580,24 +44599,25 @@ var BlueprintTable = function BlueprintTable(_ref) {
       atlasJSON: atlasJSON,
       atlasIMG: atlasIMG,
       spriteKey: blueprint.texturePath || blueprint.key,
-      width: 32,
-      height: 32,
-      imgScale: 2,
+      width: 24,
+      height: 24,
+      imgScale: 1.5,
       centered: true
     })), React.createElement(ColName, null, React.createElement(BlueprintName, null, blueprint.name), (blueprint.type || blueprint.subType) && React.createElement(BlueprintMeta, null, [blueprint.type, blueprint.subType].filter(Boolean).filter(function (v, i, arr) {
       return arr.indexOf(v) === i;
     }).join(' · '))), React.createElement(ColType, null, React.createElement(TypeText, null, blueprint.type), blueprint.subType && blueprint.subType !== blueprint.type && React.createElement(SubTypeText, null, blueprint.subType)), React.createElement(ColTier, null, "T", blueprint.tier));
   }));
 };
-var tableRowBase = "\n  display: grid;\n  grid-template-columns: 40px 1fr 120px 50px;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n";
+var tableRowBase = "\n  display: grid;\n  grid-template-columns: 28px 1fr 100px 40px;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 8px;\n";
+var mobileRowOverride = "\n  @media (max-width: 600px) {\n    padding: 1px 6px;\n    gap: 4px;\n  }\n";
 var ResultsHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintTable__ResultsHeader",
   componentId: "sc-1ysxhx2-0"
-})(["", " background:rgba(0,0,0,0.4);border-bottom:1px solid rgba(255,255,255,0.1);position:sticky;top:0;z-index:1;> *{font-size:0.45rem;color:#888;text-transform:uppercase;letter-spacing:1px;}"], tableRowBase);
+})(["", " ", " background:rgba(0,0,0,0.4);border-bottom:1px solid rgba(255,255,255,0.1);position:sticky;top:0;z-index:1;&& > *{font-size:0.48rem !important;color:#555 !important;text-transform:uppercase;letter-spacing:1px;}"], tableRowBase, mobileRowOverride);
 var ResultRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintTable__ResultRow",
   componentId: "sc-1ysxhx2-1"
-})(["", " border-bottom:1px solid rgba(255,255,255,0.04);cursor:", ";transition:background 0.1s;&:hover{background:", ";}&:last-child{border-bottom:none;}"], tableRowBase, function (p) {
+})(["", " ", " border-bottom:1px solid rgba(255,255,255,0.04);cursor:", ";transition:background 0.1s;&:hover{background:", ";}&:last-child{border-bottom:none;}"], tableRowBase, mobileRowOverride, function (p) {
   return p.$selectable ? 'pointer' : 'default';
 }, function (p) {
   return p.$selectable ? 'rgba(245, 158, 11, 0.08)' : 'none';
@@ -44605,7 +44625,7 @@ var ResultRow = /*#__PURE__*/styled.div.withConfig({
 var SpriteWrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintTable__SpriteWrapper",
   componentId: "sc-1ysxhx2-2"
-})(["display:flex;align-items:center;justify-content:center;width:40px;height:32px;"]);
+})(["display:flex;align-items:center;justify-content:center;width:28px;height:24px;"]);
 var ColName = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintTable__ColName",
   componentId: "sc-1ysxhx2-3"
@@ -44613,11 +44633,11 @@ var ColName = /*#__PURE__*/styled.div.withConfig({
 var BlueprintName = /*#__PURE__*/styled.span.withConfig({
   displayName: "BlueprintTable__BlueprintName",
   componentId: "sc-1ysxhx2-4"
-})(["font-size:0.5rem;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+})(["font-size:0.6rem !important;color:#e5e7eb !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 var BlueprintMeta = /*#__PURE__*/styled.span.withConfig({
   displayName: "BlueprintTable__BlueprintMeta",
   componentId: "sc-1ysxhx2-5"
-})(["font-size:0.4rem;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+})(["font-size:0.5rem !important;color:#f59e0b !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 var ColType = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintTable__ColType",
   componentId: "sc-1ysxhx2-6"
@@ -44625,15 +44645,15 @@ var ColType = /*#__PURE__*/styled.div.withConfig({
 var TypeText = /*#__PURE__*/styled.span.withConfig({
   displayName: "BlueprintTable__TypeText",
   componentId: "sc-1ysxhx2-7"
-})(["font-size:0.45rem;color:#aaa;"]);
+})(["font-size:0.52rem !important;color:#9ca3af !important;"]);
 var SubTypeText = /*#__PURE__*/styled.span.withConfig({
   displayName: "BlueprintTable__SubTypeText",
   componentId: "sc-1ysxhx2-8"
-})(["font-size:0.4rem;color:#666;"]);
+})(["font-size:0.46rem !important;color:#f59e0b !important;"]);
 var ColTier = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintTable__ColTier",
   componentId: "sc-1ysxhx2-9"
-})(["font-size:0.5rem;color:#f59e0b;text-align:center;"]);
+})(["font-size:0.6rem !important;color:#f59e0b !important;text-align:center;"]);
 
 var BLUEPRINTS_PER_PAGE = 10;
 var scaleIn = /*#__PURE__*/keyframes(["from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}"]);
@@ -44685,6 +44705,9 @@ var BlueprintSearchModal = function BlueprintSearchModal(_ref) {
   var _useState3 = useState(''),
     selectedSubType = _useState3[0],
     setSelectedSubType = _useState3[1];
+  var _useState4 = useState(false),
+    showFilters = _useState4[0],
+    setShowFilters = _useState4[1];
   var searchNameRef = useRef(searchName);
   var selectedTypeRef = useRef(selectedType);
   var selectedSubTypeRef = useRef(selectedSubType);
@@ -44761,7 +44784,19 @@ var BlueprintSearchModal = function BlueprintSearchModal(_ref) {
     placeholder: "Search by name...",
     onFocus: disableHotkeys,
     onBlur: enableHotkeys
-  })), React.createElement(FiltersRow, null, React.createElement(StyledDropdown$3, {
+  }), React.createElement(FilterButton$1, {
+    type: "button",
+    "$active": showFilters,
+    onPointerDown: function onPointerDown() {
+      return setShowFilters(function (v) {
+        return !v;
+      });
+    },
+    "aria-label": "Toggle filters"
+  }, React.createElement(SortVertical, {
+    width: 16,
+    height: 16
+  }))), showFilters && React.createElement(FiltersRow, null, React.createElement(StyledDropdown$3, {
     key: "type-" + selectedType,
     options: typeOptions,
     onChange: handleTypeChange,
@@ -44778,12 +44813,13 @@ var BlueprintSearchModal = function BlueprintSearchModal(_ref) {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     onSelect: onSelect
-  })), isLoading && React.createElement(LoadingOverlay, null, React.createElement(LoadingText, null, "Loading..."))), React.createElement(PagerContainer$1, null, React.createElement(Pager, {
+  })), isLoading && React.createElement(LoadingOverlay, null, React.createElement(LoadingText, null, "Loading..."))), React.createElement(Pager, {
+    compact: true,
     totalItems: totalCount,
     currentPage: currentPage,
     itemsPerPage: BLUEPRINTS_PER_PAGE,
     onPageChange: handlePageChange
-  })))));
+  }))));
 };
 var Overlay$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintSearchModal__Overlay",
@@ -44796,7 +44832,7 @@ var ModalContainer$2 = /*#__PURE__*/styled.div.withConfig({
 var ModalContent$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintSearchModal__ModalContent",
   componentId: "sc-i7bssq-2"
-})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px;width:600px;max-width:90%;display:flex;flex-direction:column;gap:12px;pointer-events:auto;animation:", " 0.15s ease-out;"], scaleIn);
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px;width:600px;max-width:90%;max-height:90dvh;display:flex;flex-direction:column;gap:12px;overflow:hidden;pointer-events:auto;animation:", " 0.15s ease-out;@media (max-width:950px){max-width:96%;max-height:95dvh;min-height:75dvh;padding:14px 16px;gap:8px;}"], scaleIn);
 var Header$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintSearchModal__Header",
   componentId: "sc-i7bssq-3"
@@ -44817,40 +44853,49 @@ var StyledInput$2 = /*#__PURE__*/styled(Input).withConfig({
   displayName: "BlueprintSearchModal__StyledInput",
   componentId: "sc-i7bssq-7"
 })(["flex:1;"]);
+var FilterButton$1 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "BlueprintSearchModal__FilterButton",
+  componentId: "sc-i7bssq-8"
+})(["flex-shrink:0;width:28px;height:28px;border-radius:6px;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 (_ref2) {
+  var $active = _ref2.$active;
+  return $active ? 'rgba(245, 158, 11, 0.55)' : 'rgba(255, 255, 255, 0.08)';
+}, function (_ref3) {
+  var $active = _ref3.$active;
+  return $active ? 'rgba(245, 158, 11, 0.14)' : 'rgba(255, 255, 255, 0.03)';
+}, function (_ref4) {
+  var $active = _ref4.$active;
+  return $active ? '#f59e0b' : '#ccc';
+});
 var FiltersRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintSearchModal__FiltersRow",
-  componentId: "sc-i7bssq-8"
+  componentId: "sc-i7bssq-9"
 })(["display:grid;grid-template-columns:1fr 1fr;gap:8px;"]);
 var StyledDropdown$3 = /*#__PURE__*/styled(Dropdown).withConfig({
   displayName: "BlueprintSearchModal__StyledDropdown",
-  componentId: "sc-i7bssq-9"
+  componentId: "sc-i7bssq-10"
 })(["margin:0px !important;width:100% !important;"]);
 var ResultsWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintSearchModal__ResultsWrapper",
-  componentId: "sc-i7bssq-10"
-})(["position:relative;overflow-y:auto;height:320px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.05);border-radius:4px;"]);
+  componentId: "sc-i7bssq-11"
+})(["position:relative;overflow-y:auto;flex:1;min-height:80px;display:flex;flex-direction:column;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.05);border-radius:4px;"]);
 var ResultsContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintSearchModal__ResultsContent",
-  componentId: "sc-i7bssq-11"
+  componentId: "sc-i7bssq-12"
 })(["opacity:", ";transition:opacity 0.15s ease;"], function (p) {
   return p.$dimmed ? 0.4 : 1;
 });
 var LoadingOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintSearchModal__LoadingOverlay",
-  componentId: "sc-i7bssq-12"
+  componentId: "sc-i7bssq-13"
 })(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;"]);
 var LoadingText = /*#__PURE__*/styled.span.withConfig({
   displayName: "BlueprintSearchModal__LoadingText",
-  componentId: "sc-i7bssq-13"
+  componentId: "sc-i7bssq-14"
 })(["font-size:0.55rem;color:#f59e0b;text-transform:uppercase;letter-spacing:1px;"]);
 var EmptyState$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlueprintSearchModal__EmptyState",
-  componentId: "sc-i7bssq-14"
-})(["display:flex;align-items:center;justify-content:center;height:100%;font-size:0.55rem;color:#666;text-transform:uppercase;letter-spacing:1px;"]);
-var PagerContainer$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "BlueprintSearchModal__PagerContainer",
   componentId: "sc-i7bssq-15"
-})(["display:flex;justify-content:center;align-items:center;"]);
+})(["display:flex;align-items:center;justify-content:center;flex:1;font-size:0.55rem;color:#666;text-transform:uppercase;letter-spacing:1px;"]);
 
 var SegmentedToggle = function SegmentedToggle(_ref) {
   var options = _ref.options,
@@ -45061,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,
@@ -45321,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
@@ -45355,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",
@@ -45371,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({
@@ -45742,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,
@@ -45757,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,
@@ -45829,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,
@@ -45868,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);
 });
 
@@ -46145,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),
@@ -46198,7 +46302,7 @@ var BuyPanel = function BuyPanel(_ref) {
     onBlur: enableHotkeys,
     onFocus: disableHotkeys,
     className: "search-input"
-  })), React.createElement(FilterButton$1, {
+  })), React.createElement(FilterButton$2, {
     type: "button",
     "$active": showFilters,
     onClick: function onClick() {
@@ -46210,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%"
@@ -46221,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) {
@@ -46249,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) {
@@ -46316,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,
@@ -46345,17 +46453,17 @@ var SearchField = /*#__PURE__*/styled.div.withConfig({
   displayName: "BuyPanel__SearchField",
   componentId: "sc-1si8t7i-1"
 })(["min-width:0;input.search-input{height:10px;width:100%;}"]);
-var FilterButton$1 = /*#__PURE__*/styled.button.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({
@@ -46365,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"
@@ -46518,7 +46629,7 @@ var HistoryPanel = function HistoryPanel(_ref) {
     }))), React.createElement(GoldAmount, {
       "$type": tx.type
     }, getGoldSign(tx.type), tx.goldAmount, "g"))));
-  })), React.createElement(PagerContainer$2, null, React.createElement(Pager, {
+  })), React.createElement(PagerContainer$1, null, React.createElement(Pager, {
     totalItems: totalCount,
     currentPage: currentPage,
     itemsPerPage: itemsPerPage,
@@ -46626,7 +46737,7 @@ var EmptyState$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "HistoryPanel__EmptyState",
   componentId: "sc-74mioa-20"
 })(["display:flex;align-items:center;justify-content:center;height:45px;font-size:0.5rem;color:#555;text-transform:uppercase;letter-spacing:1px;background:rgba(0,0,0,0.15);border-radius:4px;"]);
-var PagerContainer$2 = /*#__PURE__*/styled.div.withConfig({
+var PagerContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "HistoryPanel__PagerContainer",
   componentId: "sc-74mioa-21"
 })(["display:flex;justify-content:center;margin-top:4px;"]);
@@ -47097,9 +47208,9 @@ var Marketplace = function Marketplace(props) {
   }), activeTab === 'wallet' && showWalletTab && walletProps && React.createElement(DCWalletContent, Object.assign({}, walletProps)), activeTab === 'settings' && React.createElement(MarketplaceSettingsPanel, {
     acceptedCurrency: acceptedCurrency,
     onAcceptedCurrencyChange: handleCurrencyChange
-  }), showSharedPager && React.createElement(PagerContainer$3, null, React.createElement(Pager, Object.assign({}, props))));
+  }), showSharedPager && React.createElement(PagerContainer$2, null, React.createElement(Pager, Object.assign({}, props))));
 };
-var PagerContainer$3 = /*#__PURE__*/styled.div.withConfig({
+var PagerContainer$2 = /*#__PURE__*/styled.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;"]);
@@ -70106,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,
@@ -70116,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,
@@ -70147,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"
@@ -70247,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;
@@ -70288,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.",
@@ -70314,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(''),
@@ -70374,7 +70483,7 @@ var StorePacksSection = function StorePacksSection(_ref) {
       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, {
+    }, 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(CTAButton, {
       icon: React.createElement(FaCartPlus, null),
       label: "Add",
       onClick: function onClick(e) {
@@ -70396,33 +70505,37 @@ 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);}"]);
+})(["cursor:pointer;"]);
+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"
+  componentId: "sc-ulazq3-7"
 })(["display:flex;align-items:center;flex-shrink:0;"]);
 
 var StoreItemDetails = function StoreItemDetails(_ref) {
@@ -70495,6 +70608,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,
@@ -70632,6 +70746,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;
@@ -70645,6 +70763,10 @@ var Store = function Store(_ref) {
     packs: {
       id: 'packs',
       title: 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;
@@ -70658,6 +70780,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,
@@ -70670,12 +70796,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,
@@ -70738,18 +70865,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,
@@ -70775,26 +70903,30 @@ 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 LoadingMessage$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__LoadingMessage",
-  componentId: "sc-64dj00-8"
+  componentId: "sc-64dj00-9"
 })(["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-10"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.red);
 
 var PaymentMethodModal = function PaymentMethodModal(_ref) {
@@ -71086,7 +71218,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,
@@ -71146,7 +71278,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);
@@ -71468,5 +71600,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