@rpg-engine/long-bow 0.8.137 → 0.8.138

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

@@ -30316,6 +30316,16 @@ var TRANSACTION_TYPE_LABELS = {
   Refund: 'Refund',
   AdminAdjustment: 'Admin'
 };
+var TRANSACTION_TYPE_COLORS = {
+  Purchase: '#22c55e',
+  Transfer: '#60a5fa',
+  MarketplaceSale: '#fbbf24',
+  MarketplacePurchase: '#f97316',
+  StorePurchase: '#a78bfa',
+  Fee: '#ef4444',
+  Refund: '#06b6d4',
+  AdminAdjustment: '#9ca3af'
+};
 var TRANSACTION_TYPE_OPTIONS = [{
   value: '',
   label: 'All Types'
@@ -30379,13 +30389,16 @@ var DCHistoryPanel = function DCHistoryPanel(_ref) {
       value: opt.value
     }, opt.label);
   }))), loading && React__default.createElement(LoadingRow, null, React__default.createElement(Spinner, null), React__default.createElement("span", null, "Loading...")), !loading && transactions.length === 0 && React__default.createElement(EmptyMessage, null, "No transactions found."), !loading && transactions.length > 0 && React__default.createElement(TransactionList, null, transactions.map(function (tx) {
-    var _TRANSACTION_TYPE_LAB, _tx$note;
+    var _TRANSACTION_TYPE_LAB, _TRANSACTION_TYPE_COL, _tx$note;
     var isCredit = tx.amount > 0;
     var label = (_TRANSACTION_TYPE_LAB = TRANSACTION_TYPE_LABELS[tx.type]) != null ? _TRANSACTION_TYPE_LAB : tx.type;
+    var color = (_TRANSACTION_TYPE_COL = TRANSACTION_TYPE_COLORS[tx.type]) != null ? _TRANSACTION_TYPE_COL : '#f59e0b';
     var subtitle = (_tx$note = tx.note) != null ? _tx$note : tx.relatedCharacterName ? tx.relatedCharacterName : '';
     return React__default.createElement(TransactionRow, {
       key: tx._id
-    }, React__default.createElement(TxLeft, null, React__default.createElement(TxType, null, label), subtitle ? React__default.createElement(TxNote, null, subtitle) : null), React__default.createElement(TxRight, null, React__default.createElement(TxAmount, {
+    }, React__default.createElement(TxLeft, null, React__default.createElement(TxType, {
+      "$color": color
+    }, label), subtitle ? React__default.createElement(TxNote, null, subtitle) : null), React__default.createElement(TxRight, null, React__default.createElement(TxAmount, {
       "$credit": isCredit
     }, isCredit ? '+' : '', tx.amount, " DC"), React__default.createElement(TxDate, null, formatDate(tx.createdAt))));
   })), totalPages > 1 && React__default.createElement(Pagination, {
@@ -30429,12 +30442,15 @@ var TxRight = /*#__PURE__*/styled__default.div.withConfig({
 var TxType = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "DCHistoryPanel__TxType",
   componentId: "sc-debjdj-8"
-})(["font-size:7px;color:#f59e0b;font-family:'Press Start 2P',cursive;"]);
+})(["font-size:7px;color:", ";font-family:'Press Start 2P',cursive;"], function (_ref2) {
+  var $color = _ref2.$color;
+  return $color;
+});
 var TxAmount = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "DCHistoryPanel__TxAmount",
   componentId: "sc-debjdj-9"
-})(["font-size:8px;font-family:'Press Start 2P',cursive;color:", ";white-space:nowrap;"], function (_ref2) {
-  var $credit = _ref2.$credit;
+})(["font-size:8px;font-family:'Press Start 2P',cursive;color:", ";white-space:nowrap;"], function (_ref3) {
+  var $credit = _ref3.$credit;
   return $credit ? uiColors.green : uiColors.red;
 });
 var TxNote = /*#__PURE__*/styled__default.span.withConfig({
@@ -35587,11 +35603,145 @@ var PagerContainer = /*#__PURE__*/styled__default.div.withConfig({
   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);
 
+var MarketplaceBuyModal = function MarketplaceBuyModal(_ref) {
+  var goldPrice = _ref.goldPrice,
+    dcEquivalentPrice = _ref.dcEquivalentPrice,
+    dcBalance = _ref.dcBalance,
+    onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose;
+  var _useState = React.useState('gold'),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var hasSufficientDC = dcBalance >= dcEquivalentPrice;
+  var stopPropagation = React.useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var handleConfirm = React.useCallback(function () {
+    onConfirm(selected);
+  }, [selected, onConfirm]);
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Overlay$4, {
+    onPointerDown: onClose
+  }), React__default.createElement(ModalContainer$2, null, React__default.createElement(ModalContent$2, {
+    onClick: stopPropagation,
+    onTouchStart: stopPropagation,
+    onPointerDown: stopPropagation
+  }, React__default.createElement(Header$7, null, React__default.createElement(Title$8, null, "Confirm Purchase"), React__default.createElement(CloseButton$9, {
+    onPointerDown: onClose,
+    "aria-label": "Close"
+  }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(Options, null, React__default.createElement(RadioOption, {
+    "$selected": selected === 'gold',
+    onPointerDown: function onPointerDown() {
+      return setSelected('gold');
+    }
+  }, React__default.createElement(RadioCircle, {
+    "$selected": selected === 'gold'
+  }), React__default.createElement(OptionText, null, React__default.createElement(OptionLabel, null, "Gold"), React__default.createElement(OptionSub, null, goldPrice.toLocaleString(), " gold"))), React__default.createElement(RadioOption, {
+    "$selected": selected === 'dc',
+    "$disabled": !hasSufficientDC,
+    onPointerDown: function onPointerDown() {
+      return hasSufficientDC && setSelected('dc');
+    }
+  }, React__default.createElement(RadioCircle, {
+    "$selected": selected === 'dc'
+  }), React__default.createElement(OptionText, null, React__default.createElement(OptionLabel, {
+    "$disabled": !hasSufficientDC
+  }, "Definya Coin"), React__default.createElement(OptionSub, null, dcEquivalentPrice.toLocaleString(), " DC", ' ', React__default.createElement(BalanceHint, {
+    "$insufficient": !hasSufficientDC
+  }, "(", dcBalance.toLocaleString(), " available)"))))), React__default.createElement(ConfirmRow, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: handleConfirm
+  }, "Confirm")))));
+};
+var Overlay$4 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MarketplaceBuyModal__Overlay",
+  componentId: "sc-86ottl-0"
+})(["position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1000;"]);
+var ModalContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MarketplaceBuyModal__ModalContainer",
+  componentId: "sc-86ottl-1"
+})(["position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;"]);
+var ModalContent$2 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MarketplaceBuyModal__ModalContent",
+  componentId: "sc-86ottl-2"
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;min-width:300px;max-width:90%;display:flex;flex-direction:column;gap:16px;pointer-events:auto;animation:scaleIn 0.15s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}"]);
+var Header$7 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MarketplaceBuyModal__Header",
+  componentId: "sc-86ottl-3"
+})(["display:flex;align-items:center;justify-content:space-between;"]);
+var Title$8 = /*#__PURE__*/styled__default.h3.withConfig({
+  displayName: "MarketplaceBuyModal__Title",
+  componentId: "sc-86ottl-4"
+})(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
+var CloseButton$9 = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "MarketplaceBuyModal__CloseButton",
+  componentId: "sc-86ottl-5"
+})(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;&:hover{color:#ffffff;}"]);
+var Options = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MarketplaceBuyModal__Options",
+  componentId: "sc-86ottl-6"
+})(["display:flex;flex-direction:column;gap:8px;"]);
+var RadioOption = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MarketplaceBuyModal__RadioOption",
+  componentId: "sc-86ottl-7"
+})(["display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid ", ";border-radius:6px;background:", ";cursor:", ";opacity:", ";transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";}"], function (_ref2) {
+  var $selected = _ref2.$selected;
+  return $selected ? '#f59e0b' : 'rgba(255,255,255,0.15)';
+}, function (_ref3) {
+  var $selected = _ref3.$selected;
+  return $selected ? 'rgba(245,158,11,0.1)' : 'transparent';
+}, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled;
+  return $disabled ? 0.5 : 1;
+}, function (_ref6) {
+  var $disabled = _ref6.$disabled;
+  return $disabled ? 'rgba(255,255,255,0.15)' : '#f59e0b';
+});
+var RadioCircle = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MarketplaceBuyModal__RadioCircle",
+  componentId: "sc-86ottl-8"
+})(["width:16px;height:16px;border-radius:50%;border:2px solid ", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;&::after{content:'';width:8px;height:8px;border-radius:50%;background:#f59e0b;opacity:", ";transition:opacity 0.15s;}"], function (_ref7) {
+  var $selected = _ref7.$selected;
+  return $selected ? '#f59e0b' : 'rgba(255,255,255,0.4)';
+}, function (_ref8) {
+  var $selected = _ref8.$selected;
+  return $selected ? 1 : 0;
+});
+var OptionText = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MarketplaceBuyModal__OptionText",
+  componentId: "sc-86ottl-9"
+})(["display:flex;flex-direction:column;gap:3px;"]);
+var OptionLabel = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "MarketplaceBuyModal__OptionLabel",
+  componentId: "sc-86ottl-10"
+})(["font-family:'Press Start 2P',cursive;font-size:0.65rem;color:", ";"], function (_ref9) {
+  var $disabled = _ref9.$disabled;
+  return $disabled ? 'rgba(255,255,255,0.4)' : '#ffffff';
+});
+var OptionSub = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "MarketplaceBuyModal__OptionSub",
+  componentId: "sc-86ottl-11"
+})(["font-family:'Press Start 2P',cursive;font-size:0.5rem;color:rgba(255,255,255,0.55);"]);
+var BalanceHint = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "MarketplaceBuyModal__BalanceHint",
+  componentId: "sc-86ottl-12"
+})(["color:", ";"], function (_ref10) {
+  var $insufficient = _ref10.$insufficient;
+  return $insufficient ? '#ef4444' : 'rgba(255, 255, 255, 0.4)';
+});
+var ConfirmRow = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MarketplaceBuyModal__ConfirmRow",
+  componentId: "sc-86ottl-13"
+})(["display:flex;justify-content:center;margin-top:4px;"]);
+
 var MarketplaceRows = function MarketplaceRows(_ref) {
   var atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
     item = _ref.item,
     itemPrice = _ref.itemPrice,
+    dcEquivalentPrice = _ref.dcEquivalentPrice,
     equipmentSet = _ref.equipmentSet,
     scale = _ref.scale,
     onMarketPlaceItemBuy = _ref.onMarketPlaceItemBuy,
@@ -35623,16 +35773,20 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     maxLines: 1,
     maxWidth: "200px",
     fontSize: "10px"
-  }, item.name)))), React__default.createElement(Flex$1, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(GoldContainer, null, React__default.createElement(SpriteFromAtlas, {
+  }, item.name)))), React__default.createElement(Flex$1, null, React__default.createElement(PriceContainer, null, React__default.createElement(ItemIconContainer, null, React__default.createElement(GoldContainer, null, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: "others/gold-coin-qty-5.png",
     imgScale: 2
   })), React__default.createElement(PriceValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
     maxLines: 1,
-    maxWidth: "200px",
+    maxWidth: "120px",
     fontSize: "10px"
-  }, "$", itemPrice)))), React__default.createElement(ButtonContainer$3, null, React__default.createElement(Button, {
+  }, "$", itemPrice)))), dcEquivalentPrice !== undefined && React__default.createElement(DCPriceLabel, null, React__default.createElement(Ellipsis, {
+    maxLines: 1,
+    maxWidth: "80px",
+    fontSize: "9px"
+  }, dcEquivalentPrice, " DC"))), React__default.createElement(ButtonContainer$3, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     disabled: disabled,
     onPointerDown: function onPointerDown() {
@@ -35670,17 +35824,25 @@ var SpriteContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__SpriteContainer",
   componentId: "sc-wmpr1o-6"
 })(["position:relative;left:0.5rem;"]);
+var PriceContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "MarketplaceRows__PriceContainer",
+  componentId: "sc-wmpr1o-7"
+})(["display:flex;flex-direction:column;align-items:flex-start;gap:2px;"]);
+var DCPriceLabel = /*#__PURE__*/styled__default.p.withConfig({
+  displayName: "MarketplaceRows__DCPriceLabel",
+  componentId: "sc-wmpr1o-8"
+})(["margin:0;margin-left:40px;color:#fef08a;font-size:0.7rem;"]);
 var PriceValue = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__PriceValue",
-  componentId: "sc-wmpr1o-7"
+  componentId: "sc-wmpr1o-9"
 })(["margin-left:40px;"]);
 var ButtonContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__ButtonContainer",
-  componentId: "sc-wmpr1o-8"
+  componentId: "sc-wmpr1o-10"
 })(["margin:auto;"]);
 var RarityContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__RarityContainer",
-  componentId: "sc-wmpr1o-9"
+  componentId: "sc-wmpr1o-11"
 })(["border-color:", ";box-shadow:", " inset,", ";width:32px;height:32px;"], function (_ref2) {
   var item = _ref2.item;
   return rarityColor(item);
@@ -35751,7 +35913,11 @@ var BuyPanel = function BuyPanel(_ref) {
     characterId = _ref.characterId,
     enableHotkeys = _ref.enableHotkeys,
     disableHotkeys = _ref.disableHotkeys,
-    currentPage = _ref.currentPage;
+    currentPage = _ref.currentPage,
+    _ref$dcBalance = _ref.dcBalance,
+    dcBalance = _ref$dcBalance === void 0 ? 0 : _ref$dcBalance,
+    _ref$dcToGoldSwapRate = _ref.dcToGoldSwapRate,
+    dcToGoldSwapRate = _ref$dcToGoldSwapRate === void 0 ? 0 : _ref$dcToGoldSwapRate;
   var _useState = React.useState(''),
     name = _useState[0],
     setName = _useState[1];
@@ -35772,7 +35938,26 @@ var BuyPanel = function BuyPanel(_ref) {
     var _itemsContainer$curre;
     (_itemsContainer$curre = itemsContainer.current) == null ? void 0 : _itemsContainer$curre.scrollTo(0, 0);
   }, [currentPage]);
-  return React__default.createElement(React__default.Fragment, null, buyingItemId && React__default.createElement(ConfirmModal, {
+  var buyingItem = buyingItemId ? items.find(function (i) {
+    return i._id === buyingItemId;
+  }) : null;
+  var hasDCBalance = dcBalance > 0 && dcToGoldSwapRate > 0;
+  var getDCEquivalentPrice = function getDCEquivalentPrice(goldPrice) {
+    return dcToGoldSwapRate > 0 ? Math.ceil(goldPrice / dcToGoldSwapRate) : 0;
+  };
+  return React__default.createElement(React__default.Fragment, null, buyingItemId && buyingItem && hasDCBalance && React__default.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__default.createElement(ConfirmModal, {
     onClose: setBuyingItemId.bind(null, null),
     onConfirm: function onConfirm() {
       onMarketPlaceItemBuy == null ? void 0 : onMarketPlaceItemBuy(buyingItemId);
@@ -35877,6 +36062,7 @@ var BuyPanel = function BuyPanel(_ref) {
       atlasJSON: atlasJSON,
       item: item,
       itemPrice: price,
+      dcEquivalentPrice: dcToGoldSwapRate > 0 ? getDCEquivalentPrice(price) : undefined,
       equipmentSet: equipmentSet,
       onMarketPlaceItemBuy: setBuyingItemId.bind(null, _id),
       disabled: owner === characterId
@@ -36250,7 +36436,7 @@ var PartyCreate = function PartyCreate(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$8, null, "Create Party"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$9, null, "Create Party"), React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement("h1", null, "Type your party name"), React__default.createElement(Input, {
     placeholder: "Type party name",
@@ -36273,7 +36459,7 @@ var Wrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$8 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$9 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -36322,7 +36508,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$9, null, "Party Dashboard"), React__default.createElement(Button, {
+  }, React__default.createElement(Title$a, null, "Party Dashboard"), React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton
   }, "Create"), React__default.createElement("hr", {
     className: "golden"
@@ -36349,7 +36535,7 @@ var RowsWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyDashboard__RowsWrapper",
   componentId: "sc-16cm41r-1"
 })(["overflow-y:scroll;-webkit-overflow-scrolling:touch;width:100%;height:200px;"]);
-var Title$9 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$a = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyDashboard__Title",
   componentId: "sc-16cm41r-2"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -36386,7 +36572,7 @@ var PartyInvite = function PartyInvite(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$a, null, "Invite for Party"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$b, null, "Invite for Party"), React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement(RowsWrapper$1, {
     className: "playersRows"
@@ -36405,7 +36591,7 @@ var Wrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$a = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyInvite__Title",
   componentId: "sc-eu8ggt-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -36847,7 +37033,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$b, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$c, null, React__default.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -36866,7 +37052,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React__default.createElement(QuestsContainer, null, React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$b, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$c, null, React__default.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -36913,7 +37099,7 @@ var TitleContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
   componentId: "sc-1wccpiy-6"
 })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
-var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$c = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-1wccpiy-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -37441,7 +37627,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React__default.createElement(CloseButton$9, {
+  }, onCloseButton && React__default.createElement(CloseButton$a, {
     onPointerDown: onCloseButton
   }, "X"), React__default.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -37476,7 +37662,7 @@ var SkillSplitDiv = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillsContainer__SkillSplitDiv",
   componentId: "sc-1g0c67q-2"
 })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$9 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -37612,7 +37798,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$F, null, React__default.createElement(Header$7, null, React__default.createElement("div", null, React__default.createElement(Title$c, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$F, null, React__default.createElement(Header$8, null, React__default.createElement("div", null, React__default.createElement(Title$d, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -37642,7 +37828,7 @@ var Container$F = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
-var Title$c = /*#__PURE__*/styled__default.div.withConfig({
+var Title$d = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Title",
   componentId: "sc-4hbw3q-1"
 })(["font-size:", ";font-weight:bold;margin-bottom:0.5rem;display:flex;align-items:center;margin:0;"], uiFonts.size.medium);
@@ -37654,7 +37840,7 @@ var Description$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Description",
   componentId: "sc-4hbw3q-3"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
-var Header$7 = /*#__PURE__*/styled__default.div.withConfig({
+var Header$8 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -37870,7 +38056,7 @@ var Spell = function Spell(_ref) {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React__default.createElement(Overlay$4, null, characterSkillLevel < requiredLevel ? "Low " + getSkillName(attribute || 'magic level') + " level" : manaCost > charMana && 'No mana'), React__default.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React__default.createElement("span", {
+  }, disabled && React__default.createElement(Overlay$5, null, characterSkillLevel < requiredLevel ? "Low " + getSkillName(attribute || 'magic level') + " level" : manaCost > charMana && 'No mana'), React__default.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React__default.createElement("span", {
     className: "cooldown"
   }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -37879,7 +38065,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React__default.createElement(Info, null, React__default.createElement(Title$d, null, React__default.createElement("span", null, name), React__default.createElement("span", {
+  })), React__default.createElement(Info, null, React__default.createElement(Title$e, null, React__default.createElement("span", null, name), React__default.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React__default.createElement(Description$5, null, description)), React__default.createElement(Divider$1, null), React__default.createElement(Cost, null, React__default.createElement("span", null, "Mana cost:"), React__default.createElement("span", {
     className: "mana"
@@ -37900,7 +38086,7 @@ var Info = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$d = /*#__PURE__*/styled__default.p.withConfig({
+var Title$e = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "Spell__Title",
   componentId: "sc-j96fa2-3"
 })(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
@@ -37916,7 +38102,7 @@ var Cost = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "Spell__Cost",
   componentId: "sc-j96fa2-6"
 })(["display:flex;align-items:center;flex-direction:column;gap:0.5rem;div{z-index:1;}.mana{position:relative;font-size:", ";font-weight:bold;z-index:1;&::after{position:absolute;content:'';top:0;left:0;background-color:", ";width:100%;height:100%;border-radius:50%;transform:scale(1.8);filter:blur(10px);z-index:-1;}}"], uiFonts.size.medium, uiColors.blue);
-var Overlay$4 = /*#__PURE__*/styled__default.p.withConfig({
+var Overlay$5 = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "Spell__Overlay",
   componentId: "sc-j96fa2-7"
 })(["margin:0 !important;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1rem;display:flex;justify-content:center;align-items:center;color:", ";font-size:", " !important;font-weight:bold;z-index:10;background-color:rgba(0 0 0 / 0.2);"], uiColors.yellow, uiFonts.size.large);
@@ -37965,7 +38151,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$J, null, React__default.createElement(Title$e, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$J, null, React__default.createElement(Title$f, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -37998,7 +38184,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$e = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$f = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -58440,7 +58626,7 @@ var CartView = function CartView(_ref2) {
       return _ref3.apply(this, arguments);
     };
   }();
-  return React__default.createElement(Container$K, null, React__default.createElement(Header$8, null, React__default.createElement(Title$f, null, "Shopping Cart"), React__default.createElement(CloseButton$a, {
+  return React__default.createElement(Container$K, null, React__default.createElement(Header$9, null, React__default.createElement(Title$g, null, "Shopping Cart"), React__default.createElement(CloseButton$b, {
     onPointerDown: onClose
   }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(CartItems, null, cartItems.length === 0 ? React__default.createElement(EmptyCart, null, "Your cart is empty") : cartItems.map(function (cartItem) {
     var _cartItem$metadata, _cartItem$metadata2;
@@ -58480,15 +58666,15 @@ var Container$K = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CartView__Container",
   componentId: "sc-ydtyl1-0"
 })(["display:flex;flex-direction:column;width:100%;height:100%;gap:1.5rem;padding:1.5rem;"]);
-var Header$8 = /*#__PURE__*/styled__default.div.withConfig({
+var Header$9 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CartView__Header",
   componentId: "sc-ydtyl1-1"
 })(["display:flex;justify-content:space-between;align-items:center;"]);
-var Title$f = /*#__PURE__*/styled__default.h2.withConfig({
+var Title$g = /*#__PURE__*/styled__default.h2.withConfig({
   displayName: "CartView__Title",
   componentId: "sc-ydtyl1-2"
 })(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#ffffff;margin:0;"]);
-var CloseButton$a = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CartView__CloseButton",
   componentId: "sc-ydtyl1-3"
 })(["padding:0.5rem;min-width:unset;width:42px;height:42px;display:flex;font-size:1.5rem;align-items:center;color:white;justify-content:center;"]);
@@ -58970,7 +59156,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  }) : React__default.createElement(DefaultIcon, null, "\uD83D\uDC64")), React__default.createElement(ItemDetails$1, null, React__default.createElement(Header$9, null, React__default.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React__default.createElement(SelectedSkinNav, null, React__default.createElement(SelectedSkin, null, "Selected:"), React__default.createElement(SkinNavArrow, {
+  }) : React__default.createElement(DefaultIcon, null, "\uD83D\uDC64")), React__default.createElement(ItemDetails$1, null, React__default.createElement(Header$a, null, React__default.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React__default.createElement(SelectedSkinNav, null, React__default.createElement(SelectedSkin, null, "Selected:"), React__default.createElement(SkinNavArrow, {
     direction: "left",
     onPointerDown: handlePreviousSkin,
     size: 24
@@ -59022,7 +59208,7 @@ var SkinNavArrow = /*#__PURE__*/styled__default(SelectArrow).withConfig({
   displayName: "StoreCharacterSkinRow__SkinNavArrow",
   componentId: "sc-81xqsx-7"
 })(["position:static;"]);
-var Header$9 = /*#__PURE__*/styled__default.div.withConfig({
+var Header$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__Header",
   componentId: "sc-81xqsx-8"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
@@ -59346,7 +59532,9 @@ var usePackFiltering = function usePackFiltering(packs) {
 var StorePacksSection = function StorePacksSection(_ref) {
   var packs = _ref.packs,
     onAddToCart = _ref.onAddToCart,
-    onSelectPack = _ref.onSelectPack;
+    onSelectPack = _ref.onSelectPack,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG;
   var _usePackFiltering = usePackFiltering(packs),
     searchQuery = _usePackFiltering.searchQuery,
     setSearchQuery = _usePackFiltering.setSearchQuery,
@@ -59355,16 +59543,32 @@ var StorePacksSection = function StorePacksSection(_ref) {
     if (typeof imageUrl === 'string') return imageUrl;
     return imageUrl["default"] || imageUrl.src;
   };
+  var renderPackIcon = React.useCallback(function (pack) {
+    var _atlasJSON$frames;
+    var imgSrc = getImageSrc(pack.image);
+    if (atlasJSON && atlasIMG && imgSrc && atlasJSON != null && (_atlasJSON$frames = atlasJSON.frames) != null && _atlasJSON$frames[imgSrc]) {
+      return React__default.createElement(SpriteFromAtlas, {
+        atlasJSON: atlasJSON,
+        atlasIMG: atlasIMG,
+        spriteKey: imgSrc,
+        width: 40,
+        height: 40,
+        imgScale: 1.2,
+        centered: true
+      });
+    }
+    return React__default.createElement("img", {
+      src: imgSrc,
+      alt: pack.title
+    });
+  }, [atlasJSON, atlasIMG]);
   var renderPack = React.useCallback(function (pack) {
     return React__default.createElement(PackRow, {
       key: pack.key,
       onClick: function onClick() {
         return onSelectPack == null ? void 0 : onSelectPack(pack);
       }
-    }, React__default.createElement(PackIconContainer, null, React__default.createElement("img", {
-      src: getImageSrc(pack.image),
-      alt: pack.title
-    })), React__default.createElement(PackDetails, null, React__default.createElement(PackName, null, pack.title), React__default.createElement(PackPrice, null, "$", pack.priceUSD), pack.description && React__default.createElement(PackDescription, null, pack.description)), React__default.createElement(Controls$2, null, React__default.createElement(CTAButton, {
+    }, React__default.createElement(PackIconContainer, null, renderPackIcon(pack)), React__default.createElement(PackDetails, null, React__default.createElement(PackName, null, pack.title), React__default.createElement(PackPrice, null, "$", pack.priceUSD), pack.description && React__default.createElement(PackDescription, null, pack.description)), React__default.createElement(Controls$2, null, React__default.createElement(CTAButton, {
       icon: React__default.createElement(fa.FaCartPlus, null),
       label: "Add",
       onClick: function onClick(e) {
@@ -59425,7 +59629,7 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     if (typeof imageUrl === 'string') return imageUrl;
     return imageUrl["default"] || imageUrl.src;
   };
-  return React__default.createElement(Container$M, null, React__default.createElement(Header$a, null, React__default.createElement(BackButton, {
+  return React__default.createElement(Container$M, null, React__default.createElement(Header$b, null, React__default.createElement(BackButton, {
     onClick: onBack
   }, React__default.createElement(fa.FaArrowLeft, null), React__default.createElement("span", null, "Back"))), React__default.createElement(Content$5, null, React__default.createElement(DetailsGrid, null, React__default.createElement(ItemIcon, null, React__default.createElement("img", {
     src: getImageSrc(),
@@ -59443,7 +59647,7 @@ var Container$M = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemDetails__Container",
   componentId: "sc-k3ho5z-0"
 })(["display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;height:100%;"]);
-var Header$a = /*#__PURE__*/styled__default.div.withConfig({
+var Header$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemDetails__Header",
   componentId: "sc-k3ho5z-1"
 })(["display:flex;align-items:center;gap:1rem;"]);
@@ -59627,18 +59831,22 @@ var Store = function Store(_ref) {
           return pack.priceUSD >= 9.99;
         }),
         onAddToCart: handleAddPackToCart,
-        onSelectPack: setSelectedPack
+        onSelectPack: setSelectedPack,
+        atlasJSON: atlasJSON,
+        atlasIMG: atlasIMG
       })
     },
     packs: {
       id: 'packs',
       title: packsTabLabel,
       content: customPacksContent != null ? customPacksContent : React__default.createElement(StorePacksSection, {
-        packs: packs.filter(function (pack) {
+        packs: hidePremiumTab ? packs : packs.filter(function (pack) {
           return pack.priceUSD < 9.99;
         }),
         onAddToCart: handleAddPackToCart,
-        onSelectPack: setSelectedPack
+        onSelectPack: setSelectedPack,
+        atlasJSON: atlasJSON,
+        atlasIMG: atlasIMG
       })
     },
     items: {
@@ -59802,63 +60010,63 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
       onPayWithCard();
     }
   }, [selected, onPayWithDC, onPayWithCard]);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Overlay$5, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Overlay$6, {
     onPointerDown: onClose
-  }), React__default.createElement(ModalContainer$2, null, React__default.createElement(ModalContent$2, {
+  }), React__default.createElement(ModalContainer$3, null, React__default.createElement(ModalContent$3, {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React__default.createElement(Header$b, null, React__default.createElement(Title$g, null, "How would you like to pay?"), React__default.createElement(CloseButton$b, {
+  }, React__default.createElement(Header$c, null, React__default.createElement(Title$h, null, "How would you like to pay?"), React__default.createElement(CloseButton$c, {
     onPointerDown: onClose,
     "aria-label": "Close"
-  }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(Options, null, React__default.createElement(RadioOption, {
+  }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(Options$1, null, React__default.createElement(RadioOption$1, {
     "$selected": selected === 'card',
     onPointerDown: function onPointerDown() {
       return setSelected('card');
     }
-  }, React__default.createElement(RadioCircle, {
+  }, React__default.createElement(RadioCircle$1, {
     "$selected": selected === 'card'
-  }), React__default.createElement(OptionText, null, React__default.createElement(OptionLabel, null, "Credit Card"), React__default.createElement(OptionSub, null, "Stripe secure checkout"))), React__default.createElement(RadioOption, {
+  }), React__default.createElement(OptionText$1, null, React__default.createElement(OptionLabel$1, null, "Credit Card"), React__default.createElement(OptionSub$1, null, "Stripe secure checkout"))), React__default.createElement(RadioOption$1, {
     "$selected": selected === 'dc',
     onPointerDown: function onPointerDown() {
       return setSelected('dc');
     }
-  }, React__default.createElement(RadioCircle, {
+  }, React__default.createElement(RadioCircle$1, {
     "$selected": selected === 'dc'
-  }), React__default.createElement(OptionText, null, React__default.createElement(OptionLabel, null, "Definya Coin"), React__default.createElement(OptionSub, null, dcBalance.toLocaleString(), " DC available")))), React__default.createElement(ConfirmRow, null, React__default.createElement(Button, {
+  }), React__default.createElement(OptionText$1, null, React__default.createElement(OptionLabel$1, null, "Definya Coin"), React__default.createElement(OptionSub$1, null, dcBalance.toLocaleString(), " DC available")))), React__default.createElement(ConfirmRow$1, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     onPointerDown: handleConfirm
   }, "Confirm")))));
 };
-var Overlay$5 = /*#__PURE__*/styled__default.div.withConfig({
+var Overlay$6 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__Overlay",
   componentId: "sc-1dxy6lr-0"
 })(["position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1000;"]);
-var ModalContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
+var ModalContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__ModalContainer",
   componentId: "sc-1dxy6lr-1"
 })(["position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;"]);
-var ModalContent$2 = /*#__PURE__*/styled__default.div.withConfig({
+var ModalContent$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__ModalContent",
   componentId: "sc-1dxy6lr-2"
 })(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;min-width:300px;max-width:90%;display:flex;flex-direction:column;gap:16px;pointer-events:auto;animation:scaleIn 0.15s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}"]);
-var Header$b = /*#__PURE__*/styled__default.div.withConfig({
+var Header$c = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__Header",
   componentId: "sc-1dxy6lr-3"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
-var Title$g = /*#__PURE__*/styled__default.h3.withConfig({
+var Title$h = /*#__PURE__*/styled__default.h3.withConfig({
   displayName: "PaymentMethodModal__Title",
   componentId: "sc-1dxy6lr-4"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
-var CloseButton$b = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$c = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "PaymentMethodModal__CloseButton",
   componentId: "sc-1dxy6lr-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;&:hover{color:#ffffff;}"]);
-var Options = /*#__PURE__*/styled__default.div.withConfig({
+var Options$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__Options",
   componentId: "sc-1dxy6lr-6"
 })(["display:flex;flex-direction:column;gap:8px;"]);
-var RadioOption = /*#__PURE__*/styled__default.div.withConfig({
+var RadioOption$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__RadioOption",
   componentId: "sc-1dxy6lr-7"
 })(["display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid ", ";border-radius:6px;background:", ";cursor:pointer;transition:border-color 0.15s,background 0.15s;&:hover{border-color:#f59e0b;}"], function (_ref2) {
@@ -59868,7 +60076,7 @@ var RadioOption = /*#__PURE__*/styled__default.div.withConfig({
   var $selected = _ref3.$selected;
   return $selected ? 'rgba(245,158,11,0.1)' : 'transparent';
 });
-var RadioCircle = /*#__PURE__*/styled__default.div.withConfig({
+var RadioCircle$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__RadioCircle",
   componentId: "sc-1dxy6lr-8"
 })(["width:16px;height:16px;border-radius:50%;border:2px solid ", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;&::after{content:'';width:8px;height:8px;border-radius:50%;background:#f59e0b;opacity:", ";transition:opacity 0.15s;}"], function (_ref4) {
@@ -59878,19 +60086,19 @@ var RadioCircle = /*#__PURE__*/styled__default.div.withConfig({
   var $selected = _ref5.$selected;
   return $selected ? 1 : 0;
 });
-var OptionText = /*#__PURE__*/styled__default.div.withConfig({
+var OptionText$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__OptionText",
   componentId: "sc-1dxy6lr-9"
 })(["display:flex;flex-direction:column;gap:3px;"]);
-var OptionLabel = /*#__PURE__*/styled__default.span.withConfig({
+var OptionLabel$1 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "PaymentMethodModal__OptionLabel",
   componentId: "sc-1dxy6lr-10"
 })(["font-family:'Press Start 2P',cursive;font-size:0.65rem;color:#ffffff;"]);
-var OptionSub = /*#__PURE__*/styled__default.span.withConfig({
+var OptionSub$1 = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "PaymentMethodModal__OptionSub",
   componentId: "sc-1dxy6lr-11"
 })(["font-family:'Press Start 2P',cursive;font-size:0.5rem;color:rgba(255,255,255,0.55);"]);
-var ConfirmRow = /*#__PURE__*/styled__default.div.withConfig({
+var ConfirmRow$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__ConfirmRow",
   componentId: "sc-1dxy6lr-12"
 })(["display:flex;justify-content:center;margin-top:4px;"]);
@@ -59929,7 +60137,7 @@ var TimeWidget = function TimeWidget(_ref) {
   return React__default.createElement(Draggable, {
     scale: scale,
     cancel: ".time-widget-close,.time-widget-container,.time-widget-container *"
-  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$c, {
+  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$d, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React__default.createElement(DayNightContainer, {
@@ -59946,7 +60154,7 @@ var Time = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$c = /*#__PURE__*/styled__default.p.withConfig({
+var CloseButton$d = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);
@@ -60225,7 +60433,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React__default.createElement(Container$O, null, React__default.createElement(Title$h, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Container$O, null, React__default.createElement(Title$i, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -60257,7 +60465,7 @@ var Container$O = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$h = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$i = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -60478,6 +60686,7 @@ exports.Leaderboard = Leaderboard;
 exports.ListMenu = ListMenu;
 exports.LoginStreakPanel = LoginStreakPanel;
 exports.Marketplace = Marketplace;
+exports.MarketplaceBuyModal = MarketplaceBuyModal;
 exports.MarketplaceRows = MarketplaceRows;
 exports.MetadataCollector = MetadataCollector;
 exports.NPCDialog = NPCDialog;