@rpg-engine/long-bow 0.8.135 → 0.8.136

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

@@ -30192,6 +30192,661 @@ var TaskTitle$1 = /*#__PURE__*/styled__default.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 = React.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__default.createElement(TableWrapper, null, React__default.createElement(TabHeader, {
+    borderColor: borderColor
+  }, tabs.map(function (tab) {
+    return React__default.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__default.createElement(ContentWrapper, null, (_tabs$find = tabs.find(function (tab) {
+    return tab.id === activeTabId;
+  })) == null ? void 0 : _tabs$find.content));
+};
+var TableWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "InternalTabs__TableWrapper",
+  componentId: "sc-ldufv0-0"
+})(["width:100%;"]);
+var TabHeader = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "InternalTabs__TabHeader",
+  componentId: "sc-ldufv0-1"
+})(["display:flex;border-bottom:1px solid ", ";"], function (props) {
+  return props.borderColor;
+});
+var TabButton = /*#__PURE__*/styled__default.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__default.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__default.createElement(Container$j, {
+    className: className
+  }, React__default.createElement(PaginationButton$1, {
+    onClick: function onClick() {
+      return onPageChange(Math.max(1, currentPage - 1));
+    },
+    disabled: currentPage === 1
+  }, React__default.createElement(fa.FaChevronLeft, {
+    size: 12
+  })), React__default.createElement(PageInfo$1, null, "Page ", currentPage, " of ", totalPages), React__default.createElement(PaginationButton$1, {
+    onClick: function onClick() {
+      return onPageChange(Math.min(totalPages, currentPage + 1));
+    },
+    disabled: currentPage === totalPages
+  }, React__default.createElement(fa.FaChevronRight, {
+    size: 12
+  })));
+};
+var Container$j = /*#__PURE__*/styled__default.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__default.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__default.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__default.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__default.createElement(PanelContainer, null, React__default.createElement(FilterRow, null, React__default.createElement(FilterLabel, null, "Filter:"), React__default.createElement(Dropdown, {
+    options: TRANSACTION_TYPE_OPTIONS,
+    onChange: handleTypeChange,
+    width: "200px"
+  })), loading && React__default.createElement(LoadingRow, null, React__default.createElement(Spinner, null), React__default.createElement("span", null, "Loading...")), !loading && transactions.length === 0 && React__default.createElement(EmptyMessage, null, "No transactions found."), !loading && transactions.length > 0 && React__default.createElement(TransactionList, null, transactions.map(function (tx) {
+    var _TRANSACTION_TYPE_LAB, _tx$note;
+    var isCredit = tx.amount > 0;
+    var label = (_TRANSACTION_TYPE_LAB = TRANSACTION_TYPE_LABELS[tx.type]) != null ? _TRANSACTION_TYPE_LAB : tx.type;
+    return React__default.createElement(TransactionRow, {
+      key: tx._id
+    }, React__default.createElement(TxType, null, label), React__default.createElement(TxAmount, {
+      "$credit": isCredit
+    }, isCredit ? '+' : '', tx.amount, " DC"), React__default.createElement(TxNote, null, (_tx$note = tx.note) != null ? _tx$note : tx.relatedCharacterName ? "With: " + tx.relatedCharacterName : ''), React__default.createElement(TxDate, null, formatDate(tx.createdAt)), React__default.createElement(TxBalance, null, "Balance: ", tx.balanceAfter, " DC"));
+  })), totalPages > 1 && React__default.createElement(Pagination, {
+    currentPage: currentPage,
+    totalPages: totalPages,
+    onPageChange: handlePageChange
+  }));
+};
+var PanelContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DCHistoryPanel__PanelContainer",
+  componentId: "sc-debjdj-0"
+})(["display:flex;flex-direction:column;gap:6px;padding:4px 0;"]);
+var FilterRow = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DCHistoryPanel__FilterRow",
+  componentId: "sc-debjdj-1"
+})(["display:flex;align-items:center;gap:8px;margin-bottom:4px;"]);
+var FilterLabel = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DCHistoryPanel__FilterLabel",
+  componentId: "sc-debjdj-2"
+})(["font-size:8px;color:#f59e0b;font-family:'Press Start 2P',cursive;white-space:nowrap;"]);
+var TransactionList = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DCHistoryPanel__TransactionList",
+  componentId: "sc-debjdj-3"
+})(["display:flex;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto;"]);
+var TransactionRow = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DCHistoryPanel__TransactionRow",
+  componentId: "sc-debjdj-4"
+})(["background:rgba(0,0,0,0.4);border:1px solid rgba(255,215,0,0.2);padding:8px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:2px;"]);
+var TxType = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DCHistoryPanel__TxType",
+  componentId: "sc-debjdj-5"
+})(["font-size:8px;color:#f59e0b;font-family:'Press Start 2P',cursive;grid-column:1;grid-row:1;"]);
+var TxAmount = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DCHistoryPanel__TxAmount",
+  componentId: "sc-debjdj-6"
+})(["font-size:10px;font-family:'Press Start 2P',cursive;color:", ";font-weight:bold;grid-column:2;grid-row:1;text-align:right;"], function (_ref2) {
+  var $credit = _ref2.$credit;
+  return $credit ? uiColors.green : uiColors.red;
+});
+var TxNote = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DCHistoryPanel__TxNote",
+  componentId: "sc-debjdj-7"
+})(["font-size:7px;color:", ";font-family:'Press Start 2P',cursive;grid-column:1;grid-row:2;"], uiColors.lightGray);
+var TxDate = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DCHistoryPanel__TxDate",
+  componentId: "sc-debjdj-8"
+})(["font-size:7px;color:", ";font-family:'Press Start 2P',cursive;grid-column:2;grid-row:2;text-align:right;"], uiColors.lightGray);
+var TxBalance = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DCHistoryPanel__TxBalance",
+  componentId: "sc-debjdj-9"
+})(["font-size:7px;color:", ";font-family:'Press Start 2P',cursive;grid-column:1 / 3;grid-row:3;opacity:0.7;"], uiColors.white);
+var LoadingRow = /*#__PURE__*/styled__default.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__default.div.withConfig({
+  displayName: "DCHistoryPanel__Spinner",
+  componentId: "sc-debjdj-11"
+})(["border:3px solid rgba(255,255,255,0.2);border-radius:50%;border-top:3px solid #f59e0b;width:20px;height:20px;animation:spin 0.8s linear infinite;@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}"]);
+var EmptyMessage = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DCHistoryPanel__EmptyMessage",
+  componentId: "sc-debjdj-12"
+})(["font-size:9px;color:", ";font-family:'Press Start 2P',cursive;text-align:center;padding:20px;"], uiColors.lightGray);
+
+// Global style to prevent body scrolling when modal is open
+var GlobalStyle = /*#__PURE__*/styled.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 = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onConfirm();
+  }, [onConfirm]);
+  var handleClose = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+  }, [onClose]);
+  // Fix type issues by separating event handlers for different event types
+  var stopPropagationClick = React.useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var stopPropagationTouch = React.useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var stopPropagationPointer = React.useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  return React__default.createElement(ModalPortal, null, React__default.createElement(GlobalStyle, null), React__default.createElement(Overlay, {
+    onPointerDown: handleClose
+  }), React__default.createElement(ModalContainer, null, React__default.createElement(ModalContent, {
+    onClick: stopPropagationClick,
+    onTouchStart: stopPropagationTouch,
+    onTouchEnd: stopPropagationTouch,
+    onTouchMove: stopPropagationTouch,
+    onPointerDown: stopPropagationPointer
+  }, React__default.createElement(MessageContainer, null, typeof message === 'string' ? React__default.createElement(Message$1, null, message) : message), React__default.createElement(ButtonsContainer$2, null, React__default.createElement(CancelButtonWrapper, null, React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: handleClose
+  }, "No")), React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: handleConfirm
+  }, "Yes")))));
+};
+var Overlay = /*#__PURE__*/styled__default.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__default.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__default.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__default.div.withConfig({
+  displayName: "ConfirmModal__MessageContainer",
+  componentId: "sc-11qkyu1-3"
+})(["margin-bottom:20px;text-align:center;"]);
+var Message$1 = /*#__PURE__*/styled__default.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__default.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__default.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__default.createElement(ButtonContainer$1, {
+    className: className,
+    onPointerDown: disabled ? undefined : onClick,
+    "$fullWidth": fullWidth,
+    "$disabled": disabled,
+    "$color": textColor
+  }, React__default.createElement(ButtonContent, null, React__default.createElement(IconWrapper$1, {
+    "$color": iconColor,
+    "$disabled": disabled
+  }, icon), label && React__default.createElement(ButtonLabel, {
+    "$color": textColor,
+    "$disabled": disabled
+  }, label)));
+};
+var ButtonContainer$1 = /*#__PURE__*/styled__default.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 && styled.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__default.div.withConfig({
+  displayName: "CTAButton__ButtonContent",
+  componentId: "sc-1azvwn5-1"
+})(["display:flex;align-items:center;gap:0.75rem;"]);
+var IconWrapper$1 = /*#__PURE__*/styled__default.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__default.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 = React.useState(''),
+    recipientName = _useState[0],
+    setRecipientName = _useState[1];
+  var _useState2 = React.useState(''),
+    amount = _useState2[0],
+    setAmount = _useState2[1];
+  var _useState3 = React.useState(''),
+    validationError = _useState3[0],
+    setValidationError = _useState3[1];
+  var _useState4 = React.useState(false),
+    showConfirm = _useState4[0],
+    setShowConfirm = _useState4[1];
+  var clearResultTimerRef = React.useRef(null);
+  React.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 = React.useCallback(function () {
+    if (!validate()) return;
+    setShowConfirm(true);
+  }, [recipientName, amount, dcBalance, characterName]);
+  var handleConfirmTransfer = React.useCallback(function () {
+    setShowConfirm(false);
+    onSendTransfer(recipientName.trim(), parseInt(amount, 10));
+    setRecipientName('');
+    setAmount('');
+  }, [recipientName, amount, onSendTransfer]);
+  return React__default.createElement(PanelContainer$1, null, React__default.createElement(FieldLabel, null, "Recipient Character Name"), React__default.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__default.createElement(FieldLabel, null, "Amount (DC)"), React__default.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__default.createElement(ErrorMessage, null, validationError), React__default.createElement(ButtonRow, null, React__default.createElement(CTAButton, {
+    icon: React__default.createElement(fa.FaPaperPlane, null),
+    label: transferLoading ? 'Sending...' : 'Send',
+    onClick: handleSendClick,
+    disabled: transferLoading,
+    fullWidth: true
+  })), transferLoading && React__default.createElement(Spinner$1, null), transferResult && React__default.createElement(ResultMessage, {
+    "$success": transferResult.success
+  }, transferResult.message), showConfirm && React__default.createElement(ConfirmModal, {
+    message: "Transfer " + parseInt(amount, 10) + " DC to \"" + recipientName.trim() + "\"?",
+    onConfirm: handleConfirmTransfer,
+    onClose: function onClose() {
+      return setShowConfirm(false);
+    }
+  }));
+};
+var PanelContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "DCTransferPanel__PanelContainer",
+  componentId: "sc-k1vvb1-0"
+})(["display:flex;flex-direction:column;gap:8px;padding:8px 0;"]);
+var FieldLabel = /*#__PURE__*/styled__default.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__default(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__default.div.withConfig({
+  displayName: "DCTransferPanel__ButtonRow",
+  componentId: "sc-k1vvb1-3"
+})(["margin-top:8px;"]);
+var Spinner$1 = /*#__PURE__*/styled__default.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__default.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__default.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 = React.useState('balance'),
+    activeTab = _useState[0],
+    setActiveTab = _useState[1];
+  var stopPropagation = React.useCallback(function (e) {
+    e.stopPropagation();
+  }, []);
+  var tabs = [{
+    id: 'balance',
+    title: 'Balance',
+    content: React__default.createElement(BalanceContent, null, React__default.createElement(BalanceLabel, null, "Your DC Balance"), React__default.createElement(BalanceAmount, null, dcBalance.toLocaleString(), " DC"), React__default.createElement(BalanceHint, null, "Buy DC packs from the Store > Packs tab."))
+  }, {
+    id: 'transfer',
+    title: 'Transfer',
+    content: React__default.createElement(DCTransferPanel, {
+      dcBalance: dcBalance,
+      transferLoading: transferLoading,
+      transferResult: transferResult,
+      onSendTransfer: onSendTransfer,
+      onClearTransferResult: onClearTransferResult,
+      characterName: characterName,
+      onInputFocus: onInputFocus,
+      onInputBlur: onInputBlur
+    })
+  }, {
+    id: 'history',
+    title: 'History',
+    content: React__default.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__default.createElement(ModalPortal, null, React__default.createElement(Overlay$1, {
+    onPointerDown: onClose
+  }), React__default.createElement(ModalContainer$1, null, React__default.createElement(ModalContent$1, {
+    onClick: stopPropagation,
+    onTouchStart: stopPropagation,
+    onPointerDown: stopPropagation
+  }, React__default.createElement(Header$2, null, React__default.createElement(Title$3, null, "DC Wallet"), React__default.createElement(CloseButton$4, {
+    onPointerDown: onClose,
+    "aria-label": "Close"
+  }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(WalletContainer, null, React__default.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__default.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__default.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__default.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__default.div.withConfig({
+  displayName: "DCWalletModal__Header",
+  componentId: "sc-12xy88y-3"
+})(["display:flex;align-items:center;justify-content:space-between;"]);
+var Title$3 = /*#__PURE__*/styled__default.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__default.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__default.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__default.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__default.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__default.div.withConfig({
+  displayName: "DCWalletModal__BalanceAmount",
+  componentId: "sc-12xy88y-9"
+})(["font-family:'Press Start 2P',cursive;font-size:28px;color:#fef08a;text-shadow:2px 2px 0 #000;letter-spacing:2px;"]);
+var BalanceHint = /*#__PURE__*/styled__default.span.withConfig({
+  displayName: "DCWalletModal__BalanceHint",
+  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,
@@ -30200,7 +30855,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__default.createElement(Container$j, {
+  return React__default.createElement(Container$k, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -30209,7 +30864,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$j = /*#__PURE__*/styled__default.div.withConfig({
+var Container$k = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -30261,7 +30916,7 @@ var LoginStreakPanel = function LoginStreakPanel(_ref) {
     onCloseButton: onClose,
     type: exports.RPGUIContainerTypes.Framed,
     width: isMobile ? '90vw' : '380px'
-  }, React__default.createElement(Container$k, null, React__default.createElement(StreakHeader, null, React__default.createElement(StreakDay, null, streak === 1 && !isConsecutive ? 'Day 1 — Fresh Start!' : "Day " + streak + " Streak!"), React__default.createElement(LongestStreak, null, "Longest: ", longestStreak, " days")), React__default.createElement(XPBonusSection, null, React__default.createElement(XPBonusLabel, null, "XP Bonus: ", React__default.createElement(XPBonusValue, {
+  }, React__default.createElement(Container$l, null, React__default.createElement(StreakHeader, null, React__default.createElement(StreakDay, null, streak === 1 && !isConsecutive ? 'Day 1 — Fresh Start!' : "Day " + streak + " Streak!"), React__default.createElement(LongestStreak, null, "Longest: ", longestStreak, " days")), React__default.createElement(XPBonusSection, null, React__default.createElement(XPBonusLabel, null, "XP Bonus: ", React__default.createElement(XPBonusValue, {
     isMax: isMaxBonus
   }, "+", xpBonusPercent, "%"), isMaxBonus && React__default.createElement(MaxTag, null, " MAX")), React__default.createElement(SimpleProgressBar, {
     value: maxXpBonusPercent > 0 ? xpBonusPercent / maxXpBonusPercent * 100 : 0,
@@ -30278,7 +30933,7 @@ var LoginStreakPanel = function LoginStreakPanel(_ref) {
     }, milestone.reached ? '✓' : '○'));
   })), React__default.createElement(MotivationalText, null, getMotivationalText(streak, isConsecutive, milestones))));
 };
-var Container$k = /*#__PURE__*/styled__default.div.withConfig({
+var Container$l = /*#__PURE__*/styled__default.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);
@@ -30716,7 +31371,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__default.createElement(Container$l, null, React__default.createElement(SpriteContainer, {
+  return React__default.createElement(Container$m, null, React__default.createElement(SpriteContainer, {
     x: centeredX,
     y: centeredY
   }, React__default.createElement(SpriteFromAtlas, {
@@ -30734,7 +31389,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__default.div.withConfig({
+var Container$m = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggedItem__Container",
   componentId: "sc-mlzzcp-0"
 })(["position:relative;"]);
@@ -30771,7 +31426,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       document.removeEventListener('clickOutside', handleClickOutside);
     };
   }, [handleClickOutside]);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$m, Object.assign({
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$n, Object.assign({
     fontSize: fontSize,
     ref: ref
   }, pos), React__default.createElement("ul", {
@@ -30788,7 +31443,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
     }, (params == null ? void 0 : params.text) || 'No text');
   }))));
 };
-var Container$m = /*#__PURE__*/styled__default.div.withConfig({
+var Container$n = /*#__PURE__*/styled__default.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) {
@@ -30955,97 +31610,25 @@ var EquipmentSet = function EquipmentSet(_ref) {
     initialPosition: initialPosition,
     onPositionChangeEnd: onPositionChangeEnd,
     onPositionChangeStart: onPositionChangeStart
-  }, React__default.createElement(EquipmentSetContainer, {
-    className: "equipment-container-body"
-  }, React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10)))), React__default.createElement(ItemSlotToolTips, {
-    dragScale: scale,
-    atlasIMG: atlasIMG,
-    atlasJSON: atlasJSON,
-    equipmentSet: equipmentSet,
-    onSelected: onSelected,
-    isContextMenuDisabled: shared.isMobile()
-  })));
-};
-var EquipmentSetContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "EquipmentSet__EquipmentSetContainer",
-  componentId: "sc-1wuddg2-0"
-})(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;touch-action:none;overflow:hidden;"]);
-var EquipmentColumn = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "EquipmentSet__EquipmentColumn",
-  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 = React.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__default.createElement(TableWrapper, null, React__default.createElement(TabHeader, {
-    borderColor: borderColor
-  }, tabs.map(function (tab) {
-    return React__default.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__default.createElement(ContentWrapper, null, (_tabs$find = tabs.find(function (tab) {
-    return tab.id === activeTabId;
-  })) == null ? void 0 : _tabs$find.content));
-};
-var TableWrapper = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "InternalTabs__TableWrapper",
-  componentId: "sc-ldufv0-0"
-})(["width:100%;"]);
-var TabHeader = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "InternalTabs__TabHeader",
-  componentId: "sc-ldufv0-1"
-})(["display:flex;border-bottom:1px solid ", ";"], function (props) {
-  return props.borderColor;
-});
-var TabButton = /*#__PURE__*/styled__default.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__default.div.withConfig({
-  displayName: "InternalTabs__ContentWrapper",
-  componentId: "sc-ldufv0-3"
-})(["width:100%;"]);
+  }, React__default.createElement(EquipmentSetContainer, {
+    className: "equipment-container-body"
+  }, React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10)))), React__default.createElement(ItemSlotToolTips, {
+    dragScale: scale,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    equipmentSet: equipmentSet,
+    onSelected: onSelected,
+    isContextMenuDisabled: shared.isMobile()
+  })));
+};
+var EquipmentSetContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "EquipmentSet__EquipmentSetContainer",
+  componentId: "sc-1wuddg2-0"
+})(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;touch-action:none;overflow:hidden;"]);
+var EquipmentColumn = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "EquipmentSet__EquipmentColumn",
+  componentId: "sc-1wuddg2-1"
+})(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
 
 var Table = /*#__PURE__*/styled__default.table.withConfig({
   displayName: "Table",
@@ -31211,7 +31794,7 @@ var FriendRequestSection = function FriendRequestSection(_ref3) {
         return onReject(character);
       }
     }, "Reject")));
-  })) : React__default.createElement(EmptyMessage, null, "No pending friend requests"));
+  })) : React__default.createElement(EmptyMessage$1, null, "No pending friend requests"));
 };
 // Styled components for FriendList UI
 var ListWrapper = /*#__PURE__*/styled__default.div.withConfig({
@@ -31253,7 +31836,7 @@ var AcceptRejectActions = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "FriendList__AcceptRejectActions",
   componentId: "sc-3jf9vt-8"
 })(["display:flex;gap:0.5rem;"]);
-var EmptyMessage = /*#__PURE__*/styled__default.p.withConfig({
+var EmptyMessage$1 = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "FriendList__EmptyMessage",
   componentId: "sc-3jf9vt-9"
 })(["text-align:center;color:#888;padding:1rem;font-size:", ";"], uiFonts.size.small);
@@ -31353,7 +31936,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = React.useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React__default.createElement(Container$n, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$o, null, React__default.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -31371,7 +31954,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$n = /*#__PURE__*/styled__default.div.withConfig({
+var Container$o = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -31523,7 +32106,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React__default.createElement(Container$o, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
+  return React__default.createElement(Container$p, null, React__default.createElement(QuestionContainer, null, React__default.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -31533,7 +32116,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React__default.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$o = /*#__PURE__*/styled__default.div.withConfig({
+var Container$p = /*#__PURE__*/styled__default.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;"]);
@@ -31593,7 +32176,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
     src: imagePath || img$7
-  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$p, null, React__default.createElement(CloseIcon, {
+  }))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$q, null, React__default.createElement(CloseIcon, {
     onPointerDown: _onClose
   }, "X"), React__default.createElement(TextContainer$1, {
     flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
@@ -31609,7 +32192,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$7
   })))));
 };
-var Container$p = /*#__PURE__*/styled__default.div.withConfig({
+var Container$q = /*#__PURE__*/styled__default.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;"]);
@@ -31669,7 +32252,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: exports.RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$q, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$r, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React__default.createElement(React__default.Fragment, null, React__default.createElement(TextContainer$2, {
     flex: '70%'
   }, React__default.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -31711,7 +32294,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$q = /*#__PURE__*/styled__default.div.withConfig({
+var Container$r = /*#__PURE__*/styled__default.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;"]);
@@ -31860,7 +32443,7 @@ var ImageCarousel = function ImageCarousel(_ref) {
     onPointerDown: function onPointerDown() {
       return goToNextImage();
     }
-  }))), onCloseButton && React__default.createElement(CloseButton$4, {
+  }))), onCloseButton && React__default.createElement(CloseButton$5, {
     className: "container-close",
     onPointerDown: onCloseButton
   }, "X"));
@@ -31891,7 +32474,7 @@ var Description$1 = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.isTextFixed ? 'none' : 'rgba(0, 0, 0, 0.6)';
 });
-var CloseButton$4 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$5 = /*#__PURE__*/styled__default.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;}"]);
@@ -32073,48 +32656,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__default.createElement(Container$r, {
-    className: className
-  }, React__default.createElement(PaginationButton$1, {
-    onClick: function onClick() {
-      return onPageChange(Math.max(1, currentPage - 1));
-    },
-    disabled: currentPage === 1
-  }, React__default.createElement(fa.FaChevronLeft, {
-    size: 12
-  })), React__default.createElement(PageInfo$1, null, "Page ", currentPage, " of ", totalPages), React__default.createElement(PaginationButton$1, {
-    onClick: function onClick() {
-      return onPageChange(Math.min(totalPages, currentPage + 1));
-    },
-    disabled: currentPage === totalPages
-  }, React__default.createElement(fa.FaChevronRight, {
-    size: 12
-  })));
-};
-var Container$r = /*#__PURE__*/styled__default.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__default.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__default.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,
@@ -32209,7 +32750,7 @@ var PaginatedContent = function PaginatedContent(_ref) {
   }, (searchOptions || filterOptions) && React__default.createElement(SearchHeader$1, {
     searchOptions: searchOptions,
     filterOptions: filterOptions
-  }), items.length === 0 ? React__default.createElement(EmptyMessage$1, null, emptyMessage) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Content, {
+  }), items.length === 0 ? React__default.createElement(EmptyMessage$2, null, emptyMessage) : React__default.createElement(React__default.Fragment, null, React__default.createElement(Content, {
     className: "PaginatedContent-content " + layout,
     "$gridColumns": gridColumns,
     "$itemHeight": itemHeight
@@ -32245,7 +32786,7 @@ var PaginationContainer$1 = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var EmptyMessage$2 = /*#__PURE__*/styled__default.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;"]);
@@ -32348,24 +32889,24 @@ var BaseInformationDetails = function BaseInformationDetails(_ref) {
     atlasIMG = _ref.atlasIMG,
     onBack = _ref.onBack,
     children = _ref.children;
-  return React__default.createElement(Container$t, null, React__default.createElement(Overlay, {
+  return React__default.createElement(Container$t, null, React__default.createElement(Overlay$2, {
     onClick: onBack
-  }), React__default.createElement(Modal, null, React__default.createElement(CloseButton$5, {
+  }), React__default.createElement(Modal, null, React__default.createElement(CloseButton$6, {
     onClick: onBack
-  }, React__default.createElement(fa.FaTimes, null)), React__default.createElement(Header$2, null, React__default.createElement(SpriteContainer$2, null, React__default.createElement(SpriteFromAtlas, {
+  }, React__default.createElement(fa.FaTimes, null)), React__default.createElement(Header$3, null, React__default.createElement(SpriteContainer$2, null, React__default.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: spriteKey,
     width: 32,
     height: 32,
     imgScale: 1
-  })), React__default.createElement(Title$3, null, name)), React__default.createElement(Content$1, null, children)));
+  })), React__default.createElement(Title$4, null, name)), React__default.createElement(Content$1, null, children)));
 };
 var Container$t = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var Overlay$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BaseInformationDetails__Overlay",
   componentId: "sc-1vguuz8-1"
 })(["position:fixed;inset:0;background-color:rgba(0,0,0,0.8);"]);
@@ -32373,11 +32914,11 @@ var Modal = /*#__PURE__*/styled__default.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__default.button.withConfig({
+var CloseButton$6 = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var Header$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BaseInformationDetails__Header",
   componentId: "sc-1vguuz8-4"
 })(["display:flex;align-items:center;gap:16px;margin-bottom:24px;"]);
@@ -32385,7 +32926,7 @@ var Content$1 = /*#__PURE__*/styled__default.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__default.h2.withConfig({
+var Title$4 = /*#__PURE__*/styled__default.h2.withConfig({
   displayName: "BaseInformationDetails__Title",
   componentId: "sc-1vguuz8-6"
 })(["color:", ";font-size:1rem;margin:0;"], uiColors.yellow);
@@ -32405,21 +32946,21 @@ var Collapsible = function Collapsible(_ref) {
     setIsOpen = _useState[1];
   return React__default.createElement(Container$u, {
     className: className
-  }, React__default.createElement(Header$3, {
+  }, React__default.createElement(Header$4, {
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     }
-  }, React__default.createElement(Title$4, null, title), React__default.createElement(Icon$1, null, isOpen ? React__default.createElement(fa.FaChevronUp, null) : React__default.createElement(fa.FaChevronDown, null))), isOpen && React__default.createElement(Content$2, null, children));
+  }, React__default.createElement(Title$5, null, title), React__default.createElement(Icon$1, null, isOpen ? React__default.createElement(fa.FaChevronUp, null) : React__default.createElement(fa.FaChevronDown, null))), isOpen && React__default.createElement(Content$2, null, children));
 };
 var Container$u = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var Header$4 = /*#__PURE__*/styled__default.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__default.h3.withConfig({
+var Title$5 = /*#__PURE__*/styled__default.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);
@@ -32757,7 +33298,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       return rangeValue[0] !== undefined || rangeValue[1] !== undefined;
     }
     return section.value !== 'all';
-  }).length)), isOpen && React__default.createElement(Portal, null, isMobile && React__default.createElement(Overlay$1, null), React__default.createElement(FiltersPanel, {
+  }).length)), isOpen && React__default.createElement(Portal, null, isMobile && React__default.createElement(Overlay$3, null), React__default.createElement(FiltersPanel, {
     ref: panelRef,
     style: {
       position: 'fixed',
@@ -32766,7 +33307,7 @@ var AdvancedFilters = function AdvancedFilters(_ref) {
       zIndex: 9999
     },
     "$isMobile": isMobile
-  }, React__default.createElement(FilterHeader, null, React__default.createElement(FilterTitle, null, "Advanced Filters"), React__default.createElement(CloseButton$6, {
+  }, React__default.createElement(FilterHeader, null, React__default.createElement(FilterTitle, null, "Advanced Filters"), React__default.createElement(CloseButton$7, {
     onClick: handleClose
   }, "\xD7")), sections.map(renderFilterSection), hasActiveFilters && React__default.createElement(ClearFiltersButton, {
     onClick: onClearAll
@@ -32814,7 +33355,7 @@ var FilterHeader = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var Overlay$3 = /*#__PURE__*/styled__default.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;}}"]);
@@ -32838,7 +33379,7 @@ var ClearFiltersButton = /*#__PURE__*/styled__default.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__default.button.withConfig({
+var CloseButton$7 = /*#__PURE__*/styled__default.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;}"]);
@@ -33823,7 +34364,7 @@ var InformationCenter = function InformationCenter(_ref) {
     return React__default.createElement(LoadingMessage, null, "Loading...");
   }
   if (error) {
-    return React__default.createElement(ErrorMessage, null, error);
+    return React__default.createElement(ErrorMessage$1, null, error);
   }
   var tabs = [{
     id: 'bestiary',
@@ -33885,7 +34426,7 @@ var LoadingMessage = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenter__LoadingMessage",
   componentId: "sc-1ttl62e-1"
 })(["text-align:center;color:#ffffff;padding:2rem;"]);
-var ErrorMessage = /*#__PURE__*/styled__default.div.withConfig({
+var ErrorMessage$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InformationCenter__ErrorMessage",
   componentId: "sc-1ttl62e-2"
 })(["text-align:center;color:#ef4444;padding:2rem;"]);
@@ -34179,7 +34720,7 @@ var QuantitySelector = function QuantitySelector(_ref) {
   return React__default.createElement(StyledContainer, {
     type: exports.RPGUIContainerTypes.Framed,
     width: "25rem"
-  }, React__default.createElement(CloseButton$7, {
+  }, React__default.createElement(CloseButton$8, {
     className: "container-close",
     onPointerDown: onClose
   }, "X"), React__default.createElement("h2", null, title), React__default.createElement(StyledForm, {
@@ -34191,7 +34732,7 @@ var QuantitySelector = function QuantitySelector(_ref) {
       }
     },
     noValidate: true
-  }, React__default.createElement(StyledInput, {
+  }, React__default.createElement(StyledInput$1, {
     ref: inputRef,
     placeholder: "Enter quantity",
     type: "number",
@@ -34224,7 +34765,7 @@ var StyledContainer = /*#__PURE__*/styled__default(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__default.div.withConfig({
+var CloseButton$8 = /*#__PURE__*/styled__default.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;"]);
@@ -34232,7 +34773,7 @@ var StyledForm = /*#__PURE__*/styled__default.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__default.input.withConfig({
+var StyledInput$1 = /*#__PURE__*/styled__default.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;}"]);
@@ -34495,78 +35036,6 @@ var ItemsContainer = /*#__PURE__*/styled__default.div.withConfig({
   return isFullScreen && '50%';
 });
 
-// Global style to prevent body scrolling when modal is open
-var GlobalStyle = /*#__PURE__*/styled.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 = React.useCallback(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    onConfirm();
-  }, [onConfirm]);
-  var handleClose = React.useCallback(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    onClose();
-  }, [onClose]);
-  // Fix type issues by separating event handlers for different event types
-  var stopPropagationClick = React.useCallback(function (e) {
-    e.stopPropagation();
-  }, []);
-  var stopPropagationTouch = React.useCallback(function (e) {
-    e.stopPropagation();
-  }, []);
-  var stopPropagationPointer = React.useCallback(function (e) {
-    e.stopPropagation();
-  }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(GlobalStyle, null), React__default.createElement(Overlay$2, {
-    onPointerDown: handleClose
-  }), React__default.createElement(ModalContainer, null, React__default.createElement(ModalContent, {
-    onClick: stopPropagationClick,
-    onTouchStart: stopPropagationTouch,
-    onTouchEnd: stopPropagationTouch,
-    onTouchMove: stopPropagationTouch,
-    onPointerDown: stopPropagationPointer
-  }, React__default.createElement(MessageContainer, null, typeof message === 'string' ? React__default.createElement(Message$1, null, message) : message), React__default.createElement(ButtonsContainer$2, null, React__default.createElement(CancelButtonWrapper, null, React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    onPointerDown: handleClose
-  }, "No")), React__default.createElement(Button, {
-    buttonType: exports.ButtonTypes.RPGUIButton,
-    onPointerDown: handleConfirm
-  }, "Yes")))));
-};
-var Overlay$2 = /*#__PURE__*/styled__default.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__default.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__default.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__default.div.withConfig({
-  displayName: "ConfirmModal__MessageContainer",
-  componentId: "sc-11qkyu1-3"
-})(["margin-bottom:20px;text-align:center;"]);
-var Message$1 = /*#__PURE__*/styled__default.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__default.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__default.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,
@@ -34609,13 +35078,13 @@ var ColorSelector = function ColorSelector(_ref) {
     cancelDrag: ".react-colorful",
     width: "25rem",
     onCloseButton: onClose
-  }, React__default.createElement(Container$y, null, React__default.createElement(Header$4, null, "Select Color"), React__default.createElement(ColorPickerWrapper, null, React__default.createElement(reactColorful.HexColorPicker, {
+  }, React__default.createElement(Container$y, null, React__default.createElement(Header$5, null, "Select Color"), React__default.createElement(ColorPickerWrapper, null, React__default.createElement(reactColorful.HexColorPicker, {
     color: currentColor,
     onChange: function onChange(color) {
       setCurrentColor(color);
       _onChange(color);
     }
-  })), React__default.createElement(ButtonContainer$1, null, React__default.createElement(Button, {
+  })), React__default.createElement(ButtonContainer$2, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     type: "button",
     onClick: handleConfirm
@@ -34629,7 +35098,7 @@ var Container$y = /*#__PURE__*/styled__default.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__default.h2.withConfig({
+var Header$5 = /*#__PURE__*/styled__default.h2.withConfig({
   displayName: "ItemPropertyColorSelector__Header",
   componentId: "sc-me1r4z-1"
 })(["color:white;font-size:1rem;margin:0;width:100%;text-align:center;"]);
@@ -34637,7 +35106,7 @@ var ColorPickerWrapper = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var ButtonContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ItemPropertyColorSelector__ButtonContainer",
   componentId: "sc-me1r4z-3"
 })(["display:flex;justify-content:center;width:100%;"]);
@@ -34700,7 +35169,7 @@ var GemSelector = function GemSelector(_ref) {
     scale: scale,
     cancelDrag: ".gem-selector-container",
     onCloseButton: onClose
-  }, React__default.createElement(ContentWrapper$1, null, React__default.createElement(Header$5, null, React__default.createElement(Title$5, null, "GEM SELECTION"), React__default.createElement(Subtitle, null, "Select gems to detach")), React__default.createElement(GemGrid, null, (_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.map(function (gem, index) {
+  }, React__default.createElement(ContentWrapper$1, null, React__default.createElement(Header$6, null, React__default.createElement(Title$6, null, "GEM SELECTION"), React__default.createElement(Subtitle, null, "Select gems to detach")), React__default.createElement(GemGrid, null, (_item$attachedGems = item.attachedGems) == null ? void 0 : _item$attachedGems.map(function (gem, index) {
     return React__default.createElement(GemItem, {
       key: gem.key + "-" + index
     }, React__default.createElement(CheckItemWrapper$1, null, React__default.createElement(CheckItem, {
@@ -34731,7 +35200,7 @@ var GemSelector = function GemSelector(_ref) {
     disabled: selectedGems.length === 0
   }, "Confirm"))));
 };
-var Title$5 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$6 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "GemSelector__Title",
   componentId: "sc-gbt8g4-0"
 })(["font-size:0.8rem;color:", " !important;"], uiColors.yellow);
@@ -34739,7 +35208,7 @@ var Subtitle = /*#__PURE__*/styled__default.h2.withConfig({
   displayName: "GemSelector__Subtitle",
   componentId: "sc-gbt8g4-1"
 })(["font-size:0.6rem;color:", ";margin:0;"], uiColors.white);
-var Header$5 = /*#__PURE__*/styled__default.div.withConfig({
+var Header$6 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "GemSelector__Header",
   componentId: "sc-gbt8g4-2"
 })(["text-align:center;padding:5px;border-bottom:2px solid #444;"]);
@@ -34804,7 +35273,7 @@ var ItemSelector = function ItemSelector(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$6, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
+  }, React__default.createElement(Title$7, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
     className: "golden"
   })), React__default.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
     return React__default.createElement(RadioOptionsWrapper$1, {
@@ -34833,7 +35302,7 @@ var ItemSelector = function ItemSelector(_ref) {
     buttonType: exports.ButtonTypes.RPGUIButton
   }, "Select")));
 };
-var Title$6 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$7 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "ItemSelector__Title",
   componentId: "sc-gptoxp-0"
 })(["font-size:0.6rem;color:yellow !important;"]);
@@ -35085,7 +35554,7 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     maxLines: 1,
     maxWidth: "200px",
     fontSize: "10px"
-  }, "$", itemPrice)))), React__default.createElement(ButtonContainer$2, null, React__default.createElement(Button, {
+  }, "$", itemPrice)))), React__default.createElement(ButtonContainer$3, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
     disabled: disabled,
     onPointerDown: function onPointerDown() {
@@ -35127,7 +35596,7 @@ var PriceValue = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__PriceValue",
   componentId: "sc-wmpr1o-7"
 })(["margin-left:40px;"]);
-var ButtonContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
+var ButtonContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MarketplaceRows__ButtonContainer",
   componentId: "sc-wmpr1o-8"
 })(["margin:auto;"]);
@@ -35703,7 +36172,7 @@ var PartyCreate = function PartyCreate(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$7, null, "Create Party"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$8, null, "Create Party"), React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement("h1", null, "Type your party name"), React__default.createElement(Input, {
     placeholder: "Type party name",
@@ -35726,7 +36195,7 @@ var Wrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyCreate__Wrapper",
   componentId: "sc-13brop0-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$7 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$8 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyCreate__Title",
   componentId: "sc-13brop0-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -35775,7 +36244,7 @@ var PartyDashboard = function PartyDashboard(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$8, null, "Party Dashboard"), React__default.createElement(Button, {
+  }, React__default.createElement(Title$9, null, "Party Dashboard"), React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton
   }, "Create"), React__default.createElement("hr", {
     className: "golden"
@@ -35802,7 +36271,7 @@ var RowsWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyDashboard__RowsWrapper",
   componentId: "sc-16cm41r-1"
 })(["overflow-y:scroll;-webkit-overflow-scrolling:touch;width:100%;height:200px;"]);
-var Title$8 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$9 = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyDashboard__Title",
   componentId: "sc-16cm41r-2"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -35839,7 +36308,7 @@ var PartyInvite = function PartyInvite(_ref) {
     style: {
       width: '100%'
     }
-  }, React__default.createElement(Title$9, null, "Invite for Party"), React__default.createElement("hr", {
+  }, React__default.createElement(Title$a, null, "Invite for Party"), React__default.createElement("hr", {
     className: "golden"
   }))), React__default.createElement(RowsWrapper$1, {
     className: "playersRows"
@@ -35858,7 +36327,7 @@ var Wrapper$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyInvite__Wrapper",
   componentId: "sc-eu8ggt-0"
 })(["display:flex;flex-direction:column;width:100%;"]);
-var Title$9 = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$a = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "PartyInvite__Title",
   componentId: "sc-eu8ggt-1"
 })(["font-size:0.6rem;color:", " !important;"], uiColors.yellow);
@@ -35895,7 +36364,7 @@ var PartyManagerRow = function PartyManagerRow(_ref) {
   }, charName, " ", isCurrentUser ? '(You)' : '', " ", isLeader ? '(Leader)' : '')), React__default.createElement(TextContainer$5, null, React__default.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "300px"
-  }, charClass)), React__default.createElement(ButtonContainer$3, null, canRemove && React__default.createElement(HighlightedText, {
+  }, charClass)), React__default.createElement(ButtonContainer$4, null, canRemove && React__default.createElement(HighlightedText, {
     onPointerDown: function onPointerDown() {
       return onRemovePlayer(id);
     }
@@ -35913,7 +36382,7 @@ var TextContainer$5 = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var ButtonContainer$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PartyManagerRows__ButtonContainer",
   componentId: "sc-uqajew-2"
 })(["display:flex;align-items:center;gap:1rem;justify-content:flex-start;"]);
@@ -36300,7 +36769,7 @@ var QuestInfo = function QuestInfo(_ref) {
     onPointerDown: onRightClick
   }), React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$a, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$b, null, React__default.createElement(Thumbnail, {
     src: quests[currentIndex].thumbnail || img$8
   }), quests[currentIndex].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -36319,7 +36788,7 @@ var QuestInfo = function QuestInfo(_ref) {
     }, button.title);
   })))) : React__default.createElement(QuestsContainer, null, React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
     className: "drag-handler"
-  }, React__default.createElement(Title$a, null, React__default.createElement(Thumbnail, {
+  }, React__default.createElement(Title$b, null, React__default.createElement(Thumbnail, {
     src: quests[0].thumbnail || img$8
   }), quests[0].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
     className: "golden"
@@ -36366,7 +36835,7 @@ var TitleContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "QuestInfo__TitleContainer",
   componentId: "sc-1wccpiy-6"
 })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
-var Title$a = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "QuestInfo__Title",
   componentId: "sc-1wccpiy-7"
 })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -36506,76 +36975,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__default.createElement(ButtonContainer$4, {
-    className: className,
-    onPointerDown: disabled ? undefined : onClick,
-    "$fullWidth": fullWidth,
-    "$disabled": disabled,
-    "$color": textColor
-  }, React__default.createElement(ButtonContent, null, React__default.createElement(IconWrapper$1, {
-    "$color": iconColor,
-    "$disabled": disabled
-  }, icon), label && React__default.createElement(ButtonLabel, {
-    "$color": textColor,
-    "$disabled": disabled
-  }, label)));
-};
-var ButtonContainer$4 = /*#__PURE__*/styled__default.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 && styled.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__default.div.withConfig({
-  displayName: "CTAButton__ButtonContent",
-  componentId: "sc-1azvwn5-1"
-})(["display:flex;align-items:center;gap:0.75rem;"]);
-var IconWrapper$1 = /*#__PURE__*/styled__default.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__default.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,
@@ -36964,7 +37363,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React__default.createElement(CloseButton$8, {
+  }, onCloseButton && React__default.createElement(CloseButton$9, {
     onPointerDown: onCloseButton
   }, "X"), React__default.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -36999,7 +37398,7 @@ var SkillSplitDiv = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillsContainer__SkillSplitDiv",
   componentId: "sc-1g0c67q-2"
 })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$8 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$9 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -37135,7 +37534,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$F, null, React__default.createElement(Header$6, null, React__default.createElement("div", null, React__default.createElement(Title$b, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$F, null, React__default.createElement(Header$7, null, React__default.createElement("div", null, React__default.createElement(Title$c, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -37165,7 +37564,7 @@ var Container$F = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
-var Title$b = /*#__PURE__*/styled__default.div.withConfig({
+var Title$c = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Title",
   componentId: "sc-4hbw3q-1"
 })(["font-size:", ";font-weight:bold;margin-bottom:0.5rem;display:flex;align-items:center;margin:0;"], uiFonts.size.medium);
@@ -37177,7 +37576,7 @@ var Description$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Description",
   componentId: "sc-4hbw3q-3"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
-var Header$6 = /*#__PURE__*/styled__default.div.withConfig({
+var Header$7 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Header",
   componentId: "sc-4hbw3q-4"
 })(["display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;"]);
@@ -37393,7 +37792,7 @@ var Spell = function Spell(_ref) {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
-  }, disabled && React__default.createElement(Overlay$3, null, characterSkillLevel < requiredLevel ? "Low " + getSkillName(attribute || 'magic level') + " level" : manaCost > charMana && 'No mana'), React__default.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React__default.createElement("span", {
+  }, disabled && React__default.createElement(Overlay$4, null, characterSkillLevel < requiredLevel ? "Low " + getSkillName(attribute || 'magic level') + " level" : manaCost > charMana && 'No mana'), React__default.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React__default.createElement("span", {
     className: "cooldown"
   }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
@@ -37402,7 +37801,7 @@ var Spell = function Spell(_ref) {
     imgScale: IMAGE_SCALE,
     containerStyle: CONTAINER_STYLE,
     centered: true
-  })), React__default.createElement(Info, null, React__default.createElement(Title$c, null, React__default.createElement("span", null, name), React__default.createElement("span", {
+  })), React__default.createElement(Info, null, React__default.createElement(Title$d, null, React__default.createElement("span", null, name), React__default.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React__default.createElement(Description$5, null, description)), React__default.createElement(Divider$1, null), React__default.createElement(Cost, null, React__default.createElement("span", null, "Mana cost:"), React__default.createElement("span", {
     className: "mana"
@@ -37423,7 +37822,7 @@ var Info = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "Spell__Info",
   componentId: "sc-j96fa2-2"
 })(["width:0;flex:1;@media (orientation:portrait){display:none;}"]);
-var Title$c = /*#__PURE__*/styled__default.p.withConfig({
+var Title$d = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "Spell__Title",
   componentId: "sc-j96fa2-3"
 })(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
@@ -37439,7 +37838,7 @@ var Cost = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "Spell__Cost",
   componentId: "sc-j96fa2-6"
 })(["display:flex;align-items:center;flex-direction:column;gap:0.5rem;div{z-index:1;}.mana{position:relative;font-size:", ";font-weight:bold;z-index:1;&::after{position:absolute;content:'';top:0;left:0;background-color:", ";width:100%;height:100%;border-radius:50%;transform:scale(1.8);filter:blur(10px);z-index:-1;}}"], uiFonts.size.medium, uiColors.blue);
-var Overlay$3 = /*#__PURE__*/styled__default.p.withConfig({
+var Overlay$4 = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "Spell__Overlay",
   componentId: "sc-j96fa2-7"
 })(["margin:0 !important;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1rem;display:flex;justify-content:center;align-items:center;color:", ";font-size:", " !important;font-weight:bold;z-index:10;background-color:rgba(0 0 0 / 0.2);"], uiColors.yellow, uiFonts.size.large);
@@ -37488,7 +37887,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$J, null, React__default.createElement(Title$d, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$J, null, React__default.createElement(Title$e, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -37521,7 +37920,7 @@ var Spellbook = function Spellbook(_ref) {
     }, spell)));
   }))));
 };
-var Title$d = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$e = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
@@ -57963,7 +58362,7 @@ var CartView = function CartView(_ref2) {
       return _ref3.apply(this, arguments);
     };
   }();
-  return React__default.createElement(Container$K, null, React__default.createElement(Header$7, null, React__default.createElement(Title$e, null, "Shopping Cart"), React__default.createElement(CloseButton$9, {
+  return React__default.createElement(Container$K, null, React__default.createElement(Header$8, null, React__default.createElement(Title$f, null, "Shopping Cart"), React__default.createElement(CloseButton$a, {
     onPointerDown: onClose
   }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(CartItems, null, cartItems.length === 0 ? React__default.createElement(EmptyCart, null, "Your cart is empty") : cartItems.map(function (cartItem) {
     var _cartItem$metadata, _cartItem$metadata2;
@@ -57991,7 +58390,7 @@ var CartView = function CartView(_ref2) {
         onRemoveFromCart(cartItem.item.key);
       }
     }));
-  })), React__default.createElement(Footer$1, null, React__default.createElement(TotalInfo, null, React__default.createElement(TotalRow, null, React__default.createElement("span", null, "Total:"), React__default.createElement("span", null, "$", formatPrice(total))), error && React__default.createElement(ErrorMessage$1, null, error)), React__default.createElement(CTAButton, {
+  })), React__default.createElement(Footer$1, null, React__default.createElement(TotalInfo, null, React__default.createElement(TotalRow, null, React__default.createElement("span", null, "Total:"), React__default.createElement("span", null, "$", formatPrice(total))), error && React__default.createElement(ErrorMessage$2, null, error)), React__default.createElement(CTAButton, {
     icon: React__default.createElement(fa.FaShoppingBag, null),
     label: isLoading ? 'Processing...' : 'Complete Purchase',
     onClick: handlePurchase,
@@ -58003,15 +58402,15 @@ var Container$K = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CartView__Container",
   componentId: "sc-ydtyl1-0"
 })(["display:flex;flex-direction:column;width:100%;height:100%;gap:1.5rem;padding:1.5rem;"]);
-var Header$7 = /*#__PURE__*/styled__default.div.withConfig({
+var Header$8 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CartView__Header",
   componentId: "sc-ydtyl1-1"
 })(["display:flex;justify-content:space-between;align-items:center;"]);
-var Title$e = /*#__PURE__*/styled__default.h2.withConfig({
+var Title$f = /*#__PURE__*/styled__default.h2.withConfig({
   displayName: "CartView__Title",
   componentId: "sc-ydtyl1-2"
 })(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#ffffff;margin:0;"]);
-var CloseButton$9 = /*#__PURE__*/styled__default.div.withConfig({
+var CloseButton$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CartView__CloseButton",
   componentId: "sc-ydtyl1-3"
 })(["padding:0.5rem;min-width:unset;width:42px;height:42px;display:flex;font-size:1.5rem;align-items:center;color:white;justify-content:center;"]);
@@ -58055,7 +58454,7 @@ var TotalRow = /*#__PURE__*/styled__default.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__default.div.withConfig({
+var ErrorMessage$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CartView__ErrorMessage",
   componentId: "sc-ydtyl1-14"
 })(["color:#ef4444;font-size:0.875rem;font-family:'Press Start 2P',cursive;text-align:center;"]);
@@ -58353,7 +58752,7 @@ var ScrollableContent = function ScrollableContent(_ref) {
     _ref$maxHeight = _ref.maxHeight,
     maxHeight = _ref$maxHeight === void 0 ? '500px' : _ref$maxHeight;
   if (items.length === 0) {
-    return React__default.createElement(EmptyMessage$2, null, emptyMessage);
+    return React__default.createElement(EmptyMessage$3, null, emptyMessage);
   }
   return React__default.createElement(Container$L, {
     className: className
@@ -58412,7 +58811,7 @@ var Content$4 = /*#__PURE__*/styled__default.div.withConfig({
 }, function (props) {
   return props.$gridColumns;
 });
-var EmptyMessage$2 = /*#__PURE__*/styled__default.div.withConfig({
+var EmptyMessage$3 = /*#__PURE__*/styled__default.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;"]);
@@ -58493,7 +58892,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  }) : React__default.createElement(DefaultIcon, null, "\uD83D\uDC64")), React__default.createElement(ItemDetails$1, null, React__default.createElement(Header$8, null, React__default.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React__default.createElement(SelectedSkinNav, null, React__default.createElement(SelectedSkin, null, "Selected:"), React__default.createElement(SkinNavArrow, {
+  }) : React__default.createElement(DefaultIcon, null, "\uD83D\uDC64")), React__default.createElement(ItemDetails$1, null, React__default.createElement(Header$9, null, React__default.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React__default.createElement(SelectedSkinNav, null, React__default.createElement(SelectedSkin, null, "Selected:"), React__default.createElement(SkinNavArrow, {
     direction: "left",
     onPointerDown: handlePreviousSkin,
     size: 24
@@ -58545,7 +58944,7 @@ var SkinNavArrow = /*#__PURE__*/styled__default(SelectArrow).withConfig({
   displayName: "StoreCharacterSkinRow__SkinNavArrow",
   componentId: "sc-81xqsx-7"
 })(["position:static;"]);
-var Header$8 = /*#__PURE__*/styled__default.div.withConfig({
+var Header$9 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__Header",
   componentId: "sc-81xqsx-8"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
@@ -58948,7 +59347,7 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     if (typeof imageUrl === 'string') return imageUrl;
     return imageUrl["default"] || imageUrl.src;
   };
-  return React__default.createElement(Container$M, null, React__default.createElement(Header$9, null, React__default.createElement(BackButton, {
+  return React__default.createElement(Container$M, null, React__default.createElement(Header$a, null, React__default.createElement(BackButton, {
     onClick: onBack
   }, React__default.createElement(fa.FaArrowLeft, null), React__default.createElement("span", null, "Back"))), React__default.createElement(Content$5, null, React__default.createElement(DetailsGrid, null, React__default.createElement(ItemIcon, null, React__default.createElement("img", {
     src: getImageSrc(),
@@ -58966,7 +59365,7 @@ var Container$M = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemDetails__Container",
   componentId: "sc-k3ho5z-0"
 })(["display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;height:100%;"]);
-var Header$9 = /*#__PURE__*/styled__default.div.withConfig({
+var Header$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemDetails__Header",
   componentId: "sc-k3ho5z-1"
 })(["display:flex;align-items:center;gap:1rem;"]);
@@ -59134,7 +59533,7 @@ var Store = function Store(_ref) {
     return React__default.createElement(LoadingMessage$1, null, "Loading...");
   }
   if (error) {
-    return React__default.createElement(ErrorMessage$2, null, error);
+    return React__default.createElement(ErrorMessage$3, null, error);
   }
   // Build tabs dynamically based on props
   var tabIds = tabOrder != null ? tabOrder : ['premium', 'packs', 'items'];
@@ -59302,7 +59701,7 @@ var LoadingMessage$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Store__LoadingMessage",
   componentId: "sc-64dj00-8"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.white);
-var ErrorMessage$2 = /*#__PURE__*/styled__default.div.withConfig({
+var ErrorMessage$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Store__ErrorMessage",
   componentId: "sc-64dj00-9"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.red);
@@ -59325,13 +59724,13 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
       onPayWithCard();
     }
   }, [selected, onPayWithDC, onPayWithCard]);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Overlay$4, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Overlay$5, {
     onPointerDown: onClose
-  }), React__default.createElement(ModalContainer$1, null, React__default.createElement(ModalContent$1, {
+  }), React__default.createElement(ModalContainer$2, null, React__default.createElement(ModalContent$2, {
     onClick: stopPropagation,
     onTouchStart: stopPropagation,
     onPointerDown: stopPropagation
-  }, React__default.createElement(Header$a, null, React__default.createElement(Title$f, null, "How would you like to pay?"), React__default.createElement(CloseButton$a, {
+  }, React__default.createElement(Header$b, null, React__default.createElement(Title$g, null, "How would you like to pay?"), React__default.createElement(CloseButton$b, {
     onPointerDown: onClose,
     "aria-label": "Close"
   }, React__default.createElement(fa.FaTimes, null))), React__default.createElement(Options, null, React__default.createElement(RadioOption, {
@@ -59353,27 +59752,27 @@ var PaymentMethodModal = function PaymentMethodModal(_ref) {
     onPointerDown: handleConfirm
   }, "Confirm")))));
 };
-var Overlay$4 = /*#__PURE__*/styled__default.div.withConfig({
+var Overlay$5 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__Overlay",
   componentId: "sc-1dxy6lr-0"
 })(["position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:1000;"]);
-var ModalContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+var ModalContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__ModalContainer",
   componentId: "sc-1dxy6lr-1"
 })(["position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1001;pointer-events:none;"]);
-var ModalContent$1 = /*#__PURE__*/styled__default.div.withConfig({
+var ModalContent$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__ModalContent",
   componentId: "sc-1dxy6lr-2"
 })(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px 24px;min-width:300px;max-width:90%;display:flex;flex-direction:column;gap:16px;pointer-events:auto;animation:scaleIn 0.15s ease-out;@keyframes scaleIn{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}"]);
-var Header$a = /*#__PURE__*/styled__default.div.withConfig({
+var Header$b = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "PaymentMethodModal__Header",
   componentId: "sc-1dxy6lr-3"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
-var Title$f = /*#__PURE__*/styled__default.h3.withConfig({
+var Title$g = /*#__PURE__*/styled__default.h3.withConfig({
   displayName: "PaymentMethodModal__Title",
   componentId: "sc-1dxy6lr-4"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.7rem;color:#fef08a;"]);
-var CloseButton$a = /*#__PURE__*/styled__default.button.withConfig({
+var CloseButton$b = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "PaymentMethodModal__CloseButton",
   componentId: "sc-1dxy6lr-5"
 })(["background:none;border:none;color:rgba(255,255,255,0.6);cursor:pointer;font-size:1rem;padding:4px;display:flex;align-items:center;&:hover{color:#ffffff;}"]);
@@ -59452,7 +59851,7 @@ var TimeWidget = function TimeWidget(_ref) {
   return React__default.createElement(Draggable, {
     scale: scale,
     cancel: ".time-widget-close,.time-widget-container,.time-widget-container *"
-  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$b, {
+  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$c, {
     onPointerDown: onClose,
     className: "time-widget-close"
   }, "X"), React__default.createElement(DayNightContainer, {
@@ -59469,7 +59868,7 @@ var Time = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$b = /*#__PURE__*/styled__default.p.withConfig({
+var CloseButton$c = /*#__PURE__*/styled__default.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);
@@ -59748,7 +60147,7 @@ var TradingMenu = function TradingMenu(_ref) {
     width: "500px",
     cancelDrag: "#TraderContainer",
     scale: scale
-  }, React__default.createElement(Container$O, null, React__default.createElement(Title$g, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
+  }, React__default.createElement(Container$O, null, React__default.createElement(Title$h, null, type.charAt(0).toUpperCase() + type.slice(1), " Menu"), React__default.createElement("hr", {
     className: "golden"
   }), React__default.createElement(ScrollWrapper, {
     id: "TraderContainer"
@@ -59780,7 +60179,7 @@ var Container$O = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TradingMenu__Container",
   componentId: "sc-1wjsz1l-0"
 })(["width:100%;"]);
-var Title$g = /*#__PURE__*/styled__default.h1.withConfig({
+var Title$h = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-1"
 })(["font-size:0.7rem !important;color:yellow !important;text-align:center;"]);
@@ -59974,6 +60373,7 @@ exports.CheckButton = CheckButton;
 exports.CheckItem = CheckItem;
 exports.CircularController = CircularController;
 exports.CraftBook = CraftBook;
+exports.DCWalletModal = DCWalletModal;
 exports.DailyTasks = DailyTasks;
 exports.DraggableContainer = DraggableContainer;
 exports.Dropdown = Dropdown;