@rpg-engine/long-bow 0.8.137 → 0.8.139

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, 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, formatDCAmount, goldToDC, CharacterClass, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, MetadataType, PurchaseType, UserAccountTypes, PaymentCurrency, PeriodOfDay } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaClipboardList, FaPaperPlane, FaShoppingCart, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaWallet } from 'react-icons/fa';
@@ -30309,6 +30309,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'
@@ -30372,14 +30382,24 @@ var DCHistoryPanel = function DCHistoryPanel(_ref) {
       value: opt.value
     }, opt.label);
   }))), loading && React.createElement(LoadingRow, null, React.createElement(Spinner, null), React.createElement("span", null, "Loading...")), !loading && transactions.length === 0 && React.createElement(EmptyMessage, null, "No transactions found."), !loading && transactions.length > 0 && React.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.createElement(TransactionRow, {
-      key: tx._id
-    }, React.createElement(TxLeft, null, React.createElement(TxType, null, label), subtitle ? React.createElement(TxNote, null, subtitle) : null), React.createElement(TxRight, null, React.createElement(TxAmount, {
-      "$credit": isCredit
+      key: tx._id,
+      style: {
+        borderLeft: "3px solid " + color
+      }
+    }, React.createElement(TxLeft, null, React.createElement(TxType, {
+      style: {
+        color: color
+      }
+    }, label), subtitle ? React.createElement(TxNote, null, subtitle) : null), React.createElement(TxRight, null, React.createElement(TxAmount, {
+      style: {
+        color: isCredit ? '#4CAF50' : '#D04648'
+      }
     }, isCredit ? '+' : '', tx.amount, " DC"), React.createElement(TxDate, null, formatDate(tx.createdAt))));
   })), totalPages > 1 && React.createElement(Pagination, {
     currentPage: currentPage,
@@ -30422,14 +30442,11 @@ var TxRight = /*#__PURE__*/styled.div.withConfig({
 var TxType = /*#__PURE__*/styled.span.withConfig({
   displayName: "DCHistoryPanel__TxType",
   componentId: "sc-debjdj-8"
-})(["font-size:7px;color:#f59e0b;font-family:'Press Start 2P',cursive;"]);
+})(["font-size:7px;font-family:'Press Start 2P',cursive;"]);
 var TxAmount = /*#__PURE__*/styled.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;
-  return $credit ? uiColors.green : uiColors.red;
-});
+})(["font-size:8px;font-family:'Press Start 2P',cursive;white-space:nowrap;"]);
 var TxNote = /*#__PURE__*/styled.span.withConfig({
   displayName: "DCHistoryPanel__TxNote",
   componentId: "sc-debjdj-10"
@@ -30817,7 +30834,7 @@ var DCWalletModal = function DCWalletModal(_ref) {
     content: React.createElement(BalanceContent, null, React.createElement(BalanceLabel, null, "Your DC Balance"), React.createElement(BalanceAmount, null, dcBalance.toLocaleString(), " DC"), onBuyDC && React.createElement(BuyButton, {
       onPointerDown: onBuyDC,
       title: "Buy Definya Coins"
-    }, React.createElement(FaShoppingCart, null), React.createElement(BuyButtonLabel, null, "Buy DC")))
+    }, React.createElement(FaShoppingCart, null), React.createElement(BuyButtonLabel, null, "Buy More DC")))
   }, {
     id: 'transfer',
     title: 'Transfer',
@@ -35583,11 +35600,145 @@ var PagerContainer = /*#__PURE__*/styled.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 = useState('gold'),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var hasSufficientDC = dcBalance >= dcEquivalentPrice;
+  var stopPropagation = useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var handleConfirm = useCallback(function () {
+    onConfirm(selected);
+  }, [selected, onConfirm]);
+  return React.createElement(ModalPortal, null, React.createElement(Overlay$4, {
+    onPointerDown: onClose
+  }), React.createElement(ModalContainer$2, null, React.createElement(ModalContent$2, {
+    onClick: stopPropagation,
+    onTouchStart: stopPropagation,
+    onPointerDown: stopPropagation
+  }, React.createElement(Header$7, null, React.createElement(Title$8, null, "Confirm Purchase"), React.createElement(CloseButton$9, {
+    onPointerDown: onClose,
+    "aria-label": "Close"
+  }, React.createElement(FaTimes, null))), React.createElement(Options, null, React.createElement(RadioOption, {
+    "$selected": selected === 'gold',
+    onPointerDown: function onPointerDown() {
+      return setSelected('gold');
+    }
+  }, React.createElement(RadioCircle, {
+    "$selected": selected === 'gold'
+  }), React.createElement(OptionText, null, React.createElement(OptionLabel, null, "Gold"), React.createElement(OptionSub, null, goldPrice.toLocaleString(), " gold"))), React.createElement(RadioOption, {
+    "$selected": selected === 'dc',
+    "$disabled": !hasSufficientDC,
+    onPointerDown: function onPointerDown() {
+      return hasSufficientDC && setSelected('dc');
+    }
+  }, React.createElement(RadioCircle, {
+    "$selected": selected === 'dc'
+  }), React.createElement(OptionText, null, React.createElement(OptionLabel, {
+    "$disabled": !hasSufficientDC
+  }, "Definya Coin"), React.createElement(OptionSub, null, formatDCAmount(dcEquivalentPrice), " DC", ' ', React.createElement(BalanceHint, {
+    "$insufficient": !hasSufficientDC
+  }, "(", formatDCAmount(dcBalance), " available)"))))), React.createElement(ConfirmRow, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: handleConfirm
+  }, "Confirm")))));
+};
+var Overlay$4 = /*#__PURE__*/styled.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.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.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.div.withConfig({
+  displayName: "MarketplaceBuyModal__Header",
+  componentId: "sc-86ottl-3"
+})(["display:flex;align-items:center;justify-content:space-between;"]);
+var Title$8 = /*#__PURE__*/styled.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.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.div.withConfig({
+  displayName: "MarketplaceBuyModal__Options",
+  componentId: "sc-86ottl-6"
+})(["display:flex;flex-direction:column;gap:8px;"]);
+var RadioOption = /*#__PURE__*/styled.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.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.div.withConfig({
+  displayName: "MarketplaceBuyModal__OptionText",
+  componentId: "sc-86ottl-9"
+})(["display:flex;flex-direction:column;gap:3px;"]);
+var OptionLabel = /*#__PURE__*/styled.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.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.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.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,
@@ -35626,9 +35777,9 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     imgScale: 2
   })), React.createElement(PriceValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
     maxLines: 1,
-    maxWidth: "200px",
+    maxWidth: "120px",
     fontSize: "10px"
-  }, "$", itemPrice)))), React.createElement(ButtonContainer$3, null, React.createElement(Button, {
+  }, "$", itemPrice))), dcEquivalentPrice !== undefined && React.createElement(DCPriceLabel, null, formatDCAmount(dcEquivalentPrice), " DC")), React.createElement(ButtonContainer$3, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: disabled,
     onPointerDown: function onPointerDown() {
@@ -35666,17 +35817,21 @@ var SpriteContainer$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__SpriteContainer",
   componentId: "sc-wmpr1o-6"
 })(["position:relative;left:0.5rem;"]);
+var DCPriceLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "MarketplaceRows__DCPriceLabel",
+  componentId: "sc-wmpr1o-7"
+})(["margin-left:8px;color:#fef08a;font-size:0.65rem;white-space:nowrap;"]);
 var PriceValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__PriceValue",
-  componentId: "sc-wmpr1o-7"
+  componentId: "sc-wmpr1o-8"
 })(["margin-left:40px;"]);
 var ButtonContainer$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__ButtonContainer",
-  componentId: "sc-wmpr1o-8"
+  componentId: "sc-wmpr1o-9"
 })(["margin:auto;"]);
 var RarityContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__RarityContainer",
-  componentId: "sc-wmpr1o-9"
+  componentId: "sc-wmpr1o-10"
 })(["border-color:", ";box-shadow:", " inset,", ";width:32px;height:32px;"], function (_ref2) {
   var item = _ref2.item;
   return rarityColor(item);
@@ -35747,7 +35902,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 = useState(''),
     name = _useState[0],
     setName = _useState[1];
@@ -35768,7 +35927,26 @@ var BuyPanel = function BuyPanel(_ref) {
     var _itemsContainer$curre;
     (_itemsContainer$curre = itemsContainer.current) == null ? void 0 : _itemsContainer$curre.scrollTo(0, 0);
   }, [currentPage]);
-  return React.createElement(React.Fragment, null, buyingItemId && React.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 ? goldToDC(goldPrice) : 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);
@@ -35873,6 +36051,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
@@ -36247,7 +36426,7 @@ var PartyCreate = function PartyCreate(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$8, null, "Create Party"), React.createElement("hr", {
+  }, React.createElement(Title$9, null, "Create Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement("h1", null, "Type your party name"), React.createElement(Input, {
     placeholder: "Type party name",
@@ -36270,7 +36449,7 @@ var Wrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$8 = /*#__PURE__*/styled.h1.withConfig({
+var Title$9 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -36319,7 +36498,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$9, null, "Party Dashboard"), React.createElement(Button, {
+  }, React.createElement(Title$a, null, "Party Dashboard"), React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton
   }, "Create"), React.createElement("hr", {
     className: "golden"
@@ -36346,7 +36525,7 @@ var RowsWrapper = /*#__PURE__*/styled.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.h1.withConfig({
+var Title$a = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyDashboard__Title",
   componentId: "sc-16cm41r-2"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -36383,7 +36562,7 @@ var PartyInvite = function PartyInvite(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$a, null, "Invite for Party"), React.createElement("hr", {
+  }, React.createElement(Title$b, null, "Invite for Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement(RowsWrapper$1, {
     className: "playersRows"
@@ -36402,7 +36581,7 @@ var Wrapper$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$a = /*#__PURE__*/styled.h1.withConfig({
+var Title$b = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyInvite__Title",
   componentId: "sc-eu8ggt-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -36844,7 +37023,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$b, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$c, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -36863,7 +37042,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React.createElement(QuestsContainer, null, React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$b, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$c, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -36910,7 +37089,7 @@ var TitleContainer$1 = /*#__PURE__*/styled.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.h1.withConfig({
+var Title$c = /*#__PURE__*/styled.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-1wccpiy-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -37438,7 +37617,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React.createElement(CloseButton$9, {
+  }, onCloseButton && React.createElement(CloseButton$a, {
     onPointerDown: onCloseButton
   }, "X"), React.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -37473,7 +37652,7 @@ var SkillSplitDiv = /*#__PURE__*/styled.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.div.withConfig({
+var CloseButton$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -37609,7 +37788,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$F, null, React.createElement(Header$7, null, React.createElement("div", null, React.createElement(Title$c, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$F, null, React.createElement(Header$8, null, React.createElement("div", null, React.createElement(Title$d, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -37639,7 +37818,7 @@ var Container$F = /*#__PURE__*/styled.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.div.withConfig({
+var Title$d = /*#__PURE__*/styled.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);
@@ -37651,7 +37830,7 @@ var Description$4 = /*#__PURE__*/styled.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.div.withConfig({
+var Header$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -37867,7 +38046,7 @@ var Spell = function Spell(_ref) {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React.createElement(Overlay$4, null, characterSkillLevel < requiredLevel ? "Low " + getSkillName(attribute || 'magic level') + " level" : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
+  }, disabled && React.createElement(Overlay$5, null, characterSkillLevel < requiredLevel ? "Low " + getSkillName(attribute || 'magic level') + " level" : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.createElement("span", {
     className: "cooldown"
   }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -37876,7 +38055,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React.createElement(Info, null, React.createElement(Title$d, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$e, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React.createElement(Description$5, null, description)), React.createElement(Divider$1, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
     className: "mana"
@@ -37897,7 +38076,7 @@ var Info = /*#__PURE__*/styled.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$d = /*#__PURE__*/styled.p.withConfig({
+var Title$e = /*#__PURE__*/styled.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);
@@ -37913,7 +38092,7 @@ var Cost = /*#__PURE__*/styled.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.p.withConfig({
+var Overlay$5 = /*#__PURE__*/styled.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);
@@ -37962,7 +38141,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$J, null, React.createElement(Title$e, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$J, null, React.createElement(Title$f, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -37995,7 +38174,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$e = /*#__PURE__*/styled.h1.withConfig({
+var Title$f = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -58437,7 +58616,7 @@ var CartView = function CartView(_ref2) {
       return _ref3.apply(this, arguments);
     };
   }();
-  return React.createElement(Container$K, null, React.createElement(Header$8, null, React.createElement(Title$f, null, "Shopping Cart"), React.createElement(CloseButton$a, {
+  return React.createElement(Container$K, null, React.createElement(Header$9, null, React.createElement(Title$g, null, "Shopping Cart"), React.createElement(CloseButton$b, {
     onPointerDown: onClose
   }, React.createElement(FaTimes, null))), React.createElement(CartItems, null, cartItems.length === 0 ? React.createElement(EmptyCart, null, "Your cart is empty") : cartItems.map(function (cartItem) {
     var _cartItem$metadata, _cartItem$metadata2;
@@ -58477,15 +58656,15 @@ var Container$K = /*#__PURE__*/styled.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.div.withConfig({
+var Header$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__Header",
   componentId: "sc-ydtyl1-1"
 })(["display:flex;justify-content:space-between;align-items:center;"]);
-var Title$f = /*#__PURE__*/styled.h2.withConfig({
+var Title$g = /*#__PURE__*/styled.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.div.withConfig({
+var CloseButton$b = /*#__PURE__*/styled.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;"]);
@@ -58967,7 +59146,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  }) : React.createElement(DefaultIcon, null, "\uD83D\uDC64")), React.createElement(ItemDetails$1, null, React.createElement(Header$9, null, React.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React.createElement(SelectedSkinNav, null, React.createElement(SelectedSkin, null, "Selected:"), React.createElement(SkinNavArrow, {
+  }) : React.createElement(DefaultIcon, null, "\uD83D\uDC64")), React.createElement(ItemDetails$1, null, React.createElement(Header$a, null, React.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React.createElement(SelectedSkinNav, null, React.createElement(SelectedSkin, null, "Selected:"), React.createElement(SkinNavArrow, {
     direction: "left",
     onPointerDown: handlePreviousSkin,
     size: 24
@@ -59019,7 +59198,7 @@ var SkinNavArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
   displayName: "StoreCharacterSkinRow__SkinNavArrow",
   componentId: "sc-81xqsx-7"
 })(["position:static;"]);
-var Header$9 = /*#__PURE__*/styled.div.withConfig({
+var Header$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreCharacterSkinRow__Header",
   componentId: "sc-81xqsx-8"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
@@ -59343,7 +59522,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,
@@ -59352,16 +59533,32 @@ var StorePacksSection = function StorePacksSection(_ref) {
     if (typeof imageUrl === 'string') return imageUrl;
     return imageUrl["default"] || imageUrl.src;
   };
+  var renderPackIcon = 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.createElement(SpriteFromAtlas, {
+        atlasJSON: atlasJSON,
+        atlasIMG: atlasIMG,
+        spriteKey: imgSrc,
+        width: 40,
+        height: 40,
+        imgScale: 1.2,
+        centered: true
+      });
+    }
+    return React.createElement("img", {
+      src: imgSrc,
+      alt: pack.title
+    });
+  }, [atlasJSON, atlasIMG]);
   var renderPack = useCallback(function (pack) {
     return React.createElement(PackRow, {
       key: pack.key,
       onClick: function onClick() {
         return onSelectPack == null ? void 0 : onSelectPack(pack);
       }
-    }, React.createElement(PackIconContainer, null, React.createElement("img", {
-      src: getImageSrc(pack.image),
-      alt: pack.title
-    })), 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(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) {
@@ -59422,7 +59619,7 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     if (typeof imageUrl === 'string') return imageUrl;
     return imageUrl["default"] || imageUrl.src;
   };
-  return React.createElement(Container$M, null, React.createElement(Header$a, null, React.createElement(BackButton, {
+  return React.createElement(Container$M, null, React.createElement(Header$b, null, React.createElement(BackButton, {
     onClick: onBack
   }, React.createElement(FaArrowLeft, null), React.createElement("span", null, "Back"))), React.createElement(Content$5, null, React.createElement(DetailsGrid, null, React.createElement(ItemIcon, null, React.createElement("img", {
     src: getImageSrc(),
@@ -59440,7 +59637,7 @@ var Container$M = /*#__PURE__*/styled.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.div.withConfig({
+var Header$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__Header",
   componentId: "sc-k3ho5z-1"
 })(["display:flex;align-items:center;gap:1rem;"]);
@@ -59624,18 +59821,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.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: {
@@ -59712,7 +59913,6 @@ var Store = function Store(_ref) {
     }
   }) : React.createElement(Container$N, null, React.createElement(TopBar$1, null, React.createElement(LeftButtons, null, onShowHistory && React.createElement(CTAButton, {
     icon: React.createElement(FaHistory, null),
-    label: "History",
     onClick: onShowHistory
   }), onShowWallet && React.createElement(CTAButton, {
     icon: React.createElement(FaWallet, null),
@@ -59799,63 +59999,63 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
       onPayWithCard();
     }
   }, [selected, onPayWithDC, onPayWithCard]);
-  return React.createElement(ModalPortal, null, React.createElement(Overlay$5, {
+  return React.createElement(ModalPortal, null, React.createElement(Overlay$6, {
     onPointerDown: onClose
-  }), React.createElement(ModalContainer$2, null, React.createElement(ModalContent$2, {
+  }), React.createElement(ModalContainer$3, null, React.createElement(ModalContent$3, {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React.createElement(Header$b, null, React.createElement(Title$g, null, "How would you like to pay?"), React.createElement(CloseButton$b, {
+  }, React.createElement(Header$c, null, React.createElement(Title$h, null, "How would you like to pay?"), React.createElement(CloseButton$c, {
     onPointerDown: onClose,
     "aria-label": "Close"
-  }, React.createElement(FaTimes, null))), React.createElement(Options, null, React.createElement(RadioOption, {
+  }, React.createElement(FaTimes, null))), React.createElement(Options$1, null, React.createElement(RadioOption$1, {
     "$selected": selected === 'card',
     onPointerDown: function onPointerDown() {
       return setSelected('card');
     }
-  }, React.createElement(RadioCircle, {
+  }, React.createElement(RadioCircle$1, {
     "$selected": selected === 'card'
-  }), React.createElement(OptionText, null, React.createElement(OptionLabel, null, "Credit Card"), React.createElement(OptionSub, null, "Stripe secure checkout"))), React.createElement(RadioOption, {
+  }), React.createElement(OptionText$1, null, React.createElement(OptionLabel$1, null, "Credit Card"), React.createElement(OptionSub$1, null, "Stripe secure checkout"))), React.createElement(RadioOption$1, {
     "$selected": selected === 'dc',
     onPointerDown: function onPointerDown() {
       return setSelected('dc');
     }
-  }, React.createElement(RadioCircle, {
+  }, React.createElement(RadioCircle$1, {
     "$selected": selected === 'dc'
-  }), React.createElement(OptionText, null, React.createElement(OptionLabel, null, "Definya Coin"), React.createElement(OptionSub, null, dcBalance.toLocaleString(), " DC available")))), React.createElement(ConfirmRow, null, React.createElement(Button, {
+  }), React.createElement(OptionText$1, null, React.createElement(OptionLabel$1, null, "Definya Coin"), React.createElement(OptionSub$1, null, dcBalance.toLocaleString(), " DC available")))), React.createElement(ConfirmRow$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     onPointerDown: handleConfirm
   }, "Confirm")))));
 };
-var Overlay$5 = /*#__PURE__*/styled.div.withConfig({
+var Overlay$6 = /*#__PURE__*/styled.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.div.withConfig({
+var ModalContainer$3 = /*#__PURE__*/styled.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.div.withConfig({
+var ModalContent$3 = /*#__PURE__*/styled.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.div.withConfig({
+var Header$c = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__Header",
   componentId: "sc-1dxy6lr-3"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
-var Title$g = /*#__PURE__*/styled.h3.withConfig({
+var Title$h = /*#__PURE__*/styled.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.button.withConfig({
+var CloseButton$c = /*#__PURE__*/styled.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.div.withConfig({
+var Options$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__Options",
   componentId: "sc-1dxy6lr-6"
 })(["display:flex;flex-direction:column;gap:8px;"]);
-var RadioOption = /*#__PURE__*/styled.div.withConfig({
+var RadioOption$1 = /*#__PURE__*/styled.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) {
@@ -59865,7 +60065,7 @@ var RadioOption = /*#__PURE__*/styled.div.withConfig({
   var $selected = _ref3.$selected;
   return $selected ? 'rgba(245,158,11,0.1)' : 'transparent';
 });
-var RadioCircle = /*#__PURE__*/styled.div.withConfig({
+var RadioCircle$1 = /*#__PURE__*/styled.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) {
@@ -59875,19 +60075,19 @@ var RadioCircle = /*#__PURE__*/styled.div.withConfig({
   var $selected = _ref5.$selected;
   return $selected ? 1 : 0;
 });
-var OptionText = /*#__PURE__*/styled.div.withConfig({
+var OptionText$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__OptionText",
   componentId: "sc-1dxy6lr-9"
 })(["display:flex;flex-direction:column;gap:3px;"]);
-var OptionLabel = /*#__PURE__*/styled.span.withConfig({
+var OptionLabel$1 = /*#__PURE__*/styled.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.span.withConfig({
+var OptionSub$1 = /*#__PURE__*/styled.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.div.withConfig({
+var ConfirmRow$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__ConfirmRow",
   componentId: "sc-1dxy6lr-12"
 })(["display:flex;justify-content:center;margin-top:4px;"]);
@@ -59926,7 +60126,7 @@ var TimeWidget = function TimeWidget(_ref) {
   return React.createElement(Draggable, {
     scale: scale,
     cancel: ".time-widget-close,.time-widget-container,.time-widget-container *"
-  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$c, {
+  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$d, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React.createElement(DayNightContainer, {
@@ -59943,7 +60143,7 @@ var Time = /*#__PURE__*/styled.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.p.withConfig({
+var CloseButton$d = /*#__PURE__*/styled.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);
@@ -60222,7 +60422,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$O, null, React.createElement(Title$h, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$O, null, React.createElement(Title$i, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -60254,7 +60454,7 @@ var Container$O = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$h = /*#__PURE__*/styled.h1.withConfig({
+var Title$i = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -60434,5 +60634,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, Button, ButtonTypes, CTAButton, CartView, CharacterSelection, CharacterSkinSelectionModal, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DCWalletModal, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, GemSelector, HistoryDialog, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, LoginStreakPanel, Marketplace, MarketplaceRows, 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, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener, useStoreCart };
+export { ActionButtons, AsyncDropdown, Button, ButtonTypes, CTAButton, CartView, CharacterSelection, CharacterSkinSelectionModal, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, CraftBook, DCWalletModal, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FriendList, GemSelector, HistoryDialog, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, LoginStreakPanel, Marketplace, MarketplaceBuyModal, MarketplaceRows, 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, TabBody, Table, TableCell, TableHeader, TableRow, 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