@rpg-engine/long-bow 0.8.135 → 0.8.136

package/dist/long-bow.esm.js

@@ -5,7 +5,7 @@ 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 dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaClipboardList, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaWallet, FaShoppingCart } from 'react-icons/fa';
+import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaClipboardList, FaPaperPlane, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaWallet, FaShoppingCart } from 'react-icons/fa';
 import { RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import Draggable from 'react-draggable';
@@ -30185,6 +30185,661 @@ var TaskTitle$1 = /*#__PURE__*/styled.h2.withConfig({
   return props.isMobile ? '4px 0' : '8px 0';
 });
 
+var UI_BREAKPOINT_MOBILE = '950px';
+var UI_BREAKPOINT_SMALL_LAPTOP = '1400px';
+
+var InternalTabs = function InternalTabs(_ref) {
+  var _tabs$, _tabs$find;
+  var tabs = _ref.tabs,
+    _ref$activeColor = _ref.activeColor,
+    activeColor = _ref$activeColor === void 0 ? '#fef08a' : _ref$activeColor,
+    _ref$activeTextColor = _ref.activeTextColor,
+    activeTextColor = _ref$activeTextColor === void 0 ? '#000000' : _ref$activeTextColor,
+    _ref$inactiveColor = _ref.inactiveColor,
+    inactiveColor = _ref$inactiveColor === void 0 ? '#6b7280' : _ref$inactiveColor,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? '#f59e0b' : _ref$borderColor,
+    _ref$hoverColor = _ref.hoverColor,
+    hoverColor = _ref$hoverColor === void 0 ? '#fef3c7' : _ref$hoverColor,
+    onTabChange = _ref.onTabChange,
+    externalActiveTab = _ref.activeTab;
+  var _useState = useState((_tabs$ = tabs[0]) == null ? void 0 : _tabs$.id),
+    internalActiveTab = _useState[0],
+    setInternalActiveTab = _useState[1];
+  var activeTabId = externalActiveTab != null ? externalActiveTab : internalActiveTab;
+  var handleTabClick = function handleTabClick(tabId) {
+    setInternalActiveTab(tabId);
+    onTabChange == null ? void 0 : onTabChange(tabId);
+  };
+  return React.createElement(TableWrapper, null, React.createElement(TabHeader, {
+    borderColor: borderColor
+  }, tabs.map(function (tab) {
+    return React.createElement(TabButton, {
+      key: tab.id,
+      active: activeTabId === tab.id,
+      activeColor: activeColor,
+      activeTextColor: activeTextColor,
+      inactiveColor: inactiveColor,
+      borderColor: borderColor,
+      hoverColor: hoverColor,
+      onClick: function onClick() {
+        return handleTabClick(tab.id);
+      }
+    }, tab.title);
+  })), React.createElement(ContentWrapper, null, (_tabs$find = tabs.find(function (tab) {
+    return tab.id === activeTabId;
+  })) == null ? void 0 : _tabs$find.content));
+};
+var TableWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InternalTabs__TableWrapper",
+  componentId: "sc-ldufv0-0"
+})(["width:100%;"]);
+var TabHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InternalTabs__TabHeader",
+  componentId: "sc-ldufv0-1"
+})(["display:flex;border-bottom:1px solid ", ";"], function (props) {
+  return props.borderColor;
+});
+var TabButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "InternalTabs__TabButton",
+  componentId: "sc-ldufv0-2"
+})(["flex:1;padding:0.25rem 0.5rem;font-size:0.75rem;font-weight:500;border-right:1px solid ", ";background-color:", ";color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;@media (min-width:480px){padding:0.375rem 0.75rem;font-size:0.8125rem;}@media (min-width:", "){padding:0.5rem 1rem;font-size:0.875rem;}&:last-child{border-right:none;}&:hover{background-color:", ";}"], function (props) {
+  return props.borderColor;
+}, function (props) {
+  return props.active ? props.activeColor : 'transparent';
+}, function (props) {
+  return props.active ? props.activeTextColor : props.inactiveColor;
+}, UI_BREAKPOINT_MOBILE, function (props) {
+  return props.active ? props.activeColor : props.hoverColor;
+});
+var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "InternalTabs__ContentWrapper",
+  componentId: "sc-ldufv0-3"
+})(["width:100%;"]);
+
+var Pagination = function Pagination(_ref) {
+  var currentPage = _ref.currentPage,
+    totalPages = _ref.totalPages,
+    onPageChange = _ref.onPageChange,
+    className = _ref.className;
+  return React.createElement(Container$j, {
+    className: className
+  }, React.createElement(PaginationButton$1, {
+    onClick: function onClick() {
+      return onPageChange(Math.max(1, currentPage - 1));
+    },
+    disabled: currentPage === 1
+  }, React.createElement(FaChevronLeft, {
+    size: 12
+  })), React.createElement(PageInfo$1, null, "Page ", currentPage, " of ", totalPages), React.createElement(PaginationButton$1, {
+    onClick: function onClick() {
+      return onPageChange(Math.min(totalPages, currentPage + 1));
+    },
+    disabled: currentPage === totalPages
+  }, React.createElement(FaChevronRight, {
+    size: 12
+  })));
+};
+var Container$j = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Pagination__Container",
+  componentId: "sc-3k4m4u-0"
+})(["display:flex;align-items:center;justify-content:center;gap:16px;padding:8px;"]);
+var PaginationButton$1 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "Pagination__PaginationButton",
+  componentId: "sc-3k4m4u-1"
+})(["background:none;border:none;color:", ";cursor:", ";opacity:", ";padding:4px;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s;&:hover:not(:disabled){opacity:1;}"], function (props) {
+  return props.disabled ? uiColors.darkGray : uiColors.yellow;
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+}, function (props) {
+  return props.disabled ? 0.5 : 0.8;
+});
+var PageInfo$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Pagination__PageInfo",
+  componentId: "sc-3k4m4u-2"
+})(["color:", ";font-size:0.8rem;font-family:'Press Start 2P',cursive;"], uiColors.lightGray);
+
+var TRANSACTION_TYPE_LABELS = {
+  Purchase: 'Purchase',
+  Transfer: 'Transfer',
+  MarketplaceSale: 'Marketplace Sale',
+  MarketplacePurchase: 'Marketplace Buy',
+  StorePurchase: 'Store Purchase',
+  Fee: 'Fee',
+  Refund: 'Refund',
+  AdminAdjustment: 'Admin Adjustment'
+};
+var TRANSACTION_TYPE_OPTIONS = [{
+  id: 0,
+  value: '',
+  option: 'All Types'
+}, {
+  id: 1,
+  value: 'Purchase',
+  option: 'Purchase'
+}, {
+  id: 2,
+  value: 'Transfer',
+  option: 'Transfer'
+}, {
+  id: 3,
+  value: 'MarketplaceSale',
+  option: 'Marketplace Sale'
+}, {
+  id: 4,
+  value: 'MarketplacePurchase',
+  option: 'Marketplace Buy'
+}, {
+  id: 5,
+  value: 'StorePurchase',
+  option: 'Store Purchase'
+}, {
+  id: 6,
+  value: 'Fee',
+  option: 'Fee'
+}, {
+  id: 7,
+  value: 'Refund',
+  option: 'Refund'
+}, {
+  id: 8,
+  value: 'AdminAdjustment',
+  option: 'Admin Adjustment'
+}];
+var DCHistoryPanel = function DCHistoryPanel(_ref) {
+  var transactions = _ref.transactions,
+    totalPages = _ref.totalPages,
+    currentPage = _ref.currentPage,
+    loading = _ref.loading,
+    onRequestHistory = _ref.onRequestHistory;
+  var _React$useState = React.useState(''),
+    selectedType = _React$useState[0],
+    setSelectedType = _React$useState[1];
+  var handleTypeChange = function handleTypeChange(value) {
+    setSelectedType(value);
+    onRequestHistory(1, value || undefined);
+  };
+  var handlePageChange = function handlePageChange(page) {
+    onRequestHistory(page, selectedType || undefined);
+  };
+  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 React.createElement(PanelContainer, null, React.createElement(FilterRow, null, React.createElement(FilterLabel, null, "Filter:"), React.createElement(Dropdown, {
+    options: TRANSACTION_TYPE_OPTIONS,
+    onChange: handleTypeChange,
+    width: "200px"
+  })), 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 isCredit = tx.amount > 0;
+    var label = (_TRANSACTION_TYPE_LAB = TRANSACTION_TYPE_LABELS[tx.type]) != null ? _TRANSACTION_TYPE_LAB : tx.type;
+    return React.createElement(TransactionRow, {
+      key: tx._id
+    }, React.createElement(TxType, null, label), React.createElement(TxAmount, {
+      "$credit": isCredit
+    }, isCredit ? '+' : '', tx.amount, " DC"), React.createElement(TxNote, null, (_tx$note = tx.note) != null ? _tx$note : tx.relatedCharacterName ? "With: " + tx.relatedCharacterName : ''), React.createElement(TxDate, null, formatDate(tx.createdAt)), React.createElement(TxBalance, null, "Balance: ", tx.balanceAfter, " DC"));
+  })), totalPages > 1 && React.createElement(Pagination, {
+    currentPage: currentPage,
+    totalPages: totalPages,
+    onPageChange: handlePageChange
+  }));
+};
+var PanelContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCHistoryPanel__PanelContainer",
+  componentId: "sc-debjdj-0"
+})(["display:flex;flex-direction:column;gap:6px;padding:4px 0;"]);
+var FilterRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCHistoryPanel__FilterRow",
+  componentId: "sc-debjdj-1"
+})(["display:flex;align-items:center;gap:8px;margin-bottom:4px;"]);
+var FilterLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "DCHistoryPanel__FilterLabel",
+  componentId: "sc-debjdj-2"
+})(["font-size:8px;color:#f59e0b;font-family:'Press Start 2P',cursive;white-space:nowrap;"]);
+var TransactionList = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCHistoryPanel__TransactionList",
+  componentId: "sc-debjdj-3"
+})(["display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto;"]);
+var TransactionRow = /*#__PURE__*/styled.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;"]);
+var TxType = /*#__PURE__*/styled.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;"]);
+var TxAmount = /*#__PURE__*/styled.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;
+  return $credit ? uiColors.green : uiColors.red;
+});
+var TxNote = /*#__PURE__*/styled.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);
+var TxDate = /*#__PURE__*/styled.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.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);
+var LoadingRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCHistoryPanel__LoadingRow",
+  componentId: "sc-debjdj-10"
+})(["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.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);}}"]);
+var EmptyMessage = /*#__PURE__*/styled.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);
+
+// Global style to prevent body scrolling when modal is open
+var GlobalStyle = /*#__PURE__*/createGlobalStyle(["body{overflow:hidden;width:100%;height:100%;}"]);
+var ConfirmModal = function ConfirmModal(_ref) {
+  var onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? 'Are you sure?' : _ref$message;
+  var handleConfirm = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onConfirm();
+  }, [onConfirm]);
+  var handleClose = useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+  }, [onClose]);
+  // Fix type issues by separating event handlers for different event types
+  var stopPropagationClick = useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var stopPropagationTouch = useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var stopPropagationPointer = useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  return React.createElement(ModalPortal, null, React.createElement(GlobalStyle, null), React.createElement(Overlay, {
+    onPointerDown: handleClose
+  }), React.createElement(ModalContainer, null, React.createElement(ModalContent, {
+    onClick: stopPropagationClick,
+    onTouchStart: stopPropagationTouch,
+    onTouchEnd: stopPropagationTouch,
+    onTouchMove: stopPropagationTouch,
+    onPointerDown: stopPropagationPointer
+  }, React.createElement(MessageContainer, null, typeof message === 'string' ? React.createElement(Message$1, null, message) : message), React.createElement(ButtonsContainer$2, null, React.createElement(CancelButtonWrapper, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: handleClose
+  }, "No")), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: handleConfirm
+  }, "Yes")))));
+};
+var Overlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ConfirmModal__Overlay",
+  componentId: "sc-11qkyu1-0"
+})(["position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.6);z-index:1000;animation:fadeIn 0.2s ease-out;cursor:pointer;touch-action:none;@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}"]);
+var ModalContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ConfirmModal__ModalContainer",
+  componentId: "sc-11qkyu1-1"
+})(["position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);"]);
+var ModalContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ConfirmModal__ModalContent",
+  componentId: "sc-11qkyu1-2"
+})(["background-color:#2a2a2a;border:2px solid #444;border-radius:8px;padding:20px;min-width:300px;max-width:90%;margin:0 auto;animation:scaleIn 0.2s ease-out;transform-origin:center;box-shadow:0 4px 20px rgba(0,0,0,0.5),0 0 40px rgba(0,0,0,0.3);pointer-events:auto;@keyframes scaleIn{from{transform:scale(0.8);opacity:0;}to{transform:scale(1);opacity:1;}}@media (max-width:768px){padding:25px;width:85%;}"]);
+var MessageContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ConfirmModal__MessageContainer",
+  componentId: "sc-11qkyu1-3"
+})(["margin-bottom:20px;text-align:center;"]);
+var Message$1 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "ConfirmModal__Message",
+  componentId: "sc-11qkyu1-4"
+})(["margin:0;font-size:16px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.5);@media (max-width:768px){font-size:18px;}"]);
+var ButtonsContainer$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ConfirmModal__ButtonsContainer",
+  componentId: "sc-11qkyu1-5"
+})(["display:flex;justify-content:center;gap:20px;@media (max-width:768px){gap:30px;transform:scale(1.1);margin-top:5px;}"]);
+var CancelButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ConfirmModal__CancelButtonWrapper",
+  componentId: "sc-11qkyu1-6"
+})(["filter:grayscale(0.7);"]);
+
+var CTAButton = function CTAButton(_ref) {
+  var icon = _ref.icon,
+    label = _ref.label,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? '#ffffff' : _ref$textColor,
+    _ref$iconColor = _ref.iconColor,
+    iconColor = _ref$iconColor === void 0 ? '#f59e0b' : _ref$iconColor,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return React.createElement(ButtonContainer$1, {
+    className: className,
+    onPointerDown: disabled ? undefined : onClick,
+    "$fullWidth": fullWidth,
+    "$disabled": disabled,
+    "$color": textColor
+  }, React.createElement(ButtonContent, null, React.createElement(IconWrapper$1, {
+    "$color": iconColor,
+    "$disabled": disabled
+  }, icon), label && React.createElement(ButtonLabel, {
+    "$color": textColor,
+    "$disabled": disabled
+  }, label)));
+};
+var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CTAButton__ButtonContainer",
+  componentId: "sc-1azvwn5-0"
+})(["display:inline-flex;align-items:center;padding:0.75rem 1.25rem;background:rgba(0,0,0,0.3);border:2px solid #f59e0b;box-shadow:0 0 10px rgba(245,158,11,0.3);border-radius:4px;cursor:", ";transition:all 0.2s;position:relative;opacity:", ";color:", ";", " &:hover{background:", ";box-shadow:", ";transform:", ";}&:active{transform:", ";box-shadow:", ";}&:before{content:'';position:absolute;inset:-1px;border-radius:5px;padding:1px;background:linear-gradient(45deg,#f59e0b,#fbbf24,#f59e0b);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:destination-out;}"], function (props) {
+  return props.$disabled ? 'not-allowed' : 'pointer';
+}, function (props) {
+  return props.$disabled ? 0.5 : 1;
+}, function (props) {
+  return props.$disabled ? '#6b7280' : props.$color;
+}, function (props) {
+  return props.$fullWidth && css(["display:flex;justify-content:center;"]);
+}, function (props) {
+  return props.$disabled ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.4)';
+}, function (props) {
+  return props.$disabled ? '0 0 10px rgba(245, 158, 11, 0.3)' : '0 0 15px rgba(245, 158, 11, 0.4)';
+}, function (props) {
+  return props.$disabled ? 'none' : 'translateY(-1px)';
+}, function (props) {
+  return props.$disabled ? 'none' : 'translateY(1px)';
+}, function (props) {
+  return props.$disabled ? '0 0 10px rgba(245, 158, 11, 0.3)' : '0 0 5px rgba(245, 158, 11, 0.2)';
+});
+var ButtonContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CTAButton__ButtonContent",
+  componentId: "sc-1azvwn5-1"
+})(["display:flex;align-items:center;gap:0.75rem;"]);
+var IconWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CTAButton__IconWrapper",
+  componentId: "sc-1azvwn5-2"
+})(["svg{font-size:1.25rem;color:", ";filter:drop-shadow(0 0 2px rgba(245,158,11,0.5));opacity:", ";}"], function (props) {
+  return props.$color;
+}, function (props) {
+  return props.$disabled ? 0.5 : 1;
+});
+var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "CTAButton__ButtonLabel",
+  componentId: "sc-1azvwn5-3"
+})(["color:", ";font-family:'Press Start 2P',cursive;font-size:0.875rem;text-shadow:0 0 4px rgba(245,158,11,0.5);opacity:", ";"], function (props) {
+  return props.$color;
+}, function (props) {
+  return props.$disabled ? 0.5 : 1;
+});
+
+var DCTransferPanel = function DCTransferPanel(_ref) {
+  var dcBalance = _ref.dcBalance,
+    transferLoading = _ref.transferLoading,
+    transferResult = _ref.transferResult,
+    onSendTransfer = _ref.onSendTransfer,
+    onClearTransferResult = _ref.onClearTransferResult,
+    characterName = _ref.characterName,
+    onInputFocus = _ref.onInputFocus,
+    onInputBlur = _ref.onInputBlur;
+  var _useState = useState(''),
+    recipientName = _useState[0],
+    setRecipientName = _useState[1];
+  var _useState2 = useState(''),
+    amount = _useState2[0],
+    setAmount = _useState2[1];
+  var _useState3 = useState(''),
+    validationError = _useState3[0],
+    setValidationError = _useState3[1];
+  var _useState4 = useState(false),
+    showConfirm = _useState4[0],
+    setShowConfirm = _useState4[1];
+  var clearResultTimerRef = useRef(null);
+  useEffect(function () {
+    if (transferResult) {
+      if (clearResultTimerRef.current) {
+        clearTimeout(clearResultTimerRef.current);
+      }
+      clearResultTimerRef.current = setTimeout(function () {
+        onClearTransferResult();
+      }, 5000);
+    }
+    return function () {
+      if (clearResultTimerRef.current) {
+        clearTimeout(clearResultTimerRef.current);
+      }
+    };
+  }, [transferResult]);
+  var validate = function validate() {
+    var parsedAmount = parseInt(amount, 10);
+    var trimmedRecipient = recipientName.trim();
+    if (!trimmedRecipient) {
+      setValidationError('Recipient name is required.');
+      return false;
+    }
+    if (characterName && trimmedRecipient.toLowerCase() === characterName.toLowerCase()) {
+      setValidationError('You cannot transfer DC to yourself.');
+      return false;
+    }
+    if (isNaN(parsedAmount) || parsedAmount <= 0 || !Number.isInteger(parsedAmount)) {
+      setValidationError('Amount must be a positive integer.');
+      return false;
+    }
+    if (parsedAmount > dcBalance) {
+      setValidationError('Insufficient DC balance.');
+      return false;
+    }
+    setValidationError('');
+    return true;
+  };
+  var handleSendClick = useCallback(function () {
+    if (!validate()) return;
+    setShowConfirm(true);
+  }, [recipientName, amount, dcBalance, characterName]);
+  var handleConfirmTransfer = useCallback(function () {
+    setShowConfirm(false);
+    onSendTransfer(recipientName.trim(), parseInt(amount, 10));
+    setRecipientName('');
+    setAmount('');
+  }, [recipientName, amount, onSendTransfer]);
+  return React.createElement(PanelContainer$1, null, React.createElement(FieldLabel, null, "Recipient Character Name"), React.createElement(StyledInput, {
+    type: "text",
+    value: recipientName,
+    onChange: function onChange(e) {
+      return setRecipientName(e.target.value);
+    },
+    onFocus: onInputFocus,
+    onBlur: onInputBlur,
+    placeholder: "Enter character name",
+    disabled: transferLoading
+  }), React.createElement(FieldLabel, null, "Amount (DC)"), React.createElement(StyledInput, {
+    type: "number",
+    min: 1,
+    value: amount,
+    onChange: function onChange(e) {
+      return setAmount(e.target.value);
+    },
+    onFocus: onInputFocus,
+    onBlur: onInputBlur,
+    placeholder: "0",
+    disabled: transferLoading
+  }), validationError && React.createElement(ErrorMessage, null, validationError), React.createElement(ButtonRow, null, React.createElement(CTAButton, {
+    icon: React.createElement(FaPaperPlane, null),
+    label: transferLoading ? 'Sending...' : 'Send',
+    onClick: handleSendClick,
+    disabled: transferLoading,
+    fullWidth: true
+  })), transferLoading && React.createElement(Spinner$1, null), transferResult && React.createElement(ResultMessage, {
+    "$success": transferResult.success
+  }, transferResult.message), showConfirm && React.createElement(ConfirmModal, {
+    message: "Transfer " + parseInt(amount, 10) + " DC to \"" + recipientName.trim() + "\"?",
+    onConfirm: handleConfirmTransfer,
+    onClose: function onClose() {
+      return setShowConfirm(false);
+    }
+  }));
+};
+var PanelContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCTransferPanel__PanelContainer",
+  componentId: "sc-k1vvb1-0"
+})(["display:flex;flex-direction:column;gap:8px;padding:8px 0;"]);
+var FieldLabel = /*#__PURE__*/styled.label.withConfig({
+  displayName: "DCTransferPanel__FieldLabel",
+  componentId: "sc-k1vvb1-1"
+})(["font-size:9px;color:#f59e0b;font-family:'Press Start 2P',cursive;margin-top:8px;"]);
+var StyledInput = /*#__PURE__*/styled(Input).withConfig({
+  displayName: "DCTransferPanel__StyledInput",
+  componentId: "sc-k1vvb1-2"
+})(["background:rgba(0,0,0,0.6);border:1px solid #f59e0b;color:", ";padding:6px 8px;font-size:12px;font-family:'Press Start 2P',cursive;width:100%;box-sizing:border-box;&:disabled{opacity:0.5;}&:focus{outline:none;border-color:", ";}"], uiColors.white, uiColors.white);
+var ButtonRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCTransferPanel__ButtonRow",
+  componentId: "sc-k1vvb1-3"
+})(["margin-top:8px;"]);
+var Spinner$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCTransferPanel__Spinner",
+  componentId: "sc-k1vvb1-4"
+})(["border:3px solid rgba(255,255,255,0.2);border-radius:50%;border-top:3px solid #f59e0b;width:24px;height:24px;animation:spin 0.8s linear infinite;margin:8px auto 0;@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"]);
+var ResultMessage = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCTransferPanel__ResultMessage",
+  componentId: "sc-k1vvb1-5"
+})(["margin-top:8px;padding:8px;font-size:9px;font-family:'Press Start 2P',cursive;color:", ";border:1px solid ", ";background:rgba(0,0,0,0.4);text-align:center;"], function (_ref2) {
+  var $success = _ref2.$success;
+  return $success ? uiColors.green : uiColors.red;
+}, function (_ref3) {
+  var $success = _ref3.$success;
+  return $success ? uiColors.green : uiColors.red;
+});
+var ErrorMessage = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCTransferPanel__ErrorMessage",
+  componentId: "sc-k1vvb1-6"
+})(["font-size:9px;color:", ";font-family:'Press Start 2P',cursive;"], uiColors.red);
+
+var DCWalletModal = function DCWalletModal(_ref) {
+  var _historyData$transact, _historyData$totalPag, _historyData$currentP;
+  var dcBalance = _ref.dcBalance,
+    onClose = _ref.onClose,
+    historyData = _ref.historyData,
+    historyLoading = _ref.historyLoading,
+    onRequestHistory = _ref.onRequestHistory,
+    transferLoading = _ref.transferLoading,
+    transferResult = _ref.transferResult,
+    onSendTransfer = _ref.onSendTransfer,
+    onClearTransferResult = _ref.onClearTransferResult,
+    characterName = _ref.characterName,
+    onInputFocus = _ref.onInputFocus,
+    onInputBlur = _ref.onInputBlur;
+  var _useState = useState('balance'),
+    activeTab = _useState[0],
+    setActiveTab = _useState[1];
+  var stopPropagation = useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var tabs = [{
+    id: 'balance',
+    title: 'Balance',
+    content: React.createElement(BalanceContent, null, React.createElement(BalanceLabel, null, "Your DC Balance"), React.createElement(BalanceAmount, null, dcBalance.toLocaleString(), " DC"), React.createElement(BalanceHint, null, "Buy DC packs from the Store > Packs tab."))
+  }, {
+    id: 'transfer',
+    title: 'Transfer',
+    content: React.createElement(DCTransferPanel, {
+      dcBalance: dcBalance,
+      transferLoading: transferLoading,
+      transferResult: transferResult,
+      onSendTransfer: onSendTransfer,
+      onClearTransferResult: onClearTransferResult,
+      characterName: characterName,
+      onInputFocus: onInputFocus,
+      onInputBlur: onInputBlur
+    })
+  }, {
+    id: 'history',
+    title: 'History',
+    content: React.createElement(DCHistoryPanel, {
+      transactions: (_historyData$transact = historyData == null ? void 0 : historyData.transactions) != null ? _historyData$transact : [],
+      totalPages: (_historyData$totalPag = historyData == null ? void 0 : historyData.totalPages) != null ? _historyData$totalPag : 0,
+      currentPage: (_historyData$currentP = historyData == null ? void 0 : historyData.currentPage) != null ? _historyData$currentP : 1,
+      loading: historyLoading,
+      onRequestHistory: onRequestHistory
+    })
+  }];
+  return React.createElement(ModalPortal, null, React.createElement(Overlay$1, {
+    onPointerDown: onClose
+  }), React.createElement(ModalContainer$1, null, React.createElement(ModalContent$1, {
+    onClick: stopPropagation,
+    onTouchStart: stopPropagation,
+    onPointerDown: stopPropagation
+  }, React.createElement(Header$2, null, React.createElement(Title$3, null, "DC Wallet"), React.createElement(CloseButton$4, {
+    onPointerDown: onClose,
+    "aria-label": "Close"
+  }, React.createElement(FaTimes, null))), React.createElement(WalletContainer, null, React.createElement(InternalTabs, {
+    tabs: tabs,
+    activeTab: activeTab,
+    onTabChange: function onTabChange(tabId) {
+      return setActiveTab(tabId);
+    },
+    activeTextColor: "#000000",
+    activeColor: "#fef08a",
+    inactiveColor: "#6b7280",
+    borderColor: "#f59e0b",
+    hoverColor: "#fef3c7"
+  })))));
+};
+var Overlay$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCWalletModal__Overlay",
+  componentId: "sc-12xy88y-0"
+})(["position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1000;"]);
+var ModalContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCWalletModal__ModalContainer",
+  componentId: "sc-12xy88y-1"
+})(["position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;"]);
+var ModalContent$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCWalletModal__ModalContent",
+  componentId: "sc-12xy88y-2"
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:16px 20px 20px;min-width:400px;max-width:90%;display:flex;flex-direction:column;gap:12px;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$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCWalletModal__Header",
+  componentId: "sc-12xy88y-3"
+})(["display:flex;align-items:center;justify-content:space-between;"]);
+var Title$3 = /*#__PURE__*/styled.h3.withConfig({
+  displayName: "DCWalletModal__Title",
+  componentId: "sc-12xy88y-4"
+})(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
+var CloseButton$4 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "DCWalletModal__CloseButton",
+  componentId: "sc-12xy88y-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 WalletContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCWalletModal__WalletContainer",
+  componentId: "sc-12xy88y-6"
+})(["display:flex;flex-direction:column;width:100%;min-height:300px;gap:0.5rem;"]);
+var BalanceContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DCWalletModal__BalanceContent",
+  componentId: "sc-12xy88y-7"
+})(["display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 16px;"]);
+var BalanceLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "DCWalletModal__BalanceLabel",
+  componentId: "sc-12xy88y-8"
+})(["font-family:'Press Start 2P',cursive;font-size:10px;color:", ";"], uiColors.lightGray);
+var BalanceAmount = /*#__PURE__*/styled.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.span.withConfig({
+  displayName: "DCWalletModal__BalanceHint",
+  componentId: "sc-12xy88y-10"
+})(["font-family:'Press Start 2P',cursive;font-size:7px;color:", ";"], uiColors.lightGray);
+
 var SimpleProgressBar = function SimpleProgressBar(_ref) {
   var value = _ref.value,
     _ref$bgColor = _ref.bgColor,
@@ -30193,7 +30848,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
   // Ensure the width is at least 1% if value is greater than 0, capped at 99.99%
   var width = value > 0 ? Math.max(1, Math.min(99.99, value)) : 0;
-  return React.createElement(Container$j, {
+  return React.createElement(Container$k, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -30202,7 +30857,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
+var Container$k = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -30254,7 +30909,7 @@ var LoginStreakPanel = function LoginStreakPanel(_ref) {
     onCloseButton: onClose,
     type: RPGUIContainerTypes.Framed,
     width: isMobile ? '90vw' : '380px'
-  }, React.createElement(Container$k, null, React.createElement(StreakHeader, null, React.createElement(StreakDay, null, streak === 1 && !isConsecutive ? 'Day 1 — Fresh Start!' : "Day " + streak + " Streak!"), React.createElement(LongestStreak, null, "Longest: ", longestStreak, " days")), React.createElement(XPBonusSection, null, React.createElement(XPBonusLabel, null, "XP Bonus: ", React.createElement(XPBonusValue, {
+  }, React.createElement(Container$l, null, React.createElement(StreakHeader, null, React.createElement(StreakDay, null, streak === 1 && !isConsecutive ? 'Day 1 — Fresh Start!' : "Day " + streak + " Streak!"), React.createElement(LongestStreak, null, "Longest: ", longestStreak, " days")), React.createElement(XPBonusSection, null, React.createElement(XPBonusLabel, null, "XP Bonus: ", React.createElement(XPBonusValue, {
     isMax: isMaxBonus
   }, "+", xpBonusPercent, "%"), isMaxBonus && React.createElement(MaxTag, null, " MAX")), React.createElement(SimpleProgressBar, {
     value: maxXpBonusPercent > 0 ? xpBonusPercent / maxXpBonusPercent * 100 : 0,
@@ -30271,7 +30926,7 @@ var LoginStreakPanel = function LoginStreakPanel(_ref) {
     }, milestone.reached ? '✓' : '○'));
   })), React.createElement(MotivationalText, null, getMotivationalText(streak, isConsecutive, milestones))));
 };
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "LoginStreakPanel__Container",
   componentId: "sc-1eiinkh-0"
 })(["display:flex;flex-direction:column;gap:8px;padding:4px 14px 14px;color:", ";width:100%;box-sizing:border-box;hr.golden{margin:4px 0;}"], uiColors.white);
@@ -30709,7 +31364,7 @@ var DraggedItem = function DraggedItem(_ref) {
   var centeredX = x - OFFSET$1;
   var centeredY = y - OFFSET$1;
   var stackInfo = onRenderStackInfo((_item$_id = item == null ? void 0 : item._id) != null ? _item$_id : '', (_item$stackQty = item == null ? void 0 : item.stackQty) != null ? _item$stackQty : 0);
-  return React.createElement(Container$l, null, React.createElement(SpriteContainer, {
+  return React.createElement(Container$m, null, React.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React.createElement(SpriteFromAtlas, {
@@ -30727,7 +31382,7 @@ var DraggedItem = function DraggedItem(_ref) {
   }), stackInfo));
 };
 var pulse = "\n  @keyframes pulse {\n    0%, 100% {\n      transform: scale(1) rotate(-3deg);\n    }\n    50% {\n      transform: scale(0.95) rotate(-3deg);\n    }\n  }\n";
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -30764,7 +31419,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', handleClickOutside);
     };
   }, [handleClickOutside]);
-  return React.createElement(ModalPortal, null, React.createElement(Container$m, Object.assign({
+  return React.createElement(ModalPortal, null, React.createElement(Container$n, Object.assign({
     fontSize: fontSize,
     ref: ref
   }, pos), React.createElement("ul", {
@@ -30781,7 +31436,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   }))));
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__PURE__*/styled.div.withConfig({
   displayName: "RelativeListMenu__Container",
   componentId: "sc-7hohf-0"
 })(["position:absolute;top:", "px;left:", "px;display:flex;flex-direction:column;width:max-content;justify-content:start;align-items:flex-start;li{font-size:", "em;}"], function (props) {
@@ -30968,78 +31623,6 @@ var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1wuddg2-1"
 })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
 
-var UI_BREAKPOINT_MOBILE = '950px';
-var UI_BREAKPOINT_SMALL_LAPTOP = '1400px';
-
-var InternalTabs = function InternalTabs(_ref) {
-  var _tabs$, _tabs$find;
-  var tabs = _ref.tabs,
-    _ref$activeColor = _ref.activeColor,
-    activeColor = _ref$activeColor === void 0 ? '#fef08a' : _ref$activeColor,
-    _ref$activeTextColor = _ref.activeTextColor,
-    activeTextColor = _ref$activeTextColor === void 0 ? '#000000' : _ref$activeTextColor,
-    _ref$inactiveColor = _ref.inactiveColor,
-    inactiveColor = _ref$inactiveColor === void 0 ? '#6b7280' : _ref$inactiveColor,
-    _ref$borderColor = _ref.borderColor,
-    borderColor = _ref$borderColor === void 0 ? '#f59e0b' : _ref$borderColor,
-    _ref$hoverColor = _ref.hoverColor,
-    hoverColor = _ref$hoverColor === void 0 ? '#fef3c7' : _ref$hoverColor,
-    onTabChange = _ref.onTabChange,
-    externalActiveTab = _ref.activeTab;
-  var _useState = useState((_tabs$ = tabs[0]) == null ? void 0 : _tabs$.id),
-    internalActiveTab = _useState[0],
-    setInternalActiveTab = _useState[1];
-  var activeTabId = externalActiveTab != null ? externalActiveTab : internalActiveTab;
-  var handleTabClick = function handleTabClick(tabId) {
-    setInternalActiveTab(tabId);
-    onTabChange == null ? void 0 : onTabChange(tabId);
-  };
-  return React.createElement(TableWrapper, null, React.createElement(TabHeader, {
-    borderColor: borderColor
-  }, tabs.map(function (tab) {
-    return React.createElement(TabButton, {
-      key: tab.id,
-      active: activeTabId === tab.id,
-      activeColor: activeColor,
-      activeTextColor: activeTextColor,
-      inactiveColor: inactiveColor,
-      borderColor: borderColor,
-      hoverColor: hoverColor,
-      onClick: function onClick() {
-        return handleTabClick(tab.id);
-      }
-    }, tab.title);
-  })), React.createElement(ContentWrapper, null, (_tabs$find = tabs.find(function (tab) {
-    return tab.id === activeTabId;
-  })) == null ? void 0 : _tabs$find.content));
-};
-var TableWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InternalTabs__TableWrapper",
-  componentId: "sc-ldufv0-0"
-})(["width:100%;"]);
-var TabHeader = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InternalTabs__TabHeader",
-  componentId: "sc-ldufv0-1"
-})(["display:flex;border-bottom:1px solid ", ";"], function (props) {
-  return props.borderColor;
-});
-var TabButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "InternalTabs__TabButton",
-  componentId: "sc-ldufv0-2"
-})(["flex:1;padding:0.25rem 0.5rem;font-size:0.75rem;font-weight:500;border-right:1px solid ", ";background-color:", ";color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;@media (min-width:480px){padding:0.375rem 0.75rem;font-size:0.8125rem;}@media (min-width:", "){padding:0.5rem 1rem;font-size:0.875rem;}&:last-child{border-right:none;}&:hover{background-color:", ";}"], function (props) {
-  return props.borderColor;
-}, function (props) {
-  return props.active ? props.activeColor : 'transparent';
-}, function (props) {
-  return props.active ? props.activeTextColor : props.inactiveColor;
-}, UI_BREAKPOINT_MOBILE, function (props) {
-  return props.active ? props.activeColor : props.hoverColor;
-});
-var ContentWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "InternalTabs__ContentWrapper",
-  componentId: "sc-ldufv0-3"
-})(["width:100%;"]);
-
 var Table = /*#__PURE__*/styled.table.withConfig({
   displayName: "Table",
   componentId: "sc-1c24pcj-0"
@@ -31204,7 +31787,7 @@ var FriendRequestSection = function FriendRequestSection(_ref3) {
         return onReject(character);
       }
     }, "Reject")));
-  })) : React.createElement(EmptyMessage, null, "No pending friend requests"));
+  })) : React.createElement(EmptyMessage$1, null, "No pending friend requests"));
 };
 // Styled components for FriendList UI
 var ListWrapper = /*#__PURE__*/styled.div.withConfig({
@@ -31246,7 +31829,7 @@ var AcceptRejectActions = /*#__PURE__*/styled.div.withConfig({
   displayName: "FriendList__AcceptRejectActions",
   componentId: "sc-3jf9vt-8"
 })(["display:flex;gap:0.5rem;"]);
-var EmptyMessage = /*#__PURE__*/styled.p.withConfig({
+var EmptyMessage$1 = /*#__PURE__*/styled.p.withConfig({
   displayName: "FriendList__EmptyMessage",
   componentId: "sc-3jf9vt-9"
 })(["text-align:center;color:#888;padding:1rem;font-size:", ";"], uiFonts.size.small);
@@ -31346,7 +31929,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$n, null, React.createElement(DynamicText, {
+  return React.createElement(Container$o, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -31364,7 +31947,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$n = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -31516,7 +32099,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React.createElement(Container$o, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$p, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -31526,7 +32109,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$o = /*#__PURE__*/styled.div.withConfig({
+var Container$p = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestionDialog__Container",
   componentId: "sc-bxc5u0-0"
 })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -31587,7 +32170,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$p, null, React.createElement(CloseIcon, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$q, null, React.createElement(CloseIcon, {
     onPointerDown: _onClose
   }, "X"), React.createElement(TextContainer$1, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
@@ -31603,7 +32186,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$q = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__Container",
   componentId: "sc-1b4aw74-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -31664,7 +32247,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$q, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
+  }, React.createElement(React.Fragment, null, React.createElement(Container$r, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer$2, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -31706,7 +32289,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$q = /*#__PURE__*/styled.div.withConfig({
+var Container$r = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCMultiDialog__Container",
   componentId: "sc-rvu5wg-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -31855,7 +32438,7 @@ var ImageCarousel = function ImageCarousel(_ref) {
     onPointerDown: function onPointerDown() {
       return goToNextImage();
     }
-  }))), onCloseButton && React.createElement(CloseButton$4, {
+  }))), onCloseButton && React.createElement(CloseButton$5, {
     className: "container-close",
     onPointerDown: onCloseButton
   }, "X"));
@@ -31886,7 +32469,7 @@ var Description$1 = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.isTextFixed ? 'none' : 'rgba(0, 0, 0, 0.6)';
 });
-var CloseButton$4 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ImageCarousel__CloseButton",
   componentId: "sc-jl6f8-4"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;@media (max-width:950px){font-size:1.7rem;padding:12px;}"]);
@@ -32068,48 +32651,6 @@ var usePagination = function usePagination(_ref) {
   };
 };
 
-var Pagination = function Pagination(_ref) {
-  var currentPage = _ref.currentPage,
-    totalPages = _ref.totalPages,
-    onPageChange = _ref.onPageChange,
-    className = _ref.className;
-  return React.createElement(Container$r, {
-    className: className
-  }, React.createElement(PaginationButton$1, {
-    onClick: function onClick() {
-      return onPageChange(Math.max(1, currentPage - 1));
-    },
-    disabled: currentPage === 1
-  }, React.createElement(FaChevronLeft, {
-    size: 12
-  })), React.createElement(PageInfo$1, null, "Page ", currentPage, " of ", totalPages), React.createElement(PaginationButton$1, {
-    onClick: function onClick() {
-      return onPageChange(Math.min(totalPages, currentPage + 1));
-    },
-    disabled: currentPage === totalPages
-  }, React.createElement(FaChevronRight, {
-    size: 12
-  })));
-};
-var Container$r = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Pagination__Container",
-  componentId: "sc-3k4m4u-0"
-})(["display:flex;align-items:center;justify-content:center;gap:16px;padding:8px;"]);
-var PaginationButton$1 = /*#__PURE__*/styled.button.withConfig({
-  displayName: "Pagination__PaginationButton",
-  componentId: "sc-3k4m4u-1"
-})(["background:none;border:none;color:", ";cursor:", ";opacity:", ";padding:4px;display:flex;align-items:center;justify-content:center;transition:opacity 0.2s;&:hover:not(:disabled){opacity:1;}"], function (props) {
-  return props.disabled ? uiColors.darkGray : uiColors.yellow;
-}, function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
-}, function (props) {
-  return props.disabled ? 0.5 : 0.8;
-});
-var PageInfo$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Pagination__PageInfo",
-  componentId: "sc-3k4m4u-2"
-})(["color:", ";font-size:0.8rem;font-family:'Press Start 2P',cursive;"], uiColors.lightGray);
-
 var SearchHeader$1 = function SearchHeader(_ref) {
   var searchOptions = _ref.searchOptions,
     filterOptions = _ref.filterOptions,
@@ -32204,7 +32745,7 @@ var PaginatedContent = function PaginatedContent(_ref) {
   }, (searchOptions || filterOptions) && React.createElement(SearchHeader$1, {
     searchOptions: searchOptions,
     filterOptions: filterOptions
-  }), items.length === 0 ? React.createElement(EmptyMessage$1, null, emptyMessage) : React.createElement(React.Fragment, null, React.createElement(Content, {
+  }), items.length === 0 ? React.createElement(EmptyMessage$2, null, emptyMessage) : React.createElement(React.Fragment, null, React.createElement(Content, {
     className: "PaginatedContent-content " + layout,
     "$gridColumns": gridColumns,
     "$itemHeight": itemHeight
@@ -32240,7 +32781,7 @@ var PaginationContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaginatedContent__PaginationContainer",
   componentId: "sc-lzp9hn-2"
 })(["display:flex;justify-content:center;padding:0.5rem;@media (min-width:480px){padding:1rem;}"]);
-var EmptyMessage$1 = /*#__PURE__*/styled.div.withConfig({
+var EmptyMessage$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaginatedContent__EmptyMessage",
   componentId: "sc-lzp9hn-3"
 })(["text-align:center;color:#9ca3af;padding:2rem;flex:1;display:flex;align-items:center;justify-content:center;"]);
@@ -32343,24 +32884,24 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     atlasIMG = _ref.atlasIMG,
     onBack = _ref.onBack,
     children = _ref.children;
-  return React.createElement(Container$t, null, React.createElement(Overlay, {
+  return React.createElement(Container$t, null, React.createElement(Overlay$2, {
     onClick: onBack
-  }), React.createElement(Modal, null, React.createElement(CloseButton$5, {
+  }), React.createElement(Modal, null, React.createElement(CloseButton$6, {
     onClick: onBack
-  }, React.createElement(FaTimes, null)), React.createElement(Header$2, null, React.createElement(SpriteContainer$2, null, React.createElement(SpriteFromAtlas, {
+  }, React.createElement(FaTimes, null)), React.createElement(Header$3, null, React.createElement(SpriteContainer$2, null, React.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: spriteKey,
     width: 32,
     height: 32,
     imgScale: 1
-  })), React.createElement(Title$3, null, name)), React.createElement(Content$1, null, children)));
+  })), React.createElement(Title$4, null, name)), React.createElement(Content$1, null, children)));
 };
 var Container$t = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Container",
   componentId: "sc-1vguuz8-0"
 })(["position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:9999;"]);
-var Overlay = /*#__PURE__*/styled.div.withConfig({
+var Overlay$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Overlay",
   componentId: "sc-1vguuz8-1"
 })(["position:fixed;inset:0;background-color:rgba(0,0,0,0.8);"]);
@@ -32368,11 +32909,11 @@ var Modal = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Modal",
   componentId: "sc-1vguuz8-2"
 })(["position:relative;background-color:rgba(0,0,0,0.95);border-radius:4px;padding:12px;overflow:hidden;z-index:1;font-family:'Press Start 2P',cursive;border:1px solid ", ";box-shadow:0 2px 4px rgba(0,0,0,0.2);width:90%;height:90vh;max-width:800px;max-height:800px;@media (max-width:768px){width:100%;height:100%;border-radius:0;padding:8px;}&::-webkit-scrollbar{width:2px;}&::-webkit-scrollbar-track{background:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:4px;opacity:0.5;&:hover{opacity:1;}}scrollbar-width:thin;scrollbar-color:", " transparent;"], uiColors.darkGray, uiColors.yellow, uiColors.yellow);
-var CloseButton$5 = /*#__PURE__*/styled.button.withConfig({
+var CloseButton$6 = /*#__PURE__*/styled.button.withConfig({
   displayName: "BaseInformationDetails__CloseButton",
   componentId: "sc-1vguuz8-3"
 })(["position:absolute;top:20px;right:20px;background:none;border:none;color:", ";font-size:1.2rem;cursor:pointer;padding:0;z-index:1;transition:transform 0.2s ease;&:hover{transform:scale(1.1);}"], uiColors.yellow);
-var Header$2 = /*#__PURE__*/styled.div.withConfig({
+var Header$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Header",
   componentId: "sc-1vguuz8-4"
 })(["display:flex;align-items:center;gap:16px;margin-bottom:24px;"]);
@@ -32380,7 +32921,7 @@ var Content$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "BaseInformationDetails__Content",
   componentId: "sc-1vguuz8-5"
 })(["display:flex;flex-direction:column;gap:12px;height:calc(100% - 80px);overflow-y:auto;overflow-x:hidden;padding-right:6px;margin-right:-6px;@media (max-width:768px){height:calc(100% - 64px);gap:8px;padding-right:4px;margin-right:-4px;}"]);
-var Title$3 = /*#__PURE__*/styled.h2.withConfig({
+var Title$4 = /*#__PURE__*/styled.h2.withConfig({
   displayName: "BaseInformationDetails__Title",
   componentId: "sc-1vguuz8-6"
 })(["color:", ";font-size:1rem;margin:0;"], uiColors.yellow);
@@ -32400,21 +32941,21 @@ var Collapsible = function Collapsible(_ref) {
     setIsOpen = _useState[1];
   return React.createElement(Container$u, {
     className: className
-  }, React.createElement(Header$3, {
+  }, React.createElement(Header$4, {
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     }
-  }, React.createElement(Title$4, null, title), React.createElement(Icon$1, null, isOpen ? React.createElement(FaChevronUp, null) : React.createElement(FaChevronDown, null))), isOpen && React.createElement(Content$2, null, children));
+  }, React.createElement(Title$5, null, title), React.createElement(Icon$1, null, isOpen ? React.createElement(FaChevronUp, null) : React.createElement(FaChevronDown, null))), isOpen && React.createElement(Content$2, null, children));
 };
 var Container$u = /*#__PURE__*/styled.div.withConfig({
   displayName: "Collapsible__Container",
   componentId: "sc-s4h8ey-0"
 })(["background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;border:1px solid ", ";"], uiColors.darkGray);
-var Header$3 = /*#__PURE__*/styled.div.withConfig({
+var Header$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Collapsible__Header",
   componentId: "sc-s4h8ey-1"
 })(["padding:10px 12px;background:rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background-color 0.2s ease;&:hover{background:rgba(0,0,0,0.4);}"]);
-var Title$4 = /*#__PURE__*/styled.h3.withConfig({
+var Title$5 = /*#__PURE__*/styled.h3.withConfig({
   displayName: "Collapsible__Title",
   componentId: "sc-s4h8ey-2"
 })(["margin:0;font-size:0.6rem;color:", ";font-family:'Press Start 2P',cursive;letter-spacing:0.5px;"], uiColors.yellow);
@@ -32752,7 +33293,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       return rangeValue[0] !== undefined || rangeValue[1] !== undefined;
     }
     return section.value !== 'all';
-  }).length)), isOpen && React.createElement(Portal, null, isMobile && React.createElement(Overlay$1, null), React.createElement(FiltersPanel, {
+  }).length)), isOpen && React.createElement(Portal, null, isMobile && React.createElement(Overlay$3, null), React.createElement(FiltersPanel, {
     ref: panelRef,
     style: {
       position: 'fixed',
@@ -32761,7 +33302,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       zIndex: 9999
     },
     "$isMobile": isMobile
-  }, React.createElement(FilterHeader, null, React.createElement(FilterTitle, null, "Advanced Filters"), React.createElement(CloseButton$6, {
+  }, React.createElement(FilterHeader, null, React.createElement(FilterTitle, null, "Advanced Filters"), React.createElement(CloseButton$7, {
     onClick: handleClose
   }, "\xD7")), sections.map(renderFilterSection), hasActiveFilters && React.createElement(ClearFiltersButton, {
     onClick: onClearAll
@@ -32809,7 +33350,7 @@ var FilterHeader = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__FilterHeader",
   componentId: "sc-1xj6ldr-4"
 })(["display:flex;align-items:center;justify-content:space-between;padding-bottom:0.75rem;margin-bottom:0.5rem;border-bottom:1px solid #333;"]);
-var Overlay$1 = /*#__PURE__*/styled.div.withConfig({
+var Overlay$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "AdvancedFilters__Overlay",
   componentId: "sc-1xj6ldr-5"
 })(["position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.6);z-index:9998;animation:fadeIn 0.2s ease-out;@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}"]);
@@ -32833,7 +33374,7 @@ var ClearFiltersButton = /*#__PURE__*/styled.button.withConfig({
   displayName: "AdvancedFilters__ClearFiltersButton",
   componentId: "sc-1xj6ldr-10"
 })(["width:100%;background:transparent;color:#666;border:none;padding:0.75rem 0;margin-top:0.5rem;cursor:pointer;font-size:0.65rem;transition:all 0.2s;border-top:1px solid #333;text-transform:uppercase;letter-spacing:0.05em;font-family:'Press Start 2P',cursive;&:hover{color:#ffd700;}"]);
-var CloseButton$6 = /*#__PURE__*/styled.button.withConfig({
+var CloseButton$7 = /*#__PURE__*/styled.button.withConfig({
   displayName: "AdvancedFilters__CloseButton",
   componentId: "sc-1xj6ldr-11"
 })(["background:transparent;border:none;color:#999;font-size:1.5rem;line-height:1;cursor:pointer;padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;&:hover{color:#ffd700;}"]);
@@ -33818,7 +34359,7 @@ var InformationCenter = function InformationCenter(_ref) {
     return React.createElement(LoadingMessage, null, "Loading...");
   }
   if (error) {
-    return React.createElement(ErrorMessage, null, error);
+    return React.createElement(ErrorMessage$1, null, error);
   }
   var tabs = [{
     id: 'bestiary',
@@ -33880,7 +34421,7 @@ var LoadingMessage = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenter__LoadingMessage",
   componentId: "sc-1ttl62e-1"
 })(["text-align:center;color:#ffffff;padding:2rem;"]);
-var ErrorMessage = /*#__PURE__*/styled.div.withConfig({
+var ErrorMessage$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "InformationCenter__ErrorMessage",
   componentId: "sc-1ttl62e-2"
 })(["text-align:center;color:#ef4444;padding:2rem;"]);
@@ -34175,7 +34716,7 @@ var QuantitySelector = function QuantitySelector(_ref) {
   return React.createElement(StyledContainer, {
     type: RPGUIContainerTypes.Framed,
     width: "25rem"
-  }, React.createElement(CloseButton$7, {
+  }, React.createElement(CloseButton$8, {
     className: "container-close",
     onPointerDown: onClose
   }, "X"), React.createElement("h2", null, title), React.createElement(StyledForm, {
@@ -34187,7 +34728,7 @@ var QuantitySelector = function QuantitySelector(_ref) {
       }
     },
     noValidate: true
-  }, React.createElement(StyledInput, {
+  }, React.createElement(StyledInput$1, {
     ref: inputRef,
     placeholder: "Enter quantity",
     type: "number",
@@ -34220,7 +34761,7 @@ var StyledContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
   displayName: "QuantitySelector__StyledContainer",
   componentId: "sc-z4ut57-0"
 })(["position:relative;display:flex;flex-direction:column;align-items:center;padding:1rem;h2{margin:0;margin-bottom:1rem;font-size:1rem;}"]);
-var CloseButton$7 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuantitySelector__CloseButton",
   componentId: "sc-z4ut57-1"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;cursor:pointer;"]);
@@ -34228,7 +34769,7 @@ var StyledForm = /*#__PURE__*/styled.form.withConfig({
   displayName: "QuantitySelector__StyledForm",
   componentId: "sc-z4ut57-2"
 })(["display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;"]);
-var StyledInput = /*#__PURE__*/styled.input.withConfig({
+var StyledInput$1 = /*#__PURE__*/styled.input.withConfig({
   displayName: "QuantitySelector__StyledInput",
   componentId: "sc-z4ut57-3"
 })(["width:100%;padding:0.5rem;background-color:rgba(0,0,0,0.25);border:none;color:white;font-size:1rem;text-align:center;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
@@ -34491,78 +35032,6 @@ var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   return isFullScreen && '50%';
 });
 
-// Global style to prevent body scrolling when modal is open
-var GlobalStyle = /*#__PURE__*/createGlobalStyle(["body{overflow:hidden;width:100%;height:100%;}"]);
-var ConfirmModal = function ConfirmModal(_ref) {
-  var onConfirm = _ref.onConfirm,
-    onClose = _ref.onClose,
-    _ref$message = _ref.message,
-    message = _ref$message === void 0 ? 'Are you sure?' : _ref$message;
-  var handleConfirm = useCallback(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    onConfirm();
-  }, [onConfirm]);
-  var handleClose = useCallback(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    onClose();
-  }, [onClose]);
-  // Fix type issues by separating event handlers for different event types
-  var stopPropagationClick = useCallback(function (e) {
-    e.stopPropagation();
-  }, []);
-  var stopPropagationTouch = useCallback(function (e) {
-    e.stopPropagation();
-  }, []);
-  var stopPropagationPointer = useCallback(function (e) {
-    e.stopPropagation();
-  }, []);
-  return React.createElement(ModalPortal, null, React.createElement(GlobalStyle, null), React.createElement(Overlay$2, {
-    onPointerDown: handleClose
-  }), React.createElement(ModalContainer, null, React.createElement(ModalContent, {
-    onClick: stopPropagationClick,
-    onTouchStart: stopPropagationTouch,
-    onTouchEnd: stopPropagationTouch,
-    onTouchMove: stopPropagationTouch,
-    onPointerDown: stopPropagationPointer
-  }, React.createElement(MessageContainer, null, typeof message === 'string' ? React.createElement(Message$1, null, message) : message), React.createElement(ButtonsContainer$2, null, React.createElement(CancelButtonWrapper, null, React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    onPointerDown: handleClose
-  }, "No")), React.createElement(Button, {
-    buttonType: ButtonTypes.RPGUIButton,
-    onPointerDown: handleConfirm
-  }, "Yes")))));
-};
-var Overlay$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ConfirmModal__Overlay",
-  componentId: "sc-11qkyu1-0"
-})(["position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.6);z-index:1000;animation:fadeIn 0.2s ease-out;cursor:pointer;touch-action:none;@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}"]);
-var ModalContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ConfirmModal__ModalContainer",
-  componentId: "sc-11qkyu1-1"
-})(["position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);"]);
-var ModalContent = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ConfirmModal__ModalContent",
-  componentId: "sc-11qkyu1-2"
-})(["background-color:#2a2a2a;border:2px solid #444;border-radius:8px;padding:20px;min-width:300px;max-width:90%;margin:0 auto;animation:scaleIn 0.2s ease-out;transform-origin:center;box-shadow:0 4px 20px rgba(0,0,0,0.5),0 0 40px rgba(0,0,0,0.3);pointer-events:auto;@keyframes scaleIn{from{transform:scale(0.8);opacity:0;}to{transform:scale(1);opacity:1;}}@media (max-width:768px){padding:25px;width:85%;}"]);
-var MessageContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ConfirmModal__MessageContainer",
-  componentId: "sc-11qkyu1-3"
-})(["margin-bottom:20px;text-align:center;"]);
-var Message$1 = /*#__PURE__*/styled.p.withConfig({
-  displayName: "ConfirmModal__Message",
-  componentId: "sc-11qkyu1-4"
-})(["margin:0;font-size:16px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.5);@media (max-width:768px){font-size:18px;}"]);
-var ButtonsContainer$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ConfirmModal__ButtonsContainer",
-  componentId: "sc-11qkyu1-5"
-})(["display:flex;justify-content:center;gap:20px;@media (max-width:768px){gap:30px;transform:scale(1.1);margin-top:5px;}"]);
-var CancelButtonWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ConfirmModal__CancelButtonWrapper",
-  componentId: "sc-11qkyu1-6"
-})(["filter:grayscale(0.7);"]);
-
 var ColorSelector = function ColorSelector(_ref) {
   var selectedColor = _ref.selectedColor,
     isOpen = _ref.isOpen,
@@ -34605,13 +35074,13 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "25rem",
     onCloseButton: onClose
-  }, React.createElement(Container$y, null, React.createElement(Header$4, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
+  }, React.createElement(Container$y, null, React.createElement(Header$5, null, "Select Color"), React.createElement(ColorPickerWrapper, null, React.createElement(HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
       _onChange(color);
     }
-  })), React.createElement(ButtonContainer$1, null, React.createElement(Button, {
+  })), React.createElement(ButtonContainer$2, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     type: "button",
     onClick: handleConfirm
@@ -34625,7 +35094,7 @@ var Container$y = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemPropertyColorSelector__Container",
   componentId: "sc-me1r4z-0"
 })(["text-align:center;background:inherit;display:flex;flex-direction:column;gap:1.5rem;align-items:center;width:100%;max-width:24rem;margin:0 auto;"]);
-var Header$4 = /*#__PURE__*/styled.h2.withConfig({
+var Header$5 = /*#__PURE__*/styled.h2.withConfig({
   displayName: "ItemPropertyColorSelector__Header",
   componentId: "sc-me1r4z-1"
 })(["color:white;font-size:1rem;margin:0;width:100%;text-align:center;"]);
@@ -34633,7 +35102,7 @@ var ColorPickerWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemPropertyColorSelector__ColorPickerWrapper",
   componentId: "sc-me1r4z-2"
 })(["display:flex;justify-content:center;width:100%;.react-colorful{width:100%;max-width:200px;}"]);
-var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
+var ButtonContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemPropertyColorSelector__ButtonContainer",
   componentId: "sc-me1r4z-3"
 })(["display:flex;justify-content:center;width:100%;"]);
@@ -34696,7 +35165,7 @@ var GemSelector = function GemSelector(_ref) {
     scale: scale,
     cancelDrag: ".gem-selector-container",
     onCloseButton: onClose
-  }, React.createElement(ContentWrapper$1, null, React.createElement(Header$5, null, React.createElement(Title$5, null, "GEM SELECTION"), React.createElement(Subtitle, null, "Select gems to detach")), React.createElement(GemGrid, null, (_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.map(function (gem, index) {
+  }, React.createElement(ContentWrapper$1, null, React.createElement(Header$6, null, React.createElement(Title$6, null, "GEM SELECTION"), React.createElement(Subtitle, null, "Select gems to detach")), React.createElement(GemGrid, null, (_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.map(function (gem, index) {
     return React.createElement(GemItem, {
       key: gem.key + "-" + index
     }, React.createElement(CheckItemWrapper$1, null, React.createElement(CheckItem, {
@@ -34727,7 +35196,7 @@ var GemSelector = function GemSelector(_ref) {
     disabled: selectedGems.length === 0
   }, "Confirm"))));
 };
-var Title$5 = /*#__PURE__*/styled.h1.withConfig({
+var Title$6 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "GemSelector__Title",
   componentId: "sc-gbt8g4-0"
 })(["font-size:0.8rem;color:", " !important;"], uiColors.yellow);
@@ -34735,7 +35204,7 @@ var Subtitle = /*#__PURE__*/styled.h2.withConfig({
   displayName: "GemSelector__Subtitle",
   componentId: "sc-gbt8g4-1"
 })(["font-size:0.6rem;color:", ";margin:0;"], uiColors.white);
-var Header$5 = /*#__PURE__*/styled.div.withConfig({
+var Header$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "GemSelector__Header",
   componentId: "sc-gbt8g4-2"
 })(["text-align:center;padding:5px;border-bottom:2px solid #444;"]);
@@ -34800,7 +35269,7 @@ var ItemSelector = function ItemSelector(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$6, null, 'Harvesting instruments'), React.createElement(Subtitle$1, null, 'Use the tool, you need it'), React.createElement("hr", {
+  }, React.createElement(Title$7, null, 'Harvesting instruments'), React.createElement(Subtitle$1, null, 'Use the tool, you need it'), React.createElement("hr", {
     className: "golden"
   })), React.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
     return React.createElement(RadioOptionsWrapper$1, {
@@ -34829,7 +35298,7 @@ var ItemSelector = function ItemSelector(_ref) {
     buttonType: ButtonTypes.RPGUIButton
   }, "Select")));
 };
-var Title$6 = /*#__PURE__*/styled.h1.withConfig({
+var Title$7 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "ItemSelector__Title",
   componentId: "sc-gptoxp-0"
 })(["font-size:0.6rem;color:yellow !important;"]);
@@ -35081,7 +35550,7 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     maxLines: 1,
     maxWidth: "200px",
     fontSize: "10px"
-  }, "$", itemPrice)))), React.createElement(ButtonContainer$2, null, React.createElement(Button, {
+  }, "$", itemPrice)))), React.createElement(ButtonContainer$3, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
     disabled: disabled,
     onPointerDown: function onPointerDown() {
@@ -35123,7 +35592,7 @@ var PriceValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__PriceValue",
   componentId: "sc-wmpr1o-7"
 })(["margin-left:40px;"]);
-var ButtonContainer$2 = /*#__PURE__*/styled.div.withConfig({
+var ButtonContainer$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__ButtonContainer",
   componentId: "sc-wmpr1o-8"
 })(["margin:auto;"]);
@@ -35700,7 +36169,7 @@ var PartyCreate = function PartyCreate(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$7, null, "Create Party"), React.createElement("hr", {
+  }, React.createElement(Title$8, null, "Create Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement("h1", null, "Type your party name"), React.createElement(Input, {
     placeholder: "Type party name",
@@ -35723,7 +36192,7 @@ var Wrapper$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$7 = /*#__PURE__*/styled.h1.withConfig({
+var Title$8 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -35772,7 +36241,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$8, null, "Party Dashboard"), React.createElement(Button, {
+  }, React.createElement(Title$9, null, "Party Dashboard"), React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton
   }, "Create"), React.createElement("hr", {
     className: "golden"
@@ -35799,7 +36268,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$8 = /*#__PURE__*/styled.h1.withConfig({
+var Title$9 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyDashboard__Title",
   componentId: "sc-16cm41r-2"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -35836,7 +36305,7 @@ var PartyInvite = function PartyInvite(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$9, null, "Invite for Party"), React.createElement("hr", {
+  }, React.createElement(Title$a, null, "Invite for Party"), React.createElement("hr", {
     className: "golden"
   }))), React.createElement(RowsWrapper$1, {
     className: "playersRows"
@@ -35855,7 +36324,7 @@ var Wrapper$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$9 = /*#__PURE__*/styled.h1.withConfig({
+var Title$a = /*#__PURE__*/styled.h1.withConfig({
   displayName: "PartyInvite__Title",
   componentId: "sc-eu8ggt-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -35892,7 +36361,7 @@ var PartyManagerRow = function PartyManagerRow(_ref) {
   }, charName, " ", isCurrentUser ? '(You)' : '', " ", isLeader ? '(Leader)' : '')), React.createElement(TextContainer$5, null, React.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "300px"
-  }, charClass)), React.createElement(ButtonContainer$3, null, canRemove && React.createElement(HighlightedText, {
+  }, charClass)), React.createElement(ButtonContainer$4, null, canRemove && React.createElement(HighlightedText, {
     onPointerDown: function onPointerDown() {
       return onRemovePlayer(id);
     }
@@ -35910,7 +36379,7 @@ var TextContainer$5 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyManagerRows__TextContainer",
   componentId: "sc-uqajew-1"
 })(["color:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;"], uiColors.white);
-var ButtonContainer$3 = /*#__PURE__*/styled.div.withConfig({
+var ButtonContainer$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "PartyManagerRows__ButtonContainer",
   componentId: "sc-uqajew-2"
 })(["display:flex;align-items:center;gap:1rem;justify-content:flex-start;"]);
@@ -36297,7 +36766,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React.createElement(QuestContainer, null, React.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React.createElement(Title$a, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$b, null, React.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -36316,7 +36785,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$a, null, React.createElement(Thumbnail, {
+  }, React.createElement(Title$b, null, React.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React.createElement(QuestSplitDiv, null, React.createElement("hr", {
     className: "golden"
@@ -36363,7 +36832,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$a = /*#__PURE__*/styled.h1.withConfig({
+var Title$b = /*#__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);
@@ -36503,76 +36972,6 @@ var RPGUIRoot = function RPGUIRoot(_ref) {
   }, children));
 };
 
-var CTAButton = function CTAButton(_ref) {
-  var icon = _ref.icon,
-    label = _ref.label,
-    onClick = _ref.onClick,
-    className = _ref.className,
-    _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-    _ref$textColor = _ref.textColor,
-    textColor = _ref$textColor === void 0 ? '#ffffff' : _ref$textColor,
-    _ref$iconColor = _ref.iconColor,
-    iconColor = _ref$iconColor === void 0 ? '#f59e0b' : _ref$iconColor,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  return React.createElement(ButtonContainer$4, {
-    className: className,
-    onPointerDown: disabled ? undefined : onClick,
-    "$fullWidth": fullWidth,
-    "$disabled": disabled,
-    "$color": textColor
-  }, React.createElement(ButtonContent, null, React.createElement(IconWrapper$1, {
-    "$color": iconColor,
-    "$disabled": disabled
-  }, icon), label && React.createElement(ButtonLabel, {
-    "$color": textColor,
-    "$disabled": disabled
-  }, label)));
-};
-var ButtonContainer$4 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CTAButton__ButtonContainer",
-  componentId: "sc-1azvwn5-0"
-})(["display:inline-flex;align-items:center;padding:0.75rem 1.25rem;background:rgba(0,0,0,0.3);border:2px solid #f59e0b;box-shadow:0 0 10px rgba(245,158,11,0.3);border-radius:4px;cursor:", ";transition:all 0.2s;position:relative;opacity:", ";color:", ";", " &:hover{background:", ";box-shadow:", ";transform:", ";}&:active{transform:", ";box-shadow:", ";}&:before{content:'';position:absolute;inset:-1px;border-radius:5px;padding:1px;background:linear-gradient(45deg,#f59e0b,#fbbf24,#f59e0b);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:destination-out;}"], function (props) {
-  return props.$disabled ? 'not-allowed' : 'pointer';
-}, function (props) {
-  return props.$disabled ? 0.5 : 1;
-}, function (props) {
-  return props.$disabled ? '#6b7280' : props.$color;
-}, function (props) {
-  return props.$fullWidth && css(["display:flex;justify-content:center;"]);
-}, function (props) {
-  return props.$disabled ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.4)';
-}, function (props) {
-  return props.$disabled ? '0 0 10px rgba(245, 158, 11, 0.3)' : '0 0 15px rgba(245, 158, 11, 0.4)';
-}, function (props) {
-  return props.$disabled ? 'none' : 'translateY(-1px)';
-}, function (props) {
-  return props.$disabled ? 'none' : 'translateY(1px)';
-}, function (props) {
-  return props.$disabled ? '0 0 10px rgba(245, 158, 11, 0.3)' : '0 0 5px rgba(245, 158, 11, 0.2)';
-});
-var ButtonContent = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CTAButton__ButtonContent",
-  componentId: "sc-1azvwn5-1"
-})(["display:flex;align-items:center;gap:0.75rem;"]);
-var IconWrapper$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CTAButton__IconWrapper",
-  componentId: "sc-1azvwn5-2"
-})(["svg{font-size:1.25rem;color:", ";filter:drop-shadow(0 0 2px rgba(245,158,11,0.5));opacity:", ";}"], function (props) {
-  return props.$color;
-}, function (props) {
-  return props.$disabled ? 0.5 : 1;
-});
-var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
-  displayName: "CTAButton__ButtonLabel",
-  componentId: "sc-1azvwn5-3"
-})(["color:", ";font-family:'Press Start 2P',cursive;font-size:0.875rem;text-shadow:0 0 4px rgba(245,158,11,0.5);opacity:", ";"], function (props) {
-  return props.$color;
-}, function (props) {
-  return props.$disabled ? 0.5 : 1;
-});
-
 var Shortcuts = function Shortcuts(_ref) {
   var shortcuts = _ref.shortcuts,
     onShortcutCast = _ref.onShortcutCast,
@@ -36961,7 +37360,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React.createElement(CloseButton$8, {
+  }, onCloseButton && React.createElement(CloseButton$9, {
     onPointerDown: onCloseButton
   }, "X"), React.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -36996,7 +37395,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$8 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$9 = /*#__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;"]);
@@ -37132,7 +37531,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$6, null, React.createElement("div", null, React.createElement(Title$b, 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$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", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -37162,7 +37561,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$b = /*#__PURE__*/styled.div.withConfig({
+var Title$c = /*#__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);
@@ -37174,7 +37573,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$6 = /*#__PURE__*/styled.div.withConfig({
+var Header$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -37390,7 +37789,7 @@ var Spell = function Spell(_ref) {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React.createElement(Overlay$3, 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$4, 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,
@@ -37399,7 +37798,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React.createElement(Info, null, React.createElement(Title$c, null, React.createElement("span", null, name), React.createElement("span", {
+  })), React.createElement(Info, null, React.createElement(Title$d, 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"
@@ -37420,7 +37819,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$c = /*#__PURE__*/styled.p.withConfig({
+var Title$d = /*#__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);
@@ -37436,7 +37835,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$3 = /*#__PURE__*/styled.p.withConfig({
+var Overlay$4 = /*#__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);
@@ -37485,7 +37884,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$J, null, React.createElement(Title$d, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$J, null, React.createElement(Title$e, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -37518,7 +37917,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$d = /*#__PURE__*/styled.h1.withConfig({
+var Title$e = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -57960,7 +58359,7 @@ var CartView = function CartView(_ref2) {
       return _ref3.apply(this, arguments);
     };
   }();
-  return React.createElement(Container$K, null, React.createElement(Header$7, null, React.createElement(Title$e, null, "Shopping Cart"), React.createElement(CloseButton$9, {
+  return React.createElement(Container$K, null, React.createElement(Header$8, null, React.createElement(Title$f, null, "Shopping Cart"), React.createElement(CloseButton$a, {
     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;
@@ -57988,7 +58387,7 @@ var CartView = function CartView(_ref2) {
         onRemoveFromCart(cartItem.item.key);
       }
     }));
-  })), React.createElement(Footer$1, null, React.createElement(TotalInfo, null, React.createElement(TotalRow, null, React.createElement("span", null, "Total:"), React.createElement("span", null, "$", formatPrice(total))), error && React.createElement(ErrorMessage$1, null, error)), React.createElement(CTAButton, {
+  })), React.createElement(Footer$1, null, React.createElement(TotalInfo, null, React.createElement(TotalRow, null, React.createElement("span", null, "Total:"), React.createElement("span", null, "$", formatPrice(total))), error && React.createElement(ErrorMessage$2, null, error)), React.createElement(CTAButton, {
     icon: React.createElement(FaShoppingBag, null),
     label: isLoading ? 'Processing...' : 'Complete Purchase',
     onClick: handlePurchase,
@@ -58000,15 +58399,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$7 = /*#__PURE__*/styled.div.withConfig({
+var Header$8 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__Header",
   componentId: "sc-ydtyl1-1"
 })(["display:flex;justify-content:space-between;align-items:center;"]);
-var Title$e = /*#__PURE__*/styled.h2.withConfig({
+var Title$f = /*#__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$9 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$a = /*#__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;"]);
@@ -58052,7 +58451,7 @@ var TotalRow = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__TotalRow",
   componentId: "sc-ydtyl1-13"
 })(["display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:'Press Start 2P',cursive;font-size:1rem;color:#ffffff;span:last-child{color:#fef08a;}"]);
-var ErrorMessage$1 = /*#__PURE__*/styled.div.withConfig({
+var ErrorMessage$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__ErrorMessage",
   componentId: "sc-ydtyl1-14"
 })(["color:#ef4444;font-size:0.875rem;font-family:'Press Start 2P',cursive;text-align:center;"]);
@@ -58350,7 +58749,7 @@ var ScrollableContent = function ScrollableContent(_ref) {
     _ref$maxHeight = _ref.maxHeight,
     maxHeight = _ref$maxHeight === void 0 ? '500px' : _ref$maxHeight;
   if (items.length === 0) {
-    return React.createElement(EmptyMessage$2, null, emptyMessage);
+    return React.createElement(EmptyMessage$3, null, emptyMessage);
   }
   return React.createElement(Container$L, {
     className: className
@@ -58409,7 +58808,7 @@ var Content$4 = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.$gridColumns;
 });
-var EmptyMessage$2 = /*#__PURE__*/styled.div.withConfig({
+var EmptyMessage$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ScrollableContent__EmptyMessage",
   componentId: "sc-xhh2um-8"
 })(["text-align:center;color:#9ca3af;padding:2rem;flex:1;display:flex;align-items:center;justify-content:center;"]);
@@ -58490,7 +58889,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$8, 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$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, {
     direction: "left",
     onPointerDown: handlePreviousSkin,
     size: 24
@@ -58542,7 +58941,7 @@ var SkinNavArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
   displayName: "StoreCharacterSkinRow__SkinNavArrow",
   componentId: "sc-81xqsx-7"
 })(["position:static;"]);
-var Header$8 = /*#__PURE__*/styled.div.withConfig({
+var Header$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreCharacterSkinRow__Header",
   componentId: "sc-81xqsx-8"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
@@ -58945,7 +59344,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$9, null, React.createElement(BackButton, {
+  return React.createElement(Container$M, null, React.createElement(Header$a, 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(),
@@ -58963,7 +59362,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$9 = /*#__PURE__*/styled.div.withConfig({
+var Header$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__Header",
   componentId: "sc-k3ho5z-1"
 })(["display:flex;align-items:center;gap:1rem;"]);
@@ -59131,7 +59530,7 @@ var Store = function Store(_ref) {
     return React.createElement(LoadingMessage$1, null, "Loading...");
   }
   if (error) {
-    return React.createElement(ErrorMessage$2, null, error);
+    return React.createElement(ErrorMessage$3, null, error);
   }
   // Build tabs dynamically based on props
   var tabIds = tabOrder != null ? tabOrder : ['premium', 'packs', 'items'];
@@ -59299,7 +59698,7 @@ var LoadingMessage$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__LoadingMessage",
   componentId: "sc-64dj00-8"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.white);
-var ErrorMessage$2 = /*#__PURE__*/styled.div.withConfig({
+var ErrorMessage$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__ErrorMessage",
   componentId: "sc-64dj00-9"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.red);
@@ -59322,13 +59721,13 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
       onPayWithCard();
     }
   }, [selected, onPayWithDC, onPayWithCard]);
-  return React.createElement(ModalPortal, null, React.createElement(Overlay$4, {
+  return React.createElement(ModalPortal, null, React.createElement(Overlay$5, {
     onPointerDown: onClose
-  }), React.createElement(ModalContainer$1, null, React.createElement(ModalContent$1, {
+  }), React.createElement(ModalContainer$2, null, React.createElement(ModalContent$2, {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React.createElement(Header$a, null, React.createElement(Title$f, null, "How would you like to pay?"), React.createElement(CloseButton$a, {
+  }, React.createElement(Header$b, null, React.createElement(Title$g, null, "How would you like to pay?"), React.createElement(CloseButton$b, {
     onPointerDown: onClose,
     "aria-label": "Close"
   }, React.createElement(FaTimes, null))), React.createElement(Options, null, React.createElement(RadioOption, {
@@ -59350,27 +59749,27 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
     onPointerDown: handleConfirm
   }, "Confirm")))));
 };
-var Overlay$4 = /*#__PURE__*/styled.div.withConfig({
+var Overlay$5 = /*#__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$1 = /*#__PURE__*/styled.div.withConfig({
+var ModalContainer$2 = /*#__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$1 = /*#__PURE__*/styled.div.withConfig({
+var ModalContent$2 = /*#__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$a = /*#__PURE__*/styled.div.withConfig({
+var Header$b = /*#__PURE__*/styled.div.withConfig({
   displayName: "PaymentMethodModal__Header",
   componentId: "sc-1dxy6lr-3"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
-var Title$f = /*#__PURE__*/styled.h3.withConfig({
+var Title$g = /*#__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$a = /*#__PURE__*/styled.button.withConfig({
+var CloseButton$b = /*#__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;}"]);
@@ -59449,7 +59848,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$b, {
+  }, React.createElement(WidgetContainer, null, React.createElement(CloseButton$c, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React.createElement(DayNightContainer, {
@@ -59466,7 +59865,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$b = /*#__PURE__*/styled.p.withConfig({
+var CloseButton$c = /*#__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);
@@ -59745,7 +60144,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React.createElement(Container$O, null, React.createElement(Title$g, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
+  }, React.createElement(Container$O, null, React.createElement(Title$h, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React.createElement("hr", {
     className: "golden"
   }), React.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -59777,7 +60176,7 @@ var Container$O = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$g = /*#__PURE__*/styled.h1.withConfig({
+var Title$h = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -59957,5 +60356,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, 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, 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