@rpg-engine/long-bow 0.8.166 → 0.8.168

package/dist/long-bow.esm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, Component, useRef, useCallback, useMemo, me
 import styled, { css, keyframes, createGlobalStyle } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, isMobileOrTablet, RewardType, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, MarketplaceBuyOrderStatus, formatDCAmount, goldToDC, MarketplaceTransactionType, MarketplaceAcceptedCurrency, CharacterClass, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, MetadataType, PurchaseType, UserAccountTypes, PaymentCurrency, PeriodOfDay } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, isMobileOrTablet, RewardType, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, MarketplaceBuyOrderStatus, formatDCAmount, MarketplaceAcceptedCurrency, goldToDC, MarketplaceTransactionType, CharacterClass, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, MetadataType, PurchaseType, UserAccountTypes, PaymentCurrency, PeriodOfDay } from '@rpg-engine/shared';
 export { MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
@@ -45880,6 +45880,7 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     item = _ref.item,
     itemPrice = _ref.itemPrice,
     dcEquivalentPrice = _ref.dcEquivalentPrice,
+    acceptedCurrency = _ref.acceptedCurrency,
     equipmentSet = _ref.equipmentSet,
     scale = _ref.scale,
     onMarketPlaceItemBuy = _ref.onMarketPlaceItemBuy,
@@ -45912,7 +45913,11 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     maxLines: 1,
     maxWidth: "200px",
     fontSize: "10px"
-  }, item.name)), React.createElement(PriceRow, null, React.createElement(GoldPriceRow$1, null, React.createElement(GoldIcon$1, null, React.createElement(SimpleTooltip, {
+  }, item.name), acceptedCurrency === MarketplaceAcceptedCurrency.Dc && React.createElement(CurrencyBadge, {
+    "$color": "#a78bfa"
+  }, "DC only"), acceptedCurrency === MarketplaceAcceptedCurrency.Gold && React.createElement(CurrencyBadge, {
+    "$color": "#fef08a"
+  }, "Gold only")), React.createElement(PriceRow, null, acceptedCurrency !== MarketplaceAcceptedCurrency.Dc && React.createElement(GoldPriceRow$1, null, React.createElement(GoldIcon$1, null, React.createElement(SimpleTooltip, {
     content: "Gold Coin",
     direction: "top"
   }, React.createElement(SpriteFromAtlas, {
@@ -45962,18 +45967,22 @@ var GroupedMarketplaceRow = function GroupedMarketplaceRow(_ref2) {
     onBuy = _ref2.onBuy,
     onDCCoinClick = _ref2.onDCCoinClick;
   var makeRow = function makeRow(listing) {
+    var listingCurrency = listing.acceptedCurrency || MarketplaceAcceptedCurrency.GoldOrDc;
+    var isDcOnly = listingCurrency === MarketplaceAcceptedCurrency.Dc;
+    var showDcPrice = isDcOnly || dcToGoldSwapRate > 0 && listingCurrency !== MarketplaceAcceptedCurrency.Gold;
     return React.createElement(MarketplaceRows, {
       key: listing._id,
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
       item: listing.item,
       itemPrice: listing.price,
-      dcEquivalentPrice: dcToGoldSwapRate > 0 ? getDCEquivalentPrice(listing.price) : undefined,
+      dcEquivalentPrice: showDcPrice ? getDCEquivalentPrice(listing.price) : undefined,
+      acceptedCurrency: listingCurrency,
       equipmentSet: equipmentSet,
       onMarketPlaceItemBuy: function onMarketPlaceItemBuy() {
         return onBuy(listing._id);
       },
-      onDCCoinClick: onDCCoinClick,
+      onDCCoinClick: isDcOnly ? undefined : onDCCoinClick,
       disabled: listing.owner === characterId
     });
   };
@@ -46045,17 +46054,27 @@ var GemContainer = /*#__PURE__*/styled.p.withConfig({
   displayName: "MarketplaceRows__GemContainer",
   componentId: "sc-wmpr1o-13"
 })(["position:absolute;display:block;top:-5px;left:-10px;font-size:", " !important;"], uiFonts.size.xsmall);
+var CurrencyBadge = /*#__PURE__*/styled.span.withConfig({
+  displayName: "MarketplaceRows__CurrencyBadge",
+  componentId: "sc-wmpr1o-14"
+})(["display:inline-block;margin-left:6px;padding:1px 4px;font-family:'Press Start 2P',cursive;font-size:0.38rem;color:", ";border:1px solid ", ";border-radius:3px;opacity:0.85;vertical-align:middle;text-transform:uppercase;letter-spacing:0.5px;"], function (_ref5) {
+  var $color = _ref5.$color;
+  return $color;
+}, function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+});
 var RarityContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__RarityContainer",
-  componentId: "sc-wmpr1o-14"
-})(["border-color:", ";box-shadow:", " inset,", ";width:32px;height:32px;"], function (_ref5) {
-  var item = _ref5.item;
+  componentId: "sc-wmpr1o-15"
+})(["border-color:", ";box-shadow:", " inset,", ";width:32px;height:32px;"], function (_ref7) {
+  var item = _ref7.item;
   return rarityColor(item);
-}, function (_ref6) {
-  var item = _ref6.item;
+}, function (_ref8) {
+  var item = _ref8.item;
   return "0 0 5px 8px " + rarityColor(item);
-}, function (_ref7) {
-  var item = _ref7.item;
+}, function (_ref9) {
+  var item = _ref9.item;
   return "0 0 8px 6px " + rarityColor(item);
 });
 
@@ -46171,6 +46190,9 @@ var BuyPanel = function BuyPanel(_ref) {
   var _useState9 = useState(null),
     fulfillingBuyOrderId = _useState9[0],
     setFulfillingBuyOrderId = _useState9[1];
+  var _useState10 = useState(null),
+    currencyFilter = _useState10[0],
+    setCurrencyFilter = _useState10[1];
   var itemsContainer = useRef(null);
   useEffect(function () {
     var _itemsContainer$curre;
@@ -46183,9 +46205,19 @@ var BuyPanel = function BuyPanel(_ref) {
   var getDCEquivalentPrice = function getDCEquivalentPrice(goldPrice) {
     return dcToGoldSwapRate > 0 ? goldToDC(goldPrice) : 0;
   };
+  var handleBuyClick = function handleBuyClick(listingId) {
+    // All currencies go through the confirmation modal
+    setBuyingItemId(listingId);
+  };
   var groupedItems = useMemo(function () {
+    var filtered = currencyFilter === null ? items : items.filter(function (i) {
+      var c = i.acceptedCurrency || MarketplaceAcceptedCurrency.GoldOrDc;
+      if (currencyFilter === 'gold') return c === MarketplaceAcceptedCurrency.Gold || c === MarketplaceAcceptedCurrency.GoldOrDc;
+      if (currencyFilter === 'dc') return c === MarketplaceAcceptedCurrency.Dc || c === MarketplaceAcceptedCurrency.GoldOrDc;
+      return true;
+    });
     var groups = new Map();
-    for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
+    for (var _iterator = _createForOfIteratorHelperLoose(filtered), _step; !(_step = _iterator()).done;) {
       var entry = _step.value;
       var key = entry.item.key;
       if (!groups.has(key)) {
@@ -46202,7 +46234,7 @@ var BuyPanel = function BuyPanel(_ref) {
         otherListings: sorted.slice(1)
       };
     });
-  }, [items]);
+  }, [items, currencyFilter]);
   var visibleBuyOrders = useMemo(function () {
     var normalizedName = name.trim().toLowerCase();
     return openBuyOrders.filter(function (order) {
@@ -46252,27 +46284,32 @@ var BuyPanel = function BuyPanel(_ref) {
   var showSellSection = browseMode === 'sell';
   var showBuySection = browseMode === 'buy';
   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),
-    dcBalance: dcBalance,
-    onClose: function onClose() {
-      return setBuyingItemId(null);
-    },
-    onConfirm: function onConfirm(paymentMethod) {
-      onMarketPlaceItemBuy == null ? void 0 : onMarketPlaceItemBuy(buyingItemId, paymentMethod);
-      setBuyingItemId(null);
-      enableHotkeys == null ? void 0 : enableHotkeys();
-    }
-  }), buyingItemId && !hasDCBalance && React.createElement(ConfirmModal, {
-    onClose: setBuyingItemId.bind(null, null),
-    onConfirm: function onConfirm() {
-      onMarketPlaceItemBuy == null ? void 0 : onMarketPlaceItemBuy(buyingItemId);
-      setBuyingItemId(null);
-      enableHotkeys == null ? void 0 : enableHotkeys();
-    },
-    message: "Are you sure you want to buy this item?"
-  }), fulfillingBuyOrderId && React.createElement(ConfirmModal, {
+  return React.createElement(React.Fragment, null, buyingItemId && buyingItem && function () {
+    var listingCurrency = buyingItem.acceptedCurrency || MarketplaceAcceptedCurrency.GoldOrDc;
+    var isDcOnly = listingCurrency === MarketplaceAcceptedCurrency.Dc;
+    var showPaymentChoiceModal = listingCurrency === MarketplaceAcceptedCurrency.GoldOrDc && hasDCBalance;
+    return showPaymentChoiceModal ? React.createElement(MarketplaceBuyModal, {
+      goldPrice: buyingItem.price,
+      dcEquivalentPrice: getDCEquivalentPrice(buyingItem.price),
+      dcBalance: dcBalance,
+      onClose: function onClose() {
+        return setBuyingItemId(null);
+      },
+      onConfirm: function onConfirm(paymentMethod) {
+        onMarketPlaceItemBuy == null ? void 0 : onMarketPlaceItemBuy(buyingItemId, paymentMethod);
+        setBuyingItemId(null);
+        enableHotkeys == null ? void 0 : enableHotkeys();
+      }
+    }) : React.createElement(ConfirmModal, {
+      onClose: setBuyingItemId.bind(null, null),
+      onConfirm: function onConfirm() {
+        onMarketPlaceItemBuy == null ? void 0 : onMarketPlaceItemBuy(buyingItemId, isDcOnly ? 'dc' : undefined);
+        setBuyingItemId(null);
+        enableHotkeys == null ? void 0 : enableHotkeys();
+      },
+      message: isDcOnly ? "Are you sure you want to buy this item with DC?" : "Are you sure you want to buy this item?"
+    });
+  }(), fulfillingBuyOrderId && React.createElement(ConfirmModal, {
     onClose: setFulfillingBuyOrderId.bind(null, null),
     onConfirm: function onConfirm() {
       onFulfillBuyOrder == null ? void 0 : onFulfillBuyOrder(fulfillingBuyOrderId);
@@ -46312,7 +46349,18 @@ var BuyPanel = function BuyPanel(_ref) {
   }, React.createElement(SortVertical, {
     width: 18,
     height: 18
-  }))), showFilters && React.createElement(OptionsWrapper, {
+  }))), showSellSection && React.createElement(CurrencyFilterRow, null, React.createElement(CurrencyFilterLabel, null, "Currency:"), ['gold', 'dc'].map(function (c) {
+    return React.createElement(CurrencyFilterButton, {
+      key: c,
+      "$active": currencyFilter === c,
+      onPointerDown: function onPointerDown() {
+        return setCurrencyFilter(function (prev) {
+          return prev === c ? null : c;
+        });
+      },
+      type: "button"
+    }, c === 'gold' ? 'Gold' : 'DC');
+  })), showFilters && React.createElement(OptionsWrapper, {
     showFilters: showFilters
   }, React.createElement(WrapperContainer$1, {
     "$sell": showSellSection
@@ -46419,7 +46467,7 @@ var BuyPanel = function BuyPanel(_ref) {
       dcToGoldSwapRate: dcToGoldSwapRate,
       getDCEquivalentPrice: getDCEquivalentPrice,
       characterId: characterId,
-      onBuy: setBuyingItemId,
+      onBuy: handleBuyClick,
       onDCCoinClick: onDCCoinClick
     });
   })), 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) {
@@ -46533,6 +46581,33 @@ var LoadingText$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "BuyPanel__LoadingText",
   componentId: "sc-1si8t7i-17"
 })(["font-size:0.48rem;color:#8a8a8a;text-transform:uppercase;letter-spacing:1px;"]);
+var CurrencyFilterRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BuyPanel__CurrencyFilterRow",
+  componentId: "sc-1si8t7i-18"
+})(["display:flex;align-items:center;gap:6px;width:95%;margin:0 auto 8px auto;"]);
+var CurrencyFilterLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "BuyPanel__CurrencyFilterLabel",
+  componentId: "sc-1si8t7i-19"
+})(["font-size:0.45rem !important;color:#666 !important;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;"]);
+var CurrencyFilterButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "BuyPanel__CurrencyFilterButton",
+  componentId: "sc-1si8t7i-20"
+})(["padding:3px 8px;font-family:'Press Start 2P',cursive !important;font-size:0.4rem !important;border-radius:4px;border:1px solid ", " !important;background:", " !important;color:", " !important;cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;&:hover{border-color:", " !important;color:", " !important;}"], function (_ref9) {
+  var $active = _ref9.$active;
+  return $active ? '#f59e0b' : 'rgba(255,255,255,0.12)';
+}, function (_ref10) {
+  var $active = _ref10.$active;
+  return $active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)';
+}, function (_ref11) {
+  var $active = _ref11.$active;
+  return $active ? '#f59e0b' : '#777';
+}, function (_ref12) {
+  var $active = _ref12.$active;
+  return $active ? '#f59e0b' : 'rgba(255,255,255,0.3)';
+}, function (_ref13) {
+  var $active = _ref13.$active;
+  return $active ? '#f59e0b' : '#bbb';
+});
 
 var _TRANSACTION_TYPE_COL;
 var HISTORY_ITEMS_PER_PAGE = 10;
@@ -46742,6 +46817,16 @@ var PagerContainer$1 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-74mioa-21"
 })(["display:flex;justify-content:center;margin-top:4px;"]);
 
+var LISTING_CURRENCY_OPTIONS = [{
+  value: MarketplaceAcceptedCurrency.GoldOrDc,
+  label: 'Both'
+}, {
+  value: MarketplaceAcceptedCurrency.Gold,
+  label: 'Gold'
+}, {
+  value: MarketplaceAcceptedCurrency.Dc,
+  label: 'DC'
+}];
 var ManagmentPanel = function ManagmentPanel(_ref) {
   var items = _ref.items,
     atlasIMG = _ref.atlasIMG,
@@ -46767,6 +46852,9 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
   var _useState3 = useState(null),
     removingItemId = _useState3[0],
     setRemovingItemId = _useState3[1];
+  var _useState4 = useState(acceptedCurrency || MarketplaceAcceptedCurrency.GoldOrDc),
+    listingCurrency = _useState4[0],
+    setListingCurrency = _useState4[1];
   var itemsContainer = useRef(null);
   useEffect(function () {
     var _itemsContainer$curre;
@@ -46776,7 +46864,7 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
     onClose: setIsCreatingOffer.bind(null, false),
     onConfirm: function onConfirm() {
       if (selectedItemToSell && price && Number(price)) {
-        onAddItemToMarketplace(selectedItemToSell, Number(price), acceptedCurrency);
+        onAddItemToMarketplace(selectedItemToSell, Number(price), listingCurrency);
         setPrice('');
         onSelectedItemToSellRemove(selectedItemToSell);
         setIsCreatingOffer(false);
@@ -46845,6 +46933,15 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
         setIsCreatingOffer(true);
       }
     }
+  })), React.createElement(CurrencyToggleRow, null, React.createElement(CurrencyToggleLabel, null, "Accept:"), LISTING_CURRENCY_OPTIONS.map(function (opt) {
+    return React.createElement(CurrencyToggleButton, {
+      key: opt.value,
+      "$active": listingCurrency === opt.value,
+      onPointerDown: function onPointerDown() {
+        return setListingCurrency(opt.value);
+      },
+      type: "button"
+    }, opt.label);
   }))))), React.createElement(InnerOptionsWrapper, null, React.createElement(SectionLabel$1, {
     style: {
       marginBottom: '8px'
@@ -46880,13 +46977,15 @@ var ManagmentPanel = function ManagmentPanel(_ref) {
   }, items == null ? void 0 : items.map(function (_ref2, index) {
     var item = _ref2.item,
       price = _ref2.price,
-      _id = _ref2._id;
+      _id = _ref2._id,
+      listingCurrency = _ref2.acceptedCurrency;
     return React.createElement(MarketplaceRows, {
       key: item.key + "_" + index,
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
       item: item,
       itemPrice: price,
+      acceptedCurrency: listingCurrency,
       equipmentSet: equipmentSet,
       onMarketPlaceItemRemove: setRemovingItemId.bind(null, _id)
     });
@@ -46946,15 +47045,46 @@ var SmallCTAButton = /*#__PURE__*/styled(CTAButton).withConfig({
   displayName: "ManagmentPanel__SmallCTAButton",
   componentId: "sc-1yyi6jn-12"
 })(["padding:8px 12px;height:32px;span{font-size:0.65rem;}svg{font-size:1.1rem;}"]);
+var CurrencyToggleRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ManagmentPanel__CurrencyToggleRow",
+  componentId: "sc-1yyi6jn-13"
+})(["display:flex;align-items:center;gap:6px;margin-top:8px;"]);
+var CurrencyToggleLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "ManagmentPanel__CurrencyToggleLabel",
+  componentId: "sc-1yyi6jn-14"
+})(["font-size:0.5rem;color:#888;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;"]);
+var CurrencyToggleButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ManagmentPanel__CurrencyToggleButton",
+  componentId: "sc-1yyi6jn-15"
+})(["padding:3px 8px;font-family:'Press Start 2P',cursive !important;font-size:0.45rem !important;border-radius:4px;border:1px solid ", " !important;background:", " !important;color:", " !important;cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;&:hover{border-color:", " !important;color:", " !important;}"], function (_ref3) {
+  var $active = _ref3.$active;
+  return $active ? '#f59e0b' : 'rgba(255,255,255,0.15)';
+}, function (_ref4) {
+  var $active = _ref4.$active;
+  return $active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)';
+}, function (_ref5) {
+  var $active = _ref5.$active;
+  return $active ? '#f59e0b' : '#aaa';
+}, function (_ref6) {
+  var $active = _ref6.$active;
+  return $active ? '#f59e0b' : 'rgba(255,255,255,0.35)';
+}, function (_ref7) {
+  var $active = _ref7.$active;
+  return $active ? '#f59e0b' : '#ddd';
+});
 
 var CURRENCY_OPTIONS = [{
   value: MarketplaceAcceptedCurrency.GoldOrDc,
-  label: 'Gold or DC',
-  description: 'Accept both Gold and Definya Coin as payment'
+  label: 'Both',
+  description: 'Gold & DC'
 }, {
   value: MarketplaceAcceptedCurrency.Gold,
-  label: 'Gold only',
-  description: 'Only accept Gold as payment'
+  label: 'Gold',
+  description: 'Gold only'
+}, {
+  value: MarketplaceAcceptedCurrency.Dc,
+  label: 'DC',
+  description: 'DC only'
 }];
 var MarketplaceSettingsPanel = function MarketplaceSettingsPanel(_ref) {
   var acceptedCurrency = _ref.acceptedCurrency,
@@ -46968,8 +47098,8 @@ var MarketplaceSettingsPanel = function MarketplaceSettingsPanel(_ref) {
       }
     }, React.createElement(OptionLabel$1, {
       "$active": acceptedCurrency === option.value
-    }, option.label), React.createElement(OptionDescription, null, option.description), acceptedCurrency === option.value && React.createElement(ActiveBadge, null, "Active"));
-  })), React.createElement(Hint, null, "Buyers will only be able to pay using the currency you accept.")));
+    }, option.label), React.createElement(OptionDescription, null, option.description));
+  })), React.createElement(Hint, null, "Default currency for new listings.")));
 };
 var Wrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceSettingsPanel__Wrapper",
@@ -46986,11 +47116,11 @@ var SectionLabel$2 = /*#__PURE__*/styled.p.withConfig({
 var OptionsGrid = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceSettingsPanel__OptionsGrid",
   componentId: "sc-1lvibyi-3"
-})(["display:grid;grid-template-columns:1fr 1fr;gap:12px;"]);
+})(["display:grid;grid-template-columns:repeat(3,1fr);gap:12px;"]);
 var OptionCard = /*#__PURE__*/styled.button.withConfig({
   displayName: "MarketplaceSettingsPanel__OptionCard",
   componentId: "sc-1lvibyi-4"
-})(["position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;background:", ";border:2px solid ", ";border-radius:6px;cursor:pointer;text-align:left;transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";background:", ";}"], function (_ref2) {
+})(["position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 8px;background:", " !important;border:2px solid ", " !important;border-radius:6px;cursor:pointer;text-align:center;transition:border-color 0.15s,background 0.15s;&:hover{border-color:", " !important;background:", " !important;}"], function (_ref2) {
   var $active = _ref2.$active;
   return $active ? 'rgba(245, 158, 11, 0.12)' : 'rgba(0, 0, 0, 0.25)';
 }, function (_ref3) {
@@ -47006,21 +47136,17 @@ var OptionCard = /*#__PURE__*/styled.button.withConfig({
 var OptionLabel$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "MarketplaceSettingsPanel__OptionLabel",
   componentId: "sc-1lvibyi-5"
-})(["font-family:'Press Start 2P',cursive;font-size:0.6rem;color:", ";letter-spacing:0.5px;"], function (_ref6) {
+})(["font-family:'Press Start 2P',cursive !important;font-size:0.55rem !important;color:", " !important;letter-spacing:0.5px;"], function (_ref6) {
   var $active = _ref6.$active;
-  return $active ? '#f59e0b' : '#cccccc';
+  return $active ? '#f59e0b' : '#999';
 });
 var OptionDescription = /*#__PURE__*/styled.span.withConfig({
   displayName: "MarketplaceSettingsPanel__OptionDescription",
   componentId: "sc-1lvibyi-6"
-})(["font-size:0.5rem;color:#888;line-height:1.5;"]);
-var ActiveBadge = /*#__PURE__*/styled.span.withConfig({
-  displayName: "MarketplaceSettingsPanel__ActiveBadge",
-  componentId: "sc-1lvibyi-7"
-})(["position:absolute;top:8px;right:10px;font-size:0.45rem;color:#f59e0b;text-transform:uppercase;letter-spacing:0.5px;opacity:0.8;"]);
+})(["font-size:0.45rem !important;color:#555 !important;line-height:1.4;"]);
 var Hint = /*#__PURE__*/styled.p.withConfig({
   displayName: "MarketplaceSettingsPanel__Hint",
-  componentId: "sc-1lvibyi-8"
+  componentId: "sc-1lvibyi-7"
 })(["margin:14px 0 0 0;font-size:0.48rem;color:#666;line-height:1.6;"]);
 
 var Marketplace = function Marketplace(props) {