@rpg-engine/long-bow 0.8.136 → 0.8.138

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

@@ -30309,49 +30309,50 @@ var PageInfo$1 = /*#__PURE__*/styled__default.div.withConfig({
 var TRANSACTION_TYPE_LABELS = {
   Purchase: 'Purchase',
   Transfer: 'Transfer',
-  MarketplaceSale: 'Marketplace Sale',
-  MarketplacePurchase: 'Marketplace Buy',
-  StorePurchase: 'Store Purchase',
+  MarketplaceSale: 'Mkt Sale',
+  MarketplacePurchase: 'Mkt Buy',
+  StorePurchase: 'Store',
   Fee: 'Fee',
   Refund: 'Refund',
-  AdminAdjustment: 'Admin Adjustment'
+  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 = [{
-  id: 0,
   value: '',
-  option: 'All Types'
+  label: 'All Types'
 }, {
-  id: 1,
   value: 'Purchase',
-  option: 'Purchase'
+  label: 'Purchase'
 }, {
-  id: 2,
   value: 'Transfer',
-  option: 'Transfer'
+  label: 'Transfer'
 }, {
-  id: 3,
   value: 'MarketplaceSale',
-  option: 'Marketplace Sale'
+  label: 'Marketplace Sale'
 }, {
-  id: 4,
   value: 'MarketplacePurchase',
-  option: 'Marketplace Buy'
+  label: 'Marketplace Buy'
 }, {
-  id: 5,
   value: 'StorePurchase',
-  option: 'Store Purchase'
+  label: 'Store Purchase'
 }, {
-  id: 6,
   value: 'Fee',
-  option: 'Fee'
+  label: 'Fee'
 }, {
-  id: 7,
   value: 'Refund',
-  option: 'Refund'
+  label: 'Refund'
 }, {
-  id: 8,
   value: 'AdminAdjustment',
-  option: 'Admin Adjustment'
+  label: 'Admin Adjustment'
 }];
 var DCHistoryPanel = function DCHistoryPanel(_ref) {
   var transactions = _ref.transactions,
@@ -30362,7 +30363,13 @@ var DCHistoryPanel = function DCHistoryPanel(_ref) {
   var _React$useState = React__default.useState(''),
     selectedType = _React$useState[0],
     setSelectedType = _React$useState[1];
-  var handleTypeChange = function handleTypeChange(value) {
+  // Auto-load on first mount (when History tab is opened)
+  React__default.useEffect(function () {
+    onRequestHistory(1);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var handleTypeChange = function handleTypeChange(e) {
+    var value = e.target.value;
     setSelectedType(value);
     onRequestHistory(1, value || undefined);
   };
@@ -30371,22 +30378,29 @@ var DCHistoryPanel = function DCHistoryPanel(_ref) {
   };
   var formatDate = function formatDate(dateStr) {
     var d = new Date(dateStr);
-    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    return months[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
+    return d.getMonth() + 1 + "/" + d.getDate() + "/" + String(d.getFullYear()).slice(-2);
   };
-  return React__default.createElement(PanelContainer, null, React__default.createElement(FilterRow, null, React__default.createElement(FilterLabel, null, "Filter:"), React__default.createElement(Dropdown, {
-    options: TRANSACTION_TYPE_OPTIONS,
-    onChange: handleTypeChange,
-    width: "200px"
-  })), 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;
+  return React__default.createElement(PanelContainer, null, React__default.createElement(FilterRow, null, React__default.createElement(FilterLabel, null, "Filter:"), React__default.createElement(TypeSelect, {
+    value: selectedType,
+    onChange: handleTypeChange
+  }, TRANSACTION_TYPE_OPTIONS.map(function (opt) {
+    return React__default.createElement("option", {
+      key: opt.value,
+      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, _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(TxType, null, label), 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(TxNote, null, (_tx$note = tx.note) != null ? _tx$note : tx.relatedCharacterName ? "With: " + tx.relatedCharacterName : ''), React__default.createElement(TxDate, null, formatDate(tx.createdAt)), React__default.createElement(TxBalance, null, "Balance: ", tx.balanceAfter, " DC"));
+    }, isCredit ? '+' : '', tx.amount, " DC"), React__default.createElement(TxDate, null, formatDate(tx.createdAt))));
   })), totalPages > 1 && React__default.createElement(Pagination, {
     currentPage: currentPage,
     totalPages: totalPages,
@@ -30400,54 +30414,65 @@ var PanelContainer = /*#__PURE__*/styled__default.div.withConfig({
 var FilterRow = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DCHistoryPanel__FilterRow",
   componentId: "sc-debjdj-1"
-})(["display:flex;align-items:center;gap:8px;margin-bottom:4px;"]);
+})(["display:flex;align-items:center;gap:8px;margin-bottom:2px;"]);
 var FilterLabel = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "DCHistoryPanel__FilterLabel",
   componentId: "sc-debjdj-2"
-})(["font-size:8px;color:#f59e0b;font-family:'Press Start 2P',cursive;white-space:nowrap;"]);
+})(["font-size:7px;color:#f59e0b;font-family:'Press Start 2P',cursive;white-space:nowrap;"]);
+var TypeSelect = /*#__PURE__*/styled__default.select.withConfig({
+  displayName: "DCHistoryPanel__TypeSelect",
+  componentId: "sc-debjdj-3"
+})(["background:rgba(0,0,0,0.7);border:1px solid rgba(245,158,11,0.4);border-radius:3px;color:#f59e0b;font-size:7px;font-family:'Press Start 2P',cursive;padding:3px 5px;cursor:pointer;outline:none;flex:1;option{background:#1a1a2e;color:#f59e0b;}&:hover{border-color:#f59e0b;}&:focus{border-color:#f59e0b;box-shadow:0 0 0 1px rgba(245,158,11,0.3);}"]);
 var TransactionList = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DCHistoryPanel__TransactionList",
-  componentId: "sc-debjdj-3"
-})(["display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto;"]);
+  componentId: "sc-debjdj-4"
+})(["display:flex;flex-direction:column;gap:3px;max-height:260px;overflow-y:auto;&::-webkit-scrollbar{width:4px;}&::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);}&::-webkit-scrollbar-thumb{background:rgba(245,158,11,0.4);border-radius:2px;}"]);
 var TransactionRow = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DCHistoryPanel__TransactionRow",
-  componentId: "sc-debjdj-4"
-})(["background:rgba(0,0,0,0.4);border:1px solid rgba(255,215,0,0.2);padding:8px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:2px;"]);
+  componentId: "sc-debjdj-5"
+})(["background:rgba(0,0,0,0.35);border:1px solid rgba(245,158,11,0.15);border-radius:2px;padding:5px 7px;display:flex;align-items:center;gap:8px;"]);
+var TxLeft = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DCHistoryPanel__TxLeft",
+  componentId: "sc-debjdj-6"
+})(["flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;"]);
+var TxRight = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DCHistoryPanel__TxRight",
+  componentId: "sc-debjdj-7"
+})(["display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;"]);
 var TxType = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "DCHistoryPanel__TxType",
-  componentId: "sc-debjdj-5"
-})(["font-size:8px;color:#f59e0b;font-family:'Press Start 2P',cursive;grid-column:1;grid-row:1;"]);
+  componentId: "sc-debjdj-8"
+})(["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-6"
-})(["font-size:10px;font-family:'Press Start 2P',cursive;color:", ";font-weight:bold;grid-column:2;grid-row:1;text-align:right;"], function (_ref2) {
-  var $credit = _ref2.$credit;
+  componentId: "sc-debjdj-9"
+})(["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({
   displayName: "DCHistoryPanel__TxNote",
-  componentId: "sc-debjdj-7"
-})(["font-size:7px;color:", ";font-family:'Press Start 2P',cursive;grid-column:1;grid-row:2;"], uiColors.lightGray);
+  componentId: "sc-debjdj-10"
+})(["font-size:6px;color:", ";font-family:'Press Start 2P',cursive;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], uiColors.lightGray);
 var TxDate = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "DCHistoryPanel__TxDate",
-  componentId: "sc-debjdj-8"
-})(["font-size:7px;color:", ";font-family:'Press Start 2P',cursive;grid-column:2;grid-row:2;text-align:right;"], uiColors.lightGray);
-var TxBalance = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "DCHistoryPanel__TxBalance",
-  componentId: "sc-debjdj-9"
-})(["font-size:7px;color:", ";font-family:'Press Start 2P',cursive;grid-column:1 / 3;grid-row:3;opacity:0.7;"], uiColors.white);
+  componentId: "sc-debjdj-11"
+})(["font-size:6px;color:rgba(255,255,255,0.4);font-family:'Press Start 2P',cursive;white-space:nowrap;"]);
 var LoadingRow = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DCHistoryPanel__LoadingRow",
-  componentId: "sc-debjdj-10"
+  componentId: "sc-debjdj-12"
 })(["display:flex;align-items:center;gap:8px;justify-content:center;padding:16px;color:", ";font-size:9px;font-family:'Press Start 2P',cursive;"], uiColors.white);
 var Spinner = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DCHistoryPanel__Spinner",
-  componentId: "sc-debjdj-11"
-})(["border:3px solid rgba(255,255,255,0.2);border-radius:50%;border-top:3px solid #f59e0b;width:20px;height:20px;animation:spin 0.8s linear infinite;@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"]);
+  componentId: "sc-debjdj-13"
+})(["border:3px solid rgba(255,255,255,0.2);border-radius:50%;border-top:3px solid #f59e0b;width:16px;height:16px;animation:spin 0.8s linear infinite;@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"]);
 var EmptyMessage = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DCHistoryPanel__EmptyMessage",
-  componentId: "sc-debjdj-12"
-})(["font-size:9px;color:", ";font-family:'Press Start 2P',cursive;text-align:center;padding:20px;"], uiColors.lightGray);
+  componentId: "sc-debjdj-14"
+})(["font-size:8px;color:", ";font-family:'Press Start 2P',cursive;text-align:center;padding:20px;"], uiColors.lightGray);
 
 // Global style to prevent body scrolling when modal is open
 var GlobalStyle = /*#__PURE__*/styled.createGlobalStyle(["body{overflow:hidden;width:100%;height:100%;}"]);
@@ -30599,7 +30624,9 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
     onClearTransferResult = _ref.onClearTransferResult,
     characterName = _ref.characterName,
     onInputFocus = _ref.onInputFocus,
-    onInputBlur = _ref.onInputBlur;
+    onInputBlur = _ref.onInputBlur,
+    onSearchCharacter = _ref.onSearchCharacter,
+    searchResults = _ref.searchResults;
   var _useState = React.useState(''),
     recipientName = _useState[0],
     setRecipientName = _useState[1];
@@ -30612,7 +30639,23 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
   var _useState4 = React.useState(false),
     showConfirm = _useState4[0],
     setShowConfirm = _useState4[1];
+  var _useState5 = React.useState(false),
+    showDropdown = _useState5[0],
+    setShowDropdown = _useState5[1];
+  var dropdownRef = React.useRef(null);
   var clearResultTimerRef = React.useRef(null);
+  var debouncedSearch = React.useMemo(function () {
+    return lodash.debounce(function (name) {
+      if (name.trim().length >= 2) {
+        onSearchCharacter == null ? void 0 : onSearchCharacter(name.trim());
+      }
+    }, 300);
+  }, [onSearchCharacter]);
+  React.useEffect(function () {
+    return function () {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
   React.useEffect(function () {
     if (transferResult) {
       if (clearResultTimerRef.current) {
@@ -30660,17 +30703,41 @@ var DCTransferPanel = function DCTransferPanel(_ref) {
     setRecipientName('');
     setAmount('');
   }, [recipientName, amount, onSendTransfer]);
-  return React__default.createElement(PanelContainer$1, null, React__default.createElement(FieldLabel, null, "Recipient Character Name"), React__default.createElement(StyledInput, {
+  return React__default.createElement(PanelContainer$1, null, React__default.createElement(FieldLabel, null, "Recipient Character Name"), React__default.createElement(AutocompleteWrapper, {
+    ref: dropdownRef
+  }, React__default.createElement(StyledInput, {
     type: "text",
     value: recipientName,
     onChange: function onChange(e) {
-      return setRecipientName(e.target.value);
+      setRecipientName(e.target.value);
+      debouncedSearch(e.target.value);
+      setShowDropdown(true);
+    },
+    onFocus: function onFocus() {
+      onInputFocus == null ? void 0 : onInputFocus();
+      if (recipientName.trim().length >= 2 && searchResults && searchResults.length > 0) {
+        setShowDropdown(true);
+      }
+    },
+    onBlur: function onBlur() {
+      // Delay to allow dropdown click to register
+      setTimeout(function () {
+        return setShowDropdown(false);
+      }, 150);
+      onInputBlur == null ? void 0 : onInputBlur();
     },
-    onFocus: onInputFocus,
-    onBlur: onInputBlur,
     placeholder: "Enter character name",
-    disabled: transferLoading
-  }), React__default.createElement(FieldLabel, null, "Amount (DC)"), React__default.createElement(StyledInput, {
+    disabled: transferLoading,
+    autoComplete: "off"
+  }), showDropdown && searchResults && searchResults.length > 0 && React__default.createElement(DropdownList, null, searchResults.map(function (_char) {
+    return React__default.createElement(DropdownItem, {
+      key: _char._id,
+      onPointerDown: function onPointerDown() {
+        setRecipientName(_char.name);
+        setShowDropdown(false);
+      }
+    }, _char.name);
+  }))), React__default.createElement(FieldLabel, null, "Amount (DC)"), React__default.createElement(StyledInput, {
     type: "number",
     min: 1,
     value: amount,
@@ -30731,6 +30798,18 @@ var ErrorMessage = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DCTransferPanel__ErrorMessage",
   componentId: "sc-k1vvb1-6"
 })(["font-size:9px;color:", ";font-family:'Press Start 2P',cursive;"], uiColors.red);
+var AutocompleteWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DCTransferPanel__AutocompleteWrapper",
+  componentId: "sc-k1vvb1-7"
+})(["position:relative;width:100%;"]);
+var DropdownList = /*#__PURE__*/styled__default.ul.withConfig({
+  displayName: "DCTransferPanel__DropdownList",
+  componentId: "sc-k1vvb1-8"
+})(["position:absolute;top:100%;left:0;right:0;background:rgba(10,10,30,0.95);border:1px solid #f59e0b;border-top:none;list-style:none;padding:0;margin:0;max-height:120px;overflow-y:auto;z-index:10;"]);
+var DropdownItem = /*#__PURE__*/styled__default.li.withConfig({
+  displayName: "DCTransferPanel__DropdownItem",
+  componentId: "sc-k1vvb1-9"
+})(["padding:6px 8px;font-size:11px;font-family:'Press Start 2P',cursive;color:", ";cursor:pointer;&:hover{background:rgba(245,158,11,0.3);}"], uiColors.white);
 
 var DCWalletModal = function DCWalletModal(_ref) {
   var _historyData$transact, _historyData$totalPag, _historyData$currentP;
@@ -30745,7 +30824,10 @@ var DCWalletModal = function DCWalletModal(_ref) {
     onClearTransferResult = _ref.onClearTransferResult,
     characterName = _ref.characterName,
     onInputFocus = _ref.onInputFocus,
-    onInputBlur = _ref.onInputBlur;
+    onInputBlur = _ref.onInputBlur,
+    onBuyDC = _ref.onBuyDC,
+    onSearchCharacter = _ref.onSearchCharacter,
+    searchResults = _ref.searchResults;
   var _useState = React.useState('balance'),
     activeTab = _useState[0],
     setActiveTab = _useState[1];
@@ -30755,7 +30837,10 @@ var DCWalletModal = function DCWalletModal(_ref) {
   var tabs = [{
     id: 'balance',
     title: 'Balance',
-    content: React__default.createElement(BalanceContent, null, React__default.createElement(BalanceLabel, null, "Your DC Balance"), React__default.createElement(BalanceAmount, null, dcBalance.toLocaleString(), " DC"), React__default.createElement(BalanceHint, null, "Buy DC packs from the Store > Packs tab."))
+    content: React__default.createElement(BalanceContent, null, React__default.createElement(BalanceLabel, null, "Your DC Balance"), React__default.createElement(BalanceAmount, null, dcBalance.toLocaleString(), " DC"), onBuyDC && React__default.createElement(BuyButton, {
+      onPointerDown: onBuyDC,
+      title: "Buy Definya Coins"
+    }, React__default.createElement(fa.FaShoppingCart, null), React__default.createElement(BuyButtonLabel, null, "Buy DC")))
   }, {
     id: 'transfer',
     title: 'Transfer',
@@ -30767,7 +30852,9 @@ var DCWalletModal = function DCWalletModal(_ref) {
       onClearTransferResult: onClearTransferResult,
       characterName: characterName,
       onInputFocus: onInputFocus,
-      onInputBlur: onInputBlur
+      onInputBlur: onInputBlur,
+      onSearchCharacter: onSearchCharacter,
+      searchResults: searchResults
     })
   }, {
     id: 'history',
@@ -30793,7 +30880,10 @@ var DCWalletModal = function DCWalletModal(_ref) {
     tabs: tabs,
     activeTab: activeTab,
     onTabChange: function onTabChange(tabId) {
-      return setActiveTab(tabId);
+      setActiveTab(tabId);
+      if (tabId === 'history') {
+        onRequestHistory(1);
+      }
     },
     activeTextColor: "#000000",
     activeColor: "#fef08a",
@@ -30842,10 +30932,14 @@ var BalanceAmount = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DCWalletModal__BalanceAmount",
   componentId: "sc-12xy88y-9"
 })(["font-family:'Press Start 2P',cursive;font-size:28px;color:#fef08a;text-shadow:2px 2px 0 #000;letter-spacing:2px;"]);
-var BalanceHint = /*#__PURE__*/styled__default.span.withConfig({
-  displayName: "DCWalletModal__BalanceHint",
+var BuyButton = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "DCWalletModal__BuyButton",
   componentId: "sc-12xy88y-10"
-})(["font-family:'Press Start 2P',cursive;font-size:7px;color:", ";"], uiColors.lightGray);
+})(["display:flex;align-items:center;gap:8px;margin-top:8px;padding:10px 20px;background:#f59e0b;border:none;border-radius:6px;color:#000;cursor:pointer;font-size:1rem;&:hover{background:#fbbf24;}&:active{background:#d97706;}"]);
+var BuyButtonLabel = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DCWalletModal__BuyButtonLabel",
+  componentId: "sc-12xy88y-11"
+})(["font-family:'Press Start 2P',cursive;font-size:8px;"]);
 
 var SimpleProgressBar = function SimpleProgressBar(_ref) {
   var value = _ref.value,
@@ -35509,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,
@@ -35545,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() {
@@ -35592,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);
@@ -35673,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];
@@ -35694,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);
@@ -35799,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
@@ -36172,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",
@@ -36195,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);
@@ -36244,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"
@@ -36271,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);
@@ -36308,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"
@@ -36327,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);
@@ -36769,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"
@@ -36788,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"
@@ -36835,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);
@@ -37363,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"
@@ -37398,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;"]);
@@ -37534,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"
@@ -37564,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);
@@ -37576,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;"]);
@@ -37792,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,
@@ -37801,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"
@@ -37822,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);
@@ -37838,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);
@@ -37887,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,
@@ -37920,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);
@@ -58362,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;
@@ -58402,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;"]);
@@ -58892,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
@@ -58944,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;"]);
@@ -59268,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,
@@ -59277,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) {
@@ -59347,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(),
@@ -59365,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;"]);
@@ -59549,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: {
@@ -59724,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) {
@@ -59790,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) {
@@ -59800,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;"]);
@@ -59851,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, {
@@ -59868,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);
@@ -60147,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"
@@ -60179,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;"]);
@@ -60400,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;